HTML标签和属性的语义化 HTML教程认知集锦.doc

HTML标签和属性的语义化 HTML教程认知集锦 分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个XHTML元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让CSS使一个HTML元素看起来就像另一个HTML元素，比如用div来代替p标记标题。 首先是关于语义(Semantics)和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。strong,em用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。 其次，语义化的网页的好处，最主要的就是对搜索引擎友好，又了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。 具体的语义和用途在，XHTML1.0 TAG参考中都已经说明，这里将一些容易遗忘或者混淆的TAGS和属性予以补充。 Hx h1、h2、h3、h4、h5、h6,作为标题使用，并且依据重要性递减。h1是最高的等级。 例如： Example Source Code[] h1文档标题/h1 h2次级标题/h2 而不要使用 div class=title文档标题/div，或者span class=title文档标题/span.很明显搜索引擎对于后者是不会认为他是标题的。 p 段落标记，知道了p作为段落，你就不会再使用br/来换行了，而且不需要br/br/来区分段落与段落。p/p中的文字会自动换行，而且换行的效果优于br。段落与段落之间的空隙也可以利用CSS来控制，很容易而且清晰的区分出段落与段落。在利用行高(line-height)很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。 例如： Example Source Code[] p在利用行高(line-height)很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。/p ul、ol、li ul无序列表，很常见的到了大家广泛的使用，ol有序列表也挺常用。在web标准化过程中，ul还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持CSS的时候，导航链接仍然很好使，就是美观方面差了一点。 例如： Example Source Code[] ul li项目一/li li项目二/li li项目三/li /ul Example Source Code[] ol li第一章/li li第二章/li li第三章/li /ol dl、dt、dd dl就是定义列表。比如说词典里面的词的解释、定义就可以用这种列表。 例如： Example Source Code[] dl dt Dog/dt dd Acarnivorous mammal of the family Canidae./dd /dl Example Source Code[] dl dt上海滩/dt dd这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。 当年在香港播出以后，产生了巨大的轰动效应。/dd dt周润发/dt dd和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。 风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。/dd /dl cite、cite、q、blockquote 论坛和blog经常会用到引用别人的话，用q来标记简短的单行引用。Web浏览器会自动识别在q之间的内容。不幸的是，IE不能识别，并且有些时候，q会引起一些可访问性(Accessibility)的问题。正因为如此，一些人建议尽量不要使用q,手动的插入引用标记。在一个包含适当的类的span中加入单行的引用内容，那么就可以用CSS来给引用设计样式了，但是这个没有语义上的意义。您可以读读Mark Pilgrim写的The Qtag()关于处理q相关问题的看法。 对于那些一段或者好几段的长篇引用，就应当使用blockquote了。CSS可以用来定义引用的样式。注意，一段文章是不可以直接放在blockquote中的，引用的内容还必须包含在一个元素中，通常是p。属性cite既可以与q一起用，也可以与blockquote一起用，用来提供引用内容的来源地址。需要注意的是，如果你使用span来代替q标记引用内容,那么你就不能使用cite属性了。 例如： Example Source Code[] cite Designing with Web Standards/cite is an excellent book by Jeffrey Ze