文章目录
- HTML id 属性
- 类和 ID 之间的区别
- 带有 ID 和链接的 HTML 书签
- 在 JavaScript 中使用 id 属性
- HTML Iframe
- Iframe - 设置高度和宽度
- Iframe - 删除边框
- Iframe - 链接的目标
- 总结
HTML id 属性
HTML id 属性用于为 HTML 元素指定唯一 id。id 属性的值在 HTML 文档中必须是唯一的。
HTML 文档中不能有多个具有相同 id 的元素。
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 名称必须至少包含一个字符，不能以数字开头，并且不能包含空格（空格、制表符等）。
类和 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">我的城市</h1><!-- 具有相同类的多个元素 -->
<h2 class="city">伦敦</h2>
<p>伦敦是英国的首都。</p><h2 class="city">巴黎</h2>
<p>巴黎是法国的首都。</p><h2 class="city">东京</h2>
<p>东京是日本的首都。</p>
带有 ID 和链接的 HTML 书签
HTML 书签用于允许读者跳转到网页的特定部分。
如果页面很长，书签会很有用。
示例
首先，使用 id 属性创建一个书签：
<h2 id="C4">第 4 章</h2>
然后，在同一页面内添加指向书签的链接（“跳转到第 4 章”）：
示例
<a href="#C4">跳转到第 4 章</a>
或者，从另一个页面添加指向书签的链接（“跳转到第 4 章”）：
<a href="html_demo.html#C4">跳转到第 4 章</a>
在 JavaScript 中使用 id 属性
JavaScript 还可以使用 id 属性来为该特定元素执行某些任务。
JavaScript 可以使用 getElementById() 方法访问具有特定 id 的元素：
示例
使用 id 属性通过 JavaScript 操作文本：
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
HTML Iframe
HTML iframe 用于在网页内显示网页。
HTML <iframe> 标签指定内联框架。
内联框架用于在当前 HTML 文档中嵌入另一个文档。
语法
<iframe src="url" title="description"></iframe>
提示：最好始终为 <iframe> 包含一个 title 属性。屏幕阅读器会使用此属性来读出 iframe 的内容。
Iframe - 设置高度和宽度
使用高度和宽度属性来指定 iframe 的大小。
默认情况下，高度和宽度以像素为单位指定：
示例
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe 示例"></iframe>
或者您可以添加样式属性并使用 CSS 高度和宽度属性：
示例
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe 示例"></iframe>
Iframe - 删除边框
默认情况下，iframe 周围有边框。
要删除边框，请添加样式属性并使用 CSS 边框属性：
示例
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe 示例"></iframe>
使用 CSS，您还可以更改 iframe 边框的大小、样式和颜色：
示例
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe 示例"></iframe>
Iframe - 链接的目标
iframe 可用作链接的目标框架。
链接的目标属性必须引用 iframe 的名称属性：
示例
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe 示例"></iframe><p><a href="https://www.baidu.com" target="iframe_a">baidu.com</a></p>
总结
本文介绍了的html的id属性和iframe使用，如有问题欢迎私信和评论
)
