夜雨聆风
基础 – HTML5 必备新特性汇总,前端开发不可不知
1️⃣ 语义化标签
核心概念
HTML5 引入了很多语义化标签，如 <header>、<footer>、<main>、<section>、<article>等，让页面结构更清晰，也有助于 SEO 和屏幕阅读器的理解。
示例代码
</> HTML<header><h1>前端小鄂博客</></header><main><article><h2>HTML5 新特性总结</h2><p>内容正文...</p></article><section><h3>相关阅读</h3><ul><li>CSS Grid 实战</li><li>JavaScript 异步编程</li></ul></section></main><footer><p>© 2026 前端小鄂</p></footer>
小提示
-
<header>和<footer>可以在页面中出现多次，用于不同区域。 -
<main>页面只允许出现一次，包含主要内容。
2️⃣ 表单新特性
核心概念
HTML5 表单增加了很多新的 input 类型和属性，如 email、url、number、required、placeholder，减少了 JS 验证的工作量。
示例代码
<form><labelfor="email">邮箱：</label><inputtype="email"id="email"placeholder="请输入邮箱"required><labelfor="age">年龄：</label><inputtype="number"id="age"min="1"max="120"><buttontype="submit">提交</button></form>
小提示
-
type="email"会自动验证邮箱格式。 -
required属性可以直接在前端阻止空表单提交，无需 JS。
3️⃣ 本地存储：localStorage & sessionStorage
核心概念
HTML5 提供了 localStorage和 sessionStorage，用于在浏览器中存储键值对数据，替代传统 cookie，容量更大，操作更方便。
示例代码
</> JavaScript// 存储数据localStorage.setItem('username', '小鄂');sessionStorage.setItem('sessionId', 'abc123');// 获取数据console.log(localStorage.getItem('username')); // 小鄂console.log(sessionStorage.getItem('sessionId')); // abc123// 删除数据localStorage.removeItem('username');sessionStorage.clear();
小提示
-
localStorage数据永久保存，浏览器关闭也存在。 -
sessionStorage数据在页面关闭后会清空。
4️⃣ 音视频标签
核心概念
HTML5 提供 <audio>和 <video>标签，无需插件即可在网页播放音视频，支持多种格式和控件。
示例代码
</> HTML<audiocontrols><sourcesrc="music.mp3"type="audio/mpeg">您的浏览器不支持音频播放。</audio><videocontrolswidth="480"><sourcesrc="video.mp4"type="video/mp4">您的浏览器不支持视频播放。</video>
小提示
-
controls属性可以显示播放、暂停、音量控制。 -
可加入
autoplay、loop、muted等属性，提升用户体验。
HTML5 的这些新特性不仅让页面更语义化、表单更智能，也让前端开发更高效。掌握这些特性，你就能写出更规范、更好用的页面。
你最喜欢哪一个 HTML5 新特性？在评论区分享你的实践经验吧！别忘了关注“前端小鄂”，每周带你学干货~