前端必知必会-html的id属性和Iframe

编程岁月

墨衍会员 · AI 创作全网分发码龄12年

关注

VIP免费原创最新推荐文章于 2026-03-15 00:07:57 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

《HTML标准》解读：详解Iframe元素本文主要是基于《HTML标准》4.8节讲解iframe元素，主要的内容是iframe的发展历史、基础使用以及相关的安全考量。阅读详情

文章目录

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

最低0.47元/天解锁文章

标签

#前端 #html

基于官方规范系列篇之——HTML 篇（七）iframe 本文介绍了大名鼎鼎的 iframe，介绍了其基本使用，包括 src、srcdoc、loading 属性、sandbox 属性、allow 属性等。还扩充了一下 iframe 内部跳转链接，介绍了为何业界普遍不采用 iframe 作为微前端解决方案的原因之一。阅读详情