网页制作六六顺｜第四讲：唯有源头活水来
网页基本技术
OK，前一次咱们聊过了网站的总体建设，是有些大而空哦！须知网站总是由具体的网页组成的，对初学的您来说，还是需要详细掌握网页的具体制作的。
这一讲咱们介绍网页制作的基本技术。
一、HTML简介
HTML（HyperText Markup Language，超文本标记语言）是一种标记语言。它不是编程语言而是描述性语言，因而HTML文档不需要编译。
HTML文档是纯文本文件，HyperText的意义在于：HTML允许在纯文本中嵌入一些标记（Tag），以指导浏览器对文本的操作。
基本上，HTML文档由纯文本和HTML元素组成。大部分HTML元素包括起始标记和结束标记，少数HTML元素没有结束标记。起始标记的格式如<ELEMENT>，结束标记的格式如</ELEMENT>，起始标记和结构标记之间是HTML元素的内容。个别HTML元素（如行结束元素BR）没有内容。元素名不区分大小写。
HTML元素可以具有属性和相关属性值。属性名和属性值出现在起始标记的结束符（>）前，属性名和属性值以等号（=）相连，属性值可以使用英文引号括起来。一个元素可以有多个属性，彼此以空格分隔，顺序可以任意。属性名不区分大小写，属性值一般也不区分大小写。
HTML文档可以包含注释，注释通常以 <!– 开始，以 –> 结束。HTML注释只用来表示备注信息，浏览器不处理注释中的内容。
二、HTML网页总体结构
一个HTML文档通常由三部分组成：版本信息行、HTML标题（header）以及文档主体（body），其中主体是HTML文档的主要部分，包含实际的文档内容。HTML文档的总体框架是：
<! HTML版本信息说明 >
<HTML>
<HEAD>
头部元素、元素属性及内容
</HEAD>
<BODY>
主体元素、元素属性及内容
</BODY>
</HTML>HTML版本信息说明用来说明HTML文档类型（DTD），它总是位于HTML文档的第一行，形式如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">通常HTML版本信息由HTML编辑器自动生成，在HTML文档中也可以不包含。
一个HTML网页，它应该总是以<HTML>开始，以</HTML>结束，并包括HTML标题（<HEAD>……</HEAD>）和HTML主体（<BODY>……</BODY>）两个主要的部分，HEAD和BODY元素的起始和结束标记之间可插入许多其他标记。
HEAD元素最有意义的元素是TITLE，它用来指定HTML网页的题目，浏览器会将该题目显示在窗口顶端的标题栏内。它不支持任何属性。
<BODY>的属性可用来设置网页的背景色彩和背景图象、文字色彩、网页边距等。这些属性包括：bgcolor（背景色彩），text（非可链接文字的色彩），link（可链接文字的色彩），alink（正被点击的可链接文字的色彩），vlink（已经访问过的可链接文字的色彩），background（背景图象，由图象URL指定；属性值等于FIXED时为非滚动背景图象），leftmargin（左页边距），topmargin（上页边距）。其中，颜色值可按十六进制值或颜色名给定。
三、文档字体设置
HTML可用标记对文档字符进行字体（Font）设置，从而避免浏览器按单一格式的字符显示文档内容。字体设置包括标题、字体、字号、字符颜色及字符变形等。
1. 标题元素
HTML支持六级标题，其元素分别为H1、H2、H3、H4、H5和H6。每对起始标记和结束标记用来指定文档的章节标题。
标题元素会自动在标题前后插入空行，因此不必用换行元素插入空行，同时也不能在一行之内使用不同的标题格式。
标题字体支持ALIGN属性。ALIGN属性用来指定对象的排版格式，其属性值可以是LEFT、CENTER、RIGHT、BOTTOM、JUSTIFY、TOP和DECIMAL等，依对象的类型而定。对于标题元素，主要使用LEFT、CENTER和RIGHT三种属性值。例如：
<H1 ALIGN=CENTER>今天天气真好！<H1>2. FONT元素
FONT元素用来设置文档的字体。通过改变其属性，可对字体进行不同的设置。FONT元素的常用属性是SIZE和COLOR：
- SIZE：用来决定字号的大小，有效字号范围是1（最小）到7（最大），默认字号是3。
- COLOR：指定文档字符的颜色。颜色值可按十六进制数或预定义颜色名方式给定。
FONT元素的使用示例：
<FONT SIZE=7 COLOR=RED>今天天气真好！</FONT>3. 字符修饰元素
HTML中规定了大量字符修饰处理的元素，它们能够在不改变字体、字号的基础上对字形进行改变。这些元素分为物理样式（Physical Style）和逻辑样式（Logical Style）两大类。它们一般都不支持任何属性。
常见的物理样式元素包括：
- B元素：指定一段文本，使浏览器将其显示为粗体字。
- I元素：指定一段文本，使浏览器将其显示为斜体字。
- U元素：指定一段文本，使浏览器将其显示为带下划线的文字。
- TT元素：指定一段文本，使浏览器将其显示为固定大小的打字体字符。
- SUP元素：指定一段文本，使浏览器用较小的字体将其显示为上标。
- SUB元素：指定一段文本，使浏览器用较小的字体将其显示为下标。
常见的逻辑样式元素包括：
- EM元素：对文档中的某段文本进行强调，通常用斜体字显示出来。
- STRONG元素：对文档中的文本进行强调，通常用粗体字显示出来。
- CITE元素：用来指明文档中出现的书名或其他引用内容。
物理样式和逻辑样式字体元素可与FONT元素组合使用，从而设计出丰富的字符效果。例如：
<I><FONT SIZE=+1>网页<FONT SIZE=5>制作<B>讲座</B>
</FONT></FONT></I>四、网页版式设置
1. 分行控制
浏览器是忽略HTML文档中的自然分行与段落的，分行和段落设置必须通过HTML标记来进行。
分行控制元素包括分段元素P和分行元素BR。
分段元素P用来定义文档中的一个段落，段落的缩进、第一个词前面的空格以及其它特性主要由浏览器决定，也可能受其他元素或版面风格的影响。
标记<P>可以看作是段落的开始，而标记</P>则可视作段落的结束。单独一个<P>事实上会添加一个空行。P元素的结束标记</P>经常可以不写，但当P元素有ALIGN属性时需要写出。
换行元素BR在HTML文档中增加一个换行，指示浏览器执行一个断行动作。它与P元素有所不同，它只是进行换行，其他字符和段落设置都不改变。
2. 列表元素
列表在文档中占有重要地位，HTML规定了多种列表元素，可设置无序列表（项目列表）、有序列表和自定义列表等。
UL元素可用于创建一个无序列表，并以圆点等项目符号开始。列表中的每一项目前用LI元素（LI的意思是List Item）加以标识。LI元素可以不加结束标记。
无序列表元素的用法如下例：
<UL>
<LI> Apple
<LI> Pear
<LI> Grape
</UL>有序列表元素OL与无序列表类似，但项目符号为序号数字或字母（默认为阿拉伯数字形式）。
除UL和OL元素外，HTML包括的列表元素还有：
- 定义列表元素DL、DT和DD
- 目录列表元素DIR和LI
- 菜单列表元素MENU和LI
3. 预格式化文本
浏览器通常会忽视HTML文档中的自然行与段落等排列，但使用预格式化文本标记后，可以让浏览器保留显示这些格式。
预格式化文本主要使用元素PRE。PRE使文本块以等宽字体显示，并保留预先排列的格式。
4. 地址元素
创建HTML文档时，应该给文档读者提供与作者联系的方法。HTML规定用ADDRESS元素来指定作者的所有权、名字、地址（常规地址和Email地址）、电话和传真等。ADDRESS元素通常放在文档结束处，浏览器多以斜体字来显示ADDRESS元素的内容，并在其前后各加一个换行。该元素不支持任何属性。
五、网页修饰
网页修修饰的HTML元素不少。这里仅介绍水平分隔线（Horizontal Rule）元素HR。HR可在HTML文档的不同章节之间插入一个分界标志。不带任何属性的<HR>标记显示效果为整个窗口宽度的带阴影的下凹线。
HR元素可用于文档结束处，将正文与地址分开：
<HR>
<ADDRESS>February 8, 1995, CERN</ADDRESS>通过不同的属性，可以设置不同的水平分隔线，包括大小、宽度、颜色和对齐方式等。
六、超链接
HTML的优势并不是网页的排版功能，这方面它显然不如排版语言。它最大的优势在于其超链接能力。可以毫不夸张地说，超链接虽然使用起来并不十分复杂，但却可以链接到世界上的任何地方。
超链接的实现主要是通过锚点元素（Anchor element）A来实现的。简单地说，A元素标识一些文本，使其成为超文本链接的起点和/或目的地。A元素可支持较多属性，其中最重要的是HREF属性和NAME属性。
1. HREF属性
如果A元素中包含HREF属性，则该元素的起始标记与结束标记之间的文本就变成为超文本（hypertext）。如果此超文本被读者选中，就会移动到另一个文档，或本文档的另一个位置。另一文档或本文档另一位置的网络地址就由HREF属性来定义。在浏览器中，超文本通常会以不同颜色且带下划线的字符表示。一般未访问、正选中和已访问用不同颜色表示，浏览器有默认颜色，但也可以通过BODY元素的LINK、ALINK和VLINK属性改变其颜色设置。
使用示例：
See <A HREF="http://www.bh.com/">Heart</A>'s information for more details.HREF属性还允许使用HREF=”#identifier” 的格式来指向同一文档或不同文档的另一个锚点。例如可以这样用：
The <A HREF="document.html#glossary">glossary</A> defines terms used in the document.在此例中，选中“glossary”后会把读者带到另一个锚点，即由语句
<A NAME="glossary">Glossary</A>定义的锚点（NAME属性下述）。文档document.html可以是同一文档（此时可省略文档的文件名），也可以是不同文档。如果是不同文档，则HREF属性中可指定相对URL地址。
浏览器还允许使用其他几种形式的HREF属性，它们对应不同形式的URL。
2. NAME属性
如果A元素带有NAME属性，则意味着此锚点为链接的目标。NAME属性的值就是锚点的标识。锚点标识可以是任意字符串，但在HTML文档内必须唯一。NAME属性所代表的锚点在浏览器中没有任何显示。
NAME属性与HREF元素联合使用示例：
<A NAME="coffee">Coffee</A> is an exmple of...
An example of this is <A HREF="#coffee">coffee</A>.注意，HREF在引用NAME属性值时前面要加 # 符。事实上，当另一文档引用NAME所指定的锚点时，引用格式应该是URL#name：
<A HREF="drinks.html#coffee">
