网页代码剖析（下）
Zac
Web360编辑
在这节课里，我们再一次对网页代码进行剖析。简要介绍了CSS（以及CSS和HTML之间的关系），和非常重要的两个HTML标签 “div”和“span”标签，用于制作表格的Table标签，最后讲解了网页类型声明！Doctype的用法。
CSS (级联样式表)
级联样式表（Cascading Style Sheets，CSS）是一种为网站添加布局效果的出色工具。它可以省去你大量时间，让你采用一种全新的方式来设计网站。
CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
HTML可以用于为网站添加布局效果，但有可能被误用。CSS则提供了更多选择，而且更为精确完善。现在所有浏览器都支持CSS。
CSS跟HTML的区别在哪里？
HTML用于结构化内容；CSS用于格式化结构化的内容。
采用CSS有哪些好处？
CSS是Web设计界的一次革命。CSS的优点包括：
- 通过单个样式表控制多个文档的布局；
- 更精确的布局控制；
- 为不同的媒体类型（屏幕、打印等）采取不同的布局；
- 无数高级、先进的技巧。
最有用：外部样式表（引用一个样式表文件）
我们推荐采用这种引用外部样式表的方法。外部样式表就是，一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件，放在Web服务器上或者本地硬盘上。
例如，比方说你的样式表文件名为style.css，它通常被存放于名为style的目录中。
现在的问题是：如何在一个HTML文档里，引用一个外部样式表文件（style.css）？答案是：在HTML文档里，创建一个指向外部样式表文件的链接（link）即可，就像下面这样：
<link rel="stylesheet" type="text/css" href="style/style.css" />
注意：要在href属性里给出样式表文件的地址。
这行代码必须被插入HTML代码的头部（header），即放在标签<head>和标签</head>之间。就像这样：
<html>
<head>
<title>我的文档</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。
这种方法的好处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。
适中：内部样式表
为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样：
<html>
<head>
<title>例子</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>这个页面是红色的</p>
</body>
</html>
最不实用：行内样式表
为HTML应用CSS的一种方法是，使用HTML属性style。通过行内样式表，将页面背景设为红色：
<html>
<head>
<title>例子</title>
</head>
<body style="background-color: #FF0000;">
<p>这个页面是红色的</p>
</body>
</html>
Span标签
span元素可以说是一种中性元素，它不对文档本身添加任何东西。但与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。
让我们用一句本杰明·弗兰克林的名言来举个例子：
<p>早睡早起使人健康、富裕又聪颖。</p>
假设我们想用红色，来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以用<span>标签，来标记上述每一点好处。然后，将这几个span设置为相同的class。这样就可以在样式表里，针对这个class定义特定的样式。
<p>早睡早起使人<span class="benefit">健康</span>、<span class="benefit">富裕</span>和<span class="benefit">聪颖</span>。</p>
相应的CSS代码如下：
span.benefit {
color:red;
}
Div标签
在html中使用最多的布局标签为div，它具有分割内容的作用，与CSS样式可让网页实现各种样式效果。
如前面例子所示，span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。
除去这点区别，div和span在组织元素方面相差无几。让我们来看一个例子。
<div class =“menu”>
（把菜单内容放在这里）
</div>
<div class =“article”>
（把文章内容放在这里）
</div>
CSS对这两部分内容分别进行不同样式的定义。
div.menu {
float: left;
width: 200px;
border-width: 2px;
border-style: dotted;
border-color: red;
}
div.article {
float: right;
width: 500px;
text-align: justify;
}
这个页面的菜单栏在左侧，文章内容在右侧。菜单栏的宽度为200像素，文章部分的宽度是500像素。我还给这个菜单栏，添加了2个像素的红色边框。
Tables标签
对于初学者来说，在HTML中创建表格似乎比较复杂，不过只要耐心细致地观察，你就会发现，表格实际上与其它HTML元素相似，也具有严格的逻辑结构。
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
以上可能是目前为止，你见过的最复杂的HTML例子，现在让我们来逐一解释，其中的各个标签含义：
用于创建表格的3个基本元素是：
- 首标签<table>和尾标签</table>分别表示一个表格的开始与结束。这是不难理解的。
- tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。这也容易理解。
- td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。这些都是容易理解的。
下面是对案例的详细解释。表格以<table>开始，其后的<tr>表明一个新行的开始，这一行中有两个单元格：<td>单元格1</td>和<td>单元格2</td>。该行以</tr>结束，然后紧接着以<tr>另起一行。该行也包含两个单元格，最后整个表格以</table>结束。
直观地讲：行是横向的单元格，列是从纵向的单元格。
表格当然有属性。比如属性border用于指定表格四周边框的厚度：
<table border="1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
表格边框的厚度是以像素（pixels）为单位来指定的。
与设定图像的显示宽度类似，像素和屏幕百分比也可以用于设定表格宽度：
<table border="1" width="30%">
该例将在浏览器中显示一个表格，其宽度是屏幕宽度的30％，你可以自己试一下。
表格有很多属性，比如下面这两个：
- align：指定整个表格、某行或某个单元格里，内容的水平对齐方式，比如左对齐、居中或右对齐。
- valign：指定某个单元格里内容的垂直对齐方式，比如靠上、置中或靠下。
<td align=”right” valign=”top”>单元格1</td>
文本类型Doctype
HTML有很多不同种类，你需要告诉浏览器，你的HTML使用的是哪种“方言”（比如XHTML）。具体做法是采用文档类型声明，文档类型声明应写在HTML文档的开头部分。
例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>网页标题</title>
</head>
<body>
<p>一些文字</p>
</body>
</html>
除了要给出文档类型声明以外（上例中第一行，它告诉浏览器这个文档是XHMTL），还需要在html标签中加入一些信息，也就是添加两个属性xmlns和lang。
xmlns是“XML-Name-Space”（XML名称空间）的缩写，其值固定为http://www.w3.org/1999/xhtml。关于名称空间，你只需要了解这么多。如果你想更多了解的话，可以登录W3C网站(https://www.w3.org/TR/1999/REC-xml-names-19990114/)，阅读有关名称空间（namespaces）的内容。
lang属性用于指定当前文档所使用的语言，其值采用ISO 639标准(https://www.w3.org/WAI/ER/IG/ert/iso639.htm#2letter)中列出的世界各国语言代码。上例中，我们指定文档采用的语言为英语（对应的属性值为“en”）。
通过HTML文档头部的文档类型声明，浏览器会知道如何读取和显示你的HTML。今后，可以使用上例作为模板来编写你的HTML文档。
课程总结
这节课再次剖析了网页代码，它包括：
- CSS（级联样式表）
- Span标签
- Div标签
- Table标签
- 文本类型声明!Doctype