1.4 HTML文档入门
1.HTML语言概述
HTML（Hypertext Marked Language，超文本标记语言）是用于创建Web文档的一种标记语言。自1990年首次用于网页编辑后，由于其编写的简易性，HTML迅速成为网页编程的主流语言，几乎所有的网页都是由HTML或其他语言程序嵌套在HTML语言中编写的。
在IE浏览器中任意打开一个网页，选择“查看→源文件”命令，系统会启动记事本程序，打开该网页的源程序代码，如图1-17所示。
图1-17 查看源程序代码
这些文本其实就是HTML源代码，可使用任意文字编辑器来编写，保存为.htm或.html格式即可。要制作HTML文档，一般有两种方法：一种是使用记事本之类的工具，直接输入HTML的源代码，然后保存为以html或htm为扩展名的网页文件；另一种方法是使用可视化的网页制作工具，根据用户的操作自动生成HTML代码，如Dreamweaver、FrontPage等软件。
2.HTML文档基本结构
一个HTML文档是由一系列的元素和标记组成的，HTML用标记来规定元素的属性和它在文件中的位置。HTML文档的结构包括头部分（head）和主体部分（body）两大部分，其中头部分描述浏览器所需的信息，主体部分则包含了所要说明的具体内容，具体结构如图1-18所示。
图1-18 HTML文档结构
由图1-18可以看出：
① HTML文档包括3个主要标记，文档标记＜html＞……＜/html＞、头部标记＜head＞……＜/head＞和主体标记＜body＞……＜/body＞。
② 标记不区分大小写。
③ 所有的标记都要用尖括号＜ ＞括起来。
④ 标记中如果包含多个参数，各参数之间用空格分隔，参数位置不受限制。
＜html＞标记用于HTML文档的最前面，用来标识HTML文档的开始，而＜/html＞标记恰恰相反，它放在HTML文档的最后面，用来标识HTML文档的结束，这两个标记必须成对使用。
在＜head＞……＜/head＞内，称为文件头部，可以包含＜title＞＜/title＞、＜script＞＜/script＞等标记，这部分信息不会在浏览器的窗口中显示出来。
在＜body＞……＜/body＞内，称为正文主体，可包含＜p＞＜/p＞、＜img＞、＜br＞、＜a＞＜/a＞等标记，其内容将在浏览器窗口中显示出来。
3.HTML文档常用标记
（1）标题标记
格式：＜title＞网页的标题＜/title＞
说明：该标记在＜head＞＜/head＞标记中，所包含的文字将出现在浏览器的标题栏上。当用户将此页面添加到收藏夹时，也会默认以该标题为名称，如图1-19所示。
图1-19 添加到收藏夹
（2）主体标记
格式：
＜body bgcolor="页面背景颜色" background="背景图像" text="文本颜色"＞
主体内容
＜/body＞
说明：包括所有主体内容，可以设置页面的背景颜色、背景图像、文字颜色等属性。背景颜色和文本颜色可以使用颜色名（如蓝色：blue）或颜色代码值（如蓝色：#0000FF）来表示。
例如：将图像tx.jpg设置为网页背景图像，网页文字颜色为蓝色。
＜body background="tx.jpg" text="#0000FF"＞
主体内容
＜/body＞
（3）文字标记
格式：
＜font size="文字大小" face="字体" color="文本颜色"＞文本内容＜/font＞
说明：＜font＞标记用于设置网页中文字的字号、字体、颜色等属性。设置字号时，＜font size=1＞（最小）、＜font size=7＞（最大）、＜font size=+1＞（比预设字大一级）、＜font size=-1＞（比预设字小一级）。
例如：将文本“最新通知”设置为楷体_GB2312，大小为4。
＜font size="4" face="楷体_GB2312"＞最新通知＜/font＞
（4）段落标记
格式：
＜p align="对齐方式"＞段落文本＜/p＞
说明：由＜p＞标记所标识的文字代表同一个段落的文字。其中align属性有left、center和right三个参数，这三个设置分别代表左对齐、居中对齐和右对齐。
例如：将标题“会议通知”居中显示。
＜p align="center"＞会议通知＜/p＞
（5）换行标记
格式：
＜br＞
说明：＜br＞是个单标记，HTML文件中任何位置只要使用了＜br＞标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行。
（6）水平线标记
格式：
＜hr align="对齐方式" color="颜色" width="宽度" size="高度" noshade＞
说明：在网页中插入一条水平分隔线，将不同的内容信息分开，使文字看起来清晰、明确。noshade用于设置水平为实心线（默认情况下为阴影线）。
例如：插入一条宽度800像素的红色水平线，并居中显示。
＜hr width="800"color="#ff0000"align="center"＞
（7）图像标记
格式：
＜img src="图像地址"align="对齐方式" width="宽度"height="高度"alt="替换文字"boder="边框宽度"＞
说明：在页面中插入一幅图像，图像地址可以在本地计算机，也可以是一个URL地址，但图像必须是GIF、JPG/JPEG或PNG格式的，其他格式的图像不能被插入到网页中。Alt参数用于设置图像的说明信息，当浏览器不能显示图像时，则用该参数指定的文本替换特定的图片。若图片正常显示，则当鼠标指向该图片时也会显示该文字。
例如：插入images文件夹中的图像tx.jpg，宽度和高度均为300像素，鼠标指向图像或图像不能正常浏览时提示“风景图片”。
＜img src="images/tx.jpg" width="300" height="300" alt="风景图片" ＞
（8）超链接标记
格式：
＜a href="目标文件的URL" target="打开窗口的方式"＞文本或图像＜/a＞
说明：为标记中的文本或图像添加超链接目标，浏览网页时单击可打开指定的目标文件。target用于指定打开目标窗口的方式，默认情况是在当前窗口中打开，如果要在新窗口中打开目标窗口，则可将target的属性值设为"_blank"。
根据链接目标的不同，可将超链接分为以下几项：
① 内部链接。链接到本地计算机上的文件，例如：
＜a href="1.html"＞单击查看1.html文件内容＜/a＞
② 外部链接。链接到本地站点以外其他任何一个站点上的文件，例如：
＜a href="http://www.sina.com"＞单击打开新浪网＜/a＞
③ E-mail链接。链接到一个电子邮件地址，单击将启动默认E-mail程序发送信件，例如：
＜a href="mailto:liming@163.com"＞请给我发信＜/a＞
④ 锚记链接。在某个Web页面中创建一个被称为“锚点”的标记，让页面上的另外一个位置引用，相当于在某个文件中重要之处做上书签，需要该部分时直接查找书签就能找到此部分。
例如：在某HTML文档中定义一个abc的锚记。
＜a name="abc" ＞第五章＜/a＞
然后在该文档的另外一个位置创建一个锚记链接。
＜a href="#abc"＞单击返回第五章＜/a＞
（9）表格标记
表格标记由表格标记、行标记和单元格标记3部分组成。
① 表格标记
＜table bgcolor="背景颜色"background="背景图像"width="宽度"height="高度"align="对齐方式"border="边框宽度" cellpadding="单元格边距" cellspacing="单元格间距"＞……＜/table＞
② 行标记
＜tr bgcolor="背景颜色" height="高度" align="对齐方式" ＞……＜/tr＞
③ 单元格标记
＜td rowspan="跨越行数" colspan ="跨越列数" bgcolor="背景颜色" background="背景图像"width="宽度"height="高度"align="对齐方式"＞……＜/td＞
说明：单元格边距指单元格内容与单元边框之间的像素数，单元格间距指相邻单元格之间的距离。
例如：创建一个如图1-20所示的表格，对应的源代码如下。
图1-20 表格
＜table width="300" height="95" border="1" cellpadding="0" cellspacing="0"＞
＜tr align="center"＞
＜td ＞新闻＜/td＞ ＜td ＞体育＜/td＞ ＜td＞音乐＜/td＞
＜/tr＞
＜tr＞
＜td colspan="3" bgcolor="#FFCCFF"＞ ＜/td＞
＜/tr＞
＜/table＞
（10）表单标记
格式：
＜form name="表单名称" method="提交方式" action="文件"＞
说明：表单标记与动态网站制作是分不开的，form标记中，action="文件"指这个表单提交后，将传送给哪个文件处理；method="提交方式"指将表单信息提交服务器的方式，一般包括POST（以文件形式不限制长度提交）和GET（附加在URL地址后限制长度提交）两种。
使用＜form＞标记定义表单后，就要通过具体的表单对象添加信息，常见的表单对象有以下几种。
① 文本域
◇ 单行文本域，用户输入的信息原样显示。其语法格式为：
＜input name="文本域名称" type="text" value="初始值"＞
◇ 密码文本域：用户输入的信息以“●”形式显示。其语法格式为：
＜input name="文本域名称" type="password" value="初始值"＞
◇ 多行文本域：输入信息可以是多行，一般用于简介、留言等选项。其语法格式为：
＜textarea name="文本框名称" cols="文本框宽度" rows="行数"＞＜/textarea＞
② 选择域
◇ 单选按钮：只允许选取一项，一般用于性别等选项。其语法格式为：
＜input name="选择域名称" type="radio"＞
◇ 复选框：可以多项选取，一般用于爱好、特长等选项。其语法格式为：
＜input name="选择域名称" type="checkbox"＞
③ 菜单域
可提供让浏览者在给出的菜单中作一个选择，如选择籍贯、类别、日期、学历等。
◇ 下拉菜单：提供一个下拉式菜单，其语法格式为：
＜select name="菜单名称"＞
＜option＞菜单中的第1个值
＜option＞菜单中的第2个值
……
＜/select＞
◇ 滚动菜单：提供一个带滚动条的菜单，其语法格式为：
＜select name="菜单名称" size="显示选择项的个数"＞
＜option＞菜单中的第1个值
＜option＞菜单中的第2个值
……
＜/select＞
④ 按钮域
◇ 提交按钮：将所输入的内容提交给相关程序，让服务器对其进行处理。其语法格式为：
＜input type="submit" name="按钮域名称" value="提交"＞
◇ 重置按钮：把刚输入的内容清除，重新输入。其语法格式为：
＜input type="reset" name="按钮域名称" value="重置"＞
例如，创建如图1-21所示的表单，对应的源代码如下。
图1-21 表单
＜form id="form1" name="form1" method="post" action="123.asp"＞
请填写如下个人信息＜br＞
姓名
＜input type="text" name="textfield" id="textfield" /＞
＜br＞
性别
＜input type="radio"name="xb"value="男"id="xb_0"/＞ 男
＜input type="radio"name="xb"value="女"id="xb_1"/＞ 女
＜br＞
籍贯 ＜select name="select"id="select"＞
＜option＞山东省＜/option＞
＜option＞北京市＜/option＞
＜/select＞
＜br＞
爱好
＜input type="checkbox" name="checkbox" id="checkbox"＞体育
＜input type="checkbox" name="checkbox2" id="checkbox2"＞书法
＜input type="checkbox" name="checkbox3" id="checkbox3"＞音乐
＜br＞
个人简历
＜textarea name="textarea" cols="45" rows="5"＞＜/textarea＞
＜br＞
＜input type="submit"name="button"value="提交"＞ ＜br＞
＜/form＞
（11）滚动标记
格式：
＜marquee behavior="方式" direction="方向" scrollamount="速度"＞滚动的文本＜/marquee＞
说明：方向（direction）：left（左）、right（右）、up（上）、down（下）。
方式（behavior）：alternate（来回滚动）、slide（滚动一圈）、scroll（循环滚动）。
速度（scrollamount）：值越大速度越快。
例如：让“今天天气不错，心情很好！”从左向右循环滚动。
＜marquee behavior="scroll" direction="right"＞
今天天气不错，心情很好！
＜/marquee＞