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

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） ,