上一篇：JSP程序设计实训（二）——JSP开发平台与Tomcat服务器
下一篇：JSP程序设计实训（三）——HTML基本知识（二）
一、HTML页面的基本构成
- 超文本标记语言或超文本链接语言（HTML）是目前网络上应用最为广泛的标记语言，也是构成网页文档的主要语言，是一种用来制作超文本文档的简单标记语言。它不是一种真正的编程语言，只是一种标记符。用HTML编写的超文本文档称为HTML文档，HTML文档是一个放置了标签的文本文件，通常它带有 html 或 htm 的文件扩展名，是能独立于各种操作系统平台的、可供浏览器解释浏览的网页文件。
- HTML文档中含有“标签”，例如
<html>、<head>等。标签用来分隔和标记网页中的元素，以形成网页的布局、格式等，通过标签可以在网页中加入文本、图片、视频等多媒体信息，还可以实现页面之间的跳转等。 - 标签分为单标签和双标签。单标签只需单独使用就能完整地表达意思，控制网页效果，如
<meta>、<br>、<hr>。双标签成对使用，由一个开始标签和一个结束标签组成，开始标签告诉Web浏览器从此处开始执行该标签所代表的功能，而结束标签告诉Web浏览器在这里结束该功能，结束标签的形式是在开始标签前加上一个斜杠，如<body> </body>。在单标签与双标签的开始标签里，还可以包含一些属性，以达到个性化的结果，如<标签 属性1 属性2 属性3 …>，各属性之间没有先后次序，属性也可省略，即取默认值。 - 下面给个代码示例，实现的是一个静态登录页面，是一个 jsp 文件：
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<title>登录页面</title>
<meta http-equiv = "Content-Type" content = "text/html;charset = UTF-8">
</head>
<body>
<hr>
<h3>登录页面</h3>
<hr>
<form name = "" action = "" method = "post">
<table border1 = "1">
<tr>
<td>用户名</td>
<td><input type = "text" name = "userName" size = "20"></td>
</tr>
<tr>
<td>密码</td>
<td><input type = "password" name = "userPassword" size = "22"></td>
</tr>
<tr>
<td><input type = "submit" name = "submit" value = "登录"></td>
<td><input type = "reset" name = "reset" value = "取消"></td>
</tr>
</table>
</form>
</body>
</html>
-
HTML语言不区分大小写，使用HTML标签时不可交错，即标签需正确进行嵌套。HTML标签有多种，下面先了解基本标签。
1、页面结构标签
- 通过上述例子可以看出，HTML文档分为文档头与文档体两部分。在文档头中，对这个文档进行了一些必要的定义，文档体中才是要显示在网页中的各种正文信息。通常由3对标签来构成一个HTML文档的框架。
<html></html>这个标签是告诉浏览器这个文件是HTML文件。 <html>放在文档的最前面，用来表示文档的开始，</html>放在文档的最后面，用来表示文档的结束。<head></head>这个标签中的内容是文档的头部信息，说明文档的一些基本情况，如文档的标题等，其内容不出现在网页中。在此标签之间可以使用 <title></title>、<meta>、<script></script>等描述HTML文档相关信息的标签对。<body></body>这个标签中的内容是HTML文档的主题部分，可包含 <p></p>、<h1></h1>、<br>、<hr>等标签，他们所定义的文本图像等将会在网页中显示出来。2、页头标签
<title></title>该标签对用来设定网页的标题，浏览器通常将标题显示在浏览器窗口的标题栏左边。 3、标题标签
- 在 HTML 文档中，
<hn></hn>标签对可以定义不同显示结果的标题，n 表示标题的级数，取值范围为1~6，n 越小，标题字号越大。<hn>可以使用属性 align，用于设置标题文字的对齐方式，其取值如下： - left：左对齐 ； right：右对齐 ； center：居中对齐 。未设置属性时，默认为左对齐。举个例子：
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<title>标题标签实例</title>
<meta http-equiv = "Content-Type" content = "text/html;charset = UTF-8">
</head>
<body>
<hr>
<h1 align = "center">一级标题的效果</h1>
<h2 align = "left">二级标题的效果</h2>
<h3 align = "right">三级标题的效果</h3>
<h4>四级标题的效果</h4>
<hr>
</body>
</html>
4、格式标签
<br> | 该标签强制文本换行，但不会在行与行之间留下空行。如果把<br>放在<p></p>标签对的外面，将创建一个大的回车换行，即<br>前边的文本和后边的文本的行与行之间的距离比较大；如果放在里面，则距离较小。 |
|---|---|
<hr> | 该标签在网页中加入一条横跨网页的水平线，具有多种属性，这些属性用于设置水平线的宽度、长度及显示效果等。（1）size 属性：设置水平线的粗细，默认单位为像素 （2）width 属性：设置水平线宽度，默认单位为像素 （3）noshade 属性：该属性不用赋值，直接加入标签即可使用，用来取消水平线的阴影，不加时默认有阴影 （4）align 属性：设置水平线的对齐方式 （5）color 属性：设置水平线的颜色 |
5、文字格式标签
<font></font>标签对通过设置<font>属性来控制文字的字体、大小、样式和颜色，属性功能如下：- face 属性：设置字体样式； size 属性：设置字体大小，值为整数，分为7个等级，默认为3； color 属性：设置字体颜色。
6、段落标签
<p></p>标签对用来创建一个新的段落，在此标签对之间加入的文本将按照段落的格式显示在浏览器上，</p>可以省略，但为了防止文档出错，尽量不要省略。<p>标签可以有多种属性，如 align 属性控制其内容的对齐方式；clear 属性控制图文混排方式，其取值如下：- left：下一段显示在左边界处的空白区域； right：下一段显示在右边界处的空白区域； center：下一段的左右两边都不许有其他内容。
7、预定格式标签
- 在编辑文档时，如果希望将来浏览网页时仍能保留在编辑工具中已经排好的形式显示内容，可以使用
<pre></pre>标签对。默认字体为10磅。
8、注释标签
- 为提高文件的可读性，可以使用
<!--和-->标签注释文字，注释内容不会在浏览器中显示。 - 例如：
<!--注释语句-->
参考书籍：马军霞、张志锋、皇安伟等编著的《JSP程序设计实训与案列教程》第二版
1463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
