南希说在学习 HTML 的过程中，我们会遇到一个非常重要的概念——属性（attribute）。它就像是给标签加上的小“说明书”，决定了内容应该如何显示。
很多小白一开始看到 color="red" 或者 size="18" 会一头雾水，其实它们非常简单。本文就带你一步步搞懂。
Part 1｜属性到底是什么？
1. 用生活比喻
想象一下，你买了一台电风扇。
- 风扇本身 = 标签（比如
<p>表示一段文字） - 风扇的档位、颜色、大小 = 属性（比如
color="red"） - 当你把“档位=3”这个设置告诉风扇，它就吹得更猛。
所以：属性就是标签的设置项，告诉浏览器“这段内容要怎么显示 / 怎么工作”。
2. 属性长什么样？
写在 开始标签 里，像这样：
<p color="red">这是一段红色文字</p><p>是段落标签color="red"就是属性，意思是“让这段文字显示成红色”
3. 一句话记住
属性 = 名字 + 值，放在开始标签里，用来改变或描述内容的显示和功能。
Part 2｜属性怎么写才对？（5 条小规则）
其实属性的写法有点像“填表格”，只要守住几个小规则，就不会写错。
规则 1：位置
属性写在 开始标签 里，紧跟在标签名后面。
<p title="提示文字">内容</p>这里 title="提示文字" 就是属性。
规则 2：名 =
写法是 名字=值。
<p align="center">这行文字居中</p>align是名字"center"是值
规则 3：空格隔开
如果有多个属性，要用空格分开。
<img src="cat.jpg" alt="一只可爱的猫">
这里 src="cat.jpg" 和 alt="一只可爱的猫" 之间用 空格。
规则 4：值要加引号
值最好都用引号包起来（单引号 ' ' 或双引号 " " 都行）。
<p title="hello">你好</p>
⚠️ 有些情况下不加引号也能运行，但容易出错，所以新手一定要养成加引号的习惯。
规则 5：统一小写
HTML 属性名不区分大小写，但大家都习惯写小写，看起来更整齐。
<p class="highlight">小写最标准</p>Part 3｜最常用、最值得先学的 6 个属性
新手刚开始学，不需要一下子背很多。先掌握这 6 个属性，就能搞定大部分网页效果。
① class —— 给元素分组
- 用来给一类元素取名字，方便统一加样式。
<p class="poem">床前明月光</p>
<p class="poem">疑是地上霜</p>两行文字都有 class="poem"，以后用 CSS 改样式时，可以一口气改全部。
② id —— 给元素唯一名字
id是全局唯一的，就像身份证号码。
<p id="first-line">床前明月光</p>
这个段落有唯一标识，可以单独控制它。
③ style —— 直接加样式（快速但不推荐长期用）
<p style="color:red; font-size:20px;">疑是地上霜</p>
这里 style 就像临时“速效胶”，马上能看到效果，但项目里最好还是写到 CSS 文件里。
④ src —— 图片地址（配合 <img>）
<img src="moon.jpg" alt="一轮明月">src 是图片来源，告诉浏览器去哪里找图片。
⑤ alt —— 图片替代文字（配合 <img>）
- 当图片加载失败时，显示替代文字；对无障碍（读屏器）也很重要。
<img src="moon.jpg" alt="一轮明亮的月亮">⑥ href —— 链接目标（配合 <a>）
<a href="https://nancywrites.com">去南希说</a>
点击后跳转到链接地址。💡 小提示：这 6 个属性里，class、id、style 属于“最常见基础”，src、alt、href 属于“专门用在某些标签上的”。
📝 小抄
class：一群元素用同一个名字id：唯一名字style：快速加样式src：图片地址alt：图片替代文字href：链接目标
Part 4｜把“诗歌朗诵”示例改成现代写法
我原来学习的代码代码里用了 <font> 标签，比如：
<h1><font color="red" size="18">诗歌朗诵</font></h1>
<p><font color="black">床前明月光</font></p>
⚠️ 但是：
<font>在 HTML5 已经过时（浏览器还能认，但不推荐再用）- 现代写法应该用 CSS 来处理样式，而不是
<font>
🚫 旧写法（不推荐）
<h1><font color="red" size="18">诗歌朗诵</font></h1>
<p><font color="black">床前明月光</font></p>
<p><font color="black">疑是地上霜</font></p>
<p><font color="black">举头望明月</font></p>
<p><font color="black">低头思故乡</font></p>
color="red"：文字颜色size="18"：文字大小- 这些应该交给 CSS 来做
新写法 1：用 style 内联样式（快速但不推荐长期用）
<h1 style="color:red; font-size:18px;">诗歌朗诵</h1>
<p style="color:black;">床前明月光</p>
<p style="color:black;">疑是地上霜</p>
<p style="color:black;">举头望明月</p>
<p style="color:black;">低头思故乡</p>
👉 直接在标签里用 style，写 CSS 规则。
新写法 2：用 <style> 统一写样式（推荐给新手）
<head>
<title>诗歌朗诵</title>
<style>
h1 {
color: red;
font-size: 18px;
}
p {
color: black;
}
</style>
</head>
<body>
<h1>诗歌朗诵</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
样式集中管理，看起来干净，维护起来更舒服。
✅ 新写法 3：用 class 来管理样式（最佳实践）
<head>
<title>诗歌朗诵</title>
<style>
.title {
color: red;
font-size: 18px;
}
.line {
color: black;
}
</style>
</head>
<body>
<h1 class="title">诗歌朗诵</h1>
<p class="line">床前明月光</p>
<p class="line">疑是地上霜</p>
<p class="line">举头望明月</p>
<p class="line">低头思故乡</p>
</body>
👉 通过 class 把样式和内容分开，专业网站基本都是这么做的。
Part 5｜小结 & 注意事项
学到这里，总结一下：
- 属性是什么
- 就是标签的“设置项”，用来控制内容怎么显示或者怎么工作。
- 属性的写法
- 基本格式是：
名字="值" - 属性写在 开始标签里
- 多个属性之间用空格隔开
- 属性值最好用引号包起来
- 基本格式是：
- 示例回顾
color="red"→ 设置文字颜色size="18"→ 设置文字大小<font color="red" size="18">诗歌朗诵</font>
⚠️ 注意事项（新手必记）
- 不要乱写属性名：属性名必须是 HTML 规范里规定的，比如
color、size，不能自己随便起。 - 属性值要规范：即使浏览器有时能“猜”出来，还是要写完整并加引号。
- 旧标签仅用于学习：像
<font>这种标签，在 HTML5 里已经不推荐了，以后会用 CSS 来替代。 - 逐步过渡：先理解属性的基本规则，等学到 CSS，再回过头把
<font>里的样式写到 CSS 中。
