一、路径
在学路径之前,先来明确两个概念。什么是目录文件夹和根目录。
目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如html文件、图片等。
根目录:打开目录文件夹的第一层就是根目录。
路径又分为相对路径和绝对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录文件
这里简单来说就是,图片相对于HTML页面的位置
相对路径又分为以下几类:
1.同一级路径
图像文件位于HTML文件同一级
在body中编写<img src="img.jpg" />
即可显示图片。
2.下一级路径
图像文件位于HTML文件的下一级
在这里可以看到,HTML文件和images文件在同一级,图片img.jpg在images文件里,所以图片相对于HTML文件来说,就在它的下一级。
在body里,编写<img src="images/img.jpg">
才可显示图片
3.上一级路径
图像文件位于HTML文件的上一级
这里HTML文件(即上一级路径.html)位于html这个文件夹中,而图片img.jpg与html文件在同一级,所以图像文件相对于HTML文件(上一级路径.html)来说,就在它的上一级
在body中,编写<img src="../img.jpg"/>
可显示图片
注意:这里../
就是上一级的意思
绝对路径(了解,实际开发中应用较少)
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径
例如:“D:\web\img\logo.gif"或者是完整的网络地址"http://www.itcast.cn/images/logo.gif”
二、超链接标签(重点)
在HTML标签中,<a>
标签用于定义超链接,作用是从一个网页链接到另一个网页
1.链接语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
两个属性的作用如下:
|
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址(必需属性),当为标签应用href属性时,它就具有了超链接的功能 |
– | – |
target | 用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式 |
2.链接分类
(1)外部链接
形式:http://+网址
例如:<a href="http://www.baidu.com">百度</a>
(2)内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可
例如:<a href="index.html">首页</a>
(3)空链接:如果当时没有确定链接目标时,则可用
<a href="#">首页</a>
(4)下载链接:如果href里面地址是一个文件(.exe)或者压缩包(.zip),会下载这个文件
(5)网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等可以添加超链接
点击图片即可跳转至百度页面
<a href="http://www.baidu.com" target="_blank"><img src="img.jpg"/></a>
(6)锚点链接:点击链接,可以快速定位到页面中的某个位置
- 在链接文本的href属性中,设置属性值为#名字的形式,如
<a href="#two">第二集</a>
- 找到目标位置标签,里面添加一个id属性=刚才的名字,如
<h3 id="two">第二集</h3>
到此,介绍完了HTML的路径问题以及超链接,下次我们再学习HTML的表格标签、列表标签和表单标签。