我们之前花了三天写 HTML：基础标签、页面结构、表格表单。但有一个东西一直跳过了——标签属性。大多数初学者会把属性当成"写在哪里的配置项"，边写边查。但有两个属性是例外：class 和 id。如果你不懂 class 和 id，CSS 根本没法写。所以这篇是 CSS 的前置课。内容不多，但很重要。class：给元素打标签class 是一个全局属性——几乎所有 HTML 标签都能用。它的作用是给元素贴上一个"分类标签"，方便 CSS 或 JavaScript 找到它。<pclass="highlight">这段文字会被高亮</p>
<pclass="highlight">这段也会</p>
<p>这段不会</p>关键特点：多个元素可以共用一个 class 名——一组样式，多处生效一个元素可以有多个 class——用空格隔开：class="highlight bold large"class 名用英文、横杠、下划线，不要用中文CSS 里选中 class 的写法：前面加 ..highlight { color: orange; }id：给元素起唯一名字id 也是全局属性，但有个铁律：一个页面里，id 必须是唯一的。<divid="header">页头</div>
<divid="footer">页脚</div>CSS 里选中 id 的写法：前面加 ##header { background: black; }class vs id 怎么选？场景用 class用 id多个元素同一样式✅❌唯一元素（导航栏、页脚）也可以✅锚点跳转也行（href="#xxx"）✅ 更常见JS 选中特定元素也可以✅ 更效率实际工作中，90% 的情况用 class。 id 只用在锚点跳转和 JS 精确选中时。其他全局属性除了 class 和 id，还有几个全局属性写页面时会遇到：style — 内联样式直接在标签里写 CSS，但不推荐——样式应该集中放在 <style> 或 CSS 文件里。<pstyle="color: red; font-size: 20px;">别这样写</p>什么时候会用？调试时临时改样式，或者 JavaScript 动态修改。title — 悬停提示鼠标放在元素上时，会显示一段小提示文字。<abbrtitle="World Wide Web">WWW</abbr>
<imgsrc="logo.png"title="回到首页">hidden — 隐藏元素加上这个属性，元素就不显示了（效果等同于 display: none）。<phidden>你看不见我</p>data-* — 自定义数据属性以 data- 开头的属性，用来存任意自定义数据。JavaScript 可以通过 element.dataset 读到。<buttondata-user-id="12345"data-role="admin">删除用户</button>前端框架（Vue、React）很少直接用了，但在老项目或简单页面中仍然常见。布尔属性：写了就等于 true有些属性不需要赋值，写了就生效，不写就不生效。这叫布尔属性。<!-- disabled：禁用输入框 -->
<inputtype="text"disabled>

<!-- readonly：只读 -->
<inputtype="text"value="不能修改"readonly>

<!-- checked：默认选中 -->
<inputtype="radio"checked> 男
<inputtype="radio"> 女

<!-- required：必填 -->
<inputtype="text"required>如果你非要赋值，写法是 disabled="disabled" 或 disabled=""，效果一样。大多数人直接写属性名就行。块级 vs 行内：理解 CSS 布局的关键HTML 元素分成两大类，这个分类直接影响你在 CSS 里怎么控制它们。块级元素（block）默认行为：独占一行（前后都有换行）默认宽度 100%可以设宽高不设宽度时自动填满父容器常见块级标签：div、h1~h6、p、ul、ol、li、table、form、header、footer、main、section、article行内元素（inline）默认行为：不换行，多个行内元素排在一行宽度由内容决定设宽高无效padding 上下会有视觉问题，margin 只有左右有效常见行内标签：span、a、strong、b、em、i、label特殊情况：行内块（inline-block）CSS 里可以把元素设成 display: inline-block——既有行内的"不换行"特性，又能设宽高。.button {
  display: inline-block;
  width: 120px;      /* ✅ 有效 */
  height: 40px;      /* ✅ 有效 */
}img 和 input 天生是 inline-block 的行为——这也是为什么你之前写 <img> 时可以设宽高，哪怕它是个"行内元素"。帮你记block      → 整行是我的，大小我说了算
inline     → 大家挤一挤，我个子小别嫌弃
inline-block → 我不换行，但大小我说了算（两全其美）路径写法：相对 vs 绝对写 HTML 时经常要引用图片、CSS、JS 文件，路径写不对东西就显示不出来。<!-- 绝对路径：从网站根目录开始 -->
<imgsrc="/images/photo.jpg">

<!-- 完整 URL -->
<ahref="https://example.com/page.html">外部链接</a>

<!-- 相对路径：相对于当前文件的位置 -->
<imgsrc="./images/photo.jpg">    <!-- 当前目录下的 images/ -->
<imgsrc="../images/photo.jpg">   <!-- 上级目录下的 images/ -->
<imgsrc="images/photo.jpg">      <!-- ./ 可以省略 -->两个特殊目录名：符号意思.当前目录..上级目录这个规则不只在 HTML 里用，命令行 cd、Node.js 的 require 都遵循同样的逻辑。