Attributes：盒子上的標籤貼紙

屬性（Attributes）告訴瀏覽器更多細節：圖片從哪裡來、連結往哪裡去、輸入框該顯示什麼提示。

四大常見 Attributes
// class 分類標籤，讓 CSS / Tailwind 能指定樣式
<div class="card">...</div>
// src 圖片來源路徑
<img src="photo.jpg" alt="大頭貼" />
// href 超連結的目的地
<a href="https://google.com">點我</a>
// placeholder 輸入框的提示文字
<input placeholder="請輸入名字..." />
💡

Vibe Coder 需要知道的

屬性的格式永遠是 名稱="值"。你不需要背所有屬性，只要知道「標籤可以帶屬性」就好。當你跟 AI 說「把這張圖的 src 換成 logo.png」，AI 就知道要改哪裡。

🎯 動手試試：Attribute 拖放挑戰

把正確的屬性名稱拖進對應的空格裡。放錯了可以點擊移除重試。注意：有一個是多餘的干擾項！

placeholder
alt
src
class
href
<img 拖到這裡="photo.jpg" />
<a 拖到這裡="https://..." >連結</a>
<div 拖到這裡="card">...</div>
<input 拖到這裡="請輸入..." />
下一課