> 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 元素一览表 6 大类（按种类）、13 小类（按功能） 元素是网页的一部分。在 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)) }); ```