HTML文字段落超级链接图片.pptx

工具箱的使用,喷笔,画笔,Photoshop,第一讲,tel,：,0991-4544103,思科资讯计算机培训中心,#,HTML,第二讲,文字标签属性,1,文字属性标记,1.,文字颜色,指定颜色,.,#=RRGGBB 16,进制数码,例：,01.htm,文字标签属性,2,文字属性标记,2.,文字字体,.#=,客户端可获得的字体,02.htm,文字标签属性,3,文字属性标记,3.,文字大小,.,#=1,2,3,4,5,6,7 or+#,-#,例：,03.htm,文字标签属性,4,文字属性标记,4.,文字标题,.,#=1,2,3,4,5,6,例：,04.htm,文字布局,行的控制,段,(Paragraph)(,可以看作是空行,),空白占位符,例：,05.htm,文字布局,行的控制,HTML,的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即,元素。,元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。,元素不是成对出现的。,例：,06.htm,不换行,07.htm,HTML,文字与段落格式控制,倾斜文本,粗体文本,下划线文本,删除线文本,例：,08.htm,、,09.htm,、,10.htm,、,11.htm(,综合练习,),基本组成部分,HTML,注释,HTML,文档可以插入注释。注释内容不会在浏览器窗口显示,HTML,注释的格式为：,例：,12.htm,文字的对齐,.(n=1,2,3,4,5,6),.(#=left,center,right),例：,13.htm,文字的分区显示,.(#=left,center,right),例：,14.htm,3.HTML,段落与分行控制,居中,-,元素,元素是一个独立的使所标记的字符居中的元素。它的作用与使用,元素里的,align=“center”,类似,例如：,居中段落,15.htm,3.HTML,段落与分行控制,标尺线,：设定线宽,：设定线长,：设定对齐方式,#=left,right,：设定线的颜色,例：,16.htm,3.HTML,的段落与分行控制,无序列表元素,1,列表在,HTML,的文档里有重要的地位,HTML,规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。,3.HTML,的段落与分行控制,无序列表元素,2,无序列表是由,和,元素定义的,:,sports,food,drink,friends,例：,17.htm,3.HTML,的段落与分行控制,无序列表元素,3,无序列表的默认符号是圆点。,元素有,type,属性，通过定义不同的,type,属性可以改变列表的项目符号。目前，,type,属性的属性值有：,disc(,圆,),、,circle,（圆圈）、,square,（方块）,例：,18.htm,3.HTML,的段落与分行控制,有序列表元素,1,有序列表由,和,定义,:,sports,drink,friends,例：,17.htm,3.HTML,的段落与分行控制,有序列表元素,2,元素也有自己的,type,属性,，,type,属性的属性值有,1,、,A,、,a,、,I,、,i,等。例如，我们以,A,、,B,、,C,作为列表的编号,例：,19.htm,元素还可以定义列表的起始编号，如我们希望列表的第一个编号为,5,，而不是,1,，则需要定义,元素的,start,属性,例：,20.htm,4.,超级链接,普通超级链接,1,超级链接是整个,WWW,应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的,WWW,的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。,4.,超级链接,普通超级链接,2,超级链接是用锚元素,定义的,在,元素下，有元素属性,href,href,的属性值为一个,URL,地址,如：,指向学院的超级链接,如：,普通超级链接,例：,21.htm,4.,超级链接,E-mail,超级链接,超级链接可以指向,E-mail,地址,如：,指向,E-mail,地址的超级链接,例：,22.htm,4.,超级链接,新开链接窗口,开一个新的,(,浏览器,),窗口,(Target Window),.,例：,26.htm,4.,超级链接,去除下划线,去掉超级连接的下划线：,style=“text-decoration:none”,例：,25.htm,4.,超级链接,其他超级链接,WWW,应用仅仅是,Internet,应用的一种,Internet,还有其他很多应用，如：,Ftp,等。实际上,mailto,也属于非,WWW,应用。我们可以类似的创建指向,Ftp,等的超级链接,;,指向其他,Internet,应用的超级链接不是我们掌握的重点。,4.,超级链接,锚点,(,书签,)1,指向本页面锚点,aa,的超级链接,例：,23.htm,指向,23,页面的锚点,top,的超级链接,例：,24.htm,练习：手写代码实现,链接（新开窗口与,Email,）、背景、文字颜色、字体、换行、页面标题。,练习：,27.htm,HTML,对图片的控制,-1,基本语法,:,引用图片必须用,元素标志。,元素下的基本元素属性是,src,属性，,src,的属性值为所引用的图片的,URL,地址。,src,属性是必须的。,Src,的,URL,可以是,绝对地址,，也可以是,相对地址,例：,28.htm,HTML,对图片的控制,-2,所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。,定义图片替代文本的方法是：,例：,28.htm,HTML,对图片的控制,-3,图片的显示大小,我们可以指定一幅图片在浏览器窗口里的显示大小。,定义图片的显示大小的方法是：,width,指定图片的宽度，,height,指定高度。它们的,属性值可以是象素，也可以是,%,。,例：,29.htm,HTML,对图片的控制,-4,图片的边框,我们可以为一幅图片加一个边框以突出显示：,border,的属性值为象素数,例：,30.htm,HTML,对图片的控制,-5,图片的对齐方式,图片可以相对于页面或单元格有一个对齐方式。,定义水平对齐方式的方法是：,例：,31.htm,HTML,对图片的控制,-6,图片的对齐方式,定义图片的垂直对齐方式：,对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。,例：,32.htm,HTML,对图片的控制,-7,定义图片与左、右的文本之间的间距,图片在显示时，与左右的文本之间可以有一定的间距,Hspace(horizontal),定义,水平间距,；,Vspace(vertical),定义,垂直间距,。单位都是象素数,.,例：,33.htm,HTML,对图片的控制,-8,图象的超级链接,图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：,所以，所谓超级链接实际上就是用,元素标志一个图象的引用,;,例：,34.htm,HTML,对图片的控制,-9,图象映射,所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。,HTML,对图片的控制,-10,图象映射（只要求理解标记含义）,图象映射由,定义。,有一个,基本属性,是,name,。,Name,给图象映射命名，这个命名将会被,元素用,usemap,属性引用。所以，图象上的图象映射实际上是对,定义的映射的一个引用。,在定义图象映射时，可以定义三种形状的映射：,circle(,圆形,),、,rect(,矩形,rectangle),、,poly(,多边形,),HTML,对图片的控制,-11,图象映射实例（,35.htm,）,