HTML5 新特性有哪些：语义化标签到存储一次讲清

HTML5 在语义化标签、表单、音视频、Canvas 绘图和本地存储五个层面补齐了网页的原生能力，让静态页面能直接记住用户、播放媒体、动态画图。本文面向零基础，把每一项新特性都用最小可运行例子讲一遍，并重点说清 localStorage、sessionStorage 与 Cookie 三者的区别。跟着例子敲一遍，你不用死背概念，也能明白该在什么场景用什么标签和 API。编程狮把容易踩的坑也一并标了出来，看到对应提示直接照着做就能少走弯路。

HTML5 新特性语义化标签到本地存储封面图

一、语义化标签：让结构自己会说话

先打个比方：把一张网页比作一份报纸版面。报头放报纸名字，目录放栏目导航，中间是正文，正文里又有若干篇文章，底部是版权信息。在 HTML5 之前，这些区域大多用一堆 <div> 套在一起，浏览器只知道“这里有一块块盒子”，并不知道哪块是导航、哪块是正文。

语义化标签就是给这些区域贴上“名牌”。常用的有 header（页眉/报头）、nav（导航）、main（页面主体）、article（一篇独立内容）、section（一个主题区块）、footer（页脚）。它们的写法和 <div> 一样简单，只是名字自带含义，浏览器、搜索引擎、读屏软件一看就懂。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>编程狮(www.w3cschool.cn)</title>
</head>
<body>
  <header>网站顶部：Logo 与站点名称</header>
  <nav>首页 | 教程 | 题库 | 工具</nav>
  <main>
    <article>
      <h1>一文读懂 HTML5 新特性</h1>
      <section>第一部分：语义化标签</section>
      <p>这里写正文内容，结构清晰，搜索引擎更好理解。</p>
    </article>
  </main>
  <footer>© 编程狮 www.w3cschool.cn</footer>
</body>
</html>

这段代码里，每个区域都有明确名字。header 包裹顶部，nav 包裹导航，main 里只放核心内容，article 代表一篇可独立存在的内容，footer 放版权。比起满屏 <div class="header">，语义化标签让代码读起来像在描述页面结构本身。

如果你刚入门，建议先过一遍 HTML 教程，把基础标签和文档结构铺平，再回头看语义化标签会非常轻松。注意一点：main 在整页里通常只出现一次，多个 article 可以嵌套在它里面。

💡 小提示：语义化标签不改变视觉效果，它管的是“含义”而不是“样式”。想要好看的排版，仍然要靠 CSS，标签只负责把结构说清楚。

二、表单新类型与校验：少写 JS 也能拦错

填过注册表单的人都知道，邮箱写错、手机号位数不对是常事。HTML5 给 <input> 增加了很多新类型，浏览器原生就能做基础校验，不用你写一堆 JavaScript。

最常用的是这几个类型：email（邮箱）、url（网址）、number（数字）、date（日期）、range（滑块）、search（搜索框）。再配合属性 required（必填）、min/max（数值范围）、pattern（正则格式），就能在前端拦下大部分低级错误。

<form action="https://www.w3cschool.cn/" method="post">
  <p>邮箱：<input type="email" name="email" required></p>
  <p>年龄：<input type="number" name="age" min="1" max="120"></p>
  <p>生日：<input type="date" name="birthday"></p>
  <p>满意度：<input type="range" name="score" min="0" max="10"></p>
  <p>手机号：<input type="text" name="phone" pattern="1[0-9]{10}" required></p>
  <button type="submit">提交</button>
</form>

上面这段，type="email" 会让浏览器检查是否含 @；required 没填就点提交会被直接拦下；pattern="1[0-9]{10}" 要求手机号以 1 开头、后面跟 10 位数字。这些都由浏览器原生支持，省掉了大量手写校验代码。

⚠️ 注意：前端校验只是“第一道门”，它挡得住普通用户手滑，挡不住故意绕过的人。涉及账号、支付的真实表单，后端必须再做一次校验，不能只信浏览器。

推荐把常用的标签和属性整理成一张表贴在手边。当你记不清某个 <input> 类型怎么写时，HTML 参考手册能按标签名快速查到每个属性和含义，比在搜索引擎里翻来翻去快得多。

三、音视频标签：一个标签播放在线媒体

在 HTML5 之前，想在网页里放一段视频，基本要靠 Flash 插件，既笨重又难兼容。现在有了 <audio> 和 <video>，插入音视频就像插入一张图片那么简单。

<audio> 用来播音频，<video> 用来播视频，都支持 controls 属性显示播放控件，也支持用 <source> 提供多种格式做兼容。浏览器会自动选第一个它能播的格式。

<audio controls>
  <source src="https://www.w3cschool.cn/demo/song.mp3" type="audio/mpeg">
  <source src="https://www.w3cschool.cn/demo/song.ogg" type="audio/ogg">
  你的浏览器不支持 audio 标签
</audio>


<video controls width="480">
  <source src="https://www.w3cschool.cn/demo/movie.mp4" type="video/mp4">
  你的浏览器不支持 video 标签
</video>

上面两段分别插入了一段音频和一段视频，controls 让观众能暂停、拖动进度。中间的“你的浏览器不支持……”是兜底文案，只有老到不支持新标签的浏览器才会显示。

💡 小提示：视频文件通常很大，直接塞进页面会拖慢加载。生产环境一般把 src 指向 CDN 地址，并用 poster 属性放一张封面图，用户体验更顺滑。

用法并不复杂，难点在于不同浏览器支持的文件格式不一样。最稳的做法是像上面那样同时提供 mp4 和 ogg/mp3 多份源，让浏览器自己挑。理解到这一层，你就能在课程配套页面里随意嵌入讲解音频和演示视频了。

四、Canvas：用代码在页面上画画

前面讲的都是“内容展示”，Canvas 则是“动态绘制”。它提供一块画布，你用 JavaScript 在上面画线、画圆、填色，甚至做小游戏和图表。

Canvas 的核心是 getContext('2d')，拿到二维绘图上下文后，就能调用 fillRect（画实心矩形）、beginPath/arc（画圆）、fillStyle（填充色）等方法。

<canvas id="w3cschoolCanvas" width="200" height="200"></canvas>
<script>
  const cvs = document.getElementById('w3cschoolCanvas');
  const ctx = cvs.getContext('2d');
  ctx.fillStyle = '#4caf50';
  ctx.fillRect(20, 20, 120, 80);
  ctx.beginPath();
  ctx.arc(140, 140, 30, 0, Math.PI * 2);
  ctx.fillStyle = 'orange';
  ctx.fill();
</script>

这段代码先在画布左上角画了一个绿色矩形，又画了一个橙色圆形。变量名里我用了 w3cschoolCanvas 这种写法，只是示例命名，你换成任何喜欢的名字都行。关键要记住：Canvas 画完一帧不会自动保留动画，要做动画就得用 requestAnimationFrame 不断重绘。

⚠️ 注意：Canvas 画出的内容是“像素”，不是 DOM 元素，你没法用 CSS 单独选中里面某个图形去改样式。如果界面需要可点击、可交互的图形，SVG 往往更合适。

Canvas 学习曲线比前面几项陡一点，但回报也高——数据可视化、图像滤镜、小游戏都靠它。先把“拿到上下文→设置样式→绘制”这个三步套路练熟，后面都是在这个框架里加花样。

五、本地存储：localStorage、sessionStorage 与 Cookie 怎么选

这是新手最容易混的一块。三者都能在浏览器里存数据，但寿命、容量、发送方式完全不同。先用一张表看清区别：

方式	生命周期	容量	是否随请求发给服务器
Cookie	可设过期时间，默认关浏览器失效	约 4KB	是，每次请求都带
localStorage	永久，除非代码或用户清除	约 5MB	否
sessionStorage	仅当前标签页，关页即清	约 5MB	否

简单说：Cookie 体积小、会自动跟随请求，适合存登录态这类服务器也需要的信息；localStorage 容量大、关浏览器也不丢，适合存用户偏好设置；sessionStorage 只活在当前标签页，适合存一次会话里的临时数据。

// 存数据
localStorage.setItem('w3cschoolTheme', 'dark');
sessionStorage.setItem('w3cschoolStep', '2');


// 取数据
const theme = localStorage.getItem('w3cschoolTheme');
const step = sessionStorage.getItem('w3cschoolStep');


// 删数据
localStorage.removeItem('w3cschoolTheme');

这三个 API 长得几乎一样：setItem 存、getItem 取、removeItem 删，区别只在“能活多久”。localStorage 关掉浏览器再打开还在；sessionStorage 一关标签页就清空；Cookie 则要靠后端 Set-Cookie 或 document.cookie 操作，且体积受严格限制。

当你想系统记忆标签、属性和存储 API 的全貌时，HTML 速查手册把常用接口都列成了速查表，写代码时旁边开一份，效率会高很多。

HTML5 各类新特性分别解决什么问题

总结

HTML5 不是一次大改版，而是把过去要写很多 JavaScript 才能做的事，变成了浏览器原生能力。回到标题本身——HTML5 新特性有哪些：语义化标签到存储，其实每一项都对应一个具体痛点。回顾一下五个层面：语义化标签让结构自解释；表单新类型原生校验省代码；音视频标签一行嵌入媒体；Canvas 用代码动态绘图；本地存储则按寿命和容量分成 Cookie、localStorage、sessionStorage 三种来用。

你接下来应当带走的要点：第一，能用语义化标签就别堆 div；第二，表单校验前端后端都要做；第三，存储数据前先想清楚它要活多久。下一步建议顺着 HTML 教程把每个标签都亲手写一遍，再结合图文微课把 Canvas 和本地存储练熟，基础就真正扎下了根。

延伸学习

想把这块知识系统补齐，可以按这个顺序来：

先跟着 HTML5 新特性实战课程把语义化标签与存储的实操过一遍，配套课程里每一步都有可运行样例；
遇到标签或属性记不清，看 id 与 class 区别解析这篇笔记，它从“什么时候用 id、什么时候用 class”的角度补足了基础认知；
写完页面想顺手压缩优化，用 HTML 压缩格式化工具在线上直接处理，免登录就能用。

常见问题

Q：HTML5 一定要用新语义标签吗？

A：不是。老标签照样能跑，新标签只是让结构更清晰、对搜索引擎和无障碍更友好。你可以先从一两个标签替换起，不必一次性重写。

Q：localStorage 存的数据会被别人看到吗？

A：它存在用户自己的浏览器里，不会自动发给服务器，但同一台电脑上其他能开浏览器的人也能读到。所以别往里塞密码、 token 这类敏感信息。

Q：Canvas 和图片有什么区别？

A：图片是静态文件，Canvas 是代码实时画出来的像素。图片好做、好缓存；Canvas 能做动画和交互，但内容不是 DOM 元素，无法单独用 CSS 选中。

Q：表单的 required 校验可靠吗？

A：只对正常用户可靠。它挡得住手滑填错，挡不住故意改请求绕过。真实业务务必在后端再校验一次。