HTML页面布局与文字设计

原文：HTML页面布局与文字设计 

简单规划HTML页面布局与文字设计即时通讯

标题

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

〈H1>…　　　　　第一级标题

〈H2>…　　　　　第二级标题

〈H3>…　　　　　第三级标题

〈H4>…　　　　　第四级标题

〈H5>…　　　　　第五级标题

〈H6>…　　　　　第六级标题

请看下面的例子：

 

 

 

 

 

这是一行普通文字

〈H1>一级标题

〈H2>二级标题

〈H3>三级标题

〈H4>四级标题

〈H5>五级标题

〈H6>六级标题

 

 

换行

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

段落标签

　　为了排列的整齐、清晰，文字段落之间，我们常用

来做标记。文件段落的开始由

来标记，段落的结束由

来标记，是可以省略的，因为下一个

的开始就意味着上一个

的结束。

　　

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

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

 

 

 

 

 

 

 

浣溪沙　

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

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

 

 

水平线段

---

　　这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。

---

有三个属性：

　　　size　水平线的宽度

　　　width 水平线的长，用占屏幕宽度的百分比或象素值来表示

　　　align 水平线的对齐方式，有LEFT RIGHT CENTER三种

　　　noshade 线段无阴影属性，为实心线段

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

HTML页面布局与文字设计线段粗细的设定

 

 

 

 

 

 

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

 

---

 

这是第二条线段，SIZE=5

 

---

 

这是第三条线段，SIZE=10

 

---

 

 

HTML页面布局与文字设计线段长度的设定

 

 

 

 

 

 

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

 

---

 

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

 

---

 

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

 

---

 

 

HTML页面布局与文字设计线段排列的设定

 

 

 

 

 

 

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

 

---

 

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

 

---

 

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

 

---

 

 

HTML页面布局与文字设计无阴影的设定

 

 

 

 

 

 

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

 

---

 

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

 

---

 

 

文字的大小设置

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

　　请看示例：

 

 

 

 

 

这是size=7的字体

这是size=6的字体

这是size=5的字体

这是size=4的字体

这是size=3的字体

这是size=2的字体

这是size=1的字体

这是size=-1的字体

 

 

文字的字体与样式

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

　　

请看例子：

 

 

 

 

 

 

欢迎光临

欢迎光临

欢迎光临

欢迎光临

Welcom my homepage.

Welcom my homepage.

 

 

 

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

　　　　　　　　　　粗体　　　　　　　　　　　　　　HTML语言

　　　　　　　　　　斜体　　　　　　　　　　　　　　HTML语言

　　　　　　　　　　加下划线　　　　　　　　　　　　HTML语言

　　　　 　　　　　打字机字体　　　　　　　　　　　HTML语言

　　　　　　　　大型字体　　　　　　　　　　　　HTML语言

　　　　　　小型字体　　　　　　　　　　　　HTML语言

　　　　　　闪烁效果　　　　　　　　　　　　HTML语言

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

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

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

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

 

 

 

 

 

黑体字

 

斜体字

 

加下划线

 

大型字体

 

小型字体

 

闪烁效果

 

Welcome

 

Welcome

 

Welcom

 

 

文字的颜色

　　文字颜色设置格式如下：

　　　…

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

HTML页面布局与文字设计 Black = "#000000" HTML页面布局与文字设计 Green = "#008000" HTML页面布局与文字设计 Silver = "#C0C0C0" HTML页面布局与文字设计 Lime = "#00FF00" HTML页面布局与文字设计 Gray = "#808080" HTML页面布局与文字设计 Olive = "#808000" HTML页面布局与文字设计 White = "#FFFFFF" HTML页面布局与文字设计 Yellow = "#FFFF00" HTML页面布局与文字设计 Maroon = "#800000" HTML页面布局与文字设计 Navy = "#000080" HTML页面布局与文字设计 Red = "#FF0000" HTML页面布局与文字设计 Blue = "#0000FF" HTML页面布局与文字设计 Purple = "#800080" HTML页面布局与文字设计 Teal = "#008080" HTML页面布局与文字设计 Fuchsia = "#FF00FF" HTML页面布局与文字设计 Aqua = "#00FFFF"

请看例子：

 

 

 

 

 

 

色彩斑斓的世界

色彩斑斓的世界

色彩斑斓的世界

色彩斑斓的世界

色彩斑斓的世界

色彩斑斓的世界

色彩斑斓的世界

 

 

 

位置控制

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

　　　　　

　　　#＝left／right／center

例：

 

 

 

 

 

 

你好!

 

你好!

 

你好!

 

 

另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。

　　如：

 

　　　　

---

　　　#＝left／right／center

　　　　

综合示例

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

比如：

　　　　文字

　　　　文字

【例】

 

 

 

 

 

 

白居易

 

 

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

 

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

 

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

 

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

 

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

 

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