1.1 HTML基础_JSP通用范例开发金典-QQ阅读女生现言网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

1.1 HTML基础

范例1-1 创建一个HTML页面

实例位置：光盘\ch01\1-1

范例说明 About the Example

本范例将新建一个基本的HTML页面，给大家一个感性的认识。程序运行效果如图1-1所示。

图1-1 新建一个基本的HTML页面运行效果图

语法说明 About the Expression

<html></html>标记对，<head></head>标记对，<body></body>标记对，语言字符集信息<meta >标记，HTML的注释语法标记。

标记及功能说明：

<html></html>标记对：代表整个HTML页面，中间就是HTML页面的内容。

<head></head>标记对：代表整个HTML头。

<title></title>标记对：代表这个文件的标题。可以在浏览器最顶端的标题栏看到这个标题。

<body></body>标记对：代表整个HTML页面体，主要的HTML代码都在这个标记里面。

语言字符集信息<meta>标记：<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">中的charset属性指定了字符集为“UTF-8”，content属性指定了这个页面是“text/html”类型。

HTML的注释语法标记中的内容都是注释内容（如：），它们不参与到运行中，只对代码起备忘和标注作用。

关键步骤 Key Steps

1.打开Eclipse，新建一个工程，选择【Web】下的【Dynamic Web Project】，输入工程名——ch01，单击【Finish】按钮即可。

2.切换到Resource视图，右击Webcontent目录下新建一个EX001目录，然后在此目录下新建一个HTML页面，输入文件名EX1-1.html，然后单击【Finish】按钮即可。

3.在body标记之间填上“Hello World！”。

4.打开浏览器，输入http://127.0.0.1:8080/ch01/EX001/EX1-1.html，即可显示如图1-1所示的内容。

程序代码 Codes

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/
TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
Hello World!
</body>
</html>

范例1-2 背景色彩和文字色彩

实例位置：光盘\ch01\1-2

范例说明 About the Example

本范例介绍HTML网页的背景色彩的设置和全局文字色彩的设置方法。程序运行效果如图1-2所示。

图1-2 设置HTML网页的背景色彩的和全局文字色彩运行效果图

语法说明 About the Expression

<body></body>标记及其属性说明：

语法形式：<body bgcolor = "#" text = "#" link = "#" alink = "#" vlink = "#">

● bgcolor属性——背景色彩。

● text属性——非可链接文字的色彩。

● link属性——可链接文字的色彩。

● alink属性——正被单击的可链接文字的色彩。

● vlink属性——已经单击（访问）过的可链接文字的色彩。

# = rrggbb。

色彩是用16进制的红-绿-蓝（red-green-blue，RGB）值来表示。

16进制数有：0，1，2，3，4，5，6，7，8，9，a，b，c，d，e，f。

关键步骤 Key Steps

1.打开Eclipse。

2.在ch01工程中的Webcontent目录下新建一个EX002目录，然后在此目录下新建一个HTML页面，命名其文件名为EX1-2.html。

3.对body标记中的bgcolor和text属性进行设置。

4.打开浏览器，输入http://127.0.0.1:8080/ch01/EX002/EX1-2.html，即可显示如图1-2所示的内容。

程序代码 Codes

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/
TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body bgcolor="123456" text="ffffff">
Hello World!
</body>
</html>

范例1-3 换行、段落和标尺线

实例位置：光盘\ch01\1-3

范例说明 About the Example

本范例介绍在HTML里实现分段、换行和标尺线的功能。程序运行效果如图1-3所示。

图1-3 设置HTML网页的背景色彩的和全局文字色彩运行效果图

语法说明 About the Expression

1. 标记——换行

语法形式：

通过使用 这个标记，可以在不新建段落的情况下换行。 没有结束标记。用换行是个坏习惯，正确的是使用 来换行。

2.标记——划分段落

语法形式：显示内容

align属性——设置水平对齐方式。

# = left（左对齐）、center（居中）、right（右对齐）。

由标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个 换行符，也就是要隔一行空白行，用以区别文字的不同段落。

3.<hr>标记——标尺线

● size属性——设置标尺线厚度，以像素为单位。

● width属性——设置标尺线长度。

● align属性——设置标尺线对齐方式。

● color属性——设置标尺线颜色。

● noshade属性——设定标尺线条为平面显示，删去则具有阴影或立体效果。

语法形式：<hr size = #1 width = #2 height = #2 align = #3 color = #4 noshade>

#1 = 数字（默认为2px）。

#2 = 可用数字（绝对像素值）或百分比表示（为上一标记容器总宽度的百分比）;默认值为100%。

#3 = left（左对齐）、center（居中）、right（右对齐）。

#4 = rrggbb。

将标尺线用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。

关键步骤 Key Steps

1.打开Eclipse。

2.在ch01工程中的Webcontent目录下新建一个EX003目录，然后在此目录下新建一个HTML页面，命名其文件名为EX1-3.html，输入代码。

3.打开浏览器，输入http://127.0.0.1:8080/ch01/EX003/EX1-3.html，即可显示如图1-3所示的内容。

程序代码 Codes

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/
TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<p>JSP通用范例大全</p>
<p align=center>JSP通用范例大全</p>
<p align=right>JSP通用范例大全</p>
<hr size=6 width=50% align=left noshade> <!-- 标尺线大小为6，
宽度为浏览器长度的50%，左对齐，无阴影效果 -->
JSP通用范例大全
<hr color=ffaabb>  <!-- 设置标尺线颜色 -->
第一行
<br><!-- 换行 -->
第二行
</body>
</html>

范例1-4 链接

实例位置：光盘\ch01\1-4

范例说明 About the Example

本范例介绍链接标记，通过它可以在Internet上的资源之间方便地跳转。程序运行效果如图1-4所示。

图1-4 链接标记运行效果图

(a) 带链接的界面

(b) 带注释的链接

(d) 在新窗口打开。

语法说明 About the Expression

<a></a>标记——表示链接可以指向任何一个文件源。

● href属性——定义这个链接所指的目标地址。

语法形式：<a href = "URL">链接显示的内容</a>

单击<a></a>当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。

● title属性——当鼠标悬停在链接上的时候，显示该链接的文字注释。

语法形式：<a href = "URL" title = "注释内容">链接的显示内容</a>

● target属性——可以在一个新窗口里打开链接文件。

语法形式：<a href = "URL" target = "目标窗口的打开方式">链接的显示内容</a>

target = _parent在上一级窗口中打开，一般框架页会经常使用；_blank在新窗口打开；_self在同一个窗口中打开，这项一般不用设置；_top在浏览器的整个窗口中打开，忽略任何框架；还可以为框架页面中框架name所设定的字符。

关键步骤 Key Steps

1.打开Eclipse。

2.在ch01工程中的Webcontent目录下新建一个EX004目录，然后在此目录下新建两个HTML页面，命名其文件名为EX1-4.html和EX1-4-example.html，输入代码。

3.打开浏览器，输入http://127.0.0.1:8080/ch01/EX004/EX1-4.html，即可显示如图1-4所示的内容。

程序代码 Codes

EX1-4.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<a href="EX1-4-sample.html">链接例子</a>
<br>
<a href="EX1-4-sample.html" title="Hello World!">链接例子带注释</a>
<br>
<a href="EX1-4-sample.html" target="_blank">新窗口</a>
</body>
</html>
EX1-4-example.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>链接范例</title>
</head>
<body>
新窗口!
</body>
</html>

技巧：

在网站中，你经常会看到“联系我们”的链接，点击这个链接，就会触发你的邮件客户端；比如Out look Express，然后显示一个新建E-mail的窗口。用<a>可以实现这样的功能，例如<a href-"mailto:你的E-mail地址">联系我们</a>。

范例1-5 跳转到另一个文件的指定部位

实例位置：光盘\ch01\1-5

范例说明 About the Example

本范例介绍网页中链接标记的用法，跳转到另一个文件的指定部位。程序运行效果如图1-5所示。

图1-5 跳转到一个文件的指定部位运行效果图

语法说明 About the Expression

<a></a>标记——表示链接可以指向任何一个文件源。

name属性——可以跳转到一个文件的指定部位。

语法形式：<a href = "#name">链接的显示内容</a>

<a name = "name">链接的显示内容</a>

使用name属性，要设置一对。一是设定name的名称；二是设定一个href指向这个name属性。

关键步骤 Key Steps

1.打开Eclipse。

2.在ch01工程中的Webcontent目录下新建一个EX005目录，然后在此目录下新建一个HTML页面，命名其文件名为EX1-5.html，输入代码。

3.打开浏览器，输入http://127.0.0.1:8080/ch01/EX005/EX1-5.html，即可显示如图1-5所示的内容。

程序代码 Codes

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<a href="#fifth">见第五章</a>
<br><br>
<a name="first">第一章</a>
<p>JSP与HTML</p>
<a name="second">第二章</a>
<p>JSP与JavaScript</p>
<a name="third">第三章</a>
<p>JSP指令与动作</p>
<a name="fouth">第四章</a>
<p>JSP内部对象</p>
<a name="fifth">第五章</a>
<p>JSP表单处理</p>
</body>
</html>

抛砖引玉 About the Guidance

技巧：

name属性通常用于创建一个大章节的目录。每个章节都会建立一个链接，放在章节的开始处，每个章节的开头都设置name属性。当用户点击某个章节的链接时，这个章节的内容就会显示在文章内容的上面。如果浏览器不能找到name指定的部分，则跳到文章开头，不会报错。