📚 课程目录第2章 HTML5核心基础

2. 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的核心内容就这些。记住一句话：语义化让代码更清晰，新特性让开发更高效。多写多练，这些标签用几次就熟了。