HTML id 属性

您所在的位置：网站首页 › html标签的属性有哪些每个属性有什么作用英文 › HTML id 属性

HTML id 属性

2024-07-08 18:23| 来源: 网络整理| 查看: 265

w3school 在线教程 HTML 系列教程浏览器脚本服务器脚本编程教程 XML 系列教程建站手册参考手册 HTML 基础教程 HTML 教程 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 样式 HTML 格式化 HTML 引用 HTML 注释 HTML 颜色 HTML 颜色名 HTML CSS HTML 链接 HTML 图像 HTML 表格 HTML 列表 HTML 块 HTML 类 HTML Id HTML 内联框架 HTML JavaScript HTML 路径 HTML 头部 HTML 布局 HTML 响应式设计 HTML 计算机代码 HTML5 语义 HTML5 代码约定 HTML 实体 HTML 符号 HTML 表情符号 HTML 字符集 HTML URL HTML 框架 HTML 背景 HTML URL 编码 HTML Web 服务器 HTML 文档类型 HTML 速查手册 HTML XHTML XHTML 简介 XHTML 元素 XHTML 属性 HTML 表单 HTML 表单 HTML 表单属性 HTML 表单元素 HTML 输入类型 HTML 输入属性 HTML Input 表单属性 HTML 图形 HTML5 画布 HTML5 SVG HTML5 画布 vs SVG HTML 媒体 HTML 媒体 HTML 对象 HTML 音频 HTML 视频 HTML YouTube HTML5 HTML5 简介 HTML5 支持 HTML5 元素 HTML5 迁移 HTML API HTML5 地理定位 HTML5 拖放 HTML5 Web 存储 HTML5 应用缓存 HTML5 Web Workers HTML5 SSE 实例/测验/总结 HTML 实例 HTML 测验 HTML 总结 HTML 参考手册 HTML 元素（字母排序） HTML 元素（功能排序） HTML 浏览器支持 HTML 全局属性 HTML 事件 HTML 颜色名 HTML 画布 HTML 视频/音频 HTML 字符集 HTML 文档类型 HTML URL 编码 HTML 语言代码 HTML 国家代码 HTTP 消息 HTTP 方法键盘快捷键 HTML id 属性 HTML 类 HTML 内联框架

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

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

使用 id 属性

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

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

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

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

实例 #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } My Header

亲自试一试

注释：id 名称对大小写敏感！

注释：id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。

Class 与 ID 的差异

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

实例 /* 设置 id 为 "myHeader" 的元素的样式 */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } /* 设置类名为 "city" 的所有元素的样式 */ .city { background-color: tomato; color: white; padding: 10px; } My Cities London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

亲自试一试

提示：请在我们的 CSS 教程中学习更多 CSS 知识。

通过 ID 和链接实现 HTML 书签

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

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

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

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

实例

首先，用 id 属性创建书签：

第四章

然后，在同一张页面中，向这个书签添加一个链接（“跳转到第四章”）：

实例跳转到第四章

亲自试一试

或者，在另一张页面中，添加指向这个书签的链接（“跳转到第四章”）：

Jump to Chapter 4 在 JavaScript 中使用 id 属性

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

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

实例

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

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

亲自试一试

提示：请在 HTML JavaScript 这一章中，或我们的 JavaScript 教程中学习 JavaScript。

本章总结 id 属性用于为 HTML 元素指定唯一的 id id 属性的值在 HTML 文档中必须是唯一的 CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式 id 属性的值区分大小写 id 属性还可用于创建 HTML 书签 JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素 HTML 类 HTML 内联框架 HTML 参考手册 HTML 实例 HTML 测验

关于 W3School 帮助 W3School 使用条款隐私条款技术支持：赢科蒙ICP备06004630号

【本文地址】

HTML id 属性

HTML id 属性

今日新闻

推荐新闻