第三章、建立超链接(hyperlink)
3.1超链接的基本知识
每个网页都有一个唯一的地址,称为统一资源定位符(URL)。然而,当在网页中创建内部链接时,一般不会指定链接文档的完整URL,而是指定一个相对当前文档或站点根文件夹的相对路径。
3.1.1绝对路径
绝对路径是包括服务器范围在内的完全路径。绝对路径不管源文件按在什么位置都可以非常精确地找到,除非是目标文档的位置发生变化,否则链接不会失败。
采用绝对路径的好处是,它童链接的源端点无关。如果希望链接同站点上的其他内容,就必须使用绝对路径。
采用绝对路径的缺点在于这种方式的链接不利于测试。如果在站点中使用绝对路径,要想测试链接是否有效,必须在Internet服务器端对链接进行测试。另一个缺点是,采用绝对路径不利于站点的移植。
(1)图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如<img src="logo.gif"/>.
(2)图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<img src="img/img01/logo.gif"/>
(3)图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../”,如果是上两级,则需要使用“../../”,以此类推,如<img src="../logo.gif"/>.
3.1.2相对路径
相对路径可以表述源端点同目标端点的相互位置,它同源端点的位置密切相关。
如果链接中源端点和目标端点位于同一个目录下,则在链接路径中只需要指明目标端点的文档名称就可以了。
如果在链接中源端点和目标端点不在同一个目录下,则需要直接输入目录名称和子目录名称。
如果链接指向的文档没有位于当前目录的子集目录中,则可以利用···符号来表示当前位置的父级目录,利用多个···符号可以表示更高的父级目录,从而构建出目录中的相对位置。
利用相对目录的好处在于,如果站点的结构和文档的位置不变,那么链接就不会出错。可以将整个网站一直到另一个地址的网站中,而不需要修改文档中的链接路径。
提示:
插入图像时,如果使用图像的相对路径,图像在远程服务器而不在本地硬盘上,则将无法在文档窗口中查看该图像。此时,只有在浏览器中预览该文档才能看到它。对于图像尽量使用相对路径。
3.2内部链接
内部链接是指链接的对象时在同一份网站中的资源。
3.2.1认识内部链接
与自身网站页面有关的链接被称为内部链接。
语法:
<a href="链接地址">
······
</a>
举例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;URL=gb2312" />
<title>内部链接</title>
</head>
<body>
脑筋急转弯
<p>
1.<a href="test1.html">"先天"是父母遗传,那"后天"是什么呢?</a>
</p>
<p>
2.<a href="2">为什么燕子要在南方过冬
</a>
</p>
<p>
3.<a href="3">两瓶酒</a>
</p>
</body>
</html>
3.3 列表标签
3.3.1 无序列表ul(重点)
无序列表的各个列表项之间没有顺序级别之分,是并列的,其基本语法格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
注:
1.<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字是不被允许的。
2.<li>与</li>之间相当于一个容器,可以容纳所有元素。
3.无序列表会带有自己样式属性
3.3.2 有序列表ol
里面也是li标签
3.3.3 自定义标签
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>