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

该内容由 保湿乳液排行榜 站长转载上传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 线段无阴影属性，为实心线段我们可以用几个例子来说明这线段的用法：线段粗细的设定线段粗细的设定这是第一条线段，无size设定，取内定值SIZE=1来显示这是第二条线段，SIZE=5这是第三条线段，SIZE=10显示结果这是第一条线段，无size设定，取内定值SIZE=1来显示这是第二条线段，SIZE=5这是第三条线段，SIZE=10 线段长度的设定线段长度的设定这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示这是第二条线段，WIDTH=50(点数方式)这是第三条线段，WIDTH=50%(百分比方式)显示结果这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示这是第二条线段，WIDTH=50(点数方式)这是第三条线段，WIDTH=50%(百分比方式) 线段排列的设定线段排列的设定这是第一条线段，无ALIGN设定，(取内定值CENTER显示)这是第二条线段，向左对齐BR这是第三条线段，向右对齐显示结果这是第一条线段，无ALIGN设定，(取内定值CENTER显示)这是第二条线段，向左对齐BR这是第三条线段，向右对齐 无阴影的设定无阴影的设定这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示这是第二条线段，有NOSHADE设定显示结果这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示这是第二条线段，有NOSHADE设定 文字的大小设置提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为17，其中缺省值为3。我们可以SIZE属性值之前加上“”、“”字符，来指定相对于字号初始值的增量或减量。请看示例：字号大小这是size=7的字体这是size=6的字体这是size=5的字体这是size=4的字体这是size=3的字体这是size=2的字体这是size=1的字体这是size=-1的字体显示结果这是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.显示结果欢迎光临欢迎光临欢迎光临欢迎光临Welcom my homepage.Welcom my homepage.为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：粗体HTML语言斜体HTML语言加下划线HTML语言 打字机字体HTML语言大型字体HTML语言小型字体HTML语言闪烁效果HTML语言 表示强调，一般为斜体HTML语言 表示特别强调，一般为粗体HTML语言 用于引证、举例，一般为斜体HTML语言现在我们用一个实例来看看效果：字体样式黑体字 斜体字 加下划线 大型字体 小型字体 闪烁效果WelcomeWelcomeWelcom显示结果黑体字斜体字加下划线大型字体小型字体闪烁效果WelcomeWelcomeWelcom文字的颜色文字颜色设置格式如下：这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。Black = #000000Green = #008000Silver = #C0C0C0Lime = #00FF00Gray = #808080Olive = #808000White = #FFFFFFYellow = #FFFF00Maroon = #800000Navy = #000080Red = #FF0000Blue = #0000FFPurple = #800080Teal = #008080Fuchsia = #FF00FFAqua = #00FFFF请看例子：文字的颜色色彩斑斓的世界色彩斑斓的世界 色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界 色彩斑斓的世界色彩斑斓的世界显示结果色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界位置控制通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：#leftrightcenter例：位置控制你好!你好!你好!显示结果你好!你好!你好!另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。如：#leftrightcenterH1 ALIGN=#综合示例前面我们所讲是单独使用一个标签的方法，在实际的编写中，许多标签和一些属性是结合起来使用的，比如：文字文字【例】字体样式白居 易白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡 导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。 白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到 了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住不易！”及披卷读到赋得古原草送别中的“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生”时， 不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句,居下去是不难的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。 白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难动荡的时代。 白居易是继杜甫之后，我国伟大的现实主义诗人。 他的贡献是在总结我国自诗经以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动新乐府运动，创作了大量优秀的现实主义诗篇。 显示结果白 居 易白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住不 易！”及披卷读到赋得古原草送别中的“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生”时， 不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这