1. 实例演示:<iframe>标签的使用
实例
<div> <h3>这是一个内联框架标签</h3> <h3><a href="https://baidu.com" target="baidu">百度</a></h3> <iframe frameborder="1" width="300" height="200" name="baidu"></iframe> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 实例演示: css样式设置的优先级
实例
<style>
/* 内部样式 */
/* 将元素的样式规则用style标签插入到当前的HTML文档中 */
p{color: blue;}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="demo.css">
<div>
<!-- 内联样式 -->
<p style="color:red;">这是一段测试文本</p>
</div>运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 实例演示: css的id, class与标签选择器的使用规则
实例
<style>
.center {
color: blue;
}
#center {
color:green;
}
</style>
<div>
<h1 id="center">测试文本1</h1>
<p class="center">测试文本2</p>
</div>运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)
实例
<style>
.box {
width: 500px;
height: 500px;
padding: 10px;
border: 5px dashed black;
margin: 0;
}
</style>
<div>
<div class="box">这是一个盒子</div>
</div>运行实例 »
点击 "运行实例" 按钮查看在线实例
5.总结
1）iframe 内联框架：iframe 元素会创建包含另外一个文档的内联框架（即行内框架，文档中的文档）。
作用：在当前页面中，加载另一个页面，让页面变得美观。
其中的src属性可以设置iframe显示页面的访问地址，也可以使用name属性配合超链接的target属性进行跳转。
2）css样式的优先级：内联样式 > 内部样式 > 外部样式；
3）选择器的优先级：标签选择器 < class选择器 < id选择器。
4）id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，CSS 中 id 选择器以 “#” 来定义；
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用，在 CSS 中，类选择器以一个点”.”号显示；
5）盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成，一个盒子中主要的属性就5个：width（内容宽度）、height（内容高度）、padding（内边距）、border（边框，三个要素：粗细、线型、颜色。）、margin（外边距）。 其中内外边距方向分为为上、右、下、左。
