HTML5核心基础：语义化标签、文档结构、常用标签、新特性
各位同学，咱们今天聊聊HTML5。说实话，我做了这么多年前端，HTML5的出现真的是划时代的。以前写页面，满屏的<div>，看得人眼花缭乱。现在好了，有了语义化标签，代码就像文章一样，结构清晰，读起来也舒服。
一、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>我的第一个HTML5页面</title>
</head>
<body>
<!-- 内容写在这里 -->
</body>
</html>注意看，<!DOCTYPE html> 这个声明，比HTML4简洁太多了。以前写那一长串DTD，我每次都要复制粘贴，生怕写错。现在好了，就这一行，浏览器就知道你要用HTML5标准来渲染。
核心要点：HTML5的文档声明极其简洁，<meta charset="UTF-8"> 直接指定字符编码，不再需要复杂的 <meta http-equiv> 写法。
二、语义化标签——让代码会说话
什么是语义化？说白了，就是让标签自己说明「我是谁」。我以前接手过一个老项目，满屏的 <div class="header">、<div class="nav">，看得我头大。HTML5直接提供了这些标签：
- <header>：页面或区块的头部，通常放logo、导航
- <nav>：导航链接区域
- <main>：页面主体内容，一个页面只能用一次
- <article>：独立的内容块，比如一篇博客、一条新闻
- <section>：文档中的节，比如章节、页眉、页脚
- <aside>：侧边栏，与主内容相关但不直接包含
- <footer>：页面或区块的底部，版权信息、联系方式
我给大家画个结构图，一看就明白：
我的经验：刚开始用语义化标签时，我总纠结「这里该用article还是section」。后来想通了——article强调独立完整，section强调分组。比如一篇博客用article，博客里的每个章节用section。就这么简单。
三、常用标签——表单、表格、多媒体
3.1 表单：用户交互的入口
表单是前端最常用的交互方式。HTML5给表单加了不少新花样：
<form action="/submit" method="post">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱" required>
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="1" max="150">
<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday">
<label for="color">喜欢的颜色：</label>
<input type="color" id="color" name="color">
<label for="range">音量：</label>
<input type="range" id="range" name="range" min="0" max="100">
<button type="submit">提交</button>
</form>你看，type="email" 会自动校验邮箱格式，type="number" 可以限制数值范围，type="date" 直接弹出日期选择器。以前这些功能都得靠JavaScript插件实现，现在浏览器原生支持了。
避坑指南：我曾经在一个项目中，只依赖了HTML5的表单验证，结果在旧版浏览器上完全失效。记住，前端验证只是辅助，后端验证才是根本。永远不要相信用户输入的数据。
3.2 表格：结构化数据展示
表格虽然用得少了，但展示数据时还是离不开。HTML5的表格标签更语义化：
<table>
<caption>2024年Q1销售数据</caption>
<thead>
<tr>
<th>月份</th>
<th>销售额</th>
<th>利润</th>
</tr>
</thead>
<tbody>
<tr>
<td>一月</td>
<td>100万</td>
<td>20万</td>
</tr>
<tr>
<td>二月</td>
<td>120万</td>
<td>25万</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计</td>
<td>220万</td>
<td>45万</td>
</tr>
</tfoot>
</table>注意 <thead>、<tbody>、<tfoot> 这三个标签，把表格分成了头部、主体、底部。这样做的好处是，浏览器可以在表格加载完之前就显示表头，用户体验好很多。
3.3 多媒体：音频和视频
HTML5最让我兴奋的新特性之一，就是原生支持音频和视频。以前播放视频得装Flash，各种兼容性问题。现在一个 <video> 标签搞定：
<video controls width="640" height="360">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<p>您的浏览器不支持视频播放，请升级浏览器。</p>
</video>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
<p>您的浏览器不支持音频播放。</p>
</audio>这里有个小技巧：提供多个 <source> 标签，浏览器会按顺序选择第一个能播放的格式。我一般会准备MP4和WebM两种格式，覆盖绝大多数浏览器。
四、HTML5新特性一览
除了上面提到的，HTML5还有不少实用新特性。我整理了一个表格，方便大家对照：
| 特性类别 | 具体内容 | 我的使用建议 |
|---|---|---|
| 语义化标签 | header, nav, main, article, section, aside, footer | 能用的地方尽量用，对SEO友好 |
| 表单新类型 | email, url, number, range, date, color, search | 移动端体验极佳，自动弹出对应键盘 |
| 多媒体 | video, audio, canvas, SVG | canvas适合游戏和图表，SVG适合图标 |
| 存储 | localStorage, sessionStorage | 比cookie好用，但别存敏感信息 |
| 离线应用 | Application Cache, Service Worker | Service Worker是未来的方向 |
| 地理定位 | Geolocation API | 记得先获取用户授权 |
| 拖放 | Drag and Drop API | 实现文件上传神器 |
核心观点：HTML5不是革命，而是进化。它把开发者日常需要的功能，从第三方插件变成了浏览器原生支持。你想想看，少了多少兼容性调试的烦恼？
五、实战中的避坑指南
最后分享几个我踩过的坑：
- 语义化标签的兼容性：IE8及以下不认识HTML5标签。解决方案是用
html5shiv.js做兼容处理，或者干脆用<div>加ARIA属性。 - 表单验证的陷阱：
required属性在移动端Safari上有时会失效。我习惯在提交时用JavaScript做二次验证。 - 视频自动播放：大部分浏览器禁止带声音的视频自动播放。如果非要自动播放，可以设置
muted属性，静音播放。 - localStorage存储限制：每个域名大概5MB。我曾经存了大量JSON数据，结果存满了，页面直接报错。记得用
try...catch捕获异常。
嗯，HTML5的核心内容就这些。记住一句话：语义化让代码更清晰，新特性让开发更高效。多写多练，这些标签用几次就熟了。