1.iframe标签

iframe是一个内联框架，可以在当前html页面嵌入另一个文档，通俗理解为网页子窗口。
基本语法结构为：

<iframe src=""  ></iframe>

1.1常用属性：

name：定义名称
src：地址。这里也可以设置为页面的地址
height、width：设iframe的高度、宽度
scrolling：设置是否在iframe中显示滚动条。取值为yes、no、auto
frameborder：设置是否显示边框。取值为0或1

1.2 iframe的简单应用

在这里编写了两个html网页，一个名为01.html，里面的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title>
</head>
<body><aside>即使青春是一株大地伟岸的树，但我明白，一株独秀永远不是挺拔，成行成排的林木，才是遮风挡沙的绿色长城。即使青春是一叶大海孤高的帆，但我明白，一叶孤帆很难远航，千帆竞发才是大海的壮观。即使青春是一株大地伟岸的树，但我明白，一株独秀永远不是挺拔，成行成排的林木，才是遮风挡沙的绿色长城。即使青春是一叶大海孤高的帆，但我明白，一叶孤帆很难远航，千帆竞发才是大海的壮观。即使青春是一株大地伟岸的树，但我明白，一株独秀永远不是挺拔，成行成排的林木，才是遮风挡沙的绿色长城。即使青春是一叶大海孤高的帆，但我明白，一叶孤帆很难远航，千帆竞发才是大海的壮观。</aside>
</body>
</html>

另一个名为frame.html里面的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Frame</title>
</head>
<body>
<h1>iframe标签</h1>
<iframe src="01.html"></iframe>
</body>
</html>

实现的效果如图所示：

可以看出iframe默认有边框、滚动条、以及宽、高。
我们将边框和滚动条去除、重新设置宽度和高度：

<iframe src="01.html" frameborder="0" scrolling="no" width="400px" height="200px"></iframe>

1.2 iframe和a标签建立联系（可用来制作书签）

给iframe设置name值，a标签设置target属性，name的值和target的值一致即可。

<nav><ul><li><a href="https://www.csdn.net/" target="abc">csdn页面</a></li><li><a href="form1.html" target="abc">form表单</a></li><li><a href="../day2/Test01/table.html" target="abc">table表格</a></li></ul>
</nav>
<!--iframe 网页子窗口   frame如何和A标签建立联系 1.frame设置name属性 2.A标签设置target属性 即name和target的值要一致-->
<iframe src="01.html" name="abc" ></iframe>

其中的form1.html就是我前一个博客里form表单的代码和效果，table.html是我前一个博客里table简单合并的代码。

实现的效果图：

在这里点击csdn页面的a标签，下面的iframe窗口就会显示csdn网址显示的内容；

点击form表单的a标签iframe就会显示form1.html的内容；

点击table表格的a标签iframe就会显示table.html的内容。

2.a标签的锚点

跳到页面的某个部分，当页面内容很长时，很有用。
通过id属性制作书签，通过再a标签的href属性后加上id属性的值完成制作。
比如这里的h1的id为myh1,在a标签的href中加上#myh1就可完成点击顶部跳转到h1部分

点击回到顶部，就会跳转到我是第1个h1的部分。
没点击回到顶部之前：

点击回到顶部之后：回到id为myh1的位置：

同时，第一个a标签的href链接的是其他网页的某一个id标签里面，这样可以做一个页面点击跳转。

html:iframe标签以及a标签的锚点和制作书签相关推荐

html5基础（网页基本标签、图像标签、超链接、列表、表格、媒体元素、iframe框架、表单）
网页的基本信息 1.DOCTYPE声明文档类型的声明,约束HTML文档结构,检验是否符合相关Web标准,同时告诉浏览器,使用哪种规范来解释这个文档中的代码.DOCTYPE声明必须位于HTML文档第一 ...
前端(一)——HTML之基本标签、图片标签、超链接、锚链接
文章目录 1. 定义 2. 发展史及优势 2.1 发展史 2.2 优势 3. W3C标准 4. HTML的基本结构 5. 网站的基本标签 5.1 标题标签 5.2 段落标签 5.3 水平线标签 5.4 ...
html 图片行内剧中,HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)...
一.转义字符由特殊字符包裹的文本会当做标签去解析对应不换行空格对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响. < ...
html中空标签的有什么,HTML常用标签，什么是空标签和可替换标签
空标签可替换标签含义:指标签会被替代,例如img标签会被下载的图片替代. 典型的可替换元素有 . . 和表单元素,如. . 某些元素只在一些特殊情况下表现为可替换元素,例如和 . 常用的HTM ...
html用户名标签,HTML常用标签
HTML常用标签 a 标签描述 HTML 元素(或称锚元素)可以创建通向其他网页.文件.同一页面内的位置.电子邮件地址或任何其他 URL 的超链接. 属性 href 包含超链接指向的 URL 或 U ...
HTML（一）：行级标签、块级标签、其他标签
目录 0.Web前端介绍 0.1 什么是网页 0.2 网页的组成 0.3 开发前的准备一.HTML 1.1 HTML概念 1.1.1 HTML是什么 1.1.2 HTML基本结构 1.1.3 HTM ...
a标签，br标签，p标签详解
a标签,br标签,p标签详解一.a标签 1.简介 2.语法 3.常用属性二.br标签 1.简介 2.语法三.p标签 1.简介 2.案例一.a标签 1.简介使用a锚链接可以从A页面转到B页面, ...
HTML基础-标签分类(闭合标签，空标签，块级元素，行内元素，行级块元素，可替换元素)
文章目录一.闭合标签和空标签二.位置特性(块级元素,行内元素,行级块元素) 块级元素(block) 行级元素(inline) 行内块元素(inline-block) 三.元素之间的转化四.可替换 ...
html5常用的属性标签,HTML5常用标签及其属性设置
一.Html5的基本结构网页的内容二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...

html:iframe标签以及a标签的锚点和制作书签