第二篇 用HTML和CSS语言写静态Web页代码
时间：2023-09-26 08:48:02 | 来源：网站运营
时间：2023-09-26 08:48:02 来源：网站运营
第二篇 用HTML和CSS语言写静态Web页代码：
Web，也是人们对 “ World Wide Web ”的简称，理解Web并不容易，我们在前一章对Web和互联网的概念进行了阐述，了解到这二者互为软硬件的关系。把Web看作是基于全球互联网的一个标准的信息平台，对大多数人而言这样的We很抽象，但是，如果我们可以把Web看作联入互联网计算机内的所有Web页或文档（document）的集合，理论上，人们也可以通过互联网技术共享分布在这个集合里的的所有数字文档。这样理解Web，或许就比较具体了。
世界上第一个Web页由Web的发明者——蒂姆••伯纳斯•李爵士（Tim Berners-Lee）设计制作，这个Web页的内容是一篇划时代的文章，关于他对Web的构想和实现方法。
世界上第一个Web页，尽管只有文字，其中既没有没有图片、也没有任何其他媒体信息，但没有谁会否定这个Web的价值，它的价值就在于文档的内容。
今天的人们使用Web，相当大的程度也是获取自己最关心的信息，这些信息的形式有文本、图片、音视频、软件互动界面等，我们把这些信息统统称之为“内容”（content）。
当然也有很多人们对信息的外在形式和外观非常在意，而人们根本关注的是信息的内容，这就是我们经常说的“内容为王”。
HTML语言，也称超文本标记语言，这是我们编写Web内容的语言，了解HTML语言对于使用Web语言编程是至关重要的，而学习HTML语言也是Web语言中最容易的。因此我们下面用三节篇幅，通过一些概念整合和案例，快速让读者掌握这个语言的使用。
2.1 HTML元素和Web页
HTML的元素（element），在编写HTML代码时我们也称之为标记，当我们使用这些标记编写HTML代码并运行时，就可以在计算机的Web页中产生元素对象，所有这些元素对象，其内容组合起来，就可以实现用HTML语言描述Web页内容。
HTML这个简单语言包含有一百多个这种基本的“词汇”，但常用的也就几十个，这些标记在Web内容中创建的则是元素（element），元素是HTML语言来组织编写的Web页的基本单位。
用HTML语言组织Web页是非常简便的，这个过程非常类似孩童时学习口语过程。我们发现，二三岁的孩子天生就有学习口语的能力，他们没有什么顾虑，非常直接，就靠说出合适的词汇来代表表达的内容，我们在初次编写Web程序的HTML部分时，也与孩童学口语时表达词汇类似，即选择HTML语言的合适词汇（也称为标记或元素）来代表要表达内容。
比如 : <p>How are you ! </p>
这条HTML语句的基本标记是 <p>和</p> ， p是英文paragraph（段落）的缩写，在HTML语言中（利用特殊字符 “ < ” 和 ” > ” 打上标识后）字符p也就代表了段落元素，即<p>和</p>，则是HTML语言表达的、可以被计算机可以区分和识别Web内容。
一、HTML元素的基本结构
HTML标记的书写的基本形式，根据元素是否为容器，可分为以下二种形式：
形式1：<tagName 属性1=“……” 属性2=“……” > 内容 </ tagName >
或
形式2：<tagName 属性1=“……” 属性2=“……” >
对上面的标记的基本形式稍作分析：英文符号 < 和 > 是标记的关键字，初学者切不可误输入相应的中文符号。可用的tagName 、 属性1、属性2等都是HTML语言的保留的英文单词的缩写形式，成为标识符，如果我们对这些保留标识符的输入错误，也不会产生错误反馈，这些错误将被浏览器给忽视。
这二种创建元素的方式的形式1会产生稍微复杂的结构，因为标记内可能还包含其他的标记，形成俄罗斯套娃那样的结构，这点我们值得未来去仔细探索。
当前我们只考虑一个标记只会在Web内容中产生一个元素，在我们书写HTML语句时，可以从HTML语言提供的一百多个元素中去“选择“，不同元素表述不同的语义，这样也就实现了Web页的基本语义表达。
比如，在Web页中我们需要表达一句总结性的观点文字，这也是我们汉语常说的“ 标题 “，而英文的含义则为“ title “。这时标准的做法，我们会把这句总结性的观点文字，写在HTML语言的title 元素中，而不是随意写在Web页的其他元素中。这样，我们就算用HTML语言合适的标记（title）准确表达了Web内容（内容总结的标题）的语义。
二、构成Web页的最基本的HTML元素（代码）结构
HTML语言围绕“语义“表达，经过近二十年的版本演化，终于在HTML5版本时，确定了Web页的HTML代码的基本结构，列出如下：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"><title> 最初出现的内容——Web页的标题
</title> </head> <body> Web页的内容
</body></html>今天我们使用包含HTML代码编写的代码工具，可以自动产生上述源代码结构（粗体表示）。在此结构基础上，按Web页内容设计的需要，我们则继续使用HTML代码书写的其他内容即可（斜体表示）。
上述HTML语言表达的Web页基本结构，每一条代码都有具体含义且非常重要，下面我们一一简单描述：
<!doctype html> “ doctype ” 的英文全称为document type ，这条语句表明本文件是采用HTML5标准编写的源文件。
HTML5标准的语言学习使用虽然非常简单，但这是使用层面的表象，实际上HTML5标准的内涵非常丰富，包括了我们后面学习的CSS脚本语言和JavaScript程序语言。HTML5标准是一个被全球广泛支持的Web应用标准体系，互联网网络社区和计算机业界经历了近二十年的漫长和探索努力，才基本实现了这个标准，也获得了行业的广泛支持。
<html lang="en">和</html>一对html标记（tag），包含了所有Web代码的内容，这个元素代表了当前Web文档本身。请注意，html元素是Web语言的最外层的一个元素。
<head>和</head>一对head标记（tag），包含了归属于“头部”的Web代码内容，这个元素是Web文档最主要的二个元素之一，另一个元素当然是body 。如果把html比喻成一个人，则head和body则正好是这个人的头和身体。head元素中的html语句一般都是设置和规划性的内容，而body元素中的html语句则表现的大多数Web页实际需要显示的内容。
<meta charset="UTF-8">注意，这条meta元素是写在head元素之内的，且这条语句没有</meta>结束标记。该语句的内涵，我们会在后面陆续介绍，当前只要理解这条HTML语句设置了Web文档的编码标准，即国际通用字符编码Unicode体系的"UTF-8"。
这条meta语句必须作为Web页的基本结构，因为Web代码或数据的本质上是文本字符，而文本字符的在计算机中必须使用统一的数字编码，否则全球的Web上的代码和信息就会无法沟通，不同地区的Web页和浏览器会发生鸡同鸭讲的情况，这也就是二十年前网络世界常发生“乱码”的缘故。
<title>和</title>需要注意，title元素也是写在head元素之内的，title元素表达的语义是信息的结构，而非写在body内的内容。
<body>和</ body>body从语义上看，用来表达Web页的可见的“身体”，也就说出现在Web页的内容，都必须全部写在body元素内。
2.2 构建Web页基本的语义结构
上一节介绍Web页的基本元素结构，这些结构定义了Web信息的“骨架”，我们大致了解分成head和body二个部分，正如同一个人体那样，大致分为头部和身体。在Web页的头部内部，我们当前只要知道简单的title元素和特殊的<meta charset="UTF-8">元素（这个话题会在后面专门涉及）。而在Web身体内部，本节我们将要使用一些常用的HTML语义标签，定义出Web页的内容，构建Web页基本的语义结构。
一、用经典的“Hello world!”理解标签和属性
所有程序学习的第一步都是打印“hello world”，我们也不能免俗。下面举例，在body元素内，我们增加一个h1元素，用“h1 ”这个最常见的语义标签，即一号标题字（headline）输出文字。再通过更改body元素的属性，实现黑底白字的内容。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示HTML语言的基本结构、HTML标记的属性</title>
</head>
<body bgcolor="black" text="white">
黑色背景色，白色文字色。
<h1>
Hello world!
</h1>
</body>
</html>
代码在浏览器的运行效果如下：
我们通过二条简单的HTML标签，在浏览器中创建了二个有特色的元素。一是针对body元素作为Web页的身体，通过改变body元素的text属性和bgcolor属性，让Web的颜色和背景色发生了变化。二是通过h1元素创建了占据单独一行空间的标题——“Hello World”文字，实际上，我们可以把h1改为h2、h3……h6，这六个标签都是语义一样，表示不同级别的标题元素。
我们还发现由h1元素控制的“Hello World”文字也发生了颜色变化，从代码结构（body元素是h1元素的父级），我们可推断，设置在父级级元素的属性也许会遗传给子级元素。
二、通过p标签和br标签来理解容器元素
也许你会发现，HTML元素的标签写法有二种：有些元素既有开始标签，又有结束标签，比如我们前面使用的h1、h2、……h6标题元素的标签。而有些元素只有开始标签，没有结束标签，比如meta元素的标签。前一类标签，我们称之为“容器”元素，因为这些元素可以包含其他元素，或者说这些元素可以作为父级元素。后一类没有结束标签的元素，我们暂且称之为非“容器”元素了。
下面我们使用的p标签，可以在Web页上产生段落元素（yuansu） ，而br标签只能产生换行元素 ，二个元素从容器元素的角度看有区别。p是容器（container）元素，br却不能作为容器元素，也不存在br结束标签，下面的案例，以这二个元素为例，直观地让我们理解HTML标签是否具备容器特性。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示p标签和br标签，对比二者在换行格式上的区别</title>
</head>
<body bgcolor="black" text="white">
<p align="center">
三国演义开篇
</p>
滚滚长江东逝水，浪花淘尽英雄。<br>
是非成败转头空。<br>
青山依旧在，几度夕阳红。<br>
白发渔樵江渚上，惯看秋月春风。<br>
一壶浊酒喜相逢。<br>
古今多少事，都付笑谈中。
<p align="right">
——调寄《临江仙》
</p>
</body>
</html>
代码在浏览器的运行效果如下：
我们发现可以作为容器元素的p标签，内部包含了诗词文字，这些被包含的文字，从格式上受到了p元素的控制。从计算机信息的内部看，Web页上的这些p元素，也是一个个的内部对象，在这些对象中，嵌入了诗词文字信息。
而作为非容器元素的br标签，标签内部没有任何其他信息，只是单独执行一个特定的功能——换行，导致br标签后面的内容发生换行。
三、HTML元素之间的嵌套
前面介绍了p元素，其作为容器元素可以包含文字，其实这只是容器元素的最初级能力，下面我们介绍容器元素包含其他元素（也可以是容器元素），从语法上看有嵌套之意，我们就称为HTML元素之间的嵌套。用嵌套方式，HTML语言可以表达多层次的语义，比如前面的p元素和h1元素，正是嵌套在body元素之内。由于对我们而言，Web页的body是天然存在的元素，不是我们创建的，所以我们可能没有发现这个嵌套。
下面的例子，我们引入font标签，为文字设定字体属性，让p元素和font元素产生嵌套关系，同时尝试以下不同html元素之间，p作为段落概念和font作为字体的概念，在语义上的配合。代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示font标签对颜色和字体的控制，了解HTML标签间的嵌套</title>
</head>
<body bgcolor="gold">
<p align="center">
<font size="6" face="黑体" color="red">
三国演义开篇
</font>
</p>
<font size="5" face="楷体">
滚滚长江东逝水，浪花淘尽英雄。<br>
是非成败转头空。<br>
青山依旧在，几度夕阳红。<br>
白发渔樵江渚上，惯看秋月春风。<br>
一壶浊酒喜相逢。<br>
古今多少事，都付笑谈中。
</font>
<p align="right">
<font size="4">
——调寄《临江仙》
</font>
</p>
</body>
</html>
代码在浏览器的运行效果如下：
通过在p元素中嵌套font元素，我们既实现了对古诗文字的段落控制，也实现了对古诗文字的字体外观的控制。从语义看，p和font元素各司其职，对文字的功能
四、HTML源代码对多余空白符的忽略性
文本的空白符是指 空格、Tab、回车等字符，我们经常连续用这些字符来对代码的文本实现排版，以便让代码可读性更好，但程序运行时源代码中的多余空白符都会被忽略。HTML代码也有这个特性，比如下面的html源文件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
HTML语言对源代码的空白符。
</title>
</head>
<body bgcolor="gold">
<p align="center">
<font size="6" face="黑体" color="red">
三国演义开篇
</font>
</p>
<font size="5" face="楷体">
滚滚长江东逝水，浪花淘尽英雄。
是非成败转头空。
青山依旧在，几度夕阳红。
白发渔樵江渚上，惯看秋月春风。
一壶浊酒喜相逢。
古今多少事，都付笑谈中。
</font>
<p align="right">
<font size="4">
——调寄《临江仙》
</font>
</p>
</body>
</html>
我们用浏览器打开这个文件后，效果下图所示：
我们发现源码中，古诗正文中所有的空白符（空格、Tab、回车），只要超过2个以上，都被忽略了。浏览器在渲染内容时把连续的空白符在Ｗｅｂ页上只显示一个空格。浏览器这样解释空白符，与分析代码的源程序是类似的，为了让代码格式更符合我们的习惯，人们会用这些空白符对代码“排版”，但而计算机在解释这些源程序时，不需要这些多余的“排版”，编译或解释的系统只需要知道这些源代码种的连续空白，只相当于一个空格键即可。
五、HTML的注释
相对其他高级语言，HTML的注释元素似乎不太友好，不太好记忆。注释元素以 <!-- 开头， 以--> 结束，中间的内容用作注释文字。
像所有的高级语言那样，程序执行时碰到注释的开头后，浏览器会把注释结束符号之前的所有信息当作无需关心的信息。由于注释与源代码写在一起，所以我们务必要把结束符写正确，否则会导致有些代码被当作注释信息被忽略。
本节再增加介绍一个HTML水平划线的元素，简单好用，可以实现在浏览器画出水平线，这是一个非容器类型元素，在学习HTML语言的初期，这个标记在实现版面划分很有作用。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解hr标签的特征，学习HTML语言对源代码的注释语句写法。</title>
</head>
<body>
<hr color="red" size="5" width="30%">
1，hr标签用于绘制水平线
<!-- 插入了占页面30%宽度一条红色线 -->
<hr color="green" size="7" width="60%">
2，hr标签的多个属性，可以设置线的外观
<!-- 插入了占页面60%宽度一条绿色线 -->
<hr color="blue" size="10" width="90%">
3，hr标签没有结束标签
<!-- 插入了占页面90%宽度一条蓝色线 -->
<h1>浏览器不会显示以上3条注释！！</h1>
</body>
</html>
我们用浏览器打开这个文件后，效果图显示为：
我们上面这个案例没有具体的内容主题，只是为了演示注释、水平线标签的使用而已，初学者需要多尝试HTML元素的不同属性。
比如，在hr标签中，案例连续使用了color 、 size 、 width三个属性，用来控制hr元素的外观，可以让初次学习HTML语言的读者实际了解元素属性的写法和作用。
对于color属性的取值，使用了最为方便的英文单词形式。
再比如，对于水平线粗细的size属性取值，使用了几个数字，HTML语言比较简单，隐含了单位“像素”的概念。
最后，width这个属性可能在后面的学习中经常用到，它作为属性在其他元素中也常常有效。我们在本例用它来来设置水平线的宽度。尤其值得注意，本例中的width的取值，我们使用了百分比的形式，这样，我们可以动态地按浏览器宽度的百分比来设置水平线，这也是让Web页中的元素具备弹性的最基础的方法。
六、HTML的列表标记
信息的无序是无法忍受的，在HTML内容表达中，为了让信息更加有序表达，设计了列表元素，列表元素分成有序（ol）和无序（ul）二类，我们用案例演示如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解HTML的列表标签，有序、无序的概念和写法。</title>
</head>
<body>
<p align="center">地球生命种类</p>
<hr color="blue" size="2">
无序列表
<ul>
<li> 微生物 </li>
<li> 植物 </li>
<li> 动物 </li>
<li> 其他 </li>
</ul>
<hr color="red" size="2">
有序列表
<ol>
<li> 病毒 </li>
<li> 细菌 </li>
<li> 植物 </li>
<li> 动物 </li>
<li> 其他 </li>
</ol>
</body>
</html>
在浏览器中打开，上面的代码效果如下：
我们发现列表分成二个层次：外层由容器元素<ul>或<ol>控制，内层是<li> 控制，li作为列表元素，也是由容器元素。在网页排版中，导航栏的语义也经常使用无序列表控制。
七、用列表标记探索元素间的嵌套
整个Web页，可以看作由元素互相嵌套产生，比如最外层的html元素，就代表Web页本身。在Web页的body元素中，我们可以使用许多不同的元素，来构建Web页的清晰的语义。
下面案例中，我们可以同时使用有序列表和无序列表，把有序列表设置为父级容器，按数字次序把生命的三种形式排列出来，在每种生命形式的内部再使用无序列表举例。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解HTML的标签间嵌套和写法，以“列表标签”为例。</title>
</head>
<body>
<p align="center">地球生命三大种类</p>
<hr color="blue" size="2">
<ol>
<li> 微生物 </li>
<ul>
<li>病毒</li>
<li>细菌</li>
<li>藻类</li>
</ul>
<li> 植物 </li>
<ul>
<li>草本</li>
<li>树木</li>
</ul>
<li> 动物 </li>
<ul>
<li>鱼类</li>
<li>两栖类</li>
<li>鸟类</li>
<li>哺乳类</li>
</ul>
</ol>
</body>
</html>
在浏览器中打开，上面的代码效果如下：
从效果中，按照语义层次，浏览器可自动设定好了各列表层次的对齐方式。至此，我们还未使用任何设置HTML元素外观的语句（CSS语句），仅使用HTML默认的语义标签，也可较好地展现页面的外观。
八、HTML语言的字符实体
作为一门宏观语义的语言，有一些字符被HTML作为关键字使用，因此我们不能再Web页中直接输入该字符使用，比如“ < ” 和 “ > ” 这两个关键的标记符号，再比如空白键（多个空格、Tab、回车等）。另外，为了在HTML语言中表达一些键盘无法直接输入的字符，必须使用一种特殊的表达，来突破HTML标记表达的字符限制。
我们把在Web页中，表达不能直接在HTML语言输出的字符，称为HTML的特殊字符实体（Character Entities）的表达，这种表达有一个共性，就是使用符号 “ & ” 开头，连接一些英文单词。下面举例说明。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解HTML语言对字符的表达的局限性，学习常见字符实体写法 。</title>
</head>
<body>
<h2>
下面是HTML语言无法直接书写的，部分字符实体（Character Entities）
</h2>
<font size="6" color="#AA0000">
乘号 : ×
除号 : ÷
小于 : <
大于 : >
连接 ：&
版权 : ©
商标 : ®
</font>
</body>
</html>
在浏览器中打开，上面的代码效果如下：
2. 3 Web页内的常见的基本元素及其常用属性
除了前面一节介绍的表达文字的元素，作为Web页内容的常见组成部分，还有表达图像类型的元素、表达超级链接的元素等。在学习HTML时，并不需要把常用元素都介绍一遍，作为这些组成内容的元素，我们可以在写代码需要时，随时使用，随时查阅元素的基本写法和属性即可。
本节首先用案例演示了表达图像的二种方式，即作为元素嵌入和作为背景图像；然后介绍了文件字符集概念；最后以介绍Web超级链接概念和演示a元素使用作为结束。
一、外部图像、img标记和属性
我们编写的HTML代码以文件形式存在，而使用img元素嵌入的数字图像本身也是以文件的形式存在的。
使用img元素标签可以把图像文件嵌入HTML内容中，我们在下面用一个案例来作演示，案例使用了一个图像文件，文件名为： ” birds.jpg “ ，在最初的操作中，图像文件要放在和HTML文件同样的文件中。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解Web页与外部图像文件的关系，学习img标记的写法 。</title>
</head>
<body>
<img src="birds.jpg" border="1" width="100" >
<img src="birds.jpg" border="3" width="300">
<img src="bird.jpg" border="3" width="300" alt="演示：写错图片文件的URL">
<img src="birds.jpg" border="4">
</body>
</html>
本例中，对于同一张图像文件，我们使用img元素，将该图像一共四次嵌入Web页，而其中的第三次嵌入，我们在代码中有意写错属性值——文件名，效果如下图所示：
二、元素body背景图属性
在HTML标记中，body元素的background属性可以用来设置背景图，用这种方式嵌入的背景图与使用img元素嵌入的图像完全不同，前者是把图像作为背景，后者是把图像作为内容，前者的文字可以覆盖图片，而后者的文字与图片作为同等对象，相互间可以实现排版。
本例需要的背景图back.jpg ，与本html文件处于同一文件夹。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解Web页的背景图概念，学习通过body标记添加背景图写法 。</title>
</head>
<body background ="back.jpg">
<p align="center">
<font size="6" face="黑体" color="red">
三国演义开篇
</font>
</p>
<font size="5" face="楷体">
滚滚长江东逝水，浪花淘尽英雄。<br>
是非成败转头空。<br>
青山依旧在，几度夕阳红。<br>
白发渔樵江渚上，惯看秋月春风。<br>
一壶浊酒喜相逢。<br>
古今多少事，都付笑谈中。
</font>
<p align="right">
<font size="4">
——调寄《临江仙》
</font>
</p>
</body>
</html>
打开设置背景图的Web页后，我们发现body的背景图实现了重复贴图，小小的背景图在Web页的可视区域内在横向和纵向反复重复，完整地覆盖了整个body区域。而body区域的大小并未确定（我们以后可以使用CSS对此实现设置），其默认的尺寸与浏览器有关。
效果如下图：
三、html文件的字符集和使用meta标记进行设置
在现代的HTML文件的基本结构中，有一条非常重要的语句，就是写在head元素中的 <meta charset="UTF-8"> 。英文单词 meta的意义是 “元“ ，因此HTML语言设计了meta元素用来对一些最基础的情形进行设定。比如我们在本例中的字符集（charset）。
十几年前诞生的unicode编码，实现对全球文明的字符进行统一编码的理想。UTF-8是unicode编码家族中，在Web和代码世界中，普遍使用的编码技术。由于UTF-8编码的历史不长，比大多数编程语言都年轻很多，因此有些编程语言和编辑器按老习惯会导致错误设置。我们下面用一个案例对此演示一个经典的错误。
我们使用编辑器在存盘时，采用ANSI字符集，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
本文件存盘错误地使用了ANSI字符集，但在meta元设置中将字符集设为UTF-8。</title>
</head>
<body background ="back.jpg">
<p align="center">
<font size="6" face="黑体" color="red">
三国演义开篇
</font>
</p>
<font size="5" face="楷体">
滚滚长江东逝水，浪花淘尽英雄。<br>
是非成败转头空。<br>
青山依旧在，几度夕阳红。<br>
白发渔樵江渚上，惯看秋月春风。<br>
一壶浊酒喜相逢。<br>
古今多少事，都付笑谈中。
</font>
<p align="right">
<font size="4">
——调寄《临江仙》
</font>
</p>
</body>
</html>
使用错误的字符集导致页面效果如下：
在上面这个案例中，我们还是按HTML5标准，使用meta元素设定了本文件采用了"UTF-8"的编码标准。但实际上，在存盘时，我们人为选择了"ANSI"（美国标准编码）。通过仔细观察，我们可以发现，HTML文件中所有的字符，只要是英文字符，就能正确表达，而非英文字符，则发生乱码。
在Web页中，"UTF-8"的编码声明和实际存盘设置必须统一，特别对于一些传统的文本编辑器，其可能默认的编码方式很可能是"ANSI"，这种类似ASCII的编码是虽然可以表达非英语的文字字符，但会与我们在HTML文件结构中设定meta字符集不一致。
四、用html字符编码表达其他文化（非英语和中文）的字符
人类发明了文字，文字的最基本部分由字符构成，不同的文明会采用不同的文字，也就采用了不同的字符，自从unicode编码技术诞生以来，得到了很大的普及。Web也因此可以在一个页面中，同时显示二种以上文明的字符。
对于使用汉语字符的中国人来说，使用计算机的键盘和其他输入设备，稍作学习，就可以轻松地输入母语和英语字符。对于其他非英语的文明，也是如此，比如日文和泰文，也可以轻松地与英文同时混合使用。但是在同一个Web页中，能否使用二种以上非英文的字符呢？
下面这个案例演示同时显示的字符包括：汉文、拉丁文、日文、希伯来文。具体代码有点像字符实体的写法，使用 HTML的关键字 & 开头，再配合使用16进制的编码，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML语言直接用编码，书写其他文明的字符（非本国、非英语）。</title>
</head>
<body background ="back.jpg">
<p align="center">
<font size="6" face="黑体" color="red">
HTML语言用编码，来表达其他文明的文字
</font>
</p>
<font size="7" face="楷体" color="blue">
拉丁文：ßÞÛÜàáâ<br>
日文：あぃいぅうぇえ<br>
希伯来文：סעףפץצק<br>
</font>
</body>
</html>
用浏览器打开上面的html文件，效果如下：
地球上所有文明的文字字符超过十万个以上，其中英文字符一百多，汉字字符一万多，unicode标准也一直处于动态细化之中。文字符号的学习和理解要耗费大量时间，一般人有限的人生不可能认知二种以上的语言的文字，但从技术上理解文件字符的数字化却不难，我们可以对此有一定的了解，让web页面能在全球的浏览器系统中通用，关键的概念包括：字符全球统一编码的原理，编码的标准和名称等。
五、超链接、URL、a标记
Web文档本质上是一个计算机文本文件，在这个文件里面，我们用各种语义化的标记信息描述Web的内容。而通过Web的超级链接元素，我们可以使用简单a标记和属性，就可以实现从当前浏览的Web文档跳转到互联网或本地的其他资源，这个资源可以是一个URL网址，也可以是任何其他的计算机文件。
下面的案例把超链接的a元素作为容器，容器内部是网站文字名称，这样就实现了最简单的超级链接。代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标记和绝对URL</title>
</head>
<body>
<a href="
https://www.edu.cn">
教育科研网
</a>
<a href="
https://www.edu.cn" target="_BLANK">
CERNET
</a>
<a href="
https://mail.qq.com" target="_BLANK">
qqMail
</a>
<a href="
https://mail.qq.com">
进入QQ邮箱
</a>
</body>
</html>
用浏览器打开上述代码，页面效果如下所示：
教育科研网 CERNET qqMail 进入QQ邮箱
点击这些超级链接标记控制的文字，浏览器则会利用本机的http协议打开a元素的href属性指定的地址。增加了target="_BLANK"属性的浏览器则会为这个超链接地址增加一个新窗口，当前页面则保留在当前窗口。
2. 4 用CSS设置HTML元素的基本外观
为了让HTML和CSS这两种相对简单的语言尽快配合使用，同时增加写这两种代码的乐趣，本节我们就开始使用简单的CSS语言控制HTML元素，从而实现设置Web内容的外观。
让我们从一条基本的css语句的构成开始，为方便阅读，按习惯，我们多使用回车键，分多行书写，但请注意，浏览器其实是按一行来解释的。一条基本的css语句的构成如下：
选择符 {属性1 : 值1 ; 属性2 : 值2 ; …… }在第一行开头的是CSS选择符（selector），为何称之为选择符？大概是CSS使用这个文字来抽象表示Web页的那个或那些元素对象，也相当于我们使用CSS语句去选择Web页的对象。
花括号（ { } ）的开始和结束中的称为CSS声明块（declaration block），我们用这些声明是为Web页的元素对象设置个性化新的外观。
CSS声明块（declaration block）可以由许多语句组成，每条语句结束的位置要用“ ; ”（分号）隔开，单独工作。每条语句则由属性名（property）和属性的取值（value）组成，属性名和属性值之间用“ : ” 隔开。
一、CSS语言快速为a标记设定外观
a元素作为超级链接，有着默认的外观。一般Web设计者都会按风格更改，使用CSS可以非常有效地改变页面中超级链接的样式。
CSS的书写非常自由，我们以a的个性化外观定义开始理解CSS的语法模式。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用CSS语言，控制链接外观</title>
<style type="text/css">
a{
font-size:25px;
color:white;
background-color:blue;
margin-right:50px;
}
</style>
</head>
<body>
<a href="
https://www.edu.cn">
教育科研网
</a>
<a href="
https://www.edu.cn" target="_BLANK">
CERNET
</a>
<a href="
https://mail.qq.com" target="_BLANK">
qqMail
</a>
<a href="
https://mail.qq.com">
进入QQ邮箱
</a>
</body>
</html>
运行上面的代码，页面的效果如下：
本例关键的代码为：
<style type="text/css">
a{
font-size:25px;
color:white;
background-color:blue;
margin-right:50px;
}
</style>
为Web页设置CSS语句的通常做法：将style元素设置在HTML文件的head元素中。style元素是HTML的容器元素之一，其中的内容则是一种比HTML语言丰富许多的语言——CSS语言。我们在后面会快速地介绍这种表达Web页外观的语言的使用。
本例使用的属性名：font-size、background-color、margin-right，其英文含义和作用比较简单，无须浪费篇幅介绍，强调大家通过编写代码，手动更改属性值，来直观地感受字符大小的单位，颜色的书写等等。我们发现，CSS的属性名一般是二个英文单词组合而成，中间使用减号“ - “实现二个单词连接。对于写错的属性名，浏览器的CSS解释器会忽略本条错误的CSS语句。
二、HTML的表格元素
表格是使用频繁的数据格式，HTML语言为表格设定了table元素，这个元素是容器元素，表格的一般由行列组成，在table元素中，子元素是行——tr元素，tr元素也是容器元素，tr的子元素是表格单元——td元素。从英文表达上看，table是表格之意，tr则是table row的缩写形式，td则是table data之意，也表达了表格内最底层的信息是数据（data）之意。
另外，有些表格可以设定一种特殊的行——th，这一行内的文字格式默认被设为粗体，th是英文 table header的缩写形式。
下面我们创建一个表格，该表格共四行，每行包含三个表格单元，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解HTML的表格有关标记</title>
<style type="text/css">
body{
font-size:25px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr>
<td>第1名</td>
<td>第2名</td>
<td>第3名</td>
</tr>
<tr>
<td>第4名</td>
<td>第5名</td>
<td>第6名</td>
</tr>
<tr>
<td>第7名</td>
<td>第8名</td>
<td>第9名</td>
</tr>
</table>
</body>
</html>
用浏览器打开上述代码构成的html文件，我们发现表格在未设定外观的情况下，也即默认样式，效果如下图左所示，使用鼠标拖选，可以看出的确有数据格的感觉，如下图右所示：
正常显示如下： 反选显示如下：
在表格开始的HTML元素位置，我们使用th作为表头，而没有使用td，特别值得注意，代码中还使用了colspan 这个属性，该属性用于多个列的单元格合并，对这个属性赋值3，正好将我们表格每行的3个单元格合并。这个HTML代码片段需要特别注意：
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr>
另外，相对rowspan 属性，该属性用于多个行的单元格合并，在具体的使用中，需要我们有很强的空间抽象能力，或者配合纸笔画画，一般要把合并前的规则表格和合并后的表格，做出对比，才可以决定代码如何写，写错了HTML表格将变得莫名其妙，也没法使用。也许借助一些工具可以解决这个问题，但需要强调的是：学习代码同时要训练抽象思考的能力，既然现在就有训练抽象思维的机会，轻易借助工具会让我们的头脑变懒。
三、用CSS为HTML的表格元素设定外观
HTML的表格内容较多，必须使用CSS才能高效、方便地控制表格的样式。
比如，下面我们只需要在style元素中，对表格元素少数几个有关的标记选择器，设定样式，就可以实现对表格的外观统一的风格进行设置，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用CSS修饰HTML表格的外观</title>
<style type="text/css">
body{
font-size:25px;
}
td{
border:1px solid blue ;
width:200px;
text-align:center;
}
table{
border:2px solid black ;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr>
<td>第1名</td>
<td>第2名</td>
<td>第3名</td>
</tr>
<tr>
<td>第4名</td>
<td>第5名</td>
<td>第6名</td>
</tr>
<tr>
<td>第7名</td>
<td>第8名</td>
<td>第9名</td>
</tr>
</table>
</body>
</html>
用浏览器打开包含上面的代码HTML文件，效果如下图所示：
关键css代码解释如下：
body{
font-size:25px;
}
对table元素的父元素body，设定基础字体为25px（像素）大小。这样对于子元素table，以及table下的子元素th、tr、td等，都会继承这个字体大小的属性设置。
td{
border:1px solid blue ;
width:200px;
text-align:center;
}
为表格每一个数据单元格设置蓝色边框，边框设置为1px（像素）、实线模式。
将td的宽度设为200像素，这样3个并排的表格td，会占据600像素的宽度，加上6条边框，共计600 + 6 ，也即606像素的宽度。
table{
border:2px solid black ;
}
为最外层的表格table元素设定黑色边框，也是实线模式，但宽度设为2px（像素），这样设定后，整个表格宽度可计算为： 200乘3 加 6乘1 加 2乘2 。在实际的CSS编码时，对于我们编码者，开展这种精确的计算并不重要，但需要知道CSS排版样式的规则和原理。
另外，对于父级属性是否会被继承的问题，我们也会发现，对于父级（比如table）的边框属性的设定，并不会遗传给子元素，而在父级元素内设定字体和对齐属性样式，则会发生遗传情况，子元素会发生继承现象，比如td会继承table元素或body元素的text-align属性设定。
四、初识CSS的盒装模型
不管是在PC屏幕还是手机屏幕上，尽管大小和长宽比例不同，Web浏览器都是一律用二维平面来显示页面内容，我们也早已习惯在这种平面的方式获取信息。同样，组成Web页内容的HTML元素也都是以“矩形盒子“的形式存在，这些元素有的是容器，像一个大盒子，内部装着其他元素（小盒子）。
HTML语言利用这种元素嵌套描绘出来一个盒子套盒子的模式，Web页每个元素盒子通过CSS的属性，可以相互影响，形成Web页最终渲染的效果，这就是CSS的Box Model（盒装模型）。
我们下面以table这个父级元素和其子级th和td的样式为例，验证简单的CSS盒装模型（Box Model）情况，也就是说table是一个box，table中的tr、th、td都是一个盒子（bo x），为了看清楚这些盒子，我们使用css语句为盒子们设置的边框样式。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>尝试CSS常用语法和属性</title>
<style type="text/css">
th,td{
border:1px solid blue ;
text-align:center;
font-size:30px;
}
table{
width:600px;
height:500px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr>
<td>第1名</td>
<td>第2名</td>
<td>第3名</td>
</tr>
<tr>
<td>第4名</td>
<td>第5名</td>
<td>第6名</td>
</tr>
<tr>
<td>第7名</td>
<td>第8名</td>
<td>第9名</td>
</tr>
</table>
</body>
</html>
用浏览器打开本Web页，效果如下图所示：
本例关键的代码是，在css样式中，设定了table元素的宽（width）和高（height）的属性，代码为：
table{
width:600px;
height:500px;
}
这样设定后，我们发现表格内部变得很宽松，整个表格将成为一个固定大小的盒子，与之前表格线与内部文字紧贴在一起不同。
通过这个例子，可以理解，表格在未设定其width 和height属性前，table元素盒子大小是不固定的，内部子元素的大小将决定table的大小。
Web页内容的主要父级元素body，同样存在大小不固定的情况，因为在不同的终端上，浏览器可以显示Web页的空间肯定也是不同的。在学习CSS样式设计的初期，我们可以简单地为body设定其width 和height属性,方便我们对Web页和这个最大盒子的控制和理解。
最后，为了看清盒装模型的边界，我们组成表格最基层的元素，th和td设置了盒装模型最外层的边框线，同时设定了文字的中间对齐等，代码如下：
th,td{
border:1px solid blue ;
text-align:center;
font-size:30px;
}
五、CSS的类设置
前面的CSS中语句中，我们使用了标记选择器来作选择，本例增加一种常用CSS选择器，类选择器，顾名思义，这样，我们就可以在CSS语句设置中，为Web页元素的样式增设一个特定类型。比如我们在样式表中，设定了一个名为blueBack类的样式，那么在HTML的元素书写中，就可以直接将某些HTML元素设定为这个样式，增加属性：class = “blueBack “ 即可。
我们继续上一节的案例，用CSS类的定义和使用，为表格隔行设定不同的背景色。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的颜色属性的继承特性</title>
<style type="text/css">
th,td{
border:1px solid blue ;
text-align:center;
font-size:30px;
}
table{
width:600px;
height:500px;
}
.gray{
background-color:gray;
color:yellow;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr class="gray">
<td>第1名</td>
<td>第2名</td>
<td>第3名</td>
</tr>
<tr>
<td>第4名</td>
<td>第5名</td>
<td>第6名</td>
</tr>
<tr class="gray">
<td>第7名</td>
<td>第8名</td>
<td>第9名</td>
</tr>
<tr>
<td>第10名</td>
<td>第11名</td>
<td>第12名</td>
</tr>
</table>
</body>
</html>
用浏览器打开上面的代码，效果如下图所示：
本例类选择器的声明，采用了最通用的类语法形式，就是以小数点开头，紧接着写类名，比如代码为：
.gray{
background-color:gray;
color:yellow;
}
相应地，在body中，使用该类的tr行元素，必须增加相应的class属性，代码为：
<tr class="gray">
……
</tr>
另外，本例中，类选择器写为： tr.gray{…… }，效果也是完全一样的，但这种写法具体只有元素tr中的声明了类gray才被选择。若页面中有<h1 class = “gray “>的元素，类选择器写为tr.gray{…… }则不会选择h1元素，但.gray{…… }则是通用的，不会受具体某个元素的限制。
六、HTML元素的嵌套和CSS的设置
用HTML语言我们可以层次清晰地·表达出Web元素的内容，定义盒子之间的关系层次。而使用CSS语言，我们可以独立地设置Web元素组成的盒子的外观样式，当然这些样式也存在盒子之间的继承关系。大体上，二套语言体系分工合作，互不干扰。
为了让这两套语言互相配合，需要在HTML的body中做好元素父子层次的设置，同时在CSS的选择器上做好对应，CSS选择器可以写出盒子元素的层次。
下面我们仍然使用前面的表格，为td表格单元内嵌入子元素img，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css处理颜色背景，统一表格和图片的尺寸</title>
<style type="text/css">
th,td{
text-align:center;
font-size:30px;
background-color:black;
color:white;
}
th{
height:80px;
}
table{
width:600px;
height:500px;
}
img{
width:200px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr>
<td><img src="images/fbs-1.jpg"></td>
<td><img src="images/fbs-2.jpg"></td>
<td><img src="images/fbs-3.jpg"></td>
</tr>
<tr>
<td><img src="images/fbs-4.jpg"></td>
<td><img src="images/fbs-5.jpg"></td>
<td><img src="images/fbs-6.jpg"></td>
</tr>
</table>
</body>
</html>
用浏览器打开，Web页如下图所示：
为了让不同的图片尺寸完全匹配页面，我们在CSS中统一设置了图片的width属性，显然在Web元素体系中，img图像也是符合盒子模型的。代码如下：
img{
width:200px;
}
为了让标题更协调，我们用CSS调大了表格的th元素的高度，让标题性文字周边的空间不那么拥挤。代码为：
th{
height:80px;
}
在每一行的td元素中，我们嵌入了img元素，读入本Web页文件同一层此的目录images下的外部图像文件，HTML相关代码部分如下：
<tr>
<td>
<img src="images/fbs-1.jpg">
</td>
……
</tr>
img元素是非容器元素，一般被嵌入父级容器（比如div）之中，若父级元素的尺寸过小，或者img尺寸过大，则会发生父级容器被“撑大“的现象，造成Web页既定的排版效果混乱。我们可以使用CSS语句为图像设定固定width属性，就可以为Web页的插图设定的合适尺寸。
对于外部图像而言，其分辨率是确定的，我们使用CSS改变img元素的width或height属性，都可以改变让图像嵌入Web页内分辨率，改变一个维度的分辨率（比如width），浏览器会自动计算另一个维度的分辨率（比如height）。保证图像嵌入Web页后，保障图像内容的纵横比。
因此在CSS设定img元素时，我们最好不要同时改变width和height属性，不通过精确计算，我们写的参数是无法保证图像保持原始的比率的。如果我们通过精确计算，得到了width或height属性的数值，同时得到的这2个数值也是没有意义的，因为浏览器会配合CSS对img元素一个属性的设置，而自动实现对图像另一个属性的精确计算。
七、CSS对超链接伪类的设置
我们使用a元素实现在Web页内设置超级链接，a元素添加到Web页后，在没有任何CSS设定条件下，其实具备系统默认的颜色。
我们前面通过对a元素设定CSS声明，改变超链接的外观样式。但这种改变还不够，CSS对超链接有着更加强大的功能，使用伪类，为a元素与人操作实现了动态效果。
下面我们继续为每个嵌入表格单元格的img元素，增加一层a元素，注意，a也是容器。这样我们就实现了上例中，每个单元格内的图片可以被点击的功能。
然后，我们在CSS中，使用CSS的超级链接伪类，动态改变用户使用鼠标与超链接互动的效果。代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片用作超链接，超链接的css伪类特效</title>
<style type="text/css">
th,td{
text-align:center;
font-size:30px;
background-color:black;
color:white;
}
th{
height:80px;
}
table{
width:600px;
height:500px;
}
img{
width:120px;
border:2px solid white;
}
a:link{border:5px solid ;}
a:visited{border:5px solid gray ;}
a:hover{border:5px solid yellow ;}
a:active{border:5px solid red ;}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr>
<td>
<a href="images/fbs-1.jpg">
<img src="images/fbs-1.jpg">
</a>
</td>
<td>
<a href="images/fbs-2.jpg">
<img src="images/fbs-2.jpg">
</a>
</td>
<td>
<a href="images/fbs-3.jpg">
<img src="images/fbs-3.jpg">
</a>
</td>
</tr>
<!—为避免类似代码重复，……代表类似的超链接和插入图片代码 -->
<tr>
<td>……</td>
<td>……</td>
<td>……</td>
</tr>
</table>
</body>
</html>
用浏览器打开包含上述代码的HTML文件后，用鼠标指向第二个人物，Web页的效果如下图所示：
当我们移动鼠标指针时，会发生鼠标和图片之间有互动的效果，这种动态效果，就是CSS的超链接的伪类代码实现的，关键CSS代码如下所示：
a:link{border:5px solid ;}
a:visited{border:5px solid gray ;}
a:hover{border:5px solid yellow ;}
a:active{border:5px solid red ;}
我们发现，鼠标与控制超级链接元素—— a互动时，存在四种状态：1、当用户没有动鼠标时，Web页上所有a标签的样式，将遵守在a:link中的设置 ； 2、当用户点击了Web页上的某个超链接后，相当于Web页的这个超链接已经被用户访问过了，这种被点击过的链接的样式，将遵守在a:visited中的设定； 3、当用户移动鼠标指针到a元素代表的链接上是，a的样式则会动态变化到a:hover伪类设定的样式，而当用户鼠标离开a元素范围后，a则会恢复原样。4、当用户点击a元素代表的链接的那一刻，a元素只在片刻（1秒左右）采用a:active设定的样式。
值得注意的是，四种状态的伪类： a:link 、a:visited 、 a:hover 、 a:active在CSS中定义的顺序不能改变，否则这种动态超链接效果就会不正常。
我们发现，用Love/hate(爱/恨)可以轻松记住这个书写顺序。其中： link –> （l）ove 、visited–> lo（v）e ，link和visited这两个单词代表love。 而 hover –> （h）ate 、 active –> h(a)te ， hover和 active这二个单词代表hate。
而事实上，如果我们用程序运行顺序的思维加以分析，就可以理解这四种状态的书写顺序了。对于超级链接元素的渲染，其实就是浏览器根据情况按顺序选择执行这4个语句块。
a:link状态是超链接首次被渲染的外观，如果浏览器发现这个已经超链接已经被访问，则使用下面的程序a:visited进行渲染。如果浏览器当前发现这个超链接正在被鼠标指针触及，则使用a:hover内的代码渲染，最后不管超链接处于那种状态，只要发生什么用户点击，则使用最后的a:active内的代码进行渲染。
由于这个例子我们使用a元素作为容器，内部内容为图片，超链接4个变化的只是图片的边框，效果虽有，但并不太明显。需要练习的读者可以尝试使用文字作为a容器的内容，使用背景色的变化体现超链接的4个状态，效果则会更加明显。
八、区分内联元素和块元素
从HTML元素是否占据页面的整行，并有换行效果来看，我们可以把HTML元素分成二类，一类是内联（inline）元素，另一类是块级（block）元素。
内联元素，比如a、span、img、font等，这些元素会和其他文字或元素连在一起，只要父级容器提供宽度足够，就不会发生换行现象。而块级元素，比如p、h1、h2、div、ul、ol等，这些元素会独立占据父级容器提供的宽度，在排版时，不会与其他元素在一行中并存。
从语义上看，块级元素都是重新开启一个新的内容，比如新建一个段落文字，而内联元素一般都是原有内容的继续，比如下一个超级链接内容。HTML语言为元素设定了内联元素和块级元素的初始状态，而CSS语言可以对此进行更改。
使用块级div元素作为容器排版是一种习惯，下面我们也使用div元素，为Web页设定3个区域，再使用图片插入后面二个div元素管理的区域，探索块级div对排版的设定，以及img元素的内联元素的特性，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联（inline）元素和是块级（block）元素</title>
<style type="text/css">
img{
width:150px;
border:2px solid black;
}
</style>
</head>
<body>
<div>
图片虽是块状，但其实图片是内联元素。
</div>
<div>
<img src="images/fbs-10.jpg">
<img src="images/fbs-9.jpg">
<img src="images/fbs-8.jpg">
<img src="images/fbs-7.jpg">
</div>
<div>
<img src="images/fbs-6.jpg">
<img src="images/fbs-5.jpg">
<img src="images/fbs-4.jpg">
<img src="images/fbs-3.jpg">
</div>
</body>
</html>
用浏览器打开包含上述代码的HTML文件后， Web页的效果如下图所示：
我们可以动态调整浏览器窗口宽度的大小，感受div作为块级区域对浏览器窗口宽度的控制。
2. 5 在Web页嵌入音视频
Web作为平台，用一套高效标准的连接了开发者和使用者，，而Web的HTML5标准更是增加了许多现代的Web应用接口，为开发者提供了方便，本节我们尝试用HTML语言的HTML5标准新增的标记，简单地结合CSS，创建可以播放音视频的Web页。
一、利用HTML5标准，简单地为Web页嵌入音视频
自从上世界90年代，有个人电脑和应用软件以来，开发者就非常难以实现在软件中嵌入音视频，并实现播放控制。长期以来造成这种困难有二个原因，一是音视频的数字化没有统一标准，各种压缩技术和版本让用户使用专业的软件播放音视频都有困难，在应用软件中就更加困难了。二是在一个软件应用中实现音视频的解码，对音视频数字化的专业知识掌握和编有关码难度也不是普通开发者能够企及的。
HTML5的标准的出现让解决问题看到了希望，Web世界在近十年对这个标准的应用中，既推动了Web视频标准，还实现了简单地使用HTML标记，就可在Web页中嵌入和控制音视频的功能。
下面案例示范用video标记元素嵌入和播放mp4类型的视频文件，用audio标记元素嵌入和播放mp3类型的音频文件，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何简单地播放声音和视频文件</title>
<style type="text/css">
</style>
<script type="text/javascript">
<!--
alert(navigator.appCodeName+ "/n" +navigator.appVersion);
//-->
</script>
</head>
<body>
<div>
<!--下面音频不保证能在你的浏览器中播放，有的浏览器不支持mp3 -->
<audio src="medias/myAudio.mp3" controls>
</div>
<div>
<!--下面视频频保证能在你的浏览器中播放，多数浏览器支持mp4 -->
若网速限制，很可能无法加载视频，请这样处理：
<a href="medias/myvideo.mp4">
点击鼠标右键，选择另存为，把视频下载到本地 。
</a>
<video src="medias/myvideo.mp4" controls>
</div>
</body>
</html>
时至今日，仍然有些厂家的浏览器对某些音频或视频无法支持，下面的截图，演示了早期的fireFox浏览器无法播放mp3音频文件（这是个非技术问题，源于专利问题）的情况。
而对于mp4视频文件，当代浏览器都可以较好支持，浏览器fireFox11.0运行效果如下图所示：
接着使用谷歌的chrome浏览器，则播放上例代码的视频和音频没有问题，运行效果如下：
对于当前浏览器的基本信息，学习者可以用JavaScript进行输出，比如本例Web页打开前，使用JavaScript的alert语句，用弹窗的形式，把浏览器的引擎名称和浏览器的引擎版本进行了输出。
代码如下：
<script type="text/javascript">
<!--
alert(navigator.appCodeName+ "/n" +navigator.appVersion);
//-->
</script>
没有学习过JavaScript语言的读者不用担心，只要简单地对理解3个英文单词即可：在JavaScript语言中，navigator代表是浏览器对象名称，appCodeName 和 appVersion只是浏览器对象中诸多属性的二个，app指浏览器引擎，CodeName指引擎的名称，appVersion指引擎的版本。
二、利用CSS简单控制视频大小
在浏览器中播放视频时，一般提供了完整的控制界面，包括对视频的播放、暂停、全屏、退出全屏等按钮，视频大小默认是以1：1的比例显示在浏览器窗口中，下面我们使用div容器，将二个audio和video元素分别包住，通过css语句设定父级容器div的大小，同时为视频设置width属性，尝试改变视频文件的默认分辨率，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单控制视频播放的大小</title>
<style type="text/css">
body{background-color:gray;}
div{
width:600px;
background-color:navy;
margin:10px;
border:2px solid white;
font-size:25px;
color:white;
}
.s{
height:100px;
}
.b{
height:400px;
}
</style>
<script type="text/javascript">
<!--
alert(navigator.appCodeName+ "/n" +navigator.appVersion);
//-->
</script>
</head>
<body>
<div>
1 ) div标签建立块级元素，可作为其他内联元素的容器。<br>
2 ) 音频嵌入网页后，只能看到一个控制播放的面板，没有外观大小的概念。<br>
3 ) 视频嵌入网页后，其播放尺寸由video标签的 width 、height属性设定。
</div>
<div class = "s">
<!--下面音频格式，不一定能在你的浏览器中播放，有些老浏览器不支持mp3 -->
<audio src="medias/myAudio.mp3" controls>
</div>
<div class = "b">
若网速限制，很可能无法加载视频，请这样处理：
<a href="medias/myvideo.mp4">
点击鼠标右键，选择另存为，把视频下载到本地 。
</a>
<!--下面视频频保证能在你的浏览器中播放，多数浏览器支持mp4 -->
<video width="600" controls>
<source src="medias/myvideo.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
本例在css语句设置中，使用了 .类名 的类选择器定义，代码如下：
.s{
height:100px;
}
.b{
height:400px;
}
这样，就声明了 .s 和 .b 二类选择器，在HTML的元素中，就可以使用class = “.s”和class = “.b”引入这种类的设置。让相关的HTML元素使用这个类选择器。有关选择器在下一节会稍作系统介绍，本例我们先简单地使用即可。
通过Chrome、Edge、Safari、FireFox等现代浏览器测试，可以发现CSS对div容器的大小设置，不会影响容器内的音频的视觉效果（音频元素显然也不具备自己分辨率，我们看到的只是浏览器提供的控制播放的面板），而视频元素可以通过width属性控制默认分辨率的大小。
本节只是利用HTML的脚本，在Web页中简单地控制了音视频文件，而当需要在Web应用中实现代码个性化控制媒体元素时，则需要用到JavaScript程序实现对视频对象的代码控制，这种代码对此时的你有难度，需要经历了一般的JavaScript的程序设计学习后，方可进行。
2. 6 对元素的CSS盒状模型和语法特性的探索
在CSS排版控制中，每一个HTML元素都被视为一个矩形的盒子，这些盒子之间的关系也许是平辈关系（出现有前后，但层次并列），也许是父子关系（父元素是子元素的容器）。这些盒子共同分享浏览器可视区域，盒子互相之间有边界，也可能有边距，也可能互相影响，综合实现了整个Web页面的渲染。
我们下面结合CSS的语法，对CS盒子模型的排版做一些探索。
一、写CSS选择器的几种语法
下面我们使用一首古诗作为Web页的内容，把古诗分成标题、红色字、蓝色字三类，对CSS的三种选择器的写法开展一些探索实践。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器的书写</title>
<style type="text/css">
/*这是CSS的注释语句，下面用文字颜色为例，演示三种选择器（tag选择器、类选择器、id选择器）的写法*/
div{font-size:38px;
width:380px;}
/*上面是tag选择器的写法，对应选择body内的div标记*/
.blueFont{color:blue;}
/*上面是类选择器的写法，对应选择body内的<p class="blueFont">标记*/
.redFont{color:red}
/*上面是类选择器的写法，对应选择body内的<p class=" redFont ">标记*/
#special{color:white;
background-color:black }
/*上面是id选择器的写法，对应选择body内的<p id="special">标记*/
</style>
</head>
<body>
<div>
<p id="special">
长歌行（汉乐府）
</p>
<p class="redFont">青青园中葵，</p>
<p class="blueFont">朝露待日晞。</p>
<p class="redFont">阳春布德泽，</p>
<p class="blueFont">万物生光辉。</p>
<p class="redFont">常恐秋节至，</p>
<p class="blueFont">琨黄华叶衰。</p>
<p class="redFont">百川东到海，</p>
<p class="blueFont">何时复西归?</p>
<p class="redFont">少壮不努力，</p>
<p class="blueFont">老大徒伤悲。</p>
</div>
</body>
</html>
在浏览器中打开上述代码的HTML文件，浏览器会按CSS三种选择器的设置，CSS引擎会将 这首“ 长歌行（汉乐府）”的文本，按HTML内容对类和id的相应设置，渲染为三种样式表内定义的样式。（效果图略）。
二、元素对父级CSS属性的继承
整个html文件都是由元素一层层构成，对于那些可视元素而言，body是最外层的父级元素，body内可以有很多层次，越内层的元素越属于越底层次的子孙级。父级的一些CSS样式设置会向下“遗传“，换句话说，子元素会”继承“父元素的一些CSS属性，这样，用CSS编写样式，规划好，就不需要对子级的一些属性重复声明了。
下面这个案例的内容，仍然采用“长歌行（汉乐府）“，但我们仅使用属于爷爷body、父亲div、儿子p的三个元素来进行CSS特性的探索，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于对父辈属性的继承</title>
<style type="text/css">
/*这是CSS的注释语句，body为爷爷辈，三个属性（font-size、color、text-align）都被后辈继承，div为父亲辈，其width和font-size属性被儿子p继承，只有border属性没有遗传性*/
body{font-size:18px;
color:blue;
text-align:center}
div{
width:480px;
border:1px solid }
p{font-size:36px;
line-height:2em;}
</style>
</head>
<body>
<div>
长歌行（汉乐府）
<p>
青青园中葵，
朝露待日晞。
阳春布德泽，
万物生光辉。
常恐秋节至，
琨黄华叶衰。
百川东到海，
何时复西归？
少壮不努力，
老大徒伤悲。
</p>
</div>
</body>
</html>
通过浏览器打开上述文件，我们发现，body的CSS属性完全遗传给了子孙，即div和p，遗传的设置为： font-size: 18px; color: blue; text-align:center 。
然后div 的CSS属性却没有遗传给儿子元素p，即 width和border的设置仅对当前元素有效，是无法遗传给子级元素的。
由于子级元素p设置了font-size: 36px; 而body内设置的font-size: 18px则被新的设定给“覆盖“了，我们可以把这看作在p这一代，名为font-size的遗传基因发生变化，若p下属还有子元素，则font-size为36px的属性又会遗传给下一代。
三、CSS选择器的优先级
我们知道，使用CSS选择器可以选中HTML部分设置的元素，然后为这些选中的元素设定新的样式。然而，当我们使用不同的选择器，都选中了某个元素x时，这时，该x元素到底该遵守哪个选择器的CSS设置呢？这个问题，就是CSS选择器的优先级问题。
我们下面用一个例子，来测试id选择器、类选择器、标记选择器在优先级上的区别。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器的优先级</title>
<style type="text/css">
/*这是CSS的注释语句，下面用文字颜色为例，探索css选择器的优先级*/
div{font-size:38px;
width:480px;}
#title{
color:white;
background-color:black;
text-align:center
}
.redFont{
color:red;
background-color:gold
}
p{
color:blue;
text-align:right;
}
</style>
</head>
<body>
<div>
<p class="redFont" id="title" >
长歌行（汉乐府）
</p>
<p class="redFont">青青园中葵，</p>
<p class="redFont">朝露待日晞。</p>
<p class="redFont">阳春布德泽，</p>
<p class="redFont" >万物生光辉。</p>
</div>
</body>
</html>
对于“ 长歌行（汉乐府） ”这段文字，采用了class="redFont" 和 id="title" 二种CSS选择符，在选择器内的css样式代码中，这样式代码是相互冲突的，我们发现，系统选择了id选择器的样式，说明id选择器优先级最高。同样，我们也发现类选择器比标记选择器的优先级更高。
四、父子关系元素的CSS属性的层叠性
在前面一节我们知道，父级元素的某些属性，比如字体大小，长宽等，在父子层次关系的元素中这些属性会发生继承。而在继承时，当设定子级元素的属性以em或 % 这种相对单位，则相对上一级父元素，子元素在继承属性时会发生层叠性的计算。
子级继承父级相关属性，同时发生相对变化，这点在Web设计中非常有用，我们下面以用em表示的相对单位为例，探索对父级font-size属性的继承，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS属性的层叠性</title>
<style type="text/css">
/*下面用文字大小为例，探索css属性的层叠性*/
body{font-size:25px;
width:500px;
border:1px solid ;
text-align:center;
color:blue;
background:url(bk1.jpg)
}
div{font-size:2em;
}
p{font-size:0.77em;}
/*从爷爷body的25px，到父亲div的2倍（相对父辈）大小，再到儿子p的0.77倍（相对父辈）*/
</style>
</head>
<body>
这是body中定义的基础字体,大小25px. <br><br>
<div>
长歌行（汉乐府）
<p>
青青园中葵，
朝露待日晞。
阳春布德泽，
万物生光辉。
常恐秋节至，
琨黄华叶衰。
百川东到海，
何时复西归？
少壮不努力，
老大徒伤悲。
</p>
</div>
</body>
</html>
在浏览器中打开这个页面，可以看出div中的字体最大，为50px，p中的字体稍小，约为38px，body的默认字体为25px。
该原理解释如下：body作为爷爷元素， 在CSS语句： body{font-size:25px;} 设定下，其基础字体大小为25px ， 这个属性会遗传给了子级元素div， 而在div中的CSS设置语句： div {font-size:2em; }， 让div中的字体相对其父级body，长和宽都增大到2倍（2em），则其字体大小为50px。 最后，p作为div的子元素继承div的字体大小，同时层叠自己的设定：p{font-size:0.77em;} ，其字体大小计算的表达是：50px乘0.77，约为38px 。
五、容器关系的盒装模型div排版
根据Web页的可视内容大小和多少，body区域大小是动态的，因此我们一般不设定body区域的width和height属性，从语义上看，body作为最基础的元素，可以不承载Web页的视觉区域，我们只在body中设定一些页面的基本参数，比如记录Web页基础字体的大小。
本例我们在body内使用一个div元素作为Web页内容的父级，二个div元素作为Web页内容的子级，div元素是块级元素，默认会占据父级所有的宽度，而高度却由自己的内容确定。
通过本例，借助为每个div设定边框，结合padding和margin属性，可以初步探索父子容器的排版，以及各容器元素宽度和高度的关系。代码分为二个阶段：
第一阶段代码如下：<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒装模型，block level元素继承父级宽度，而高度则按内容动态确定</title>
<style type="text/css">
body{font-size:30px;}
#boxDad{
width:500px;
border:2px solid gray;
margin:10px;
}
#boxSon1,#boxSon2{
width:400px;
border:1px solid black;
margin:20px ;
text-align:center;
}
</style>
</head>
<body>
<div id="boxDad">
<div id="boxSon1">
鹿柴
[唐]王维
</div>
<div id="boxSon2">
空山不见人，
但闻人语响。
返景入深林，
复照青苔上。
</div>
</div>
</body>
</html>
用浏览器打开上面代码的文件，效果如下图所示：
父级 #boxDad和二个子级#boxSon1,#boxSon2都设定了边框，可以清晰地看到盒子的大小和位置。
由于设定父级其width为500px， 相对二个子级width为400px的设定， 可以看出父容器#boxDad 比二个子容器宽度要多100px 。
而二个子级通过margin为20px的设定，让子级盒子之间，子级盒子与父级盒子之间边距有了20px的空间，我们发现二个子级,#boxSon1,#boxSon2之间的margin值没有叠加，，仍然为20px，垂直方向的margin不做叠加是CSS的盒状模型的排版特性。
第二阶段代码如下：<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒装模型再接触，block level元素继承父级宽度，而高度则按内容动态确定</title>
<style type="text/css">
body{font-size:30px;}
#boxDad{
width:500px;
border:2px solid gray;
margin:10px;
height: 400px;
}
#boxSon1,#boxSon2{
width:400px;
border:1px solid black;
margin:80px 40px;
text-align:center;
}
</style>
</head>
<body>
……相同代码略……
</body>
</html>
本阶段代码的区别是对#boxSon1和#boxSon2二个子容器，设定了 margin:80px 40px; 对于盒状模型，其margin属性是盒子最外层的边距空间，单独不可直接看见，只能在与其他对象的接触中体现，理解盒子的margin属性是非常重要的。
margin若只设定一个值，则作用在盒子四周，相当于设定了margin-left、margin-right、margin-top、margin-bottom。
margin若只设定了二个值，如本例所示，第一个值相当于设定了margin-top、margin-bottom ; 而第二个值相当于设定了margin-left、margin-right。
用浏览器打开修改margin设定的Web页，效果如下图所示：
第三阶段代码如下：<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒装模型第三次接触，使用margin、padding属性</title>
<style type="text/css">
body{font-size:30px;}
#boxDad{
width:500px;
border:2px solid gray;
margin:10px;
height: 400px;
}
#boxSon1,#boxSon2{
width:400px;
border:1px solid black;
margin:40px auto;
text-align:center;
}
#boxSon1{
padding-top: 20px;
padding-bottom:30px;
}
#boxSon2{
padding-top: 30px;
padding-bottom:40px;
line-height:2em;
}
</style>
</head>
<body>
……相同代码略……
</body>
</html>
本阶段代码的区别是对#boxSon1和#boxSon2二个子容器，设定了 margin:40px auto;
margin只设定了二个值，第一个值相当于对margin-top、margin-bottom 设定了40px的高度，第二个值对margin-left、margin-right进行设定，本例使用了auto这个值，使用auto在CSS值中比较常见，也非常神奇，会产生空间平均分配的特性，在本例造成了子元素盒子在父容器的左右margin空间对等，有子元素在父元素内有左右对齐的效果。
另外，对于#boxSon1和#boxSon2二个子容器盒子，为了让盒子内部的文字（古诗）与边框产生“距离美“，本例对 padding-top和 padding-bottom 做了精确地设置，本例这里全部采用了简单的像素单位进行设置，随着学习者CSS控制能力的加强，可以去使用em单位进行控制，这样就可以让Web页的CSS排版更适用于多种不同屏幕。
用浏览器打开本阶段修改的Web页，效果如下图所示：
六、对元素盒装模型的深入探索
块级元素常用来当作Web内容的容器，比如使用div元素当作容器，参加排版，而在div元素内部，我们还可再增加p等块级元素，这种层次设计，也比较符合HTML的语义，div是division的缩写，p则是paragraph的缩写。对于这些块级元素而言，一般都是继承关于父级的宽度，而块级元素的高度，则是由内容确定。
我们下面使用三首不同规格的古诗作为内容，把古诗区分为文字、标题、整体三个盒子，进行盒子模型的属性和排版的探索。代码共分为四个阶段。
第一阶段，创建盒子模型的基础代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒装模型案例1（继承父级宽度）</title>
<style type="text/css">
body{font-size:30px;}
div{
border:2px solid gray;
padding:1em;
}
</style>
</head>
<body>
<div id="box1">
<p>
鹿柴
[唐] 王维
</p>
空山不见人，
但闻人语响。
返景入深林，
复照青苔上。
</div>
<div id="box2">
<p>
竹里馆[唐] 王维
</p>
独坐幽篁里，
弹琴复长啸。
深林人不知，
明月来相照。
</div>
<div id="box3">
<p>
送元二使安西
[唐] 王维
</p>
渭城朝雨浥轻尘，
客舍青青柳色新。
劝君更尽一杯酒，
西出阳关无故人。
</div>
</body>
</html>
本例中，代码有意没有设定body的宽度，我们发现这种情况body会主动利用浏览器的最大宽度，而作为body子元素的三个作为古诗容器的div盒子，则会继承body的宽度，效果如下图所示：
在上述基础上，第二阶段我们利用盒状模型特有属性，对三个div进行调整。代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒装模型案例2（border、margin、padding）,字体大小的继承性</title>
<style type="text/css">
body{font-size:30px;}
div{
border:2px solid gray;
padding:1em;
width:500px;
margin:1em auto ;
text-align:center;
line-height:2em;
background:url("bk2.jpg");
}
div#box1,div#box2{
font-size:1.32em;
}
div#box3{
font-size:1em;
}
p{
font-weight:bold;
border:1px solid ;
}
</style>
</head>
<body>
<div id="box1">
……略
</div>
<div id="box2">
……略
</div>
<div id="box3">
……略
</div>
</body>
</html>
对于三首古诗的容器div，我们统一设定了盒子的以下基本属性：
border:2px solid gray;
padding:1em;
width:500px;
margin:1em auto ;
text-align:center;
line-height:2em;
background:url("bk2.jpg");
让每首古诗盒子都有了合适的内外边距空间、对齐方式等，为节约篇幅，下面仅累出第一个盒子排版效果如下：
另外，由于第三首古诗文字相对较多，相对第一二首，其字体大小必须稍作调整：
div#box1,div#box2{
font-size:1.32em;
}
div#box3{
font-size:1em;
}
此处给出的调整单位为 em ，这样盒子字体的大小，会相对父级body的设置的基础字体大小，浏览器系统自动实现计算和渲染。
代码第三阶段，探索css3新增的border-radius属性代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒装模型案例3（border-radius）</title>
<style type="text/css">
body{font-size:30px;
}
div{
width:500px;
border:2px solid ;
border-radius:2em;
margin:1em auto ;
padding:0.5em;
padding-bottom:1.5em;
text-align:center;
line-height:2em;
}
div#box1,div#box2{
font-size:1.32em;
}
div#box3{
font-size:1em;
}
p{
border:1px solid ;
border-radius:1em;
letter-spacing:0.2em;
}
</style>
</head>
<body>
<div id="box1">
……略。
</div>
<div id="box2">
<p>
竹里馆 [唐]王维
</p>
……略。
</div>
<div id="box3">
……略。
</div>
</body>
</html>
我们对div和p都使用了border-radius的属性设置，设定了盒子边框的弧线角，这个角度的取值，也使用了em这个相对字体大小的单位。其中最后一首古诗的排版效果如下图所示：
代码第四阶段，设定背景属性，探索css3新增的text-shadow属性代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒装模型案例4(background、text-shadow)</title>
<style type="text/css">
body{font-size:30px;
}
div{
width:500px;
/*border:2px solid ;*/
border-radius:2em;
margin:1em auto ;
padding:0.5em;
padding-bottom:1.5em;
text-align:center;
line-height:2em;
background:url("bk2.jpg");
}
div#box1,div#box2{
font-size:1.32em;
}
div#box3{
font-size:1em;
}
p{
border-radius:1em;
background:url("bk1.jpg");
letter-spacing:0.2em;
text-shadow:0.05em 0.02em rgb(250,100,0) ;
}
</style>
</head>
<body>
<div id="box1">
<p>
鹿柴 [唐]王维
</p>
空山不见人，
但闻人语响。
返景入深林，
复照青苔上。
</div>
<div id="box2">
<p>
竹里馆 [唐]王维
</p>
独坐幽篁里，
弹琴复长啸。
深林人不知，
明月来相照。
</div>
<div id="box3">
<p>
送元二使安西 [唐]王维
</p>
渭城朝雨浥轻尘，
客舍青青柳色新。
劝君更尽一杯酒，
西出阳关无故人。
</div>
</body>
</html>
本例假设背景图片：bk1.jpg、 bk2.jpg与本例的HTML源文件在同一位置，因此可以简单地对background属性，使用url("bk1.jpg")或url("bk2.jpg")的值来设定背景图的路径。
本例还使用了CSS3的文字特效属性text-shadow，其值 0.05em 0.02em rgb(250,100,0) 由三个参数组成，参数中间有空格间隔，第一、二个参数，代表文字阴影在x和y轴的位移，此处我们使用了em作为单位， rgb(250,100,0)是文字阴影的颜色值。其中第一首古诗的效果如下图所示：
2. 7元素定位的控制和Web页的排版流
出现在Web页中的元素，按照它们对应的标记，在HTML代码中是有先后顺序的，一般而言，写在前面的标记和文字将先渲染出来，写在后面的则慢一些显示出来。排版的顺序也是按照当代人类的阅读习惯，从左到右，从上到小，顺序显示。
对于不同的屏幕和浏览器，Web页的大小和比例是动态的，因此Web页内的元素的位置也是不固定的，这点和印刷排版完全不同，但Web页内各元素在相互排列过程中，又是遵守CSS规则，是有规律可循的，就像流水一样，我们把此称为排版流。本节我们通过案例来体验对Web页内排版流的控制。
从Web页内的元素位置看，有些元素的位置由排版流决定，而通过CSS的position属性设定，则可以变更元素原来默认的位置，我们也将在本节讨论四种position属性的设置。
一、position的四种定位方式
下面利用HTML元素div来探索元素的几种点位方式，内容为了演示较多篇幅，所以采用了6首古诗文字，古诗的题目被换成div定位的方式，便于我们对比相应设定的古诗position模式，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box的四种position定位方式</title>
<style type="text/css">
body{
font-size:16px;
width:600px;
border:1px solid ;
}
div{
border:2px solid blue ;
font-size:1.9em;
margin:10px auto;
padding:1em;
text-align:center;
line-height:2em;
width:200px;
}
div>p{
font-size:0.8em;
font-weight:bold;
}
div#static{
position:static ;
/**下面二句坐标设置无效，static定位遵守浏览器对文本流的排版**/
left:3em;
top:-5em;
}
div#relative{
position:relative ;
left:3em;
top:-5em;
background:rgb(200,250,200);
}
div#absolute{
position:absolute ;
left:450px;
top:350px;
background:rgb(200,200,250);
}
div#fixed{
position:fixed ;
top:50px;
right:50px;
background:rgb(250,200,200);
}
</style>
</head>
<body>
<h1>滚动鼠标，查看各div定位效果</h1>
<div>
<p>
不设position
</p>
空山不见人，
但闻人语响。
返景入深林，
复照青苔上。
</div>
<div id="static">
<p>
position：static
</p>
独坐幽篁里，
弹琴复长啸。
深林人不知，
明月来相照。
</div>
<div id="relative">
<p>
position：relative
</p>
空山不见人，
但闻人语响。
返景入深林，
复照青苔上。
</div>
<div id="absolute">
<p>
position：absolute
</p>
独坐幽篁里，
弹琴复长啸。
深林人不知，
明月来相照。
</div>
<div>
<p>
不设position
</p>
空山不见人，
但闻人语响。
返景入深林，
复照青苔上。
</div>
<div id="fixed">
<p>
position：fixed
</p>
独坐幽篁里，
弹琴复长啸。
深林人不知，
明月来相照。
</div>
</body>
<!--
对比发现，box元素若未设置position属性，与position设为static效果相同
-->
</html>
本例代码增加使用了一些新写法：
比如，div>p 表示 div元素下的p元素，这种选择器非常严格地限定，指div是元素，同时p是子元素的情况。如果选择器写成 ： div p 则有所不同，这表示div只要是p的父级就行，爷爷级也行，并不要像前者那样，即div>p的div必须是p严格意义的父元素。
我们在HTML代码中，对于div元素的id的名称的命名，我们采用了CSS的标识符，比如：
div#relative{
position:relative ;
……
}
relative是CSS的position属性的特定取值，但对于relative这个标识符，我们却可以在命名HTML元素id的时候重复使用，因为HTML和CSS二套语言的代码，在浏览器中上是完全独立隔开运行的，不会因为互相使用了相同的标识符而造成混乱。而我们需要知道，这两套语言写的代码，其实是通过浏览器的CSS选择器实现沟通的。
另外，本例需要大家用浏览器实际打开页面进行验证，通过鼠标滚动屏幕，上下互动查看各个div的位置，因而在此不便给出截图。
二、absolute定位和重叠
通过前面的探索我们发现，元素若未设置position属性，或者position设为static，元素将规规矩矩地融入Web页的“排版流“，并严格执行，从上到下、从左到右的排版。若position属性设为relative，基本也是按“排版流“实现错位排版。
但若我们把元素的position属性设置为absolute时，元素将脱离Web页原有的排版流，实现元素“自由“的任意位置的排版，正如absolute单词的中文含义那样，绝对的位置，而非像前面那样，元素的位置基本上都是适应按排版流的相对位置。
当元素position属性为absolute时，由于元素脱离了Web页的“排版流“，实现按坐标自由定位，浏览器页不会考虑元素与周边元素的关系，这就可能导致元素和其他按”排版流“排版的元素发生重叠关系，重叠则会涉及元素显示的优先级属性——z-index设置。
下面我们仍使用古诗作为内容的例子进行探索，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>absolute定位z-index次序</title>
<style type="text/css">
body{
font-size:16px;
/*由于absolute定位脱离了文本流，因此下面定义宽度已经没有意义*/
width:600px;
background:rgb(100,100,100);
color:white; }
div{
color:black;
border:2px solid blue ;
font-size:1.9em;
margin:10px auto;
padding:1em;
text-align:center;
line-height:2em;
width:200px;
}
div>p{
font-size:0.8em;
font-weight:bold;
}
div#abs1{
position:absolute ;
left:1em;
top:2em;
background:rgb(200,250,200);
z-index:3 ;
}
div#abs2{
position:absolute ;
left:6em;
top:6em;
background:rgb(200,200,250);
z-index:2 ;
opacity:0.3;
}
div#abs3{
position:absolute ;
left:10em;
top:10em;
background:rgb(250,200,200);
z-index:1 ;
}
</style>
</head>
<body>
<h1>absolute定位导致的重叠</h1>
<div id="abs1">
<p>
abs1,z-index:3
</p>
空山不见人，
但闻人语响。
返景入深林，
复照青苔上。
</div>
<div id="abs2">
<p>
abs2,z-index:2
</p>
独坐幽篁里，
弹琴复长啸。
深林人不知，
明月来相照。
</div>
<div id="abs3">
<p>
abs3,z-index:1
</p>
空山不见人，
但闻人语响。
返景入深林，
复照青苔上。
</div>
</body>
</html>
用浏览器打开上面代码，效果如下图所示：
通过调整abs2的left和top属性，我们可以探索处于absolute模式的元素的定位。通过对三个div 的z-index属性值得大小处理，我们可以探索各div在重叠时的遮挡秩序。
最后，我们为处于absolute模式的div设定了opacity属性，这个CSS属性的取值是0至1之间的小数，可以设置元素处于透明状态。
三、在父元素容器中，实现子元素absolute模式的定位
前面我们直接为某个元素设定了absolute模式的定位模式，元素则以浏览器窗口为坐标体系，比如浏览器窗口左上角为坐标的原点（x:0,y:0）。但在实际拍中，我们不需要元素以浏览器为参考系，而更需要元素以自己的父级容器为参考系，实现自己的“自由“定位。
为了实现absolute元素以自己的父级容器为参考系来确定坐标，我们要将其父级元素的position属性设置为relative。
本例使用二首古诗作为内容，实现以body元素为参考系的absolute定位，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>relative和absolute配合定位</title>
<style type="text/css">
body{
position:relative ;
font-size:16px;
width:400px;
height:500px;
border:2px solid ;
}
div{
position:absolute ;
border:1px solid blue ;
font-size:1.2em;
margin:10px auto;
padding:0.5em;
text-align:center;
line-height:2em;
width:120px;
}
div>p{
font-size:0.8em;
font-weight:bold;
}
div#abs1{
left:1em;
top:1em;
background:rgb(250,200,200);
}
div#abs2{
right:1em;
bottom:3em;
background:rgb(200,200,250);
}
</style>
</head>
<body>
父亲body的定位类型是relative，二个儿子div则是absolute.
<div id="abs1">
<p>
(左:1,上:1)
</p>
空山不见人，
但闻人语响。
返景入深林，
复照青苔上。
</div>
<div id="abs2">
<p>
(右:1,下:3)
</p>
独坐幽篁里，
弹琴复长啸。
深林人不知，
明月来相照。
</div>
</body>
</html>
本例关键的代码是：
body{
position:relative ;
……
}
div{
position:absolute ;
……
}
配合二个古诗区域的定位：
div#abs1{
left:1em;
top:1em;
background:rgb(250,200,200);
}
div#abs2{
right:1em;
bottom:3em;
background:rgb(200,200,250);
}
从代码可以看出，第一首古诗区域采用传统的left、top坐标设定，而第二首古诗区域采用另一类的right、bottom坐标设定，让我们可以直观地设定距离body边界的右边和底边的距离。效果如下图所示：
四、元素的float属性及Web的元素排版流
初学者最初总误以为自己电脑创作出来的Web页，也当然会在他人电脑屏幕有同样的效果。而Web页的渲染，在不同的浏览器和终端屏幕上，实际结果情况是有可能是不同的。我们本节谈到的排版流（Normal document flow）现象，就是造成不同屏幕宽度有不同效果的原因。
排版流是指Web页内的元素在被渲染时默认的行为，行内（inline）类型的元素内的文本，会从左到右排列，当遇到父级容器的宽度限制就会自动换到下一行；而块级（block）类型元素内的文本则不管内部文字的多少，均在开头和结束时都执行独立换行。
我们实时改变浏览器大小时，会发现，Web页内的所有元素对象，包括元素内的文本内容，这些内容就像水流那样，充满浏览器窗口，按规则排列，当浏览器窗口发生变化时，这些Web元素形成的盒子又会像流水那样，动态适应浏览器的窗口。
排版流的特征比固定的印刷术更灵活，也给我们Web页的设计开发者带来了困难，需要我们理解和利用Web页内盒子模型的一些特征。
下面我们看看，块状盒子元素设定了float特性后，该盒子与整个Web排版流的关系，我们仍然以古诗内容构成的div盒子元素为例，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排版流的浮动排版，从上到下、从左到右</title>
<style type="text/css">
body{
font-size:16px;
}
div{
font-size:1.9em;
margin:10px;
padding:1em;
text-align:center;
line-height:2em;
background:url("bk1.jpg");
float:left;
width:200px;
}
div>p{
font-size:0.8em;
font-weight:bold;
}
</style>
</head>
<body>
<h1>各Block-level块会在父元素空间内，从上到下、从左到右浮动。调整浏览器宽度可动态排版</h1>
<div>
<p>
1鹿柴 [唐]王维
</p>
空山不见人，
但闻人语响。
返景入深林，
复照青苔上。
</div>
<div>
<p>
2竹里馆 [唐]王维
</p>
独坐幽篁里，
弹琴复长啸。
深林人不知，
明月来相照。
</div>
<div>
<p>
3鹿柴 [唐]王维
</p>
空山不见人，
但闻人语响。
返景入深林，
复照青苔上。
</div>
<div>
<p>
4竹里馆 [唐]王维
</p>
独坐幽篁里，
弹琴复长啸。
深林人不知，
明月来相照。
</div>
<div>
<p>
5鹿柴 [唐]王维
</p>
空山不见人，
但闻人语响。
返景入深林，
复照青苔上。
</div>
</body>
</html>
本例关键的代码是设置了div元素的float属性和width属性：
div{
……
float:left;
width:200px;
}
设置了float为left的元素，会脱离正常排版流，主动向父容器左上流动，该元素作为盒子元素，内部会独立实现CSS排版，外部也会按盒子模型的margin设置，与周边元素拉开间距。
本例需要鼠标动态调整浏览器窗口大小，互动查看float效果，因此需要学习者在浏览器中打开查看。
五、float元素和环绕的文本流
Web页内处于float状态的元素，可以脱离原来的排版流，但该处于float状态的元素与周边的其他HTML对象之间，在排版上还是要相互影响的，注意：处于float状态的元素并非处于absolute状态的元素。本例我们把2首古诗创作称为2个div，让其分别处于左右浮动状态，通过增加为古诗注释的文字，探索一下浮动的div与周边的文本流或其他元素的关系。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义为float的box模型，会被文本流包裹起来</title>
<style type="text/css">
body{
font-size:16px;
width:500px;
border:1px solid ;
margin:0 auto ;
}
div{
font-size:1.9em;
margin:10px;
padding:0.5em;
text-align:center;
line-height:2em;
background:url("bk1.jpg");
float:left;
width:200px;
}
div>p{
color:blue;
font-size:0.8em;
font-weight:bold;
text-indent:0em;
line-height:0em;
}
p{
color:gray;
font-size:1.30em;
text-indent:2em;
text-align:justify; /*这个属性取值不是默认值，类似印刷标准，比较美观*/
padding:0.5em;
line-height:2.5em;
}
/*上面两句，利用p的不同选择器,实现了不同情况p元素的选择，实现了不同设置*/
</style>
</head>
<body>
<h1>各Block-level块在父元素空间内，浮动后，可以被inline-level元素（比如文字）环绕起来</h1>
<div>
<p>
鹿柴 [唐]王维
</p>
空山不见人，
但闻人语响。
返景入深林，
复照青苔上。
</div>
<p>
这里演示的文字是《鹿柴》的现代文解读。……略
</p>
<div style="float:right">
<p>
竹里馆 [唐]王维
</p>
独坐幽篁里，
弹琴复长啸。
深林人不知，
明月来相照。
</div>
<p>
这里演示的文字是《竹子里面》的现代文解读。……略
</body>
</html>
用浏览器打开含上面代码的文档，可以看出二个div元素，由于其float属性的设置，分别漂浮到排版流的左边和右边，而与相应div临近的p元素内的文本流，就像水流一样，对div元素形成了环绕，部分效果如下图所示：
对容器body元素内CSS代码的解读：
body{
font-size:16px;
width:500px;
border:1px solid ;
margin:0 auto ;
}
在本例中，需要对Web页的body元素的width进行设置，这样body的width属性将对内部的div和p有宽度的限制，将约束p中的文本流宽度，让p形成自动换行，于是形成对div元素的环绕。
body中基础字体大小使用了px作为单位，而div和p中的样式属性中，包括：text-indent 、 padding 、 line-height 等均使用了em作为单位，em单位的设定既方便，也非常直观，便于修改和调整。
其他代码细节方面的难点，请参考本例CSS代码中的注释，形式：/* CSS代码注释 */。
2. 8 实现Web页的浮动排版综合案例
本节综合运用前面的盒状模型和float排版，结合HTML5的新增语义标签，用探索和实验的方式，逐步实现一个通用的Web页的浮动排版案例。
一、HTML5新增语义结构标签
HTML5是一个划时代的标准，为Web开发者带来新东西，我们还有待完成JavaScript学习后才能真正理解，但其语义标签上的新增的结构标签，我们可以马上进行实验。
对于一个Web页，按我们对内容的理解，大致应该分为头部、导航栏、主体、脚部四个部分，其中主体也许还可划分为二个区域。
我们下面将再Web页的主要结构中，放弃传统的div元素，而分别使用header、 nav、section、article、footer这五个具备语义的结构标签，实现Web区域的内容划分，注意我们使用HTML语义标签划分的只是内容，与标签的外观无关，标签的样式的外观完全交给CSS，从CSS层面看，使用五个div和五个语义结构效果完全一样。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5语义标签和排版1</title>
<style type="text/css">
*{
border:3px solid blue ;
margin:20px;
text-align:center;
}
/***在css语言中，" * " 符号代表通用选择器 */
header{
}
nav{
}
section{
}
article{
}
footer{
}
</style>
</head>
<body>
<header>
header：主标题区域
</header>
<nav>
nav：导航区
</nav>
<section>
section：部分区
</section>
<article>
article：主文章区
</article>
<footer>
footer：脚部区
</footer>
</body>
</html>
用浏览器打开含上面代码的文档，我们可以发现，header（头部）、nav（导航）、section（部分）、article（文章区）、footer（脚部）5个区域，均匀地分布在body容器中，效果如下图所示：
本例我们使用了css的 * 通配符，选择了Web页中所有的元素对象，并给这些对象设置了三个CSS声明，其中border属性为每个元素都增加了一个蓝色3像素的边框。代码如下：
*{
border:3px solid blue ;
margin:20px;
text-align:center;
}
我们发现，新的五个语义标签设定了外框，但在这五个标签外，还套了二层蓝色边框，这说明，Web内容区域外还有二个元素，显然这二个元素分别这5个语义标签的父级和爷爷级。 通过查看HTML源码部分，我们可以发现，这二个元素正是我们可能熟视无睹的body和html元素。
整个Web页，可以看作只由一个html元素组成，html其实是最大的语义标签，但几乎所有人都不会对html元素作样式修改，本例由于对通配符 * 设定了margin、border属性，这使得html元素也有了边框的外观设计，也使得本例的这个Web页看上去有些奇怪。
二、body作为页面的基础容器
对前面的Web页，由于既没有设定容器的大小，内部元素文字的大小和数量加上margin也较小，这使得整个页面显得非常小，比例也不协调。为解决这个基本问题，下面我们把body当作整个Web页的基本容器，为body设定width和height属性，让五个语义标签能够在body容器内分配空间，实现Web页的排版。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body基础容器+*通配符的探索</title>
<style type="text/css">
*{
border:2px solid blue ;
margin:20px;
text-align:center;
}
/* 下面对html重新定义，可以消除对html元素的边框和边距设定 */
html{border:0 ;margin:0}
body{
width:600px;
height:500px;
border:0 ;
}
header{
}
nav{
}
section{
}
article{
}
footer{
}
</style>
</head>
<body>
<header>
header：主标题区域
</header>
<nav>
nav：导航区
</nav>
<section>
section：部分区
</section>
<article>
article：主文章区
</article>
<footer>
footer：脚部区
</footer>
</body>
</html>
在 * 通配符后，重新定义html元素和body元素后，整个Web页在视觉上只留下了五大语义定义的区域，从header到footer五个区域，组成这五个区域元素显然属于块级元素，它们平均分摊了容器body元素设定的width和height设定的区域，如下图所示：
三、探索容器内的元素空间分配
在body元素内，五个语义区域平均分配了body的纵向空间。本例我们作一些修改，让五个区域能够按百分比的方式，简单地分配body的height属性指定的高度。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body基础容器+子元素通过height的设定实现空间分配</title>
<style type="text/css">
……略
header{
height: 15%;
}
nav{
height: 10%;
}
section{
height: 5%;
}
article{
height: 45%;
}
footer{
height: 5%;
}
</style>
</head>
<body>
……略
</body>
</html>
用浏览器打开上面更改后的HTML文件，效果如下图所示：
本例说明：子元素使用百分比的方式设定高度，可以依据父级容器的高度，按百分比的方式逐个为子元素分配高度空间，同时也实现了子元素相对容器空间的设定。
四、对2个float元素实现左右并列排版
若对块级元素的width属性程序不做设置，则块级元素会自动继承父级容器的宽度，inline类型的元素宽度由其内容决定，当元素的宽度超过父级容器宽度，则会发生换行现象，这点我们在前面的案例中已经验证。
本例我们希望对section区域和article区域实现并列排版，为了不让它们自动使用父级的宽度，我们要为两个区域设定width属性，这点与前面对子元素height的值设定一样，用百分比形式设定width属性，可以较好地实现规划，下面我们对section区域和article区域的宽度分别设定为35%和65%。探索这两个区域能否按我们设置的比率，精确地分配容器的width空间，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float排版（探索margin的问题）</title>
<style type="text/css">
*{
border:2px solid blue ;
text-align:center;
margin:20px;
/*上句去除，看看是否避免section和article浮动时不能精确对齐*/
}
html{border:0 ;}
body{
width:600px;
height:500px;
border:0 ;
}
header{
height:15%;
background:url("bk1.jpg");
}
nav{
height:10%;
}
section{
width:35%;
height:65%;
float:left;
background:url("bk1.jpg");
}
article{
/*可以尝试把article的width属性去除，看看系统会自动计算吗？*/
width:65%;
height:65%;
margin-left:35%;
/*可以尝试把margin-left属性的改变，看看能否对齐？*/
background:url("bk2.jpg");
}
footer{
height:10%;
}
</style>
</head>
<body>
<header>
header：主标题区域
</header>
<nav>
nav：导航区
</nav>
<section>
section：部分区
</section>
<article>
article：主文章区
</article>
<footer>
footer：脚部区
</footer>
</body>
</html>
用浏览器打开上面代码的HTML文件，效果如下图所示：
显然，虽然实现了section和article区域的并列，但对齐效果较差，另外，对于我们在通配符 * 内设定的 margin为20px ，这条语句让五个元素区域之间的边距保持在20个像素，让排版区域的间距显得比较大，也存在浪费Web页空间的问题。
学习者可以按照CSS源码中用注释提示的方式，改变一些属性的参数的设置，尝试改良或解决上述各区域间隙过大和浮动元素无法对齐的问题。
五、容器的box-sizing属性设置
在盒状模型的排版中，一个盒子元素的width属性，在默认情况下，仅仅是其中内容的宽度，即：content-box，而在实际排版中，这样整个盒子的占据空间的宽度为：width + padding + border + margin 四项之和。
这种情况下，在CSS中，box-sizing属性默认设为content-box，我们在排版中，对盒子宽度的计算必须自己手工计算盒子占据宽度的空间，而不能把盒子的width当作盒子的宽度。
当把box-sizing属性的值设置为border-box时，情况就不同了，在实际排版中，border-box盒子的占据空间的宽度为：width + margin 二项之和。这样我们设置好width，CSS就可以根据padding和border的值，自动来调整盒子内容的真实宽度了，对设计着来说，似乎实现了自动计算。
我们继续上面的案例改进，把section和article二个区域设置为border-box,同时把盒子周边的margin值全部设置为0 。借此，看看浮动排版是否可以精确进行。代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float排版，调整box-sizing和margin-left</title>
<style type="text/css">
*{
border:2px solid blue ;
text-align:center;
/*
把margin:10px;这句去除，可消除section和article浮动时不能精确对齐问题
*/
}
html{border:0 ;margin:0;}
body{
width:600px;
height:500px;
border:0 ;
}
header{
height:15%;
background:url("bk1.jpg");
}
nav{
height:10%;
}
/*
下面对section和article二个盒子，设定box-sizing属性
设置box-sizing为 border-box ,系统默认为box-sizing为content-box
*/
section{
box-sizing: border-box ;
height:65%;
width:35%;
float:left;
background:url("bk1.jpg");
}
article{
box-sizing: border-box ;
/*可以尝试把article的width属性去除，看看系统会自动计算吗？*/
width:65%;
height:65%;
background:url("bk2.jpg");
}
footer{
height:10%;
}
</style>
</head>
<body>
……略……
</body>
</html>
用浏览器打开存放上面代码的HTML文件，可以发现各区域的对齐非常精确，如下图所示：
从上面效果图看出，article区域似乎浮动到最左边，与section发生了重叠，为解决这个问题，我们为article区域，增加margin-left属性，值为section的宽度即可，代码如下：
article{
margin-left:35%;
}
修改后，重新刷新浏览器，页面的效果图如下：
六、能实现容器浮动且自动对齐的排版
通过前面的探索，我们发现了box模型，作为容器在浮动排版的一些关键要素，比如box-sizing设为 border-box是关键，否则容器内的任何内边距和边框的变化，都会让排版发生错位，再比如，也要把box模型的margin都设为0，否则浮动的容器也会发生错位问题。
上例的排版虽然接近完美，但由于需要对article区域的margin-left属性进行设置，似乎感觉CSS这样有点不够完美，人为控制的参数似乎太多，但事实并非如此。
下面我们重新构建一下上面的案例代码，尽量用少的参数，让CSS自动实现浮动排版的有关计算，让代码变得更加完美，也尽量少出错误，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动浮动的排版(最精简代码)</title>
<style type="text/css">
body{
width:600px;
height:500px;
text-align:center;
font-size:22px;
}
header{
height:15%;
background:url("bk1.jpg");
}
nav{
height:10%;
}
section{
box-sizing: border-box ;
height:65%;
width:30%;
float:left;
background:url("bk1.jpg");
}
article{
box-sizing: border-box ;
height:65% ;
background:url("bk2.jpg");
/*尝试把article的width属性去除，即width:70%;系统会自动计算！*/
/*尝试把margin-left属性去除，即margin-left:35%;系统也会自动计算！*/
}
footer{
height:10%;
}
nav,footer{
border:1px solid;
}
section,article{
padding-top:20%;
}
</style>
</head>
<body>
<header>
header：主标题区域
</header>
<nav>
nav：导航区
</nav>
<section>
section：部分区
</section>
<article>
article：主文章区
</article>
<footer>
footer：脚部区
</footer>
</body>
</html>
本例我们把body定义成为固定了宽和高的容器，代码：
body{ width:600px; height:500px;} ，
让5个语义块级元素在body内实现浮动排版。让header、nav、section、article、footer五个区域通过分配高度空间来实现版面空间的分配。
对于关键的浮动排版的二个元素，我们用最精炼的方法设置：对于section区域,设定其width属性和float属性即可；而对于article区域，我们无需对其作width和margin-left的设置，把任务交给了CSS，就实现了自动计算。有关代码如下：
section{
width:30%;
float:left;
}
article{
/*尝试把article的width属性去除，即width:70%;系统会自动计算！*/
/*尝试把margin-left属性去除，即margin-left:35%;系统也会自动计算！*/
}
用浏览器打开存放上述代码的HTML文件，效果如下图所示：
七、基于box Model浮动排版的案例应用
前面我们通过六个阶段，用探索的方式，创作了一个精炼的浮动排版的方式，通过整个思想，我们为这五个块级元素添加一些图文内容，实现一个较为丰富多彩的综合案例。
本例引用白居易的《长恨歌》诗文为内容，加入到我们的排版语义结构之中，把前面实现精炼的左右浮动代码当作结构骨架，本例再添加一些文本和图像的效果细节。代码相对以前稍长一些，我们把代码分成二个部分实现：一是HTML的语义和内容，二是CSS的表现和外观效果。
第一部分：HTML语义区和内容这一步要选择合适的语义标签，也要确保各元素的层次结构准确，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒装模型和浮动排版的应用</title>
<style type="text/css">
/*……详见第二部分……*/
</style>
</head>
<body>
<header>
古典赏析---选自白居易
</header>
<nav>
<ul>
<li>首页</li>
<li>历史</li>
<li>典故</li>
<li>旧址</li>
<li>价值</li>
</ul>
</nav>
<section>
<img src="girl.jpg" alt="杨家有女天生丽质">
</section>
<article>
长恨歌·白居易<br>
汉皇重色思倾国<br>
御宇多年求不得<br>
杨家有女初长成<br>
养在深闺人未识<br>
天生丽质难自弃<br>
一朝选在君王侧<br>
回眸一笑百媚生<br>
六宫粉黛无颜色<br>
……略……
</article>
<footer>
CSS盒装模型和浮动排版CopyRight 2020 欢迎学习
</footer>
</body>
</html>
说明：html文件相当于对整个案例的内容规划，这一步要保证内容的准确和丰富，但无需考虑这些内容的外观（颜色、大小、对齐、背景等）；本例采用的外部图片（"girl.jpg"、"bk1.jpg"、"bk2.jpg"）与本HTML文件放在同一个位置；本例还使用了ul元素的列表项目，通过CSS的特殊设定，可以把这些块级元素设为inline类型，作为Web页nav中的横向菜单的各个菜单元素。
用浏览器打开含该html代码的文件，在未设置样式之前，仅使用HTML语义标签的效果图如下：
第二部分：CSS表现区和样式在第一部分的内容和区域划分基础上，接着对案例的区域进行分配空间、排版和浮动、最后实现对每个局部用CSS语句实现精装修，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒装模型和浮动排版的应用</title>
<style type="text/css">
body{
margin:0 auto;
width:650px;
height:550px;
text-align:center;
font-size:20px;
}
header{
height:15%;
background:url("bk1.jpg");
font-size:1.9em;
letter-spacing:0.3em;
color:rgb(150,150,255);
text-shadow:0.05em 0.03em black;
}
nav{
height:10%;
}
section{
box-sizing: border-box ;
height:65%;
width:30%;
float:left;
background:url("bk1.jpg");
}
section>img{
width:100%;
opacity:0.5;
margin:25% 0 ;
}
article{
box-sizing: border-box ;
height:65% ;
background:url("bk2.jpg");
font-size:1.5em;
line-height:2em;
letter-spacing:0.3em;
overflow:auto;
color:rgb(150,150,255);
text-shadow:0.05em 0.03em black;
}
footer{
height:10%;
}
nav,footer{
border:1px solid;
background:rgb(200,200,250)
}
nav>ul>li{
display:inline;
font-size:1.2em;
margin-right:3%;
letter-spacing:0.5em;
padding:0.1em;
background:rgb(100,200,250);
color:white;
cursor:pointer;
}
nav>ul>li:hover{background:rgb(0,200,100)}
nav>ul>li:active{background:rgb(200,250,0)}
header,footer{
padding-top:0.5em;
}
</style>
</head>
<body>
<!--……详见第一部分……-->
</body>
</html>
用浏览器打开存放上述代码的HTML文件，鼠标指向“典故“菜单，效果如下图所示：
本例中，对前面未使用过的一些CSS代码的技巧解读：
对body的设定 margin:0 auto; 可以保证在任何宽度屏幕下，Web页面都是居中显示。
对section区域的图片，采用section>img选择器，并设定了margin:25% 0 ，其中第一个参数设为25%，让图片上下通过margin形式，上下留出空间，图片左右无多余空间，因此第二个参数设置为0。
对article区域，与section要实现互动，后者简单地设置height:65%即可，其他交由CSS自动地实现article元素宽度的计算。
另外由于article区域的内容《长恨歌》比较长，这里使用了overflow:auto;的设置，让超出article区域的内容被article遮挡,而浏览器会给article提供一个滚动窗口的工具，实现内容的滚动查看。关键代码：
article{ box-sizing: border-box ; height:65% ; overflow:auto; }
对于nav区的ul实现的菜单，使用选择器: nav>ul>li 实现了对每个li（菜单的选择），然后对于其一些属性的关键设定，改变了li的形态，把列表转变成为菜单，同时为li元素设定了鼠标指针接触和点击的伪类，实现了菜单的互动，关键代码如下：
nav>ul>li{
display:inline;
margin-right:3%;
background:rgb(100,200,250);
color:white;
cursor:pointer;
}
nav>ul>li:hover{background:rgb(0,200,100)}
nav>ul>li:active{background:rgb(200,250,0)}
2. 9 CSS代码与HTML代码的整合和分离
HTML代码中的元素以表达语义为主，这些元素也都有默认的外观和样式。在编写HTML代码时，更需要关注选择合适的语义标记，设定合理的层次文档结构，最终实现页面的元素结构的清晰表达。在编写HTML代码时，对Web页面的外观样式完全不需要考虑，只使用默认的外观样式即可。
为把CSS样式应用到HTML文档，我们可以选择三种不同的方式，分别如下：
一、写在HTML元素style属性的inline样式
每个HTML元素都可以有style属性，当把CSS样式代码直接写在元素的style属性中，比如：
<p style = "color: red; background: yellow;"> Look out! </p>这种方式可以单独为该元素设置css样式，比如上面示范的p，将呈现红字黄底效果。这种方式优先级最高，当我们在其他地方也对p元素设有其他颜色和背景时，当前这个p将以inline样式的是设置为准。
我们不建议使用inline样式的写法，因为这种写法将表现语义的HTML代码和表现样式的CSS代码，混在一起，当页面内容稍微复杂，就会造成代码管理的混乱。
另外，当我们使用JavaScript修改HTML元素对象的样式时，相当于动态使用程序代码改变了HTML元素的inline样式，实现动态的Web页样式，由于JavaScript的代码可以规范管理，大量使用这种操作，也不会造成代码管理的低效。
二、嵌入样式表（embed stylesheet）
这种方式我们经常使用，这种方式把css代码写在一个样式表（stylesheet）中，再把这个样式表嵌入HTML文档的style元素中，其规范语法为：
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
样式表...
</style>
</head>
<body>
Web页内容...
</body>
</html>
习惯上，我们把style元素嵌入到head元素中，这也是我们一直采用的方式。但实际上这种方式并非规则，有时候为了让页面的性能更好，也可以把嵌入样式表（也就是包含css代码的style元素 ），放在HTML文档结束前的位置，比如</html>标记之前。
三、外部样式表（external stylesheet）
当HTML代码完成之后，Web页在当今的“看脸”时代，其外观是非常重要的。有时候人们甚至把设计CSS样式和编写CSS代码的工作分开，由不同的人配合完成，为了方便配合和管理，把CSS样式代码和HTML代码分离，用不同的文件存放是常见的做法。把Web页的CSS代码单独存放在一个文本文件中，这种文件就是外部样式表文件。
创建时把css代码组成的样式表单独存储为文件，一般以css作为文件后缀名，使用时再通过脚本指令把外部样式表文件读入，这种方式在较大代码量的项目中经常使用。
这种方式的的优势是管理效率高，当Web页面文件较多时，多个html文件可以同时引用同一个外部样式文件，这些html文件的外观则可由单独一个样式表控制，提高多页面修改的效率。
我们在之前的案例中，一般都是直接把CSS代码嵌入在HTML文档的head元素的子元素style之中，这种方式在学写代码时使用，操作上简便高效。
外部样式表的方式也有缺点，主要是体现在性能上，毕竟外部文件都是存放在低速IO的设备中，这种方式一般需要另外多读取一个或多个外部文件，尤其在网络上访问文件的速度还存在响应时间的不确定的。
外部样式表有二种方式引入HTML文档。
一是在HTML文档中，使用link元素把外部样式文件引入。
例如：
<head>
<link rel="stylesheet" type="text/css" href="mySite.css" media="all"></head>
二是在嵌入样式表中，使用@import指令引入外部样式表文件。
例如：
<style type="text/css">@import url(site.css
);@import url(navbar.css
); body {background: yellow;}
这是嵌入样式表（embedded stylesheet）
</style>和HTML文档一样，这些以css为后缀的外部样式文件，本质上也是文本文件，我们可以使用文本编辑器来编辑它们，同时在这些写在HTML文件之外的css代码中，就不再需要使用style标签作为容器来实现“包含”了。比如mySite.css:
mySite.css文件开始：
body{
margin:0 auto;
width:650px;
height:550px;
……
}
header{
height:15%;
background:url("bk1.jpg");
font-size:1.9em;
……
}
…………
mySite.css文件结束。
把CSS代码和HTML代码分离，以及我们后面主要的程序语言JavaScript代码，也存在同样情况，通过多个文件分开管理不同类型代码，这是人们管理具有网站或代码的习惯和需要。
而我们在学习Web代码时，实现代码分离是正确方向，但大多数情况下，为实现所谓的“代码分离”，我们把Web页的三种代码分散在二三个文件中，分别管理完全是没有必要的。
因为在学习阶段编写的代码绝大多数在几百行之内，我们只要简单在不同类型的代码间多敲入几个回车键，就可以在功能上按模块把源代码分离开来，我们不需要人为地将一个文件划分为多个文件。
最后，在学习阶段，我们一般会按知识点把案例做成文件，比如本书涉及的学习源代码文件超过一百个，每个文件包含一般都包含一个案例，但随着难度的深入和阶段备份代码的需要，我们又可能要按理解有意将这个文件分成文件，若此时再增加管理一些外部CSS样式文件，或js程序文件，就会无形间增加许多没有价值的繁琐操作，因此建议本书的学习不要注重把代码分成若干文件，分开管理，除了大量的数据外，Web语言写的代码用一个文件管理就足以。
在线咨询
