实例041 在文字上方标注说明_HTML5程序开发范例宝典-QQ阅读男生都市网

书名：HTML5程序开发范例宝典
作者名：韩旭高飞孙桂杰编著
本章字数：333字
更新时间：2024-12-21 21:57:48

2.3 网页文本内容

实例030 观察标题<h1>到<h6>的变化

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\030

实例说明

标题文字标记共有6种，每一种标题文字的大小是不同的，一般用标题来强调段落要表现的内容。本实例就来了解一下不同的标题文字的效果。实例运行效果如图2.20所示。

图2.20 标题文字的效果

技术要点

在HTML中，定义了6级标题，从1级～6级依次递减。语法如下：

1级标题：<h1>…</h1>

2级标题：<h2>…</h2>

3级标题：<h3>…</h3>

4级标题：<h4>…</h4>

5级标题：<h5>…</h5>

6级标题：<h6>…</h6>

在该语法中，1级标题使用的字号最大，6级标题使用的字号最小。

实现过程

创建index.html文件，在文件中分别定义<h1>～<h6>标签。具体代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>标题文字的效果</title>

</head>

<body>

<h1>1级：HTML程序开发范例宝典</h1>

<h2>2级：HTML程序开发范例宝典</h2>

<h3>3级：HTML程序开发范例宝典</h3>

<h4>4级：HTML程序开发范例宝典</h4>

<h5>5级：HTML程序开发范例宝典</h5>

<h6>6级：HTML程序开发范例宝典</h6>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

为文章标题使用标题文字标记。

在页面导航中使用标题文字标记。

实例031 用align属性设置标题文字的对齐方式

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\031

实例说明

默认情况下，标题文字是左对齐的。而在网页制作的过程中，可以设置标题文字的对齐方式。本实例将以一首古诗为例，通过标题字标记的 align属性设置标题文字的对齐方式。其运行效果如图2.21所示。

图2.21 标题文字的对齐效果

技术要点

在标题标记中，最主要的属性是align属性，用于定义标题文字的对齐方式，使页面更加整齐。语法如下：

align=对齐方式

在该语法中，align属性需要设置在标题标记的后面，标题的对齐方式如表2.2所示。

表2.2 标题文字的对齐方式

实现过程

创建index.html文件，首先将“古诗介绍”定义在h1标记中，并设置为默认对齐方式；然后将古诗的名称定义在h2标记中，并设置为居中对齐，接着将古诗的前两句定义在h3标记中，并设置为左对齐，最后将古诗的后两句定义在h4标记中，并设置为右对齐。具体代码如下：

<html>

<head>

<title>标题文字的对齐效果</title>

</head>

<body>

<h3 align="left">床前明月光,疑是地上霜</h3>

<h4 align="right">举头望明月,低头思故乡</h4>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

为文章标题使用标题字标记并设置对齐方式。

在页面导航中使用标题字标记并设置对齐方式。

实例032 设置不同的文字字体

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\032

实例说明

除了标题文字外，在网页中普通的文字信息更是不可缺少的。而多种多样的文字效果可以使网页变得更加绚丽。本实例将在网页中为不同的文字设置不同的字体。其运行效果如图2.22所示。

图2.22 设置不同的文字字体

技术要点

在HTML中，可以通过文字格式标记<font>中的face属性设置文字的不同字体效果。语法如下：

在该语法中，face属性的值可以是1个或者多个。默认情况下，使用第1种字体进行显示；如果第1种字体不存在，则使用第2种字体进行代替，依此类推。如果设置的几种字体在浏览器中都不存在，则会以默认字体显示。

实现过程

创建index.html文件，在文件中通过文字格式标记<font>中的face属性，为不同的文字设置不同的字体。具体代码如下：

<html>

<head>

<title>不同字体的显示效果</title>

</head>

<body>

<font face="华文彩云">登山则情满于山</font>

<font face="隶书">观海则意溢于海</font>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

为标题文字使用特殊字体。

在文章正文中使用特殊字体。

实例033 显示文字的粗体、斜体、下划线的效果

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\033

实例说明

在浏览网页时，还常常可以看到一些特殊效果的文字，例如粗体字、斜体字以及带有下划线的文字。本实例就来实现文字的粗体、斜体、下划线的输出效果。其运行结果如图2.23所示。

图2.23 设置文字的不同样式

技术要点

在HTML中，文字的粗体、斜体、下划线可以通过<strong>、<em>和<u>标记来实现。语法如下：

<strong>粗体的文字</strong>

<u>带下划线的文字</u>

这几种效果的语法类似，只是标记不同。粗体的效果也可以通过标记<b>来实现；斜体字也可以使用标记<I>或者<cite>来表示。

实现过程

创建 index.html 文件，在文件中通过<strong>、<cite>和<u>标记为不同的文字设置粗体、斜体和下划线。具体代码如下：

<html>

<head>

<title>设置不同的文字效果</title>

</head>

<body>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

为文章标题使用下划线。

在文章正文中为关键字使用粗体。

实例034 使用标记<p>表示段落格式

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\034

实例说明

在文本编辑窗口中，输入完一段文字后，按下回车键后就生成了一个段落。在HTML 中可以通过标记实现段落的效果。本实例使用标记<p>将文本分成不同的段落。其运行结果如图2.24所示。

图2.24 段落效果

技术要点

在HTML中，段落通过<p>标记来表示。语法如下：

可以使用成对的<p>标记来包含段落，也可以使用单独的<p>标记来划分段落。

实现过程

创建index.html文件，在文件中通过<p>标记为文本内容进行分段。具体代码如下：

<html>

<head>

<title>输出段落文字</title>

</head>

<body>

<p>张而不弛,文武弗能也</p>

弛而不张,文武弗为也<p>一张一弛,文武之道也。

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

在文章正文中使用段落标记<p>。

在段落标记<p>中使用align属性。

实例035 使用标记<br>实现文字的换行显示

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\035

实例说明

段落与段落之间是隔行换行的，文字的行间距比较大，这时可以使用换行标记来实现文字的紧凑换行显示。本实例使用换行标记<br>实现文字的换行显示。其运行结果如图2.25所示。

图2.25 文字的换行显示

技术要点

在HTML中，实现文字的换行显示使用的是<br>标记，一个<br>标记代表一个换行，连续的多个<br>标记可以多次换行。

实现过程

创建index.html文件，在文件中通过<br>标记实现文字的换行。具体代码如下：

<html>

<head>

<title>文字的换行</title>

</head>

<body>

关雎<br/><br/>

关关雎鸠，在河之洲。<br/>

窈窕淑女，君子好逑。<br/>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

在文章正文中使用换行标记<br>。

使用<nobr>标记取消文字换行。

实例036 应用标记<center>使段落居中显示

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\036

实例说明

段落和普通文字类似，有时候也需要将段落居中显示。本实例将应用<center>标记使段落居中显示。其运行结果如图2.26所示。

图2.26 段落的居中显示

技术要点

本实例应用HTML中的<center>标记，该标记对其包围的文本进行水平居中处理。语法如下：

在标记之间的文字会自动居中显示。

实现过程

创建index.html文件，在文件中对段落以及文本应用<center>标记。具体代码如下：

<html>

<head>

<title>段落的居中对齐</title>

</head>

<body>

百川东到海,何时复西归？<br/>

少壮不努力,老大徒伤悲。

</center>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

使文章标题及正文居中显示。

对图片进行居中显示。

实例037 对页面中的文本定义默认的字体样式

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\037

实例说明

我们还可以在页面中定义默认的字体颜色和大小等样式。本实例将应用HTML 中的<basefont>标记对页面中的文本定义默认的字体样式。其运行结果如图2.27所示。

图2.27 基字标记

技术要点

本实例中主要应用<basefont>标记，该标记用于定义基准字体，它可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列。<basefont>标记中的定义将影响<basefont>标记后的所有文本。

说明：只有IE浏览器支持<basefont>标记。

实现过程

创建index.html文件，在文件中的指定位置应用<basefont>标记，对文本定义默认的字体样式。具体代码如下：

<html>

<head>

<title>基字对文字的影响</title>

</head>

<body>

这是一本<basefontsize=5 color="#009900"face="方正粗倩简体">内容详尽的HTML书籍

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

应用<basefont>标记定义文章正文的样式。

应用<basefont>和<font>标记对文本定义不同的显示样式。

实例038 应用<address>标记定义一个网站的地址

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\038

实例说明

我们可以使用<address>标记来定义地址、签名或者文档的作者身份等信息。本实例将应用<address>标记定义一个网站的地址。其运行结果如图2.28所示。

图2.28 设置地址文字标记

技术要点

本实例主要应用HTML 中的设置地址文字标记<address>，该标记主要用于英文字体的显示。语法如下：

在标记间的文字就是地址等内容。

实现过程

创建index.html文件，在文件中通过<address>标记定义一个网站地址。具体代码如下：

<html>

<head>

<title>页面的地址文字</title>

</head>

<body>

<p>这是一本内容详尽的HTML书籍</p>

有任何技术问题请访问：<address>http://www.mrbook.com</address>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

应用<address>标记定义电子邮件地址。

应用<address>标记定义文档的作者身份信息。

实例039 通过格式标签定义文本样式

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\039

实例说明

本实例将在<body>标记中通过常用格式标签定义相同文本不同的输出样式，其运行结果如图2.29所示。

图2.29 应用格式标签定义文本样式

技术要点

本实例主要应用的是HTML中的常用格式标签<p>、<pre>、<center>、<br>以及<hr>。其中，<pre>标记的作用是保留原始的文本排版效果，而<hr>标记的作用是添加一条默认样式的水平线。

实现过程

创建 index.html 文件，在文件中通过常用格式标签<p>、<pre>、<center>、<br>以及<hr>定义文本的不同输出样式。具体代码如下：

<html>

<head>

<title>应用格式标签定义文本样式</title>

</head>

<body>

<p>明日科技公司是一家专业的多媒体公司。</p>

<pre>明日科技公司是一家专业的多媒体公司。</pre>

<center>明日科技公司是一家专业的多媒体公司。</center>

明日科技公司<br>是一家专业的多媒体公司。<p>

明日科技公司<hr>是一家专业的多媒体公司。

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

通过常用格式标签完成公司简介。

在页面中添加水平线并设置它的属性。

实例040 制作彩色滚动条

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\040

实例说明

在制作网页时，为了让页面更加美观、更具有个性化，可以对页面的滚动条颜色进行相应的修改。本实例将通过CSS样式来改变滚动条的颜色。运行结果如图2.30所示。

图2.30 制作彩色滚动条

技术要点

本实例主要应用CSS样式的滚动条属性实现，滚动条属性及其说明如表2.3所示。

表2.3 滚动条属性及说明

注意：滚动条属性只适用于IE浏览器。

实现过程

创建index.html文件，在文件中定义页面滚动条颜色的CSS样式。代码如下：

<html>

<head>

<title>制作彩色滚动条</title>

<styletype="text/css">

<!-

body{

font-size: 9pt;

margin-left:0px;

margin-top:0px;

margin-right:0px;

margin-bottom:0px;

scrollbar-Face-Color: #107483;

scrollbar-Highlight-Color: #ffffff;

scrollbar-Shadow-Color: #fcfcfc;

color:#000000;

scrollbar-3dLight-Color: #ececec;

scrollbar-Arrow-Color:#ffffff;

scrollbar-Track-Color: #ececec;

scrollbar-Dark-shadow-Color: #107483;

}

-->

</style>

</head>

<body>

<font size="+3" color="#0066FF">数字化出版的领导者</font><br/>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

应用CSS样式制作文本域彩色滚动条。

应用CSS样式制作框架页面的彩色滚动条。

实例041 在文字上方标注说明

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\041

实例说明

在网页中可以通过添加对文字的标注来说明网页中的某段文字。本实例将在文字上方标注说明，其运行结果如图2.31所示。

图2.31 在文字上方标注说明

技术要点

本实例应用文字标注标记<ruby>，语法如下：

<ruby>

被说明的文字

<rt>

文字的标注

</rt>

</ruby>

在这段代码中，被说明的文字就是网页中需要添加标注的那段文字，而文字的标注则是真正的说明文字。被<rt>标记标示的文字将以缩小字号的形式，显示在以<ruby>标记标示的文字上方，用来说明这段文字。

实现过程

创建 index.html 文件，在文件中通过<ruby>标记定义被说明的文字，在<ruby>标记内部使用<rt>标记定义说明文字。具体代码如下：

<html>

<head>

<title>在文字上方标注说明</title>

</head>

<body>

<ruby>

IlikeHTML

<rt>我喜欢HTML</rt>

</ruby>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

使用<ruby>标记标注文章作者。

设置标注文字的大小、颜色等属性。

实例042 应用删除线样式标记商品原价

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\042

实例说明

在浏览一些网络购物的网站时，商家为了能够更好地推销商品，一般对商品进行打折销售，为了能让顾客清楚看到省了多少钱，商家一般在商品的价位栏中显示两个价位，一个是原价，一个是现价。本实例将应用删除线样式标记商品的原价。运行结果如图2.32所示。

图2.32 应用删除线样式标记商品原价

技术要点

本实例主要应用CSS样式字体属性中的text-decoration属性实现。该属性用来设定文字修饰，其语法格式如下：

text-decoration：underline|overline|line-through |blink |none

参数说明：

● underline：文字加下划线。

● overline：文字加上划线。

● line-through：文字加删除线。

● blink：闪烁文字，只有Netscape 浏览器支持。

● none：默认值。

实现过程

（1）创建index.html文件，在文件中定义使文字具有删除线效果的CSS样式。代码如下：

<styletype="text/css">

<!-

font {

text-decoration:line-through;

color:#FF0000;

font-size:9pt;

}

-->

</style>

（2）在页面中创建表格，并设置带有删除线的文字放入<font>标记中。代码如下：

<tablewidth="504" border="0" align="center" cellspacing="0" cellpadding="0">

<tr>

<tdwidth="643"height="33"align="left"valign="middle"><imgsrc="images/shop_10.gif"width="503"height="33"/></td>

</tr>

<tr>

<tablewidth="504" height="134"border="0" cellspacing="0" cellpadding="0">

<tr>

<tdwidth="145"rowspan="5"align="center"valign="middle"><imgsrc="images/1.jpg"width="90"height="100"style="border:1px solid #f0f0f0;"/></td>

<td width="170"height="35">商品名称：液晶显示器</td>

</tr>

<tr>

</tr>

<tr>

<tdheight="30"colspan="2"align="center"valign="middle"><inputid="allshow"name="allshow"type="button"value="详细信息"class="showinfo"/>

</tr>

</table>

<tablewidth="504" height="134" border="0" cellspacing="0" cellpadding="0">

<tr>

<tdwidth="145"rowspan="5"align="center"valign="middle"><imgsrc="images/2.jpg"width="90"height="100"style="border:1pxsolid#f0f0f0;"/></td>

<tdwidth="170" height="35">商品名称：组合音响</td>

</tr>

<tr>

</tr>

<tr>

<tdheight="30"colspan="2"align="center"valign="middle"><inputid="allshow"name="allshow"type="button"value="详细信息"class="showinfo"/>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table>

举一反三

根据本实例，读者可以进行以下操作。

应用删除线样式标记商品原打折率。

应用删除线样式标记商品原销售量。