网页中的唯一标识符
根据W3C的说法,HTML中的ID属性是:
元素的唯一标识符
这是一个非常强大的属性的简单描述。 ID属性可以为网页执行多个操作:
- 样式表选择器 - 这是大多数人使用ID属性的功能。 因为它们是独一无二的,所以当您使用ID属性进行样式设置时,可以确定您只会在Web页面上创建一个项目。 使用ID进行样式设计的不利之处在于它具有非常高的特异性,如果您稍后需要在样式表中出于某种原因重写样式,这可能会使其非常具有挑战性。 正因为如此,当前的Web实践倾向于使用类和类选择器来代替ID和ID选择器来实现一般样式。
- 命名定位点用于链接到 - Web浏览器允许您通过指向URL末尾的ID来定位Web文档中的精确位置。 您只需将该ID添加到页面网址的末尾,并以英镑符号(#)开头。 您还可以通过在a元素的href属性中添加井号(#)和ID名称,将页面本身链接到这些锚点。 例如,如果您有一个具有联系人 ID的部门,则可以使用以下链接连接到该页面:
这是链接文本 - 脚本的参考 - 如果您编写任何Javascript函数,则需要使用ID属性,以便可以使用脚本更改页面上的精确元素。
- 其他处理 - 该ID允许您以任何您需要的方式处理您的Web文档。 例如,您可以将HTML提取到数据库中,ID属性标识字段。
使用ID属性的规则
有一些规则必须遵循才能拥有使用文档中任何位置的id属性的有效文档:
- 该ID必须以字母(az或AZ)开头
- 所有后续字符可以是字母,数字(0-9),连字符( - ),下划线(_),冒号(:)和句点(。)。
- 每个ID在文档中必须是唯一的。 为什么?
使用ID属性
一旦确定了网站的一个独特元素,就可以使用样式表来设计该元素的样式。
联系我们
这里有一些文字内容
div#contact-section {background:#0cf;}
-要不就-
#contact-section {background:#0cf;}
这两个选择器中的任何一个都可以工作。 第一个(div#contact-section)将以ID属性为“contact-section”的分区为目标。 第二个(#contact-section)仍然会以“contact-section”的ID作为目标,但它不知道它正在寻找的是一个分区。 造型的最终结果将完全相同。
您也可以链接到该特定元素而不添加任何标签:
链接到联系信息
使用“getElementById”JavaScript方法在脚本中引用该段落:
的document.getElementById(“接触部”)
ID属性在HTML中仍然非常有用,即使类选择器已经将它们替换为最常用的样式目的。 使用ID属性作为样式的钩子,同时将它们用作链接或脚本目标的能力意味着它们在今天的网页设计中仍然占有重要地位。
由Jeremy Girard编辑