第三章 图像列表与超链接资料.pptx

第三章  图像、列表与超链接;学习如何在网页中插入图片 掌握图像标签的相关属性 学习如何建立列表 掌握有序列表和无序列表的使用方法 学习如何使用链接 掌握如何使用内部链接，锚点连接，图片链接;图像是网页构成的最重要元素之一，图像标签只有一个——img img标签的重要属性： ;src属性用于指定文件所在的路径 src所使用路径既可以是相对路径，也可以是绝对路径 alt属性用于设置图像的提示文字 如果图片下载完成，将鼠标发在图片上会显示提示文字，如果没有下载完成将显示提示文字 ;width和height属性用来设置图像的宽度和高度，如果没有定义则默认按照图像的原始尺寸显示 border属性用来设置图像的边框线。但不能设定边框的颜色，有链接的时候边框颜色为蓝色，无链接时边框为黑色 align属性用来设置图文的对齐方式;HTML列表项共有3种类型，一种是无序列表，一种是有序列表，一种是定义列表 无序列表的项目符号由几个符号组成 有序列表的项目符号用数字和字母进行排序 定义列表用作产生条件和表述的双重列表，可以对列表进行灵活的定义 在这里我们主要介绍无序列表和有序列表;有序列表中将每个元素按数字或字母的顺序标号。 ol/ol表示整个列表的开始和结束 li/li表示每个列表项的开始和结束 有序列表样例 ;有序列表ol中有一个type属性，可以调整序号的类型 有序列表的序号类型;有序列表ol中的start属性可以设置编号的起始值，该语法中，数字起始值只能是数字。 练习： 有序列表表示星期一至星期日，要求编号类型为小写字母，起始序号为b,在有序列表中嵌套无须类表，说明你每天要做的事情;无序列不使用数字和字母类型，其他与有序列表相似。无序列表不依赖顺序表示其重要程度。 ul/ul表示整个列表的开始和结束 li/li表示每个列表项的开始和结束 无序列表的样例;无序列表ul也有type属性，可以设置序号类型 无序列表的序号类型 练习： 将上一练习序号改为空心圆的无序列表 ;超链接是HTML文档的最基本特征之一。超链接可以让浏览者在各个独立的页面之间方便的跳转。 超链接的范围很广，可以将文档中的任何文字及任意位置的图片设置为超链接。;绝对路径是包括服务器范围内的完全路径。绝对路径可以使源文件精确的找到，除非文件位置发生变化，否则不会出现错误 相对路径可以表述源目标端点与目标端点之间的相互位置。它有利于网站的移植，因而在开发中通常使用相对路径。;内部链接也称站内链接，是指链接的对象是在同一个网站中的资源。 语法格式： a href=“链接地址”链接文字/a 链接目标窗口属性 target 语法格式： a href=“链接地址” target=“目标窗口打开方式”链接文字/a ;目标窗口设置的属性值 超链接样例;锚点就是指在给定名称的一个网页的某个位置。创建锚点链接首先要创建锚点。 语法格式： a name=“锚点名称”/a 利用锚点名称可以链接到相应的位置。这个名称可以是数字或英文。同一个网页可以有无数的锚点，但是不能有两个相同的锚点 ;建立锚点以后，在href属性中输入锚点名称，可以连接到页面的不同位置 语法格式： a href=“#??点名称”/a 锚点链接也可以链接到其他页面 语法格式： a href=“文件地址#锚点名称”/a 超链接锚点样例 ;超链接标签也可以链接到外部网页 语法格式： a href=“http://...”/a 图片也可以作为超链接 语法格式： a href=地址img src=地址/a ;本章我们学习了 在HTML中插入图片，以及对图片进行调整的6个基本属性 学习了HTML列表，有序列表和无序列表 学习了HTML超链接，内部链接，锚点链接，图片链接;制作网页个人简历 要求配有自己的照片和相关图片及背景 在各个栏目要设定栏目，在最上层设定锚点链接，每个栏目要能返回顶部 栏目内容可以仿造此样例 各栏目内部根据需要自行设定有序列表或无序列表 各组组长收齐自己组的作业打包后发送到 tongzhoushxt@ ;21