HTML5与CSS3基础教程:为元素指定类别和添加title属性

摘要:给HTML元素分配唯一的标识符(ID),或指定其属于某个(或某几个)类别,也可以同时指定标识符和类别。接着,就可以对具有给定id或class名称的元素添加样式了(但一般不推荐出于添加样式的目的使用id);或者创建指向具有特定id的元素的链接等行为了。

作者:图灵教育
来源:《HTML5与CSS3基础教程》(第八版)

第三章全部章节:
第一节:“基本HTML结构 开始编写网页”
第二节:创建页面标题
第三节:创建分级标题
第四、五节:普通页面构成和创建页眉
第六节:标记导航 通过nav指向任意页面内容
第七节:标记页面主要区域
第八节:标题在不同浏览器中显示相同大小(创建文章)
第九节:用section定义区块 它与div不同
第十节:用aside表示网页独立内容(指定附注栏)
第十一节:通过footer在任何位置创建页脚
第十二节:创建通用容器
第十三节:使用ARIA实现“无障碍访问”(使用ARIA改善可访问性)

3.14 为元素指定类别或ID名称

尽管并非必需,但是可以给HTML元素分配唯一的标识符(ID),或指定其属于某个(或某几个)类别,也可以同时指定标识符和类别,如图3.14.1所示。

接着,就可以对具有给定id或class名称的元素添加样式了(但一般不推荐出于添加样式的目的使用id);或者创建指向具有特定id的元素的链接(图3.14.1);还可以使用JavaScript获取id和class属性,从而对元素添加特定的行为。

1.jpg

图3.14.1

nav中的链接指向h1和h2中的id。为一个或多个元素添加class属性,就可以对所有这类元素统一进行格式化。例如,可以将architect类应用到关于其他建筑师的内容,从而为它们应用一致的格式;gaudi类可以为与他相关的内容提供另一种样式。

1.为元素添加唯一的ID

在元素的开始标签中输入id="name",其中name是唯一标识该元素的名称(图3.14.1)。name几乎可以是任何字符,只要不以数字开头且不包含空格。

2.为元素指定类别的方法

在元素的开始标签中输入class="name",其中name是类别的名称(图3.14.1)。如果要指定多个类别,用空格将不同的类别名称分开即可,如class="name anothername"。(可以指定两个以上的类别名称。)

关于通过id或class为元素添加样式,参见9.3节。不过,需要在这里说明的是,推荐使用类为元素添加样式。

关于创建指向标有id的元素的链接,参见6.2节。如何对具有id或class的元素使用JavaScript已经超出了本书的范围,不过我们在第19章会看几个示例。

HTML文档中的每个id都必须是唯一的。换句话说,一个页面里不能出现两个具有相同id的元素,并且每个元素都只能有一个id。相同的id可以出现在不同的页面里,同一id也不一定每次都赋给同一元素,尽管这是惯常的做法。

相反,一个class名称可以分配给页面中任意数量的元素,并且一个元素可以有一个以上的class。

class和id属性可以应用于任何HTML元素。元素可以同时拥有id和任意数量的class。

在class和id名称中,通常使用短横线分隔多个单词,例如class="footer-page"。

不管你打算如何使用id和class,都应该为它们选择有意义的名称。例如,如果你使用class是出于格式化目的,应避免使用描述表现样式的名称,如class="red",因为你可能在下周决定将配色方案改为蓝色。尽管在CSS中对分配给某一类元素的颜色进行修改是相当容易的,但这样做会导致你的HTML拥有一个名为红色却实际呈现为另一种颜色的class。同时,改变HTML中所有的class通常是一项繁琐的工作。这点在你开始学习CSS之后尤为明显。

可以使用class属性实现微格式(microformat)。更多信息参见http://microfo-rmats.org。

3.15 为元素添加title属性

可以使用title属性(不要与title元素混淆)为网站上任何部分加上提示标签(参见图3.15.1至图3.15.3)。不过,它们并不只是提示标签,加上它们之后屏幕阅读器可以为用户朗读title文本,因此使用title可以提升无障碍访问功能。

blob.png

图3.15.1

可以为任何元素添加title,不过用的最多的是链接

blob.png

图3.15.2

当访问者将鼠标指向加了说明标签的元素时,就会显示title。如果指向Barcelona’s Architect链接……

blob.png

图3.15.3

……会看到Learn about Antoni Gaudí,因为该链接有title属性

在网页中为元素添加标签

在要添加title的HTML元素中,输入title="label",其中label是访问者将鼠标移到这个元素上时希望出现在提示框里的文本,或者希望由屏幕阅读器朗读的文本。

旧版本的Internet Explorer(IE7及之前的版本)还会将img元素(参见第5章)的alt属性作为提示框的文本。不过,如果img元素同时包括title和alt属性,则提示框会采用title属性的内容,而不是alt属性的内容。

3.16 添加注释

可以在HTML文档中添加注释,标明区块开始和结束的位置,提醒自己(或未来的代码编辑者)某段代码的意图,或者阻止内容显示等,如图3.16.1所示。这些注释只会在用文本编辑器或浏览器的“查看源代码”选项打开文档时显示出来。访问者在浏览器中是看不到它们的,如图3.16.2所示。

blob.png

图3.16.1

这段示例代码包括五个注释。其中有四个一起标记了两个区块的开始和结束位置。另一个“注释掉”了第一段,这样它就不会显示在页面中(如果希望永久性地移除该段,最好将它从HTML中删除)

在HTML页面中添加注释的步骤

(1) 在HTML文档中希望插入注释的位置,输入<!–。

(2) 输入注释。

(3) 输入–>结束注释文本。

blob.png

图3.16.2

注释是不可见的。类似地,如果将一些内容“注释掉”,它们也不会显示出来。这段代码中的第一个段落并不会显示在浏览器中

在主要区块的开头和结尾处添加注释是一种常见的做法,这样可以让你或一起合作的开发人员将来修改代码变得更加容易。笔者喜欢使用一种比结束注释更为醒目的格式编写开始注释,从而更容易区分这两个位置。

在发布网站之前,应该用浏览器查看一下加了注释的页面。这样能帮你避免由于弄错注释格式导致私人化的注释内容直接暴露给公众访问者的情况。

对特别私人化的注释要格外小心。尽管通常通过浏览器访问页面不会看见注释内容,但通过浏览器的“查看源代码”功能就能看见它们,如果用户将网页保存为HTML源代码,他们也能看见这些注释。

注释不能嵌套在其他注释里。