HTML元素

HTML中，一个HTML元素是HTML文件的一个基本组成单元。HTML文件采用采用树形结构安排HTML元素。更进一步的说，一个HTML元素是一个满足一项或多项DTD要求的元素。HTML元素可以拥有属性和内容，可以是标题、段落、链接、列表、嵌入媒体或者其他的任何符合DTD要求的格式。

## 概述

### 语法

在HTML语法中，大多数元素编写一个开始标记和结束标记，与其之间的内容。HTML标记是由元素名称，包围于两侧之小于号与大于号之括号所组成。其结束标记拥有一斜线位与小于号后，有别于其起始标记。例如：一个段落是由`p`元素所代表，其被写成

```html5
<p>在HTML语法中，大多数元素编写……</p>
```

然而，并非所有的此类元素需要结束标记，甚至是开始标记。某些元素，即所谓的“void空元素”，并无结束标记。典型的例子即`br`元素，其表示一个显著之换行，像是一首诗或一个住址。一个空元素的行为是预先定义的，并且它不能包含任何内容或其他元素。例如：在电影《海底总动员》中的牙医师的地址将被写成

```html5
<p>P. Sherman<br>42 Wallaby Way<br>Sydney</p>
```

HTML元素可以是容器元素或者空元素。

容器元素结构如下：

- 一个开始标记（形如`&lt;tag&gt;`），表示一个元素的开始，标记本身还可以包含属性。
- 任意数量的属性（和属性的值）。
- 内容（文本和／或子元素）。
- 一个结束标记，使用和开始标记完全相同的元素名但前面附加一个斜线字符（形如`&lt;/tag&gt;`）。并非所有的元素都要求结束标记，有些元素的结束表示是可有可无的，有些是一定不可以有的。

空元素指仅包含一个标记，该标记既是开始标记同时也是结束标记（形如`&lt;tag /&gt;`）。空元素可以有任意数量的属性。在XHTML规范中，标记中的斜线符号是必须的。要求使用一个单独标签开启与关闭元素。若要指定其为一个空元素，符号`/`包含于标记之结尾（不能与位于结束标记中的开始的符号`/`混淆）。例如：

```html5
<p>P. Sherman<br />42 Wallaby Way<br />Sydney</p>
```

英语中有时HTML元素也被称为“tag”，严格的说“tag”是指元素的开始或结束标记。

HTML属性用来指示元素的附加的性质。放在开始标记中。例如：`abbr`元素，其表示缩写，预计一个`title`属性包含其开始标记。将被写成

```html5
<abbr title="abbreviation">abbr.</abbr>
```

<image>

在HTML中，元素（和属性）名字可以是大写或者小写，但在XHTML中，必须是小写。大写是旧的用法，并且是HTML规范中说明的方法，但是小写更为通用。

### 相关标准

HTML元素是在自1995年以来发布的一系列免费开放标准中定义的，最初由IETF以及随后由W3C制订。

1990年代的浏览器大战期间，网页浏览器的软件商开始不断的添加自定义的元素，有些被后来的标准吸收。并非所有的软件商都支持这些非标准的元素，一般对于非标准的元素，或者是忽略，或者是导致显示不正确。

1998年，XML（一种简化的SGML）引入一种方法，允许任何人开发自己的元素并融合到XHTML文件中，使用支持XML的浏览器（用户代理）可以浏览任意元素。

而后采用XML兼容的办法，重新制订了HTML 4.01标准，XHTML 1.0（扩展的HTML）。二者的元素相同，绝大多数情况下，XHTML 1.0文件的元素在HTML 4.0文件中是合法的。本文除非另外指出，应用的都是基于SGML的HTML，对于XHTML多数情况下仍然适用（二者区别见HTML）。

### 当前的状态

自从HTML第一版以来，已经有数个元素因为过期，不再新的标准中推荐使用或者干脆删除。

目前由于并存三种HTML 4.01／XHTML 1.0 DTD标准，而使得HTML的验证变得复杂起来，这三种标准分别是：

- Transitional，包含过期的元素。该标准制订的目的是提供一个过渡的时期，使得HTML作者可以逐渐适应新的扩展标准。
- Frameset，另一种过渡标准，但是允许作者使用frameset。
- Strict，符合现代（1999年以后）的标准。

HTML第一个标准（HTML 2.0）包含四个过期的元素。其中一个在HTML 3.2中被列为无效。所有的四个在HTML 4.01 Transitional中都被列为无效，HTML4.01 Transitional标准此外还将另外十个元素定义为无效。以上这些元素再加两个在HTML 4.01 Strict中同样被定义为无效。由于frame元素在显示方面的诸多问题以及其功能已经可以由其他元素替代，在未来的标准中不再保留，虽然目前在Transitional和Frameset DTD中仍然有效。

（严格地说，目前的XHTML标准XHTML 1.1（2001）根本不支持frame。基本上与XHTML 1.0 Strict相同，但是又包含了Ruby markup模块。）

一个经常导致错误理解的原因是不严格地使用deprecated（过期）一词来泛指过期的和无效的，以及今后一段时间过期的不同的状态。

### 展示和行为

根据分离原则，HTML的功能在于给一个文件的内容增加语义和结构的信息。增加文件的展示和行为的功能，例如增加CSS stylesheets和图形来增加文件的展示功能；通过链接到外部文件和脚本增加与用户交互的行为。User agent也可以根据作者所提供的stylesheet在不同的介质（显示器，打印机）上展示不同效果。同时保持语义上的一致。

## 文件结构元素

这是HTML文件的根元素，所有其他的元素均包含在其中。

在HTML 2.0中标准化，目前仍然在使用。

包含HTML标题定义、外部、脚本代码、格式代码等处理信息和元数据。

在HTML 2.0中标准化，目前仍然在使用。

（所包含的子元素见#文件头元素）

包含HTML文件的内容.

在HTML 2.0中标准化，目前仍然在使用。

（所包含的子元素见#文件内容元素）

## 文件头元素

base

该元素的属性href的值给文件中所有的相对的`href`及其它链接提供一个基本的url路径。必须出现在任何引用外部资源的元素之前。在每个HTML文件中，只允许出现一个`base`元素。`base`元素没有内容。其另外一个可选属性target的值可以为：_blank、_parent、_self、_top、framename，规定页面中所有的超链接和表单在何处打开；该属性会被每个具体链接中的target属性覆盖。

在HTML Tags中曾经提到一个开发版的BASE元素；在HTML 2.0中得以标准化；目前没有变化。

basefont

指定一个基本的字体，包括字符的大小，字型和颜色，与`font`元素搭配使用。已经过期，推荐使用CSS。

在HTML 3.2中标准化；在HTML 4.0 Transitional中过期；并已于HTML 4.0 Strict中失效。

isindex

`isindex`既可以出现在文件头，也可以出现在文件体内，但是只能出现一次。需要服务器端的搜索引擎的支持。

出现在文件头表示这个文件是一个可搜索的索引。在页面上显示成一个单行的文本输入框用来输入关键词。页面被提交后，query string被加到当前的URL后面，输出的文件搜索的关键字被加亮显示。一般来说，如果服务器支持这个功能的话会自行的加入isindex。

ISINDEX在HTML Tags出现，在HTML 2.0中标准化。在HTML 4.0 Transitional中过期。在HTML 4.0 Strict中是无效的元素。

link

指定连结到其他文件，如previous和next连结，或替代版本。常见的用途是连结至外部的CSS样式表，使用形式：

`&lt;link rel="stylesheet" type="text/css" href="''url''" title="''description_of_style''"&gt;`

较少见但重要之用途是透过使用微格式持续性支援导览提示。若干常见之关是已被定义，可能透过浏览器界面传达给使用者，而非直接于网页中。

`&lt;link rel="next" href="''url''"&gt;`

文件之`head`元素可能包含任何数量之`link`元素。该`link` 元素拥有HTML属性，但无内容。

LINK存在于HTML Internet Draft 1.2，且已在HTML 2.0中标准化；目前没有变化。

meta

可用于指定关于文件之额外中继资料，如作者、出版日期、有效日期、页面描述、关键字，或者透过其他header元素及

HTML属性之其他未提供的资讯。因其共通性，`meta`元素指定关联的key-value pairs。一般情况之下，meta元素传达关于文件之隐藏资讯。若干meta标签可被使用，上述之全部应被嵌套在head元素中。每个meta元素之特定目的是由其属性来定义。

在一种形式中，`meta`元素可指定应经由实际内容之前的网页服务器寄送之HTTP标头，例如：

`&lt;meta http-equiv="foo" content="bar"&gt;`

本示例指定页面应提供一个名为`foo`的HTTP标头，其值为`bar`。

在一般形式中，`meta`元素指定HTML网页的`name`及关联的`content` HTML属性描述方面。为了防止可能发生歧义，一个可选取之第三方属性：`scheme`可被支援于指定一个定义该key及其值的含意之语意框架：例如：

`&lt;meta name="foo" content="bar" scheme="DC"&gt;`

在本范例中，`meta`元素标识自身为包含来自DC或都柏林核心资源描述框架的`foo`元素，其值为`bar`。

在HTML 2.0中标准化；目前没有变化。

使用于包含泛型物件在文件标头中。虽然很少使用在`head`元素中，但也可能用来撷取外部资料，并将之与目前的文件关联。

在HTML 4.0中标准化；目前没有变化。

可作为一个容器用于指令码说明或连结至外部指令码，包含可选取之`src`属性。此外，使用于文件主体中以动态生成两个区块或内联内容。

在HTML 3.2中标准化；目前没有变化。

指定文件的CSS样式，其形式通常为：

`&lt;style type="text/css"&gt; ... &lt;/style&gt;`

既可作为一个容器之样式说明，亦可连结至外部CSS样式表，例如，在CSS中，与表单中的`@import`指令：

`&lt;style&gt; @import ''url''; &lt;/style&gt;`

在HTML 3.2版本中标准化；目前没有变化。

定义文件标题。在每个HTML及XHTML文件中为需求的。使用者代理可以不同方式使用标题，例如：

- 网页浏览器通常将之显示在标题列中，当视窗开启时，或者（在适用的情况）显示在工作列中，当视窗最小化时。
- 当储存该页面时可为预设档案名称。
- 搜索引擎之网络编目程式可能会特别注意在标题中使用的文字。

`title`元素不能包含其他元素，仅文字。只有一种`title`元素在文件中被允许。

TITLE存在于HTML标签，并在HTML 2.0中标准化；目前没有变化。

## 文件内容元素

在视觉化浏览器中，可显示元素可呈现为区块或内行。虽然所有元素是文件序列之一部分，但是区块元素 出现在其父元素中：

- 作为不跨行之矩形物件。
- 使用区块边距，其宽度及高度内容可在周边元素中被单独设定。

反言之，内行元素被视为文件文字流之部分；其无法拥有边距、宽度或高度设定，并且跨行。

### 区块元素

<image>

区块元素（或称区块层级元素）拥有矩形结构。在预设情况下，这些元素将占据父元素的整个宽度，因而不允许任何其他元素占据已被其所占的同一水平空间。

区块元素的矩形结构经常称之为盒模型，并由几个部分所组成。每个元素包含以下内容：

- 一个块元素的内容（content）是放置在一个块元素的开启和关闭标记之间的实际文字（或其他媒体）。
- 一个块元素的留白或称填充（padding）师元素边框与元素内容之间的空间。其仍构成上述块元素的组成部分。padding也是块元素在物理上的一部分。不应被用于建立两个块元素之间的空白。任何背景样式分配到块元素，例如背景图像或色彩，将在padding内可见。增加块元素的padding的尺寸，则将增加块元素所占的尺寸。
- 一个块元素的边框（border）是元素的绝对末端，并围成块的周围。边框之厚度的增长会增加块元素尺寸。
- 一个块元素的边距或称外边距（margin）是环绕块元素周围之空白。任何其他元素之content、padding及border将不允许输入该区域，除非迫于一些进阶的CSS布局。使用多数的标准DTD，margin在不同元素的左边和右边将互相推离。另一方面，margin在元素的上方及下方，将不堆叠或相互交融。这意味着位于该元素之间的空白将与较大的margin一样大。

上述部分仅指CSS渲染的具体实施，并与HTML元素本身无关。

#### 基本文字

p

建立一段落，也许为最常见之区块层级元素。

`p`在HTML Tags中已经存在，并且在HTML 2.0中标准化；目前仍在使用。

h1 h2 h3 h4 h5 h6

不同层级之section标题。`&lt;h1&gt;`界定为最高层级标题，`&lt;h2&gt;`为下一层级（次级section），`&lt;h3&gt;`又低于上一层级，依此类推直到`&lt;h6&gt;`。有时其又统称为`&lt;h''n''&gt;`标记，n表示任何有效之层级标题。

多数视觉化浏览器预设将标题显示为大型粗体字，虽然其可被CSS覆盖。事实上，Heading元素并非只用于建立大型字或粗体字，其不应使用于显示样式化文字。反言之，其描述了文件之结构和组织。部分程式利用其产生轮廓及表格内容。

Headings在HTML Tags中已经存在，并且在HTML 2.0中标准化；目前仍在使用。

#### 列表

定义列表（Definition List）是一种特殊列表，通常包含一系列“术语”及其“定义”。定义列表组成的名称-值组（先前至HTML5定义成一个定义清单，并在早期版本之HTML5被称之为关联清单）。定义列表之目的为“术语及定义、中继资料主题和值、问题及答案，或者名称-值资料的任何其他群组”之群组。

`DL`在HTML Tags中已经存在，并且在HTML 2.0中标准化；目前仍在使用。

在定义列表（先前定义术语在定义清单中）中的名称。

`DT`在HTML Tags中已经存在，并且在HTML 2.0中标准化；目前仍在使用。

定义列表（先前的一个术语之定义，在定义清单中）中的值。

`DD`在HTML Tags中已经存在，并且在HTML 2.0中标准化；目前仍在使用。

有排序（枚举）之编号清单。`type`元素可用于指定排序类型，但CSS样式表提供了更多控制：`{list-style-type: ''foo''}`。其预设为阿拉伯数字编号。若要使用`type`属性，请使用`<ol type=`"foo">，以下列项目之一取代`''foo''`：

- `A`表示A, B, C...
- `a`表示a, b, c...
- `I`表示I, II, III...
- `i`表示i, ii, iii...
- `1`表示1, 2, 3...

`ol`在HTML Internet Draft 1.2中已经存在，并且在HTML 2.0中标准化；目前仍在使用。

未排序（项目符号）清单。CSS样式表可用于指定其项目符号：`{list-style-type: foo}`。其预设项目符号为一个空心圆。

`ul`在HTML Tags中已经存在，并且在HTML 2.0中标准化；目前仍在使用。

在排序（`ol`）或未排序（`ul`）清单中之列表项目。

`li`在HTML Tags中已经存在，并且在HTML 2.0中标准化；目前仍在使用。

目录清单。该元素之原始目的从未广泛支援；已被`&lt;ul&gt;`替代，故不建议使用。

`DIR`在HTML Tags中已经存在，并于HTML 2.0中标准化；在HTML 4.0 Transitional中不建议使用；在HTML 4.0 Strict中已失效。

#### 其他区块元素

address

文件作者之联络资讯。

`ADDRESS`在HTML Tags中已经存在，并且在HTML 2.0中标准化；目前仍在使用。

blockquote

一个区块层级引用，用于当quotation包含区块层级元素，如段落。`cite`属性可能提供来源，且必须是完全合格之统一资源标志符。

区块quotation的演示文稿在视觉化浏览器中经常从其两个margin缩进之。

`BLOCKQUOTE`在HTML Internet Draft 1.2中已经存在，并且在HTML 2.0中标准化；目前仍在使用。如需更多资讯，请参见blockquote元素。

Centered Text

建立一个区块层级之置中对齐区域。已由使用CSS样式表定义置中对齐`&lt;div&gt;`或其他元素之方式替代，故不建议使用。

在HTML 3.2中标准化。

标记内容中已删除的section。该元素亦使用为inline。

在HTML 4.0中标准化；目前仍在使用。

一个区块层级之逻辑区。没有语意的通用元素用于区分文件的section，通常为目的，例如由CSS样式表或DOM调用来控制之演示文稿或行为。

在HTML 3.0 Drafts中出现；在HTML 3.2中标准化；目前仍在使用。

水平线。表象规则亦可被CSS样式表绘制。

在HTML 2.0中标准化；目前仍在使用。

标记一个已插入内容之section。该元素亦使用为inline。

在HTML 4.0中标准化；目前仍在使用。

noscript

指令码的替代内容。不同于指令码（script），其只能作为区块元素。

在HTML 4.0中标准化；目前仍在使用。

表示是预先格式化的文字。在元素内的文字通常会被显示为等宽字型，就如同是在文字档案中的文字一样（参见ASCII艺术）。尽管浏览器在其他的HTML元素中会忽略空白字元，但在`pre`中，空白会被视为是作者故意为之而被呈现出来。（在CSS的属性：`{white-space: pre; font-family: mono-space;}`，其他的元素也可以相同的方式呈现。）该元素可包含任何inline元素，但下列除外：影像（`IMG`）、物件（`OBJECT`）、大型字（`BIG`）、小型字（`SMALL`）、上标（`SUP`）及下标（`SUB`）。

`PRE`在HTML Internet Draft 1.2中已经存在，并且在HTML 2.0中标准化；目前仍在使用。

script

在文件中放置指令码。在head中以及在inline内容中也具有效果。

注意：`SCRIPT`本身并非区块或内行元素；其本身不应全部显示，但其可包含说明以动态生成区块或内行内容两者。

在HTML 3.2中标准化；目前仍在使用。

### 行内元素

行内元素无法直接放置在`body`元素中；其必须完全嵌套于区块及元素中。

#### 锚

a

锚元素之所以称为“锚”，是因为网页设计者可以用它们来将URL和网页上的一些文本“系”（anchor）在一起。当用户在浏览器中查看网页时，他们可以通过点击文本来激活链接，以访问链接中URL指向的页面。

在HTML中，锚既可以是超级链接的来源，也可以是目标端。

通过使用`href`属性（hypertext reference），锚可以成为到文档中另一个部分的链接，也可以通过使用一个外部URL来指向另一个资源（如网页）。

或者（也可以是同时），通过使用`name`或`id`属性，使这个元素成为目标。URL可以通过片段标识符链接到这个目标。现在，任何元素都可以通过使用`id`属性来变成一个锚，因此`&lt;a name="foo">`不再必要。

`a`在HTML Tags中已经存在，并且在HTML 2.0中标准化；目前仍在使用。

#### 短语元素

##### 常用的短语元素

表示本元素是一个缩写，title属性中可以包含全称：

`&lt;abbr title="微型计算机"&gt;微机&lt;/abbr&gt;`

在HTML 4.0中标准化，目前仍然在使用。

acronym

与`abbr`元素类似。（拼音文字中Acronym是指大写的首字母组合成的词，比如Hyper-Text Markup Language的Acronym是HTML; Abbreviation的概念更广泛些，可以是将一个较长的词后面部分去掉，用剩下的部分表示词的意思。中文中没有类似的区别）:

`&lt;acronym title="Hyper-Text Markup Language"&gt;HTML&lt;/acronym&gt;`

在HTML 4.0中标准化，目前仍然在使用，在HTML5中不支持。

表示本元素是一个词条的定义。

DFN 在HTML Internet Draft 1.2中已经存在，在HTML 3.2中完全标准化，目前仍然在使用。

强调本元素，传统上显示为斜体。

EM在HTML Internet Draft 1.2中已经存在，在HTML 2.0中完全标准化，目前仍然在使用。

加重一个词条，传统上显示为粗体。

有助听功能的浏览器可能会使用不同的声音来表述加重的词。

STRONG在HTML Internet Draft 1.2已经存在，在HTML 2.0中完全标准化，目前仍然在使用。

##### 计算机术语元素

这些与元素主要用于方便显示计算机软件编码和与使用者交互（`&lt;code&gt;`）；显示源代码变量（`&lt;var&gt;`）；用户输入（`&lt;kbd&gt;`）；以及终端输出（`&lt;samp&gt;`）。

显示一段代码。通常用等宽字体显示：`Code snippet.`

CODE在HTML Internet Draft 1.2中出现，并且在HTML 2.0最终标准化；目前仍在使用。

显示一段程序或脚本输出的样本。

SAMP在HTML Internet Draft 1.2中出现，并且在HTML 2.0最终标准化；目前仍在使用。

键盘 - 显示用户输入的文字。

KBD在HTML Internet Draft 1.2中出现，并且在HTML 2.0最终标准化；目前仍在使用。

显示一个变量。

VAR在HTML Internet Draft 1.2中出现，并且在HTML 2.0最终标准化；目前仍在使用。

##### 视觉效果

视觉效果的元素仅仅对可视浏览器起作用，因此不推荐使用，如果可能应该使用层叠样式表。部分元素在HTML 4 / XHTML 1.0中被宣布过期或者无效的，其它的在当前的XHTML 2.0草案 XHTML 2.0中被定义为无效的。当前的HTML 5草案 HTML 5中，b, i和small还是有效的.

在可能的情况下，将字体设置成粗体。（等效的CSS是：`{font-weight: bold}`。）`&lt;strong&gt;...&lt;/strong&gt;`在可视的浏览器中有相同的效果，但是有更强的语义。

B在HTML Internet Draft 1.2中定义，并且在HTML 2.0中标准化，目前仍在使用。

### 图形和对象

`src`属性指定图像的URL。`alt`属性提供图像的替代文字。IMG由马克·安德森所提出并实作在NCSA Mosaic网页浏览器。

IMG在HTML Internet Draft 1.2中定义，并且在HTML 2.0中标准化，目前仍在使用。

## 非标准元素

blink

文本闪烁特效。BLINK源自于Netscape Navigator。由于该特效可能会对光敏性癫痫患者产生负面影响，在HTML 2.0后被列为过期或无效。

marquee

文本滚动特效。MARQUEE源自于Internet Explorer。由于该特效可能会对光敏性癫痫患者产生负面影响，在HTML 4.01后被列为过期或无效。

## 注解

在HTML中的注解（以及相近的XML, SGML, SHTML.）语法与SGML相同。

不同于其它HTML标签，注解不支援巢状结构。

`&lt;!--注解一&lt;!--注解二-->注解三-->` 看起来会是`注解一&lt;!--注解二` 后面拖着一段没有被标签包起来的文字“注解三-->”。

注解可以出现在文件的任何地方，甚至可以在文件类型宣告之前。

（在`&lt;!DOCTYPE HTML&gt;`之前）

HTML的解释器会忽略注解，只要它们不在HTML标签内。

这里标签内的意思并非指被一对开始标签及结束标签包住的区域内。

而是指在开始标签内，或结束标签、空元素标签内。

然而并非所有浏览器、HTML编辑器都与HTML语法完全相容，在某些特殊情况会造成意料之外的结果。

约有5%的浏览器、HTML编辑器在处理注解标签上有缺陷。（其中大部分是IE6）

尽管只有少数版本有此问题。

一些有关注解的相容性问题：

- 在文件类型宣告之前的注解、除了空白以外的字符会使IE6进入怪异模式。
- 为了相容在1995年前的浏览器，在`style`或`script`元素中的内容，有时会以注解的型式存在。
- BlueGriffon HTML编辑器1.7.x版本，会将不在`<style> ... {comment tags} ...</style>`标签内的注解显示在萤幕上。一些HTML编辑器也有相同的问题。

## 参考文献

### 来源

#### 其他资源

HTML Tags:(Part of the first published description of HTML.)

HTML Internet Draft 1.2:

HTML 3.0 Drafts:(This is the final draft of HTML 3.0, which expired without being developed further.)

HTML Tables:

XML 1.0:

CSS:

## 外部链接

- HTML 4.01（1999年12月24日）：元素和 属性
- HTML5（2014年10月28日）：元素和属性