![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html>
<html lang="en">
<head>
<title>7月3号作业</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/0703.css">
<style>
.blue{color: blue;}
</style>
</head>
<body>
<!-- 一、内联标签与a标签绑定 -->
<a href="0702.html" target="zuoye02">0702作业</a>
<iframe src="" name="zuoye02" frameborder="1" width="700px" height="300px"></iframe><hr>
<!-- 二、css的内联、内部、外部样式使用例子 -->
<!-- 1、内联样式 -->
<p style="color: red;">红色</p>
<!-- 2、内部样式 -->
<p class="blue">蓝色</p>
<!-- 3、外部样式 -->
<p id="yellow">黄色</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以上代码知识点总结：
一、内联标签 iframe
在页面使用<iframe>标签添加属性src="网址或文档"显示窗口内容，同时可以添加属性frameborder(边框)、width(宽)、height(高)进行设置，当iframe属性name值与a标签的属性tarset值一致时形成关联，点击a链接时则能在iframe窗口显示其内容。
二、CSS样式
1、内联样式：在标签内添加style属性，并在引号内添加所需的属性样式。例：<a style="color:red;font-size:30px;">链接</a>
2、内部样式：在head头部添加<style>标签内，使用选择器在style标签内对其样式属性进行设置。例：<head><style> p{color:pink;font-size:30px;} </style></head>
3、外部样式：在head头部添加<link>标签进行css文件关联，其属性rel需是rel="stylesheet",属性type需是type="text/css",属性href对应css的文件名
当使用内联样式时style只是标签内的一个属性，当使用内部样式时style是一个双标签元素。
4、css样式执行顺序：内联>内部>外部，一切遵从就近原则；
选择器顺序：ID>class；
三、盒子模型
1、每个元素都是盒子模型
2、每个盒子都是由content（内容）、margin（外边距）、border（边框）、padding（内边距）组成。
3、盒子模型的结构：content在盒子中心位置，border将padding与margin分割，border与content之间的空间距离是padding，border外部是margin；padding与margin是透明状态，故margin无法显示实际空间距离。
4、边框的样式：border-top（上边框线）、border-bottom（下边框线）、border-left（左边框线）、border-right（右边框线）；边框的简写方法：border:边框宽度 线条(实线：solid) 颜色，例border：1px solid bule;
5、外边距、内边距简写顺序：上右下左；例：margin：10px(上) 20px(右) 30px(下) 40px(左)；补充：当简写只写两个值的顺序是上下 左右；例margin：10px(上下) 20px(左右)。
