Html学习笔记4：路径和锚点

目录结构语法：

同一目录下：直接文件名.后缀名或./文件名.后缀名。

子目录下：xxx/文件名.后缀名。

孙子目录下：xxx/xxx/文件名.后缀名。

父目录下：../文件名.后缀名。

爷爷目录下：../../文件名.后缀名。

锚点：

    <!DOCTYPE html>  
    <html lang="zh-cn">  
    <head>  
        <meta charset="utf-8">  
        <title>锚点</title>  
    </head>  
    <body>  
        <a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a><br>  
        小说前言：  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <a name="1"></a>第一章内容：  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <a id="2"></a>第二章内容：  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <a name="3"></a>第三章内容：  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    </body>  
    </html>

<a name="1"></a>第一章内容

即是创建了一个命名锚记

<a href="#1">第一章

创建了到这个命名锚记的链接。name是通用属性，每个标签都可以加一个name值。通过属性id也可以实现锚点的定位，其用法和name是相同的

也可用于定位一个图片上的其他元素的内容
1.有一张图片，并且图片上添加属性 usermap=“#id 名称”
2. 在一张图片中添加一个name属性和id属性，并且保持两个名称一致，一个页面id只能出现一次
3. 区域标签 <area />

属性：shape 规定区域的图像
Rect 矩形
Circle 圆形
Poly 多边形

扫描二维码关注公众号，回复： 2106278 查看本文章

Cord 通过点坐标的方式添加图形对应的坐标
Href 通过点击区域以后跳转的 url

格式：

<map name="id名称" id="id名称">
    <area />
</map>

关于超链接的使用的：

<!DOCTYPE html>  
<html lang="zh-cn">  
<head>  
    <title>超链接综合实例</title>  
    <meta charset="utf-8">  
</head>  
<body>  
    <p><!-- p标签表示段落 -->  
        <center><a name="top">这里是顶部的标题</a></center>  
        img标签插入图像文件<br><br>  
        src表示插入文件路径<br><br>  
        map标签表示插入图像映射<br><br>  
        area标签标示图像映射区域，其中shape属性表示映射区域形状，有三种取值<br><br>  
        rect表示矩形区域，circle表示圆形区域，poly表示多边形区域<br><br>  
        coords表示感应区域坐标，当鼠标指针指向图像的感应区域时，呈现手的标志<br><br>  
        这时单击鼠标左键，会链接到href属性所指定的网页中<br><br>  
        矩形的coords四个值表示左上x,左上y,右下x,右下y四个坐标<br><br>  
        圆形的coords三个值表示圆心x,y坐标和半径<br><br>  
        多边形的coords多个值表示各个顶点坐标值<br><br>  
        <img src="tx.jpg" width="150" height="150" border="1" usemap="#Map">  
        usemap 属性将图像定义为客户端图像映射<br><br>  
        图像映射指的是带有可点击区域的图像<br><br>  
        usemap 属性与map元素的name或id属性相关联，以建立img与map之间的关系<br><br>  
        <map name="Map">  
            <area shape="rect" coords="0,0,150,150" href="http://www.baidu.com">  
        </map>  
        在一堆文字里可以建立一些链接，然后我们点链接就能进到<a href="www.baidu.com">链接</a>里去。<br>  
    </p>  
    <p>  
        <br><br><br><br><br><br><br>  
        <a href="#top">返回顶部</a><br>  
    </p>  
</body>  
</html>

这里写图片描述
多加几个<br>标签把滚动条弄出来，然后点一下返回顶部可以测试能正确返回到顶部

Html学习笔记4：路径和锚点

猜你喜欢