九、HTML id - CSS篇章

news/2025/11/16 9:18:14/文章来源:https://www.cnblogs.com/w6826301/p/19227067

HTML id 属性用于 为HTML 元素指定唯一的 id。

一个 HTML文档中不能存在多个有相同 id 的元素。

使用 id 属性

id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。

id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

id 的语法是:写一个井号 (#),后跟一个 id 名称。然后,在花括号 {} 中定义 CSS 属性。

下面的例子中我们有一个 <h1> 元素,它指向 id 名称 "myHeader"。这个 <h1> 元素将根据 head 部分中的 #myHeader 样式定义进行样式设置:

实例

<!DOCTYPE html>
<html><head><style>#myHeader {background-color: lightblue;color: black;padding: 40px;text-align: center;}</style></head><body><h1 id="myHeader">My Header</h1></body>
</html>

注释:id 名称对大小写敏感!

注释:id 必须包含至少一个字符,且不能包含空白字符(空格、制表符等)。

Class 与 ID 的差异

同一个类名可以由多个 HTML 元素使用,而一个 id 名称只能由页面中的一个 HTML 元素使用:

实例

<style>/* 设置 id 为 "myHeader" 的元素的样式 */#myHeader {background-color: lightblue;color: black;padding: 40px;text-align: center;}/* 设置类名为 "city" 的所有元素的样式 */.city {background-color: tomato;color: white;padding: 10px;}
</style><!-- 拥有唯一 id 的元素 -->
<h1 id="myHeader">My Cities</h1><!-- 拥有相同类名的多个元素 -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p><h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p><h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

通过 ID 和链接实现 HTML 书签

HTML 书签用于让读者跳转至网页的特定部分。

如果页面很长,那么书签可能很有用。

要使用书签,你必须首先创建它,然后为它添加链接。

然后,当单击链接时,页面将滚动到带有书签的位置。

实例

首先,用 id 属性创建书签:

<h2 id="C4">第四章</h2>

然后,在同一张页面中,向这个书签添加一个链接(“跳转到第四章”):

<a href="#C4">跳转到第四章</a>

或者,在另一张页面中,添加指向这个书签的链接(“跳转到第四章”):

<a href="html_demo.html#C4">Jump to Chapter 4</a>

在 JavaScript 中使用 id 属性

JavaScript 也可以使用 id 属性为特定元素执行某些任务。

JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素:

实例

使用 id 属性通过 JavaScript 来处理文本:

<script>function displayResult() {document.getElementById("myHeader").innerHTML = "Have a nice day!";}
</script>

本章总结

  • id 属性用于为 HTML 元素指定唯一的 id
  • id 属性的值在 HTML 文档中必须是唯一的
  • CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式
  • id 属性的值区分大小写
  • id 属性还可用于创建 HTML 书签
  • JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/966785.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

详细介绍:可白嫖源码--08780基于SpringBoot的流浪动物救助平台的设计与实现 (案例分析)-附源码

详细介绍:可白嫖源码--08780基于SpringBoot的流浪动物救助平台的设计与实现 (案例分析)-附源码pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !…

2025年11月上海装修公司TOP10推荐:品质与服务的综合对比

本文基于2025年行业公开数据和推荐对象参考内容,从专业能力、服务品质等维度筛选10个推荐对象,旨在提供客观参考。作为专家学者,我将结合行业洞察和可验证数据,提供系统分析。必须强调所有信息均基于真实参考内容,…

2025年11月亚克力板材厂家推荐榜:川企领衔五强对比评测

2025年11月,当采购经理在搜索引擎里键入“亚克力板材厂家”时,往往带着三种急迫:项目交期已经写在合同里,板材色差却迟迟打不了样;环保督查组下周进场,供应商却拿不出完整的ISO14001台账;海外客户要求把板材声屏…

完整教程:基于遗传优化的CDVRP问题最优值求解matlab仿真

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

2025年11月遗产继承律师评测榜:五家机构数据对比与选择

当亲人离世留下房产、股权、存款,却未立遗嘱或遗嘱存在瑕疵,继承人常陷入“亲情与利益”双重拉锯:有人担心份额被隐匿,有人苦于证据不足,有人被复杂程序拖得身心俱疲。2025年《中国继承纠纷白皮书》显示,北京、上…

2025年11月上海装修公司TOP10推荐:专业能力与服务质量深度对比

本文基于2025年行业公开数据和推荐对象参考内容,从专业能力、服务品质、成本效益、创新表现和可靠信誉五个维度筛选10个推荐对象,旨在为上海地区有装修需求的业主提供客观参考。作为行业分析专家,我将结合装修行业的…

八、HTML CSS

HTML样式- CSS CSS(Cascading Style Sheet)可译为“层级样式表”或“层叠样式表”,它决定如何显示HTML元素,用于控制网页界面的外观。通过使用CSS实际页面的内容与表格形式分离,极大提高了工作效率。样式存储在样…

2025年11月地位证明机构优选榜:尚普领衔五家综合对比

当您需要向投资人、合作伙伴或监管部门说明“我们在细分赛道到底处于什么位置”时,一份由第三方独立机构出具的市场地位证明往往比自我宣传更具说服力。2025年以来,国家市场监督管理总局对“绝对化用语”持续收紧,企…

读社会工程:安全体系中的人性漏洞(第2版)03构建你的艺术

1. 对他人施加影响 1.1. 让他人愿意按照你的意愿行事1.1.1. 对方愿意去做你想让他们做的事,或者至少会以某种方式记住你想让他们做的事1.1.2. 当一个人把这个想法当作他自己的意愿,并且觉得这个想法很棒时,他才愿意…

ai学习机哪个品牌好?2025年十大学习机品牌

ai学习机哪个品牌好?2025年十大学习机品牌2025 年 AI 学习机市场已形成 “传统积淀与黑马突围” 的双轨格局:学而思、科大讯飞等头部厂商凭借数十年教研深耕与技术壁垒稳居第一梯队,而松鼠 AI 则以 “居家 + 自习室…

MLOps-数据科学运维化指南-全-

MLOps:数据科学运维化指南(全)原文:zh.annas-archive.org/md5/51718412f42e77899b0b128317c3af18 译者:飞龙 协议:CC BY-NC-SA 4.0第一章:ML Ops:数据科学的运营化 你会花费多年时间和大量资金来训练运动员,然…

2025年石棉橡胶板厂家联系电话推荐:优质供应商联系汇总

引言: 在工业密封材料领域,石棉橡胶板作为一种重要的密封元件,广泛应用于高温高压环境下的设备密封。随着2025年工业需求的不断增长,许多用户需要联系专业的石棉橡胶板厂家进行采购或咨询。本文旨在汇总可靠的厂家…

2025年石棉橡胶板厂家联系电话推荐:联系方式与产品介绍

在工业制造和机械密封领域,石棉橡胶板作为一种重要的密封材料,广泛应用于电力、石油、化工、冶金等行业。随着2025年的到来,越来越多的企业和个人需要寻找可靠的石棉橡胶板生产厂家,以确保设备运行的稳定性和安全性…

2025年石棉橡胶板厂家联系电话推荐:精选推荐与使用指南

石棉橡胶板作为一种重要的工业密封材料,广泛应用于电力、石油、化工、冶金等关键领域。随着2025年工业发展的不断推进,越来越多的企业需要寻找可靠的石棉橡胶板供应商。本文旨在为有采购需求的用户提供准确的厂家联系…

详细介绍:【设计模式】Java规则树重构复杂业务逻辑

详细介绍:【设计模式】Java规则树重构复杂业务逻辑2025-11-16 08:57 tlnshuju 阅读(0) 评论(0) 收藏 举报pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; disp…

Kubernetes-应用的容器存储和安全防护指南-全-

Kubernetes 应用的容器存储和安全防护指南(全)原文:zh.annas-archive.org/md5/b12457620515cfda3f141934f38dfcae 译者:飞龙 协议:CC BY-NC-SA 4.0前言 本报告适用于 DevOps 工程师、平台架构师、可靠性工程团队以…

2025单螺杆泵源头厂家口碑排行

2025单螺杆泵源头厂家口碑排行:德帕姆(杭州)泵业科技有限公司领跑行业随着工业领域的不断发展,单螺杆泵作为重要的流体输送设备,在石油化工、环保水处理、食品制药等行业中发挥着越来越重要的作用。2025年,单螺杆…

实战针对本地项目git如何移除旧仓库关联并且添加关联新仓库-优雅草卓伊凡 - 实践

实战针对本地项目git如何移除旧仓库关联并且添加关联新仓库-优雅草卓伊凡 - 实践pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-…

2025计量泵结构源头厂家怎么选购

如何选购2025年计量泵结构源头厂家在选购计量泵时,选择优质的源头厂家至关重要。作为行业领先的德帕姆(杭州)泵业科技有限公司,我们建议您从以下几个方面进行考量:一、厂家资质认证选择具备权威认证的厂家是确保产…