小白看完秒懂的html绝对路径，相对路径，超链接，锚点，图像映射。

小白看完秒懂的html绝对路径，相对路径，超链接，锚点，图像映射。

1.绝对路径

一个完整的网站

http://www.gitee.com
http://www.baidu
https://xhpfmapi.zhongguowangshi.com/vh512/share/9394960

2.相对路径

• 目标文件与当前文件同级

目标文件
./目标文件
级别，指的值当前文件所在的文件夹

• 目标文件在当前文件的下级目录

与当前文件同级的文件夹/目标文件名
./与当前文件同级的文件夹/目标文件名

• 目标文件在当前文件的上一级目录

../表示上一级目录
../../表示上一级目录的上一级目录

3.超链接和锚点

3.1相关标签

a:超链接-双
属性:
href，指定目标地址
target，指定目标文件在哪里打开，_self(默认)，_blank在新窗口打开
name,用于设置锚点
base:指定超链接的基础特性，写在head里面
href,设置超链接的基础地址,影响相对路径
target，指定目标文件在哪里打开，_self(默认)，_blank在新窗口打开

3.2超链接功能

3.2.1，通过href属性指向目标地址，目标地址是一个文件地址
点击超链接，浏览器就会打开目标地址指向的文件
如果目标地址指向的文件格式浏览器打不开，执行下载。
3.2.2超链接的用法

<a href="tel:10086">打电话</a>
<a href="sms:10086">发短信</a>```

 
 3.2.3指定目标文件打开的位置
 

```html
把 target 属性的值设置为 _blank, 目标文件会在新窗口打开
target 属性的默认值是 _self

3.3锚点
3.3.1在页面中设置锚点

第一种方式
使用a标签
<a name="锚点名"> </a>
第二种方式
给标签设置id属性
<div id="锚点名"> </div>

3.3.2跳转到锚点
跳转到锚点，还是需要超链接，不跳转到新页面，跳转到当前页面锚点位置

<a href="#锚点名">指定锚点</a>
<a href="#">返回定点</a>

注意：
不但可以跳转到本页面某个锚点
还可以 跳转到其它页面的某个锚点

4.图片

4.1相关标签

img:图片-单
属性：
src,指定图片地址
alt,指定图片的说明文字，如果图片无法正常加载，改文字显示<br>
usemap,指定与该图像对应的map标签的name值。
map:用于图像映射-双
属性：name,指定一个名字，用于与img标签关联。
area:用于图像映射划分区域，必须写在map标签里面-单。
属性：
shap,指定区域的形状，可选值
rect,circle,poly
coords,根据区域的形状不同，执行不同坐标
href,指定目标地址
target,指定在什么位置打开新页面。

4.2在页面中引入图像

<img src="../02-超链接/1.jpg" alt="xxx" title="xxx" height="300">

4.3图片与超链接配合使用

<a href="http://www.baidu.com">
    <img src="images/xx.jpg" alt="xxx" height="200">
</a>

<a href="http://www.taobao.com">
    <img src="images/xx" alt="xx" height="200">
</a>

4.4 图像映射

<img src="images/浏览器.jpg" alt="浏览器" usemap="#mymap">

<map name="mymap">
    <area shape="circle" coords="130,114,100" href="https://www.google.cn/chrome/" target="_blank" title="chrome浏览器">
    <area shape="rect" coords="265,27,491,159" href="http://www.firefox.com.cn/" target="_blank" title="firefox浏览器">
    <area shape="poly" coords="138,349,248,157,374,346" href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads" target="_blank" title="IE浏览器">
</map>