HTML网页链接

1.链接的基本认识

所谓链接，是指一个页面之向一个目标的链接关系。

链接地址不仅仅是一个页面地址，也可能是一个文件地址或者邮箱地址。

文本链接

图像链接

邮箱地址的写法：<a href="mailto:[email protected]?subject=哈哈哈;body=这是主题内容">

2.同一页面中快速查找消息

通过设置a标签中src内容的#来确定引用的同一页面中的内容，设置目标内容的id或者name，一般是id

3.提高页面链接的友好度

通过css代码设置链接的显示

如下所示：

<style type="text/css">
        /** 链接的状态，去掉链接的下划线**/
        
        a {
            color: teal;
            text-decoration: none;
        }
        /**被访问后的链接状态**/
        
        a:visited {
            color: silver;
            text-decoration: none;
        }
        /**划过链接文本的样式**/
        
        a:hover {
            color: red;
            text-decoration: underline;
        }
    </style>

4.改变链接下划线的样式

border-bottom:底部边界 padding-bottom:底部内边

<style type="text/css">
        .a1 {
            text-decoration: none;
            border-bottom: 5px dotted red;
        }
        
        .a2 {
            text-decoration: none;
            padding-bottom: 15px;
            background: url(../img5/line2.png) bottom repeat-x;
        }
    </style>

这里dotted是点状的意思，除此之外还有：dashed(虚线)、double(双线)、groove(槽线)、ridge(脊线)、inset(内陷)、outset(外陷)

5.热点图像的链接

所谓热点图像区域，就是指一个图像中的某一区域，那么热点图像区域的链接自然是使用这一个区域作为超链接

<img>要设定usermap关联某个map

标签：<map> ，<map>下嵌入<area>标签标明某一区域，其中有三个属性值：

shape:用来确定选区的形状，分别是rect(矩形)、circle(圆形)、poly(多边形)

coords:用来控制形状的位置，rect是四个值(x1,y1,x2,y2)，从左上角到右下角，cicle是三个值(x,y,z)，其中x,y定义了圆心的位置，z是半径，poly不用说了，就是点连起来

href:超链接

如下所示：

  <!--Chrome浏览器只支持name属性值关联-->
    <h1>热点图像区域的链接</h1>
    <img src="../img4/向左向右.jpg" usemap="#test_map" />
    <map id="test_map" name="test_map">
      <area shape="rect" coords="26,41,53,68" href="https://chejianer-images.oss-cn-shanghai.aliyuncs.com/test/YG0N6LXpl6MLZIqZuO2Wd36NeKlLKsH5.gif" alt="a1" target="_blank"/>
      <area shape="circle" coords="314,197,23" href="https://chejianer-images.oss-cn-shanghai.aliyuncs.com/develop/yhDEgAk0YJRtiFmQxLTKBoHuRMq6CZO0.jpeg" alt="a2" target="_blank">
    </map>

在这里有如何获取图片中某个像素的位置的技巧：

新建一个HTML文档，将目标图像放上去，设置属性ismap="ismap"

 <!--打开页面，点击图片上某一点就可以在链接后面看到该点的坐标-->
    <a href="#">
        <img src="../img4/向左向右.jpg" ismap="ismap" />
    </a>

练习代码已放到码云上：https://gitee.com/yuanhan93/HTML5andCSS3 d5文件夹

猜你喜欢