HTML Academy · 课时

id、class、style 与 title

Q: 「id、class、style 与 title」这节课中我会学到什么？

将核心全局属性应用于任意 HTML 元素。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将核心全局属性应用于任意 HTML 元素。

id、class、style 与 title 是 CoddyKit 上的免费 HTML Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

全局属性

全局属性可以应用于任何 HTML 元素：

id——唯一标识符
class——一个或多个 CSS 类
style——内联 CSS
title——工具提示文本
以及许多其他属性：语言、隐藏、制表索引、数据属性等……

标识属性

id 属性会为元素分配一个唯一标识符：

<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>

<!-- Rules:
  - Must be unique per page
  - No spaces
  - Use hyphens: user-profile
  - Case-sensitive: #hero ≠ #Hero
-->

标识属性的用途

id 属性有多种用途：

CSS 定位：#hero-banner { ... }
JavaScript 选择：document.getElementById('signup-form')
片段导航：<a href="#installation">
ARIA 标签：aria-labelledby="modal-title"

类属性

class 属性会为元素分配一个或多个 CSS 类：

<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>

<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->

标识属性与类属性的区别

使用建议：

id——页面中的一个特定元素
class——应用于多个元素的样式模式

<!-- id: unique element -->
<main id="main-content">...</main>

<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>

样式属性

style 属性用于添加内联 CSS：

<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
  Info box
</div>

<!-- Inline styles have the highest specificity
     They are hard to override and hard to maintain
     Prefer external CSS classes whenever possible -->

何时使用内联样式

在以下情况下可以使用内联样式：

由 JavaScript 设置的动态值
在编写 CSS 时无法确定的值（用户设置的颜色、宽度）
电子邮件 HTML（电子邮件客户端会删除外部 CSS）

不要使用 style 处理静态的表现样式选择，这些内容应放在 CSS 中。

标题属性

title 属性会在鼠标悬停时提供工具提示文本：

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>

标题属性的无障碍局限

title 属性存在严重的无障碍问题：

无法通过键盘导航访问
不会在触摸屏上显示
屏幕阅读器的处理方式不一致
绝不要只将关键信息放在 title 中

重要信息请使用 ARIA 标签属性或可见文本。

特异性：标识符、类与内联样式

CSS 特异性从低到高依次为：

/* Element selector: 0-0-1 */
p { color: gray; }

/* Class selector: 0-1-0 */
.text { color: blue; }

/* ID selector: 1-0-0 */
#unique { color: green; }

/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>

类命名约定

常见的类命名约定：

<!-- BEM (Block Element Modifier) -->
<div class="card">
  <div class="card__header">
    <h2 class="card__title card__title--featured">Title</h2>
  </div>
</div>

<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">

快速检查

关于标识属性，最重要的规则是什么？

回顾：标识属性、类、样式和标题

核心全局属性：

id——每个页面中应唯一；用于 CSS、JavaScript、片段和 ARIA
class——可复用；多个类之间用空格分隔
style——内联 CSS（请谨慎使用，优先选择外部 CSS）
title——工具提示；键盘和触摸用户无法无障碍地访问
CSS 中，ID 特异性高于类特异性

常见问题解答

「id、class、style 与 title」课时是免费的吗？

是的 — 「id、class、style 与 title」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「id、class、style 与 title」这节课中我会学到什么？

将核心全局属性应用于任意 HTML 元素。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「id、class、style 与 title」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy