第 3章 超级链接和列表
网页设计－姚屏
不同类型的超链接
?根据超链接的目标文件不同，分为：
?网页之间的超链接
?页面内的超链接
?文件下载超链接
?Email超链接
?空超链接
3.1 建立超级链接
网页设计－姚屏
不同类型的超链接
?根据超链接源对象的不同，分为：
?文本超链接
?图像超链接（包括图像映射）
?对象超链接（例如 Flash,Java小程序）
网页设计－姚屏
3.1.1 锚点标记
? A 标记符用于创建超链接 （结束标记符不能省
略）
?href 属性 用于指定超链接的目标文件。
?Name指定当前文本中的锚点
?Target设定链接被按后结果所要显示的窗口
?可选值 _blank,_parent,_self,_top，框架名称
演示 ——超链接效果
网页设计－姚屏
3.1.2指向其他页面的链接
?内部网页超链接,<a href=test.htm>link</a>
?<a href=“目标文件路径 /目标文件名,htm>热点 </a>
? 外部网页超链接：
?<a href=http://www.microsoft.com>微软 </a>
网页设计－姚屏
3.1.3指向本页中的链接
? 使用页面内的超链接，首先需要定义锚
点，然后在超链接中指向该锚点。 定义
锚点应使用 <a name=xxx></a>
? 指向锚点的超链接为,<a href=#锚点
名称 >link</a>
网页设计－姚屏
锚点链接
?指向其他页面内锚点的超链接,<a href
= 页面的 URL#该文件中的锚点
>link</a>
?<a href= # >blank link</a>
演示 ——锚点超链接效果
网页设计－姚屏
3.1.4创建下载文件的链接
? 当超链接目标为浏览器不能识别的文件
格式时，那么就自动生成了文件下载链
接。
?<a href=xxx.zip>下载 </a>
演示 ——文件下载效果
网页设计－姚屏
3.1.5创建指向 Email链接
? <a href=mailto:someone@email.com>Email</a>
控制命令：
??subject= 设置信件主题
??cc= 设置抄送人
??bcc= 设置密件抄送人
?& 组合多个控制命令
演示 ——Email链接效果
网页设计－姚屏
3.2建立列表
?分为有序列表和无序列表
?带序号标志（数字、字母）的表项组成有
序列表
?无序号标志的为无序列表
网页设计－姚屏
3.2.1无序列表
?无序列表（ Unordered list）也称强调
式列表，它是一种在表的各项前显示有
特殊项目符号的缩排列表。
网页设计－姚屏
无序列表
?定义无序列表需要使用无序列表标记符
<UL></UL>和列表项（ List item）标记符
<LI></LI>（结束标记符可省略），语法如下：
<UL>
<LI>List item 1
<LI>List item 2
</UL>
网页设计－姚屏
无序列表
? UL 标记符最常用的属性 type，用来设置项目
符号样式。取值为,disc,circle,square。
?注意：在 IE 中,type 属性的取值是 区分大小写 的。
?在 <LI>中叶可以指定符号的样式
演示 ——无序列表
网页设计－姚屏
有序列表
?有序列表（ Ordered list）也称数字式
列表，它是一种在表的各项前显示有数
字或字母的缩排列表。
网页设计－姚屏
有序列表
?定义有序列表需要使用有序列表标记符
<OL></OL>和列表项（ List item）标记符
<LI></<LI>（结束标记符可省略），语法如下：
<OL>
<LI>List item 1
<LI>List item 2
</OL>
网页设计－姚屏
有序列表
?OL 标记符最常用的属性 type，用来设
置数字序列样式。取值为,1,A,a,I、
i。
?有序列表允许嵌套。
演示 ——有序列表
网页设计－姚屏
3.2.4定义项目列表
?<DL> <DT><DD>
<DL>
<DT>定义单词 1
<DD>单词 1的说明
<DT>定义单词 2
<DD>单词 2的说明
………..
<DL>
演示 ——项目列表
网页设计－姚屏
3.2.5列表的嵌套
演示 ——混合嵌套列表
演示 ——有序列表的嵌套
网页设计－姚屏
?完成课后练习
?P52-53 1-4题
网页设计－姚屏
不同类型的超链接
?根据超链接的目标文件不同，分为：
?网页之间的超链接
?页面内的超链接
?文件下载超链接
?Email超链接
?空超链接
3.1 建立超级链接
网页设计－姚屏
不同类型的超链接
?根据超链接源对象的不同，分为：
?文本超链接
?图像超链接（包括图像映射）
?对象超链接（例如 Flash,Java小程序）
网页设计－姚屏
3.1.1 锚点标记
? A 标记符用于创建超链接 （结束标记符不能省
略）
?href 属性 用于指定超链接的目标文件。
?Name指定当前文本中的锚点
?Target设定链接被按后结果所要显示的窗口
?可选值 _blank,_parent,_self,_top，框架名称
演示 ——超链接效果
网页设计－姚屏
3.1.2指向其他页面的链接
?内部网页超链接,<a href=test.htm>link</a>
?<a href=“目标文件路径 /目标文件名,htm>热点 </a>
? 外部网页超链接：
?<a href=http://www.microsoft.com>微软 </a>
网页设计－姚屏
3.1.3指向本页中的链接
? 使用页面内的超链接，首先需要定义锚
点，然后在超链接中指向该锚点。 定义
锚点应使用 <a name=xxx></a>
? 指向锚点的超链接为,<a href=#锚点
名称 >link</a>
网页设计－姚屏
锚点链接
?指向其他页面内锚点的超链接,<a href
= 页面的 URL#该文件中的锚点
>link</a>
?<a href= # >blank link</a>
演示 ——锚点超链接效果
网页设计－姚屏
3.1.4创建下载文件的链接
? 当超链接目标为浏览器不能识别的文件
格式时，那么就自动生成了文件下载链
接。
?<a href=xxx.zip>下载 </a>
演示 ——文件下载效果
网页设计－姚屏
3.1.5创建指向 Email链接
? <a href=mailto:someone@email.com>Email</a>
控制命令：
??subject= 设置信件主题
??cc= 设置抄送人
??bcc= 设置密件抄送人
?& 组合多个控制命令
演示 ——Email链接效果
网页设计－姚屏
3.2建立列表
?分为有序列表和无序列表
?带序号标志（数字、字母）的表项组成有
序列表
?无序号标志的为无序列表
网页设计－姚屏
3.2.1无序列表
?无序列表（ Unordered list）也称强调
式列表，它是一种在表的各项前显示有
特殊项目符号的缩排列表。
网页设计－姚屏
无序列表
?定义无序列表需要使用无序列表标记符
<UL></UL>和列表项（ List item）标记符
<LI></LI>（结束标记符可省略），语法如下：
<UL>
<LI>List item 1
<LI>List item 2
</UL>
网页设计－姚屏
无序列表
? UL 标记符最常用的属性 type，用来设置项目
符号样式。取值为,disc,circle,square。
?注意：在 IE 中,type 属性的取值是 区分大小写 的。
?在 <LI>中叶可以指定符号的样式
演示 ——无序列表
网页设计－姚屏
有序列表
?有序列表（ Ordered list）也称数字式
列表，它是一种在表的各项前显示有数
字或字母的缩排列表。
网页设计－姚屏
有序列表
?定义有序列表需要使用有序列表标记符
<OL></OL>和列表项（ List item）标记符
<LI></<LI>（结束标记符可省略），语法如下：
<OL>
<LI>List item 1
<LI>List item 2
</OL>
网页设计－姚屏
有序列表
?OL 标记符最常用的属性 type，用来设
置数字序列样式。取值为,1,A,a,I、
i。
?有序列表允许嵌套。
演示 ——有序列表
网页设计－姚屏
3.2.4定义项目列表
?<DL> <DT><DD>
<DL>
<DT>定义单词 1
<DD>单词 1的说明
<DT>定义单词 2
<DD>单词 2的说明
………..
<DL>
演示 ——项目列表
网页设计－姚屏
3.2.5列表的嵌套
演示 ——混合嵌套列表
演示 ——有序列表的嵌套
网页设计－姚屏
?完成课后练习
?P52-53 1-4题
