2.8 容器与框架-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）
2023-05-12
|
8页
|
201人阅读
|
2人下载
精品
内容正文：
单元2 HTML基础
2.8 容器与框架
主要内容
CONTENTS
PART 01
<div>标签
PART 03
<iframe>标签
PART 02
<span>标签
2
<div>标签
<div>是非常重要的块级元素，在网页布局（Layout）方面发挥着重要的作用，使用<div>我们可以划分页面的各个部分，通过与 CSS 相结合可以实现各种各样的效果。
示例：
<html>
<head>
<title>标题标记</title>
<meta charset=UTF-8">
</head>
<body>
<div style="width:200px;padding:0px 20px;border:1px solid #ccc;
background-color:#eee;">
<h4>网页设计教程目录</h4>
<ul>
<li><a href="#" target="_blank">HTML概述</a></li>
<li><a href="#" target="_blank">HTML页面元素及属性</a></li>
<li><a href="#" target="_blank">CSS3入门</a></li>
<li><a href="#" target="_blank">CSS3选择器</a></li>
</ul>
</div>
</body>
</html>
<div> 标签及其包含的内容可以看做网页的一个模块，<div> 标签本身并没有什么特殊的显示效果，需要借助 CSS 样式对外边距、内边距、背景、边框等进行设置，从而达到网页板块布局的目的。
【案例2.8.1】div标签的使用
<span>标签
<span>标签可以对 HTML 文档中的文本内容进行修饰，此标签不会为文档内容提供任何视觉效果，但可以与 CSS 结合使用来美化网页。
示例：
<span style="background-color: #f6f6f6; border:1px solid #ddd; font-size: 60px;">
span示例
</span>
<span> 标签本身并没有什么特殊效果，通常需要借助 CSS 来改变内容的样式，比如字体、颜色、大小、边框、背景等。
【案例2.8.2】span标签的使用
<div>标签和<span>标签的比较
相同：
<div>标签和<span>标签都没有特定的含义，他们的作用就是用来划分区域的，它们就相当于一个容器。
区别：
<div>是块级元素，一般用来划分比较大的区域，其内部可以放入任何其他的标签。
<span>是行级元素，可以用来划分一个小的区域，其内部一般只包含文本，不放其他标签。
iframe框架标签
<iframe src="path" name="mainFrame" ></iframe>
示例：
<iframe src="2.8.1.html" width="300" height="200"></iframe>
引用页面地址
框架标识名
可以设置src的属性值为http://www.baidu.com，在这个页面中也可以打开一个线上的网页
【案例2.8.3】iframe标签的使用
iframe框架标签
<iframe>属性（实现页面间的相互跳转）
在被打开的框架上加name属性
在超链接上设置target目标窗口属性为希望显示的框架窗口名
<iframe name="mainFrame" src=“1.html" />
<a href=“2.html ” target=“mainFrame“>2.html显示到框架中</a>
感谢观看
$
资源预览图
1
2
3
4
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。