✅ 一、表单相关新增属性（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>` 标签	下载资源而非跳转