2 文字版面的编辑.ppt

1、1,第2章 文字版面的编辑,2.1 页面布局 2.2 字体属性,下一页,2,2.1 页面布局,2.1.1 换行标签br 2.1.2 强制不换行标签nobr 2.1.3 自动换行标签wbr 2.1.4 分段控制标签p 2.1.5 原样显示文字标签pre 2.1.6 居中对齐标签center 2.1.7 引文标签blockquote 2.1.8 水平分隔线标签hr 2.1.9 署名标签address 2.1.10 特殊字符 2.1.11 注释标签 2.1.12 设定网页背景和文字的颜色,3,2.2.1 标题文字标签hn 2.2.2 文字格式控制标签font 2.2.3 特定文字样式标签,2.2 字

2、体属性,结束,4,2.1.1 换行标签br,换行标签是个单标签，HTML文件中任何位置只要使用了标签，当文件显示在浏览器中时，该位置之后的文字将显示于下一行。 在一般的文本文件中，只要按下键盘上的回车键便会产生一个换行符，使文本文件中的文字换行显示。但是在HTML文件中，由回车键所产生的换行符，在浏览器中并不会视为换行符号。因此，若要将某位置后的文字显示于下一行时，必须在该位置使用标签，才能达到换行的效果。,5,【例2.1】测试换行标签 测试换行标签 春夜喜雨 好雨知时节，当春乃发生。 随风潜入夜，润物细无声。 ,运行程序,6,HTML除了使用标签进行换行以外，还可以使用标签把语句强行放在一行

3、中。 在标签中包含的文本不管有多长，总是放在一行中进行显示。 主要用于把那些不适于分开的词和短语放在一行中，但是，如果一行文本长度超过一定的限度，可能会突破右边边框跑到屏幕外面去，这会给阅读带来某些困难，所以在使用标签时要格外注意 。,2.1.2 强制不换行标签nobr,7,【例2.2】测试强制不换行标签 测试强制不换行标签 黄鹤楼 昔人已乘黄鹤去，此地空余黄鹤楼。 黄鹤一去不复返，白云千载空悠悠。 晴川历历汉阳树，芳草萋萋鹦鹉洲。日暮乡关何处是？烟波江上使人愁。 ,运行程序,8,标签也是一个换行标签，但它不同于和，标签规定了文本在该处强制换行，是把语句强制放在一行中，则是根据屏幕的宽度，选择

4、适当的地方换行，把其余的文本放到下一行进行显示。 如果一行内容能够在屏幕上显示完整，就不起作用了，它将被忽略掉。,2.1.3 自动换行标签wbr,9,【例2.3】测试自动换行标签 测试自动换行标签 风中，花儿谢了 凄怜的娇花在悲凉的秋风中，从曾经绚烂娇媚的枝梢， 轻曼着彩蝶般的舞姿，漫天飞洒，一片片无奈地落在那冰冷森寒的风刃之上。 于是，万千飞舞的蝶便化作纷扬的花絮，轻盈地随风而起，又随风飘得很远、很远。 ,运行程序,10,由标签所标识的文字，代表同一个段落的文字。 在浏览器中，不同段落文字间除了换行外，还会以一个空白行加以间隔，以便区别出文字的不同段落。它可以单独使用，也可以成对使用。,2.

5、1.4 分段控制标签p,11,1格式： 文字 文字 文字 2说明： 其中align属性有left、center和right三个参数，这三个设置值将依次把段落文字的水平对齐方式设为左对齐、居中对齐和右对齐。,12,【例2.4】测试分段控制标签 测试分段控制标签 花儿什么也没有。它们只有凋谢在风中的轻微、 凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁， 悲哀无助地了出一声声垂死的鸣叫。 或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。 而美丽苦短的花期 却是那最后悲伤的秋风挽歌中的瞬间插曲。 ,运行程序,13,要将HTML文件中的文字编排方式，通过浏览器显示时，保留原始的文件排版方式，就需要通过

6、标签来实现。 方法是把制作好的那段文本前后分别加上 和标签，即可使浏览器显示文件原始的排版方式。,2.1.5 原样显示文字标签pre,14,【例2.5】测试原样显示文字标签 测试原样显示文字标签 人海茫茫，岁月悠悠。 有的人旗开得胜，而我则望风披靡；有的人踌躇满志，而我却郁郁寡欢。 我要走过天南海北，走过春夏秋冬，走过酸甜苦辣。 啊！人生，一场游戏一场梦。啊！爱情，生命的种子，迷茫的火花。 ,运行程序,15,2.1.6 居中对齐标签center,文本在页面上中使用标签进行居中控制，是一个成对标签，在想居中的文本部分开头处加，结尾处加即可。,16,【例2.6】测试居中对齐标签 测试居中对齐标签

7、关山月 明月出天山，苍茫云海间。 长风几万里，吹度玉门关。 汉下白登道，胡窥青海湾。 由来征战地，不见有人还。 戌客望边色，思归多苦颜。 高楼当此夜，叹息未应闲。 ,运行程序,17,标签可以用来建立一个引文，它特别适合于较长文本的引用。引文显示时将会自动右移，左边空出几个格，以示区别。,2.1.7 引文标签blockquote,18,【例2.7】测试引文标签 测试引文标签 春望 国破山河在，城春草木深。 感时花溅泪，恨别鸟惊心。 烽火连三月，家书抵万金。 白头搔更短，浑欲不胜簪。 ,运行程序,19,2.1.8 水平分隔线标签hr,有时候，我们想在网页中生成一条水平分隔线，将不同的内容信息分开，

8、使文字看起来清晰、明确，这时可以使用标签来达到此目的。 标签是单独使用的标签，它的作用是换行并在该行下画一条横线，横线的上下两端都会留出一定的空白。 通过给标签设置一定的属性，可以使它具有更强的功能。标签的属性有size、width和align。下表为控制标签所建立的水平分隔线样式的属性说明。 说明：如果采用百分比为单位来设定水平分隔线的宽度，其百分比值可随窗口的大小变化而改变，相对比例保持不变。,20,标签属性说明,21,【例2.8】测试水平分隔线标签 测试水平分隔线标签 春晓 春眠不觉晓， 处处闻啼鸟。 夜来风雨声， ,花落知多少？ ,运行程序,22,2.1.9 署名标签address,在

9、浏览网页时经常能看到，在网页的下部常有签名或地址，说明这个网页是由谁或由哪个公司编写的，以及其他有关信息。 假若希望得到更多的反馈信息，署名对制作者来说是很有用的。 署名标签是，在标签之间的文字显示效果是斜体字。,23,运行程序,24,在HTML文件中，有些字符没办法直接显示出来，比如说“”。使用特殊字符可以将键盘上没有的字符表达出来，而有些字符在键盘上虽然可以得到，但在HTML中有其特殊的含义，也必须用一些代码表示它们，以免发生混淆。 在建立HTML文件时，若您利用键盘上的空格键，输入数个空格，不论输入的空格有多少个，都将视为一个。因此，如果您想要输入多个空格时，必须利用空格符号。 常见特殊

10、字符的代码见下表 ：,2.1.10 特殊字符,25,HTML常见特殊字符及其代码表,26,运行程序,27,2.1.11 注释标签,如果想方便地在HTML中查找和记忆有关文件的内容和标识，则可以在HTML文件中加入注释，放在注释中的文本在屏幕上是不出现的。 注释标签的格式有两种： ,28,【例2.11】在网页中加入注释标签 加注释 关山月 明月出天山， 苍茫云海间。 长风几万里， 吹度玉门关。 ,运行程序,29,2.1.12 设定网页背景和文字的颜色,HTML文件的主体将定义于标签中，也就是网页的主要内容，并依照各种HTML标签的控制，将这些内容显示在浏览器的窗口中。设置在标签内的属性，可控制整

11、个页面的显示方式。 1格式： ,30,2说明： background属性将在以后章节进行讲解。 通过bgcolor属性可以改变网页的背景颜色，其格式如下： 或 其中#nnnnnn代表六位十六进制数，每两位的取值均是从00FF，代表ASCII码的00255，前两位设置红色的深浅，中间两位设置绿色的深浅，最后两位设置蓝色的深浅。 在指定文字的颜色时，也可以直接使用该颜色对应的英文单词。 也可以表示为。 bgcolor属性的参数值可以是下表所示16种颜色中的任何一种。,31, text属性用于指定网页内文字的颜色。,32,【例2.12】设定网页背景和文字的颜色 设定网页背景和文字的颜色 春夜喜雨 好

12、雨知时节，当春乃发生。 随风潜入夜，润物细无声。 ,运行程序,33,标签用于设置网页中的标题文字，被设置的文字将以黑体、粗体的方式显示在网页中。 1格式： 标题文字 2说明： 标签是成对出现的，夹在和之间的文字就是文档中的标题。标签共分六级，其中标签所括起的文字是第一级标题，最大最粗；标签所括起的文字是最后一级标题，最小最细。,2.2.1 标题文字标签hn,34, align属性用于设置标题的位置。align属性的参数值为left、center或right之一，分别表示标题位于浏览器窗口的左侧、中间和右侧。 标题文字具体有多大则因浏览器的不同而不同。 标签本身具有换行的作用，标题总是从新一行开

13、始。,35,【例2.13】设定各级标题 设定各级标题 一级标题。 二级标题。 三级标题。 四级标题。 五级标题。 六级标题。 ,运行程序,36,font标签用于控制文字的字体、大小与颜色。控制的方式是利用属性设置实现的，各属性的使用功能说明见下表。 font标签的属性,2.2.2 文字格式控制标签font,37,1格式： 文字 2说明： face属性的格式为： 文字 若face属性所指定的字体名称，并不存在于用户的系统时，将使用默认的字体。 size属性的取值为17，默认值为3；同时，也可以用“+”或“”来设定字号的相对值。 color属性的格式为： 或,38,运行程序,39,在有关文字的显示

14、中，常常会使用一些特殊的字型或字体来产生一定的强调、突出、区别以及提示等效果。HTML中用于这种功能的标签可以分为两类：物理类型和逻辑类型。 1物理类型 粗体b标签 放在与标签之间的文字将以粗体方式显示。 斜体i标签 放在与标签之间的文字将以斜体方式显示。 下划线u标签 放在与标签之间的文字将以加下划线的方式显示。,2.2.3 特定文字样式标签,40,【例2.15】字体的物理类型 字体的物理类型 这些文字是粗体的 这些文字是斜体的 这些文字带有下划线 ,运行程序,41,2逻辑类型 逻辑类型是指使用一些标签来改变字体的形态和式样，以便产生一些公众习惯的或约定俗成的显示效果。常用的逻辑类型标签有八

15、种，这些标签均有首标签和尾标签，放在首标签和尾标签之间的文本受其控制： （Emphasis）标签：用于强调的文本，以区别于其他文本，一般显示斜体字,与相似； 标签：用于特别强调的文本，显示粗体字，与相似； （Citation）标签：用于引证、举例，通常是斜体字； 标签：用来指出这是一组代码；,42, 标签：规定文本以小号字显示； 标签：规定文本以大号字显示； （Sample）标签：显示一段计算机常用的字体，即宽度相等的字体； （Keyboard）标签：由用户所输入文本，通常显示较粗的宽体字； （Variable）标签：用来表示变量，通常显示斜体字； （Definition）标签：表示一个定义或说明，通常为斜体字； 标签：用来表示带有下标的变量； 标签：用来表示带有上标的变量。,43,【例2.16】字体的逻辑类型 字体的逻辑类型 em 标签：用于强调的文本，一般显示为斜体字 strong 标签：用于特别强调的文本，显示为粗体字 cite 标签：用于引证和举例，通常