HTML5 新特性

1. HTML5 新增语义化标签

HTML5 引入了一些新的语义化标签，帮助开发者更清晰地组织和描述文档结构。

• <header>：定义文档或一个部分的头部，通常包含导航链接、标题等。
• <nav>：定义导航链接的区域，用于包裹主要的导航链接。
• <article>：定义独立的内容块，适用于博客文章、新闻条目等。
• <section>：定义文档中的一个区域，用于包裹一组相关内容。
• <aside>：定义页面的侧边栏，通常包含附属信息或广告。
• <footer>：定义文档或一个部分的页脚，通常包含版权信息、联系信息等。

这些标签提高了网页的语义性，使得搜索引擎和其他设备可以更好地理解页面内容。

2. HTML5 新增多媒体标签

HTML5 增加了对音频和视频的原生支持，无需依赖第三方插件。

1. 视频 <video>

<video> 标签用于嵌入视频内容。所有现代浏览器都支持 MP4 格式的视频。

<video src="video.mp4" width="640" height="360" controls autoplay loop muted poster="poster.jpg">
    您的浏览器不支持视频标签。
</video>

• autoplay="autoplay"：页面加载后自动播放视频。
• controls="controls"：显示播放控件（播放/暂停、音量、进度条等）。
• width 和 height：设置视频的宽度和高度。
• loop="loop"：视频循环播放。
• preload="auto"：页面加载时自动预加载视频数据。
• src="url"：视频文件的地址。
• poster="url"：视频加载前显示的封面图片。
• muted="muted"：视频静音播放。

2. 音频 <audio>

<audio> 标签用于嵌入音频内容。所有现代浏览器都支持 MP3 格式的音频。

<audio src="audio.mp3" controls loop>
    您的浏览器不支持音频标签。
</audio>

• controls：显示播放控件。
• autoplay：（部分浏览器禁用，尤其是 Chrome）自动播放音频。
• loop="loop"：音频循环播放。

3. HTML5 新增 input 类型

HTML5 为 <input> 标签新增了多种类型，提升了表单的功能和用户体验。

• type="email"：输入电子邮件地址。
• type="url"：输入网址。
• type="date"：输入日期。
• type="time"：输入时间。
• type="month"：选择月份。
• type="week"：选择周。
• type="number"：输入数字，可以设置 min 和 max 属性限制范围。
• type="tel"：输入电话号码。
• type="search"：搜索框。
• type="color"：颜色选择器。

4. HTML5 新增的表单属性

HTML5 增强了表单的功能，新增了一些属性以改善用户体验。

属性	值	说明
required	required	表单字段必填，不能为空。
placeholder	提示文本	提供输入字段的提示信息。
autofocus	autofocus	页面加载完成后自动聚焦到该表单字段。
autocomplete	off/on	开启或关闭自动完成功能，默认开启 on。关闭时需设置 autocomplete="off" 且表单内有 name 属性。
multiple	multiple	允许选择多个文件（适用于文件上传）。

示例：修改 placeholder 文本颜色

可以通过 CSS 来改变 placeholder 的文本颜色：

input::placeholder {
    color: pink; /* 设置占位符文本颜色为粉色 */
}

5. HTML 自定义属性

自定义属性是 HTML5 引入的一项特性，允许开发者在标准 HTML 元素上存储自定义数据，这些数据可以通过 JavaScript 进行访问和操作。

1. 自定义属性的定义

• 语法：自定义属性必须以 data- 为前缀，后面可以接任意自定义名称。
• 命名规则：使用小写字母和短横线，保持名称简洁易懂。

2. 使用自定义属性的好处

• 存储额外数据：无需在 JavaScript 中单独声明变量即可将数据与特定 HTML 元素关联。
• 灵活性：自定义属性可以与 JavaScript 配合使用，灵活地处理元素相关的数据。
• 可读性：通过 data-* 属性，代码更加直观、可读。

3. 自定义属性的用法

在 HTML 中定义自定义属性：

<div id="product" data-product-id="12345" data-product-name="Widget">
    产品名称：Widget
</div>

在 JavaScript 中访问自定义属性：

// 获取元素
const productElement = document.getElementById('product');

// 访问自定义属性
const productId = productElement.dataset.productId; // "12345"
const productName = productElement.dataset.productName; // "Widget"

// 打印结果
console.log('产品 ID:', productId);
console.log('产品名称:', productName);

使用场景

• 动态数据存储：在需要临时存储与 HTML 元素相关的数据时使用。
• JavaScript 集成：与 JavaScript 配合，动态更新或访问元素数据。
• 前端数据传递：在不涉及敏感信息时，将数据嵌入 HTML 以简化前端开发。

注意事项

• 安全性：不要在自定义属性中存储敏感信息，因为这些数据可以被轻易访问。
• 性能考虑：在处理大量数据时，谨慎使用自定义属性以免影响性能。