标签的隐藏技能：HTML 属性小抄

写页面就是搭乐高，标签是积木，属性才是把积木扣在一起的凸点。

我初学那会儿，老把 <a> 写成 <a>点我</a>，结果点不动，老师斜眼一句：“href 呢？”——从此记住：属性不给力，标签就罢工。

1. 先混个脸熟

属性长这样：

<标签 属性名="值">内容</标签>

值通常用双引号包起来，偷懒不加引号也能跑，但哪天翻车别哭。

2. 10 个 everyday 属性，我天天用

1. id
   身份证，一页只能出现一次。

   <h1 id="top">回到顶部锚点</h1>

2. class
   批量化妆刷，一人可贴多张标签。

   <p class="warning important">记得备份！</p>

3. style
   急救口红，临时改色最方便。

   <span style="color: #e91e63;">粉色高亮</span>

4. title
   鼠标悬停小纸条。

   <abbr title="HyperText Markup Language">HTML</abbr>

5. href
   给 <a> 装导航仪。

   <a href="#top">🔝</a>

6. src
   告诉 <img> 去隔壁文件夹搬图。

   <img src="img/dog.jpg" alt="柴犬翻肚皮">

7. alt
   图挂了时的备胎文字，还能帮屏幕朗读。
8. name
   表单字段的“快递收件人”，后端按它找值。
9. value
   表单默认答案，也能当按钮文案。
10. disabled
    一键冻住输入框，用户只能干瞪眼。

3. 两个怪咖

• 布尔属性
  写了就 true，省掉值。

  <input type="checkbox" checked>

• data-* 自定义
  前端私家储物柜，想塞啥塞啥。

  <button data-id="9527" data-mood="happy">点我</button>

  一把 dataset 就能掏出来：

  btn.dataset.mood // "happy"

4. 一张完整表单，属性全家桶

<form action="/login" method="post">
  <label for="user">账号</label>
  <input id="user" name="username" required placeholder="邮箱或手机号">
  
  <label for="pass">密码</label>
  <input id="pass" name="password" type="password" required>
  
  <button type="submit">登录</button>
</form>

看见没：

• for 和 id 手拉手，点文字也能聚焦输入框；
• required 挡住空提交；
• placeholder 给用户一点提示，省得他发呆。

5. 小口诀收尾

“标签搭架子，属性装灵魂；
id 唯一，class 成群；
href 指路，src 搬资源；
布尔写个名，data 随你编。”

贴墙背三天，写页面不用翻书。