1. HTML5 简介
HTML5 是最新的 HTML 标准，于 2014 年 10 月由 W3C 完成标准制定。它增加了许多新特性，包括语义化标签、多媒体支持、图形效果、离线存储等。
1.1 HTML5 文档基本结构
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 文档标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>-
<!DOCTYPE html>: 声明文档类型为 HTML5 -
<html>: 根元素，lang属性指定文档语言 -
<head>: 包含文档的元信息 -
<meta charset="UTF-8">: 指定字符编码为 UTF-8 -
<title>: 定义文档标题，显示在浏览器标签页上 -
<body>: 包含文档的可见内容
1.2HTML5 全局属性
| 属性 | 描述 | 示例 |
|---|---|---|
id |
定义元素的唯一标识符，用于在文档中唯一标识一个元素 | <div id="uniqueDiv">内容</div> |
class |
定义元素的类名，用于 CSS 样式或 JavaScript 操作 | <div class="myClass">内容</div> |
style |
定义元素的内联样式 | <div style="color:red;">红色文本</div> |
title |
定义元素的额外信息，鼠标悬停时显示 | <div title="提示信息">内容</div> |
lang |
定义元素内容的语言代码（如 en、zh） |
<div lang="en">English Content</div> |
dir |
定义元素内容的文本方向（ltr、rtl、auto） |
<div dir="rtl">从右到左的文本</div> |
hidden |
定义元素是否隐藏（等同于 display: none） |
<div hidden>隐藏内容</div> |
contenteditable |
定义元素是否可编辑（true 或 false） |
<div contenteditable="true">可编辑内容</div> |
tabindex |
定义元素的 Tab 键顺序，控制元素的焦点顺序 | <button tabindex="1">按钮1</button> |
accesskey |
定义访问元素的快捷键 | <button accesskey="s">保存</button> |
draggable |
定义元素是否可拖动（true 或 false） |
<div draggable="true">可拖动内容</div> |
spellcheck |
定义是否对元素内容进行拼写检查（true 或 false） |
<input type="text" spellcheck="true"> |
translate |
定义元素内容是否翻译（yes 或 no） |
<div translate="no">不翻译的内容</div> |
data-* |
自定义数据属性，用于存储私有数据 | <div data-id="123" data-name="example">内容</div> |
2. HTML5 中的标签
2.1文本格式化标签
| 标签 | 描述 | 属性 | 示例 |
|---|---|---|---|
<h1>~<h6> |
标题标签，影响搜索引擎排名 | 无特有属性 | <h1>一级标题</h1> |
<p> |
段落标签 | 无特有属性 | <p>这是一个段落。</p> |
<em> |
强调文本，通常显示为斜体 | 无特有属性 | <em>强调文本</em> |
<strong> |
定义语气更强的强调文本，通常显示为粗体 | 无特有属性 | <strong>重要文本</strong> |
<del> |
定义删除的文本 | 无特有属性 | <del>删除文本</del> |
<ins> |
定义插入文档的文本 | 无特有属性 | <ins>插入文本</ins> |
<b> |
纯文本加粗，不强调语义 | 无特有属性 | <b>加粗文本</b> |
<i> |
纯文本斜体，不强调语义 | 无特有属性 | <i>斜体文本</i> |
<u> |
下划线文本，用于表示链接或特殊含义 | 无特有属性 | <u>下划线文本</u> |
<s> |
表示文本不再有效 | 无特有属性 | <s>不再有效的文本</s> |
<mark> |
高亮文本，用于突出显示文本 | 无特有属性 | <mark>高亮文本</mark> |
<small> |
小号文本，用于展示次要或辅助信息 | 无特有属性 | <small>小号文本</small> |
<sub> |
下标，如化学公式中的指数 | 无特有属性 | <sub>下标文本</sub> |
<sup> |
上标，如平方根符号 | 无特有属性 | <sup>上标文本</sup> |
<br> |
换行标签，用于强制换行 | 无特有属性 | 这是第一行<br>这是第二行 |
<hr> |
水平线标签，用于分隔内容 | 无特有属性 | <hr> |
2.2图像视频音频与链接标签
| 标签 | 描述 | 属性 | 示例 |
|---|---|---|---|
<img> |
定义HTML页面中的图像 | src：指定图像的URL；alt：图像的替换文本 |
<img src="image.jpg" alt="描述性文字"> |
<a> |
定义超链接 | href：指定链接目标；target：规定打开新页面的位置 |
<a href="https://example.com" target="_blank">链接文本</a> |
<audio> |
定义音频内容 | src：音频文件的路径；controls：显示音频播放控件；autoplay：自动播放音频；loop：循环播放音频 |
<audio src="audio.mp3" controls autoplay loop></audio> |
<video> |
定义视频内容 | src：视频文件的路径；controls：显示视频播放控件；autoplay：自动播放视频；loop：循环播放视频；width/height：设置视频的宽度和高度 |
<video src="video.mp4" controls autoplay loop width="640" height="480"></video> |
<source> |
为<audio>或<video>指定多种媒体资源 |
src：媒体文件的路径；type：媒体文件的MIME类型 |
<audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg"></audio> |
2.3列表标签
| 标签 | 描述 | 属性 | 示例 |
|---|---|---|---|
<ul> |
定义无序列表 | 无特有属性 | <ul><li>项目1</li><li>项目2</li></ul> |
<ol> |
定义有序列表 | start：定义第一个数字 |
<ol start="3"><li>项目1</li><li>项目2</li></ol> |
<li> |
定义列表项 | 无特有属性 | <li>列表项</li> |
2.4HTML5 描述列表标签
|--------|----------------------|--------------|-------------------------------------------------------------|
| <dl> | 定义描述列表，用于将术语和描述组合在一起 | 无特有属性，支持全局属性 | <dl><dt>术语1</dt><dd>描述1</dd><dt>术语2</dt><dd>描述2</dd></dl> |
| <dt> | 定义描述列表中的术语或名称 | 无特有属性，支持全局属性 | <dt>术语1</dt> |
| <dd> | 定义描述列表中术语的描述或解释 | 无特有属性，支持全局属性 | <dd>描述1</dd> |
2.5表格标签
| 标签 | 描述 | 属性 | 示例 |
|---|---|---|---|
<table> |
定义表格 | border：规定表格的单元格是否具有边框；cellspacing：设置单元格之间的空白；cellpadding：规定单元边沿与其内容之间的空白；width/height：设置表格的宽度和高度 |
<table border="1" cellpadding="5" cellspacing="0" width="500" height="300"> |
<tr> |
定义表格中的行 | 无特有属性 | <tr><td>行内容</td></tr> |
<td> |
定义表格中的单元格 | rowspan：行跨度；colspan：列跨度 |
<td rowspan="2" colspan="2">跨行跨列单元格</td> |
<th> |
定义表头单元格 | 无特有属性 | <th>表头单元格</th> |
<thead> |
定义表格的头部区域 | 无特有属性 | <thead><tr><th>表头</th></tr></thead> |
<tbody> |
定义表格的主体区域 | 无特有属性 | <tbody><tr><td>主体内容</td></tr></tbody> |
<tfoot> |
定义表格的脚注区域 | 无特有属性 | <tfoot><tr><td>脚注内容</td></tr></tfoot> |
<caption> |
定义表格的标题，位于表格的顶部或底部 | 无特有属性 | <caption>表格标题</caption> |
2.6表单与输入标签
| 标签 | 描述 | 属性 | 示例 |
|---|---|---|---|
<form> |
定义表单 | action：表单数据提交地址；method：表单提交方式（get或post）；autocomplete：是否启用自动完成功能（on/off）；enctype：表单数据编码类型（如application/x-www-form-urlencoded）；name：表单名称；novalidate：取消表单验证；target：提交后响应的显示目标（如_blank） |
<form action="submit.php" method="post" autocomplete="on" enctype="application/x-www-form-urlencoded" name="myForm" novalidate target="_self"></form> |
<input> |
定义输入框 | type：输入框类型（如text、password、submit、reset、button、checkbox、radio等）；name：输入框名称；value：输入框默认值；placeholder：输入框提示文本；required：是否必填；readonly：是否只读；disabled：是否禁用；autofocus：是否自动获取焦点；form：关联表单的id；list：关联<datalist>的id |
<input type="text" name="username" value="默认值" placeholder="请输入用户名" required readonly disabled autofocus form="myForm" list="datalistId"> |
<textarea> |
定义多行文本框 | rows：设置多行文本框的行数；cols：设置多行文本框的列数；name：名称；placeholder：提示文本；required：是否必填；readonly：是否只读；disabled：是否禁用；maxlength/minlength：最大/最小长度 |
<textarea rows="4" cols="50" name="description" placeholder="请输入描述" required readonly disabled maxlength="100" minlength="10"></textarea> |
<button> |
定义按钮 | type：按钮类型（如submit、reset、button）；name：按钮名称；value：按钮值；disabled：是否禁用；form：关联表单的id；formaction：覆盖表单的action属性；formenctype：覆盖表单的enctype属性；formmethod：覆盖表单的method属性；formnovalidate：覆盖表单的novalidate属性 |
<button type="submit" name="submitBtn" value="submitValue" disabled form="myForm" formaction="submit.php" formenctype="application/x-www-form-urlencoded" formmethod="post" formnovalidate>提交</button> |
2.6.1HTML5表单输入框类型
| 类型 | 描述 | 示例 |
|---|---|---|
text |
单行文本输入框 | <input type="text" name="username"> |
password |
密码输入框，输入内容以点或星号显示 | <input type="password" name="password"> |
checkbox |
复选框，可多选 | <input type="checkbox" name="hobby" value="reading">阅读 |
radio |
单选框，同一组中只能选一个 | <input type="radio" name="gender" value="male">男 |
submit |
提交按钮，用于提交表单数据 | <input type="submit" value="提交"> |
reset |
重置按钮，用于将表单恢复到初始值 | <input type="reset" value="重置"> |
button |
普通按钮，需配合JavaScript使用 | <input type="button" value="点击我"> |
file |
文件上传输入框，用于选择文件上传 | <input type="file" name="avatar"> |
date |
日期选择输入框 | <input type="date" name="birthday"> |
time |
时间选择输入框 | <input type="time" name="appointment"> |
datetime-local |
本地日期和时间选择输入框 | <input type="datetime-local" name="event-time"> |
email |
电子邮件输入框，自动验证输入内容是否为有效电子邮件格式 | <input type="email" name="email"> |
number |
数字输入框，可设置最小值、最大值和步长 | <input type="number" name="age" min="18" max="99" step="1"> |
range |
范围选择输入框，以滑块形式选择数值范围 | <input type="range" name="volume" min="0" max="100"> |
url |
网址输入框，自动验证输入内容是否为有效网址格式 | <input type="url" name="website"> |
search |
搜索输入框，通常带有清除按钮 | <input type="search" name="query"> |
tel |
电话号码输入框 | <input type="tel" name="phone"> |
2.7HTML5表单辅助标签
| 标签 | 描述 | 示例 |
|---|---|---|
<label> |
定义表单控件的标签，增强用户体验和可访问性 | <label for="username">用户名：</label><input type="text" id="username" name="username"> |
<fieldset> |
对表单中的相关元素进行分组 | <fieldset><legend>个人信息</legend><label for="name">姓名：</label><input type="text" id="name" name="name"></fieldset> |
<legend> |
定义<fieldset>元素的标题 |
<fieldset><legend>个人信息</legend>...</fieldset> |
<datalist> |
定义输入字段的选项列表，提供自动完成功能 | <input list="browsers" name="browser"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"></datalist> |
<output> |
定义不同类型的输出，如计算结果 | <form oninput="a.value=parseInt(b.value)+parseInt(c.value)">0<input type="range" id="b" value="50">100+<input type="number" id="c" value="50">=<output name="a" for="b c"></output></form> |
<progress> |
定义任何类型的进度条 | <progress value="22" max="100"></progress> |
<meter> |
定义预定义范围内的标量测量（或分数） | <meter value="2" min="0" max="10">2 out of 10</meter> |
2.8HTML5新增语义化标签 （基本是在手机端使用的）
| 标签 | 描述 | 属性 | 示例 |
|---|---|---|---|
<article> |
定义页面独立的内容区域 | 无特有属性 | <article>这是独立的内容区域</article> |
<aside> |
定义页面的侧边栏内容 | 无特有属性 | <aside>这是侧边栏内容</aside> |
<header> |
定义文档的头部区域 | 无特有属性 | <header>这是文档头部区域</header> |
<footer> |
定义section或document的页脚 | 无特有属性 | <footer>这是页脚内容</footer> |
<nav> |
定义导航链接的部分 | 无特有属性 | <nav>这是导航链接部分</nav> |
<section> |
定义文档中的节（section） | 无特有属性 | <section>这是文档中的一个节</section> |