html 可以通过区块元素 <div> 和 <span> 将分散的元素组合起来，形成一个整体或一个局部的整体。大多数 html 元素都可以被广泛的定义为块级元素或内联元素。二者的区别在于块级元素在浏览器中显示时，通常会以新行来开始（和结束），如 <h1> 系列标题元素、<ul>、<ol> 等列表元素、<table> 表格元素、<p> 段落元素等；内联元素在浏览器中显示时通常不会以新行开始或结束，如 <b>、<td>、<a>、<img> 等元素。
<div> 块级元素
<div> 元素是 html 中最常见、最被人熟知的块级元素，它被称为用来组合其他 html 元素的容器。因为它属于块级元素，那么它就拥有块级元素最易被识别的特点，即浏览器会在其前后显示折行(<div> 会以新行开始和结束)。如果 <div> 与 css 一同使用的话，就可以为 <div> 容器中的所有其他 html 元素设置样式属性。<div> 元素的另一个常见的用途是文档布局的，它取代了使用表格定义布局的老式方法。
如图所示，我们可以认为菜鸟教程(菜鸟教程 - 学的不仅是技术，更是梦想！) 的首页中很明显的左(红框部分)右(绿框部分)两部分就是由两个 <div> 元素组合其他元素实现的。
<span> 内联元素
<span> 元素 html 中最常见、最被人熟知的内联元素，可用作文本的容器。当 <span> 与 css 一同使用时，可为部分文本设置样式属性。如：
为部分文本设置样式属性，这正是 <span> 元素的最大的特点。在开始标签 <span> 中通过 style 属性来设置接下来部分文本的样式，如字体颜色、字体、字体大小等。需要设置样式属性的文本内容放置于开始标签 <span> 和结束标签 </span> 中间，就可以完成为部分文本内容设置样式属性的需求。
上面说过，<div> 元素可以用来实现文档布局，替换了使用 <table> 元素进行文档布局。那么 <div> 元素和 <table> 元素分别是如何实现文档布局的呢？
可以看到使用 <div> 实现的网页布局和使用 <table> 实现的网页布局还是有一点差别的。<table> 中的每个 <td> 之间是有单元格间距的，所以看起来可能分区更明显一些，但是需要注意的是，<table> 的主要功能并不是来实现页面布局的，<div> 才是。至于 <div> 中如何展示这种较为明显的分区，后面我们在介绍。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 区块元素示例</title>
</head>
<body>
<p style="font-size: 20px;">div 实现文档布局:</p>
<!-- 最大的 div 区块 -->
<div id="container" style="width:800px">
<!-- 头部 div 区块, 用来设置文档标题 -->
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0; text-align: center;">标题</h1>
</div>
<!-- 左边菜单部分 div 区块 -->
<div id="menu" style="background-color:#FFD700;height:200px;width:300px;float:left; font-size: 15px; text-align: center;">
<p>菜单</p>
<p>HTML</p>
<p>HTML div</p>
<p>HTML span</p>
<p>HTML 区块</p>
</div>
<!-- 右边内容部分 div 区块 -->
<div id="content" style="background-color:#EEEEEE;height:200px;width:500px;float:left; font-size: 15px; color: blueviolet;">
内容部分, xxxxxxxxxxxx
</div>
<!-- 下边页脚部分 div 区块 -->
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
页脚
</div>
</div>
<hr />
<p style="font-size: 20px;">table 实现文档布局:</p>
<table width="800" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500; text-align: center;">
<h1>标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;height:200px; width:300px; font-size: 15px; text-align: center; vertical-align:top;">
<p>菜单</p>
<p>HTML</p>
<p>HTML div</p>
<p>HTML span</p>
<p>HTML 区块</p>
</td>
<td style="background-color:#EEEEEE; height:200px; width:500px; font-size: 15px; color: blueviolet; vertical-align:top;">
内容部分, xxxxxxxxxxxx
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500; text-align:center;">
页脚
</td>
</tr>
</table>
</body>
</html>框架
通过在 html 中使用框架，我们可以在同一个浏览器窗口中显示不止一个页面。如：
我们可以认为菜鸟教程的首页页面中，右边绿框部分就是使用了框架。点击左边红框中的不同选项，其所包含的内容均会显示在右边的绿框中。这正是框架的好处，避免了网页来回跳动带来的影响。
框架的使用其实很简单，使用 <iframe> 标签去定义一个默认大小的带边框的框架，其默认大小为 300 * 150。
<p>默认的框架:</p>
<iframe name="iframeWithBorder"></iframe>
<p>默认的框架是带有边框的、且大小为 300 * 150.</p><iframe> 标签的 name 属性设置当前框架的名称，当然也可以通过 style 属性来设置框架的背景色等样式，也可以通过 weight 和 height 属性来指定框架的大小，设置 frameborder="0" 可以创建一个没有边框的框架。示例：简单实现一个类似于菜鸟教程首页的页面。
<div id="container" style="height:500px; width:100%;">
<!-- 左边目录部分 div -->
<div id="left" style="background-color:#ecdab8; height:100%; width:20%; float:left;
text-align: center; font-size: 20px;">
<p>
<a href="https://www.runoob/" target="iframe_a" ">首页</a>
</p>
<p>
<a href="https://c.runoob/" target="iframe_a">菜鸟工具</a>
</p>
<p>
<a href="https://www.runoob/w3cnote" target="iframe_a">菜鸟笔记</a>
</p>
</div>
<!-- 右边内容部分 div -->
<div id="right" style="height:100%; width:80%; float:left; background-color: bisque;">
<iframe src="base.html" name="iframe_a" height="100%" width="100%" frameborder="0"></iframe>
</div>
</div>整个页面由两个 div 组成，对应着菜鸟教程首页的左右两部分，右边的 div 中创建了一个名为 iframe_a 的不带边框的框架，默认展示页面为 src 属性指定的 base.html。同时在左边的 div 中创建了三个 <a> 标签，每个 <a> 标签的 target 属性设置为"iframe_a"，即指定每个 <a> 标签所链接的内容在框架 iframe_a 中打开。于是便实现了框架的作用，也完成了和菜鸟教程首页类似功能的页面。
全部代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 框架示例</title>
</head>
<body>
<p>默认的框架:</p>
<iframe name="iframeWithBorder" style="background-color: rgb(101, 107, 146);"></iframe>
<p>默认的框架是带有边框的、且大小为 300 * 150.</p>
<!-- 容器 div -->
<div id="container" style="height:500px; width:100%;">
<!-- 左边目录部分 div -->
<div id="left" style="background-color:#ecdab8; height:100%; width:20%; float:left;
text-align: center; font-size: 20px;">
<p>
<a href="https://www.runoob/" target="iframe_a" ">首页</a>
</p>
<p>
<a href="https://c.runoob/" target="iframe_a">菜鸟工具</a>
</p>
<p>
<a href="https://www.runoob/w3cnote" target="iframe_a">菜鸟笔记</a>
</p>
</div>
<!-- 右边内容部分 div -->
<div id="right" style="height:100%; width:80%; float:left; background-color: bisque;">
<iframe src="base.html" name="iframe_a" height="100%" width="100%" frameborder="0"></iframe>
</div>
</div>
</body>
</html>本文参考自：HTML 区块 | 菜鸟教程
HTML 布局 | 菜鸟教程
HTML 框架 | 菜鸟教程
更多推荐
HTML 区块、布局与框架
发布评论