2.1 HTML网页设计
HTML（Hyper Text Markup Language）即超文本标记语言，是用来编写网页文件的标准，定义了一组标记（tag，也称标签）用来描述Web文档数据。
目前HTML已经升级到HTML 5版本，HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5不仅用来表示Web内容，而且在HTML 5上，视频、音频、图像、动画以及同计算机的交互都被标准化了。在本章中，主要介绍HTML最基本的内容，所以采用HTML 4版本，若需要了解和使用HTML 5，请在此基础上查阅有关HTML 5的专门书籍。
2.1.1 HTML文档结构与基本语法
用HTML编写的超文本文档称为HTML文档（文件），是一个放置了“标签”的文本文件，以“.html”或“.htm”为扩展名，可供浏览器解释执行的网页文件。
注意：对于HTML文档可以直接通过浏览器打开并解释执行，不需要使用服务器。
一个HTML文档（如例2-1所示）的内容一般位于<html>和</html>之间，分为头部（head）和主体（body）两部分。在头部，可定义标题、样式等，文档的主体就是要显示的信息。
【例2-1】 一个简单的HTML例子，文件名为：ch02_1.html。
将文档以“ch02_1.html”保存，并在浏览器中打开，运行界面如图2-1所示。
图2-1 例2-1的运行界面
1.HTML标记
在例2-1的代码中，用“<>”括起来一些单词或字母，如<html>、<head>、<body>等称为“标记（或标签）”。标记用来分割和标记网页中的元素，以形成网页的布局、格式等。标记分为单标记和双标记两种类型。
（1）单标记：单标记仅单独使用就可以表达完整的意思。
基本语法：
<标记名称/> 例如：<br/>、<hr/>是单标记，其中，<br/>实现换行功能，<hr/>绘制水平直线。 （2）双标记：双标记由“首标记”和“尾标记”构成，成对使用。
基本语法：
<标记名称>内容</标记名称> 其中，“内容”部分就是要被这对标记施加作用的部分。例如：
<b>计算机</b>
该语句表示“计算机”以粗体显示，其中，<b>是首标记，</b>是尾标记，该对标记规定它们之间的信息以粗体字显示在页面上。
2.标记的属性
HTML通过标记告诉浏览器如何显示网页内容，另外，对标记元素还附加“控制信息”，进一步“规定”如何在网页上显示内容，这些控制信息称为“属性（attribute）”。
基本语法： <标记名称 属性名1="属性值"属性名2="属性值"…属性名n="属性值">
语法说明：属性应写在首标记内，并且和标记名之间有一个空格分隔。
例如，标记<hr>的作用是在网页中插入一条水平线，但是，要绘制什么类型（线的粗细、颜色等）的直线呢？对直线的粗细、颜色的限制，就需要标记的属性。
其中，align为属性，center为属性值（表示居中）；color为颜色属性，其属性值为blue（蓝色）；size为字体大小属性，其属性值为5px。该语句的作用在页面上绘制一条粗细为5px的蓝色直线，直线居页面的中间，宽度占页面的80%。
注意：属性值一般用""括起来，且必须使用英文双引号。
3.注释标记
注释标记用于在HTML源码中插入注释。一般，注释会被浏览器忽略。
基本语法：
<！--注释内容-->
2.1.2 HTML基本标记与使用
在HTML中，其常用标记主要有网页基本结构、注释标签、文本、图片、超级链接、滚动字幕、定时刷新或跳转、表格、框架、层、表单等，下面给出这些基本标记的使用方法和使用格式。
1.网页基本结构控制标记
一个HTML文档的架构，一般由3对标签构成：<html></html>、<head></head>和<body></body>。
（1）<html></html>
这对标签用来标记该文件是HTML文档。<html>用于HTML文档的最前面，标识HTML文档的开始，</html>放在HTML文档的最后，标识HTML文档的结束。
（2）<head></head>
这对标签内的“内容”是文档的头部信息，说明文档的基本情况，如文档的标题等，其内容不会显示在网页中。在此标签对之间可使用<title></title>、<script></script>等描述HTML文档相关信息的标签对。
（3）<body></body>
这对标签内的“内容”是HTML文档的主体部分，可包含显示信息及其控制信息显示的各种标签，例如<p></p>、<h1></h1>、<br/>、<hr/>等标签，它们所定义的文本、图像等将会在网页中显示出来。<body>标记中常用属性如下。
●bgcolor：设置背景颜色，例：<body bgcolor="red">，设置红色背景。
●text：设置文本颜色，例：<body text="#00000ff">，设置蓝色文本。 说明：以上各个属性可以组合使用，如<body bgcolor="red"text="#00000ff">。引号内的6位十六进制数表示红（r）、绿（g）、蓝（b）三色的组合颜色，其格式为rrggbb），如#0000ff对应的是“蓝色（blue）”，blue、red是HTML语言所规定的常量名字。
2.文本与段落标记
文本与段落标记是控制在网页上显示信息的，常用的标记如表2-1所示。
表2-1 文本与段落标记
注意：各种标签可以嵌套，但不允许交叉。例如：
该语句的功能是显示一个段落，要求居中，同时，以黑体字显示，字体大小是3号字显示。
【例2-2】 图2-2给出了一首唐诗欣赏的页面，根据该页面，设计HTML文档ch02_2.html。请仔细分析所使用的标记及其属性，以及它们的作用。
图2-2 例2-2唐诗欣赏页面
3.列表标签
列表标签分两类：有序标签和无序标签。
（1）有序列表标记：<ol></ol>。
格式：<ol type="序号类型">
<li>…….</li>
<li>……</li>
其中，属性type指定列表项前的项目编号的样式，其取值说明如下。
“1”：编号为阿拉伯数字（默认值）；“a”：小写英文字母；
“A”：大写英文字母；“i”：小写罗马数字；
“I”：为大写罗马数字。
（2）无序列表标记：<ul></ul>
格式：<ul type="类型样式">
其中，属性type指定列表项前的项目符号的样式，其取值有3种。disc：实心圆点（默认值）；circle：空心圆点；square：实心方块。
（3）元素列表：<li></li>
形成列表项，若在<ol></ol>之间，则每个列表项加上一个编号，若在<ul></ul>之间，则每个列表项加上一个规定的符号样式。
【例2-3】 有序列表与无序列表应用示例，设计如图2-3所示的运行界面。
图2-3 例2-3要求的设计界面
4.超链接标签
超链接是指从一个对象指向另一个对象的指针，它可以是网页中的一段文字也可以是一张图片，以实现从一个页面到另一个页面的跳转。
格式：
其中，属性href：指定链接的目标（另一个网页的路径）。
5.图片标记
格式：
其中，属性src：指定图像源的URL路径；alt：替代文本；height：图片的高度；width：图片的宽度。
【例2-4】 设计如图2-4a所示的页面（ch2_4.html），该页面中有超链接和图片链接，当单击其中之一（单击超链接或图片），都跳转到图2-4b所示的页面（“泰山自然网页”，网址为：http：//www.mount-tai.com.cn/nature.shtml）。
页面ch2_4.html的代码如下：
图2-4 例2-4的界面
a）ch2_4.html的页面 b）当单击超链接或图片跳转到的页面
6.定时刷新或跳转
（1）定时自刷新，基本语法：
该语句表示，页面每隔一秒刷新一次，其中属性content的值，代表间隔的时间。
（2）定时自动跳转，基本语法：
该语句表示，页面3秒后自动转到搜狐主页。
注意：上述标签一般放在head标签中。
7.表格
表格由行、列、单元格组成，可以很好地控制页面布局，固定文本或图像的输出，还可以任意进行背景和前景颜色的设置。
一个表格是由<table>、<tr>、<td>或<th>标记来定义的，分别表示表格、表格行、单元格。
（1）基本语法：
（2）表格属性（<table>属性）：
整个表格始于<table>而终于</table>，是一个容器标记。常用属性如表2-2所示。
表2-2 标记<table>的属性
（3）表格行的属性（<tr>属性）：
<tr>的属性用于设定表格中某一行的属性。常用属性如表2-3所示。
表2-3 标记<tr>的属性
（4）<td>、<th>属性：
<td>的属性用于设定表格中某一单元格的属性；具体内容的容器，使用时要放在<tr>与</tr>之间。常用属性如表2-4所示。
表2-4 标记<td>、<th>的属性
【例2-5】 设计如图2-5所示的表格，该表格中有跨行、跨列单元格。
图2-5 例2-5所要求的设计界面
2.1.3 HTML表单标签与表单设计
表单是用户与服务器交互的主要方法，用户在表单中填入数据，提交给服务器程序来处理。表单是Web程序中使用最多的。
图2-6所示就是一个含有表单的页面。表单是由文本框、密码框、多行文本框、单选按钮、复选框、下拉菜单/列表、按钮、文件域、隐藏域等各种表单元素及其标记组成的。下面介绍表单的各种标签及其使用，以及表单的设计。
图2-6 一个表单示例
1.<form>标记及其属性
表单使用<form>和</form>来定义的，<form>标记有属性：name、method、action、target等属性。
语法格式：
其中：属性name是表单对象名称，具体使用在本章的第3节给出。对于method和action属性的含义和使用，将在第3章中给出。在本节中3个属性都给出“空值”。
2.<input>标记及其属性
<input>是个单标记，它必须嵌套在表单标记中使用，用于定义一个用户的输入项。
基本语法：
<input>标记主要有6个属性，即type、name、size、value、maxlength、check。其中，name和type是必选的两个属性，name属性的值是响应程序（由form标记中的action属性指定）中的变量名。type主要有9种类型，其使用格式和含义见表2-5所示。
表2-5 input输入域的9种类型
3.下拉列表框<select>、<option>
在表单中，通过<select>和<option>标记可设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一个或多个选项。
基本语法：
语法说明：
（1）<select>标记有name、size、multiple 3个属性。
●name：设定下拉列表名字。
●size：用于改变下拉框的大小，默认值为1。
●multiple：表示允许用户从列表中选择多项，若缺省，则表示单选。
（2）<option>标记有两个属性，即value和selected，它们都是可选项。
●value：用于设置当该选项被选中并提交后，浏览器传送给服务器的数据。
●selected：用来指定选项的初始状态，表示该选项在初始时被选中。
4.多行文本框<textarea>标记
基本语法：
其中，rows设置输入域的行数，cols设置输入域的列数，wrap设置是否自动换行。
2.1.4 表单设计案例——学生入校注册页面设计
前几节介绍了HTML的基本语法和常用标记，本小节设计一个注册网页，从而掌握HTML网页的设计思想和设计方法。
【例2-6】 设计图2-6（2.1.3节中给出的）所示的学生信息注册网页。
【分析】 该页面采用表单的方式设计，为了使页面各元素整齐，采用表格的方式控制元素的位置。该例中给出了表单常用的各种元素，请注意它们的使用特点。
【实现代码】
2.1.5 HTML框架标签与框架设计
框架将浏览器窗口分割为几个窗口，图2-7就是一个框架，该框架被分为4个窗口，每一部分如图所示。
图2-7 框架的简单结构
如何对页面进行分割呢？它是利用<frame>标记与<frameset>标记来定义。其中，<frame>标记用于定义框架，而<frameset>标记则用于定义框架集。框架标记要在head和body外部。框架的形成，需要水平分割和垂直分割，下面就给出具体的分割方式。
1.窗口的分割与设置
框架集标记用于窗口的分割，可以水平分割，也可以垂直分割，还可以嵌套分割。分割时，可以指定具体子窗口的大小，也可以采用所占有的比例（百分比）。
（1）分割框架的语法结构。
语法说明：
①rows属性表示是水平分割，cols属性表示是垂直分割。
②rows（或cols）属性的值代表各子窗口的高度（或宽度）。
●对于rows，是从向上向下分割，各子窗口的高度依次为高度1，高度2，……，直到最后一个*（代表最后一个子窗口的高度，值为其他子窗口高度分配后所剩余的高度）。
●对于cols，是从左到右分割，各子窗口的宽度依次为宽度1，宽度2，……，直到最后一个*。
③设置高度（宽度）数值的方式有以下两种。
●采用整数设置，单位为像素（px），例如：
该语句将窗口水平分为3个子窗口，第1个高度为100单位，第2个为200单位，第3个的高度是原窗口高度值-300。
●用百分比设置，例如：
该语句将窗口水平分为3个子窗口，第1个高度占原高度的20%，第2个占原高度的50%，第3个占原高度的30%。
（2）窗口的嵌套分割。
将水平分割框架与垂直分割框架实现嵌套，可以设计所需要的任意框架结构。
注意：在嵌套分割时，每个被分割的窗口都是相对独立的，其分割形成子窗口大小都是相对被分割窗口的。
2.子窗口的设置
基本语法：
语法说明：
①name属性指定子窗口的名称，在该子窗口内显示由src属性指定的HTML文件网页内容。
②scrolling属性用于控制窗口框架中是否显示滚动条，yes表示为显示滚动条，no表示不显示滚动条，auto为自动设置。
例如：框架中定义了一个子窗口main，在main中显示jc.html网页，则代码为：
3.target属性
在框架结构子窗口的HTML文档中如果含有超链接，当用户点击该链接时，目标网页显示的位置由target属性指定，若没有指定则在当前子窗口打开。
target属性使用格式：
若jc.html中有一个超链接，在点击该链接后，网页new.html将要显示在名为main的子窗口中，则代码为：
2.1.6 框架设计案例——多媒体播放系统设计
将浏览器画面分割成多个子窗口时，可赋予各子窗口不同的功能。最常见的应用方式就是以一个子窗口作为网页的主画面，另一个窗口则用于控制该窗口的显示内容。要达到这个目的，运用<a>标记的target属性来指定显示链接网页的子窗口。
【例2-7】 设计如图2-8所示的页面，被划分为3个子窗口，上面的窗口为页面功能提示区，下左部分为不同类型播放的功能选项，下右部分为播放系统显示播放信息窗口。图示显示的是，当单击“图像显示”时，所显示的图像（小鸭）。
图2-8例2-8所要求的设计页面
【分析】 该题目首先进行页面框架设计，采用的是“厂”型的结构，整个页面分上下两部分，而下部分又分为左右两部分。架构结构设计由程序ch02_7_main.html实现；上部分显示标题，由程序ch02_7_top.html实现；下左部分显示操作菜单，由ch02_7_left.html实现；右下部分显示运行界面，由ch02_7_right.htm实现，由imgTag.html、imgTag.html和soundTg.html实现具体的功能，通过主页面左边的操作选项实现超链接。
【实现】
（1）网页框架结构的设计，其代码如下：
（2）最上方的显示标题，代码如下：
（3）左边显示操作菜单，代码如下：
（4）右边显示运行界面，代码如下：
（5）图像显示页面，代码如下：
（6）音乐播放页面，代码如下：
（7）视频播放页面，代码如下：
