这节课我们来学习页面的文字布局和文字效果，制作网页的目的是为了在网络上传递信息，网页提供的内容可以是图片、图像、文字等，要想让这些内容达到美观、 形象、直白的效果，我们就必须在网页的布局上下功夫，只有网页美观了，点击网页的浏览者才会留下好影响，同时有继续浏览网页的兴趣，你们以后还会学到 Asp.net的课程，你们将有可能为企业制作企业网站，届时客户的要求一定也是希望自己企业的网站能够代表企业的形象，网页清爽大方可读性强。了解了文 字布局的重要性后，我来具体学习一下下面的课程。
Code
Code
Code
Code
Code
Code
《HTML教案》中第一节我们已经讲过，要想在网页中显示文字、图片等信息，必须将正文写在HTML文档结构中的文件主 体<boby></body>标记的内部，同时在使用下面要学习的标记时一定要注意HTML的编写规范，注意标签的类型及含义， 今天的课程我们要按照文章的结构顺序进行教授，首先从正文的标题开始。
<hN></hN>标题标记：
一般文章都会有标题、副标题、章和节等结构，HTML语言提供了一系列对文本中的标题进行操作的标记 对<h1></h1>……<h6></h6>，即一共有6对，<h1>< /h1>是最大的标题，而<h6></h6>是最小的标题，也就是说，h后面的数字越大，标题的文本字号就会越小。一般情 况下，浏览器会对这六种标记做出如下的解释：
h1 黑体，特大字体，上下各有两行空行。
h2 黑体，大字体，上下各有一到两行空行。
h3 黑体，大字体，左端微缩进，上下空行 。
h4 黑体，普通字体，比h3更多缩进，上边空一行。
h5 黑体，与h4相同缩进，上边空一行。
h6 黑体，与正文有相同缩进，上边空一行 。
h2 黑体，大字体，上下各有一到两行空行。
h3 黑体，大字体，左端微缩进，上下空行 。
h4 黑体，普通字体，比h3更多缩进，上边空一行。
h5 黑体，与h4相同缩进，上边空一行。
h6 黑体，与正文有相同缩进，上边空一行 。
标题标记也有三种水平对齐的方式align=#（left,center,right），如果HTML文档中需要输出标题文本的话，就可以使用这些标记中的任何一个，看一下这六标记所显示的效果的代码，然后我们看一下区别。
Code
有关标题我们就记住分为六级，而且n越小，字号越大就可以了，今后在你实际编写网页时，还是可以使用IDE中的字体属性来选择字号。
插入特殊符号： 下面我们来看一个例子。
Copyright©2008 优酷 youku.com 版权所有
在很多网页的底部我们都会看到如上的一些网页制作说明，网页中还会出现很多与©类似的特殊符号，如果不使用网页制作工具，靠手写html代码写入这些特殊 符号的方法就是：只要在需要使用这些特殊符号的地方插入特殊符号对应的代码就可以完成对特殊符号的插入，下面罗列出了部分特殊符号与其相对应的代码，同学 们可以对照的把他们记住。
符号--------对应代码
&-------&；
©-------©；
™-------&trade；
®-------®；
￥------¥；
§-------§；
&-------&；
©-------©；
™-------&trade；
®-------®；
￥------¥；
§-------§；
接下来要学习的标记在第一节中已经介绍过，也举过例子，那就是
段落<p></p>标签和回车<br>。不论是在普通文档中，还是在网页 的文字中，合理的使用段落都会时文字的显示更加美观，要表达的意思也更加清晰，HTML的分段完全依赖于分段标 记，<p></p>标记对用来创建一个段落，在此标记对之间的文本按照段落的格式显示在浏览器上。HTML将多个空格以及回车等 效为一个空格，<br>标记用来创建一个回车换行，<br>标记只有开始标记，没有结束标记 ，如果<br>标记处 在<p></p>标记对外面，将创建一个大的回车换行，若处在<p></p>标记对之 间，<br>标记前面和后面文本的行与行之间的距离将比较小 ，我们来看个例子就会体会出他们的使用方法。
Code
我们来看一下第6行，我打入了4个空格符来体现首行缩进2个汉字，我们还可以使用
<blockquote>设置段落缩进</blockquote>标记，来增加段落的层次效果，使用了这对标记，中间文字将被默认为是一段，并且可以首行缩进5个字符。
接着看上面的源代码，第一段第8行的<br>标记在p标记的内部，起到换行的作用，文本中除了第8行换行符外，其他的换行都是我手动打的，目 的是让同学们体会出这种换行无效。第二段的<br>在p标记的外部，同时p标记中添加了一个对齐属性=“居中”，我们来看一下在网页中的呈现 效果。
很明显，第一段中是默认的居左显示，而且源文件中的手动换行都是不起效的，第二段与第一段的间隔是很大的，而且第二段的末尾能够看出，本段的的对齐方式是居中的，这种居中方式还有一种写法，就是把html中本身就有一对
<center>内部文字</center>居中标记， 在对网页文字进行布局时，经常需要将网页中的文字进行居中对齐，甚至在插入图片或其他对象时，都会用到对齐居中标记，我们可以把这对标记嵌套在p标记的外 部，如，<center><p>中间显示的文字将以段落并且文体居中的形式体现</p>< /center>，其效果与第二段是一致的。
在html中还有一对
<pre></pre>叫预格式化标记，也成为预排版标记，利用这对标记对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落，我们来看下面的源代码及页面截图，学习center和pre的用法。
Code
可以看出<pre>标记允许保留你在源代码中输入的空白和回车，并且这部分文字是居中的。
此外，在网页制作中，我经常会用到水平线，我们在浏览网页的时候，也是经常会看到网页中有一条水平的直线，水平线标记<hr>用来把页 面分成几个部分，比如最简单的，区分开文章的标题和正文，同时我们还可以根据需要对网页中的水平线进行一系列的设置，下面我们就来看一个例子，同时将hr 的属性给同学们做以讲解。
Code
我一共加了三条水平线，其中的一些属性我们都见过，我现在用属性来描述一下这三条线：
1.插入一条居中的高度为2像素、长度为500px的红色水平线。
2.插入一条居右的高度为4像素、长度为占整个页面宽度的50%的水平线。
3.插入一条居左的高度为4像素、长度为占整个页面宽度的30%的无阴影水平线。
我们来看一下效果图：先体会一下默认颜色下有阴影2线和无阴影3线的区别。
这里我要重点说的是描述长度属性值的两种方式：绝对值（像素）和相对值（百分比），同样是上个页面，我们把页面窗口的大小调整一下，如下图：
对比上图，可以明显看出除第一条线长度没有变化外，其他两条线都在随着页面窗口的变小而变小，原因是他们长度属性值是相对值，而第一条为绝对值，固定不变了，这两种属性值的赋值方式以后会经常用到，我们要学会分清在什么情况下选用哪种赋值方式所体现的效果更好。
在html文件中，添加了网页文字后，还需要对文字进行必要的布局，如主次分明、重点突出的显示这些信息，或者需要添加一些特殊的字体效果，则必须在格式 设定方面使用更多的标记和更详细的设置，增加显示网页的美观，下面我们就来学习一下如何在网页中修饰文字的表现效果。
<font></font>文本样式标记：
编辑文本样式，主要是设置文字的字体、字号、颜色等属性<font face="字体" size="字号" color="颜色">。因为比较好理解，我们只需要学习文字的
字号属性：html 有七种字号，1号最小，7号最大，3号为默认大小，可以省略。设置文本的字号有两种办法： 一种是设置绝对字号，<font size=“字号"> ,比如size=5，表示字体为5号，而另一种是设置文本的相对字号；<font size=±n> ，是指在默认的3号字体的基础上进行size=±n，比如<font size=+2>，也表示字体为5号。
下面我们来学习一下文字的
标注标记<ruby></ruby>:当需要对某个字、词或是段落进行说明时，可以使用这对标记来完成对网页中文字的说明。它的基本语法是：
<ruby>
被说明的文字
<rt>文字的标注</rt>
</ruby>
我们来看一下下面的例子，把刚才的<font>的标记一起学习一下。
Code
效果图如下：
看了这个例子，相信同学们已经会使用这两个标记了，下面我来看一下这段源代码，主要是简单的字体修饰风格，这些风格有的我们经常用到，而且这些标记也比较好记，比如在word中b代表粗体，i代表斜体，u代表添加下划线，这些在html中也是一样的。
Code
黑体
斜体
下划线
打字机风格
强调
加重
在文字的修饰中还有一种是添加文字的上下标：<sup>上标内容</sup> <sub>下标内容</sub>。除了数学表达式用到外，有一种情况必须用到上标，那就是商标，我们用下面的例子来学习上下标和 特殊字符。
源代码： 网页中的显示效果：
商标<sup><font color=red>®</font></sup> 商标
®
X<sub>2</sub>+3=5; X
2+3=5;
有关网页的文字修饰效果在实际制作中，更多的用是CSS样式表，而且比较方便快捷，至于样式的表是学习，我会在以后的系列中涉及到，下一节我们将要学习的是，滚动字幕和列表清单。
-------------------------------------------------------------------------------------------------------------------------------------------------
可能在我这个系列中，我没有把我写博客的目的阐明，让大家误会了，我是想往教学方向发展的，把我的教案写成博客，日后供我的学生课前预习、课 后复习之用，哎，良苦用心呀！现在“市面（学校）”中还没有流行XHTML，所以我会继续把HTML这个系列写完，然后再继续研究下去，谢谢你！也希望大 家对我的教案提出批评，这样我将来的学生才会受益。拜托了，呵呵!
本文转自叶子文文博客51CTO博客，原文链接http://blog.51cto.com/leafwf/187241如需转载请自行联系原作者
叶子文文
