正在加载...

HTML 的 id

学完 class 后，id 为单个元素命名。

为什么唯一名称重要

跳转假定只有一处匹配。

直接答案

id="faq" 只用一次。href="#faq"。CSS 用 #faq。不要写 id="#faq"。共享样式用 class。

📊 id versus class

Feature id class
Uniqueness One per page (ideally) Many elements may share
HTML attribute id="faq" (no #) class="tip" (no .)
CSS selector #faq .tip
Common uses Bookmarks, unique hooks, script targets Reusable styles and groups

指向唯一标题的片段链接

上方链接，下方 id。

Unique id and fragment link

html
HTML Code 
<p><a href="#faq">Jump to FAQ</a></p>
<h2 id="faq">FAQ</h2>
<p>Answers go here.</p>

阅读片段示例

  • 只在链接里

  • 属性里是裸名

用 #id 做唯一 CSS 钩子

单个面板——谨慎使用。

Unique id with CSS

html
HTML Code 
<div id="promo">
<h2>Limited offer</h2>
<p>One panel, one unique hook.</p>
</div>
<style>
#promo { border: 2px solid #0a7; padding: 12px; }
</style>

阅读唯一样式示例

  • CSS 中的 #promo
  • 属性里不要 #

选择 id 还是 class

多个元素？class。单一目标？id。

练习

  1. 带 id 的标题

  2. 链接并跳转

  3. 去掉重复
  4. tip 用 class

易错点

  • 重复 id
  • 属性里写 #
  • 每个共享样式都用 id

小结

  • id 唯一
  • href/CSS 用 #
  • 共享用 class

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
6
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程