HTML 标签的概括说明

制作网页的第一步，就是学会编写HTML语言。

HTML是一种标签语言，通过在内容上附加各种标签，达到在浏览器中正确展示的目的。正确地编写HTML，不仅是制作网页的必要条件，也是对网页进一步处理、添加CSS和Javascript效果的前提。

编写HTML语言的关键，就是把标签用对，使它能够正确传达语义信息，不要使用无含义或错误含义的标签。下面就是一份我整理的 HTML 标签的概括性解释。

 

一、块级元素

div

含义：页面内容的一个独立组成部分。

常见的用途有三种：1）划分页首、页尾、页边栏或导航栏等等；2）表示页面的分栏；3）将文章进一步分成几个部分，比如正文、评论、文章的元数据等等。

示例：

<div id="header">页面的头部</div>

h1, h2, h3, h4, h5, h6

含义：内容的标题。

h1是最高一级的标题，下一层标题使用h2，依次类推。除了h1以外，其他5个级别标题在一个页面中都可以出现多次，h1只能出现一次。

示例：

<h1>一级标题</h1>

<h2>二级标题</h2>

p

含义：表示段落。

它是文章内容的基本组成部分，也可以用来表示诗歌中的一节。p与div的主要区别是，前者表示文本段落，后者表示更广义的段落。

在P标签中，不应该再包含其他块级元素。此外，也不应该使用空的p标签。

示例：

<p>这是一个段落。</p>

blockquote

含义：表示一段引用自其他来源的独立文本。

它引用的文本通常有一定的长度，以块级元素的形式出现。

blockquote应该总是与cite标签配合使用，cite用来指明引用材料的来源。

示例：

<blockquote>
不是在沉默中爆发，就是在沉默中灭亡。
<cite>鲁迅《为了忘却的纪念》</cite>
</blockquote>

在浏览器的默认样式中，blockquote有文本缩进的效果，但是不要单单因为这个原因，而使用它。

blockquote有两个属性，第一个是cite属性，用来指明引用材料的URI地址；第二个是title属性，用于提供引用材料的相关信息。

示例：

<blockquote cite="http://w3c.org/" title="文章的标题，作者，发表日期">"我正在此处引用W3C的标准。"</blockquote>

 

二、行内元素

a

含义：与href属性搭配使用时，链接至外部链接，或者同一页的某个锚点。

示例：

<a href="chapter2.html">第二章</a>

abbr

含义：表示内容是某个术语或短语的缩写形式，它有一个title属性，用来指明缩写所代表的原始词组。

示例：

<abbr title="Europe">Eur</abbr>

acronym

含义：表示内容是一个词组的首字母简称，比如BBC、WTO。

它有一个title属性，用来指明属性所代表的原始词组。

acronym与abbr的主要区别是，前者往往是一个可以独立使用的词，而后者不是。这意味着acronym肯定是abbr，但是abbr不一定是acronym。

示例：

<acronym title="World Wide Web">WWW</acronym>

em

含义：表示强调。

em所指明的内容，应该比其周围的内容更重要。

注意，如果你只是想表示斜体或者引用书名，那就不要使用em标签，而是用CSS命令（font-style:italic）。

示例：

<em>我正在强调这句话。</em>

strong

含义：表示比em更强的强调。

示例：

<strong>我正在以更大的强度，强调这句话。</strong>

address

含义：表示某个特定文档或文档的某个部分的联系信息或联络方式。

注意：1）所有的联络方式都可以用这个标签表示，而不仅仅是地址。2）它是一个块级元素，不要用它来单独标识某个Email地址或电话号码。

示例：

<address>
<a href="../People/张三/">张三</a>,
<a href="../People/李四/">李四</a>,
$ 日期：1999/12/24 23:37:50 $
</address>

cite

含义：表示引述的来源。

它用来指明书目信息、个人引语、或者参考文献中的外部资源。

示例：

<cite>《哈利波特系列小说》</cite>的作者是J.K.罗琳。

dfn

含义：用来表示一个定义。

示例：

<dfn>Internet Explorer</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表示该术语的定义，可以为单个术语提供多个定义。

示例：

<dl>
<dt>虚怀</dt>
<dd>胸襟宽大,虚心谦退</dd>
<dt>虚荣</dt>
<dd>表面上的荣耀；虚假的荣名</dd>
<dt>虚构</dt>
<dd>凭想像编造出来</dd>
</dl>

四、表格元素

 

从结构上看，表格可以分成表头、主体和表尾三部分，在HTML语言中分别用thead、tbody、tfoot表示。

代码示例：

<table>
<thead>
　　<tr> ...header information...
</thead>
<tfoot>
　　<tr> ...footer information...
</tfoot>
<tbody>
　　<tr> ...first row of block one data...
　　<tr> ...second row of block one data...
</tbody>
<tbody>
　　<tr> ...first row of block two data...
　　<tr> ...second row of block two data...
　　<tr> ...third row of block two data...
</tbody>
</table>

 

这里有三个注意点：

1）thead和tfoot在一张表中都只能有一个，而tbody可以有多个。

2）tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要。

3）thead、tbody和tfoot里面都必须使用tr标签。

 

 

五、分割元素

br

含义：表示换行。

注意，除了少数场合（比如诗歌中的分行），应该尽量避免使用这个标签，因为它并没有特别的语义含义，而且分行的视觉效果完全可以通过p标签、列表标签和CSS命令达到。

hr

含义：表示两个部分之间用一根水平直线分割。

事实上，不用这个标签，也有办法显示水平直线。这个标签的唯一优势，也许就是在没有CSS的场合，它可以产生视觉分割的效果。

 

六、不建议使用的元素

以下的标签都没有明确的语义，只涉及到视觉效果，很可能在以后版本的HTML语言中被废除。建议不要使用。

* big
* small
* b
* i
* tt
* pre

 

七、已经被废除的标签

下面的标签已经被废除，不应该继续使用了。

* applet
* center
* font
* dir
* isindex
* menu
* s
* strike
* u