5. HTML5 新特性说明

HTML5 新特性说明

1 语义化标签

HTML5 引入了许多新的 语义化标签，如 <header>、<nav>、<article>、<section>、<aside> 和 <footer> 等。这些标签 能够更好地描述 网页的结构，使得代码对于 搜索引擎 和 开发者来说 更易理解。

<header>
    <h1>网站标题</h1>
</header>
<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>
<article>
    <h2>文章标题</h2>
    <p>文章内容......</p>
</article>
<footer>
    <p>版权信息 &copy; 2024</p>
</footer>

2 音频和视频支持（<audio> 和 video 标签）

在 HTML5 之前，要在网页中 播放音频和视频 通常需要借助 第三方插件（如 Flash）。HTML5 的 <audio> 和 <video> 标签 允许 直接在网页中 嵌入 音频和视频文件，提供了更简洁的多媒体体验。

相关属性：

1. src 属性，指定 音视频文件 的 来源；
2. controls 属性，添加这个属性后，浏览器 会为音视频显示 播放控制条，如 暂停、播放、音量调节 等；
3. autoplay 属性，使音视频 在页面加载完成后 自动播放，不过这个属性 在很多浏览器中 受到限制，以避免 对用户 造成干扰。

3 画布（canvas 标签）

<canvas> 标签 提供了一个可以使用 JavaScript 在网页上 绘制图形、动画 的 区域。它就像 一块空白的 画布，开发者可以通过 JavaScript 代码 在上面进行各种 绘制操作。

• 应用场景：用于 创建游戏、数据可视化、自定义图形 等复杂的 前端应用。

4 本地存储（localStorage 和 sessionStorage）

HTML5 提供了两种 在客户端 存储数据 的机制：

1. localStorage 用于 长期存储数据，即使 浏览器关闭后 数据仍然保留；
2. sessionStorage 用于 在当前会话（浏览器窗口或标签页打开期间）存储数据，当会话结束时 数据会丢失。

5 <form> 表单增强

新的输入类型

HTML5 新增了一些 输入类型，如email、tel、url、date、time等。这些类型可 以在用户输入时 提供更好的 验证 和 合适的 键盘布局（在移动设备上）。

表单验证属性

新增了一些 属性 用于 表单验证，如 required（表示 该字段 必须填写）、min 和 max（用于 限制 数字 或 日期 的 范围）等。

6 跨域消息传递（postMessage）

允许 不同源（协议、域名、端口不同）的 文档之间 进行安全的 消息传递，这对于实现 跨域 的网页应用（如嵌入在网页中的 第三方小部件）之间的 通信 非常有用。