> For the complete documentation index, see [llms.txt](https://anjia1.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://anjia1.gitbook.io/web/html/elements.md). # HTML 元素一览表 元素是网页的一部分。在 XML 和 HTML 中，元素可能包含数据项、文本块、图像，或什么都没有。一个典型的元素通常包括一个带属性的开始标签、文本内容和一个结束标签。 ![](https://user-images.githubusercontent.com/7055639/151370213-5730d301-287a-40ca-9b16-706164756464.png) 每个元素里可以放哪些内容，是由该元素的内容模型决定的。 ## 1. 元素 vs 标签 虽然元素和标签的名称是一样的，但它们不是一个东西。 在 HTML 中，标签用于创建元素，而元素是由开始标签和结束标签组成的。所以，标签是在网页的源代码里，而元素则存在于 DOM 中——DOM 就是在浏览器中展示网页的文档模型。 文档的解析流程：源码字符串 → token → tag（标签）→ element（元素） ## 2. 元素种类 有 6 种不同的元素： 1. void elements，空元素 2. raw text elements，原始文本元素 3. escapable raw text elements，可转义的原始文本元素 4. template element，模板元素 5. foreign elements，外来元素 6. normal elements，普通元素 它们对应的元素有：
种类元素
空元素

<meta>, <base>, <link>
<input>

<img>, <area>, <source>, <track>
<br>, <wbr>, <hr>, <col>
<embed>, <param>

原始文本元素<script>, <style>
可转义的原始文本元素<textarea>, <title>
模板元素<template>
外来元素来自 MathML 命名空间和 SVG 命名空间的元素
普通元素除以上 5 种之外的所有元素
* 空元素只有一个开始标签（不能为空元素指定结束标签） * 外来元素要么是一个开始标签加一个结束标签，要么是一个被标记为自闭合的开始标签 * 其余 4 种元素都是有一个开始标签和一个结束标签 ## 3. 元素一览表 为了方便理解和使用，我们按照功能对元素进行如下分类。 ### 3.1 文档结构
元素说明
<html>main root，HTML 文档的 root，root element
<head>包含文档的 machine-readable 信息，即 metadata
<body>section root，HTML 文档的 content，一个文档只能有一个
### 3.2 元数据 元数据包含了页面相关的信息。
元素说明
<style>, <link>样式
<script>, <noscript>脚本
<meta>, <base>, <title>帮助软件使用和渲染的数据（eg.浏览器/搜索引擎）
详细信息可查阅[元数据](/web/html/element-metadata.md)。 ### 3.3 内容块 内容块元素（content sectioning elements）允许我们将文档内容组织成逻辑片段，给页面内容创建一个 outline（大纲），比如 header、footer、navigation 以及标识内容的标题。
元素说明
<main>

文档 <body> 的 main content area

  1. 一个文档只能有一个（可见的）<main>
  2. <main> 里的内容应唯一，通常不包括多个页面的重复内容，比如侧边栏、导航链接、版权信息、站点logo、搜索框等
  3. <main> 是纯信息类元素，它不影响文档的 outline（大纲），比如 <body>, <h1> 等会影响

  4. ARIA 相关

    • main landmark（地标）
    • skip navigation 以快速定位到页面的 main content
<aside>

其内容与文档的 main content 间接相关

形式通常是 sidebar 或 call-out box

<nav>

提供 navigation links，可以去当前文档或其它文档

常见的，比如菜单、目录和索引

  1. 不是所有的链接都需要包含在 <nav> 中

    • 比如 <footer> 中的链接列表，就不需要用 <nav> 包裹
    • <nav> 仅用于导航链接的 major block

  2. 一个文档可以有多个 <nav>

    • 比如一个用于站点导航，一个用于页内导航
    • 此时可以使用 aria-labelledby 和 id 来提高可访问性
  3. 屏幕阅读器可以使用此元素，来决定初始是否显示 navigation-only 内容
  4. <nav> 元素的语义是提供链接，所以除了列表之外，它还可以包含其它类型的内容，比如带有 <a> 的一段话
<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="#">Bikes</a></li>
        <li class="crumb"><a href="#">BMX</a></li>
        <li class="crumb">Jump Bike 3000</li>
    </ol>
</nav>

\
\

表示一段自包含的内容，可以独立分发或重用

比如论坛帖子、文章、博客、产品卡片、评论、交互式小组件、以及任何其它的独立内容项

  1. 一个文档可以有多个 \
  2. \
    应该被识别（identified），通常是包含一个 \

    ~~\
    子元素

  3. \
    元素可以嵌套，内部的表示与外部相关的 article，比如博客文章嵌套评论

  4. 相关元素

    • article 元素的作者信息，可以用 \
    • article 元素的发布日期和时间，可以用 \

\

提供 contact information 信息

比如居住地、URL、邮件地址、电话号码、社交账号、地理坐标等

  1. \
    应该包括联系人信息所指的姓名或组织名称
  2. 可描述 \
    的作者信息
  3. \
    只能用来表示离其最近的 \
    或 \ 祖先元素的联系信息
  4. \
    不能相互嵌套，也不能有其它内容块标签
  5. \
    的默认样式类似 \
\

表示 introductory content（介绍性内容），通常是一组介绍信息或导航信息

可能包含一些标题元素, logo, search form, 作者姓名, 公司名称, slogan 等

  1. 当 \
    的上下文是 \ 时，它就定义了一个 banner 地标（landmark）
  2. 否则，就不被考虑成是 banner 地标了，比如当 \
    是 \
    , \
  3. 子元素不能包括 \
    , \
  4. 祖先元素不能是 \
    , \
    , \
\

是离它最近的祖先“内容块”元素的 footer（页脚）

通常包含块的 author 信息、文档的 copyright 和相关 links

  1. 关于 author 的信息，可以包含在 \
    中的 \
    元素里
  2. \
    不会引入新的 outline（大纲）部分
  3. 子元素不能包括 \
    , \
  4. 祖先元素不能是 \
    , \
    , \

\

, \

\

, \

\

, \

heading content

  1. 浏览器可以使用标题信息来自动生成文档的目录（a table of contents）
  2. 不跳级使用标题，始终从 \

    开始

  3. 一个页面应该只有一个 \

    元素，用来描述页面的内容（类似于文档的 \</code> 元素）</p><ul><li>一种论调：可以在内容块中随意嵌套，这会被屏幕阅读器自动处理</li><li>一种论调：嵌套标题元素，从未被认为是最佳实践，是不合格的？详见 <a href="https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html">There Is No Document Outline Algorithm</a></li></ul></li><li>不要使用标题标签来改文本大小，应该用 CSS 控制</li></ol></td></tr><tr><td><code>\<section></code></td><td><p>表示一段 generic standalone section</p><ol><li>只有在没有更具体的语义元素来表示的时候用，比如搜索结果列表、地图及其控件</li><li><code>\<section></code> 应该被识别（identified），通常是包含一个 <code>\<h1></code>~~<code>\<h6></code> 子元素（尽量）</li><li>如果是仅仅需要一个样式包装器，可以用 <code>\<div></code></li></ol></td></tr></tbody></table> browser reader mode（浏览器阅读器模式）功能在提取专门的阅读器视图时，会读取以上元素。 ### 3.4 文本内容 文本内容元素有助于 Accessibility 和 SEO，它们能标识出内容的目的和结构。 | 元素 | 说明 | | ------------------------------------------------------------------------------------------------------------------------------- | ----------- | | <p><code>\<ol></code>, <code>\<ul></code>, <code>\<li></code><br><code>\<dl></code>, <code>\<dt></code>, <code>\<dd></code></p> | | | `<figure>`, `<figcaption>` | | | <p><code>\<pre></code><br><code>\<blockquote></code><br><code>\<p></code><br><code>\<hr></code></p> | | | `<div>` | 没啥语义，一般用于分块 | ### 3.5 内联文本 内联文本定义单词/行或任意文本的含义、结构或样式。 | 元素 | 说明 | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | | `<a>` | | | <p><code>\<cite></code>, <code>\<q></code><br><code>\<code></code>, <code>\<samp></code><br><code>\<sub></code>, <code>\<sup></code><br><code>\<ruby></code>, <code>\<rp></code>, <code>\<rt></code></p> | | | `<abbr>`, `<dfn>`, `<time>`, `<var>` | | | `<kbd>`, `<data>` | | | <p><code>\<mark></code><br><code>\<strong></code>, <code>\<em></code>, <code>\<i></code>, <code>\<small></code><br><code>\<s></code>, <code>\<u></code><br><code>\<del></code>, <code>\<ins></code></p> | | | <p><code>\<br></code>, <code>\<wbr></code><br><code>\<bdi></code>, <code>\<bdo></code></p> | | | `<span>` | 没啥语义，一般用于分组，为了样式/共享属性 | ### 3.6 多媒体资源 图片、音频、视频。 | 元素 | 说明 | | -------------------------------------------------------------------------------------------------------------------------- | -- | | <p><code>\<img></code><br><code>\<area></code>, <code>\<map></code><br><code>\<picture></code>, <code>\<source></code></p> | | | <p><code>\<audio></code>, <code>\<video></code><br><code>\<track></code>, <code>\<source></code></p> | | ### 3.7 表格 | 元素 | 说明 | | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -- | | `<table>` | | | <p><code>\<caption></code><br><code>\<colgroup></code>,<code>\<col></code><br><code>\<thead></code>, <code>\<tbody></code>, <code>\<tfoot></code></p> | | | `<tr>`, `<th>`, `<td>` | | ### 3.8 表单 表单元素包含用于提交信息的可交互控件。 | 元素 | 说明 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -- | | `<form>` | | | <p><code>\<input></code>, <code>\<button></code><br><code>\<textarea></code><br><code>\<select></code>, <code>\<optgroup></code>, <code>\<option></code></p> | | | <p><code>\<label></code><br><code>\<fieldset></code>, <code>\<legend></code><br><code>\<datalist></code>, <code>\<option></code></p> | | | `<progress>`, `<meter>` | | | `<output>` | | ### 3.9 可交互 | 元素 | 说明 | | ------------------------ | --------------------- | | `<details>`, `<summary>` | | | `<dialog>` | | | `<menu>` | `<ul>`的语义化表示（目前兼容性不好） | ### 3.10 脚本 脚本元素可创建 dynamic content 和 Web applications。 | 元素 | 说明 | | ---------- | ---------------------------------------------------------------------------------- | | `<canvas>` | <p>可使用以下 API 绘制 graphics 和 animations<br>- canvas scripting API<br>- WebGL API</p> | ### 3.11 SVG 和 MathML 外来元素，它们不属于 HTML 命名空间，分别属于 SVG 和 MathML 命名空间。 | 元素 | 说明 | | -------------------------------------------------- | ---- | | <p><code>\<svg></code><br><code>\<math></code></p> | 可直接写 | ### 3.12 Web Components | 元素 | 说明 | | --------------------- | -- | | `<template>` `<slot>` | | ### 3.13 内嵌内容 用于嵌入网页或其它内容。 | 元素 | 说明 | | ----------------------------------------------------------------------------- | -- | | `<iframe>`, `<portal>` | | | <p><code>\<embed></code><br><code>\<object></code>, <code>\<param></code></p> | | ### 3.14 已废弃 | 元素 | 说明 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | <p><code>\<font></code>, <code>\<basefont></code>, <code>\<big></code>, <code>\<blink></code><br><code>\<center></code>, <code>\<marquee></code></p> | 用CSS更合适 | | <p><code>\<acronym></code>, <code>\<strike></code>, <code>\<rb></code>,<code>\<rtc></code><br><code>\<plaintext></code>, <code>\<tt></code>, <code>\<xmp></code><br><code>\<dir></code>, <code>\<menuitem></code><br><code>\<frameset></code>, <code>\<frame></code>, <code>\<noframes></code><br><code>\<keygen></code><br><code>\<shadow></code>, <code>\<content></code></p> | 有更合适的替代元素 | | <p><code>\<image></code>, <code>\<bgsound></code>, <code>\<noembed></code><br><code>\<spacer></code>, <code>\<nobr></code></p> | 非标准 | | `<applet>`, `<hgroup>` | | ## 4. 主要参考 * <https://developer.mozilla.org/en-US/docs/Web/HTML/Element> * <https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes> ```javascript // https://developer.mozilla.org/en-US/docs/Web/HTML/Element document.querySelectorAll('.standard-table').forEach(table => { console.log("\n"); table.querySelectorAll("tr td:first-child code").forEach(code => console.log(code.innerText)) }); ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://anjia1.gitbook.io/web/html/elements.md?ask=<question> ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.