整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在自己的页面中嵌入其他页面是一个非常重要的操作，既能丰富自己的页面样式又能增强页面的信息量。
举个例子，如果打算在自己的页面中插入一个视频网站的视频该怎么做呢？
假如我现在自己的页面中嵌入这个视频，
我只需要在视频下侧找到"分享"。
点击之后出现这样的对话框，如图：
通过在我们的页面中粘贴这段通用代码就可以显示这个视频了。
代码如下：
<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>下面就写到我们的页面中试试吧。
首先复制"第一个网页.html"文件，改名为"在页面中嵌入页面.html"保存，然后用记事本打开，修改<head></head>标签中的<title>第一个页面</title>编辑为"在页面中嵌入页面"即可，完整代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>在页面中嵌入页面</title>
</head>
<body>
<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>
</body>
</html>页面效果如下：
怎么样，是不是很神奇！
下面我们来分析一下这段代码的含义。
首先要引入一个新标签<iframe>，HTML的使用手册中翻译为"框架"，说实话，这么翻译初学者是不知所云的。这个框架元素的主要作用就是在自己的页面中嵌入其他页面。
在<iframe>标签中先指定路径属性即src。这里使用的是单引号，实际上只要是半角符号，单引号和双引号都可以的。
然后设置长宽属性，即width和height，大家可以尝试改变数据看看。
frameborder可以为iframe的窗口指定一个边框，大家可以尝试把0改成1看看。大家注意哈，这里输入30和输入1是一样的，因为这个属性不是定义边框的宽度，而是定义是否显示边框！在编程中叫做布尔值，0代表没有边框，1代表有边框！和我们点灯的开关一样！
如图：多了个边框出来。
最后'allowfullscreen'这个描述非常的奇葩，把它删掉没有任何影响。不晓得是干什么的，主要是也不符合html的语法（也可能是我没见识）。如果有详细了解的小伙伴欢迎留言指教，感激不尽。
下面我们尝试修改一下src属性，给它一个别的路径看看。例如:
<!DOCTYPE HTML>
<html>
<head>
<title>在页面中嵌入页面</title>
</head>
<body>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'>
</iframe>
</body>
</html>需要注意的是，修改了src并保存文件之后要把原页面关闭然后重新打开才可以正常显示！
效果如下：
在浏览网页时我们还经常遇到这样的情况，就是有一个独立窗口显示嵌套的页面，上面有个标题，一点击就会跳到那个嵌入的页面上，这个其实很简答，使用一个<a></a>元素即可办到，示例代码如下:
<a href="https://www.toutiao.com/i6790673377188119052/">HTML中的块级元素与内联元素——零基础自学网页制作</a>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'></iframe>页面示例如下：
框架元素并没有换行，所有我们可以推测出<iframe>标签实际上是个内联元素，如何让它换行呢？
为<iframe>的style属性中写入display:block即可。这句代码的意思是按照块元素来显示<iframe>内容。
示例代码如下：
<iframe height=498 width=510 style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'></iframe>页面效果如下：
是不是很有意思。
下面我们来介绍一个更有趣的玩法。如图所示：
这个怎么做呢？
这就要介绍<iframe>标签中的另一个属性：name（名字）
示例代码如下：name="iframe"
<iframe name = "iframe" height=498 width=510style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>这里讲个题外话，如果大家了解中国古代的"请神术"的话就会知道这样一个有趣的传说，就是如果我们能叫出鬼神的名字就可以驱使它。
编程也是这样，我们给函数或变量一个名字后，就可以随时随地的驱使它。
现在我们给<iframe>起了个名字叫做"iframe"，当然您可以使用其他名字也没问题，但要使用英文或汉语拼音命名，名字是英语字母组合最好。
有了名字之后，<a>标签就要驱使<iframe>标签来显示自己路径下的内容，如何驱使呢？
大家还记得<a>标签中有一个target属性吗？只要让target="iframename"即可！
也就是target="iframe"。示例代码如下：大家要注意的是<a>标签也是内联元素，也需要添加display:block，不然也是排在一列显示。
<a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的块级元素与内联元素——零基础自学网页制作</a><!--第一个a链接的是头条文章-->
<a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"> 歼20战斗机百科</a><!--第二个a链接的是百度百科-->
<a style = "display:block;"target="iframe" href="image1.jpg">IT美女</a><!--第三个a链接的是本地图片-->
<iframe name = "iframe" height=498 width=510style = "display:block;"></iframe>只要我们为不同的<a>标签赋予target="iframe"的属性，点击这些<a>标签就可以在叫做"iframe"的框架元素中显示自己的页面。这时我们可以把<iframe>标签中的src属性删除掉，保存文件后，关闭测试网页，再重新打开，效果如下:
初始状态下，因为框架元素中的src是空的，所以打开后是空白的。如果您觉得单调可以任意复制3个<a>中的一个href中的链接路径给<iframe>的src属性，打开就是相应的标签。这个就不演示了，大家自己试试即可。
点击第一个链接效果如下：
点击第二个链接如下：
点击第三个链接如下：
最后再强调一下，改完框架的src属性后需要关闭页面后重新打开才可以，刷新的话并不能正确显示！切记！
今天的示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>在页面中嵌入页面</title>
</head>
<body>
<a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的块级元素与内联元素——零基础自学网页制作</a>
<a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">歼20战斗机百科</a>
<a style = "display:block;" target="iframe" href="image1.jpg">IT美女</a>
<iframe name = "iframe" height=498 width=510 style = "display:block;"></iframe>
</body>
</html>今天的内容结束了，明天我将会为大家介绍<object>和<embed>这两个标签，它们可以在页面中嵌入更多有趣的东西。
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
生 CSS 嵌套（Native CSS nesting）已经被所有现代桌面浏览器所支持！，但是请注意，移动端浏览器支持的还很有限。
原生 CSS 嵌套可以像 SASS、LESS 预处理器一样，将相关的选择器组合在一起，从而减少需要编写的规则数量，它可以节省打字时间，并使语法更易于阅读和维护。您可以将选择器嵌套到任意深度，但要小心不要超过两层或三层。嵌套深度没有技术限制，但它会使代码更难以阅读，并且生成的 CSS 可能会变得不必要的冗长。
.button {
background-color: red;
&.warning {
background-color: blue;
}
& .icon {
width: 1rem;
height: 1rem;
}
}
虽然原生 CSS 嵌套语法在过去几年中不断发展，使大多数 Web 开发人员感到满意，但不要指望所有 SCSS 代码都能像您期望的那样直接工作。
您可以将任何选择器嵌套在另一个选择器中，但它必须以符号开头，例如 &, .（类选择器）、#（ID选择器）、@（对于媒体查询）、:、::、+、 ~、 > 或 [。换句话说，它不能是对 HTML 元素的直接引用。下面的代码是无效的，不会对 input 元素选择器进行解析：
.parent {
color: red;
input {
margin: 1em;
}
}
/* Invalid, because "input" is an identifier. */
解决此问题的最简单方法是使用与号 ( &)，它以与 Sass 相同的方式引用当前选择器。
.parent {
color: red;
& input {
margin: 1em;
}
/* use pseudo-elements and pseudo-classes */
&::after {}
&:hover {}
&:target {}
}
/* valid, no longer starts with an identifier */
或者，您可以使用其中之一：
它们都可以在这个简单的示例中工作，但是稍后您可能会遇到更复杂的样式表的特异性问题。
它还&允许您在父选择器上定位伪元素和伪类。例如：
p.my-element {
&::after {}
&:hover {}
&:target {}
}
请注意，& 可以在选择器中的任何位置使用。例如：
.child1 {
.parent3 & {
color: red;
}
}
这将转换为以下非嵌套语法：
.parent3 .child1 { color: red; }
您甚至可以在选择器中使用多个 & 符号：
ul {
& li & {
color: blue;
}
}
这将以嵌套 <ul> 元素 ( ul li ul) 为目标，但如果您想保持理智，我建议不要使用它！
嵌套媒体查询示例：
p {
color: cyan;
@media (min-width: 800px) {
color: purple;
}
}
原生 CSS 嵌套将父选择器包装在 :is() 中，这可能会导致与 Sass 输出的差异，比如以下嵌套代码：
.parent1, #parent2 {
.child1 {
}
}
当它在浏览器中解析时，它实际上变成以下内容：
:is(.parent1, #parent2) .child1 {
}
Sass 将相同的代码编译为：
.parent1 .child1,
#parent2 .child1 {
}
您可能还会遇到一个更微妙的问题。考虑一下：
.parent .child {
.grandparent & {}
}
原生 CSS 等效项是：
.grandparent :is(.parent .child) {}
这与以下错误排序的 HTML 元素匹配：
<div class="parent">
<div class="grandparent">
<div class="child">MATCH</div>
</div>
</div>
MATCH变得有样式是因为 CSS 解析器执行以下操作：
它会查找所有元素，其所属类的child祖先也parent为DOM 层次结构中的任何点。
找到包含MATCH的元素后，解析器会grandparent在 DOM 层次结构中的任何位置再次检查它是否具有 — 的祖先。它找到一个并相应地设置该元素的样式。
Sass 中的情况并非如此，它编译为：
.grandparent .parent .child {} 上面的 HTML 没有样式化，因为元素类不遵循严格的grandparent、parent、 和child顺序。
Sass 使用字符串替换，因此如下所示的声明是有效的，并且与类的任何元素相匹配 .btn-primary：
.btn {
&-primary {
color: blue;
}
}
但是原生 CSS 嵌套会忽略&-space选择器。
从短期来看，现有的 CSS 预处理器仍然至关重要。Sass 开发团队宣布，他们将支持 .css 文件中的原生 CSS 嵌套，并按原样输出代码。他们将一如既往地编译嵌套 SCSS 代码，以避免破坏现有代码库，但当全球浏览器支持率达到 98% 时，他们将开始输出 :is() 选择器。
我猜想，PostCSS 插件等预处理器目前会扩展嵌套代码，但随着浏览器支持的普及，就会取消这一功能。当然，使用预处理器还有其他很好的理由，比如将部分代码捆绑到一个文件中，以及对代码进行精简。但如果嵌套是你唯一需要的功能，你当然可以考虑在较小的项目中使用原生 CSS。
CSS 嵌套是最有用、最实用的预处理器功能之一。浏览器供应商努力创造了一个与 CSS 非常相似的原生 CSS 版本，以满足网络开发人员的需求。虽然两者之间存在细微差别，而且在使用（过于）复杂的选择器时可能会遇到不寻常的特殊性问题，但很少有代码库需要进行彻底修改。
原生嵌套可能会让你重新考虑是否需要 CSS 预处理器，但它们仍能提供其他好处。Sass 和类似工具仍然是大多数开发者工具包的重要组成部分。
TML 基础
非常简单的HTML文档
HTML 标题
HTML 段落
HTML 链接
HTML 图片
实例解析
HTML 标题
HTML 标题
在html源码中插入注释
插入水平线
实例解析
HTML 段落
HTML 段落
更多段落
本例演示在 HTML 文档中折行的使用。
HTML 格式化的某些问题。
实例解析
HTML 文本格式化
文本格式化
此例演示如何使用 pre 标签对空行和空格进行控制。
此例演示不同的"计算机输出"标签的显示效果。
此例演示如何在 HTML 文件中写地址。
此例演示如何实现缩写或首字母缩写。
此例演示如何改变文字的方向。
此例演示如何实现长短不一的引用语。
文本下划线与删除线
实例解析
HTML 样式
HTML Style 元素
背景色样式
字体样式，颜色，大小
文本对齐样式
设置文本字体
设置文本字体大小
设置文本字体颜色
设置文本字体，字体大小，字体颜色
HTML使用不同样式
没有下划线的链接
链接到一个外部样式表
实例解析
HTML 链接
创建超级链接
将图像作为链接
在新的浏览器窗口打开链接
链接到同一个页面的不同位置
跳出框架
创建电子邮件链接
创建电子邮件链接 2
实例解析
HTML 图像
插入图像
从不同的位置插入图片
排列图片
本例演示如何使图片浮动至段落的左边或右边。
制作图像链接
创建图像映射
实例解析
HTML 表格
简单的表格
没有边框的表格
表格中的表头
带有标题的表格
跨行或跨列的表格单元格
表格内的标签
单元格边距(Cell padding)
单元格间距(Cell spacing)
实例解析
HTML 列表
无序列表
有序列表
不同类型的有序列表
不同类型的无序列表
嵌套列表
嵌套列表 2
定义列表
实例解析
HTML Forms 和 Input
创建文本域(Text fields)
创建密码域
复选框
单选按钮
简单的下拉列表
预选下拉列表
本例演示如何创建一个文本域（多行文本输入控件）。
创建一个按钮
本例演示如何在数据周围绘制一个带标题的框。
带有文本域与输入域的表单
带有复选框与提交按钮的form表单
带有单选框与提交按钮的表单
发送邮件表单
实例解析
HTML iframe
内联框架 (HTML页面中插入框架)
实例解析
HTML 头部元素
描述了文档标题
HTML页面中默认的URL链接
提供文档元数据
实例解析
HTML 脚本
插入一个脚本
使用 <noscript> 标签
实例解析
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
