HTML-超链接/锚链接/地图热点

和蔼的阿木木o

已于 2022-06-17 11:23:27 修改

阅读量1.1k

点赞数

文章标签： html5

于 2022-06-16 21:05:21 首次发布

本文链接：https://blog.csdn.net/m0_59642141/article/details/125316133

版权

网页中的图片分类

1.内容图片

2.修饰图片

1.JPG格式JPG也称JPEG，这种格式的图像采用高效的压缩方式，使图像文件的存储容量在变小的同时又能保持图像质量基本不失真。JPG文件通常用来保存照片等颜色丰富的精美图片。
2. GIF格式GIF也称为图像交换格式，在网页中大量使用，如站标(Logo)、广告条(Banner)和网页背景等一般为GIF格式的图像。GIF可以使图像文件变得很小，还可以在网页中以透明方式显示，而且可以包含动态信息。但是，由于GIF格式多支持256种颜色，因此不适合用来保存色彩丰富的图像。
3. PNG格式PNG为便携网络图像格式(是Fireworks保存图像的默认格式)。它既有GIF能透明显示的特点，又具有JPEG处理精美图像的优势，是一种集JPEG和GIF格式优点于一身的图像格式。
　PNG格式还可以包含图层等信息，经常用于制作网页效果图，目前已逐渐成为网页图像的主要格式。

4.webp（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由 Google在购买On2 Technologies后发展出来，以BSD授权条款发布。

超链接 <a>标签/行内元素

<body>
    <a href="">我是一个超链接！（刷新页面）</a><br>
    <!-- 跳转百度 -->
    <a href="http://www.baidu.com">百度一下，你就知道</a>
    <a href=""></a>
    <!-- 如何在新窗口中打开
               target属性
               blank  空白的含义
              target="_blank  在新窗口打开的属性
       -->
       <a href="http://www.baidu.com" target="_blank">新窗口中跳转百度</a>
</body>

base跳转标签

<base>标签，浏览器随后将不再使用当前文档的URL,而使用指定的基本URL来解析所有的相对URL。这其中包括<a>、 <img>、 <link>、 <form>标签中的 URL。target 就是点击链接后跳转到的目标页。

点击图片跳转淘宝链接

    <!-- 图片嵌套<a>标签里 -->
    <a href="http://www.taobao.com"><img src="../img/01.jpg" alt="淘宝"></a>

锚链接

#id值：id值为锚链接定位的位置

  <h1 id="top">一级标题</h1>
    <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><br><br><br><br><br><br><br><br><br><br><br><br>
    <p id="top1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores, ratione? Hic unde voluptates expedita eos, natus, 
        laboriosam porro error iste illum mollitia eveniet? Reprehenderit veniam voluptatem libero a magni repellat?</p>
    <div>任何一个标签上都可以有一个id属性，id值是唯一的
    <p>id的命名：字母或字母+数字</p>
    <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 href="#top">我要去顶部</a>
    <a href="#top1">去看段落</a>
</body>
</html>

第一种
同一页面：定位到first <a name="first">first相关内容…… </a>
不同页面：< a href ="a.html#first">锚点在a.html页面，从其他页面跳转到a.html页面的#first处 </ a>

第二种
定位到first
<div id="first">first相关内容…… </div> //div或者span中使用id，name属性不支持

第三种
用js实现，document.location.href = "a.html#first";
或者通过url传值，在取值页面通过判断传过来的值触发js函数

电子邮件链接 /下载链接

    <a href="mailto:mayun@163.com">给马云发送邮件</a>
    <a href="../img/01.jpg">下载链接</a>

地图热点map对象/在DW中实施地点标记

<map name="Map">
  <area shape="poly" coords="196,293,158,305,124,295,98,285,66,259,84,234,117,228,137,226,179,259,188,263,201,267,201,277" href="https://www.163.com/dy/article/DTRILEJJ0522UAHB.html">
</map>

shape ：形状

1.rect 矩形

2.circle 圆形

3.poly 多边形

coords坐标：1.当shape=“rect”，coords=“x1,y1,x2,y2”

2.当shape=“circle”，coords=“x1,y1,R”

当shape=“poly”，coords=“x1,y1,x2,y2......”