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

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

该内容由教程第二章页面布局与文字设计标题一般文章都有标题、副标题、章和节等结构,HTML中也提供了相应的标题标签Hn,其中n为标题的等HTML总共提供六个等级的标题,n越小,标题字号就越大,以下列出所有等级的标题:〈H1…/H1第一级标题〈H2…/H2第二级标题〈H3…/H3第三级标题〈H4…/H4第四级标题〈H5…/H5第五级标题〈H6…/H6第六级标题请看下面的例子:htmlheadtitle标题示例/title/headbody这是一行普通文字P〈H1一级标题/H1〈H2二级标题/H2〈H3三级标题/H3〈H4四级标题/H4〈H5五级标题/H5〈H6六级标题/H6/body/html显示结果这是一行普通文字一级标题二级标题三级标题四级标题五级标题该内容由保湿乳液排行榜站长转载上传六级标题从结果可以看出,每一个标题的字体为黑体字,内容文字前后都插入空行。换行br在编写HTML文件时,我们不必考虑太细的设置,也不必理会段落过长的部分会被浏览器切掉。因为,在HTML语言规范里,每当浏览器窗口被缩小时,浏览器会自动将右边的文字转折至下一行。所以,编写者对于自己需要断行的地方,应加上br标签。请看下面的例子:htmlheadtitle无换行示例/title/headbody登鹳雀楼白日依山尽,黄河入海流。欲穷千里目,更上一层楼。/body/html显示结果登鹳雀楼白日依山尽,黄河入海流。欲穷千里目,更上一层楼。htmlheadtitle换行示例/title/headbody登鹳雀楼br白日依山尽,br黄河入海流。br欲穷千里目,br更上一层楼。/body/html显示结果登鹳雀楼白日依山尽,黄河入海流。欲穷千里目,更上一层楼。段落标签为了排列的整齐、清晰,文字段落之间,我们常用P/P来做标记。文件段落的开始由P来标记,段落的结束由/P来标记,/P是可以省略的,因为下一个P的开始就意味着上该内容由的结束。P标签还有一个属性ALING,它用来指名字符显示时的对齐方式,一般值有CENTER、LEFT、RIGHT三种。下面,我们用两个例子来说明这个标签的用法。htmlheadtitle段落标签/title/headbodyPALIGN=CENTER浣溪沙P一曲新词酒一杯,去年天气旧亭台,夕阳西下几时回。P无可奈何花落去,似曾相识燕归来。小园香径几徘徊。/P/body/html显示结果浣溪沙一曲新词酒一杯,去年天气旧亭台,夕阳西下几时回。无可奈何花落去,似曾相识燕归来。小园香径几徘徊。htmlheadtitle段落标签/title/headbody登鹳雀楼P白日依山尽,br黄河入海流。br欲穷千里目,br更上一层楼。/P/body/html显示结果登鹳雀楼白日依山尽,黄河入海流。欲穷千里目,更上一层楼。水平线段hr这个标签可以在屏幕上显示一条水平线,用以分割页面中的不同部分。HR有三个属性:size水平线的宽度width水平线的长,用占屏幕宽度的百分比或象素值来表示align水平线的对齐方式,有LEFTRIGHTCENTER三种noshade线段无阴影属性,为实心线段我们可以用几个例子来说明这线段的用法:该内容由线段粗细的设定/TITLE/HEADBODYP这是第一条线段,无size设定,取内定值SIZE=1来显示BRHRP这是第二条线段,SIZE=5BRHRSIZE=5P这是第三条线段,SIZE=10BRHRSIZE=10/BODY/HTML显示结果这是第一条线段,无size设定,取内定值SIZE=1来显示这是第二条线段,SIZE=5这是第三条线段,SIZE=10线段长度的设定HTMLHEADTITLE线段长度的设定/TITLE/HEADBODYP这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示BRHRSIZE=3P这是第二条线段,WIDTH=50(点数方式)BRHRWIDTH=50SIZE=5P这是第三条线段,WIDTH=50%(百分比方式)BRHRWIDTH=50%SIZE=7/BODY该内容由保湿乳液排行榜站长转载上传/HTML显示结果这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示这是第二条线段,WIDTH=50(点数方式)这是第三条线段,WIDTH=50%(百分比方式)线段排列的设定HTMLHEADTITLE线段排列的设定/TITLE/HEADBODYP这是第一条线段,无ALIGN设定,(取内定值CENTER显示)BRHRWIDTH=50%SIZE=5P这是第二条线段,向左对齐BRHRWIDTH=60%SIZE=7ALIGN=LEFTP这是第三条线段,向右对齐BRHRWIDTH=70%SIZE=2ALIGN=RIGHT/BODY/HTML显示结果这是第一条线段,无ALIGN设定,(取内定值CENTER显示)这是第二条线段,向左对齐BR这是第三条线段,向右对齐无阴影的设定HTML该内容由无阴影的设定/TITLE/HEADBODYP这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示BRHRWIDTH=80%SIZE=5P这是第二条线段,有NOSHADE设定BRHRWIDTH=80%SIZE=7ALIGN=LEFTNOSHADE/BODY/HTML显示结果这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示这是第二条线段,有NOSHADE设定文字的大小设置提供设置字号大小的是FONT,FONT有一个属性SIZE,通过指定SIZE属性就能设置字号大小,而SIZE属性的有效值范围为1-7,其中缺省值为3。我们可以SIZE属性值之前加上“+”、“-”字符,来指定相对于字号初始值的增量或减量。请看示例:htmlheadtitle字号大小/title/headbodyfontsize=7这是size=7的字体/fontPfontsize=6这是size=6的字体/fontPfontsize=5这是size=5的字体/fontPfontsize=4这是size=4的字体/fontPfontsize=3这是size=3的字体/fontPfontsize=2这是size=2的字体/fontPfontsize=1这是size=1的字体/fontPfontsize=-1这是size=-1的字体/fontP/body/html显示结果该内容由=7的字体这是size=6的字体这是size=5的字体这是size=4的字体这是size=3的字体这是size=2的字体这是size=1的字体这是size=-1的字体文字的字体与样式HTML4.0提供了定义字体的功能,用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型,但有一点麻烦的是,只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。fontface=字体请看例子:HTMLHEADTITLE字体/TITLE/HEADBODYCENTERFONTface=楷体_GB2312欢迎光临/FONTPFONTface=宋体欢迎光临/FONTPFONTface=仿宋_GB2312欢迎光临/FONTPFONTface=黑体欢迎光临/FONTPFONTface=ArialWelcommyhomepage./FONTPFONTface=ComicSansMSWelcommyhomepage./FONTP/CENTER/BODY/HTML显示结果欢迎光临欢迎光临欢迎光临欢迎光临该内容由为了让文字富有变化,或者为了着意强调某一部分,HTML提供了一些标签产生这些效果,现将常用的标签列举如下:B/B粗体HTML语言I/I斜体HTML语言U/U加下划线HTML语言TTTT打字机字体HTML语言BIG/BIG大型字体HTML语言SMALL/SMALL小型字体HTML语言BLINK/BLINK闪烁效果HTML语言EM/EM表示强调,一般为斜体HTML语言STRONG/STRONG表示特别强调,一般为粗体HTML语言CITE/CITE用于引证、举例,一般为斜体HTML语言现在我们用一个实例来看看效果:htmlheadtitle字体样式/title/headbodyB黑体字/BPI斜体字/IPU加下划线/UPBIG大型字体/BIGPSMALL小型字体/SMALLPBLINK闪烁效果/BLINKPEMWelcome/EMPSTRONGWelcome/STRONGPCITEWelcom/CITE/P/body/html显示结果黑体字斜体字加下划线大型字体该内容由文字的颜色文字颜色设置格式如下:fontcolor=color_value…/font这里的颜色值可以是一个十六进制数(用“#”作为前缀),也可以是以下16种颜色名称。Green=#008000Lime=#00FF00Olive=#808000Yellow=#FFFF00Navy=#000080Blue=#0000FFTeal=#008080Aqua=#00FFFF请看例子:HTMLHEADTITLE文字的颜色/TITLE/HEADBODYBGCOLOR=000080CENTERFONTCOLOR=WHITE色彩斑斓的世界/FONTBRFONTCOLOR=RED色彩斑斓的世界/FONTBRFONTCOLOR=#00FFFF色彩斑斓的世界/FONTBRFONTCOLOR=#FFFF00色彩斑斓的世界/FONTBRFONTCOLOR=#FFFFFF色彩斑斓的世界/FONTBRFONTCOLOR=#00FF00色彩斑斓的世界/FONTBRFONTCOLOR=#C0C0C0色彩斑斓的世界/FONTBR/CENTER该内容由保湿乳液排行榜站长转载上传/BODY/HTML显示结果色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界位置控制通

1 / 12
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功