链接与图片

图片处理

图像格式

• 网络带宽成本高，图片处理在保证用户体验良好的情况下，文件尺寸尽量小。
• 图片属性为静态文件，不要放在web服务器上，而是放在云存储服务器上并使用CDN加速。
• 以JPEG类型的图片优先使用，文件尺寸小。
• 小图使用PNG，清晰度高，因为文件尺寸小。
• 网页图标建议使用css字体构建，如使用iconfont或者fontwesome

格式	说明	透明
PNG	无损压缩格式，适合图标、验证码等。	支持
GIF	256色，可以产生动画效果（GIF动图）	支持
JPEG	有损压缩格式，如商品、文章等图片展示

使用图片

img

在网页中使用img标签展示图拍呢，图片等大小、边框、倒角效果使用css处理。

<img src="logo.png" alt="logo"/>

属性	说明
src	图片地址
alt	图像打开时异常说明文本

网页链接

a

不能通过一个页面展示网页的所有功能，需要在不同的页面中跳转，这就是链接起到的作用。

<a href="https://theliuwei.com" target="_blank" title="文档">文档</a>

选项	说明
href	跳转地址
target	blank表示新窗口打开，self表示当前窗口打开
title	链接提示文本

锚点链接

锚点可以设置跳转到页面中的某个部分。

1. 为元素添加id属性来设置锚点

2. 设置a标签点href属性

<a href="#comment-1">跳转到评论区</a>
<div id="comment-1">
这是评论区
</div>

4. 也可以跳转不同页面点锚点

   <a href="article.html#comment-1">跳转到评论区</a>

   邮箱链接

   除了页面跳转外可以指定其他链接。使用以下方式也有缺点，邮箱可能会被恶意用户采集到，所以有些用户使用xxx#qq.com然后提示请将#改为@后发邮件。

   <a href="mailto:[email protected]">发邮件</a>

   拨打电话

   点击下面链接，手机询问用户是否拨打电话。

   <a href="tel:111111111">联系客服</a>

   下载文件

   默认情况下使用链接可以下载浏览器无法处理的文件，如果下载图片需要使用后台语言告知浏览器mime类型。

   <a href="https://theliuwei.com/downloads/1.png">下载文件</a>