HTML是一种标签语言,通过在内容上附加各种标签,达到在浏览器中正确展示的目的。正确地编写HTML,不仅是制作网页的必要条件,也是对网页进一步处理、添加CSS和Javascript效果的前提。 编写HTML语言的关键,就是把标签用对,使它能够正确传达语义信息,不要使用无含义或错误含义的标签。下面就是一份我整理的HTML语言的编写指南。 一、块级元素 div 含义:页面内容的一个独立组成部分。 常见的用途有三种:1)划分页首、页尾、页边栏或导航栏等等;2)表示页面的分栏;3)将文章进一步分成几个部分,比如正文、评论、文章的元数据等等。
h1, h2, h3, h4, h5, h6 含义:内容的标题。 h1是最高一级的标题,下一层标题使用h2,依次类推。除了h1以外,其他5个级别标题在一个页面中都可以出现多次,h1只能出现一次。
p 含义:表示段落。 它是文章内容的基本组成部分,也可以用来表示诗歌中的一节。p与div的主要区别是,前者表示文本段落,后者表示更广义的段落。 在P标签中,不应该再包含其他块级元素。此外,也不应该使用空的p标签。
blockquote 含义:表示一段引用自其他来源的独立文本。 它引用的文本通常有一定的长度,以块级元素的形式出现。 blockquote应该总是与cite标签配合使用,cite用来指明引用材料的来源。
在浏览器的默认样式中,blockquote有文本缩进的效果,但是不要单单因为这个原因,而使用它。 blockquote有两个属性,第一个是cite属性,用来指明引用材料的URI地址;第二个是title属性,用于提供引用材料的相关信息。
二、行内元素 a 含义:与href属性搭配使用时,链接至外部链接,或者同一页的某个锚点。
abbr 含义:表示内容是某个术语或短语的缩写形式,它有一个title属性,用来指明缩写所代表的原始词组。
acronym 含义:表示内容是一个词组的首字母简称,比如BBC、WTO。 它有一个title属性,用来指明属性所代表的原始词组。 acronym与abbr的主要区别是,前者往往是一个可以独立使用的词,而后者不是。这意味着acronym肯定是abbr,但是abbr不一定是acronym。
em 含义:表示强调。 em所指明的内容,应该比其周围的内容更重要。 注意,如果你只是想表示斜体或者引用书名,那就不要使用em标签,而是用CSS命令(font-style:italic)。
strong 含义:表示比em更强的强调。
address 含义:表示某个特定文档或文档的某个部分的联系信息或联络方式。 注意:1)所有的联络方式都可以用这个标签表示,而不仅仅是地址。2)它是一个块级元素,不要用它来单独标识某个Email地址或电话号码。
cite 含义:表示引述的来源。 它用来指明书目信息、个人引语、或者参考文献中的外部资源。
dfn 含义:用来表示一个定义。
del 含义:表示该信息已被删除。 通常用于日期和时间,表示文档已经发生了变化。 ins 含义:与del的作用正好相反,表示修订后插入的内容。 code 含义:表示程序代码。 samp 含义:表示程序代码的输出结果。 kbd 含义:表示由用户键入的文本。 它很少使用,但是在某些场合,你想演示如何使用一个程序,它就会有用。它通常与code和samp结合使用。 var 含义:表示程序中的变量或参数,与code, samp, kbd结合使用。 q 含义:表示一个较短的引语。 注意:浏览器对这个标签的支持很不好,因此不推荐使用。 sub/sup 含义:表示下标/上标。 span 含义:用来标识其他标签不适合表示的内容,是一个通用型的行内标签。 三、列表元素 ul, ol, li 含义:表示一组相同格式的信息。 当你有一张清单的时候,就应该使用列表元素。ul是无序列表,通常前面有一个强调符号;ol是有序列表,前面通常采用数字编号。 dl, dd, dt 含义:表示一个术语列表。 dt表示术语,dd表示该术语的定义,可以为单个术语提供多个定义。
四、表格元素 参见我整理的《精通HTML表格的使用》一文。 五、分割元素 br 含义:表示换行。 注意,除了少数场合(比如诗歌中的分行),应该尽量避免使用这个标签,因为它并没有特别的语义含义,而且分行的视觉效果完全可以通过p标签、列表标签和CSS命令达到。 hr 含义:表示两个部分之间用一根水平直线分割。 事实上,不用这个标签,也有办法显示水平直线。这个标签的唯一优势,也许就是在没有CSS的场合,它可以产生视觉分割的效果。 六、不建议使用的元素 以下的标签都没有明确的语义,只涉及到视觉效果,很可能在以后版本的HTML语言中被废除。建议不要使用。
七、已经被废除的标签 下面的标签已经被废除,不应该继续使用了。
[参考文献] * Semantics, HTML, XHTML, and Structure ( |
|
来自: 多福老人43 > 《html代码学习园地》