HTML教程第二章　页面布局与文字设计

标题

一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：

〈H1>…</H1>　　　　　第一级标题

〈H2>…</H2>　　　　　第二级标题

〈H3>…</H3>　　　　　第三级标题

〈H4>…</H4>　　　　　第四级标题

〈H5>…</H5>　　　　　第五级标题

〈H6>…</H6>　　　　　第六级标题

请看下面的例子：

<body>

这是一行普通文字
〈H1>一级标题</H1>
〈H2>二级标题</H2>
〈H3>三级标题</H3>
〈H4>四级标题</H4>
〈H5>五级标题</H5>
〈H6>六级标题</H6>
</body>

</html>

显示结果

这是一行普通文字

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

从结果可以看出，每一个标题的字体为黑体字，内容文字前后都插入空行。

换行 

在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上 标签。

　　请看下面的例子：

<html>
<head>
<title>无换行示例</title>
</head>

<body>
登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
</body>

</html>

显示结果

登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

<body>
登鹳雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。
</body>

</html>

显示结果

登鹳雀楼
白日依山尽，
黄河入海流。
欲穷千里目，
更上一层楼。

段落标签

为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。

标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。

　　下面，我们用两个例子来说明这个标签的用法。

<body>

浣溪沙　一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。
</body>

</html>

显示结果浣溪沙　

一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。

无可奈何花落去，似曾相识燕归来。小园香径几徘徊。

<body>
登鹳雀楼白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。
</body>

</html>

显示结果

登鹳雀楼

白日依山尽，
黄河入海流。
欲穷千里目，
更上一层楼。

水平线段<hr>

这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。<HR>有三个属性：

　　　size　水平线的宽度
　　　width 水平线的长，用占屏幕宽度的百分比或象素值来表示
　　　align 水平线的对齐方式，有LEFT RIGHT CENTER三种
　　　noshade 线段无阴影属性，为实心线段

　　我们可以用几个例子来说明这线段的用法：

线段粗细的设定

<HTML>
<HEAD>
<TITLE>线段粗细的设定</TITLE>
</HEAD>

<BODY>
这是第一条线段，无size设定，取内定值SIZE=1来显示 
<HR>
这是第二条线段，SIZE=5 
<HR SIZE=5>
这是第三条线段，SIZE=10 
<HR SIZE=10>
</BODY>

</HTML>
显示结果

这是第一条线段，无size设定，取内定值SIZE=1来显示

这是第二条线段，SIZE=5

这是第三条线段，SIZE=10

线段长度的设定

<HTML>
<HEAD>
<TITLE>线段长度的设定</TITLE>
</HEAD>

<BODY>
这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示 
<HR SIZE=3>
这是第二条线段，WIDTH=50(点数方式) 
<HR WIDTH=50 SIZE=5>
这是第三条线段，WIDTH=50%(百分比方式) 
<HR WIDTH=50% SIZE=7>
</BODY>

</HTML>
显示结果

这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示

这是第二条线段，WIDTH=50(点数方式)

这是第三条线段，WIDTH=50%(百分比方式)

线段排列的设定

<HTML>
<HEAD>
<TITLE>线段排列的设定</TITLE>
</HEAD>

<BODY>
这是第一条线段，无ALIGN设定，(取内定值CENTER显示) 
<HR WIDTH=50% SIZE=5>
这是第二条线段，向左对齐BR>
<HR WIDTH=60% SIZE=7 ALIGN=LEFT>
这是第三条线段，向右对齐 
<HR WIDTH=70% SIZE=2 ALIGN=RIGHT>
</BODY>

</HTML>

显示结果

这是第一条线段，无ALIGN设定，(取内定值CENTER显示)

这是第二条线段，向左对齐BR>

这是第三条线段，向右对齐

无阴影的设定

<HTML>
<HEAD>
<TITLE>无阴影的设定</TITLE>
</HEAD>

<BODY>
这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示 
<HR WIDTH=80% SIZE=5>
这是第二条线段，有NOSHADE设定 
<HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE>
</BODY>

</HTML>

显示结果

这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示

这是第二条线段，有NOSHADE设定

文字的大小设置

　　提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。

　　请看示例：

<body>
这是size=7的字体
这是size=6的字体
这是size=5的字体
这是size=4的字体
这是size=3的字体
这是size=2的字体
这是size=1的字体
这是size=-1的字体
</body>

</html>

显示结果

这是size=7的字体

这是size=6的字体

这是size=5的字体

这是size=4的字体

这是size=3的字体

这是size=2的字体

这是size=1的字体

这是size=-1的字体

文字的字体与样式

　　HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。

请看例子：

<HTML>
<HEAD>
<TITLE>字体</TITLE>
</HEAD>

<BODY>
<CENTER>
欢迎光临
欢迎光临
欢迎光临
欢迎光临
Welcom my homepage.
Welcom my homepage.
</CENTER>
</BODY>

</HTML>

显示结果

欢迎光临

Welcom my homepage.

　　为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：

粗体　　　　　　　　　　　　　　HTML语言

斜体　　　　　　　　　　　　　　HTML语言

加下划线　　　　　　　　　　　　HTML语言

<TT>　　　　 <TT>　　　　　打字机字体　　　　　　　　　　　HTML语言

<BIG>　　　　</BIG>　　　　大型字体　　　　　　　　　　　　HTML语言

小型字体　　　　　　　　　　　　HTML语言

<BLINK>　　　</BLINK>　　　闪烁效果　　　　　　　　　　　　HTML语言

表示强调，一般为斜体　　　　　　HTML语言

表示特别强调，一般为粗体　　　　HTML语言

<CITE>　　　 </CITE>　　　用于引证、举例，一般为斜体　　　HTML语言

现在我们用一个实例来看看效果：

<body>
黑体字
 斜体字
 加下划线
 <BIG>大型字体</BIG>
 小型字体
 <BLINK>闪烁效果</BLINK>
Welcome
Welcome
<CITE>Welcom</CITE>
</body>

</html>

显示结果

黑体字

斜体字

加下划线

大型字体

小型字体

闪烁效果

Welcome

Welcome

Welcom

文字的颜色

　　文字颜色设置格式如下：

…

　　这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。

	Black = "#000000"		Green = "#008000"
	Silver = "#C0C0C0"		Lime = "#00FF00"
	Gray = "#808080"		Olive = "#808000"
	White = "#FFFFFF"		Yellow = "#FFFF00"
	Maroon = "#800000"		Navy = "#000080"
	Red = "#FF0000"		Blue = "#0000FF"
	Purple = "#800080"		Teal = "#008080"
	Fuchsia = "#FF00FF"		Aqua = "#00FFFF"

请看例子：

<HTML>
<HEAD>
<TITLE>文字的颜色</TITLE>
</HEAD>

<BODY BGCOLOR=000080>
<CENTER>
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
</CENTER>
</BODY>

</HTML>

显示结果

色彩斑斓的世界
色彩斑斓的世界
色彩斑斓的世界
色彩斑斓的世界

色彩斑斓的世界
色彩斑斓的世界
色彩斑斓的世界

位置控制

　　通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：

<DIV ALIGN=#>　　　#＝left／right／center

例：

显示结果

综合示例

前面我们所讲是单独使用一个标签的方法，在实际的编写中，许多标签和一些属性是结合起来使用的，
比如：
　　　　文字
　　　　文字

【例】

<BODY>

白居易

白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡 导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。

白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到 了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住不易！”及披卷读到《赋得古原草送别》中的

<CITE>“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生”</CITE>

时，不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句,‘居’下去是不难的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。

白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难动荡的时代。

白居易是继杜甫之后，我国伟大的现实主义诗人。他的贡献是在总结我国自《诗经》以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动――新乐府运动，创作了大量优秀的现实主义诗篇。

</BODY>
</HTML>

显示结果

白居易

　　白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡
导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。

　　白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到
了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住不易！”及披卷读到《赋得古原草送别》中的

“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生”

时，不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句,‘居’下去是不难的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。

　　白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难动荡的时代。

　　白居易是继杜甫之后，我国伟大的现实主义诗人。他的贡献是在总结我国自《诗经》以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动――新乐府运动，创作了大量优秀的现实主义诗篇。

上一篇：HTML教程第一章：HTML 语言的结构
下一篇：HTML教程第三章　列表

帮您“扫二维码关注微信，接收回传变量数据绑定网站帐号！”

HTML教程 第二章 页面布局与文字设计

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

HTML教程第二章　页面布局与文字设计