HTML 初学者指南 - 第 8 课 - 标签的通用属性

我们之前已经讲过，不同的标签具有各自的属性。现在该谈谈另一类属性——那些对所有标签都通用的属性。让我们来看看最常用的一些。

属性 id

id 属性用于给标签指定一个唯一的名称。这样的名称不应重复，否则在使用 jQuery 或 JavaScript 时可能会引发问题。以下是一些 id 属性的使用示例：

...
<ul id="menu1">
  <li id="item1">lorem</li>
  <li id="item2">ipsum</li>
  <li id="item3">你好</li>
  <li id="item4">世界</li>
</ul>
...
<div id="header"></div>

id 属性可以用来为页面上的不同部分（如区块、菜单或菜单项等）单独定义 CSS 样式。同时，id 也常用于 JavaScript（尤其是 jQuery）中。

属性 class

class 属性用于表示某个标签属于某个类。与 id 不同，class 可以被多个标签共享，因此可以通过相同的类一次性为多个元素设置样式。例如：

<ul id="menu1">
  <li class="item">lorem</li>
  <li class="item">ipsum</li>
  <li class="item">你好</li>
  <li class="item">世界</li>
</ul>

属性 style

style 属性用于直接在标签内编写 CSS 样式。现在你可以暂时不用深入理解它的细节，我们会在 CSS 教程中详细讲解。目前你只需看看以下简单的示例：

...
<div style="width: 200px; height: 100px; background: #dddddd">
区块
</div>
...
<p style="font-size: 14px; color: #333333">
文本
</p>

第一个示例创建了一个宽 200 像素、高 100 像素、背景色为 #dddddd（灰色调）的块。第二个示例是一个字体大小为 14 像素、颜色为 #333333（接近黑色但略浅）的文本段落。

属性 title

title 属性用于在鼠标悬停在元素上时显示提示信息（即“悬浮提示”）：

...
<img src="./images/image.jpg" alt="photo" title="这是我" />
...
<a href="html2.html" title="我的页面">链接</a>
...
<h2 title="标题">你好，世界！</h2>

当然，还有其他一些通用属性，例如：accesskey、contenteditable、contextmenu、dir、hidden、lang、spellcheck、tabindex。当你开始制作多语言网站或更复杂的页面时，你会逐渐接触到它们。目前，了解这些主要的通用属性就已经足够了。