第 2 章 html 基础
DESCRIPTION
第 2 章 HTML 基础. 2.1 Frontpage 工具简介 2.2 HTML 元素 2.3 框架结构. 一个完整的 JSP 程序包含 JSP 代码和 HTML 两部分，其中 JSP 代码嵌入在 HTML 中间。因此在学习 JSP 之前有必要了解有关 HTML 方面的知识。 Frontpage 是一个简单的 HTML 编辑工具，利用它可以直接生成 HTML 代码而不用手工输入，非常简单和方便。当然也可以在 Frontpage 中直接输入 JSP 代码，只需采用 来标记就可以了。. 2.1 Frontpage 工具简介. - PowerPoint PPT PresentationTRANSCRIPT
第 第 2 2 章 章 HTMLHTML 基础基础
2.1 2.1 FrontpageFrontpage 工具简介 工具简介
2.2 2.2 HTMLHTML元素 元素
2.3 2.3 框架结构 框架结构
一个完整的一个完整的 JSPJSP 程序包含程序包含 JSPJSP 代码和代码和HTMLHTML 两部分，其中两部分，其中 JSPJSP 代码嵌入在代码嵌入在HTMLHTML 中间。因此在学习中间。因此在学习 JSPJSP 之前有必要之前有必要了解有关了解有关 HTMLHTML 方面的知识。方面的知识。
FrontpageFrontpage 是一个简单的是一个简单的 HTMLHTML 编辑编辑工具，利用它可以直接生成工具，利用它可以直接生成 HTMLHTML 代码而代码而不用手工输入，非常简单和方便。当然也不用手工输入，非常简单和方便。当然也可以在可以在 FrontpageFrontpage 中直接输入中直接输入 JSPJSP 代码，代码，只需采用只需采用 <%<% 和和 %>%> 来标记就可以了。 来标记就可以了。
2.1 Frontpage 2.1 Frontpage 工具简介 工具简介
FrontpageFrontpage 软件是一个网页制作工具软件，软件是一个网页制作工具软件，支持“所见即所得”的编辑方式。支持“所见即所得”的编辑方式。
FrontpageFrontpage 软件可分为软件可分为 33 部分：编辑网页部分：编辑网页的的 Frontpage EditorFrontpage Editor 、管理网站的、管理网站的 Frontpage Frontpage Explorer Explorer 和提供网站功能的和提供网站功能的 Frontpage PWSFrontpage PWS 。。
Frontpage EditorFrontpage Editor 编辑时有编辑时有 33 个窗口：个窗口：普通窗口，用来编辑网页内容；普通窗口，用来编辑网页内容； HTMLHTML 窗窗口，用来观看口，用来观看 FrontpageFrontpage 自动生成的自动生成的HTMLHTML 代码，也可在该窗口中输入代码，也可在该窗口中输入 HTMLHTML代码；预览窗口，演示网页效果。代码；预览窗口，演示网页效果。
上述上述 33 个窗口之间可以任意切换。个窗口之间可以任意切换。
2.2 HTML2.2 HTML 元素 元素
HTMLHTML 不是编程语言，而是一种根据不是编程语言，而是一种根据需要把相关信息链接起来的信息管理技术，需要把相关信息链接起来的信息管理技术，是一种用于编写超文本的标记语言。是一种用于编写超文本的标记语言。
2.2.1 HTML2.2.1 HTML 文件的基本格式文件的基本格式格式如下：格式如下： <HTML><HTML>
<HEAD><HEAD>
<Title> <Title> 标题部分标题部分 </Title> </Title>
</HEAD></HEAD>
<BODY><BODY>
正文部分正文部分 </BODY></BODY>
</HTML> </HTML>
各标记含义如下：各标记含义如下： <HTML> </HTML><HTML> </HTML><HTML><HTML> 标签位于标签位于 HTMLHTML 文件最开头，告诉浏览器，文件最开头，告诉浏览器，这个文件是这个文件是 HTMLHTML 文件，在文件尾，用文件，在文件尾，用 </HTML></HTML>结束，提醒结束，提醒 HTMLHTML 文件结束。文件结束。 <HEAD> </HEAD><HEAD> </HEAD><HEAD><HEAD> 标签一般放在标签一般放在 <HTML><HTML> 标签后，用来标明标签后，用来标明文件的题目或定义部分。文件的题目或定义部分。 <Title> </Title><Title> </Title>这对标签用来定义文件的标题，浏览器通常会将文件这对标签用来定义文件的标题，浏览器通常会将文件标题显示在浏览器窗口的左上角。标题显示在浏览器窗口的左上角。 <BODY> </BODY><BODY> </BODY>这对标签一般用来指明这对标签一般用来指明 HTMLHTML 文档里主要内容，如：文档里主要内容，如：标题、段落、列表等。也可定义主页背景颜色。标题、段落、列表等。也可定义主页背景颜色。
2.2.2 2.2.2 文本标记文本标记11．标题元素．标题元素
HTMLHTML 中的标题元素使用格式：中的标题元素使用格式： <H#> · · · · · · </H#><H#> · · · · · · </H#>
## 代表代表 11 、、 22 、、 33 、、 44 、、 55 、、 66 中一个。中一个。它支持它支持 ALIGNALIGN 属性，用它可以指定排版格属性，用它可以指定排版格式，其属性值有：式，其属性值有： LEFTLEFT 、、 RIGHTRIGHT 和和CENTERCENTER 。如果不给出。如果不给出 ALIGNALIGN 的属性值，的属性值，缺省值为缺省值为 LEFTLEFT 。。
图 2-2 标题元素显示效果
22 ．． FONTFONT元素元素FONTFONT 元素用来设置文档的字体，通元素用来设置文档的字体，通
过改变其属性可以对字体进行不同的设置。过改变其属性可以对字体进行不同的设置。其常用的属性包括：其常用的属性包括： SIZESIZE 、、 COLORCOLOR 和和FACEFACE 。其中。其中 SIZESIZE 用来指定字符的大小，用来指定字符的大小，COLORCOLOR 用来指定字符的颜色，用来指定字符的颜色， FACEFACE 用用来指定一种字体名或一种字体列表。来指定一种字体名或一种字体列表。
33．字符修饰元素．字符修饰元素HTMLHTML 中规定了大量的字符修饰处理中规定了大量的字符修饰处理
元素，它们能够在不改变字体、字号的基元素，它们能够在不改变字体、字号的基础上对字形进行改变。具体介绍如下。础上对字形进行改变。具体介绍如下。
（（ 11 ）物理样式）物理样式BB 元素：元素：II 元素：元素：UU 元素：元素：TTTT 元素：元素：SUPSUP 元素：元素：SUBSUB 元素：元素：SS 元素：元素：STRIKESTRIKE 元素：元素：
（（ 22 ）逻辑样式）逻辑样式EMEM 元素：元素：STRONGSTRONG 元素：元素：CODECODE 元素：元素：SAMPSAMP 元素：元素：KBDKBD 元素：元素：VARVAR 元素：元素：DFNDFN 元素：元素：CITECITE 元素：元素：SMALLSMALL 元素：元素：BIGBIG 元素：元素：
44．分行控制．分行控制
（（ 11 ）分段元素）分段元素 PP
（（ 22 ）换行元素）换行元素 BRBR
55．分隔线．分隔线 HRHR元素元素
2.2.3 2.2.3 超链接超链接超链接主要通过锚点元素超链接主要通过锚点元素 AA 来实来实
现。现。 AA 元素可以支持较多的属性，其中最元素可以支持较多的属性，其中最重要的是重要的是 HREFHREF 和和 NAMENAME 属性。属性。
11 ．． HREFHREF属性属性
22 ．． NAMENAME 属性属性
2.2.4 2.2.4 图片标记图片标记
11．基本用法．基本用法
22．图像对齐与布局．图像对齐与布局
2.2.5 Table 2.2.5 Table 表格表格主要标记：主要标记： <table>……</table> <table>……</table> 定义表格；定义表格； <tr> <tr> 定义表行；定义表行； <th> <th> 定义表头；定义表头； <td> <td> 定义表元；定义表元； <caption> <caption> 用来给表格提供一个标题。 用来给表格提供一个标题。
例例 2-32-3
<table border><table border>
<tr><th><tr><th> 食物食物 </th><th></th><th> 饮料饮料 </th><th></th><th> 甜点甜点 </th>/*</th>/* 定义表定义表头头 **//
<tr><td>A</td><td>B</td><td>C</td> /*<tr><td>A</td><td>B</td><td>C</td> /* 定义表元定义表元 **//
</table></table>
例例 2-4 2-4 列合并。列合并。 <table border><table border>
<tr><th colspan=3><tr><th colspan=3> 早餐菜单早餐菜单 </th></th>
<tr><th> <tr><th> 食物 食物 </th><th> </th><th> 饮料 饮料 </th><th></th><th> 甜点甜点 </th></th>
<tr><td>A</td><td>B</td><td>C</td> <tr><td>A</td><td>B</td><td>C</td>
</table></table>
例例 2-5 2-5 行合并。行合并。 <table border><table border>
<tr><th rowspan=3><tr><th rowspan=3> 早餐菜单早餐菜单 </th> <th> </th> <th> 食物 食物 </th> <td>A</td></th> <td>A</td>
<tr><th> <tr><th> 饮料 饮料 </th> <td>B</td> </th> <td>B</td>
<tr><th><tr><th> 甜点甜点 </th><td>C</td> </th><td>C</td>
</table></table>
图 2-4 表格应用
图 2-5 表格元素应用
图 2-6 表格元素应用
2.2.6 2.2.6 表单的概念表单的概念11．表单的结构．表单的结构
在在 HTMLHTML 中，中， Form Form 的标记有开始标记的标记有开始标记 <form><form>和结束标记和结束标记 </from></from> ，在开始标记中一般包含属性：，在开始标记中一般包含属性：ACTIONACTION 、、 METHODMETHOD 和和 ENCTYPEENCTYPE 。。
ACTIONACTION ：：语法格式：语法格式：METHODMETHOD ：：语法格式：语法格式：ENCTYPEENCTYPE ：：
22．表单中常用的标记．表单中常用的标记表单中使用的主要元素包括以下表单中使用的主要元素包括以下 33 个。个。INPUTINPUT ：：SELECTSELECT ：：TEXTAREATEXTAREA ：：
（（ 11 ）） INPUT INPUT
① ① TEXTTEXT 类型类型NAMENAME ：：SIZESIZE ：：VALUEVALUE ：：MAXLENGTHMAXLENGTH ：：
② ② PASSWORDPASSWORD 类型类型
③ ③ RADIORADIO 类型类型NAMENAME ：：VALUEVALUE ：：CHECKEDCHECKED ：：
④ ④ CHECKBOXCHECKBOX 类型类型NAMENAME ：：VALUEVALUE ：：CHECKEDCHECKED ：：
⑤ ⑤ SUBMITSUBMIT 类型类型NAMENAME ：：VALUEVALUE ：：
⑥ ⑥ RESET RESET 类型类型
⑦ ⑦ HIDDEN HIDDEN 类型类型
（（ 22 ）） SELECTSELECT
（（ 33 ）） TEXTAREATEXTAREA
33．表单的处理．表单的处理
2.3 2.3 框 架 结 构 框 架 结 构 FRAMESETFRAMESET 标记有两个属性标记有两个属性
ROWROW 、、 COLSCOLS ，分别用来说明将把浏览器窗，分别用来说明将把浏览器窗口分成小窗口的数量和各个小窗口的大小。口分成小窗口的数量和各个小窗口的大小。
COLSCOLS 属性：属性：纵向将窗口划分为若干窗纵向将窗口划分为若干窗框。框。
ROWSROWS 属性：属性：横向将窗口划分为若干窗横向将窗口划分为若干窗框。框。