HTML教程 03第三章.doc

第三章段落与文字处理文本是所有语言需要具有的最基本功能，HTML更是如此。本章讲解在HTML中如何编排段落和修饰文字。3.1段落标记3.1.1标记文本分段一般以开头、以结尾。段落标记是HTML中最常用的标记，虽然可以省略，因为下一个的开始就意味着上一个的结束，但最好还是遵循规范，正规书写。标记的常用语法格式为：其中，align用来定义段落的对齐方式，它可以取以下值：l center：居中对齐。l left：靠左对齐，是默认值。l right：靠右对齐。【例1】的用法。 itsway - 段落与文字 劝学 作者：颜真卿 三更灯火五更鸡，正是男儿立志时。 黑发不知勤学早，白首方悔读书迟。 显示结果如下图所示。图浏览结果可以看出，标题“劝学”在页面中居中对齐，“作者：颜真卿”靠右对齐，而诗的主体则靠页面左边对齐。3.1.2、和标记段落与段落之间一般会空出一行距离。如果不想分段而只想分行，可以使用标记，常用格式为：一般来说，每当浏览器窗口被缩小时，浏览器会自动将段落右边的文字转折至下一行。所以编写者对于自己需要断行的地方，应加上标记。标记仅仅分行而不分段。另外需要注意：不是成对出现的，也就是说，没有。【例2】的用法。 itsway - 段落与文字 劝学 作者：颜真卿 三更灯火五更鸡，正是男儿立志时。 黑发不知勤学早，白首方悔读书迟。 显示结果如下图所示。图浏览结果可以看出，诗的主体部分已经没有空行了。在浏览器窗口缩小时，如果不想自动折行，可以使用和标记，格式为： 例如： 三更灯火五更鸡，正是男儿读书时。 黑发不知勤学早，白首方悔读书迟。可以通过各种标记对文字进行排版。如果要保留原始排版效果，例如文本中的空格、制表符等都要保留，则需要使用、标记，主要格式为： 其中，width用于指明每行的最大字符数，wrap说明可以折行，默认是不加wrap，也就是不折行。【例3】和的用法。 itsway - 段落与文字 三更灯火五更鸡，正是男儿立志时。 黑发不知勤学早，白首方悔读书迟。 下面是加pre标记的效果： oo k k o o k k o o k k o o kk o o k k o o k k oo k k 下面是不加pre标记的效果： oo k k o o k k o o k k o o kk o o k k o o k k oo k k 显示结果如下图所示。图浏览结果另外，如果要把显示的内容居中对齐，还有一对专门的、标记，它没有属性。可以这样使用： 要居中对齐的内容在和中不仅可以放置文本，而且可以放置图像、表格等其他各种对象，它们都居中对齐（假如这些对象自身没有指明对齐方式的话）。3.1.3和标记、标记表示一块可显示HTML的容器或区域，用于把文档划分为若干部分。常用格式为： 其中，对齐方式可以为center、left和right，id用于定义本div区域的名称，它用在动态网页编程中，这里暂时不需要。style用于定义样式，class用于赋予类名，nowrap说明不能折行，默认是不加nowrap，也就是可以折行。在样式表（CSS）的应用方面特别有用，这里我们先知道有这个标记即可。、用于定义内嵌的文本容器或区域，格式为： 它的各属性的意义和标记类似，不再多说。标记同样在样式表的应用方面特别有用，它们都用于动态HTML，将在CSS以及JavaScript教程中有更深入的讲解。那么，和标记有什么区别呢？标记没有align属性，它主要用于一个段落、句子甚至单词中，而则用于块级区域的格式化显示。【例4】和的简单用法。 itsway - 段落与文字 此文本代表一段。 此文本代表另外一段，其中文为紫色居中显示。 测试18点大小的红色字体，现在则是默认字体和颜色 显示结果如下图所示。图浏览结果3.1.3和标记使用标记可以在屏幕上用分离的块显示大段的引用。多数浏览器通常改变引用部分的页边界，以和周围的文本区分开。例如：Omit needless words.Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.-William Strunk, Jr., 1918 显示结果为: Omit needless words. Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. -William Strunk, Jr., 1918 3.2水平线标记为了使网页更有层次感，可以使用水平线标记，语法为： 各个属性的说明如下：l size：用于设置水平线的宽度，以像素为单位，默认为1。l width：水平线的长度，可以以像素为单位，如100；也可以是浏览器窗口宽度的百分比，如80%，默认为100%。l align：水平线的对齐方式，有left、right、center三种，默认为center。l color：指定线条颜色。颜色值既可以是一个十六进制数（最好用#作前缀），也可以是颜色名称，默认为灰色。l noshade：线段无阴影属性，为实心线段，默认为空心线段。是一个单标记，也就是说没有对应的。【例5】的使用。 itsway - 段落与文字 第一条线段，一切按默认值，按size = 1、width = 100%来显示 第二条线段，size = 5，width = 80%，默认align = center 第三条线段，size = 5 width = 200 align = right 显示结果如下图所示。图浏览结果3.3标题一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签和，其中n为标题的等级。HTML一共提供六个等级的标题，分别从到。n越小，标题字号就越大，主要格式为： 其中对齐方式有left、right、center三种，默认为center。【例6】的使用。 itsway - 段落与文字 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 显示结果如下图所示。图浏览结果从结果可以看出，每一个标题的字体为黑体字，内容文字前后都插入空行。3.4文字标记在HTML标记中，有两个标记可以指定字体大小，一个是上一节讲过的标记，还有一个就是标记。但标记只能用于有限的范围，而标记的功能则更加强大。另外，还有一些设置字体某个特点的标记，如、等标记，它们都是成对的。3.4.1标记标记的主要格式为： 其中：l face：指定字体类型，如宋体、Times New Roman等。但只有对方的电脑中装有相同的字体，才可以在他的浏览器中出现你预先设计的风格，所以最好指定常用字体。l size：设置字号大小，有效值的范围为17的整数，缺省值为3。可以在size属性值之前加上“+”、“-”字符，来指定相对于当前字号值的增量或减量。l color：指定字体颜色。颜色值既可以是一个十六进制数（最好用#作前缀），也可以是颜色名称。l style：指定字体样式。【例7】的使用。 itsway - 段落与文字 默认字体 1号字体 2号Arial蓝色字体 3号Times New Roman字体 4号楷体（未必能显示） 5号仿宋字体（未必能显示），英文字体是Comic Sans MS 6号绿色字体 7号字体 在作者本机上的显示结果如下图所示。图浏览结果3.4.2、等标记为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将这些标签的常用格式列举如下：l ：粗体。l ：斜体。l ：加下划线。l ：加中划线。l ：以比当前字号大一号的字体显示。l ：以比当前字号小一号的字体显示。l ：表示强调，一般为斜体。l ：表示特别强调，一般为粗体l ：字体上标。l ：字体下标。l ：打字机或等宽字体。l ：闪烁效果，仅用于Netscape Navigator。l ：用于引证、举例，一般为斜体。l ：变量字体，一般为斜体。l ：定义字体，一般为斜体。l ：代码字体，字体等宽。【例8】多种字体修饰标记的使用。 itsway - 段落与文字 黑体字斜体字 加下划线加中划线 大一号字体原字体小一号字体 Hello, welcome to ! Welcome! a1 = x2+ y2 在本机上的显示结果如下图所示。图浏览结果所有这些字体的设置可以组合使用。现在我们看一个综合实例。【例9】本例显示一篇文章，用到了很多讲过的修饰标记。 itsway - 段落与文字 凉州词(唐：王翰) 葡萄美酒夜光杯，欲饮琵琶马上催。 醉卧沙场君莫笑，古来征战几人回。 这是盛唐边塞诗中的一篇名作。这首诗以豪放的风格写了征戍战士饮酒作乐的情景，具有浓郁的边塞军营生活的色彩。 首句“葡萄美酒夜光杯”，意思是举起晶莹的夜光杯，斟满殷红的葡萄美酒。“葡萄美酒”，是以葡萄酿造成的美酒；“夜光杯”，指一种光能照夜的白玉琢成的酒杯。此句以奇丽的彩笔描绘出豪华的场面，并富有西域的特色。次句“欲饮琵琶马上催”，正要开怀畅饮，忽然，铮铮琮琮的琵琶声从马上传来。琵琶是西域盛行的乐器，诗人用来渲染西域色彩。“马上催”的“催”字有不同解释，有的说是催饮，有的说是催人出征，或解释为急促弹奏之意。从全诗风格来看，还是以催饮为宜。 三四句“醉卧沙场君莫笑，古来征战几人回”，这是在酣醉时的劝酒词，是说，醉就醉吧，醉卧在沙场上有什么呢，请不要见笑，从古至今征战的人有几个是活着回来的。这两句历来颇多分歧，有的认为是极为悲痛之词，有的认为是略带悲凉之意，但从盛唐时期将士们的豪情及全诗的风格来看，似不宜有忧伤情绪。 读诗所联想到的是：古来征战的人们饮酒告别亲人，不知去向，不知有无来回，索性酣畅淋漓地醉卧在沙场。其视死如归的气魄，豪放展现征戍战士的饮酒情景，犹如亲眼所见。 在浏览器中的显示结果如下图所示。图浏览结果为了显示一段话的两个空格，必须使用中文全角空格。因为在默认状态下，HTML是忽略文本首尾的英文半角空格的。那么，万一在文章首尾需要英文半角空格，又该如何呢？可以使用前面讲过的、标记，但更方便的做法是了解一些特殊字符在HTML中的写法，英文半角空格就是一个特殊字符。3.5特殊字符的写法在HTML中，有一些字符有特殊含义，例如“”是标记的左括号和右括号，而标记是控制HTML显示的，标记本身并不能在HTML中显示。那么，该怎样在HTML中显示“”呢？3.5.1特殊字符的写法HTML规定了一些特殊字符的写法，以便在网页中显示，如下表所示。特殊符号符号的代码特殊符号符号的代码英文半角空格 ×（半角双引号）"（版权符号）©>（商标符号）™§注意每个符号的特殊写法后面都有个半角的分号。【例10】特殊符号的用法。 itsway - 段落与文字        HTML文档的基本结构如下所示： <html> <head> <title>itsway - 段落与文字</title> </head> <body> 要显示的内容。 </body> </html> ©版权所有， 这和Microsoft Windows™没关系 在浏览器中的显示结果如下图所示。图浏览结果3.5.2忽略HTML标记的标记 和忽略HTML标记的标