1.2 文字

范例1-6 正文标题

实例位置:光盘\ch01\1-6

范例说明 About the Example

范例介绍网页中如何定义正文标题。程序运行效果如图1-6所示。

图1-6 正文标题运行效果图

语法说明 About the Expression

<hn></hn>标记——正文标题。

语法形式:<hn align = #>显示内容</hn>

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

# = left(左对齐)、center(居中)、right(右对齐)。

HTML使用<h1>到<h6>这几个标记来定义正文标题,从大到小。这些标记会自动插入一个空行,不必使用 <p> 标记再加空行。因此在一行中无法使用不同大小的字体。

关键步骤 Key Steps

1.打开Eclipse。

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

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

程序代码 Codes

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h3 align=left>三级标题左对齐</h3>
<h3 align=center>三级标题居中</h3>
<h3 align=right>三级标题右对齐</h3>
</body>
</html>

范例1-7 文字格式

实例位置:光盘\ch01\1-7

范例说明 About the Example

范例介绍在网页中用font这个元素及其属性来设定字体的大小、颜色和字体风格。程序运行效果如图1-7所示。

图1-7 文字格式的运行效果图

语法说明About the Expression

<font></font>标记——文字格式。

语法形式:<font size = "#1" color = "#2" face = "#3">显示内容</font>

● size属性——设置字体的大小。

#1 = 数字(有1-7号字体大小,默认为3号字体)或者以默认字体增加、减少字体大小级数(如:+1、-2)。

● color属性——设置字体颜色。

#2 = rrggbb。

● face属性——设置字体风格。

#3 =客户端可获得的字体,如Arial、宋体、黑体等,只有客户端安装有该种字体样式才起作用。

关键步骤 Key Steps

1.打开Eclipse。

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

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

程序代码 Codes

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<p><font size =1 color=red>JSP通用范例大全</font></p>
<p><font size =2>JSP通用范例大全</font></p>
<p><font size =3>JSP通用范例大全</font></p>
<p><font size =4>JSP通用范例大全</font></p>
<p><font size =5>JSP通用范例大全</font></p>
<p><font size =10 face="隶书">JSP通用范例大全</font></p>
</body>
</html>

范例1-8 物理字体与逻辑字体

实例位置:光盘\ch01\1-8

范例说明 About the Example

范例介绍在网页中根据各种情况来调整字体效果。程序运行效果如图1-8所示。

图1-8 物理字体与逻辑字体的运行效果图

语法说明 About the Expression

1.物理字体语法形式

● <b></b>标记——显示粗体。

● <i></i>标记——显示斜体字。

● <u></u>标记——显示下划线。

● <tt></tt>标记——显示打印机体。

● <sub><sub/>——显示上标。

● <sup></sup>——显示下标。

● <s></s>标记或<strike></strike>标记——显示删除线。

2.逻辑字体语法形式

● <em></em>标记——用于强调。

● <strong></strong>标记——用于加强语气。

● <code></code>标记——用于显示原始代码。

● <samp> </samp>标记——用于引用文字。

● <kbd></kbd>标记——用于表示使用者输入的文字。

● <var></var>标记——用于显示变量。

● <dfn></dfn>标记——用于定义。

● <cite></cite>标记——用于引经据典的文字。

● <small></small>标记——小字号标记。

● <big></big>标记——大字号标记。

关键步骤 Key Steps

1.打开Eclipse。

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

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

程序代码 Codes

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<p><b>物理字体</b>&nbsp;物理字体</p>
<p><i>物理字体</i>&nbsp;物理字体</p>
<p><u>物理字体</u>&nbsp;物理字体</p>
<p><tt>物理字体</tt>&nbsp;物理字体</p>
<p><sup>物理字体</sup>&nbsp;物理字体</p>
<p><sub>物理字体</sub>&nbsp;物理字体</p>
<p><s>物理字体</s>&nbsp;物理字体</p>
<p><strike>物理字体</strike>&nbsp;物理字体</p>
<p><em>逻辑字体</em>&nbsp;逻辑字体</p>
<p><strong>逻辑字体</strong>&nbsp;逻辑字体</p>
<p><code>逻辑字体</code>&nbsp;逻辑字体</p>
<p><samp>逻辑字体</samp>&nbsp;逻辑字体</p>
<p><kbd>逻辑字体</kbd>&nbsp;逻辑字体</p>
<p><var>逻辑字体</var>&nbsp;逻辑字体</p>
<p><dfn>逻辑字体</dfn>&nbsp;逻辑字体</p>
<p><cite>逻辑字体</cite>&nbsp;逻辑字体</p>
<p><small>逻辑字体</small>&nbsp;逻辑字体</p>
<p><big>逻辑字体</big>&nbsp;逻辑字体</p>
</body>
</html>

提示:

在通常情况下,HTML会自动截去多余的空格。不管加多少空格,都会被看做一个空格。比如在两个字之间加了10个空格,HTML会自动截去9个空格,只保留一个。为了能在网页中增加空格可以使用“&nbsp;”表示空格。