本章要点

• HTML网页的基本结构。
• HTML常用标记的使用方法。
• HTML表格的使用。
• HTML中表单的制作方法。
• HTML中DIV布局与CSS的应用方法。

---

2.1　HTML文件的基本结构

HTML（Hyper Text Markup Language）是网页超文本标记语言的缩写，是Internet上用于编写网页的主要语言。HTML中每个用来作为标记的符号都可以看作是一条命令，它告诉浏览器应该如何显示文件的内容。

本节要点

• HTML基本结构。
• HTML的创建、配置和执行方法。

案例1 HTML基本结构

【设计要求】　
创建简单HTML网页文件，通过分析了解网页文件的基本结构。
【学习目标】　
（1）掌握HTML的创建方法。
（2）掌握HTML文件的基本结构。
【知识准备】　
（1）一个完整的HTML文件由标题、段落、表格和文本等各种嵌入的对象组成。这些对象统称为元素，HTML使用标记来分隔并描述这些元素。实际上，整个HTML文件就是由元素与标签组成的。
下面是一个HTML文件的基本结构：

从上面的代码可以看出，HTML代码分为3部分，其中各部分含义如下。
< html >…< /html >：告诉浏览器HTML文件开始和结束的位置，其中包括和标签。HTML文档中所有的内容都应该在这两个标签之间，一个HTML文档总是以开始，以结束的。
< head >…< /head >：HTML文件的头部标签，在其中可以放置页面的标题以及文件信息等内容，通常将这两个标签之间的内容统称为HTML的头部。
< title>…< /title>：在HTML语言中，title就是标题的意思，在这两个标签之间的文字就是该网页的名字。
< body>…< /body>：用来指明文档的主体区域，网页所要显示的内容都放在这个标签内，其结束标签指明主体区域的结束。
（2）和标签。这对标签用来指定网页的子标题。它按字体大小分为6级，n分别用1、2、3、4、5、6来表示，也就是说，可以采用以下6种格式。 < h1>子标题内容 < h2>子标题内容 < h3>子标题内容 < h4>子标题内容 < h5>子标题内容 < h6>子标题内容< /h6 >
这里，n的值越大，浏览器显示的字体越小。子标题会以不同于正文的方式显示，会以加黑、画线等形式突出显示。子标题长度不限，可以多行。
（3）< a> 标签定义超链接，用于从一个页面链接到另一个页面；< a> 元素最重要的属性是 href 属性，它指示链接的目标，规定链接指向的页面的 URL。
（4）img 元素用于向网页中嵌入一幅图像。注意，从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。 标签创建的是被引用图像的占位空间。
< img> 标签的属性是src 属性，用于定位图像资源。
（5）< p> 标签定义段落。p 元素会自动在其前后创建一些空白，浏览器会自动填充这些空间，也可以在样式表中规定空白空间的大小。
【实施过程】
HTML是一个以文字为基础的语言，并不需要特殊的开发环境，可以直接在Windows自带的记事本中编写。HTML文档以.html为扩展名，将HTML源代码输入记事本并保存，可以在浏览器中打开文档以查看其效果，也可以在可视化网页制作软件中编写，如Dreamweaver软件。使用记事本手工编写HTML页面的具体操作步骤如下。
（1）在Windows系统下，执行“开始”→“所有程序”→“附件”→“记事本”命令，新建一个记事本，在记事本中输入以下代码：

（2）编写完HTML文件后，执行“文件”→“保存”命令，弹出“另存为”对话框。在对话框中选择保存的路径，在“文件名”下拉列表框中输入simple．html，文件的扩展名为．htm或.html，如图2-1所示。

（3）单击“保存”按钮，这时该文本文件就变成了HTML文件。在浏览器中浏览，效果如图2-2所示。

【案例总结】
（1）创建一个简单的HTML网页文件主要会用到几个标签，基本的HTML页面从标记开始，以标记结束，其他所有HTML代码都位于这两个标记之间。与之间是文档头部分，与之间是文档主体部分。
（2）源代码第7行和第10行都使用段落标记和网页子标题；第8行和第11行使用标签在网页文件中添加图片；第5行用了< a>标签实现网页文件超链接，完成从一个页面到另一个页面的跳转。
【拓展提高】
拓展问题：如何将一个HTML页面变成JSP页面？
下面是一个最简单的HTML页面：index.html

只需把这个HTML文件另存为index.jsp，这就成为一个JSP文件了。此时运行这个JSP文件，还不能看到预期的运行效果“你好”两个字，页面上显示的会是些奇怪的乱码。那是因为正常的JSP页面是在前面加上以下这段代码：

其中的charset=UTF-8用1~4个字节编码UNICODE字符，用于在网页上可以同一页面显示中文简体繁体及其他语言（如日文，韩文），设置好这样的编码后，页面中的汉字就可以正常显示了。

2.2 常用HTML标签

用HTML语言编写的页面是普通的文本文档，不含任何与平台和程序相关的信息，它们可以被任何文本编辑器读取。HTML文档包含两种信息：一是页面本身的文本；二是表示页面元素、结构、格式、表格、表单和其他超文本链接的HTML标签。

本节要点

• HTML语言的特点和常用标签的使用方法。
• 表单的作用，掌握表单设计方法。
• 网页布局标签DIV的使用。

2.2.1 案例2 HTML表格制作

【设计要求】　
创建一个简单HTML网页文件，将表格插入网页文件，选择合适的形式在网页中显示表格。 【学习目标】　
（1）熟练掌握HTML中表格标签的功能。
（2）掌握HTML中表格标签的使用技巧。
【知识准备】　
1．表格标签
< table>< /table>：定义表格，表格的所有内容都写在这个标签之内。
< caption>< /caption>：定义标题，标题会自动出现在整张表格的上方。
< tr>< /tr>：定义表行。
< th>< /th>：定义表头，包含在< tr>< /tr>之间，表头中的文字会自动变成粗体。
< td>< /td>：定义表元（表格的具体数据），包含在< tr>< /tr>之间。
2．< table>标签常用的属性
align：表格和表格内容的位置设置。
bordercolor：表格边框的颜色，默认为黑色。
cellpadding：单元格中的内容与单元格边框之间的距离。
cellspacing：单元格边框与周围单元格边框或表格边框之间的距离。
【实施过程】
HTML页面中表格由

标签来定义。每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（Table Data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。在HTML页面中，表格主要用来显示数据，但是有的时候也用来实现复杂的页面布局，因为HTML对页面元素的排版基本就是按照元素在文档中出现的先后顺序，从头至尾依次排下来，唯一能控制页面元素位置的只有Align属性，而它所能控制的情况只有3种：左、中、右，所以仅仅依靠基本的HTML几乎是不可能实现的。表格就解决了这个问题，使用表格基本能实现对页面元素在浏览器中随心所欲的排版定位，这部分内容在后面的章节会有介绍。用表格显示数据的具体操作步骤如下。
（1）打开webapps目录，在该目录下创建文件夹chap02（后面的案例直接打开）。
（2）在chap02文件夹下新建HTML文件table.htm，代码如下：

第7行中表格属性cellspacing设置为“5”，显示的结果就是第一个表格的每个单元格之间的距离为5。cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小，上面的代码中单元格之间的距离是0。
（3）打开浏览器，运行程序，效果如图2-3所示。

【案例总结】
（1）如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候希望显示边框。使用边框属性来显示一个带有边框的表格，如上例中第7行中border = "10"，就是设置表格边框宽度是10。
（2）表格标题标签的使用，如“< caption>表格占页面的70%< / caption>”，利用这种方法可以实现表格显示宽度的设置。
（3）表格一般由几部分组成：表格名称、表格栏及表中数据。这与其他软件（如Word）中所说的表格相同。

2.2.2 案例3 HTML表单

【设计要求】　
在JSP编程中会经常需要制作表单，以实现登录、注册等界面的设计。通过创建表单实现JSP页面表单制作。
【学习目标】　
（1）熟练掌握HTML中表单的功能。
（2）掌握HTML中表单标签的使用技巧。
【知识准备】　
1．什么是表单
表单是一个包含表单元素的区域。表单元素是允许用户在表单中（例如，文本域、下拉列表、单选框、复选框等）输入信息的元素。
表单使用表单标签（< form >）定义。

2．表单的基本标签
（1）表单元素中最基本的标签是< input>标签。该标签可以用来显示输入框和按钮等表单元素，它的属性type决定了表单元素的类型。type的值如表2-1所示。

（2）textarea称文本域，又称文本区，即有滚动条的多行文本输入控件，在网页的提交表单中经常用到。与单行文本框text控件不同，它不能通过maxlength属性来限制字数，为此必须寻求其他方法来加以限制以达到预设的需求。例如：

（3）select 元素可创建单选或多选菜单。select元素中的 标签用于定义列表中的可用选项，value 属性规定在表单被提交时被发送到服务器的值。< option> 与 < /option> 之间的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值。如下例：

【实施过程】
表单在JSP网页中主要负责数据采集功能。一个表单有3个基本组成部分：表单标签、表单域和表单按钮。表单标签，里面包含了处理表单数据所用CGI（Common Gateway Interface），是HTTP服务器与程序进行“交谈”的一种工具，其程序须运行在网络服务器上）程序的URL以及数据提交到服务器的方法；表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉列表框和文件上传框等；表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。下面主要介绍在HTML网页中实现表单的详细步骤。
（1）打开webapps中的文件夹chap02。
（2）新建HTML文件form.html，代码如下所示：

（3）打开浏览器，运行程序，效果如图2-4所示。

【案例总结】
（1）HTML文件中的form是表单区域标签，通常此标签内放置输入框、单选、多选、多行文本框、下拉列表框等表单内容，可以直接插入到HTML文件中执行。
（2）< form>表单中的action表示表单的数据要提交给哪个应用程序去处理，method属性可以由post和get两个值。它们的区别主要表现在：
① post可以提交内容大于1kB的内容，而get只能提交1kB以内的内容。
② post可以隐藏提交内容，不在浏览器的地址栏和浏览器缓存中保留，无法刷新网页，而get则将在地址栏和浏览器中保留内容，可以刷新网页。所以一般涉及账号密码提交的时候，我们一般采用post方式。
【拓展提高】　
把案例3中的form表单提交方式改为“post”，即：

method的值为get时，通过URL传送内容与参数，这个时候我们通过网址URL能看见自己填写内容并提交处理；method的值为post时，通过类似缓存传送填写内容与参数，而URL是不能看到form表单填写内容及提交内容。对于html 表单form标签，有了form表单及提交方式（get或post），才能将数据进行传输给程序处理，否则程序不能接收到将要处理的数据。

2.2.3 案例4 HTML文件结构布局

【设计要求】　
了解了HTML中包含的基本信息，然后开始着手布局了，一般的网站大多采用CSS+DIV来布局。本案例将学习怎样用DIV布局。
【学习目标】　
（1）了解在HTML网页文件中DIV标签的地位和作用。
（2）掌握在HTML网页布局中DIV标签的使用技巧。
【知识准备】
1．左右定宽布局
在CSS分别指定了左右两列宽度的情况下，只需要将左边的DIV向左浮动{float：left;}，右边的DIV向右浮动{float：right;}，并清除浮动，即可实现，如图2-5所示。

2．不定宽布局
不定宽布局分为一边不定宽和两边不定宽两种形式。在实际运用中第2种情况是不会采用的。我们具体来分析一下一边不定宽的左右布局方法，有以下两种情况。
（1）左边定宽，右边不定宽，左在上，右在下（左边在右边DIV之上）。遇到这种情况时，要将两个DIV进行左右布局，与左右定宽布局的方法基本相同，只需要将左边的DIV向左浮动{float：left;}，并清除浮动，右边的DIV就会跟在已浮动的“DIV左”后面，即已经实现左右两列布局了。
（2）左边定宽，右边不定宽，左在下，右在上。将右边DIV写在上方，通常是希望在加载网站内容时先显示右边的内容，这种情况在“左边为菜单，右边是内容”的左右布局中经常用到。
3．在网页中加入CSS
（1）什么是CSS
层叠样式表（Cascading Style Sheets，CSS）可以与HTML或XHTML超文本标记语言配合来定义网页的外观。有时即使懂得一些HTML标记，但是还不能随意改变网页元素的外观，无法随心所欲地编排网页。因此，W3C协会颁布了一套CSS语法，用来扩展HTML语法的功能。CSS是网页设计的一个突破，它解决了网页界面排版的难题。可以说，HTML的标记主要用于定义网页的内容（Content），而CSS决定这些网页内容如何显示（Layout）。网页设计通常需要统一网页的整体风格，统一的风格涉及网页文字属性、网页背景色以及链接文字属性等，如果应用CSS来控制这些属性，会大大提高网页设计速度，使网页总体效果更加统一。
（2） 如何编写CSS
CSS的语句是内嵌在HTML文档内的，所以，编写CSS的方法和编写HTML文档的方法是一样的。可以用任何一种文本编辑工具来编写CSS。如Windows的记事本和写字板、专门的HTML编辑工具（FrontPage、Dreamweaver等），都可以用来编辑CSS文档。编写CSS样式，可以有以下3种方法。
① 外部样式
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。< link>标签在（文档的）头部：

② 内部样式 当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用< style>标签在文档头部定义内部样式表

样式

③ 内联样式
当样式仅需要在一个元素上应用一次时，可以用内联样式。使用内联样式时，只需要在相关的标签内使用style属性，此属性取值可包含任何CSS属性，如：

由于内联样式要将表现和内容混杂在一起，因此此样式会损失掉样式表的许多优势，请慎用这种方法。
内联样式的优先级最高，其次是内部样式，外部样式的优先级是最低的。
【实施过程】
为更好地理解DIV标签的功能，可以通过一个简单的例子来了解一边定宽、左下右上的结构是如何实现左右两列布局的，需要注意的是，DIV通常和CSS样式表配合使用。下面介绍详细步骤。
（1）打开webapps中的文件夹chap02。
（2）在当前目录下创建样式表layout3.css，键入如下代码：

（3）创建JSP文件regist_customer.jsp，代码如下：

（4）打开浏览器，运行程序，效果如图2-6所示。

【案例总结】
（1）将页面设计中的徽标和图片等资源放在指定的路径下，在使用的时候一般采用path变量来进行统一定义：String path = request．getContextPath（）。
（2）该JSP注册页面采用DIV框架布局，分成头部、logo（徽标）、导航和内容4个部分，每个部分又划分成左、中、右3块，如内容信息部分：分成xinxi_left、xinxi_middle、xinxi_right。
（3）在采用DIV布局方法的网页文件中，对不同部分和和方位进行归类和命名，利用该名称来进行样式表的应用，如

，会用到样式表中规定的格式来显示内容：

（4）

我已阅读并接受《网站服务协议》

，通过checked属性来设置复选框默认被选中的情况。

2.3　小　结

本章主要介绍了HTML文件构成，主要涉及两个方面：① 文件的结构；② HTML标签，即〈〉所构成的单元。标签含有属性，通过标签可以在页面上产生各种可视元素，包括段落、输入框、表格、表单等，而通过标签的属性产生对这些元素的修饰，如颜色、大小等。IE所支持的CSS规范，大大加强了对标签的属性支持，可以产生非常好的网页效果。