HTML标签使用规范参考

本参考基于HTML5标准，提供了常用标签的分类、说明、样式效果、使用规范及标签解释，帮助开发者理解标签以编写结构清晰、语义明确的HTML代码。

遵循这些规范可提高代码可读性、可维护性，并增强无障碍访问体验。代码具体使用案例请右转AI询问，相信你有一天可以熟练使用所有标签。

标签	分类	说明	样式效果	使用规范	标签解释
`html`	文档结构	HTML文档根元素	无	必须包含lang属性（如<html lang="zh-CN">）	hypertext markup language
`head`	文档结构	文档头部容器（含元数据、标题等）	无	必须在<body>之前，包含<title>/<meta>等	head element
`body`	文档结构	文档主体内容容器	无	仅能有一个<body>标签	body of document
`title`	文档结构	文档标题（显示在浏览器标签页）	无	必须在<head>内，长度建议≤60字符	title of document
`meta`	文档结构	提供文档元数据（字符集、描述等）	无	charset必须在<head>第一个<meta>，如<meta charset="UTF-8">	meta data
`link`	文档结构	引入外部资源（CSS/图标等）	无	rel="stylesheet"引入CSS，rel="icon"引入图标	link external resource
`style`	文档结构	定义内部CSS样式	无	通常放在<head>，避免在<body>内使用	style definition
`script`	文档结构	引入/定义JavaScript	无	async/defer优化加载，避免阻塞渲染	script code
`base`	文档结构	指定页面相对URL基准地址	无	仅能有一个，必须在<head>内	base address
`h1~h6`	标题与段落	一级至六级标题（h1最重要）	h1最大，h6最小，加粗	语义化标题，避免用<h1>做普通文本加粗	heading level 1~6
`p`	标题与段落	段落文本容器	默认上下间距	每个段落独立使用，避免嵌套<p>	paragraph
`br`	标题与段落	强制换行	无	禁用用于间距（用CSS代替）	break row
`hr`	标题与段落	水平分隔线	默认灰色细线	语义化分隔内容区块，非用于视觉分隔	horizontal rule
`pre`	标题与段落	预格式化文本（保留空格/换行）	保留原始格式（等宽字体）	用于代码块、诗歌等需保留格式内容	preformatted text
`blockquote`	标题与段落	长文本引用块	默认左侧缩进+引用样式	必须包含cite属性（引用来源）	block quote
`ul`	列表	无序列表（项目符号列表）	默认圆点列表	仅用于非顺序内容，禁用代替<ol>	unordered list
`ol`	列表	有序列表（编号列表）	默认数字编号	用于有顺序内容（如步骤、排名）	ordered list
`li`	列表	列表项	依赖父容器（<ul>/<ol>）	必须嵌套在<ul>或<ol>内	list item
`dl`	列表	定义列表（术语+描述）	无默认样式	术语用<dt>，描述用<dd>	definition list
`dt`	列表	定义列表的术语	无默认样式	必须在<dl>内，与<dd>配对	definition term
`dd`	列表	定义列表的描述	无默认样式	必须在<dl>内，紧跟<dt>	definition description
`table`	表格	表格容器	无默认边框	语义化表格，避免用<table>布局	table
`tr`	表格	表格行	无	必须嵌套在<table>内	table row
`th`	表格	表格表头单元格	默认加粗+居中	用于表头，禁用用于普通数据	table head
`td`	表格	表格数据单元格	无	用于数据内容，非表头	table data
`caption`	表格	表格标题	无	必须在<table>内，必须在<tr>前	caption
`thead`	表格	表格头部（表头区域）	默认加粗	通常包含<tr>+<th>	table head
`tbody`	表格	表格主体（数据区域）	无	通常包含多行<tr>	table body
`tfoot`	表格	表格底部（汇总行）	无	通常用于总计行，必须在<tbody>后	table foot
`form`	表单	表单容器	无	必须包含action和method属性	form
`input`	表单	输入字段（需type属性）	默认输入框	type="text"/email/password等	input field
`button`	表单	按钮	无默认样式	禁用用于链接（用<a>），需type="submit"	button
`select`	表单	下拉选择框	默认下拉菜单	必须包含<option>子元素	select option
`option`	表单	下拉选项	无	selected属性设置默认选项	option
`textarea`	表单	多行文本输入框	默认可调整大小	用rows/cols控制尺寸	text area
`label`	表单	表单控件标签	无	必须通过for关联input的id	label
`fieldset`	表单	表单元素分组	默认带边框+标题	需搭配<legend>使用	field set
`legend`	表单	fieldset的标题	无	必须在<fieldset>内，必须在第一个子元素	legend
`datalist`	表单	提供输入建议（下拉选项列表）	无	与input配合使用，通过list属性关联	datalist(suggestions)
`output`	表单	显示计算结果（如表单计算结果）	无	通常与JavaScript配合使用	output
`progress`	表单	显示任务进度（进度条）	无	使用value和max属性	progress
`meter`	表单	显示度量值（如容量、分数）	无	使用value和min/max属性	meter
`img`	媒体	显示图像	无默认边框	必须包含alt属性（无障碍要求）	image
`audio`	媒体	嵌入音频	默认播放控件	用controls属性显示控件，source指定文件	audio
`video`	媒体	嵌入视频	默认播放控件	同audio，需controls+source	video
`source`	媒体	指定媒体资源URL	无	必须嵌套在<audio>/<video>内	source
`iframe`	媒体	嵌入外部HTML页面	无默认边框	禁用用于广告（用<object>替代），需sandbox属性	iframe
`header`	语义化	文档/节的头部	无	用于页眉、文章标题，禁用用于<div>	header
`footer`	语义化	文档/节的底部	无	用于页脚、版权信息	footer
`section`	语义化	文档独立章节	无	有标题的独立内容区块（如<h2>+内容）	section
`article`	语义化	独立内容块（博客/新闻）	无	语义化内容单元，禁用用于普通容器	article
`nav`	语义化	导航链接区域	无	仅包含导航链接，禁用用于非导航内容	navigation
`aside`	语义化	与内容相关但独立的部分	无	侧边栏、广告等，禁用用于主要内容	aside
`main`	语义化	文档主要内容	无	仅能有一个，避免嵌套在<header>/<footer>	main
`figure`	语义化	带标题的媒体内容	无	用于图片/图表+说明，必须搭配<figcaption>	figure
`figcaption`	语义化	figure的标题	无	必须在<figure>内，可放首尾	figure caption
`time`	语义化	表示日期/时间	无	用datetime属性存机器可读时间（如<time datetime="2023-01-01">2023年1月1日</time>）	time
`address`	语义化	文档联系信息（如作者地址）	无	用于联系信息，如地址、电话、电子邮件	address
`details`	语义化	可展开内容区域（用于折叠内容）	无	与<summary>配合使用	details
`summary`	语义化	<details>的摘要（折叠标题）	无	必须在<details>内，作为第一个子元素	summary
`strong`	文本格式化	强调重要性（语义化加粗）	默认加粗	优先于<b>，用于重要信息	strong emphasis
`em`	文本格式化	强调（语义化斜体）	默认斜体	优先于<i>，用于情感强调	emphasis
`b`	文本格式化	粗体（无语义）	默认加粗	禁用用于强调（用<strong>）	bold
`i`	文本格式化	斜体（无语义）	默认斜体	禁用用于强调（用<em>）	italic
`mark`	文本格式化	高亮文本	默认黄色背景	用于高亮关键词（如搜索结果）	mark
`small`	文本格式化	较小字体（免责声明）	默认字体缩小	用于版权、法律声明	small text
`code`	文本格式化	代码片段	默认等宽字体	用于显示代码，禁用用于样式	code
`div`	块级容器	通用块级容器（无语义）	无	仅在无语义标签时使用（如<article>/<section>不可用时）	division
`span`	行内容器	通用行内容器（无语义）	无	仅在无语义标签时使用（如<strong>/<em>不可用时）	span
`a`	链接	超链接	默认蓝色下划线	必须包含href属性，target="_blank"需加rel="noopener"	anchor