HTML5学习笔记-第三章

第三章、建立超链接(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>

 

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值