网页设计基础三剑客.html2.ppt

《网页设计基础三剑客.html2.ppt》由会员分享，可在线阅读，更多相关《网页设计基础三剑客.html2.ppt（37页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、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文字布局行的控制行的控制 段段(Paragrap

2、h)(可以看作是空可以看作是空行行)空白占位符空白占位符 例：例：05.htm文字布局行的控制行的控制 HTML的段落与段落之间有一定的空隔。的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，如果不希望出现空隔而只想换行的话，就要用到另一个元素，即就要用到另一个元素，即元素。元素。元素可以使所在的位置出现换行。元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类这种换行和浏览器的自动换行的效果类似。似。元素不是成对出现的。元素不是成对出现的。例：例：06.htm不换行不换行 07.htmHTML文字与段落格式控制 倾斜文本倾斜文本 粗体文本粗体文本 下划线文

3、本下划线文本 删除线文本删除线文本 例：例：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.htm3.HTML段落与分行控制段落与分行控制居中居中-元素元素元素是一个独立的使所

4、元素是一个独立的使所标记的字符居中的元素。它的标记的字符居中的元素。它的作用与使用作用与使用元素里的元素里的align=“center”类似类似例如：例如：居中段落居中段落15.htm3.HTML段落与分行控制段落与分行控制标尺线标尺线：设定线宽设定线宽：设定线长设定线长：设定对齐方式设定对齐方式#=left,right ：设定线的颜色设定线的颜色例：例：16.htm3.HTML的段落与分行控制的段落与分行控制无序列表元素无序列表元素1列表在列表在HTML的文档里有重要的的文档里有重要的地位地位,HTML规定了多种列表元素。规定了多种列表元素。列表所起的主要作用是使特定的文列表所起的主要作用是

5、使特定的文本有序化。本有序化。3.HTML的段落与分行控制的段落与分行控制无序列表元素无序列表元素2无序列表是由无序列表是由和和元素定义的元素定义的:sports food drink friends 例：例：17.htm3.HTML的段落与分行控制的段落与分行控制无序列表元素无序列表元素3无序列表的默认符号是圆点。无序列表的默认符号是圆点。元素有元素有type属性，通过定属性，通过定义不同的义不同的type属性可以改变列表属性可以改变列表的项目符号。目前的项目符号。目前，type属性的属性的属性值有：属性值有：disc(圆圆)、circle（圆圈）、圆圈）、square（方块）方块）例：例：

6、18.htm3.HTML的段落与分行控制的段落与分行控制有序列表元素有序列表元素1有序列表由有序列表由和和定义定义:sports drink friends例：例：17.htm3.HTML的段落与分行控制的段落与分行控制有序列表元素有序列表元素2元素也有自己的元素也有自己的type属性属性，type属属性的属性值有性的属性值有1、A、a、I、i等。例如，等。例如，我们以我们以A、B、C作为列表的编号作为列表的编号例：例：19.htm元素还可以定义列表的起始编号，元素还可以定义列表的起始编号，如我们希望列表的第一个编号为如我们希望列表的第一个编号为5，而不是而不是1，则需要定义，则需要定义元素的

7、元素的start属性属性例：例：20.htm4.超级链接超级链接普通超级链接普通超级链接1超级链接是整个超级链接是整个WWW应用的核心应用的核心和基础。如果没有超级链接的概念，和基础。如果没有超级链接的概念，那么，我们现在所有的那么，我们现在所有的WWW的应的应用将不复存在。所以，对超级链接用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。的掌握具有特殊重要的意义。4.超级链接超级链接普通超级链接普通超级链接2超级链接是用锚元素超级链接是用锚元素定义的定义的 在在元素下，有元素属性元素下，有元素属性href,href的属性值为一个的属性值为一个URL地址地址如：如：指向学院的超级链接指向

8、学院的超级链接 如：如：普通超级普通超级链接链接例：例：21.htm4.超级链接超级链接E-mail超级链接超级链接 超级链接可以指向超级链接可以指向E-mail地址地址如：如：指向指向E-mail地址的超级链地址的超级链接接例：例：22.htm4.超级链接超级链接新开链接窗口新开链接窗口开一个新的开一个新的(浏览器浏览器)窗口窗口(Target Window).例：例：26.htm4.超级链接超级链接去除下划线去除下划线去掉超级连接的下划线：去掉超级连接的下划线：style=“text-decoration:none”例：例：25.htm4.超级链接超级链接其他超级链接其他超级链接 WWW应

9、用仅仅是应用仅仅是Internet应用的应用的一种一种,Internet还有其他很多应用，还有其他很多应用，如如：Ftp等。实际上等。实际上mailto也属于也属于非非WWW应用。我们可以类似的创应用。我们可以类似的创建指向建指向Ftp等的超级链接等的超级链接;指向其他指向其他Internet应用的超级链接应用的超级链接不是我们掌握的重点。不是我们掌握的重点。4.超级链接超级链接锚点锚点(书签书签)1 指向本页面锚指向本页面锚点点aa的超级链接的超级链接例：例：23.htm指向指向23页页面的锚面的锚点点top的超级链接的超级链接例：例：24.htm练习：手写代码实现练习：手写代码实现链接（新

10、开窗口与链接（新开窗口与Email）、）、背景、背景、文字颜色、字体、换行、页面标题。文字颜色、字体、换行、页面标题。练习：练习：27.htmHTML对图片的控制对图片的控制-1基本语法基本语法:引用图片必须用引用图片必须用元素标志。元素标志。元素下的基本元素属性是元素下的基本元素属性是src属属性，性，src的属性值为所引用的图片的的属性值为所引用的图片的URL地址。地址。src属性是必须的。属性是必须的。Src的的URL可以是可以是绝对地址绝对地址，也可以是，也可以是相对地址相对地址例：例：28.htmHTML对图片的控制对图片的控制-2所谓图片的替代文本，指图片不能所谓图片的替代文本，指

11、图片不能显示时在图片所在位置显示的一段显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显文本或当鼠标移到图片上时也会显示替代文本。示替代文本。定义图片替代文本的方法是：定义图片替代文本的方法是：例：例：28.htmHTML对图片的控制对图片的控制-3图片的显示大小图片的显示大小我们可以指定一幅图片在浏览器窗口里我们可以指定一幅图片在浏览器窗口里的显示大小。的显示大小。定义图片的显示大小的方法是：定义图片的显示大小的方法是：width指定图片的宽度，指定图片的宽度，height指定高指定高度。它们的度。它们的属性值可以是象素，也可属性值可以是象素，也可以是以是%。例：例：29.htmH

12、TML对图片的控制对图片的控制-4图片的边框图片的边框我们可以为一幅图片加一个边我们可以为一幅图片加一个边框以突出显示：框以突出显示：border的属性值为象素数的属性值为象素数例：例：30.htmHTML对图片的控制对图片的控制-5图片的对齐方式图片的对齐方式图片可以相对于页面或单元格有一个对图片可以相对于页面或单元格有一个对齐方式。齐方式。定义水平对齐方式的方法是：定义水平对齐方式的方法是：例：例：31.htm31.htmHTML对图片的控制对图片的控制-6图片的对齐方式图片的对齐方式定义图片的垂直对齐方式：定义图片的垂直对齐方式：对于图片的对齐方式不仅是以上几种，对于图片的对齐方式不仅是

13、以上几种，但是以上的几种是最常用的。但是以上的几种是最常用的。例：例：32.htmHTML对图片的控制对图片的控制-7定义图片与左、右的文本之间的间距定义图片与左、右的文本之间的间距图片在显示时，与左右的文本之间可图片在显示时，与左右的文本之间可以有一定的间距以有一定的间距 Hspace(horizontal)定义定义水平间距水平间距；Vspace(vertical)定义定义垂直间距垂直间距。单位。单位都是象素数都是象素数.例：例：33.htmHTML对图片的控制对图片的控制-8图象的超级链接图象的超级链接 图象的超级链接是指整个图象的超级图象的超级链接是指整个图象的超级链接，当点击图象的任何

14、部分时，都链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级会打开这个超级链接。定义默认超级链接的方法是：链接的方法是：所以，所谓超级链接实际上就是用所以，所谓超级链接实际上就是用元素标志一个图象的引用元素标志一个图象的引用;例：例：34.htmHTML对图片的控制对图片的控制-9图象映射图象映射所谓图象映射是指一个图片上的所谓图象映射是指一个图片上的不同位置被指定了不同的超级不同位置被指定了不同的超级链接；点击图片的不同位置会链接；点击图片的不同位置会打开不同的超级链接目标。这打开不同的超级链接目标。这与前面的默认超级链把整个图与前面的默认超级链把整个图片作为超级链接的元素是很

15、不片作为超级链接的元素是很不一样的。一样的。HTML对图片的控制对图片的控制-10图象映射（只要求理解标记含义）图象映射（只要求理解标记含义）图象映射由图象映射由定义。定义。有一有一个个基本属性基本属性是是name。Name给图象映给图象映射命名，这个命名将会被射命名，这个命名将会被元素元素用用usemap属性引用。所以，图象上属性引用。所以，图象上的图象映射实际上是对的图象映射实际上是对定义的定义的映射的一个引用。映射的一个引用。在定义图象映射时，可以定义在定义图象映射时，可以定义三种形状的映射：三种形状的映射：circle(圆形圆形)、rect(矩形矩形rectangle)、poly(多边形多边形)HTML对图片的控制对图片的控制-11图象映射实例（图象映射实例（35.htm）