语义化标签

标签	说明	使用场景
header	页面或区域的头部	页面顶部、文章标题区
nav	导航链接区域	主菜单、目录
main	主要内容区域	页面核心内容（唯一）
article	独立内容区块	博客文章、新闻
section	文档章节	文章小节、功能区块
aside	侧边栏内容	相关链接、广告
footer	页面或区域底部	版权信息、联系方式
address	联系信息	作者联系方式

文本增强标签

标签	说明	示例
time	时间标记，datetime属性定义机器可读时间	<time datetime="2024-01-01">元旦</time>
mark	高亮文本	<mark>关键词</mark>
progress	进度条	<progress value="70" max="100">70%</progress>
meter	度量衡（已知范围）	<meter min="0" max="100" value="75">75%</meter>
figure	独立内容单元	图片、图表、代码块
figcaption	figure的标题	图片说明
details	可展开详情（需配合summary）	FAQ、展开更多
summary	details的可见标题	点击展开的部分

多媒体标签

标签	说明	主要属性
video	视频播放	src, controls, autoplay, loop, muted, poster
audio	音频播放	src, controls, autoplay, loop, muted
source	为video/audio指定多个源	src, type
track	字幕轨道	src, kind, srclang, label
picture	响应式图片容器	-

响应式图片

属性/标签	说明	示例
srcset	图片资源列表 + 描述符	src="small.jpg 1x, medium.jpg 2x"
sizes	图片显示尺寸	sizes="(max-width: 600px) 100vw, 50vw"
<source>	picture内指定不同条件的图片	<source media="(min-width: 800px)" srcset="large.jpg">
loading	懒加载控制	loading="lazy"
decoding	图片解码方式	decoding="async"
srcset+type	不同图片格式选择	type="image/webp"

Web API

API	说明	主要方法
Canvas	2D图形绘制	getContext('2d'), fillRect(), drawImage()
Web Storage	客户端存储	localStorage.setItem(), sessionStorage.getItem()
Geolocation	获取地理位置	getCurrentPosition(), watchPosition()
Drag and Drop	拖拽API	draggable="true", ondragstart, ondrop
Web Workers	后台线程执行脚本	new Worker(), postMessage()
File API	文件操作	FileReader, FileList
History API	浏览器历史管理	pushState(), replaceState(), popstate