一、实例演示a标签和iframe标签组合使用，理解a标签target属性和iframe标签name属性的关系。
实例
<div> <h3>请选择您所需的搜索引擎：</h3> <a href="https://baidu.com" target="search-engine">百度</a> <a href="https://sogou.com" target="search-engine">搜狗</a> <a href="https://so.com" target="search-engine">360</a> </div> <br> <div> <iframe src="" width="1200" height="600" frameborder="1" name="search-engine"></iframe> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：a标签的target属性设置当前a标签中的地址在什么窗口打开，值有：_self / _blank / _parent / _top / 自定义值，当target为自定义值时，a标签一般和iframe标签组合使用，这时a标签的target属性值和iframe标签的name属性值必须是一致，表示a标签中的地址要在iframe标签中打开。
二、实例演示css的三种使用方式，css按使用方式分类：内联样式、内部样式、外部样式，理解syele属性、style标签、外部样式的使用方式。
1.内联样式：内联样式就是在标签的style属性中编写样式。
实例
<div style="width: 100px; height: 100px; margin-bottom: 10px; background-color: red;"></div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.内部样式：内部样式就是在style标签中编写样式。style标签可在头部和主体的任何部位，但一般是用在头部。
实例
<style>#styletag { width: 100px; height: 100px; margin-bottom: 10px; background-color: yellow; }</style>
<div id="styletag"></div>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.外部样式：外部样式就是把样式直接写在文件名后缀为css的文件中（不需要写style标签），然后通过link标签把这个样式文件引入需要的html文档中。
引入示例：<link rel="stylesheet" href="example.css">
三、盒模型三要素：内边距、边框、外边距设置上有什么不同？
1.内外边距只能设置大小，可单独每一边设置，也可四边一起设置，内边距的颜色与内容的颜色保持一致，外边距无法设置颜色。
2.边框可以设置宽度、样式、颜色（可分开设置，也可一起设置），和内外边距一样，可单独每一边设置，也可四边一起设置，每一边的宽度，样式，颜色都可以单独设置。
实例
<style>
#padding-border-margin {
width: 100px;
height: 100px;
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
/* padding: 50px; */ /* 四边的值是一样的可简写成这样的形式 */
border-width: 20px;
border-style: solid;
border-color: #333;
/* border: 20px solid #333; */
border-top: 10px solid #444;
border-right: 20px double #666;
border-bottom: 30px dashed #888;
border-left: 40px dotted #aaa;
/* border-top-color: red; */
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
/* margin: 50px 50px 50px 50px; */ /* 四边的值是一样的可简写，如：margin: 50px; */
background-color: blue;
}
</style>
<div id="padding-border-margin"></div>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、盒模型每个要素的样式排列方式是什么？
盒模型的内外边距和边框都有四个边：上下左右，给内外边距的四个边添加样式时要按照上、右、下、左顺时针的顺序来添加，每边单独设置时可以不按这个顺序写，但简写时必须严格按这个顺序写。
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left:10px;
padding: 10px 20px 30px 40px; /* padding: 上 右 下 左; */
padding: 10px; /* 表示4边的值都一样。 */
padding: 10px 20px; /* 表示上下边是10px，左右边的值是 20px。 */
padding: 10px 20px 30px; /* 表示上边是10px，下边是30px，左右边的值是 20px。 */
border-top: 20px solid #666;
border-right: 20px solid #666;
border-bottom: 20px solid #666;
border-left: 20px solid #666;
border: 20px solid #666; /* 若每条边框的属性都完全一样可简写成这样的形式。 */
border-top-width: 30px; /* 单独设置某一边框的宽度。 */
border-top-style: dashed; /* 单独设置某一边框的样式。 */
border-top-color: red; /* 单独设置某一边框的颜色。 */
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left:10px;
margin: 10px 20px 30px 40px; /* margin: 上 右 下 左; */
margin: 10px; /* 表示4边的值都一样。 */
margin: 10px 20px; /* 表示上下边是10px，左右边的值是 20px。 */
margin: 10px 20px 30px; /* 表示上边是10px，下边是30px，左右边的值是 20px。 */
