600字范文 > HTML-超链接/锚链接/地图热点

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

时间：2021-11-21 08:35:51

相关推荐

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

网页中的图片分类

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> <a href="">百度一下，你就知道</a><a href=""></a><a href="" target="_blank">新窗口中跳转百度</a></body>

base跳转标签

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

点击图片跳转淘宝链接

<a href=""><img src="../img/01.jpg" alt="淘宝"></a>

锚链接

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

<h1 id="top">一级标题</h1> 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?<div>任何一个标签上都可以有一个id属性，id值是唯一的id的命名：字母或字母+数字 <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@">给马云发送邮件</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="/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......”

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。