期末考试即将到来，赶在人机界面考试之前，先把 HTML 复习一下。
一、HTML 概述
1. HTML的基本概念
1.1 HTML 介绍
HTML是Hyper Text Markup Language(超文本标记语言)的缩写，是构成Web页面的基本元素，是一种规范，一种标准。
HTML不是一种编程语言，而是一种描述性的标记语言，通过标识符来标识网页中内容的显示方式，例如图片的显示尺寸、文字的大小、颜色、字体等。
浏览器能够对这些标记进行解释，按照要求显示出文字、图像、动画、媒体等网页内容。
HTML文件的后缀名是 .html 或 .htm ，由于HTML是一个纯文本格式的ASCII文件，可以用任何文本编辑器编写HTML网页文件。
主要功能：
- 格式化文本：设置文本字体、字号、颜色以及文本段落、对其方式等。
- 创建列表：把信息用一种易读的方式表现出来。
- 建立表格：表格为浏览者提供快速找到所需信息的显示方式，还可以用表格来布局网页。
- 插入图片：还可以设置图像的各种属性，如大小、边框、布局等。
- 加入多媒体：在网页中加入音频、视频、动画等效果。
- 添加交互式表单：文本框、单选框、复选框、列表框和按钮等。
1.2 标记符
标记符又称标签，用来控制网页内容显示效果。用<>括起来。
标记符不区分大小写，但是为了HTML文档的维护，通常约定标记符使用大写字母。
大部分标标记符都是成对出现的，包括开始标记符和结束标记符，结束标记符比开始标记符多一个斜线，开始标记符和相应的结束标记符定义了标记符所影响的范围。
<标记符>受影响的内容标记符>
1.3 标记符的属性
标记符仅仅用来标识所显示的内容，想要控制这些内容，就需要在标记符后面加上相关的属性来实现，属性用来描述标记符标识对象的特征。
所有的属性都放在开始标记符的尖括号里，属性与标记符之间用空格分割，属性的值放在相应的属性之后，用等号分隔，而不同的属性之间用空格分隔并且无先后顺序之分。格式为：
<标记符 属性1=属性值1 属性2=属性值2 ...>受影响的内容
//例如
"red" size="3">属性示例
2. HTML 的基本结构
HTML网页文件主要由文件头和文件体两部分内容构成。文件头是对文件进行一些必要的定义，文件体是HTML网页的主要部分，它包括文件所有的实际内容，下面是HTML 网页的基本结构：
文件头
文件体
2.1 HTML 文件标记符
和放在网页文档的最外层，表示这对标记符之间的内容是HTML文件。
2.2 HEAD 文件头标记符
和是 HTML 文件头标记符，它用来说明文档的整体信息，所标记的内容并不会出现在WWW浏览器所看到的窗体中。通常与某些标记符一起使用，如：
用来标识网页文件的标题，出现在浏览器的标题栏中，一个网页只能有一个标题，并且只能出现在文件的头部。
-
标识符是用来提供文档的媒体信息，目的是便于浏览器识别网页内容或便于搜索引擎进行查找和分类。
<META http-equiv="Content-Type" content="text/html;charset=gb2312">
<META name="Keywords" content="关键字">
<META name="Description" content="站点主要内容">
<META name="Author" content="作者名称">
2.3 BODY 文件体标记符
是HTML文件的主体标记符。网页正文中的所有内容包括文字、图像、声音和动画等都包含在这对标记符之间，它的格式为
"color" background="image-url" text="color" link="color" vlink="color" alink="color" topmargin="value" leftmargin="value">...
- bgcolor：背景颜色，默认设置为白色。
- background：背景图片，可以使用的图片格式为GIF，JPG等。
- text：正文文字颜色，它定义的颜色将应用于整篇文档。
- 超链接颜色：link、vlink、alink分别控制普通超链接、访问过的超链接、当前活动的超链接的颜色。
- topmargin 和 leftmargin：设置网页主体内容距离网页顶端和左端的距离。
2.4 第一个网页
<HTML>
<HEAD>
<TITLE>my first pageTITLE>
HEAD>
<BODY>
This is my First homePage !
BODY>
HTML>
3. HTML 语法的基本规则
- HTML文件以纯文本形式存放，扩展名为HTM或HTML。如果系统为UNIX系统，则扩展名必须为HTML。
- HTML不区分大小写。
- 多数HTML标记可以嵌套，但是不能交叉。
- 一行可以写多个标记，一个标记也可以分多行写，不用任何续行符号，标记中的一个单词不能分两行写。
- 换行必须用
标记，分段必须用和
标记(可以省略)，多个连续的空格需要“ ”转义符号。
- 不应该有游离于标记之外的文字或图像，以免产生错误。
- 除字符串中的标点符号，其余的都要使用英文标点字符。
二、文字与段落标记
1. 标题字标记
功能：用于定义文章内章节标题的显示格式，并且标题字会单独成行。
格式：
<Hn align="对齐方式">标题文字Hn>
align用来设置标题在页面中的对齐方式：left（左对齐）、center（居中）、right（右对齐）、bottom（位于底端）、top（位于顶端）。
H1为一级标题
H2为二级标题
…
H6为六级标题
2. 文字格式标记
功能：设置网页中普通文字的显示效果，如文字大小、字体、颜色等。
格式：
<FONT face="字体" size="字号" color="颜色">被设置的文字FONT>
- face：用来设置字体。当文字为汉字时，可设置为宋体、幼圆、隶书、楷体_GB2312等。当文字为英文时，字体可设置为Times New Roman等约50种字体。
- size：设置文字大小。取值范围为1~7，取1时最小，取7时最大。
- color：设置文字颜色，颜色的取值可以是十六进制的RGB颜色码或者HTML给定的颜色常量名。
3. 字型标记
功能：设置文字的风格，如加粗、斜体、带下划线、上标、下标等。
格式：这是一组标记，可以单独使用，也可以混合使用产生复合修饰效果，常用的标记格式如下：
…：粗体
…：斜体
…：带下划线
…或…：删除字效果
…：使文字大小相对于前面增大一级。
…：使文字大小相对于前面缩小一级。
…：下标
…：上标
…：使文字显示闪烁效果
…：以等宽体显示西文字符
…：引用方式的字体，通常是斜体
…：强调文字，通常用斜体加黑体
…：强调文字，通常用斜体加黑体
4. 段落标记和强制换行标记
4.1 段落标记
段落标记
定义一个新段落的开始，不但能使后面的文字转换到下一行，而且还可以使段与段之间多一空行。
格式：
"对齐方式">
或
"对齐方式">...\
align的取值可以为left、center或right，分别表示居左、居中、居右，缺省使默认为居左。
4.2 强制换行标记
强制换行标记
通常单独出现，放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，不会在行与行之间留下空行。
格式：
文字
注意：通常一个段落标记
可以看做是两个强制换行标记
。
5. 水平线标记
功能：水平线
可以在页面中显示一条水平线，将页面内容分隔开，使其整齐明了。
格式：
align="对齐方式" size="横线粗细" width="横线长度" color="横线颜色" noshade>
- align：设定横线放置横线的位置，可以选择left、right或center。
- size：设定线条的粗细，以像素为单位，默认为2。
- width：设定线段的长度，可以是绝对值（像素为单位），也可以是相对值（百分比为单位）。
- color：设定线条的颜色，默认值为黑色，颜色可以用相应的应为单词或以#引导的十六进制代码来表示。
- noshade：设定线条为平面显示（没有三维效果），若缺省会有阴影或立体效果。
6. 空格
HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（ ）在不同浏览器中宽度各异。
- 是不换行空格，全称No-Break Space，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的。
- 是“半角空格”
- 是“全角空格”
- 是窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是emsp之六分之一宽。
- 是零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： #8204;
- 是零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: #8205; ）。
7. 其他标记
7.1 分区显示标记
可以使文本块或一段文字在网页上：左对齐、居中对齐和右对齐。
格式：
<DIV align="对齐方式">文本或图像DIV>
align的取值分别为left、center和right。
7.2 特殊符号标记
” & “是特殊字符的开始，“ ; ” 是特殊字符的结束。
| 特殊字符 |
全称 |
所替代的字符 |
说明 |
| lt |
less than |
< |
小于号 |
| gt |
greater than |
> |
大于号 |
| & |
ampersand |
& |
与 |
| quot |
quotation mark |
“ |
双引号 |
| apos |
apostrophe |
‘ |
单引号 |
三、列表标记
1. 无序列表标记
项目间并无顺序关系，仅仅利用条目来呈现资料，在各条列前面均有一符号以示区隔。
格式：
type="符号类型">
- type="符号类型">列表项目一
- type="符号类型">列表项目二
- type="符号类型">列表项目三
：列表的结束
：一个列表项目
type：用来设置每个项目前显示符号类型，共有三种选择：
| 符号类型 |
含义 |
| disc |
实心圆 |
| circle |
空心圆 |
| square |
实心方块 |
中的type属性表示所有列表项使用统一的符号类型。
- 中的type表示不同的列表项可以使用不同的符号类型。
2. 有序列表标记
用来设置有前后顺序之分的列表项。
格式：
type="序号类型" start="起始号码">
- type="序号类型">列表项目一
- type="序号类型">列表项目二
- type="序号类型">列表项目三
：列表的开始
：列表的结束
- ：一个列表项目
type：用来设置每个项目前显示的序号类型，其值可以为：
| 序号类型 |
含义 |
| 1 |
阿拉伯数字 |
| A |
大写英文字母 |
| a |
小写英文字母 |
| I |
大写罗马字母 |
| i |
小写罗马字母 |
start：设置序号的开始值，默认值为1。
3. 自定义列表标记
用于需要对列表条目进行简短说明的场合。
格式：
- 列表条目一
- 条目一的说明
- 列表条目二
- 条目二的说明
...
和
表示自定义列表的开始和结束。
- ：每项自定义条目名称。
- ：每项自定义条目的说明，自动向右缩进。
四、表格标记
用户可以通过表格方便灵活地排版。
表格标记可以用来建立基本表格。
格式：
"对齐方式">表格标题
| 表头一 | 表头二 | ...表头n |
| 表项一 | 表项二 | ...表项n |
| 表项一 | 表项二 | ...表项n |
...
| 属性类型 |
含义 |
| width |
宽度 |
| height |
高度 |
| align |
对齐方式 |
| background |
背景图片 |
| bgcolor |
背景颜色 |
| border |
边框的宽度（以像素为单位） |
| bordercolor |
边框颜色 |
| bordercolorlight |
边框明亮部分的颜色 |
| bordercolordark |
边框昏暗部分的颜色 |
| cellspacing |
单元格之间的间距 |
| celladding |
单元格内容与边界之间空白距离的大小 |
-
…标记表示对表格标题的说明。
align属性表示标题相对于表格的位置。
left、right、center、top和bottom分别表示标题在表格上部左边、上部右边、上部居中、表格上部和表格下部。
…
标记定义行，该标记中间的内容显示在一行，此标记对只能放在…标记之间使用，主要性质如下所示：
| 性质类型 |
含义 |
| align |
行内容的水平对齐 |
| valign |
行内容的垂直对齐 |
| bgcolor |
背景颜色 |
| bordercolor |
边框颜色 |
| bordercolorlight |
亮边框部分的颜色 |
| bordercolordark |
暗边框部分的颜色 |
| 和 | 表示单元格标记，这两个标记必须嵌套在 | 标记中，成对出现。| 是标头标记，一般位于首行或首列，标记之间的内容就是位于该单元格的标题内容，其中的文字以粗体居中显示。 | 是该单元格中的具体数据内容， | 和 | 标记的属性都是一样的，设定如下：
| 性质类型 |
含义 |
| colspan |
单元格向右打通的栏数 |
| rowspan |
单元格向下打通的栏数 |
| width/height |
单元格的宽和高，接受绝对值和相对值 |
| align |
水平位置，可选left、center、right |
| valign |
垂直位置，可选top、middle、bottom |
| bgcolor |
单元格底色 |
| bordercolor |
单元格边框颜色 |
| bordercolorlight |
亮边框部分的颜色 |
| bordercolordark |
暗边框部分的颜色 |
| background |
背景图片 |
- 要创建多行、多列的单元格，只需在 | 或 | 加入ROWSPAN或COLSPAN属性的属性值，表明在表格中要跨越的行或列的个数。
跨多列： | |
跨多行： | |
五、多媒体标记
1. 图像标记
用![]() 标记可以在当前位置插入图像。
格式：
<IMG src="文件名" alt="说明" width="x" height="y" border="n" hspace="h" vspace="v" align="对齐方式">
属性：
| 属性类型 |
含义 |
| src |
图像的文件名，即路径 |
| alt |
浏览器尚未完全读入图像时，在图像位置显示的文字或者图像显示时鼠标悬停在图像上的文字 |
| width |
宽度（像素数或百分数），通常设为图像的真实大小以避免失真 |
| height |
高度（像素数或百分数） |
| border |
边框宽度 |
| hspace |
水平方向空白 |
| vspace |
垂直方向空白 |
| align |
在页面的位置，可设为left、right、top、middle和bottom |
2. 音频标记
在网页中加入声音，声音文件可以是*.WAV、*.AU、*.MID等。
格式：
"声音文件的URL地址" loop="播放次数">
src表示声音文件存放的地址
loop控制播放次数，取-1或者INFINITE时，声音将一直播放到浏览者离开网页为止。
3. 视频标记
在页面中放置SWF动画（即Flash动画）、mp3音乐、电影等多种格式的媒信息。
格式：
<EMBED src="file_URL" height="value" width="value" hidden="hidden_value" autostart="auto_value" loop="loop_value">EMBED>
| 属性类型 |
作用 |
| src |
指明多媒体文件所在的路径 |
| height和width |
设置播放区域，取值为像素点数或者相对于窗口的百分比 |
| hidden |
控制播放面板的显示和隐藏，True表隐藏，False表显示 |
| autostart |
中国多媒体内容是否自动播放，True表自动播放，False表不自动播放 |
| loop |
控制是否循环播放，True表无限次循环，False表仅播放一次 |
六、超链接标记
功能：建立超链接。
格式：
<A href="URL地址" target="打开窗口的方式">显示的文本或图像A>
href属性设置要链接到的目标URL地址，若资源放在自己的服务器上，可以写相对路径，否则要写绝对路径。
target设置要显示超链接内容的窗口方式。
| target取值 |
说明 |
| _blank |
在新窗口中显示链接指向的页面 |
| _parent |
在当前页面的父级框架集中显示链接页面 |
| _self |
在当前文档的框架集中显示链接页面 |
| _top |
在链接所在的完整窗口中显示链接页面 |
| 框架名称 |
只应用于框架中，结果显示在该“框架名称”指定的框架窗口中 |
1. 创建指向其他页面的超链接
//链接到目录中的文件
<A href="目标文件的路径">显示的文本或者图像A>
//链接到Internet上的网页
<A href="网址（绝对路径）">显示的文本或者图像A>
//E-mail 超链接
<A href="mailto:邮件地址">指向E-mail 地址的超链接A>
2. 创建指向本页面中的超链接
在当前页面内实现超链接，需要定义超链接标记和书签标记。
超链接标记格式：
<A href="#记号名">显示的文本或者图像A>
书签标记格式：
<A name="记号名">目标文本附近的字符串A>
单击显示的文本或者图像，将跳转到“记号名”开始的文本。
七、表单标记
表单标记主要用来收集信息，当单击表单中的提交按钮时，输入在表单中的信息就会从客户端的浏览器上传到服务器中，然后由服务器中的有关表单处理程序进行处理，处理后将用户所需信息传送到客户端浏览器上，这样网页就有了交互性。
标记
创建一个表单，即定义表单的开始与结束的位置。
格式：
- name：设置表单的名称
- method：指出采用何种HTTP方法来发送表单数据，可以用 HTTP GET 方法 (method=”get”)，可以用 HTTP POST 方法 (method=”post”)。
- action：定义表单处理程序的位置及名称。
定义输入区，可以在里面输入信息。
格式：
"field_name" type="type_name">
- name：设置输入区的名称，服务器就是通过name来获得该区域数据的。
- type：设置输入区域的类型。
隐藏表单，一般用来传递参数，而又不想显示在客户端。如网站购买产品，点击提交，通常程序会自动生成一个产品的订单标号，用于后台操作或其它，而此编号通常不必要给用户看。
3. 和
标记用来创建一个下拉列表框或可以复选的列，它必须放在标记对之间。
格式：
4. 标记
用来创建一个可以输入多行的文本框，在其中可输入更多的文本，此标记要放在 标记对之间。
格式：
<TEXTAREA name="name" rows="value" cols="value">TEXTAREA>
- name设置文本框名称。
- rows和cols属性分别设置文本框的行列数，以字符数为单位。
八、框架标记
框架可以把浏览器划分成几个子窗口，每个子窗口可以调入各自的HTML文档形成不同的页面，也可以按照一定的方式组合完成特殊的效果。可以在一个框架中放置目录并设置链接，点击链接，内容显示在另一个框架中。
框架由框架集和框架组成。
- 框架集是在一个文档内定义的一组框架结构的HTML网页。它定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架网页等。
- 框架是指在网页上定义的一个显示区域。
在使用框架集的页面中，页面的 标记被框架集 |
