1.3 文字布局
范例1-9 文字的分区显示
实例位置：光盘\ch01\1-9
范例说明 About the Guidance
本范例介绍在网页中对文字位置的编排及对文字的分区显示方式。程序运行效果如图1-9所示。
图1-9 文字的分区显示的运行效果图
语法说明 About the Expression
1.<div></div>标记——一个块级元素，用设定字、画、表格等的摆放位置
语法形式：<div align = #>显示内容</div>
align属性——设置水平对齐方式。
# = left（左对齐）、center（居中）、right（右对齐）。
在文档中描述不同性质的元素，可以包含段落、标题、表格，如章回、段落、摘要等。
2.<center></center>标记——居中排列其中的内容
语法形式：<center>显示内容</center>
很多标记已有align="center" 的参数，<center>看上去似乎多余了，然而事实上它确是常用的标记之一，其简单易用，常用于文字上。
关键步骤 Key Steps
1.打开Eclipse。
2.在ch01工程中的Webcontent目录下新建一个EX009目录，然后在此目录下新建一个HTML页面，命名其文件名为EX1-9.html，输入代码。
3.打开浏览器，输入http://127.0.0.1:8080/ch01/EX009/EX1-9.html，即可显示如图1-9所示的内容。
程序代码 Codes
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>JSP通用范例大全</title> </head> <body> <center>文字居中对齐</center> <div align=left>文字布局<br>Hello World！</div> <div align=center>文字布局<br>Hello World！</div> <div align=right>文字布局<br>Hello World！</div> </body> </html>
范例1-10 列表
实例位置：光盘\ch01\1-10
范例说明 About the Example
本范例介绍在网页中如何使用几种列表来丰富网页。程序运行效果如图1-10所示。
图1-10 列表的运行效果图
语法说明 About the Expression
<ul></ul>标记<li></li>标记——无序列表由<ul>开始，每个列表项由<li>开始。
语法形式：<ul><li>列表内容</ul>
<ol></ol>标记<li></li>标记——有序列表由<ol>开始，每个列表项由<li>开始。
语法形式：<ol><li>列表内容</ol>
<dl></dl>标记<dt>标记<dd></dd>标记——定义列表由<dl>开始，术语由<dt>开始，列表的内容由<dd>开始，<dd></dd>里的文字以缩进形式显示。
语法形式：<dl><dt>列表主题<dd>列表内容</dd></dl>
关键步骤 Key Steps
1.打开Eclipse。
2.在ch01工程中的Webcontent目录下新建一个EX010目录，然后在此目录下新建一个HTML页面，命名其文件名为EX1-10.html，输入代码。
3.打开浏览器，输入 http://127.0.0.1:8080/ch01/EX010/EX1-10.html，即可显示如图1-10所示的内容。
程序代码 Codes
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>JSP通用范例大全</title> </head> <body> 无序列表 <ul> <li>Java</li> <li>JSP</li> </ul> 有序列表 <ol> <li>Java</li> <li>JSP</li> </ol> 定义列表 <dl> <dt>Java <dd>Java程序</dd> <dt>JSP <dd>JSP网页</dd> </dl> </body> </html>
范例1-11 定制列表元素
实例位置：光盘\ch01\1-11
范例说明 About the Example
本范例介绍定制列表中的标记，有序列表表中的序号及有序列表表中的序号的起始值。程序运行效果如图1-11所示。
图1-11 有序列表的运行效果图
语法说明 About the Expression
1.无序列表中的type属性——定制无序列表中的标记
语法形式：<ul><li type = "#1">列表内容</ul>
#1 = disc，circle，square。
2.有序列表中的type属性——定制有序列表表中的序号
语法形式：<ol><li type = "#2">列表内容</ol>——有序列表
#2 =A，a，I，i，1。
3.有序列表中的start属性——定制有序列表表中的序号的起始值
语法形式：<ol start = "#3"><li>列表内容</ol>——有序列表
#3 = 1，2，3，……
关键步骤 Key Steps
1.打开Eclipse。
2.在ch01工程中的Webcontent目录下新建一个EX011目录，然后在此目录下新建一个HTML页面，命名其文件名为EX1-11.html，输入代码。
3.打开浏览器，输入 http://127.0.0.1:8080/ch01/EX011/EX1-11.html，即可显示如图1-11所示的内容。
程序代码 Codes
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>JSP通用范例大全</title> </head> <body> 无序列表 <ul> <li type=disc>Java</li> <li type=circle>JSP</li> <li type=square>HTML</li> </ul> 有序列表 <ol start=1> <!-- start属性默认为1，可以不设置 --> <li type=A>Java</li> <li type=1>JSP</li> <li type=I>HTML</li> </ol> </body> </html>