《html2ppt课件》由会员分享,可在线阅读,更多相关《html2ppt课件(26页珍藏版)》请在金锄头文库上搜索。
1、HTML第二讲第二讲西安丝路软件西安丝路软件HTML第二讲第二讲文字标签属性文字标签属性HTML段落与分行控制段落与分行控制HTML对图片的控制对图片的控制文字布局文字布局超级链接超级链接2 2文字标签属性文字标签属性文字文字v文字标签属性文字标签属性n文字颜色n文字字体n文字大小n文字标题3 3文字标签属性文字标签属性文字文字4-1v文字属性标记文字属性标记n1.文字颜色 n指定颜色 . n#=RRGGBB 16 进制数码n例 设定字体颜色 兰色字红色字绿色字 4 4文字标签属性文字标签属性文字文字4-2v文字属性标记文字属性标记n2.文字字体n . #=客户端可获得的字体n例: 设定不同字
2、体 黑体 楷书 宋体 5 5文字标签属性文字标签属性文字文字4-3v文字属性标记文字属性标记n3.文字大小n . n#=1, 2, 3, 4, 5, 6, 7 or +#, -#n例 设定字体大小 专业铸造品质 知识成就未来专业铸造品质 知识成就未来专业铸造品质 知识成就未来专业铸造品质 知识成就未来专业铸造品质 知识成就未来专业铸造品质 知识成就未来专业铸造品质 知识成就未来 6 6文字标签属性文字标签属性文字文字4-4v文字属性标记文字属性标记n4.文字标题n . n#=1, 2, 3, 4, 5, 6n例:04.htm 标题 老崔的一无所有 老崔的一无所有 老崔的一无所有 老崔的一无所有
3、 老崔的一无所有 老崔的一无所有 7 7文字布局2-1v行的控制行的控制 n段(Paragraph) (可以看作是空行) n空白占位符 n例: P标记的应用 P标记的应用你好吗?很好 很好 很好 很好 很好 很好 8 8文字布局2-2vHTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话,就要用到另一个元素,即话,就要用到另一个元素,即元素。元素。元素可以使所在的位置出现元素可以使所在的位置出现换行。这种换行和
4、浏览器的自动换行的效果类似。换行。这种换行和浏览器的自动换行的效果类似。元素不是成对出现的。元素不是成对出现的。例:例: 例例:不换行不换行 强制性的不换行 请改变您浏览器窗口的宽度, 使之小于这一行的宽度, 看看这个标记的作用! 换行标记 BR标记的应用你好吗?很好 9 9HTML文字与段落格式控制 倾斜文本倾斜文本 粗体文本粗体文本 下划线文本下划线文本 删除线文本删除线文本 例:例: 设定字体 正常字加粗字体bold正常字斜体字italic正常字下画线字underlined正常字带删除线文字strikethrough正常字上标字superscript正常字下标字subscript 101
5、0文字的对齐文字的对齐. (n=1,2,3,4,5,6) . (#=left, center, right)例:例: 文本的排列方式 align标志的左对齐align标志的居中对齐p标志中利用align标志实现右对齐 center标志的居中对齐 1111文字的分区显示文字的分区显示v . (#=left, center, right) n例:14.htm DIV(division)标记的应用 作为一名顶级吉他大师,盖米摩尔是在用他的心在划弦,而绝不是用手指. 作为一名顶级吉他大师,盖米摩尔是在用他的心在划弦,而绝不是用手指.作为一名顶级吉他大师,盖米摩尔是在用他的心在划弦,而绝不是用手指.作为
6、一名顶级吉他大师,盖米摩尔是在用他的心在划弦,而绝不是用手指. 12123.HTML段落与分行控制段落与分行控制5-1v居中居中- 元素元素n元素是一个独立的使所标记的字符居中的元素,它的作用与使用元素里的align=“center”类似n例如:居中段落 center 怎能就让这不停燃烧的心就这样耗尽消失在平庸你走在这繁华的街上在寻找你该去的方向你走在这繁华的街上在寻找你曾拥有的力量 13133.HTML段落与分行控制段落与分行控制5-2v标尺线标尺线n:设定线宽n:设定线长n:设定对齐方式 #=left, rightn :设定线的颜色n例:testtest 14143. HTML段落与分行控
7、制段落与分行控制5-3v无序列表元素无序列表元素1列表在列表在HTML的文档里有重要的地位的文档里有重要的地位,HTML规定了多种列表元素。列表所起规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。的主要作用是使特定的文本有序化。v无序列表元素无序列表元素2无序列表是由和元素定义的:sports food drink friends 15153. HTML段落与分行控制段落与分行控制5-4v无序列表元素无序列表元素3n无序列表的默认符号是圆点。 元素有type属性,通过定义不同的type属性可以改变列表的项目符号。type属性的属性值有:disc(圆)、circle(圆圈)、squa
8、re(方块)v有序列表元素有序列表元素1有序列表由和定义: sports drink friends16163. HTML段落与分行控制段落与分行控制5-5v有序列表元素有序列表元素2n元素也有自己的type属性,type属性的属性值有1、A、a、I、i等。例如,我们以A、B、C作为列表的编号n元素还可以定义列表的起始编号,如我们希望列表的第一个编号为5,而不是1,则需要定义元素的start属性n例: 有序列表类型 disc circle squareONE-ONE ONE-TWOONE-THREE ONE-FOUR ONE-SIX TWO-ONE TWO-TWO 17174.超级链接超级链接
9、3-1n超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念,那么,我们现在所有的WWW的应用将不复存在。所以,对超级链接的掌握具有特殊重要的意义。n超级链接是用锚元素定义的n在元素下,有元素属性href,href的属性值为一个URL地址n如:网易 n如:普通超级链接n超级链接可以指向E-mail地址n如:指向E-mail地址的超级链接n开一个新的(浏览器)窗口 (Target Window) n . 18184.超级链接超级链接去除下划线去除下划线3-2v去掉超级连接的下划线:去掉超级连接的下划线:style=“text-decoration: none”n例: 设定链接 普通链接
10、链接下面没有下划线 发送电子邮件 19194.超级链接超级链接其他超级链接其他超级链接3-3nWWW应用仅仅是Internet应用的一种,Internet还有其他很多应用,如:Ftp等。实际上mailto也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接;n指向其他Internet应用的超级链接不是我们掌握的重点。 nn指向本页面锚点aa的超级链接n指向17页面的锚点top的超级链接2020HTML对图片的控制对图片的控制6-1v基本语法基本语法:nn引用图片必须用元素标志。元素下的基本元素属性是src属性,src的属性值为所引用的图片的URL地址。nsrc属性是必须的。src的UR
11、L可以是绝对地址,也可以是相对地址nalt属性是定义图片替代文本;图片不显示时,则显示alt的文本信息n例: 图片的基本应用 2121HTML对图片的控制对图片的控制6-2v图片的显示大小图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。n定义图片的显示大小的方法是:nwidth指定图片的宽度,height指定高度。它们的属性值可以是象素,也可以是%。v图片的边框图片的边框n我们可以为一幅图片加一个边框以突出显示:n nborder的属性值为象素数2222HTML对图片的控制对图片的控制6-3v图片的对齐方式图片的对齐方式n图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的
12、方法是:nnnv图片的对齐方式图片的对齐方式定义图片的垂直对齐方式:对于图片的对齐方式不仅有以上几种,但是以上的几种是最常用的。2323HTML对图片的控制对图片的控制6-4v定义图片与左、右的文本之间的间距定义图片与左、右的文本之间的间距n图片在显示时,与左右的文本之间可以有一定的间距 nhspace(horizontal)定义水平间距; vspace(vertical)定义垂直间距。单位都是象素数.v图象的超级链接图象的超级链接n图象的超级链接是指整个图象的超级链接,当点击图象的任何部分时,都会打开这个超级链接。定义默认超级链接的方法是: 设置水平和垂直间距 2424HTML对图片的控制对图片的控制6-5v图象映射图象映射n所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接;点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。n图象映射由定义。有一个基本属性是name。Name给图象映射命名,这个命名将会被元素用usemap属性引用。所以,图象上的图象映射实际上是对定义的映射的一个引用。n在定义图象映射时,可以定义三种形状的映射: circle(圆形)、rect(矩形rectangle)、poly(多边形)2525HTML对图片的控制对图片的控制6-6v图象映射实例图象映射实例 2626