HTML参考手册

完整的HTML标签、属性和事件参考

全站首页 频道首页

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/">

文本内容标签

标签 描述 示例
<h1> to <h6> 定义HTML标题 <h1>主标题</h1>
<p> 定义段落 <p>这是一个段落</p>
<br> 插入单个换行 第一行<br>第二行
<hr> 定义水平线 <hr>
<div> 定义文档中的分区或节 <div>内容区块</div>
<span> 定义文档中的行内元素 <span>行内内容</span>

文本格式化标签

标签 描述 示例
<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>是标记语言

表单和输入标签

标签 描述 示例
<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>

语义化标签

标签 描述 示例
<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"

事件属性

窗口事件属性

属性 描述 触发时机
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 当鼠标滚轮在元素上滚动时运行脚本 滚动滚轮时

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代码符合标准，可以使用以下验证工具：

注意： 虽然现代浏览器对不规范的HTML有很好的容错能力，但编写有效的HTML代码有助于提高性能、可访问性和可维护性。