![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：案例不错, 特别是iframe标签
Collection
Collection
内联框架和超链接以及用法
<iframe src="引入页面的路径" name="属性名称"></iframe>
使用内联框架可以引入一个外部的页面
使用iframe来创建一个内联框架
属性：
src：指向一个外部页面的路径，可以使用相对路径
width：宽度
height：高度
name：可以为内联框架指定一个name属性
用法：
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
<a href="跳转网址” target=“属性名称”></a>
<iframe src = "引入页面的路径” name = “属性名称”></iframe>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内联框架iframe标签</title> </head> <body> <h2>内联框架的用法</h2> <!-- 可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开 <a href="跳转网址” target=“属性名称”></a> <iframe src = "引入页面的路径” name = “属性名称”></iframe> --> <ul class="list"> <li class="item">1<a href="http://xhpfmapi.zhongguowangshi.com/vh512/share/6481209" target="news">开学了</a></li> <li class="item">3<a href="https://3w.huanqiu.com/a/8fba2f/9CaKrnKmC1G?agt=8" target="news">今天是每个中国人都该铭记的日子</a></li> <li class="item">4<a href="https://3w.huanqiu.com/a/c36dc8/9CaKrnKmCdP?agt=8" target="news">百度新闻4</a></li> <li class="item">2<a href="https://3w.huanqiu.com/a/3b8f3f/9CaKrnKmBWQ?agt=8" target="news">空军发布励志宣传片，7机同框</a></li> </ul> <iframe src="http://news.baidu.com/" frameborder="0" name="news" width="600" height="300"></iframe> </body> </html>
点击 "运行实例" 按钮查看在线实例
案列中我们把a标签中的target属性的默认值和iframe标签中的name属性的默认值设置成同一个值，相互绑定，在浏览器上执行操作时可以实现相互跳转。iframe标签功能强大，运用广泛。
css3样式和选择器
css全称是Cascading Style Sheets,中文译为层叠样式表，css3是css的升级版本。
css3样式常见三种，即内联样式（行内样式），内部样式，外部样式。
一、行内样式
使用style属性引入CSS样式。
示例：
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
实际在写页面时不提倡使用，在测试的时候可以使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css样式和选择器</title> </head> <body> <!-- 行内样式（内联样式） --> <p style="color: red;font-size: 20px">今天，是2019年9月3日，是中国抗日战争胜利纪念日也是世界反法西斯战争胜利纪念日是所有中国人都必须铭记的日子。</p> </body> </html>
点击 "运行实例" 按钮查看在线实例
二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例：
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css样式和选择器</title>
<style type="text/css">
p {
color: lightcoral;
font-size: 15px;
}
</style>
</head>
<body>
<!-- 内部样式 -->
<p>今天，是2019年9月3日，是中国抗日战争胜利纪念日也是世界反法西斯战争胜利纪念日是所有中国人都必须铭记的日子。</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式
语法：链接式
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/demo2.css"> <title>css样式和选择器</title> </head> <body> <!-- 外部样式 --> <p>今天，是2019年9月3日，是中国抗日战争胜利纪念日也是世界反法西斯战争胜利纪念日是所有中国人都必须铭记的日子。</p> </body> </html>
点击 "运行实例" 按钮查看在线实例
四、CSS中的优先级
1、样式优先级
行内样式（内联样式）>内部样式>外部样式
例如：
行内样式和内部样式比较优先级：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>行内样式和内部样式表的优先级</title>
<!--内部部样式表-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<!--行内样式-->
<p style="color: red;">我是p段落</p>
</html>点击 "运行实例" 按钮查看在线实例
浏览器运行结果：
结论：行内样式优先级高于内部样式表。
内部样式表和外部样式表比较优先级：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>内部样式表和外部样式表的优先级</title>
<!--内部部样式表-->
<style type="text/css">
p {
color: blue;
}
</style>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="css/demo2.css" />
</head>
<body>
<p>我是p段落</p>
<div>我是div</div>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>点击 "运行实例" 按钮查看在线实例
结论：内部样式大于外部样式。
综合上述：样式优先级：行内样式>内部样式>外部样式。
2、选择器优先级
优先级：ID选择器>类选择器>标签选择器
ID选择器 对应页面中唯一的元素 用 # 来表示，比如
<style> #red{ color:red;}</style>
class 类选择器 对应页面中的多个元素 用 .来表示 比如
<style>.red{ color:red;}</style>
标签选择器 针对页面中的标签
<style> p{ color:red;}</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#box {
color: red;
font-size: 30px;
}
.box2 {
color: green;
font-size: 25px;
}
p {
color: blue;
font-size: 20px;
}
</style>
<title>选择器</title>
</head>
<body>
<div id="box">这是id选择器测试</div>
<div class="box2">这是class选择器测试1</div>
<p>这是标签选择器测试</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
盒模型
1.盒模型是布局的基础，页面上的一切可见元素皆可看做盒子 2.盒子默认都是块级元素：独占一行，支持宽度设置（根据盒子模型示意图分析） 3.盒子模型可以设置6个样式：宽高背景内外边距与边框 （1）：width：宽度（水平方向） （2）：height：高度（垂直方向） （3）：background-color：背景（默认透明） （4）：padding：内边距，内容与边框之间的填充区域 （5）：margin：外边距，决定当前盒子与其它盒子之间的位置与关系 （6）：border：边框，位于内外边距之间，是可见元素，允许设置宽度，样式和颜色 4.根据是可见性可以分为二类： （1）.可见的：width，height，border （2）.透明的：background，padding，margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒模型</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: lightcoral;
border: 1px solid green;
margin: 20px;
padding: 20px;
}
.box2 {
width: 100px;
height: 100px;
background-color: blueviolet;
margin: 20px;
padding: 20px;
border: 1px dashed palevioletred;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以上就是本节课所学的知识点。再接再厉。砥砺前行。
