HTML&CSS课程之图像与链接使用技巧

来源：cnblogs　　作者：陈莺莺呀　　时间：2020/11/9 15:18:54　　对本文有异议

常用格式：jpeg=jpg png gif

比较大的图片推荐使用jpg格式，ps导出成web格式，建议选择品质80，或者不低于60

PNG无损压缩，图片会较大。多用于透明底的小图标

如果字体库里有图标，优先选择字体图标；如果没有的话，就选择png、

gif 动画特性

图片最佳存储方式：（视频同理）

第三方云服务，对方会做cdn加速

按量付费

超链接使用技巧：

    <a href="http://www.houdunren.com" target="_blank" title="提示文字">这是一个超链接</a>
 
    <!-- target可以使用一个已经打开的窗口 -->
    <a href="http://www.houdunren.com" target="baidu" title="提示文字">这是一个超链接</a>
 
    <script>
        // 使用js打开一个新窗口，并且命名为baidu
        window.open('http://www.baidu.com','baidu');
    </script>

锚点生产使用案例：

    <a href="#footer">锚点</a>
 
    <div style="height:3000px;background:lightgreen;"></div>
 
    <footer id="footer">footer</footer>
 
    <div style="height:3000px;background:lightblue;"></div>

其他页面的锚点也可以

<a href="2.html#footer">锚点</a>

可以通过一些js的库实现平滑过渡的效果

链接的其他使用技巧：

    <a href="mailto:965794175@qq.com">发送邮件</a>
 
    <a href="tel:111xxxxxxxx">移动端会自动打开拨号面板</a>
 
    <a href="image.jpg">浏览器默认会打开图片，可以通过后台设置为点击直接下载</a>
 
    <a href="image.psd">点击直接下载</a>