HTML5 是最新的 HTML 标准，引入了许多新的语义化标签和功能，使网页结构更加清晰和语义化。
HTML5 文档结构
基本的 HTML5 文档结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
语义化标签
HTML5 新增的语义化标签：
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
<aside>
<h3>侧边栏</h3>
<p>相关链接...</p>
</aside>
</main>
<footer>
<p>© 2025 我的网站</p>
</footer>
文本标签
常用的文本格式化标签：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是一个段落文本。</p>
<strong>加粗文本</strong>
<em>斜体文本</em>
<u>下划线文本</u>
<blockquote>
这是一个引用块，用于引用其他来源的内容。
</blockquote>
<code>console.log("Hello World");</code>
<pre>
function hello() {
console.log("Hello World");
}
</pre>
链接和图片
创建链接和插入图片：
<!-- 文本链接 -->
<a href="https://www.example.com" target="_blank">访问示例网站</a>
<!-- 图片链接 -->
<a href="large-image.jpg">
<img src="thumbnail.jpg" alt="图片描述" width="200" height="150">
</a>
<!-- 邮件链接 -->
<a href="mailto:contact@example.com">联系我们</a>
<!-- 图片标签 -->
<img src="image.jpg" alt="图片描述" width="400" height="300" loading="lazy">
<!-- 响应式图片 -->
<picture>
<source media="(min-width: 1200px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="响应式图片">
</picture>
列表标签
有序列表、无序列表和定义列表：
<!-- 无序列表 -->
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>网页脚本语言</dd>
</dl>
表格标签
创建数据表格：
<table border="1">
<caption>学生成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>85</td>
<td>92</td>
<td>78</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
<td>88</td>
<td>95</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td>87.5</td>
<td>90</td>
<td>86.5</td>
</tr>
</tfoot>
</table>
表单标签
创建交互式表单：
<form action="/submit" method="post">
<fieldset>
<legend>用户注册</legend>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="18" max="100">
<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday">
<label>性别：</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<label>兴趣：</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">运动</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">音乐</label>
<label for="country">国家：</label>
<select id="country" name="country">
<option value="">请选择</option>
<option value="china">中国</option>
<option value="usa">美国</option>
</select>
<label for="message">留言：</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<button type="submit">注册</button>
<button type="reset">重置</button>
</fieldset>
</form>
多媒体标签
音频和视频标签：
<!-- 音频播放 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>
<!-- 视频播放 -->
<video width="640" height="360" controls poster="video-poster.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持视频播放。
</video>
<!-- 嵌入内容 -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/视频ID"
frameborder="0"
allowfullscreen>
</iframe>
HTML5 新特性
HTML5 新增的输入类型和属性：
<!-- 新的输入类型 -->
<input type="color" name="favcolor">
<input type="range" name="volume" min="0" max="100">
<input type="search" name="q" placeholder="搜索...">
<input type="url" name="website" placeholder="https://example.com">
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<!-- 新的属性 -->
<input type="text" placeholder="请输入内容" required autofocus>
<input type="email" multiple>
<input type="text" pattern="[A-Za-z]{3}" title="三个字母">
<!-- 进度条和计量器 -->
<progress value="70" max="100">70%</progress>
<meter value="0.6">60%</meter>
最佳实践
- 使用语义化标签提高可访问性和SEO
- 为所有图片添加
alt 属性
- 使用
label 标签关联表单元素
- 设置合适的
charset 和 viewport
- 使用HTML5验证属性
- 确保代码结构清晰和可读性
注意：HTML5 标签在现代浏览器中都有很好的支持，但为了兼容旧版浏览器，可以使用 HTML5 Shiv 等 polyfill 库。
提示： 这是一个重要的概念，需要特别注意理解和掌握。
注意： 这是一个常见的错误点，请避免犯同样的错误。