💡HTML 元素一览表

6 大类（按种类）、13 小类（按功能）

元素是网页的一部分。在 XML 和 HTML 中，元素可能包含数据项、文本块、图像，或什么都没有。一个典型的元素通常包括一个带属性的开始标签、文本内容和一个结束标签。

每个元素里可以放哪些内容，是由该元素的内容模型决定的。

1. 元素 vs 标签

虽然元素和标签的名称是一样的，但它们不是一个东西。

在 HTML 中，标签用于创建元素，而元素是由开始标签和结束标签组成的。所以，标签是在网页的源代码里，而元素则存在于 DOM 中——DOM 就是在浏览器中展示网页的文档模型。

文档的解析流程：源码字符串 → token → tag（标签）→ element（元素）

2. 元素种类

有 6 种不同的元素：

void elements，空元素
raw text elements，原始文本元素
escapable raw text elements，可转义的原始文本元素
template element，模板元素
foreign elements，外来元素
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.浏览器/搜索引擎）

详细信息可查阅元数据。

3.3 内容块

内容块元素（content sectioning elements）允许我们将文档内容组织成逻辑片段，给页面内容创建一个 outline（大纲），比如 header、footer、navigation 以及标识内容的标题。

元素

说明

<main>

文档 <body> 的 main content area

一个文档只能有一个（可见的）<main>
<main> 里的内容应唯一，通常不包括多个页面的重复内容，比如侧边栏、导航链接、版权信息、站点logo、搜索框等
<main> 是纯信息类元素，它不影响文档的 outline（大纲），比如 <body>, <h1> 等会影响
ARIA 相关
- main landmark（地标）
- skip navigation 以快速定位到页面的 main content

<aside>

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

形式通常是 sidebar 或 call-out box

<nav>

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

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

不是所有的链接都需要包含在 <nav> 中
- 比如 <footer> 中的链接列表，就不需要用 <nav> 包裹
- <nav> 仅用于导航链接的 major block
一个文档可以有多个 <nav>
- 比如一个用于站点导航，一个用于页内导航
- 此时可以使用 aria-labelledby 和 id 来提高可访问性
屏幕阅读器可以使用此元素，来决定初始是否显示 navigation-only 内容
<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>

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<article>

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

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

一个文档可以有多个 <article>
<article> 应该被识别（identified），通常是包含一个 <h1>~<h6> 子元素
<article> 元素可以嵌套，内部的表示与外部相关的 article，比如博客文章嵌套评论
相关元素
- article 元素的作者信息，可以用 <address>
- article 元素的发布日期和时间，可以用 <time datetime="2022-05-16 19:00">May 16</time>

<address>

提供 contact information 信息

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

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

<header>

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

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

当 <header> 的上下文是 <body> 时，它就定义了一个 banner 地标（landmark）
否则，就不被考虑成是 banner 地标了，比如当 <header> 是 <main>, <aside>, <nav>, <article>, <section> 等元素的后代
子元素不能包括 <header>, <footer>
祖先元素不能是 <header>, <footer>, <address>

<footer>

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

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

关于 author 的信息，可以包含在 <footer> 中的 <address> 元素里
<footer> 不会引入新的 outline（大纲）部分
子元素不能包括 <header>, <footer>
祖先元素不能是 <header>, <footer>, <address>

<h1>, <h2>

<h3>, <h4>

<h5>, <h6>

heading content

浏览器可以使用标题信息来自动生成文档的目录（a table of contents）
不跳级使用标题，始终从 <h1> 开始
一个页面应该只有一个 <h1> 元素，用来描述页面的内容（类似于文档的 <title> 元素）
- 一种论调：可以在内容块中随意嵌套，这会被屏幕阅读器自动处理
- 一种论调：嵌套标题元素，从未被认为是最佳实践，是不合格的？详见 There Is No Document Outline Algorithm
不要使用标题标签来改文本大小，应该用 CSS 控制

<section>

表示一段 generic standalone section

只有在没有更具体的语义元素来表示的时候用，比如搜索结果列表、地图及其控件
<section> 应该被识别（identified），通常是包含一个 <h1>~<h6> 子元素（尽量）
如果是仅仅需要一个样式包装器，可以用 <div>

browser reader mode（浏览器阅读器模式）功能在提取专门的阅读器视图时，会读取以上元素。

3.4 文本内容

文本内容元素有助于 Accessibility 和 SEO，它们能标识出内容的目的和结构。

元素

说明

<ol>, <ul>, <li> <dl>, <dt>, <dd>

<figure>, <figcaption>

<pre> <blockquote> <p> <hr>

<div>

没啥语义，一般用于分块

3.5 内联文本

内联文本定义单词/行或任意文本的含义、结构或样式。

元素

说明

<a>

<cite>, <q> <code>, <samp> <sub>, <sup> <ruby>, <rp>, <rt>

<abbr>, <dfn>, <time>, <var>

<kbd>, <data>

<mark> <strong>, <em>, <i>, <small> <s>, <u> <del>, <ins>

<br>, <wbr> <bdi>, <bdo>

<span>

没啥语义，一般用于分组，为了样式/共享属性

3.6 多媒体资源

图片、音频、视频。

元素

说明

<img> <area>, <map> <picture>, <source>

<audio>, <video> <track>, <source>

3.7 表格

元素

说明

<table>

<caption> <colgroup>,<col> <thead>, <tbody>, <tfoot>

<tr>, <th>, <td>

3.8 表单

表单元素包含用于提交信息的可交互控件。

元素

说明

<form>

<input>, <button> <textarea> <select>, <optgroup>, <option>

<label> <fieldset>, <legend> <datalist>, <option>

<progress>, <meter>

<output>

3.9 可交互

元素

说明

<details>, <summary>

<dialog>

<menu>

<ul>的语义化表示（目前兼容性不好）

3.10 脚本

脚本元素可创建 dynamic content 和 Web applications。

元素

说明

<canvas>

可使用以下 API 绘制 graphics 和 animations - canvas scripting API - WebGL API

3.11 SVG 和 MathML

外来元素，它们不属于 HTML 命名空间，分别属于 SVG 和 MathML 命名空间。

元素

说明

<svg> <math>

可直接写

3.12 Web Components

元素

说明

<template> <slot>

3.13 内嵌内容

用于嵌入网页或其它内容。

元素

说明

<iframe>, <portal>

<embed> <object>, <param>

3.14 已废弃

元素

说明

<font>, <basefont>, <big>, <blink> <center>, <marquee>

用CSS更合适

<acronym>, <strike>, <rb>,<rtc> <plaintext>, <tt>, <xmp> <dir>, <menuitem> <frameset>, <frame>, <noframes> <keygen> <shadow>, <content>

有更合适的替代元素

<image>, <bgsound>, <noembed> <spacer>, <nobr>

非标准

<applet>, <hgroup>

4. 主要参考

// 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)) });

PreviousWeb API 一览表 Next语义化

Last updated 1 year ago