? 一、表單相關新增屬性（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>?標簽	下載資源而非跳轉