H5新增属性

✅ 一、表单相关新增属性（Form Attributes）

这些属性增强了表单功能，提升用户体验和前端验证能力。

1. placeholder

• 描述：在输入框为空时显示提示文本。
• 示例：

2. required

• 描述：规定输入字段必须填写才能提交表单。
• 示例：

3. autofocus

• 描述：页面加载后自动聚焦到该输入框。
• 示例：

4. autocomplete

• 描述：是否启用浏览器的自动完成功能。
• 可选值：on / off
• 示例：

5. pattern

• 描述：通过正则表达式定义输入格式。
• 示例：

6. min, max, step

• 描述：用于数字或日期类型的输入控件。
• 示例：

---

✅ 二、语义化标签与自定义数据属性

1. data-* 属性

• 描述：允许开发者在元素上存储任意数据，供 JavaScript 使用。
• 示例：

  商品信息

• JS 获取：

  const product = document.getElementById('product');
  console.log(product.dataset.productId); // 输出: 1001

---

✅ 三、多媒体相关属性（Audio & Video）

1. controls

• 描述：显示浏览器默认的音频/视频控件。
• 示例：

2. autoplay

• 描述：页面加载后自动播放。
• 示例：

3. loop

• 描述：循环播放。
• 示例：

4. muted

• 描述：静音播放。
• 示例：

---

✅ 四、其他常见新增属性

1. contenteditable

• 描述：使元素内容可编辑。
• 示例：

  可以编辑我哦！

2. draggable

• 描述：设置元素是否可拖动。
• 示例：

3. hidden

• 描述：隐藏元素。
• 示例：

4. spellcheck

• 描述：是否检查拼写。
• 示例：

---

✅ 五、链接与下载属性

1. download

• 描述：点击链接时触发下载而不是跳转。
• 示例：

  下载PDF文件

2. target="_blank" + rel="noopener"

• 描述：安全地在新窗口打开外部链接。
• 示例：

  外部链接

---

小结表格

属性名	应用对象	功能说明
placeholder	表单输入	输入框提示信息
required	表单输入	必填项
autofocus	表单输入	自动获取焦点
autocomplete	表单输入	启用自动补全
pattern	表单输入	正则表达式验证
data-*	所有元素	自定义数据属性
contenteditable	所有元素	内容可编辑
draggable	所有元素	元素可拖动
hidden	所有元素	隐藏元素
download	标签	下载资源而非跳转