什么是id属性?(the id attribute?)

根据W3C,HTML中的ID属性是元素的唯一标识符。它提供了一种方法来识别网页中CSS样式、锚定链接和脚本目标的区域。...

根据W3C,HTML中的ID属性是元素的唯一标识符。它提供了一种方法来识别网页中CSS样式、锚定链接和脚本目标的区域。

HTML code displaying various standard HTML elements

什么是用于指定的id属性(the id attribute used for)?

ID属性为网页执行多个操作:

  • 样式表选择器:这是大多数人使用ID属性的功能。因为它们是唯一的,所以在使用ID属性进行样式设置时,您将只对网页上的一个项目进行样式设置。使用ID进行样式设置的缺点是,它具有非常高的特殊性,如果您以后在样式表中出于某种原因需要重写样式,那么这将非常具有挑战性。正因为如此,当前的web实践倾向于使用类和类选择器来代替ID和ID选择器进行一般样式设计。
  • 用于链接到的命名锚:Web浏览器通过指向URL末尾的ID来定位Web文档中的精确位置。将id添加到页面URL的末尾,前面有一个哈希标记。通过在元素的href属性中添加hash标记和ID名称,将这些锚链接到页面本身。例如,对于ID为contact的部门,请在该页面上使用#contact链接到该部门。
  • 脚本参考:如果您编写任何Javascript函数,请使用ID属性,以便可以使用脚本更改页面上的精确元素。
  • 其他处理:id支持以您需要的任何方式在web文档中进行处理。例如,您可以将HTML提取到数据库中,并使用ID属性来标识字段。

使用id属性的规则

确保您的ID属性符合以下三个标准:

  • ID必须以字母(a-z或a-z)开头。
  • 所有后续字符都可以是字母、数字(0-9)、连字符(-)、下划线(u)、冒号(:)和句点()。
  • 文档中的每个ID都必须是唯一的。

使用id属性

确定网站的唯一元素后,使用样式表仅为该元素设置样式。

例如,要识别名为contact的ID,请使用以下任一形式:

div#contact { background: #0cf;} #contact { background: #0cf;}

第一个示例以ID属性为contact的分区为目标。第二个仍然以接触ID的元素为目标,它只是没有规定它是一个部门。样式的最终结果将完全相同。

您还可以链接到该特定元素,而无需添加任何标记。

使用getElementById JavaScript方法在脚本中引用该段落:

document.getElementById("contact-section")

ID属性在HTML中仍然非常有用,尽管类选择器已经在大多数通用样式中取代了它们。使用ID属性作为样式的钩子,同时也使用它们作为链接的锚或脚本的目标,这意味着它们在今天的web设计中仍然占有重要的地位。

  • 发表于 2021-09-04 22:38
  • 阅读 ( 137 )
  • 分类:IT

你可能感兴趣的文章

属性(attribute)和参数(parameter)的区别

关键区别-属性与参数 attribute和parameter之间的关键区别在于,属性是在类中直接声明的任何类型的变量,而参数是在调用时接收值的函数定义的变量。 在诸如Java这样的编程语言中,有诸如对象、类和函数之类的概念。在编码...

  • 发布于 2020-10-19 02:04
  • 阅读 ( 607 )

领域(field)和c属性#(property in c#)的区别

...段与属性的区别。 目录 1. 概述和主要区别 2. C中的Field是什么# 3. 什么是C中的属性# 4. C语言中场与性质的关系# 5. 并排比较——表格形式的C#字段与属性 6. 摘要 什么是c中的字段#(field in c#)? 每个物体都有特性和行为。特征用字...

  • 发布于 2020-10-19 02:36
  • 阅读 ( 300 )

呃(er)和eer图(eer diagram)的区别

...型。EER图基于增强的ER模型。 目录 1. 概述和主要区别 2. 什么是ER图 3. 什么是EER图 4. ER图与EER图的相似性 5. 并列比较——表格形式的ER与EER图 6. 摘要 什么是er图(er diagram)? ER图表示不同实体之间的关系。实体、属性和关系是ER图...

  • 发布于 2020-10-19 04:37
  • 阅读 ( 1254 )

如何用代码读写xml文件

...DOM:Document对象模型包括用于处理XML工件(如元素、节点、属性等)的类。domapi将完整的XML文档加载到内存中进行处理,因此不太适合处理大型XML文件。 SAX:Simple-API-for-XML是一种用于读取XML的事件驱动算法。在这里,...

  • 发布于 2021-03-12 02:25
  • 阅读 ( 400 )

为什么“高级属性”按钮有时会被“存档”复选框替换?

...。 问题 超级用户读者Steven Vascello想知道为什么advanced attributes按钮有时会被archive复选框取代: Sometimes, when viewing a file or folder’s properties, I see an Advanced Button displayed under Attributes. At other times, the Advanced Button is replaced by an Archive ...

  • 发布于 2021-04-07 13:57
  • 阅读 ( 96 )

如何防止windows自动更新特定的驱动程序

...,最好保持策略打开并删除那些特定的硬件ID。这就是为什么保存文本文件很重要。 就这样。这并不是一个完美的解决方案,但是使用组策略来禁用特定设备的更新至少比完全禁用更新能给您带来更多的控制。

  • 发布于 2021-04-09 10:24
  • 阅读 ( 113 )

部门(div)和跨度(span)的区别

... </body> </html> The <div>  elements can have different attributes, specifically different sizes for resp***ive interaction depending on the screen size of the device being used. Here is an example of how each <div> element can be styled in the HTML’s corresponding CSS fil...

  • 发布于 2021-06-24 23:59
  • 阅读 ( 238 )

身份证件(id)和css中的类(class in css)的区别

...L标记。id和class是两种类型的选择器。 覆盖的关键领域 1.什么是CSS规则-定义,例2.什么是id-定义,例3.什么是类-定义,例4.id和类的区别-关键区别的比较 关键术语 类,CSS规则,ID 什么是css规则(css rules)? CSS由一组规则组成。浏...

  • 发布于 2021-06-30 21:53
  • 阅读 ( 310 )

关系(relation)和数据库管理系统中的关系(relationship in dbms)的区别

...实体,而关系是两个表之间的关联。 覆盖的关键领域 1.什么是DBMS中的关系-定义,功能2.什么是DBMS中的关系-定义,功能3.DBMS中的关系和关系之间的区别是什么-关键区别的比较 关键术语 数据库管理系统,关系,关系 什么是数据...

  • 发布于 2021-07-01 01:38
  • 阅读 ( 935 )

第三范式(3nf)和bcnf公司(bcnf)的区别

...论3NF和BCNF之前,有必要了解1NF和2nf。 覆盖的关键领域 1.什么是1NF-定义,功能2.什么是2NF-定义,功能3.什么是3NF-定义,功能4.什么是BCNF-定义,功能5.3NF和BCNF之间的区别是什么-关键区别的比较 关键术语 1NF、2NF、3NF、BCNF、归一化 ...

  • 发布于 2021-07-01 10:44
  • 阅读 ( 616 )
wjfx5283
wjfx5283

0 篇文章

相关推荐