HTML 语义化总览

HTML |

1. 文档结构标签

<html>

语义：HTML 文档的根元素，所有内容都必须包含在 <html> 和 </html> 之间。 使用建议：添加 lang 属性，方便搜索引擎和辅助技术识别语言。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>示例页面</title>
  </head>
  <body>
    页面内容
  </body>
</html>

<head>

语义：存放页面的元信息（meta 信息、标题、样式、脚本等）。 使用建议：SEO 相关的 <meta> 信息应放在这里。

<head>
  <meta charset="UTF-8" />
  <meta name="description" content="前端学习示例" />
  <title>我的网页</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>

语义：文档的主体部分，浏览器中可见的内容都在这里。

<body>
  <h1>欢迎来到我的网页</h1>
  <p>这里是正文内容。</p>
</body>

2. 页面布局标签

<header>

语义：文档或区块的头部内容，通常包含 Logo、导航、标题等。 建议：一个页面可以有多个 <header>（例如每篇文章都有自己的头部）。

<header>
  <h1>巴适科技</h1>
  <nav>
    <a href="#">首页</a>
    <a href="#">产品</a>
    <a href="#">联系</a>
  </nav>
</header>

<nav>

语义：页面的导航区域，通常包含网站主要链接。 建议：仅用于主要导航，辅助导航可用 <aside>。

<nav aria-label="主导航">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于我们</a></li>
    <li><a href="/contact">联系</a></li>
  </ul>
</nav>

<main>

语义：页面的主体内容，每个文档中只能有一个 <main>。 建议：排除重复内容（导航、版权信息等）。

<main>
  <h2>产品介绍</h2>
  <p>这里是主要内容。</p>
</main>

<section>

语义：文档中的独立章节，通常有标题。 建议：每个 <section> 都应有一个标题标签（<h1>-<h6>）。

<section>
  <h2>公司简介</h2>
  <p>我们是一家专注于前端技术研发的公司。</p>
</section>

<article>

语义：独立的、可复用的内容，如文章、博客、新闻等。

<article>
  <h2>前端语义化的重要性</h2>
  <p>语义化标签能提升 SEO 和可访问性。</p>
</article>

<aside>

语义：与主体内容相关的补充信息，如侧栏、广告、相关文章等。

<aside>
  <h3>相关文章</h3>
  <ul>
    <li><a href="#">HTML5 新特性</a></li>
    <li><a href="#">CSS Grid 布局</a></li>
  </ul>
</aside>

<footer>

语义：文档或区块的底部区域，通常包含版权信息、联系信息等。

<footer>
  <p>&copy; 2025 巴适科技. 保留所有权利。</p>
</footer>

3. 文本语义标签

<h1> ~ <h6>

语义：标题标签，用来表示内容层级结构，<h1> 级别最高，<h6> 最低。 使用建议：

  • 每个页面的 <h1> 应该是唯一的，用来概括页面的主题。
  • 用标题层级体现文档结构，而不是为了样式随意选择标签。
<h1>网页主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>

<p>

语义：段落标签，用来表示一段独立的文本内容。 使用建议：

  • 不能直接嵌套在 <p> 内放块级元素（如 <div>）。
<p>这是一个段落，段落是 HTML 中最基础的文本单元。</p>

<blockquote>

语义：块级引用，用于引用其他来源的大段文字。 使用建议：

  • 可结合 cite 属性指明引用来源。
<blockquote cite="https://www.example.com/article">
  <p>这是引用的段落内容。</p>
</blockquote>

<q>

语义：行内引用，通常用于引用短句。 使用建议：

  • 浏览器会自动添加引号。
<p>鲁迅曾说：<q>希望是附丽于存在的，有存在，便有希望。</q></p>

<cite>

语义：引用来源的标题或作品名。 使用建议：

  • 常用于标明引用作品的作者或标题。
<p>《呐喊》的作者是 <cite>鲁迅</cite>。</p>

<abbr>

语义：缩写或首字母缩写。 使用建议：

  • 使用 title 属性提供全称，鼠标悬停可见。
<p><abbr title="Cascading Style Sheets">CSS</abbr> 是一种样式表语言。</p>

<address>

语义：联系信息。 使用建议：

  • 通常放在 <footer> 中。
<address>
  联系我们：<a href="mailto:info@example.com">info@example.com</a>
</address>

<time>

语义：表示时间或日期，机器可读（利于 SEO）。 使用建议：

  • 使用 datetime 属性存储标准时间格式。
<p>
  活动开始时间：<time datetime="2025-08-09T14:00"
    >2025 年 8 月 9 日 下午 2 点</time
  >
</p>

<mark>

语义：高亮显示的文本。 使用建议：

  • 用于突出显示与当前上下文相关的词语。
<p>请特别注意<mark>付款截止日期</mark>。</p>

<strong>

语义：语义上重要的文本。 使用建议：

  • 与 <b> 不同，<strong> 有强调的重要语义。
<p><strong>注意：</strong>提交申请后不可修改。</p>

<em>

语义：强调文本（强调语气）。 使用建议：

  • 可嵌套多层 <em> 以增强强调程度。
<p>我<em>真的</em>很喜欢这本书。</p>

<small>

语义：附属信息或免责声明。 使用建议：

  • 常用于版权声明、法律条款等。
<p><small>版权所有 © 2025 巴适科技</small></p>

<code>

语义：行内代码。 使用建议：

  • 用于展示短代码片段，长代码用 <pre>。
<p>调用方法：<code>console.log("Hello")</code></p>

<pre>

语义：预格式化文本，保留空格和换行。 使用建议：

  • 常用于展示代码或 ASCII 图案。
<pre>
function greet() {
  console.log("Hello");
}
</pre>

<kbd>

语义：用户输入（键盘、语音、手势）。 使用建议：

  • 常用于快捷键提示。
<p>复制：<kbd>Ctrl</kbd> + <kbd>C</kbd></p>

好，那我继续为你写 “列表语义标签” 部分的详细 Markdown 文档，保持和前面一致的高质量标准。

4. 列表语义标签

<ul>

语义：无序列表（unordered list），用于表示顺序不重要的一组内容。 使用建议：

  • 每个列表项用 <li> 包裹。
  • 适合导航菜单、特性列表等。
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol>

语义：有序列表（ordered list），用于表示顺序有意义的内容。 使用建议：

  • 默认使用数字编号，可通过 type 属性更改编号样式（如 A、a、I、i）。
  • 可用 start 属性指定起始编号。
<ol>
  <li>注册账号</li>
  <li>登录系统</li>
  <li>开始使用</li>
</ol>

<ol type="A" start="3">
  <li>第三步</li>
  <li>第四步</li>
</ol>

<li>

语义：列表项（list item），表示列表中的单个元素。 使用建议：

  • 必须作为 <ul> 或 <ol> 的直接子元素（HTML5 允许嵌套 <menu>）。
<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

<dl>

语义：描述列表（description list），用于术语与描述配对。 使用建议：

  • 每个项目由 <dt>（定义项）和 <dd>（定义描述）组成。
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>

  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

<dt>

语义：定义项（definition term），表示要解释的词语或术语。

<dl>
  <dt>API</dt>
  <dd>应用程序编程接口</dd>
</dl>

<dd>

语义：定义描述（definition description），表示 <dt> 的解释或说明。

<dl>
  <dt>JavaScript</dt>
  <dd>一种脚本语言，用于网页交互</dd>
</dl>

<menu>（HTML5）

语义：菜单列表，最初用于上下文菜单或工具栏。 使用建议：

  • HTML5 中 <menu> 的实际使用不多，常被 <ul> 替代。
<menu>
  <li><button>保存</button></li>
  <li><button>加载</button></li>
</menu>

好，那我接着写 “表格语义标签” 部分，保持和之前相同的详细程度。

5. 表格语义标签

<table>

语义：用于展示结构化的二维表格数据。 使用建议：

  • 表格应结合 <caption>、<thead>、<tbody>、<tfoot>、<th> 使用，以增强可读性和可访问性。
  • 不建议用表格做页面布局（应使用 CSS 布局）。
<table border="1">
  <caption>
    学生成绩表
  </caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>数学</th>
      <th>英语</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>90</td>
      <td>85</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>78</td>
      <td>92</td>
    </tr>
  </tbody>
</table>

<caption>

语义：表格标题，描述表格内容。 使用建议：

  • 必须是 <table> 的第一个子元素。
<table>
  <caption>
    月度销售数据
  </caption>
  <tr>
    <th>月份</th>
    <th>销售额</th>
  </tr>
</table>

<thead>

语义：表头区域，包含表格的列标题行。 使用建议：

  • 有助于屏幕阅读器理解表格结构。
<table>
  <thead>
    <tr>
      <th>产品</th>
      <th>价格</th>
    </tr>
  </thead>
</table>

<tbody>

语义：表格主体，包含数据行。 使用建议：

  • 在数据较多的表格中，结合 <thead>、<tfoot> 使用有助于分区管理。
<table>
  <thead>
    <tr>
      <th>商品</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>手机</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

<tfoot>

语义：表格底部汇总信息。 使用建议：

  • 可以在 HTML 源码中放在 <thead> 后面，浏览器会自动在表格底部渲染。
<table>
  <thead>
    <tr>
      <th>产品</th>
      <th>销量</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>300</td>
    </tr>
  </tfoot>
</table>

<tr>

语义：表格行（table row）。 使用建议：

  • 必须作为 <thead>、<tbody> 或 <tfoot> 的直接子元素。
<tr>
  <td>苹果</td>
  <td>100</td>
</tr>

<th>

语义：表头单元格（table header cell）。 使用建议：

  • 默认加粗并居中显示。
  • 可通过 scope 属性明确列或行的作用域（col、row）。
<tr>
  <th scope="col">姓名</th>
  <th scope="col">成绩</th>
</tr>

<td>

语义：表格数据单元格（table data cell）。 使用建议：

  • 用来存储表格的实际数据。
<tr>
  <td>王五</td>
  <td>88</td>
</tr>

<colgroup> 和 <col>

语义：定义表格列的分组与样式。 使用建议：

  • <colgroup> 包裹 <col>，可以统一设置列宽、背景色等。
<table>
  <colgroup>
    <col style="background-color: #f0f0f0;" />
    <col style="background-color: #fff;" />
  </colgroup>
  <tr>
    <th>姓名</th>
    <th>分数</th>
  </tr>
  <tr>
    <td>赵六</td>
    <td>95</td>
  </tr>
</table>

好，那我继续写 “表单语义标签” 部分的详细 Markdown 文档，保持和前面一致的细致程度。

6. 表单语义标签

<form>

语义：表示一个表单，用于收集用户输入。 使用建议：

  • action 属性：提交数据的目标 URL。
  • method 属性：提交方式（常用 GET 或 POST）。
  • 应结合 <fieldset>、<legend>、<label> 增强可访问性。
<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" />
  <button type="submit">提交</button>
</form>

<label>

语义：表单控件的文本标签。 使用建议：

  • 使用 for 属性关联控件的 id，点击标签可激活输入框。
<label for="email">邮箱：</label> <input type="email" id="email" name="email" />

<input>

语义：通用的单行输入控件。 使用建议：

  • type 属性支持多种类型（text、password、email、number、checkbox、radio、file、date 等）。
  • 使用 name 属性确保提交数据时有键名。
<input type="text" name="fullname" placeholder="请输入姓名" />
<input type="password" name="password" placeholder="请输入密码" />
<input type="email" name="email" placeholder="请输入邮箱" />

<textarea>

语义：多行文本输入控件。 使用建议：

  • 可设置 rows 和 cols 控制大小，或用 CSS 控制样式。
<textarea name="message" rows="4" cols="50" placeholder="请输入留言"></textarea>

<button>

语义：按钮控件，可执行提交、重置、或 JavaScript 动作。 使用建议：

  • type 属性值：

    • submit（默认）提交表单。
    • reset 重置表单。
    • button 自定义事件按钮。
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('Hello')">点击我</button>

<select>

语义：下拉选择框。 使用建议：

  • 内部使用 <option> 定义选项，可配合 multiple 属性支持多选。
<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

<option>

语义：下拉框或列表框的选项。 使用建议：

  • value 属性是提交到服务器的值。
  • 可用 selected 属性设置默认选中项。
<option value="bj" selected>北京</option>
<option value="sh">上海</option>

<optgroup>

语义：为下拉列表分组。 使用建议：

  • label 属性定义分组标题。
<select>
  <optgroup label="华北">
    <option>北京</option>
    <option>天津</option>
  </optgroup>
  <optgroup label="华南">
    <option>广州</option>
    <option>深圳</option>
  </optgroup>
</select>

<fieldset>

语义：对表单控件分组。 使用建议：

  • 搭配 <legend> 为分组命名，便于理解。
<fieldset>
  <legend>个人信息</legend>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" />
</fieldset>

<legend>

语义：<fieldset> 的标题，描述分组的内容。

<fieldset>
  <legend>联系方式</legend>
  <label>邮箱：<input type="email" /></label>
</fieldset>

<datalist>

语义：提供输入建议的列表，与 <input> 搭配使用。 使用建议：

  • <input> 需设置 list 属性，值为 <datalist> 的 id。
<input list="browsers" name="browser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>

<output>

语义：显示计算结果。 使用建议：

  • 常与 JavaScript 搭配使用，展示动态结果。
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" name="a" /> +
  <input type="number" id="b" name="b" /> =
  <output name="result"></output>
</form>

<progress>

语义：进度条，表示任务完成的进度。 使用建议：

  • value 属性表示当前值，max 属性表示最大值。
<progress value="70" max="100">70%</progress>

<meter>

语义：表示在已知范围内的数值（与 <progress> 不同，<meter> 用于标度测量值）。 使用建议：

  • 适用于表示温度、评分、容量等。
<meter value="0.7" min="0" max="1">70%</meter>

好，那我继续写 结构与布局语义标签 部分的详细 Markdown 文档。

7. 结构与布局语义标签

<header>

语义：页面或区块的头部区域，通常包含 logo、导航、标题等内容。 使用建议：

  • 一个页面可以有多个 <header>，比如页面全局头部和文章头部。
  • 不要用 <header> 包裹另一个 <header> 或 <footer>。
<header>
  <h1>我的网站</h1>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于我们</a></li>
    </ul>
  </nav>
</header>

<nav>

语义：页面或区块的导航部分。 使用建议：

  • 用于主要导航菜单，而不是所有链接集合。
  • 辅助导航可以用 <aside>。
<nav>
  <ul>
    <li><a href="#section1">章节 1</a></li>
    <li><a href="#section2">章节 2</a></li>
    <li><a href="#section3">章节 3</a></li>
  </ul>
</nav>

<main>

语义：文档的主体内容，一个页面中 <main> 只能有一个。 使用建议：

  • 应放在 <body> 内，且不嵌套在 <article>、<aside>、<footer>、<header>、<nav> 中。
<main>
  <h2>文章标题</h2>
  <p>这里是主要内容区域。</p>
</main>

<section>

语义：文档中的独立主题区域。 使用建议：

  • 用于内容的分块，通常有标题。
  • 不要滥用 <section> 代替 <div>，必须是有语义的内容分组。
<section>
  <h2>公司介绍</h2>
  <p>我们是一家专注于 Web 开发的公司。</p>
</section>

<article>

语义：独立、完整的内容单元，例如博客文章、论坛帖子、新闻报道。 使用建议：

  • <article> 内可以包含 <header>、<footer>、<section> 等结构化标签。
<article>
  <header>
    <h2>新闻标题</h2>
    <time datetime="2025-08-09">2025年8月9日</time>
  </header>
  <p>新闻正文内容……</p>
  <footer>
    <p>作者：张三</p>
  </footer>
</article>

<aside>

语义：与主要内容间接相关的区域，如侧边栏、广告、相关链接。 使用建议：

  • 用于补充信息，而非主要信息。
<aside>
  <h3>相关文章</h3>
  <ul>
    <li><a href="#">HTML5 新特性</a></li>
    <li><a href="#">CSS3 动画</a></li>
  </ul>
</aside>

<footer>

语义：页面或区块的底部区域。 使用建议：

  • 通常包含版权声明、联系信息、友情链接。
  • 可以出现在 <body> 全局或 <article> 内部作为局部页脚。
<footer>
  <p>&copy; 2025 MyWebsite. All rights reserved.</p>
</footer>

<address>

语义：表示联系信息，可以放在 <footer> 中。 使用建议：

  • 不是用来标记地理地址的通用标签，而是与作者、组织的联系信息相关。
<address>
  联系方式：<a href="mailto:info@example.com">info@example.com</a>
</address>

<div>

语义：无语义的块级容器。 使用建议：

  • 当没有更合适的语义标签时使用。
  • 主要配合 CSS 或 JS 作为布局或逻辑容器。
<div class="container">
  <p>这是一个无语义的容器。</p>
</div>

好的，那我继续写 文本内容语义标签 部分的详细 Markdown 文档，保证和前面一样的细致程度。

8. 文本内容语义标签

<h1> ~ <h6>

语义：标题标签，表示文档的层级标题。 使用建议：

  • <h1> 表示最高级标题，一般一个页面只出现一次，通常是页面或文章的主标题。
  • <h2> ~ <h6> 依次递减层级，用于分级组织内容。
  • 有助于 SEO 和可访问性。
<h1>网站标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>

<p>

语义：段落标签。 使用建议：

  • 每个段落单独一个 <p>，不要用 <br> 来替代段落。
<p>这是第一段文字。</p>
<p>这是第二段文字。</p>

<blockquote>

语义：引用长文本，通常显示为缩进样式。 使用建议：

  • 可配合 cite 属性标明引用来源 URL。
<blockquote cite="https://example.com/article">
  这是引用的段落内容，可以很长很长……
</blockquote>

<q>

语义：内联短文本引用。 使用建议：

  • 浏览器会自动添加引号。
<p>她说：<q>HTML 很有趣！</q></p>

<cite>

语义：引用作品的标题（书籍、文章、电影等）。 使用建议：

  • 不用于标记人名。
<p>参考书籍：<cite>HTML 权威指南</cite></p>

<abbr>

语义：缩写或首字母缩略词。 使用建议：

  • title 属性提供全称。
<p><abbr title="HyperText Markup Language">HTML</abbr> 是超文本标记语言。</p>

<dfn>

语义：定义术语。 使用建议：

  • 表示当前上下文中首次定义的词。
<p><dfn>语义化</dfn> 是指使用具有意义的 HTML 标签来表达内容结构。</p>

<time>

语义：表示时间或日期。 使用建议：

  • datetime 属性提供机器可读的时间格式（ISO 8601）。
<p>发布日期：<time datetime="2025-08-09">2025年8月9日</time></p>

<mark>

语义：标记或高亮文本。 使用建议：

  • 用于强调与当前上下文相关的文字。
<p>请重点关注以下内容：<mark>HTML 语义化</mark></p>

<small>

语义：表示附注或法律文本等次要信息。

<p>版权声明：<small>© 2025 All rights reserved.</small></p>

<strong>

语义：表示重要的内容，通常加粗显示。

<p><strong>警告：</strong>请勿分享密码！</p>

<em>

语义：表示强调的内容，通常斜体显示。

<p>我<em>真的</em>很喜欢 HTML！</p>

<b>

语义：无强调意义的粗体文本。 使用建议：

  • 纯视觉加粗，不传递重要性语义。
<p>欢迎来到 <b>HTML 学习中心</b></p>

<i>

语义：无强调意义的斜体文本，常用于术语、外文名。

<p>变量名：<i>userName</i></p>

<u>

语义：表示与普通文本不同的样式，一般为下划线。 使用建议：

  • 避免与超链接混淆。
<p><u>特殊标记</u> 用于显示重点。</p>

<br>

语义：换行符。 使用建议：

  • 仅用于诗歌、地址等需要强制换行的情况。
<p>地址：<br />北京市朝阳区XX路88号</p>

好，那我继续写 分组内容语义标签 部分的详细 Markdown 文档。

9. 分组内容语义标签

<ul>

语义：无序列表（unordered list），表示一组顺序无关的项目。 使用建议：

  • 列表项必须用 <li> 包裹。
  • 常用于导航菜单、功能列表、标签集合等。
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol>

语义：有序列表（ordered list），表示一组顺序有意义的项目。 使用建议：

  • 使用 type 属性可更改编号样式（1、A、a、I、i）。
  • 使用 start 属性可定义起始编号。
<ol>
  <li>注册账号</li>
  <li>登录系统</li>
  <li>开始使用</li>
</ol>

<ol type="A" start="3">
  <li>第三步</li>
  <li>第四步</li>
</ol>

<li>

语义：列表项（list item）。 使用建议：

  • 必须是 <ul>、<ol>、<menu> 的直接子元素。
<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

<dl>

语义：描述列表（description list），用于成对表示术语和解释。 使用建议：

  • 每个项目由 <dt>（定义项）和 <dd>（定义描述）组成。
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>

  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

<dt>

语义：定义项（definition term），表示要解释的术语。

<dl>
  <dt>API</dt>
  <dd>应用程序编程接口</dd>
</dl>

<dd>

语义：定义描述（definition description），表示 <dt> 的说明。

<dl>
  <dt>JavaScript</dt>
  <dd>一种用于网页交互的脚本语言</dd>
</dl>

<figure>

语义：独立的图文组合（可与正文分离）。 使用建议：

  • 通常配合 <figcaption> 提供标题或说明。
  • 可包含图片、图表、代码块等。
<figure>
  <img src="mountain.jpg" alt="雪山风景" />
  <figcaption>图1：美丽的雪山</figcaption>
</figure>

<figcaption>

语义：<figure> 的标题或说明。

<figure>
  <pre><code>console.log('Hello World');</code></pre>
  <figcaption>代码1：JavaScript 打印语句</figcaption>
</figure>

<menu>

语义：表示菜单列表。 使用建议：

  • 最初用于命令菜单，现在常被 <ul> 替代。
<menu>
  <li><button>保存</button></li>
  <li><button>加载</button></li>
</menu>

好，那我继续写 表单语义标签 部分的详细 Markdown 文档。

10. 表单语义标签

<form>

语义：表单容器，用于收集用户输入并提交到服务器或通过 JavaScript 处理。 使用建议：

  • action 属性指定提交地址。
  • method 属性指定提交方式（GET 或 POST）。
  • 可配合 novalidate 禁用 HTML5 表单验证。
<form action="/submit" method="POST">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required />
  <button type="submit">提交</button>
</form>

<label>

语义：表单控件的文字说明。 使用建议：

  • for 属性的值必须与表单控件的 id 匹配。
  • 点击 <label> 可聚焦对应控件。
<label for="email">邮箱：</label> <input type="email" id="email" name="email" />

<input>

语义：单行输入控件。 使用建议：

  • type 属性定义输入类型（text、password、email、number、date、checkbox、radio 等）。
  • 可配合 required、placeholder、pattern、min、max、step 等属性进行限制。
<input type="text" placeholder="请输入姓名" />
<input type="password" placeholder="请输入密码" />
<input type="checkbox" id="agree" />
<label for="agree">同意协议</label>

<textarea>

语义：多行文本输入框。 使用建议：

  • 适合长文本，如评论、留言。
  • 可用 rows 和 cols 控制大小。
<textarea rows="4" cols="50" placeholder="请输入您的建议"></textarea>

<button>

语义：按钮控件。 使用建议：

  • type 可为 button（普通按钮）、submit（提交表单）、reset（重置表单）。
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('点击了按钮')">点击我</button>

<select>

语义：下拉选择框。 使用建议：

  • 内含 <option> 表示选项。
  • 可用 multiple 属性实现多选。
<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

<option>

语义：下拉菜单或列表框中的选项。 使用建议：

  • selected 属性表示默认选中。
<select>
  <option value="html" selected>HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

<fieldset>

语义：表单中相关控件的分组。 使用建议：

  • 通常配合 <legend> 使用，为分组添加标题。
<fieldset>
  <legend>个人信息</legend>
  <label for="name">姓名：</label>
  <input type="text" id="name" />
</fieldset>

<legend>

语义：<fieldset> 分组的标题。

<fieldset>
  <legend>登录信息</legend>
  <label>用户名：<input type="text" /></label>
</fieldset>

<datalist>

语义：为 <input> 提供预设选项列表。 使用建议：

  • <input> 的 list 属性要与 <datalist> 的 id 匹配。
<input list="browsers" name="browser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
  <option value="Edge"></option>
</datalist>

<output>

语义：表示计算结果或输出内容。 使用建议：

  • for 属性可指定关联的表单控件。
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="10" /> +
  <input type="number" id="b" value="20" /> =
  <output name="result" for="a b">30</output>
</form>

好，那我继续写 表格语义标签 部分的详细 Markdown 文档。

11. 表格语义标签

<table>

语义：用于展示结构化的二维表格数据。 使用建议：

  • 按语义结构划分 <caption>（表格标题）、<thead>（表头）、<tbody>（表身）、<tfoot>（表尾）。
  • 使用 <th> 表示表头单元格，<td> 表示数据单元格。
<table border="1">
  <caption>
    学生成绩表
  </caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>数学</th>
      <th>英语</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>90</td>
      <td>85</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>88</td>
      <td>92</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>平均分</td>
      <td>89</td>
      <td>88.5</td>
    </tr>
  </tfoot>
</table>

<caption>

语义：表格标题，描述表格内容。 使用建议：

  • 必须是 <table> 的第一个子元素。
<table>
  <caption>
    销售数据表
  </caption>
</table>

<thead>

语义：表格表头区域，包含一行或多行表头信息。 使用建议：

  • 有助于屏幕阅读器理解表格结构。
<thead>
  <tr>
    <th>月份</th>
    <th>销售额</th>
  </tr>
</thead>

<tbody>

语义：表格主体数据。 使用建议：

  • 包含表格的主要数据行。
<tbody>
  <tr>
    <td>一月</td>
    <td>5000</td>
  </tr>
</tbody>

<tfoot>

语义：表格页脚区域。 使用建议：

  • 常用于显示合计、统计结果。
  • 在 HTML 结构中应放在 <tbody> 之后，但在渲染时可能出现在表格底部。
<tfoot>
  <tr>
    <td>合计</td>
    <td>15000</td>
  </tr>
</tfoot>

<tr>

语义：表格行（table row）。 使用建议：

  • 用于包裹一行表格单元格（<th> 或 <td>）。
<tr>
  <td>张三</td>
  <td>85</td>
</tr>

<th>

语义：表格表头单元格（table header cell）。 使用建议：

  • 默认为加粗居中显示。
  • 可使用 scope 属性明确关联（col、row）。
<tr>
  <th scope="col">产品</th>
  <th scope="col">价格</th>
</tr>

<td>

语义：表格数据单元格（table data cell）。 使用建议：

  • 用于放置表格的实际数据。
<tr>
  <td>苹果</td>
  <td>5 元</td>
</tr>

<colgroup>

语义：定义表格列的分组。 使用建议：

  • 用于批量设置列样式。
<table>
  <colgroup>
    <col style="background-color: #f0f0f0;" />
    <col style="background-color: #e0e0e0;" />
  </colgroup>
</table>

<col>

语义：定义单个或多个列的样式属性。 使用建议：

  • 必须在 <colgroup> 内使用。
  • 可用 span 属性设置列数。
<colgroup>
  <col span="2" style="background-color: lightblue;" />
</colgroup>

好，那我继续写 文本内容语义标签 部分的详细 Markdown 文档。

12. 文本内容语义标签

<abbr>

语义：缩写（abbreviation），表示单词或短语的缩写形式。 使用建议：

  • title 属性用来提供完整形式，屏幕阅读器可读出。
<p>学习 <abbr title="Cascading Style Sheets">CSS</abbr> 可以美化网页。</p>

<address>

语义：表示联系信息（address），可包含电子邮件、电话、地址等。 使用建议：

  • 通常用于 <footer> 中提供网站或作者联系信息。
<address>
  联系人：张三<br />
  邮箱：zhangsan@example.com<br />
  电话：123-456-7890
</address>

<b>

语义：强调或加粗文本，但无特别重要性。 使用建议：

  • 如果要表达重要性，使用 <strong>。
<p>这是一段 <b>加粗</b> 的文字。</p>

<strong>

语义：强调文本的重要性。 使用建议：

  • 屏幕阅读器会用重读方式朗读。
<p>请务必 <strong>保存</strong> 你的工作。</p>

<em>

语义：强调（emphasis），用于表示语气上的强调。 使用建议：

  • 通常在朗读时改变语调。
<p>我 <em>真的</em> 喜欢这本书。</p>

<cite>

语义：引用作品的标题（书籍、电影、歌曲等）。 使用建议：

  • 并不表示作者。
<p>《<cite>红楼梦</cite>》是中国古典小说的巅峰之作。</p>

<code>

语义：内联代码片段。 使用建议：

  • 用于标记计算机代码，通常与 <pre> 配合。
<p>请在终端输入 <code>npm install</code> 命令。</p>

<pre>

语义：预格式化文本。 使用建议：

  • 保留空格和换行。
  • 常与 <code> 搭配，用于展示多行代码。
<pre>
function hello() {
  console.log("Hello World");
}
</pre>

<mark>

语义：高亮标记文本。 使用建议：

  • 常用于搜索结果的关键字高亮。
<p>你搜索的词是：<mark>HTML</mark>。</p>

<q>

语义：短文本引用（quote）。 使用建议：

  • 浏览器会自动在内容外加引号。
<p>小明说：<q>我今天很开心。</q></p>

<blockquote>

语义：长文本引用（block quotation）。 使用建议：

  • cite 属性可指定引用来源 URL。
<blockquote cite="https://example.com/article">这是一个长引用段落。</blockquote>

<time>

语义：时间或日期。 使用建议：

  • datetime 属性用标准格式表示，便于机器读取。
<p>活动日期：<time datetime="2025-08-09">2025年8月9日</time></p>

<var>

语义：变量（variable）。 使用建议：

  • 常用于数学表达式或程序中的变量。
<p>公式：<var>x</var> + <var>y</var> = 10</p>

<samp>

语义：示例输出（sample output）。 使用建议：

  • 表示计算机输出结果。
<p>运行结果：<samp>Hello World</samp></p>

<kbd>

语义：键盘输入（keyboard input）。 使用建议：

  • 表示用户需要按下的键。
<p>请按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制。</p>

好，那我继续写 交互与脚本语义标签 部分的详细 Markdown 文档。

13. 交互与脚本语义标签

<script>

语义：用于嵌入或引入 JavaScript 脚本。 使用建议：

  • src 属性用于加载外部脚本文件。
  • type 属性一般省略，默认值为 text/javascript。
  • defer：脚本延迟到文档解析完成后执行（推荐用于外部脚本）。
  • async：脚本异步加载并立即执行，可能打乱执行顺序。
<!-- 内联脚本 -->
<script>
  console.log("Hello World");
</script>

<!-- 外部脚本 -->
<script src="main.js" defer></script>

<noscript>

语义：为禁用 JavaScript 的浏览器提供替代内容。 使用建议：

  • 可用于提供提示信息或静态内容。
<noscript>
  <p>您的浏览器已禁用 JavaScript，请启用后再访问。</p>
</noscript>

<template>

语义：用于声明 HTML 模板，页面加载时不会渲染，需通过 JavaScript 克隆和插入。 使用建议：

  • 常用于组件化和动态内容生成。
<template id="user-template">
  <li class="user-item"></li>
</template>

<ul id="user-list"></ul>

<script>
  const template = document.getElementById("user-template");
  const list = document.getElementById("user-list");
  const li = template.content.cloneNode(true);
  li.querySelector(".user-item").textContent = "张三";
  list.appendChild(li);
</script>

<slot>

语义：Web Components 插槽，用于在自定义元素中插入外部内容。 使用建议：

  • name 属性用于命名插槽。
  • 默认插槽用于接收未命名内容。
<template id="card-template">
  <div class="card">
    <slot name="title"></slot>
    <slot></slot>
    <!-- 默认插槽 -->
  </div>
</template>

<my-card>
  <span slot="title">卡片标题</span>
  <p>这是卡片内容。</p>
</my-card>

<canvas>

语义：可通过 JavaScript 绘制图形、动画、游戏等。 使用建议：

  • 必须用 JS 控制绘制内容。
  • 可用作图表、游戏、图像处理等。
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const c = document.getElementById("myCanvas");
  const ctx = c.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(20, 20, 150, 50);
</script>

好，那我继续写 嵌入内容语义标签 部分的详细 Markdown 文档。

14. 嵌入内容语义标签

<img>

语义：嵌入图片。 使用建议：

  • alt 属性是必需的，提供图片替代文本（对 SEO 与无障碍很重要）。
  • title 属性可提供额外提示信息。
  • 尽量使用合适的图片格式（WebP、AVIF 优于 PNG/JPG）。
<img src="cat.jpg" alt="一只可爱的猫" width="300" height="200" />

<picture>

语义：为响应式图片和不同格式的图片提供支持。 使用建议：

  • 可根据设备分辨率、屏幕大小或支持的图片格式选择最佳图片。
<picture>
  <source srcset="cat.avif" type="image/avif" />
  <source srcset="cat.webp" type="image/webp" />
  <img src="cat.jpg" alt="一只可爱的猫" />
</picture>

<source>

语义：为 <picture>、<audio>、<video> 提供多种媒体资源。 使用建议：

  • 允许浏览器选择支持的格式。
<video controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  您的浏览器不支持视频播放。
</video>

<track>

语义：为 <video> 和 <audio> 添加字幕、说明或章节信息。 使用建议：

  • 常用于提供多语言字幕。
<video controls>
  <source src="movie.mp4" type="video/mp4" />
  <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文字幕" />
</video>

<video>

语义：嵌入视频。 使用建议：

  • controls 属性添加播放控制条。
  • autoplay 与 muted 常配合使用（自动播放时必须静音）。
<video src="movie.mp4" width="400" controls></video>

<audio>

语义：嵌入音频。 使用建议：

  • 支持 controls 控制播放。
<audio controls>
  <source src="music.mp3" type="audio/mpeg" />
  <source src="music.ogg" type="audio/ogg" />
  您的浏览器不支持音频播放。
</audio>

<iframe>

语义：在页面中嵌入另一个 HTML 页面（内联框架）。 使用建议：

  • 尽量避免滥用，防止安全问题（可用 sandbox 限制）。
<iframe src="https://example.com" width="600" height="400"></iframe>

<embed>

语义：嵌入外部内容（多媒体、插件等）。 使用建议：

  • 一般用于 Flash、PDF 等内容（已较少使用）。
<embed src="document.pdf" type="application/pdf" width="600" height="400" />

<object>

语义：通用的外部内容嵌入容器。 使用建议：

  • 可替代 <embed>，并允许提供备用内容。
<object data="document.pdf" type="application/pdf" width="600" height="400">
  <p>您的浏览器不支持 PDF 查看，请下载 <a href="document.pdf">文件</a>。</p>
</object>

好，那我继续写 表单语义标签 部分的详细 Markdown 文档。

15. 表单语义标签

<form>

语义：表示用户输入数据的表单容器。 使用建议：

  • action 属性指定表单提交的地址。
  • method 常用 GET 或 POST。
  • 配合 <fieldset>、<legend>、<label> 提升可访问性。
<form action="/submit" method="POST">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" />
  <button type="submit">提交</button>
</form>

<input>

语义：单行文本、按钮、文件选择等多种输入类型。 常用类型：

  • text（文本）
  • password（密码）
  • email（邮箱）
  • number（数字）
  • checkbox（复选框）
  • radio（单选框）
  • file（文件）
  • date（日期选择）
  • range（滑块）
  • color（颜色选择）
<input type="text" name="username" placeholder="输入用户名" />
<input type="password" name="pwd" placeholder="输入密码" />
<input type="checkbox" name="subscribe" /> 订阅
<input type="radio" name="gender" value="male" /> 男
<input type="radio" name="gender" value="female" /> 女
<input type="file" name="resume" />
<input type="color" name="favcolor" />
<input type="range" min="0" max="100" />

<label>

语义：表单元素的文本标签。 使用建议：

  • 通过 for 属性绑定到表单控件。
  • 点击标签时会聚焦对应输入框。
<label for="email">邮箱：</label> <input type="email" id="email" name="email" />

<fieldset>

语义：对表单中相关元素分组。 使用建议：

  • 常配合 <legend> 提供分组说明。
<fieldset>
  <legend>个人信息</legend>
  <label>姓名：<input type="text" name="name" /></label>
  <label>年龄：<input type="number" name="age" /></label>
</fieldset>

<legend>

语义：为 <fieldset> 分组提供标题。

<fieldset>
  <legend>联系方式</legend>
  <label>电话：<input type="tel" /></label>
</fieldset>

<textarea>

语义：多行文本输入框。 使用建议：

  • 可通过 rows 和 cols 控制大小，或用 CSS 样式控制。
<textarea name="message" rows="4" cols="50" placeholder="请输入留言"></textarea>

<select>、<option>、<optgroup>

语义：下拉选择列表。 使用建议：

  • <option> 定义选项，selected 设置默认选中。
  • <optgroup> 用于分组选项。
<select name="fruit">
  <optgroup label="热带水果">
    <option value="mango">芒果</option>
    <option value="banana">香蕉</option>
  </optgroup>
  <optgroup label="温带水果">
    <option value="apple">苹果</option>
    <option value="pear">梨</option>
  </optgroup>
</select>

<button>

语义：可点击的按钮。 使用建议：

  • type="submit"：提交表单（默认）。
  • type="reset"：重置表单。
  • type="button"：普通按钮。
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('Hello')">点击我</button>

<datalist>

语义：为 <input> 提供自动完成选项。

<input list="browsers" name="browser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Edge"></option>
</datalist>

<output>

语义：显示计算结果。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" name="a" /> + <input type="number" name="b" /> =
  <output name="result"></output>
</form>

<progress>

语义：任务进度条（已完成的百分比）。

<progress value="70" max="100">70%</progress>

<meter>

语义：测量值或范围值。

<meter value="0.6" min="0" max="1" optimum="0.8">60%</meter>