H5新增属性
✅ 一、表单相关新增属性（Form Attributes）
这些属性增强了表单功能，提升用户体验和前端验证能力。
1. placeholder
- 描述：在输入框为空时显示提示文本。
- 示例：
<input type="text" placeholder="请输入用户名">
2. required
- 描述：规定输入字段必须填写才能提交表单。
- 示例：
<input type="email" required>
3. autofocus
- 描述：页面加载后自动聚焦到该输入框。
- 示例：
<input type="text" autofocus>
4. autocomplete
- 描述：是否启用浏览器的自动完成功能。
- 可选值：
on/off - 示例：
<input type="text" autocomplete="on">
5. pattern
- 描述：通过正则表达式定义输入格式。
- 示例：
<input type="text" pattern="[A-Za-z]{3}" title="请输入三个字母">
6. min, max, step
- 描述：用于数字或日期类型的输入控件。
- 示例：
<input type="number" min="1" max="10" step="2">
✅ 二、语义化标签与自定义数据属性
1. data-* 属性
- 描述：允许开发者在元素上存储任意数据，供 JavaScript 使用。
- 示例：
<div id="product" data-product-id="1001" data-name="手机">商品信息</div> - JS 获取：
const product = document.getElementById('product'); console.log(product.dataset.productId); // 输出: 1001
✅ 三、多媒体相关属性（Audio & Video）
1. controls
- 描述：显示浏览器默认的音频/视频控件。
- 示例：
<video src="movie.mp4" controls></video>
2. autoplay
- 描述：页面加载后自动播放。
- 示例：
<audio src="music.mp3" autoplay></audio>
3. loop
- 描述：循环播放。
- 示例：
<video src="movie.mp4" loop></video>
4. muted
- 描述：静音播放。
- 示例：
<video src="movie.mp4" muted></video>
✅ 四、其他常见新增属性
1. contenteditable
- 描述：使元素内容可编辑。
- 示例：
<div contenteditable="true">可以编辑我哦！</div>
2. draggable
- 描述：设置元素是否可拖动。
- 示例：
<img src="image.jpg" draggable="true">
3. hidden
- 描述：隐藏元素。
- 示例：
<p hidden>这段文字不会显示</p>
4. spellcheck
- 描述：是否检查拼写。
- 示例：
<textarea spellcheck="true"></textarea>
✅ 五、链接与下载属性
1. download
- 描述：点击链接时触发下载而不是跳转。
- 示例：
<a href="file.pdf" download>下载PDF文件</a>
2. target="_blank" + rel="noopener"
- 描述：安全地在新窗口打开外部链接。
- 示例：
<a href="https://example.com" target="_blank" rel="noopener">外部链接</a>
📌 小结表格
| 属性名 | 应用对象 | 功能说明 |
|---|---|---|
placeholder | 表单输入 | 输入框提示信息 |
required | 表单输入 | 必填项 |
autofocus | 表单输入 | 自动获取焦点 |
autocomplete | 表单输入 | 启用自动补全 |
pattern | 表单输入 | 正则表达式验证 |
data-* | 所有元素 | 自定义数据属性 |
contenteditable | 所有元素 | 内容可编辑 |
draggable | 所有元素 | 元素可拖动 |
hidden | 所有元素 | 隐藏元素 |
download | <a> 标签 | 下载资源而非跳转 |