期末考试即将到来，赶在人机界面考试之前，先把 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 ...>受影响的内容</标记符>
//例如
<FONT color="red" size="3">属性示例</FONT>2. HTML 的基本结构
HTML网页文件主要由文件头和文件体两部分内容构成。文件头是对文件进行一些必要的定义，文件体是HTML网页的主要部分，它包括文件所有的实际内容，下面是HTML 网页的基本结构：
<HTML> //HTML 文件开始
<HEAD> //文件头开始
文件头
</HEAD> //文件头结束
<BODY> //文件体开始
文件体
</BODY> //文件体结束
</HTML> //HTML 文件结束2.1 HTML 文件标记符
<HTML>和</HTML>放在网页文档的最外层，表示这对标记符之间的内容是HTML文件。
2.2 HEAD 文件头标记符
<HEAD>和</HEAD>是 HTML 文件头标记符，它用来说明文档的整体信息，所标记的内容并不会出现在WWW浏览器所看到的窗体中。通常与某些标记符一起使用，如：
- <TITLE>…</TITLE>
用来标识网页文件的标题，出现在浏览器的标题栏中，一个网页只能有一个标题，并且只能出现在文件的头部。
- <META>
<META>标识符是用来提供文档的媒体信息，目的是便于浏览器识别网页内容或便于搜索引擎进行查找和分类。
//标记网页的解码方式，即说明网页使用的文字和语言
<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 文件体标记符
<BODY></BODY>是HTML文件的主体标记符。网页正文中的所有内容包括文字、图像、声音和动画等都包含在这对标记符之间，它的格式为
<BODY bgcolor="color" background="image-url" text="color" link="color" vlink="color" alink="color" topmargin="value" leftmargin="value">...</BODY>- bgcolor：背景颜色，默认设置为白色。
- background：背景图片，可以使用的图片格式为GIF，JPG等。
- text：正文文字颜色，它定义的颜色将应用于整篇文档。
- 超链接颜色：link、vlink、alink分别控制普通超链接、访问过的超链接、当前活动的超链接的颜色。
- topmargin 和 leftmargin：设置网页主体内容距离网页顶端和左端的距离。
2.4 第一个网页
<HTML>
<HEAD>
<TITLE>my first page</TITLE>
</HEAD>
<BODY>
This is my First homePage !
</BODY>
</HTML>3. HTML 语法的基本规则
- HTML文件以纯文本形式存放，扩展名为HTM或HTML。如果系统为UNIX系统，则扩展名必须为HTML。
- HTML不区分大小写。
- 多数HTML标记可以嵌套，但是不能交叉。
- 一行可以写多个标记，一个标记也可以分多行写，不用任何续行符号，标记中的一个单词不能分两行写。
- 换行必须用<BR>标记，分段必须用<p>和</p>标记(</p>可以省略)，多个连续的空格需要“ ”转义符号。
- 不应该有游离于标记之外的文字或图像，以免产生错误。
- 除字符串中的标点符号，其余的都要使用英文标点字符。
二、文字与段落标记
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. 字型标记
功能：设置文字的风格，如加粗、斜体、带下划线、上标、下标等。
格式：这是一组标记，可以单独使用，也可以混合使用产生复合修饰效果，常用的标记格式如下：
<B>…</B>：粗体
<I>…</I>：斜体
<U>…</U>：带下划线
<STRIKE>…</STRIKE>或<S>…</S>：删除字效果
<BIG>…</BIG>：使文字大小相对于前面增大一级。
<SMALL>…</SMALL>：使文字大小相对于前面缩小一级。
<SUP>…</SUP>：下标
<SUB>…</SUB>：上标
<BLANK>…</BLANK>：使文字显示闪烁效果
<TT>…</TT>：以等宽体显示西文字符
<CITE>…</CITE>：引用方式的字体，通常是斜体
<EM>…</EM>：强调文字，通常用斜体加黑体
<STRONG>…</STRONG>：强调文字，通常用斜体加黑体
4. 段落标记和强制换行标记
4.1 段落标记
段落标记<P>定义一个新段落的开始，不但能使后面的文字转换到下一行，而且还可以使段与段之间多一空行。
格式：
<P align = "对齐方式">
或
<P align = "对齐方式">...\</p>align的取值可以为left、center或right，分别表示居左、居中、居右，缺省使默认为居左。
4.2 强制换行标记
强制换行标记<BR>通常单独出现，放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，不会在行与行之间留下空行。
格式：
文字 <BR>
注意：通常一个段落标记<p>可以看做是两个强制换行标记<BR><BR>。
5. 水平线标记
功能：水平线<HR>可以在页面中显示一条水平线，将页面内容分隔开，使其整齐明了。
格式：
<HR 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. 无序列表标记
项目间并无顺序关系，仅仅利用条目来呈现资料，在各条列前面均有一符号以示区隔。
格式：
<UL type="符号类型">
<LI type="符号类型">列表项目一
<LI type="符号类型">列表项目二
<LI type="符号类型">列表项目三
</UL><UL>：列表的开始
</UL>：列表的结束
<LI>：一个列表项目
type：用来设置每个项目前显示符号类型，共有三种选择：
| 符号类型 | 含义 |
|---|---|
| disc | 实心圆 |
| circle | 空心圆 |
| square | 实心方块 |
<UL>中的type属性表示所有列表项使用统一的符号类型。
<LI>中的type表示不同的列表项可以使用不同的符号类型。
2. 有序列表标记
用来设置有前后顺序之分的列表项。
格式：
<OL type="序号类型" start="起始号码">
<LI type="序号类型">列表项目一
<LI type="序号类型">列表项目二
<LI type="序号类型">列表项目三
</OL><OL>：列表的开始
</OL>：列表的结束
<LI>：一个列表项目
type：用来设置每个项目前显示的序号类型，其值可以为：
| 序号类型 | 含义 |
|---|---|
| 1 | 阿拉伯数字 |
| A | 大写英文字母 |
| a | 小写英文字母 |
| I | 大写罗马字母 |
| i | 小写罗马字母 |
start：设置序号的开始值，默认值为1。
3. 自定义列表标记
用于需要对列表条目进行简短说明的场合。
格式：
<DL>
<DT>列表条目一
<DD>条目一的说明
<DT>列表条目二
<DD>条目二的说明
...
</DL><DL>和</DL>表示自定义列表的开始和结束。
<DT>：每项自定义条目名称。
<DD>：每项自定义条目的说明，自动向右缩进。
四、表格标记
用户可以通过表格方便灵活地排版。
表格标记可以用来建立基本表格。
格式：
<TABLE>
<CAPTION align="对齐方式">表格标题</CAPTION>
<TR>
<TH>表头一</TH><TH>表头二</TH>...<TH>表头n</TH>
</TR>
<TR>
<TD>表项一</TD><TD>表项二</TD>...<TD>表项n</TD>
</TR>
<TR>
<TD>表项一</TD><TD>表项二</TD>...<TD>表项n</TD>
</TR>
...
</TABLE>- 表格的相关属性：
| 属性类型 | 含义 |
|---|---|
| width | 宽度 |
| height | 高度 |
| align | 对齐方式 |
| background | 背景图片 |
| bgcolor | 背景颜色 |
| border | 边框的宽度（以像素为单位） |
| bordercolor | 边框颜色 |
| bordercolorlight | 边框明亮部分的颜色 |
| bordercolordark | 边框昏暗部分的颜色 |
| cellspacing | 单元格之间的间距 |
| celladding | 单元格内容与边界之间空白距离的大小 |
- <CAPTION>…</CAPTION>标记表示对表格标题的说明。
align属性表示标题相对于表格的位置。
left、right、center、top和bottom分别表示标题在表格上部左边、上部右边、上部居中、表格上部和表格下部。
- <TR>…</TR>标记定义行，该标记中间的内容显示在一行，此标记对只能放在<TABLE>…<TABLE>标记之间使用，主要性质如下所示：
| 性质类型 | 含义 |
|---|---|
| align | 行内容的水平对齐 |
| valign | 行内容的垂直对齐 |
| bgcolor | 背景颜色 |
| bordercolor | 边框颜色 |
| bordercolorlight | 亮边框部分的颜色 |
| bordercolordark | 暗边框部分的颜色 |
- <TH>和<TD>表示单元格标记，这两个标记必须嵌套在<TR>标记中，成对出现。<TH>是标头标记，一般位于首行或首列，标记之间的内容就是位于该单元格的标题内容，其中的文字以粗体居中显示。<TD>是该单元格中的具体数据内容，<TH>和<TD>标记的属性都是一样的，设定如下：
| 性质类型 | 含义 |
|---|---|
| colspan | 单元格向右打通的栏数 |
| rowspan | 单元格向下打通的栏数 |
| width/height | 单元格的宽和高，接受绝对值和相对值 |
| align | 水平位置，可选left、center、right |
| valign | 垂直位置，可选top、middle、bottom |
| bgcolor | 单元格底色 |
| bordercolor | 单元格边框颜色 |
| bordercolorlight | 亮边框部分的颜色 |
| bordercolordark | 暗边框部分的颜色 |
| background | 背景图片 |
- 要创建多行、多列的单元格，只需在<TH>或<TD>加入ROWSPAN或COLSPAN属性的属性值，表明在表格中要跨越的行或列的个数。
跨多列：<TH colspan=”列数”> <TD colspan=”列数”>
跨多行：<TH rowspan=”列数”> <TD rowspan=”列数”>
五、多媒体标记
1. 图像标记
用<IMG>标记可以在当前位置插入图像。
格式：
<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等。
格式：
<BGSOUND src="声音文件的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>单击显示的文本或者图像，将跳转到“记号名”开始的文本。
七、表单标记
表单标记主要用来收集信息，当单击表单中的提交按钮时，输入在表单中的信息就会从客户端的浏览器上传到服务器中，然后由服务器中的有关表单处理程序进行处理，处理后将用户所需信息传送到客户端浏览器上，这样网页就有了交互性。
1. <FORM> </FORM>标记
创建一个表单，即定义表单的开始与结束的位置。
格式：
<FORM name="form_name" method="method" action="url">...</FORM>- name：设置表单的名称
- method：指出采用何种HTTP方法来发送表单数据，可以用 HTTP GET 方法 (method=”get”)，可以用 HTTP POST 方法 (method=”post”)。
- action：定义表单处理程序的位置及名称。
2. <INPUT type=”“>标记
定义输入区，可以在里面输入信息。
格式：
<INPUT name="field_name" type="type_name">- name：设置输入区的名称，服务器就是通过name来获得该区域数据的。
- type：设置输入区域的类型。
| type 属性值及格式 | 说明 |
|---|---|
| <INPUT type=”Text” maxlength=”” size=”” value=”“> | 单行输入文本区域。maxlength为最大输入字符数，size为文本域的宽度，value为文本域的默认值。 |
| <INPUT type=”Password”> | 输入密码域 |
| <INPUT type=”File”> | 文件域可以让用户在该域内填写自己硬盘中文件路径，然后通过表单上传 |
| <INPUT type=”Checkbox” checked> | 一个复选框。checked表示此项被默认选中 |
| <INPUT type=”Radio” checked> | 单选按钮框。checked表示此项被默认选中 |
| <INPUT type=”Button”> | 不同按钮。配合程序的需要来进行表单的处理 |
| <INPUT type=”Submit” value=”“> | 单击“提交”按钮后，可实现表单内容的提交 |
| <INPUT type=”Reset” value=”“> | 单击“重置”按钮后，可清除表单的内容，恢复默认的表单内容设定 |
| <INPUT type=”IMAGE” src=”“> | 使用图像代替按钮。src设置图片路径 |
| <INPUT type=”Hidden”> | 隐藏输入域，用户不能在其中输入，用来预设某些要传送的信息 |
隐藏表单，一般用来传递参数，而又不想显示在客户端。如网站购买产品，点击提交，通常程序会自动生成一个产品的订单标号，用于后台操作或其它，而此编号通常不必要给用户看。
3. <SELECT> </SELECT>和<OPTION>标记
<SELECTv </SELECT>标记用来创建一个下拉列表框或可以复选的列，它必须放在<FORM> </FORM>标记对之间。
<OPTION>标记用来指定菜单和列表中的一个选项，放在<SELECT> </SELECT>标记对之间。
格式：
<SELECT name="name" size="value" multiple>
<OPTION value="value" selected>选项一
<OPTION value="value">选项二...
</SELECT><SELECT>属性：
- name设置菜单和列表的名称。
- size设置显示的选项数目。
- multiple不用赋值可直接加入到标记中，加入后列表框就成了可多选的了。若没有加入该属性，则显示的将是一个弹出式的列表框。
<OPTION>属性：
- value属性用来给<OPTION>指定的那一个选项赋值，这个值是要传送到服务器的，服务器正式通过调用<SELECT>区域名字的value属性来获得该区域选中的数据项。
- selected指定默认的选项。
4. <TEXTAREA> </TEXTAREA>标记
用来创建一个可以输入多行的文本框，在其中可输入更多的文本，此标记要放在<RORM> </FORM>标记对之间。
格式：
<TEXTAREA name="name" rows="value" cols="value"></TEXTAREA>- name设置文本框名称。
- rows和cols属性分别设置文本框的行列数，以字符数为单位。
八、框架标记
框架可以把浏览器划分成几个子窗口，每个子窗口可以调入各自的HTML文档形成不同的页面，也可以按照一定的方式组合完成特殊的效果。可以在一个框架中放置目录并设置链接，点击链接，内容显示在另一个框架中。
框架由框架集和框架组成。
- 框架集是在一个文档内定义的一组框架结构的HTML网页。它定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架网页等。
- 框架是指在网页上定义的一个显示区域。
在使用框架集的页面中，页面的<BODY>标记被框架集<FRAMESET>标记所取代，然后通过框架<FRAME>标记定义每一个框架。
1. <FRAMESET> </FRAMESET>标记
定义分割窗口，即主文档中有几个框架并且各个框架是如何排列的。
格式：
<FRAMESET cols="value,value,..." rows="value,value,..." framespacing="value"
bordercolor="Color_value">...</FRAMESET>- cols和rows：分别表示左右和上下分割窗口（用“,”分割，value为定义各个框架的宽度值，单位可以是百分比、绝对值或星号“*”，其中星号表示剩余部分）。
- framespacing：设定框架集的边框宽度。
- bordercolor：设定框架集边框颜色。
2. <FRAME> </FRAME>标记
定义每一个具体的框架。
格式：
<FRAME src="File_name" name="Frame_NAME" scrolling="value" noresize>...</FRAME>- src：设置框架显示的文件路径。
- name：定义此框架的名字，这个名字供超文本链接标记<A href=”” target=”“>中target属性用来指定链接的目标HTML文件将显示在哪一个框架中。框架名称必须是个单词，可以使用下划线，必须以字母开始，区分大小写。
- scrolling：设定滚动条是否显示。可以是yes（显示）、no（不显示）或auto（自动）。
- noresize：禁止改变框架的尺寸大小。
3. <NOFRAME> </NOFRAME>标记
放在<FRAMESET> </FRAMESET>标记对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。
写在最后
这里只是简单的整理了HTML一些基础的知识点，如果想深入学习要查阅相关书籍或者博客。