前端知识速记--HTML篇：HTML5的新特性

前端知识速记–HTML篇：HTML5的新特性 一、语义化标签

HTML5引入了许多新的语义化标签，如 <header>、<footer>、<article>、<section> 等。这些标签不仅提高了网页的可读性和结构性，还有助于SEO（搜索引擎优化）。

实例：

<article> <header> <h1>HTML5的新特性</h1> </header> <section> <p>HTML5引入了许多新的语义化标签，帮助开发者构建更加清晰的网页结构。</p> </section> <footer> <p>撰写者：前端开发者</p> </footer> </article> 二、音视频支持

HTML5新增了 <audio> 和 <video> 标签，使得在网页中嵌入媒体内容变得更加简单，不再依赖于外部插件如Flash。

实例：

<video controls> <source src="example.mp4" type="video/mp4"> 您的浏览器不支持视频标签。 </video> <audio controls> <source src="example.mp3" type="audio/mpeg"> 您的浏览器不支持音频标签。 </audio> 三、Canvas元素

HTML5引入的 <canvas> 元素允许开发者通过JavaScript绘制各种图形，这使得图形和动画的实现变得简单高效。

实例：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(20, 20, 150, 50); </script> 四、本地存储

HTML5新增的本地存储（Local Storage）和会话存储（Session Storage）功能，使得开发者可以在用户的浏览器中保存数据，而无需服务器的支持。

实例：

// 本地存储 localStorage.setItem("username", "前端开发者"); console.log(localStorage.getItem("username")); // 输出：前端开发者 // 会话存储 sessionStorage.setItem("sessionUser", "临时用户"); console.log(sessionStorage.getItem("sessionUser")); // 输出：临时用户 五、增强的表单功能

HTML5对表单元素进行了增强，新增了多种输入类型（如 email、date、url）以及更好的表单验证功能。

实例：

<form> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> <label for="birthday">生日:</label> <input type="date" id="birthday" name="birthday"> <input type="submit" value="提交"> </form>

---

---

总结表格 新特性描述示例语义化标签提高网页可读性与SEO<header>、<article>音视频支持简化媒体内容嵌入，无需插件<audio>、<video>Canvas元素通过JavaScript绘制图形<canvas>本地存储支持在浏览器中存储数据localStorage增强的表单功能新增输入类型，优化表单验证type="email"