HTML参考手册
本参考手册提供了完整的HTML标签、属性和事件的详细说明，帮助您快速查找和了解HTML语法。
基础HTML标签
文档结构标签
| 标签 | 描述 | 示例 |
|---|---|---|
<!DOCTYPE> |
定义文档类型 | <!DOCTYPE html> |
<html> |
HTML文档的根元素 | <html lang="zh-CN"> |
<head> |
包含文档的元数据 | <head><title>标题</title></head> |
<title> |
定义文档标题 | <title>我的网页</title> |
<body> |
定义文档的主体 | <body>内容</body> |
<meta> |
定义元数据 | <meta charset="UTF-8"> |
<link> |
链接外部资源 | <link rel="stylesheet" href="style.css"> |
<style> |
定义内部样式 | <style>body { color: red; }</style> |
<script> |
定义客户端脚本 | <script>alert('Hello');</script> |
<base> |
定义页面中所有链接的默认地址 | <base href="https://example.com/"> |
<noscript> |
定义不支持脚本时的替代内容 | <noscript>您的浏览器不支持JavaScript</noscript> |
文本内容标签
| 标签 | 描述 | 示例 |
|---|---|---|
<h1> to <h6> |
定义HTML标题 | <h1>主标题</h1> |
<p> |
定义段落 | <p>这是一个段落</p> |
<br> |
插入单个换行 | 第一行<br>第二行 |
<hr> |
定义水平线 | <hr> |
<div> |
定义文档中的分区或节 | <div>内容区块</div> |
<span> |
定义文档中的行内元素 | <span>行内内容</span> |
<a> |
定义超链接或锚点 | <a href="https://example.com">链接文本</a> |
文本格式化标签
| 标签 | 描述 | 示例 |
|---|---|---|
<b> |
定义粗体文本 | <b>粗体文本</b> |
<strong> |
定义重要文本 | <strong>重要文本</strong> |
<i> |
定义斜体文本 | <i>斜体文本</i> |
<em> |
定义强调文本 | <em>强调文本</em> |
<mark> |
定义标记/高亮文本 | <mark>标记文本</mark> |
<small> |
定义小号文本 | <small>小文本</small> |
<del> |
定义被删除的文本 | <del>删除文本</del> |
<ins> |
定义被插入的文本 | <ins>插入文本</ins> |
<sub> |
定义下标文本 | H<sub>2</sub>O |
<sup> |
定义上标文本 | X<sup>2</sup> |
<code> |
定义计算机代码 | <code>console.log()</code> |
<kbd> |
定义键盘输入 | <kbd>Ctrl</kbd>+<kbd>C</kbd> |
<samp> |
定义计算机输出 | <samp>Hello World</samp> |
<var> |
定义变量 | <var>x</var> = 5 |
<pre> |
定义预格式文本 | <pre>保留格式的文本</pre> |
<abbr> |
定义缩写 | <abbr title="World Wide Web">WWW</abbr> |
<address> |
定义联系信息 | <address>作者信息</address> |
<bdo> |
定义文本方向 | <bdo dir="rtl">从右到左</bdo> |
<blockquote> |
定义块引用 | <blockquote>引用内容</blockquote> |
<q> |
定义短引用 | <q>短引用</q> |
<cite> |
定义作品标题 | <cite>作品标题</cite> |
<dfn> |
定义项目 | <dfn>HTML</dfn>是标记语言 |
<u> |
定义非文本注释形式的下划线文本 | <u>拼写错误</u> |
<s> |
定义不再准确或不再相关的内容 | <s>原价￥99</s> |
<bdi> |
隔离可能以不同方向格式化的文本 | <p>用户 <bdi>مرحبا</bdi> 登录</p> |
<data> |
将内容与机器可读的值关联 | <data value="21053">特级初榨橄榄油</data> |
<ruby> |
定义注音或旁注内容 | <ruby>汉<rt>hàn</rt></ruby> |
<rt> |
定义ruby注音中的文本 | <rt>hàn</rt> |
<rp> |
定义不支持ruby时显示的括号 | <rp>(</rp><rt>hàn</rt><rp>)</rp> |
<wbr> |
定义文本中可换行的位置 | <p>super<wbr>califragilistic</p> |
表单和输入标签
| 标签 | 描述 | 示例 |
|---|---|---|
<form> |
定义HTML表单 | <form action="/submit" method="post"></form> |
<input> |
定义输入控件 | <input type="text" name="username"> |
<textarea> |
定义多行文本输入 | <textarea rows="4" cols="50"></textarea> |
<button> |
定义可点击按钮 | <button type="submit">提交</button> |
<select> |
定义下拉列表 | <select><option>选项1</option></select> |
<optgroup> |
定义选项组 | <optgroup label="组1"><option>选项1</option></optgroup> |
<option> |
定义下拉列表中的选项 | <option value="1">选项1</option> |
<label> |
定义input元素的标签 | <label for="name">姓名：</label> |
<fieldset> |
定义表单字段组 | <fieldset><legend>组标题</legend></fieldset> |
<legend> |
定义fieldset元素的标题 | <legend>个人信息</legend> |
<datalist> |
定义输入控件的预定义选项 | <datalist id="browsers"><option>Chrome</option></datalist> |
<output> |
定义计算结果 | <output name="result">0</output> |
输入类型
| 类型 | 描述 | 示例 |
|---|---|---|
text |
单行文本输入 | <input type="text"> |
password |
密码字段 | <input type="password"> |
email |
电子邮件地址 | <input type="email"> |
url |
URL地址 | <input type="url"> |
tel |
电话号码 | <input type="tel"> |
number |
数值输入 | <input type="number"> |
range |
范围滑块 | <input type="range"> |
date |
日期选择器 | <input type="date"> |
time |
时间选择器 | <input type="time"> |
datetime-local |
本地日期时间选择器 | <input type="datetime-local"> |
month |
月份选择器 | <input type="month"> |
week |
周选择器 | <input type="week"> |
color |
颜色选择器 | <input type="color"> |
checkbox |
复选框 | <input type="checkbox"> |
radio |
单选按钮 | <input type="radio"> |
file |
文件选择 | <input type="file"> |
submit |
提交按钮 | <input type="submit"> |
reset |
重置按钮 | <input type="reset"> |
button |
可点击按钮 | <input type="button"> |
image |
图像提交按钮 | <input type="image" src="submit.png"> |
hidden |
隐藏输入字段 | <input type="hidden"> |
search |
搜索字段 | <input type="search"> |
表格标签
| 标签 | 描述 | 示例 |
|---|---|---|
<table> |
定义表格 | <table><tr><td>内容</td></tr></table> |
<caption> |
定义表格标题 | <caption>表格标题</caption> |
<th> |
定义表格表头单元格 | <th>标题</th> |
<tr> |
定义表格行 | <tr><td>内容</td></tr> |
<td> |
定义表格单元格 | <td>单元格内容</td> |
<thead> |
定义表格的页眉 | <thead><tr><th>标题</th></tr></thead> |
<tbody> |
定义表格的主体 | <tbody><tr><td>内容</td></tr></tbody> |
<tfoot> |
定义表格的页脚 | <tfoot><tr><td>总计</td></tr></tfoot> |
<col> |
定义表格列的属性 | <col span="2" style="background-color:red"> |
<colgroup> |
定义表格列的分组 | <colgroup><col span="2"></colgroup> |
列表标签
| 标签 | 描述 | 示例 |
|---|---|---|
<ul> |
定义无序列表 | <ul><li>项目</li></ul> |
<ol> |
定义有序列表 | <ol><li>第一项</li></ol> |
<li> |
定义列表项 | <li>列表项</li> |
<dl> |
定义定义列表 | <dl><dt>术语</dt><dd>定义</dd></dl> |
<dt> |
定义定义列表中的项目 | <dt>HTML</dt> |
<dd> |
定义定义列表中项目的描述 | <dd>超文本标记语言</dd> |
媒体标签
| 标签 | 描述 | 示例 |
|---|---|---|
<img> |
定义图像 | <img src="image.jpg" alt="描述"> |
<map> |
定义图像映射 | <map name="workmap"><area shape="rect" coords="0,0,100,100"></map> |
<area> |
定义图像映射中的区域 | <area shape="circle" coords="50,50,25" href="page.html"> |
<audio> |
定义声音内容 | <audio controls><source src="audio.mp3"></audio> |
<video> |
定义视频 | <video controls><source src="video.mp4"></video> |
<source> |
定义多媒体资源 | <source src="movie.mp4" type="video/mp4"> |
<track> |
定义媒体的文本轨道 | <track src="subtitles_en.vtt" kind="subtitles" srclang="en"> |
<embed> |
定义嵌入的内容 | <embed src="flash.swf"> |
<object> |
定义嵌入的对象 | <object data="pdf.pdf" type="application/pdf"></object> |
<param> |
定义对象的参数 | <param name="autoplay" value="true"> |
<picture> |
定义图片容器 | <picture><source srcset="img.webp"><img src="img.jpg"></picture> |
<figure> |
定义自包含内容 | <figure><img src="img.jpg"><figcaption>标题</figcaption></figure> |
<figcaption> |
定义figure元素的标题 | <figcaption>图1: 示例图片</figcaption> |
<iframe> |
在页面中内嵌另一个文档 | <iframe src="https://example.com" title="示例"></iframe> |
<canvas> |
通过脚本动态绘制图形 | <canvas id="c" width="300" height="150"></canvas> |
<svg> |
定义可缩放矢量图形的容器 | <svg><circle cx="50" cy="50" r="40"/></svg> |
Web组件与交互标签
| 标签 | 描述 | 示例 |
|---|---|---|
<template> |
声明不立即渲染的HTML模板片段 | <template id="card"><div>卡片</div></template> |
<slot> |
定义Web组件中可插入外部内容的插槽 | <slot name="title">默认标题</slot> |
<dialog> |
定义对话框或交互式窗口 | <dialog open><p>对话框内容</p></dialog> |
语义化标签
| 标签 | 描述 | 示例 |
|---|---|---|
<header> |
定义文档或节的页眉 | <header><h1>网站标题</h1></header> |
<nav> |
定义导航链接 | <nav><a href="/">首页</a></nav> |
<main> |
定义文档的主要内容 | <main><article>内容</article></main> |
<article> |
定义独立的自包含内容 | <article><h2>文章标题</h2><p>内容</p></article> |
<section> |
定义文档中的节 | <section><h2>章节标题</h2><p>内容</p></section> |
<aside> |
定义页面内容之外的内容 | <aside><p>相关内容</p></aside> |
<footer> |
定义文档或节的页脚 | <footer><p>版权信息</p></footer> |
<details> |
定义用户可查看或隐藏的额外细节 | <details><summary>详情</summary><p>内容</p></details> |
<summary> |
定义details元素的可见标题 | <summary>点击查看详情</summary> |
<mark> |
定义标记/高亮文本 | <mark>重要内容</mark> |
<time> |
定义日期/时间 | <time datetime="2026-01-15">2026年1月15日</time> |
全局属性
| 属性 | 描述 | 示例 |
|---|---|---|
accesskey |
定义访问元素的键盘快捷键 | accesskey="s" |
class |
定义元素的类名 | class="my-class" |
contenteditable |
定义元素内容是否可编辑 | contenteditable="true" |
data-* |
用于存储页面或应用程序的私有自定义数据 | data-user-id="123" |
dir |
定义元素内容的文本方向 | dir="rtl" |
draggable |
定义元素是否可拖动 | draggable="true" |
hidden |
定义元素是否隐藏 | hidden |
id |
定义元素的唯一ID | id="main-header" |
lang |
定义元素内容的语言 | lang="zh-CN" |
spellcheck |
定义是否对元素进行拼写和语法检查 | spellcheck="true" |
style |
定义元素的行内样式 | style="color: red;" |
tabindex |
定义元素的Tab键次序 | tabindex="1" |
title |
定义元素的额外信息 | title="工具提示文本" |
translate |
定义是否应该翻译元素内容 | translate="no" |
autocapitalize |
控制用户输入是否自动大写 | autocapitalize="sentences" |
enterkeyhint |
为虚拟键盘定义回车键的行为提示 | enterkeyhint="search" |
inputmode |
提示设备显示合适的输入界面 | inputmode="numeric" |
nonce |
一次性加密随机数（配合CSP使用） | nonce="r@nd0m" |
popover |
定义元素作为弹出层显示 | popover |
slot |
将内容分配到Shadow DOM中的命名插槽 | slot="title" |
事件属性
窗口事件属性
| 属性 | 描述 | 触发时机 |
|---|---|---|
onafterprint |
文档打印之后运行脚本 | 打印文档后 |
onbeforeprint |
文档打印之前运行脚本 | 打印文档前 |
onbeforeunload |
文档卸载之前运行脚本 | 离开页面前 |
onerror |
在错误发生时运行脚本 | 发生错误时 |
onhashchange |
当锚部分改变时运行脚本 | URL锚点改变时 |
onload |
页面结束加载之后运行脚本 | 页面加载完成后 |
onmessage |
在消息被触发时运行脚本 | 收到消息时 |
onoffline |
当文档离线时运行脚本 | 网络连接断开时 |
ononline |
当文档上线时运行脚本 | 网络连接恢复时 |
onpagehide |
当窗口隐藏时运行脚本 | 页面隐藏时 |
onpageshow |
当窗口可见时运行脚本 | 页面显示时 |
onpopstate |
当窗口历史记录改变时运行脚本 | 历史记录改变时 |
onresize |
当浏览器窗口被调整大小时运行脚本 | 调整窗口大小时 |
onstorage |
当Web Storage区域更新时运行脚本 | 存储区域更新时 |
onunload |
一旦页面已下载时运行脚本 | 离开页面时 |
表单事件属性
| 属性 | 描述 | 触发时机 |
|---|---|---|
onblur |
元素失去焦点时运行脚本 | 失去焦点时 |
onchange |
在元素值被改变时运行脚本 | 值改变时 |
oncontextmenu |
当上下文菜单被触发时运行脚本 | 右键点击时 |
onfocus |
当元素获得焦点时运行脚本 | 获得焦点时 |
oninput |
当元素获得用户输入时运行脚本 | 输入时 |
oninvalid |
当元素无效时运行脚本 | 验证失败时 |
onreset |
当表单中的重置按钮被点击时运行脚本 | 重置表单时 |
onsearch |
当用户向搜索域输入文本时运行脚本 | 搜索输入时 |
onselect |
在元素中文本被选中后运行脚本 | 选中文本时 |
onsubmit |
在提交表单时运行脚本 | 提交表单时 |
键盘事件属性
| 属性 | 描述 | 触发时机 |
|---|---|---|
onkeydown |
在用户按下按键时运行脚本 | 按下按键时 |
onkeypress |
在用户按下按键时运行脚本 | 按下按键时 |
onkeyup |
当用户释放按键时运行脚本 | 释放按键时 |
鼠标事件属性
| 属性 | 描述 | 触发时机 |
|---|---|---|
onclick |
在元素上点击鼠标时运行脚本 | 点击时 |
ondblclick |
在元素上双击鼠标时运行脚本 | 双击时 |
onmousedown |
当元素上按下鼠标按钮时运行脚本 | 按下鼠标时 |
onmousemove |
当鼠标指针移动到元素上时运行脚本 | 鼠标移动时 |
onmouseout |
当鼠标指针移出元素时运行脚本 | 鼠标移出时 |
onmouseover |
当鼠标指针移动到元素上时运行脚本 | 鼠标悬停时 |
onmouseup |
当在元素上释放鼠标按钮时运行脚本 | 释放鼠标时 |
onmousewheel |
当鼠标滚轮正在被滚动时运行脚本 | 滚动滚轮时 |
onwheel |
当鼠标滚轮在元素上滚动时运行脚本 | 滚动滚轮时 |
拖放事件属性
| 属性 | 描述 | 触发时机 |
|---|---|---|
ondrag |
拖动元素时运行脚本 | 拖动过程中持续触发 |
ondragend |
拖动操作结束时运行脚本 | 拖动结束时 |
ondragenter |
拖动的元素进入目标时运行脚本 | 进入有效目标时 |
ondragleave |
拖动的元素离开目标时运行脚本 | 离开有效目标时 |
ondragover |
拖动的元素悬停在目标上方时运行脚本 | 悬停在目标上时 |
ondragstart |
拖动操作开始时运行脚本 | 开始拖动时 |
ondrop |
拖动的元素被放下时运行脚本 | 在目标上释放时 |
剪贴板事件属性
| 属性 | 描述 | 触发时机 |
|---|---|---|
oncopy |
复制内容时运行脚本 | 用户执行复制时 |
oncut |
剪切内容时运行脚本 | 用户执行剪切时 |
onpaste |
粘贴内容时运行脚本 | 用户执行粘贴时 |
媒体事件属性
| 属性 | 描述 | 触发时机 |
|---|---|---|
onabort |
媒体加载被中止时运行脚本 | 加载中止时 |
oncanplay |
媒体可以开始播放时运行脚本 | 缓冲足够播放时 |
oncanplaythrough |
媒体可完整播放时运行脚本 | 可播放到底时 |
ondurationchange |
媒体时长改变时运行脚本 | 时长改变时 |
onemptied |
媒体被清空时运行脚本 | 媒体清空时 |
onended |
媒体播放结束时运行脚本 | 播放结束时 |
onloadeddata |
媒体当前帧数据加载完成时运行脚本 | 首帧数据就绪时 |
onloadedmetadata |
媒体元数据加载完成时运行脚本 | 元数据就绪时 |
onpause |
媒体暂停时运行脚本 | 暂停播放时 |
onplay |
媒体开始播放时运行脚本 | 开始播放时 |
onplaying |
媒体播放进行中时运行脚本 | 正在播放时 |
onprogress |
浏览器下载媒体时运行脚本 | 缓冲进行时 |
onratechange |
播放速率改变时运行脚本 | 速率改变时 |
onseeked |
跳转定位完成时运行脚本 | 定位结束后 |
onseeking |
跳转定位开始进行时运行脚本 | 定位开始时 |
onstalled |
媒体获取停滞时运行脚本 | 获取数据停滞时 |
onsuspend |
媒体加载被挂起时运行脚本 | 加载挂起时 |
ontimeupdate |
播放位置改变时运行脚本 | 播放进度更新时 |
onvolumechange |
音量或静音状态改变时运行脚本 | 音量改变时 |
onwaiting |
媒体因缓冲而等待时运行脚本 | 等待缓冲时 |
HTML5浏览器兼容性
以下是主要浏览器对HTML5关键特性的支持情况：
| 特性 | Chrome | Firefox | Safari | Edge | IE |
|---|---|---|---|---|---|
| 语义化元素 | ✓ 26+ | ✓ 22+ | ✓ 7+ | ✓ 12+ | ✓ 9+ |
| Canvas | ✓ 4+ | ✓ 2+ | ✓ 3.1+ | ✓ 12+ | ✓ 9+ |
| Web存储 | ✓ 4+ | ✓ 3.5+ | ✓ 4+ | ✓ 12+ | ✓ 8+ |
| Web Workers | ✓ 4+ | ✓ 3.5+ | ✓ 4+ | ✓ 12+ | ✓ 10+ |
| 地理位置 | ✓ 5+ | ✓ 3.5+ | ✓ 5+ | ✓ 12+ | ✓ 9+ |
| 拖放API | ✓ 4+ | ✓ 3.5+ | ✓ 6+ | ✓ 12+ | △ 9+ |
| Web组件 | ✓ 54+ | ✓ 63+ | ✓ 10+ | ✓ 79+ | ✗ |
| Service Workers | ✓ 40+ | ✓ 44+ | ✓ 11.1+ | ✓ 17+ | ✗ |
提示： 对于不支持的浏览器，可以使用polyfill库（如Modernizr）来提供兼容性支持。
HTML验证工具
确保您的HTML代码符合标准，可以使用以下验证工具：
- W3C Markup Validation Service: https://validator.w3.org/
- HTML5 Validator: https://html5.validator.nu/
- Web Developer Browser Extension: 包含HTML验证功能
- VS Code HTMLHint Extension: 实时HTML代码检查
注意： 虽然现代浏览器对不规范的HTML有很好的容错能力，但编写有效的HTML代码有助于提高性能、可访问性和可维护性。