对于一个html文档,怎么书写符合xhtml 1.0标准?
第一:html文档第一行加入版本类型声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
用来指明文件语法的定义,这里声名采用XHTML1.0的宽松(transitional)标准,除此之外还有 严格标准(Strict)和框架标准(Frameset)。而我们最常用的就是宽松标准。
这个声明文件大家是不用背下来的,在做新页面的时候,复制一个过来就可以了。
第二:我们习惯给HTML标签里加入可扩展标记语言命名空间(xmlns)的声明:
<html xmlns="http://www.w3.org/1999/xhtml" >
这个同样是不需要记忆的,直接复制就可以了。
第三:文档分为head 和body两个部分。
html文档中在head关标签后面一定会跟着body的开标签。html的开标签下面一定跟着head的开标签,body的关标签下面一定是html的关标签,这中间都是不能插入任何东西的。head和body在一个html中有且仅有一个。如下:
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>
在head里面放置的内容是不会再页面里显示的,head中的title标签会显示在页面的tab部分或者是顶端。要在页面中显示的内容放在body里,我前面说到的html的标签(http://hi.baidu.com/kuntakinte/blog/item/f7e8ad10a9589bf6c3ce79dc.html)都是放在body里的。head部分可以除了title,必备的还有字符转码声名。常用还有链接到css的 link,链接到js的script,放置关键字或者描述的meta等等。
第四:所有标签都必须有相应的结束标签
标签可以分为成对标签,或者是单标签。成对标签比如 div span ol ul li select option table tr th td dl dt dd em var span等等,而单标签就比较少了 比如 input img br iframe 等。完整的成对标签如下:
<div>这是一个快标签</div> 或者<ol><li>列表项一</li><li>列表项二</li><li>列表项三</li></ol>;
可以看到 每一个标签都有开标前和关标签组成,内容放在开和关标签之间。
而单标签的标签应该这么写: <br/> <img src="images/1.gif" alt="图片描述"/> <input type="button" value="按钮"/> ;像这样的单标签,是不可能再嵌套任何内容的。而我们把斜线(/)放在标签的后尖括号前面,表示标签结束。这点跟成对标签有很大区别。
(其他标签的特点,不如ol或者ul下面必须跟li,而li必须有ul或者ol做父标签等等,我会专门写一篇,这里不做赘述。)
第五:所有标签的元素和属性的名字都必须使用小写
这个很容易做到,也很好理解。当你习惯了用小写,你就会觉的使用大写十分别扭。统一用小写也显得代码十分整齐。
很多人也注意到,我们用大写也完全没有问题,其实这是xhtml1.0向前兼容的一种体现,但是我们还是要严格按照要求来。
第六:所有标签必须合理嵌套,
比如正确的嵌套<div><span><var>1111</var></span></div>
就像一个一个大盒子套了一个小盒子 又套了一个小盒子,当然还可以继续嵌套,看起来十分对称。
而不正确的嵌套 <div><span><var>1111</var></div></span>。这里的标签是不对称的。你没法一层一层的拆开盒子,这就是错误的。
这个似乎为新手来说还有一定得难度,应该是没有一个很好的书写习惯,所以导致很长一段时间,新手都会犯嵌套不合理的错误。怎么样才能不不犯这种错误,其实很简单,就是有个好的书写习惯,每当写一个开标签,就接着把关标签写出来,要嵌套的内容在开标签和关标签中间些;而不是先写了内容最后再写关标签。另外就是子标签的缩进。 这样不但会减少标签嵌套不合理的问题,还会让你的代码看起来赏心悦目。
第七:给所有属性都赋值。
也就是属性值不能为空,这个也很好理解,比如input的type属性。img的alt属性,都不可以为空。
第八:img必须要有alt属性。
其实很多前端开发人员,不习惯给img设alt属性。其实alt的作用非常大,首先在图片不能正常显示的时候,图片所在的位置会出现alt里对图片的描述,让用户知道这个地方本来是什么样的图片;其次部分浏览器支持 图片hover状态时显示alt的文字描述;再次,搜索引擎在搜索图片时,alt里设置的属性是其搜索的重点。
第九: < > & 等需要被转码表示
很简单的例子,如果我想让用户在页面里看到的信息是 <div>是一个块属性标签。我们是不能直接打出来的。 因为浏览器会把<div>当成一个标签来处理,而不会显示出来。这时候我们就需要转码表示
<div>是一个块属性标签。
而&刚好相反,用的情况也比较少,当&不是实体的一部分的时候,我们需要给它转码 &
基本上需要注意的就以上这些,熟悉了这些,写一个合格的xhtml文件应该不在话下。