附录A HTML5元素参考

文档信息

标题: HTML5元素参考手册
版本: 1.0
更新日期: 2024年
难度级别: 参考
预计查阅时间: 按需查阅

SEO关键词

HTML5元素参考, HTML标签大全, HTML5新元素, 语义化标签, 表单元素, 多媒体元素, 元素属性, 浏览器兼容性

使用说明

本附录提供HTML5所有元素的完整参考信息，包括：

元素用途和语义
主要属性说明
使用示例
浏览器兼容性
注意事项

内容目录

文档结构元素
文本内容元素
表单元素
多媒体元素
语义化元素
表格元素
脚本和样式元素
其他元素

1. 文档结构元素

1.1 基础结构

`<html>`

用途: HTML文档的根元素 主要属性:

lang: 指定文档语言
dir: 文本方向（ltr/rtl）

html

<html lang="zh-CN" dir="ltr">
  <!-- 文档内容 -->
</html>

浏览器兼容性: 所有浏览器支持

`<head>`

用途: 包含文档元数据 主要属性: 无特定属性

html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
  <link rel="stylesheet" href="styles.css">
</head>

浏览器兼容性: 所有浏览器支持

`<body>`

用途: 包含可见的文档内容 主要属性:

onload: 页面加载完成时执行
onunload: 页面卸载时执行

html

<body onload="init()">
  <!-- 页面内容 -->
</body>

浏览器兼容性: 所有浏览器支持

1.2 元数据元素

`<meta>`

用途: 提供文档元信息 主要属性:

charset: 字符编码
name: 元数据名称
content: 元数据值
http-equiv: HTTP头信息

html

<meta charset="UTF-8">
<meta name="description" content="页面描述">
<meta name="keywords" content="关键词1,关键词2">
<meta name="author" content="作者名">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="30">

浏览器兼容性: 所有浏览器支持

`<title>`

用途: 定义文档标题 主要属性: 无特定属性

html

<title>网站标题 - 页面标题</title>

浏览器兼容性: 所有浏览器支持

`<link>`

用途: 链接外部资源 主要属性:

href: 资源地址
rel: 关系类型
type: MIME类型
media: 媒体类型

html

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

浏览器兼容性: 所有浏览器支持

2. 文本内容元素

2.1 标题元素

`<h1>` - `<h6>`

用途: 定义标题层级 主要属性: 全局属性

html

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

浏览器兼容性: 所有浏览器支持

2.2 段落和文本

`<p>`

用途: 定义段落 主要属性: 全局属性

html

<p>这是一个段落。段落通常包含一个完整的想法或观点。</p>

浏览器兼容性: 所有浏览器支持

`<br>`

用途: 换行 主要属性: 无特定属性

html

<p>第一行<br>第二行</p>

浏览器兼容性: 所有浏览器支持

`<hr>`

用途: 水平分割线 主要属性: 全局属性

html

<p>段落1</p>
<hr>
<p>段落2</p>

浏览器兼容性: 所有浏览器支持

2.3 文本格式化

`<strong>`

用途: 表示重要文本 主要属性: 全局属性

html

<p>这是<strong>重要</strong>的内容。</p>

浏览器兼容性: 所有浏览器支持

`<em>`

用途: 表示强调文本 主要属性: 全局属性

html

<p>这是<em>强调</em>的内容。</p>

浏览器兼容性: 所有浏览器支持

`<mark>`

用途: 标记文本 主要属性: 全局属性

html

<p>搜索结果中的<mark>关键词</mark>会被高亮显示。</p>

浏览器兼容性: IE 9+，其他现代浏览器支持

`<del>`

用途: 表示删除的文本 主要属性:

cite: 解释删除原因的URL
datetime: 删除时间

html

<p>原价<del>¥100</del>现价¥80</p>

浏览器兼容性: 所有浏览器支持

`<ins>`

用途: 表示插入的文本 主要属性:

cite: 解释插入原因的URL
datetime: 插入时间

html

<p>文档版本<ins>2.0</ins></p>

浏览器兼容性: 所有浏览器支持

2.4 引用元素

`<blockquote>`

用途: 块级引用 主要属性:

cite: 引用源URL

html

<blockquote cite="https://example.com">
  <p>这是一段引用文本。</p>
</blockquote>

浏览器兼容性: 所有浏览器支持

`<q>`

用途: 行内引用 主要属性:

cite: 引用源URL

html

<p>正如古人所说：<q cite="https://example.com">知识就是力量</q></p>

浏览器兼容性: 所有浏览器支持

`<cite>`

用途: 引用标题 主要属性: 全局属性

html

<p>这个观点来自<cite>《HTML5权威指南》</cite>一书。</p>

浏览器兼容性: 所有浏览器支持

2.5 代码元素

`<code>`

用途: 内联代码 主要属性: 全局属性

html

<p>使用<code>console.log()</code>输出调试信息。</p>

浏览器兼容性: 所有浏览器支持

`<pre>`

用途: 预格式化文本 主要属性: 全局属性

html

<pre>
function hello() {
    console.log("Hello, World!");
}
</pre>

浏览器兼容性: 所有浏览器支持

`<kbd>`

用途: 键盘输入 主要属性: 全局属性

html

<p>按<kbd>Ctrl</kbd>+<kbd>C</kbd>复制。</p>

浏览器兼容性: 所有浏览器支持

`<samp>`

用途: 计算机输出示例 主要属性: 全局属性

html

<p>程序输出：<samp>Process completed successfully</samp></p>

浏览器兼容性: 所有浏览器支持

2.6 列表元素

`<ul>`

用途: 无序列表 主要属性: 全局属性

html

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

浏览器兼容性: 所有浏览器支持

`<ol>`

用途: 有序列表 主要属性:

reversed: 倒序排列
start: 起始数字
type: 编号类型

html

<ol start="5" type="A">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>

浏览器兼容性: 所有浏览器支持

`<li>`

用途: 列表项 主要属性:

value: 项目值（仅ol中有效）

html

<li value="10">第十项</li>

浏览器兼容性: 所有浏览器支持

`<dl>`

用途: 描述列表 主要属性: 全局属性

html

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

浏览器兼容性: 所有浏览器支持

`<dt>`

用途: 描述术语 主要属性: 全局属性

`<dd>`

用途: 描述定义 主要属性: 全局属性

2.7 链接元素

`<a>`

用途: 超链接 主要属性:

href: 链接地址
target: 打开方式
rel: 关系类型
download: 下载文件名

html

<a href="https://example.com" target="_blank" rel="noopener">外部链接</a>
<a href="#section1">内部锚点</a>
<a href="mailto:user@example.com">邮件链接</a>
<a href="tel:+86-1234567890">电话链接</a>
<a href="file.pdf" download="document.pdf">下载文件</a>

浏览器兼容性: 所有浏览器支持

3. 表单元素

3.1 表单容器

`<form>`

用途: 表单容器 主要属性:

action: 提交地址
method: 提交方法
enctype: 编码类型
target: 提交目标
autocomplete: 自动完成
novalidate: 禁用验证

html

<form action="/submit" method="post" enctype="multipart/form-data">
  <!-- 表单内容 -->
</form>

浏览器兼容性: 所有浏览器支持

3.2 输入元素

`<input>`

用途: 输入控件 主要属性:

type: 输入类型
name: 字段名
value: 默认值
placeholder: 占位符
required: 必填
disabled: 禁用
readonly: 只读
autocomplete: 自动完成

html

<!-- 基本输入类型 -->
<input type="text" name="username" placeholder="用户名" required>
<input type="password" name="password" placeholder="密码" required>
<input type="email" name="email" placeholder="邮箱地址">
<input type="tel" name="phone" placeholder="手机号码">
<input type="url" name="website" placeholder="网站地址">

<!-- HTML5新增类型 -->
<input type="number" name="age" min="18" max="100" step="1">
<input type="range" name="volume" min="0" max="100" value="50">
<input type="date" name="birthday">
<input type="time" name="meeting-time">
<input type="datetime-local" name="appointment">
<input type="month" name="month">
<input type="week" name="week">
<input type="color" name="theme-color">
<input type="search" name="query" placeholder="搜索...">

<!-- 文件上传 -->
<input type="file" name="avatar" accept="image/*">
<input type="file" name="documents" multiple accept=".pdf,.doc,.docx">

<!-- 选择控件 -->
<input type="checkbox" name="agree" id="agree">
<input type="radio" name="gender" value="male" id="male">
<input type="radio" name="gender" value="female" id="female">

<!-- 按钮 -->
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="自定义按钮">
<input type="hidden" name="token" value="abc123">

浏览器兼容性:

基本类型：所有浏览器支持
HTML5新类型：IE 10+，其他现代浏览器支持

3.3 其他表单元素

`<textarea>`

用途: 多行文本输入 主要属性:

rows: 行数
cols: 列数
placeholder: 占位符
required: 必填
maxlength: 最大长度

html

<textarea name="message" rows="4" cols="50" placeholder="请输入消息内容" maxlength="500"></textarea>

浏览器兼容性: 所有浏览器支持

`<select>`

用途: 下拉选择 主要属性:

name: 字段名
multiple: 多选
size: 显示行数
required: 必填

html

<select name="city" required>
  <option value="">请选择城市</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

浏览器兼容性: 所有浏览器支持

`<option>`

用途: 选项 主要属性:

value: 选项值
selected: 默认选中
disabled: 禁用

html

<option value="option1" selected>选项1</option>
<option value="option2" disabled>选项2（禁用）</option>

浏览器兼容性: 所有浏览器支持

`<optgroup>`

用途: 选项组 主要属性:

label: 组标签
disabled: 禁用整组

html

<select name="location">
  <optgroup label="一线城市">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
  </optgroup>
  <optgroup label="二线城市">
    <option value="hangzhou">杭州</option>
    <option value="nanjing">南京</option>
  </optgroup>
</select>

浏览器兼容性: 所有浏览器支持

`<button>`

用途: 按钮 主要属性:

type: 按钮类型（submit/reset/button）
disabled: 禁用
form: 关联表单

html

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="customAction()">自定义按钮</button>

浏览器兼容性: 所有浏览器支持

`<label>`

用途: 标签 主要属性:

for: 关联控件ID
form: 关联表单

html

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 或者嵌套使用 -->
<label>
  密码：
  <input type="password" name="password">
</label>

浏览器兼容性: 所有浏览器支持

`<fieldset>`

用途: 表单分组 主要属性:

disabled: 禁用整组
form: 关联表单

html

<fieldset>
  <legend>个人信息</legend>
  <label>姓名：<input type="text" name="name"></label>
  <label>年龄：<input type="number" name="age"></label>
</fieldset>

浏览器兼容性: 所有浏览器支持

`<legend>`

用途: 字段集标题 主要属性: 全局属性

`<datalist>`

用途: 数据列表 主要属性: 全局属性

html

<input type="text" list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

浏览器兼容性: IE 10+，其他现代浏览器支持

`<output>`

用途: 输出结果 主要属性:

for: 关联控件
form: 关联表单

html

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" name="a" value="50"> +
  <input type="number" name="b" value="50"> =
  <output name="result" for="a b">100</output>
</form>

浏览器兼容性: IE 10+，其他现代浏览器支持

4. 多媒体元素

4.1 图像元素

`<img>`

用途: 图像 主要属性:

src: 图像地址
alt: 替代文本
width: 宽度
height: 高度
loading: 加载方式
sizes: 响应式尺寸
srcset: 响应式图像

html

<img src="image.jpg" alt="图像描述" width="400" height="300">
<img src="image.jpg" alt="图像描述" loading="lazy">
<img src="small.jpg" 
     srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
     sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px"
     alt="响应式图像">

浏览器兼容性: 所有浏览器支持

`<picture>`

用途: 响应式图像容器 主要属性: 全局属性

html

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图像">
</picture>

浏览器兼容性: IE 13+，其他现代浏览器支持

`<figure>`

用途: 图形容器 主要属性: 全局属性

html

<figure>
  <img src="chart.png" alt="销售图表">
  <figcaption>2023年销售数据统计图</figcaption>
</figure>

浏览器兼容性: IE 9+，其他现代浏览器支持

`<figcaption>`

用途: 图形说明 主要属性: 全局属性

4.2 音频元素

`<audio>`

用途: 音频播放 主要属性:

src: 音频地址
controls: 显示控件
autoplay: 自动播放
loop: 循环播放
muted: 静音
preload: 预加载

html

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持音频播放。
</audio>

浏览器兼容性: IE 9+，其他现代浏览器支持

`<source>`

用途: 媒体资源 主要属性:

src: 资源地址
type: MIME类型
media: 媒体查询

4.3 视频元素

`<video>`

用途: 视频播放 主要属性:

src: 视频地址
controls: 显示控件
autoplay: 自动播放
loop: 循环播放
muted: 静音
poster: 封面图像
width: 宽度
height: 高度

html

<video width="640" height="480" controls poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track kind="subtitles" src="subtitles.vtt" srclang="zh" label="中文字幕">
  您的浏览器不支持视频播放。
</video>

浏览器兼容性: IE 9+，其他现代浏览器支持

`<track>`

用途: 文本轨道 主要属性:

kind: 轨道类型
src: 轨道文件
srclang: 语言
label: 标签
default: 默认轨道

html

<track kind="subtitles" src="subtitles-zh.vtt" srclang="zh" label="中文" default>
<track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English">

浏览器兼容性: IE 10+，其他现代浏览器支持

5. 语义化元素

5.1 结构化元素

`<header>`

用途: 页眉或章节头部 主要属性: 全局属性

html

<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于</a></li>
    </ul>
  </nav>
</header>

浏览器兼容性: IE 9+，其他现代浏览器支持

`<nav>`

用途: 导航链接 主要属性: 全局属性

html

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/contact">联系</a></li>
  </ul>
</nav>

浏览器兼容性: IE 9+，其他现代浏览器支持

`<main>`

用途: 主要内容 主要属性: 全局属性

html

<main>
  <article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </article>
</main>

浏览器兼容性: IE 11+，其他现代浏览器支持

`<article>`

用途: 独立文章 主要属性: 全局属性

html

<article>
  <header>
    <h2>文章标题</h2>
    <time datetime="2024-01-15">2024年1月15日</time>
  </header>
  <p>文章内容...</p>
  <footer>
    <p>作者：张三</p>
  </footer>
</article>

浏览器兼容性: IE 9+，其他现代浏览器支持

`<section>`

用途: 文档章节 主要属性: 全局属性

html

<section>
  <h2>章节标题</h2>
  <p>章节内容...</p>
</section>

浏览器兼容性: IE 9+，其他现代浏览器支持

`<aside>`

用途: 侧边内容 主要属性: 全局属性

html

<aside>
  <h3>相关链接</h3>
  <ul>
    <li><a href="/related1">相关文章1</a></li>
    <li><a href="/related2">相关文章2</a></li>
  </ul>
</aside>

浏览器兼容性: IE 9+，其他现代浏览器支持

`<footer>`

用途: 页脚或章节尾部 主要属性: 全局属性

html

<footer>
  <p>&copy; 2024 网站名称. 保留所有权利.</p>
  <address>
    联系邮箱：<a href="mailto:info@example.com">info@example.com</a>
  </address>
</footer>

浏览器兼容性: IE 9+，其他现代浏览器支持

5.2 内容元素

`<time>`

用途: 时间和日期 主要属性:

datetime: 机器可读的时间

html

<time datetime="2024-01-15">2024年1月15日</time>
<time datetime="2024-01-15T14:30:00">今天下午2:30</time>

浏览器兼容性: IE 9+，其他现代浏览器支持

`<address>`

用途: 联系信息 主要属性: 全局属性

html

<address>
  <p>联系人：张三</p>
  <p>电话：<a href="tel:+86-1234567890">123-456-7890</a></p>
  <p>邮箱：<a href="mailto:zhang@example.com">zhang@example.com</a></p>
</address>

浏览器兼容性: 所有浏览器支持

`<details>`

用途: 可展开的详细信息 主要属性:

open: 默认展开

html

<details>
  <summary>点击查看详细信息</summary>
  <p>这里是详细信息内容...</p>
</details>

浏览器兼容性: IE 不支持，其他现代浏览器支持

`<summary>`

用途: details的标题 主要属性: 全局属性

`<progress>`

用途: 进度条 主要属性:

value: 当前值
max: 最大值

html

<progress value="70" max="100">70%</progress>

浏览器兼容性: IE 10+，其他现代浏览器支持

`<meter>`

用途: 度量值 主要属性:

value: 当前值
min: 最小值
max: 最大值
low: 低值阈值
high: 高值阈值
optimum: 最佳值

html

<meter value="6" min="0" max="10">6 out of 10</meter>
<meter value="0.8" min="0" max="1" low="0.3" high="0.7" optimum="0.5">80%</meter>

浏览器兼容性: IE 不支持，其他现代浏览器支持

6. 表格元素

6.1 表格结构

`<table>`

用途: 表格 主要属性: 全局属性

html

<table>
  <caption>销售数据表</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>数量</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品A</td>
      <td>100</td>
      <td>¥1000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>100</td>
      <td>¥1000</td>
    </tr>
  </tfoot>
</table>

浏览器兼容性: 所有浏览器支持

`<thead>`

用途: 表格头部 主要属性: 全局属性

`<tbody>`

用途: 表格主体 主要属性: 全局属性

`<tfoot>`

用途: 表格脚部 主要属性: 全局属性

`<tr>`

用途: 表格行 主要属性: 全局属性

`<th>`

用途: 表格头单元格 主要属性:

scope: 作用域
colspan: 跨列
rowspan: 跨行

html

<th scope="col">列标题</th>
<th scope="row">行标题</th>
<th colspan="2">跨两列</th>
<th rowspan="2">跨两行</th>

浏览器兼容性: 所有浏览器支持

`<td>`

用途: 表格数据单元格 主要属性:

colspan: 跨列
rowspan: 跨行

html

<td colspan="2">跨两列的单元格</td>
<td rowspan="2">跨两行的单元格</td>

浏览器兼容性: 所有浏览器支持

`<caption>`

用途: 表格标题 主要属性: 全局属性

`<colgroup>`

用途: 列组 主要属性:

span: 跨列数

html

<colgroup>
  <col style="width: 50%">
  <col span="2" style="width: 25%">
</colgroup>

浏览器兼容性: 所有浏览器支持

`<col>`

用途: 表格列 主要属性:

span: 跨列数

7. 脚本和样式元素

7.1 脚本元素

`<script>`

用途: 脚本代码 主要属性:

src: 外部脚本地址
type: 脚本类型
async: 异步加载
defer: 延迟执行
crossorigin: 跨域设置

html

<script src="script.js"></script>
<script async src="analytics.js"></script>
<script defer src="app.js"></script>
<script type="module" src="module.js"></script>
<script>
  console.log('内联脚本');
</script>

浏览器兼容性: 所有浏览器支持

`<noscript>`

用途: 脚本禁用时显示 主要属性: 全局属性

html

<noscript>
  <p>您的浏览器不支持JavaScript或JavaScript已被禁用。</p>
</noscript>

浏览器兼容性: 所有浏览器支持

7.2 样式元素

`<style>`

用途: 内联样式 主要属性:

type: 样式类型
media: 媒体类型

html

<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }
</style>

浏览器兼容性: 所有浏览器支持

8. 其他元素

8.1 通用元素

`<div>`

用途: 通用容器 主要属性: 全局属性

html

<div class="container">
  <div class="content">内容</div>
</div>

浏览器兼容性: 所有浏览器支持

`<span>`

用途: 通用内联容器 主要属性: 全局属性

html

<p>这是<span class="highlight">重要</span>内容。</p>

浏览器兼容性: 所有浏览器支持

8.2 嵌入元素

`<iframe>`

用途: 内联框架 主要属性:

src: 框架地址
width: 宽度
height: 高度
sandbox: 沙箱限制
loading: 加载方式

html

<iframe src="https://example.com" width="800" height="600" sandbox="allow-scripts allow-same-origin"></iframe>

浏览器兼容性: 所有浏览器支持

`<embed>`

用途: 嵌入外部内容 主要属性:

src: 资源地址
type: MIME类型
width: 宽度
height: 高度

html

<embed src="document.pdf" type="application/pdf" width="600" height="400">

浏览器兼容性: 所有浏览器支持

`<object>`

用途: 嵌入对象 主要属性:

data: 对象数据
type: MIME类型
width: 宽度
height: 高度

html

<object data="movie.swf" type="application/x-shockwave-flash" width="400" height="300">
  <param name="movie" value="movie.swf">
  您的浏览器不支持Flash。
</object>

浏览器兼容性: 所有浏览器支持

`<param>`

用途: 对象参数 主要属性:

name: 参数名
value: 参数值

8.3 其他功能元素

`<canvas>`

用途: 画布 主要属性:

width: 宽度
height: 高度

html

<canvas id="myCanvas" width="400" height="300">
  您的浏览器不支持Canvas。
</canvas>

浏览器兼容性: IE 9+，其他现代浏览器支持

`<svg>`

用途: 矢量图形 主要属性:

width: 宽度
height: 高度
viewBox: 视图框

html

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue"/>
</svg>

浏览器兼容性: IE 9+，其他现代浏览器支持

`<map>`

用途: 图像映射 主要属性:

name: 映射名称

html

<img src="image.jpg" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="0,0,100,100" href="link1.html" alt="区域1">
  <area shape="circle" coords="200,200,50" href="link2.html" alt="区域2">
</map>

浏览器兼容性: 所有浏览器支持

`<area>`

用途: 图像映射区域 主要属性:

shape: 形状
coords: 坐标
href: 链接地址
alt: 替代文本

全局属性

核心属性

id: 元素唯一标识符
class: 元素类名
style: 内联样式
title: 元素标题
lang: 元素语言
dir: 文本方向
hidden: 隐藏元素
tabindex: Tab键顺序
accesskey: 访问键
contenteditable: 可编辑性
draggable: 可拖拽性
spellcheck: 拼写检查
translate: 翻译提示

事件属性

onclick: 点击事件
onload: 加载事件
onchange: 改变事件
onsubmit: 提交事件
onmouseover: 鼠标悬停事件
onmouseout: 鼠标离开事件
onkeydown: 按键按下事件
onkeyup: 按键松开事件

数据属性

data-*: 自定义数据属性

html

<div data-user-id="123" data-user-name="张三">用户信息</div>

浏览器兼容性说明

支持级别

完全支持: 所有现代浏览器和IE 8+
部分支持: 现代浏览器支持，IE需要特定版本
不支持: 仅现代浏览器支持，IE完全不支持

兼容性处理

html

<!-- 条件注释 -->
<!--[if IE]>
  <link rel="stylesheet" href="ie.css">
<![endif]-->

<!-- 功能检测 -->
<script>
if (!document.createElement('canvas').getContext) {
  // Canvas不支持时的处理
}
</script>

总结

本参考手册涵盖了HTML5的所有主要元素，包括：

文档结构和元数据元素
文本内容和格式化元素
表单和输入元素
多媒体元素
语义化结构元素
表格元素
脚本和样式元素
其他功能元素

每个元素都提供了用途说明、主要属性、使用示例和浏览器兼容性信息，便于开发者快速查阅和使用。

本文档是HTML5学习小册的一部分，更多内容请查看其他章节。

附录A HTML5元素参考 ​

文档信息 ​

SEO关键词 ​

使用说明 ​

内容目录 ​

1. 文档结构元素 ​

1.1 基础结构 ​

<html> ​

<head> ​

<body> ​

1.2 元数据元素 ​

<meta> ​

<title> ​

<link> ​

2. 文本内容元素 ​

2.1 标题元素 ​

<h1> - <h6> ​

2.2 段落和文本 ​

<p> ​

<br> ​

<hr> ​

附录A HTML5元素参考

文档信息

SEO关键词

使用说明

内容目录

1. 文档结构元素

1.1 基础结构

`<html>`

`<head>`

`<body>`

1.2 元数据元素

`<meta>`

`<title>`

`<link>`

2. 文本内容元素

2.1 标题元素

`<h1>` - `<h6>`

2.2 段落和文本

`<p>`

`<br>`

`<hr>`