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> 标签	下载资源而非跳转