链接与图片

图片处理

网络带宽成本很高，图片处理在保证用户体验好的前提下，文件尺寸也要尽可能小
图片属性静态文件，不要放在WEB服务器上，而放在云储存服务器上并使用CDN加速
以JPEG类型优先使用，文件尺寸更小
小图片使用PNG，清晰度更高，因为文件尺寸小，文件也不会太大
网页图标建议使用css字体构建如 iconfont (opens new window)在新窗口打开或 fontawesome(opens new window)在新窗口打开

格式	说明	透明
PNG	无损压缩格式，适合图标、验证码等。有些小图标建议使用css字体构建。	支持
GIF	256色，可以产生动画效果（即GIF动图）	支持
JPEG	有损压缩的类型，如商品、文章的图片展示

💡 使用png 类型，图片清晰，同时有透明色，当页面底色改变时也不需要修改图片。

💡 大图使用jpeg ，因为图片比较大使用png会造成文件过大，使用jpeg后尺寸不大而且清晰度也可以接受。

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

<img src="test.png" alt="图片"/>

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

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

<a href="http://doc.googlr.com" target="_blank" title="文档库">google文档库</a>

下面设置 target 属性在指定窗口打开。(从已有的google窗口中打开)

<a href="https://www.baidu.com" target="google">
    在IFRAME中打开
</a>
<script>
    window.open('https://www.google.com', 'google');
</script>

1
2
3
4
5
6

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

<a href="#comment-1">跳转到评论区</a>
<div style="height: 1000px;"></div>

<div id="comment-1" style="background: green;">
    这是评论内容区
</div>

1
2
3
4
5
6

也可以跳转到不同页面的锚点

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

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

<a href="mailto:1106894094@qq.com">给我发送邮件</a>

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

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

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

<a href="https://www.test.com/202005072207.zip">下载压缩包</a>