FORMA

标签

HTML 标签用于表达内容的语义与结构。应优先选用与含义匹配的元素（如 <button> 而非 <div onclick>），并遵守内容模型（哪些子元素合法）。概念见 简介；head 内元标签见 Head。

全局属性（常用）

多数元素均可使用（具体以规范为准）：

属性说明
id文档内唯一标识（勿滥用；样式优先用 class）
class类名列表，供 CSS / JS 选择
style行内 CSS（维护性差，慎用）
title补充提示（非替代 alt）
lang元素语言（覆盖 html lang）
hidden隐藏且不参与无障碍树（与 display:none 类似）
data-*自定义数据，供脚本读取
tabindexTab 顺序（0 自然顺序，-1 可编程聚焦）

无障碍：表单控件配 <label>；图片必填有意义的 alt；交互勿仅靠颜色区分。

基本文档结构标签

<!DOCTYPE html>

  • 含义：声明文档类型为 HTML5
  • 作用：告诉浏览器使用哪种 HTML 版本解析文档
  • 特点：必须位于 HTML 文档的第一行，不区分大小写

<html>

  • 含义：HTML 文档的根元素
  • 作用：包含整个 HTML 文档的内容
  • 属性：
    • lang：指定文档的语言
    • dir：指定文档的方向（ltr：从左到右，rtl：从右到左）
  • 特点：文档根元素，包含 <head> 与 <body>（二者为其子元素）

<head>

  • 含义：HTML 文档的头部元素
  • 作用：包含文档的元数据（metadata），如标题、样式表、脚本等
  • 属性：无
  • 特点：必须包含在 <html> 标签中，位于 <body> 标签之前

<body>

  • 含义：HTML 文档的主体元素
  • 作用：包含文档的主要内容，如文本、图片、视频等
  • 特点：包含所有在浏览器中可见的内容

文本格式化标签

标题标签 <h1> 到 <h6>

  • 含义：定义六级标题
  • 作用：表示文档的标题层级
  • 特点：
    • <h1> 是最高级标题，<h6> 是最低级
    • 浏览器会自动为标题添加不同的样式
    • 建议每页一个 <h1> 作为主标题（利于大纲与 SEO；非 HTML 语法强制）

段落标签 <p>

  • 含义：定义段落
  • 作用：将文本组织成段落
  • 特点：浏览器会自动在段落前后添加空行

换行标签 <br>

  • 含义：插入简单的换行符
  • 作用：在文本中创建换行
  • 特点：空元素；语义上表示换行，排版优先用 CSS margin / line-height

水平线标签 <hr>

  • 含义：创建水平线
  • 作用：分隔内容区域
  • 特点：空元素；表示主题分隔，样式用 CSS border 等实现

文本语义标签

  • <strong>：表示重要文本，通常显示为粗体
  • <b>：表示粗体文本，但不强调重要性
  • <em>：表示强调文本，通常显示为斜体
  • <i>：表示斜体文本，但不强调重要性
  • <small>：表示小号文本
  • <mark>：表示标记或高亮的文本
  • <del>：表示被删除的文本
  • <ins>：表示被插入的文本
  • <sub>：表示下标文本
  • <sup>：表示上标文本
  • <code>：表示计算机代码文本
  • <kbd>：表示键盘输入文本
  • <samp>：表示计算机程序输出文本
  • <var>：表示变量文本
  • <pre>：表示预格式化文本
  • <abbr title="...">：缩写，提供全称提示
  • <blockquote cite="...">：块级引用
  • <cite>：作品标题（人名、书名等）
  • <time datetime="2026-06-02">：机器可读日期时间

列表标签

无序列表 <ul>

  • 含义：定义无序列表
  • 作用：创建项目没有特定顺序的列表
  • 特点：列表项默认使用圆点标记

有序列表 <ol>

  • 含义：定义有序列表
  • 作用：创建项目有特定顺序的列表
  • 特点：列表项默认使用数字标记
  • 属性：
    • type：设置编号类型（1, A, a, I, i）
    • start：设置起始编号
    • reversed：设置列表顺序为降序

列表项 <li>

  • 含义：定义列表项
  • 作用：作为 <ul> 或 <ol> 的子元素
  • 特点：可以包含文本、图片、链接等

定义列表 <dl>

  • 含义：定义定义列表
  • 作用：创建术语及其描述的列表
  • 子元素：
    • <dt>：定义术语/项目
    • <dd>：定义描述

链接与媒体标签

链接标签 <a>

  • 含义：定义超链接
  • 作用：链接到其他页面、文件或位置
  • 属性：
    • href：指定链接目标的 URL
    • target：指定链接打开方式（_blank, _self, _parent, _top）
    • title：指定链接的提示信息
    • download：指定下载链接
    • rel：与目标文档关系；target="_blank" 时建议 rel="noopener noreferrer"（安全）
    • download：提示下载而非导航（同源或 blob 策略限制见规范）

图片标签 <img>

  • 含义：嵌入图像
  • 作用：在网页中显示图片
  • 属性：
    • src：指定图像的 URL（必需）
    • alt：指定图像的替代文本（必需）
    • width：指定图像的宽度
    • height：指定图像的高度
    • loading：lazy（接近视口再加载）/ eager（默认）
    • decoding：async / sync / auto（解码提示）

响应式图片 <picture> / <source>

在 <picture> 内用多个 <source media="..." srcset="..."> 按条件选择资源，最后回退 <img>：

html
<picture>
    <source media="(min-width: 800px)" srcset="hero-wide.webp" type="image/webp" />
    <img src="hero.jpg" alt="产品展示" width="800" height="450" />
</picture>

音频标签 <audio>

  • 含义：嵌入音频内容
  • 作用：在网页中播放音频
  • 属性：
    • src：指定音频文件的 URL
    • controls：显示音频控件
    • autoplay：自动播放（多数浏览器要求同时 muted 才允许自动播放）
    • loop：循环播放音频
    • muted：静音播放
    • preload：预加载音频（none, metadata, auto）

视频标签 <video>

  • 含义：嵌入视频内容
  • 作用：在网页中播放视频
  • 属性：
    • src：指定视频文件的 URL
    • controls：显示视频控件
    • autoplay：自动播放（通常需 muted；注意无障碍与用户体验）
    • loop：循环播放视频
    • muted：静音播放
    • preload：预加载视频（none, metadata, auto）
    • width：指定视频播放器的宽度
    • height：指定视频播放器的高度
    • poster：指定视频加载时显示的图像

嵌入内容标签 <iframe>

  • 含义：创建内联框架
  • 作用：在当前 HTML 文档中嵌入另一个文档
  • 属性：
    • src：指定要嵌入的文档的 URL
    • width：指定框架的宽度
    • height：指定框架的高度
    • name：指定框架的名称
    • sandbox：对嵌入的内容应用额外的限制
    • allow：指定特定功能的权限策略

对象标签 <object>

  • 含义：嵌入外部资源
  • 作用：嵌入 PDF、SVG 等（Flash 已终止支持，勿再依赖）
  • 属性：
    • data：指定对象的 URL
    • type：指定对象的 MIME 类型
    • width：指定对象的宽度
    • height：指定对象的高度

嵌入标签 <embed>

  • 含义：嵌入外部内容（空元素）
  • 作用：嵌入插件或媒体；现代页面更常用 <video> / <iframe> / <object>
  • 属性：
    • src：指定嵌入内容的 URL
    • type：指定嵌入内容的 MIME 类型
    • width：指定嵌入内容的宽度
    • height：指定嵌入内容的高度
    • allowfullscreen：允许全屏播放

表格标签

表格标签 <table>

  • 含义：定义表格
  • 作用：创建表格
  • 子元素：
    • <caption>：表格标题
    • <thead>：表格头部
    • <tbody>：表格主体
    • <tfoot>：表格底部
    • <tr>：表格行
    • <th>：表格头部单元格
    • <td>：表格数据单元格
  • 呈现属性（border、cellpadding、width 等）在 HTML5 中已废弃，请用 CSS 控制边框与间距。
  • 数据表格应使用 <th scope="col|row"> 或 headers 关联，利于屏幕阅读器。
html
<table>
    <caption>季度销售</caption>
    <thead>
        <tr>
            <th scope="col">季度</th>
            <th scope="col">销售额</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Q1</th>
            <td>100</td>
        </tr>
    </tbody>
</table>

表单标签

表单标签 <form>

  • 含义：定义表单
  • 作用：创建表单，用于收集用户输入
  • 属性：
    • action：指定表单提交的 URL
    • method：指定表单提交的方法（get, post）
    • enctype：指定表单数据的编码类型（application/x-www-form-urlencoded, multipart/form-data, text/plain）
    • target：指定表单提交后的显示方式（_blank, _self, _parent, _top）

输入标签 <input>

  • 含义：定义输入控件
  • 作用：收集用户输入
  • 属性：
    • type：控件类型（常用见下表）
    • name：指定输入控件的名称
    • value：指定输入控件的值
    • placeholder：指定输入控件的占位符文本
    • required：指定输入控件是否为必填项
    • readonly：指定输入控件是否为只读
    • disabled：指定输入控件是否为禁用
    • autocomplete、min、max、pattern、inputmode 等：校验与输入体验
type用途
text / search / tel / url单行文本
email / password邮箱、密码
number / range数字、滑块
date / time / datetime-local / month / week日期时间（UI 因浏览器而异）
checkbox / radio多选 / 互斥单选（radio 需相同 name）
file文件上传
hidden不显示，随表单提交
submit / reset / button提交、重置、普通按钮

文本域标签 <textarea>

  • 含义：定义多行文本输入控件
  • 作用：收集用户输入的多行文本
  • 属性：
    • name：指定文本域的名称
    • rows：指定文本域的行数
    • cols：指定文本域的列数
    • placeholder：指定文本域的占位符文本
    • required：指定文本域是否为必填项
    • readonly：指定文本域是否为只读
    • disabled：指定文本域是否为禁用

选择框标签 <select>

  • 含义：定义下拉列表
  • 作用：创建下拉列表，供用户选择
  • 子元素：
    • <option>：定义下拉列表的选项
  • 属性：
    • name：指定选择框的名称
    • multiple：指定是否允许多选
    • required：指定选择框是否为必填项

按钮 <button>

  • 含义：定义按钮
  • 作用：创建按钮，用于提交表单或执行其他操作
  • 属性：
    • type：指定按钮的类型（submit, reset, button）
    • name：指定按钮的名称
    • value：指定按钮的值
    • disabled：指定按钮是否为禁用

标签 <label>

  • 含义：定义标签
  • 作用：为表单控件提供标签
  • 属性：
    • for：指定标签与表单控件的关联
    • form：指定标签与表单的关联

字段集 <fieldset>

  • 含义：定义字段集
  • 作用：将表单控件分组
  • 子元素：
    • <legend>：定义字段集的标题
  • 属性：
    • disabled：指定字段集是否为禁用
    • form：指定字段集与表单的关联

分组 <legend>

  • 含义：定义分组标题
  • 作用：为字段集提供标题
  • 属性：
    • align：指定标题的对齐方式（left, center, right）

数据列表 <datalist>

  • 含义：定义数据列表
  • 作用：为输入控件提供预定义的选项
  • 子元素：
    • <option>：定义数据列表的选项
  • 属性：
    • id：指定数据列表的唯一标识符
    • name：指定数据列表的名称

输出 <output>

  • 含义：定义输出结果
  • 作用：显示计算结果或其他输出内容
  • 属性：
    • for：指定输出结果与表单控件的关联
    • form：指定输出结果与表单的关联
    • name：指定输出结果的名称

进度 <progress>

  • 含义：定义进度条
  • 作用：显示任务的进度
  • 属性：
    • value：指定进度条的当前值
    • max：指定进度条的最大值

定义度量衡 <meter>

  • 含义：定义度量器
  • 作用：显示度量值
  • 属性：
    • value：指定度量器的当前值
    • min：指定度量器的最小值
    • max：指定度量器的最大值
    • low：指定度量器的低值
    • high：指定度量器的高值
    • optimum：指定度量器的最佳值

语义结构标签（HTML5）

无对应语义时再用 <div> / <span>。以下元素均可配合 全局属性。

通用容器 <div> / <span>

  • <div>：无语义块级容器，仅作分组或挂 class
  • <span>：无语义行内容器
标签语义
<header>页眉或区块标题区（可含 logo、标题；非整页 <head>）
<nav>主导航链接集合
<main>文档唯一主内容区（每页一个）
<article>独立完整内容（博文、评论项）
<section>主题分组，宜配标题
<aside>侧边栏、相关链接、广告等附属内容
<footer>页脚或区块脚注

折叠与对话框

  • <details> / <summary>：原生折叠面板；open 属性默认展开。
  • <dialog>：模态或非模态对话框；可用 showModal() / close()（HTMLDialogElement）。打开模态时需管理焦点与 aria（或配合框架）。

图例 <figure> / <figcaption>

html
<figure>
    <img src="chart.png" alt="2026 年 Q1 销售趋势" />
    <figcaption>图 1：Q1 销售趋势</figcaption>
</figure>

总结

  • 用语义标签表达结构；布局交给 CSS。
  • 表单：<label> + 合适 type；表格数据配 th/scope。
  • 媒体：alt、poster；自动播放需知浏览器策略。
  • 元数据与资源提示在 Head。

参考文献

以下链接在编写时均可正常访问：

资料说明
MDN：HTML 元素参考各标签说明
MDN：内容类别嵌套规则
MDN：input type表单控件类型
MDN：picture响应式图片
WHATWG：HTML Living Standard规范（英文）

相关文章

Series

html

3 / 3

简介