3.1 HTML技术

3.1.1 HTML技术概述

1．HTML的基本结构

HTML（Hyper Text Markup Language）是超文本标记语言，它通过HTML标记符来标识在网页中显示的内容，是Web的描述语言。HTML文件可以用Windows自带的记事本软件或专门的网页制作软件（如EditPlus、Dreamweaver、FrontPage、UltraEdit等）进行编辑，HTML文件的扩展名为“.htm”或“.html”，HTML文件的基本结构如下：

例如，打开EditPlus软件，依次选择“File”菜单下“New”子菜单中的“HTML Page”命令项，即可在EditPlus编辑窗口自动生成HTML的基本结构代码，如图3-1所示。在此基础上，可借助工具栏的命令按钮或各菜单中的命令项，完成HTML文件的编辑和设计。同时，可以使用“File”菜单下的“Save”命令（或工具栏上相应的保存按钮）将编辑的文件以合适的文件名（比如“firstPage.html”）存储在网站主目录（例如“E:\application\myweb\”）或其子目录（例如“E:\application\myweb\www\”）下，以便于对文件进行正确访问。

2．HTML文档结构说明

HTML是超文本标记语言，HTML文档是由许多用尖括号＜＞括起来的标签或标记组成的。其中，每个页面的第一行都由＜!doctype＞标记声明HTML的版本，之后分别用＜html＞标记HTML文档的开始，用＜head＞…＜/head＞定义HTML文档的开头部分，用＜body＞…＜/body＞定义HTML文档的主体部分，最后由＜/html＞标记HTML文档结束。

1）HTML版本声明。＜!doctype html＞标记用于说明该文档是一个HTML5文档，浏览器将按照HTML5的语法规则来解析与显示这个页面，即使遇到不支持HTML5的浏览器，显示也不会受到影响。

2）指定HTML的开始和结束。HTML文档的开始和结束分别用＜html＞和＜/html＞标记对（也称为＜html＞元素）来指定，该标记对之间是HTML文档的头部和主体。＜html lang="en"＞用于声明当前页面的语言类型，其中，lang属性规定了元素中内容的语言代码。

3）HTML头部。＜head＞…＜/head＞标记之间可使用＜meta＞、＜title＞…＜/title＞、＜style＞…＜/style＞、＜script＞…＜/script＞等标记或标记对，用以描述HTML文档元数据、标题、样式、脚本等相关信息。

4）HTML主体。＜body＞和＜/body＞标记了网页的主体部分，利用各种标记或标记对将使网页的内容在浏览器窗口中显示出不同的浏览效果。

最常用的标记或标记对包括：

● 换行：＜br＞；

● 空格：“ ”（不含引号）；

● 水平线：＜hr＞；

● 标题：＜h1＞…＜/h1＞、＜h2＞…＜/h2＞、＜h3＞…＜/h3＞、＜h4＞…＜/h4＞、＜h5＞…＜/h5＞、＜h6＞…＜/h6＞；

● 段落：＜p class="left"＞…＜/p＞，其中align用于设置对齐方式，取值可以是left、right、center；

● 字体字号：＜font face=”宋体”color=”blue”size=”6”＞…＜/font＞，其中face用于设置字体，color用于设置字体颜色，size用于设置字号（取值为1～7）；

● 粗体：＜b＞…＜/b＞；

● 斜体：＜i＞…＜/i＞；

● 下划线：＜u＞…＜/u＞；

● 加重文本：＜strong＞…＜/strong＞；

● span（行内）元素：＜span＞…＜/span＞；

● div（块级）元素：＜div＞…＜/div＞；

● 外部超链接：＜a href="http://www.zzu.edu.cn"target="_new"＞郑州大学＜/a＞；

● 邮件链接：＜a href="mailto:liguohong@zzu.edu.cn"＞李国红＜/a＞；

● 插入图像：＜img src="1-1.gif"border="0"alt="QQ"＞；

● 背景音乐：＜bgsound src="歌1.mp3"loop="3"＞；

● 视频：＜embed src="视频1.wmv"width="300"height="260"autostart="true"＞＜/embed＞；

● 其他：包括列表、表格、表单、框架等。鉴于基本列表、基本表格和基本表单在HTML中的重要地位和重要作用，这些基本内容将在下文进行专门阐述。

5）属性设置。HTML标记有相应的属性，以类似＜标记元素属性=”属性值”属性=”属性值”…＞的格式对标记进行限定或说明，以便所标记的内容更符合网页的格式要求。例如，＜hr color=”blue”＞定义了一条水平线，color属性限定该水平线的颜色为蓝色；＜font color=”red”size=”5”face=”隶书”＞…＜/font＞则对所标记的内容规定了color（颜色）、size（字号）、face（字体）。

6）注释。HTML文档可以进行注释，注释格式是：＜!--注释内容--＞。

3．网页头部标记、样式表或脚本语句

网页头部位于＜head＞…＜/head＞之间，常用网页头部标记的格式与作用举例如下。

1）＜title＞标记。用于指明网页文档的标题。例如：＜title＞网页标题＜/title＞。表示将“网页标题”在浏览器标题栏中显示出来。

2）＜meta＞标记。用于描述网页文档的元数据，包括网页描述、字符编码、作者、版权、关键词、过期日期、刷新时间等。元数据可以被浏览器（如何显示内容或重新加载页面）、搜索引擎（关键词）或其他Web服务调用。例如：

● ＜meta http-equiv="Content-Type" content="text/html; charset=GB2312"＞。表示网页页面采用GB2312字符编码方案；

● ＜meta charset="UTF-8"＞。指定网页中的字符编码，支持HTML 5；

● ＜meta http-equiv="refresh"content="2;url=index.php"＞。表示两秒后，网页页面自动跳转到index.php网页页面；

● ＜meta name="keywords"content="html， php， MySQL"＞。表示为主页制作关键词索引，以便搜索引擎更容易访问该站点；

● ＜meta name="author"content=“张三”＞。表示指定本网页的作者；

● ＜meta http-equiv="Expires"content="Mon，20 May 2019 00:30:00 GMT"＞。设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；

● ＜meta name="Generator"content="EditPlus®"＞。指定网页文档的编辑器。

3）＜style＞标记。用于指定当前文档所使用的样式，详见3.2节“CSS及其使用”。基本格式为＜style epub:type="text/css"＞选择器{属性：属性值；属性：属性值；…；}＜/style＞。例如：

4）＜link＞标记。用于指定链接的资源与当前文档之间的联系，属性包括href、type、rel、rev、target，其中href指定链接资源的URL地址，type指明链接资源文件的内容类型（例如text/css），rel指明链接资源和当前文档是什么关系（链接资源是当前文档的**资源），rev指明当前文档和链接的资源是什么关系（当前文档是链接资源的**资源），target则用来指定显示链接文件的目标框架或窗口名。例如：

● ＜link href="cssfile.css"type="text/css"rel="stylesheet"＞

● ＜link href="words.html"rel="glossary"＞

● ＜link href="whole.html"rev="subsection"＞

5）＜script＞标记。用于定义客户端脚本，可利用type或language（不赞成使用language）属性指定脚本语言。例如：

● ＜script epub:type="text/javascript"＞document.write（"你好！"）＜/script＞

● ＜script language="javascript"＞document.write（"你好！"）＜/script＞

若需要指向外部脚本文件，可使用＜script＞标记的src属性规定外部脚本的URL，也可利用charset属性规定在外部脚本文件中使用的字符编码，用defer属性规定延迟外部脚本的执行（即当页面已完成加载后，才执行外部脚本）。例如：

＜script＞标记可放到＜head＞…＜/head＞标记内部，也可放置于＜body＞…＜/body＞标记中的任何需要的位置。

3.1.2 HTML列表、表格与表单

1．HTML基本列表

列表包括编号列表、符号列表和自定义列表。编号列表（即有序列表）是一种对列表项目从小到大进行编号的列表形式。例如，使用默认的阿拉伯数字表示编号，由工业工程、工程管理、电子商务、物流管理构成的编号列表可表示为：

将上述编号列表中的＜OL＞…＜/OL＞标记对改为＜UL＞…＜/UL＞，就变成了默认用圆点表示项目符号的符号列表。符号列表（即无序列表）是指列表项目不用序号指定，而由某种特定符号进行标识的列表形式。

自定义列表则是由＜DL＞和＜/DL＞标记对定义的列表，其列表项的词汇由＜Dt＞进行标记，词汇的说明或解释由＜Dd＞进行标记。

2．HTML基本表格

许多数据报表都是以表格形式输出的。例如，图3-2所示的就是一个简单的表格，该表格对应的HTML文件为biaoge.html，该文件中的主要代码如下。

表格由＜table＞和＜/table＞定义，表格中的一行由＜tr＞和＜/tr＞标记对说明，行中各单元格的内容由＜td＞和＜/td＞进行标记或由＜th＞和＜/th＞进行标记。这些标记对具有许多属性，通过设置这些属性的值（不设置时取默认值）可以得到不同的表格效果。这些标记对中最常用的属性均为class="#"，表示对齐方式，其中#号可取值为left（居左）、center（居中）、right（居右），默认值为left。标记对＜th＞…＜/th＞的效果默认为在单元格内居中加粗，与＜td class="center"＞＜b＞…＜/b＞＜/td＞的效果相同。

3．HTML基本表单

表单可以看成是用户与系统进行交互的操作界面或接口，通常由文字提示、文本输入区域、命令按钮组成。表单由＜form＞和＜/form＞定义，表单的语法结构如下：

说明：

1）＜form＞标记中的action属性用于指定处理该表单数据的PHP（或ASP、JSP等）程序文件的URL地址，method属性用于定义发送表单数据的HTTP方法，可取值为GET或POST。＜form＞标记中可以使用onsubmit、onreset属性分别指定表单提交、重置时执行的JavaScript脚本代码，使用name属性指定表单的名称，也可以利用target属性规定在哪个目标窗口返回由action指定的程序文件的处理结果（可取值：_blank、_top、_self、_parent，例如target="_blank"），利用accept-charset规定服务器处理表单数据所接受的字符集（可取值：UTF-8、GBK、ASCII、ISO-8859-1、unknown，例如accept-charset="UTF-8"），或者利用enctype属性规定在发送到服务器之前应该如何对表单数据进行编码（可取值：application/x-www-form-urlencoded、multipart/form-data、text/plain、application/x-www-form+xml，例如enctype="multipart/form-data"），利用accept规定能够通过文件上传进行提交的文件类型（例如accept="image/gif， image/jpeg"）。

2）＜input epub:type=”submit”＞表示提交按钮，用鼠标单击此按钮时，表单数据以method属性指定的方式提交给action属性指定的程序文件进行处理。在GET方式下，传送的数据量一般限制在1KB以下，在PHP处理程序中使用$_GET[”表单元素名称”]获取表单元素的数据，在ASP处理程序中使用request.querystring（”表单元素名称”）或request（”表单元素名称”）获取表单元素的数据；而在POST方式下，传送的数据量比GET方式大得多，PHP处理程序使用$_POST[”表单元素名称”]来获取表单元素的数据，ASP处理程序使用request.form（”表单元素名称”）或request（”表单元素名称”）获取表单元素的数据。

3）＜input epub:type="submit"＞之类由＜input＞进行标识的是表单的输入区域，每个输入区域形成表单的一个构成元素，一个表单就是由若干个表单元素或输入区域构成的。常用表单元素的表示方法如表3-1所示。这些表单元素（或控件）均可以根据需要利用id属性指定元素的唯一身份标识（例如id="sex1"），利用accesskey属性指定激活元素（使元素获得焦点）时的快捷键字符（例如设置accesskey="P"，则可以用Alt+P组合键来选择该表单元素对应的控件），也可以利用onFocus、onBlur分别指定表单元素获得焦点、失去焦点时执行的JavaScript代码，而单行文本框、多行输入文本框等表单元素还可利用onSelect、onChange分别指定文本被选中、文本被修改时执行的JavaScript代码。

例如，注册表单文件zhuce.html的网页代码如下（＜style epub:type="text/css"＞…＜/style＞标记对之间是层叠样式表，参见3.2节“CSS及其使用”），运行结果如图3-3所示。

3.1.3 HTML应用菜单设计

安装Adobe Dreamweaver CS5后，打开此软件。先利用“文件”菜单下的“新建”命令创建一个HTML 5文件，并使用“文件”菜单下的“保存”命令，将菜单文件以合适的文件名（例如“caidan.html”）命名，保存在主目录（例如“E:\application\myweb\”）中的“www”文件夹下，然后将光标移至Dreamweaver设计窗口相应位置，再从“插入”下拉菜单的“Spry”子菜单中选择执行“Spry菜单栏”（图3-4），即可弹出“Spry菜单栏”对话框（图3-5），选择“水平”布局，并单击“确定”按钮，便进入菜单设计界面（图3-6）。

单击“文件”菜单下的“保存”命令，如果是首次创建菜单，会出现如图3-7所示的“复制相关文件”对话框，单击该对话框中的“确定”按钮，即可在网站主目录（“E:\application\myweb\”）下自动创建SpryAssets文件夹，并在该文件夹下建立SpryMenuBar.js、SpryMenuBarHorizontal.css文件，以及所需的图片文件SpryMenuBarDown.gif、SpryMenuBarDownHover.gif、SpryMenuBarRight.gif、SpryMenuBarRightHover.gif，这些文件夹和文件作为应用菜单的组成部分不能缺少（注：如果SpryAssets文件夹和该文件夹下的相关文件已存在，则不会出现“复制相关文件”对话框，也不再创建SpryAssets文件夹和相关文件）。

在“设计”视图以可视化形式设置菜单栏、下拉菜单、网页标题以及其他属性（如图3-8所示）。可先单击所设计菜单栏左上方的“Spry菜单栏：MenuBar1”，之后在窗口下侧“菜单条”属性区域设置各级菜单；从左至右的三个列表框用于设置各级菜单的菜单项，单击“+”号增加菜单项，单击“-”号删除选定的菜单项，单击向上或向下三角形调整菜单项的顺序；选中某菜单项后，可在“文本”“链接”“目标”右边的文本框分别输入该菜单项的名称、链接到的网址、链接到的框架名称，目标为“_new”或“_blank”表示在新的窗口打开链接到的网页；还可以修改其他属性使菜单设计更合理（例如按图3-9和图3-10调整字数最多的命令项的“宽”值，使命令项在子菜单中占一行，修改后需要执行Dreamweaver“文件”菜单下的“保存全部”命令）。

这样设计出来的应用菜单将在浏览器中默认居左显示。在Dreamweaver代码窗口，将所设计的菜单代码用＜div style="width:650px; margin:auto;"＞…＜/div＞进行标记与样式说明（详见3.2节“CSS及其使用”），就可以使应用菜单在浏览器中居中显示了。通过上述方法设计的应用菜单caidan.html的最终网页代码如下，运行结果如图3-11所示。可在此基础上进一步调整和完善，设计出一个令人满意的应用菜单。