# 链接与图片
# 图片处理
# 图像格式
网络带宽成本很高,图片处理在保证用户体验好的前端下,文件尺寸也要尽可能小 图片属性静态文件,不要放在WEB服务器上,而放在云储存服务器上并使用CDN加速 以JPEG类型优先使用,文件尺寸更小 小图片使用PNG,清晰度更高,因为文件尺寸小,文件也不会太大 网页图标建议使用css字体构建如 iconfont 或 fontawesome
格式 | 说明 | 透明 |
---|---|---|
PNG | 无损压缩格式,适合图标、验证码等。有些小图标建议使用css字体构建。 | 支持 |
GIF | 256色,可以产生动画效果(即GIF动图) | 支持 |
JPEG | 有损压缩的类型,如商品、文章的图片展示 |
如的网站标志使用png 类型,这样图片清晰,同时有透明色,当页面底色改变时也不需要修改图片。
图片建议使用jpeg ,因为图片比较大使用png会造成文件过大,使用jpeg后尺寸不大而且清晰度也可以接受。
保存透明图 下面介绍在PhotoShop 中快速生成透明 png 的图片效果。 1.保证没有纯色的底 2.选择导出为png格式即可
# 使用图片img
在网页中使用 img 标签展示图片,图片的大小、边框、倒角效果使用css处理。
<img src="houdunren.png" alt="后盾人"/>
<!--src 图片地址 -->
<!--alt 图像打开异常时的替代文本-->
2
3
设置图像属性——图片显示大小 定义图片的显示大小的方法是:
<img src="sample.jpg" width=100 height=100 >
width指定图片的宽度,height指定高度。它们的属性值可以是像素,也可以是%。
设置图片的边框
我们可以为一幅图片加一个边框以突出显示,border的属性值为像素数
<img src="sample.jpg" border= " 2 " >
设置图片的对齐方式 图片可以相对于页面或单元格有一个对齐方式。 定义水平对齐方式的方法是:
<img src=“sample.jpg” align=“left” >
<img rc=“sample.jpg” align=“right”>
2
定义图片的垂直对齐方式:
<img src="sample.jpg" align="top" >
<img src="sample.jpg" align="middle">
<img src="sample.jpg" align="bottom" >
2
3
上面是最常用的图片对齐方式,下面再介绍一下其他的对齐方式。
# 网页链接
我们无法在一个页面展示网站的所有功能,需要在不同页面中跳转,这就是链接所起到的功能。
<a href="http://doc.houdunren.com" target="_blank" title="文档库">后盾人文档库</a>
<!-- href 跳转地址 -->
<!-- target="_blank" 新窗口打开 _self 当前窗口打开 -->
<!-- title 链接提示文本 -->
2
3
4
# 打开窗口a
下面设置 target 属性在指定窗口打开。
<a href="https://www.houdunren.com" target="hdcms">
在IFRAME中打开
</a>
<script>
window.open('https://www.hdcms.com', 'hdcms');
</script>
2
3
4
5
6
# 锚点链接#
锚点可以设置跳转到页面中的某个部分。 1.为元素添加 id 属性来设置锚点 2.设置 a 标签的 href 属性
<a href="#comment-1">跳转到评论区</a>
<div style="height: 1000px;"></div>
<div id="comment-1" style="background: green;">
这是后盾人评论内容区
</div>
2
3
4
5
6
也可以跳转到不同页面的锚点
<a href="article.html#comment-1">跳转到评论区</a>
# 外部链接
外部链接,指的是跳转到当前网站外部,与其他网站中页面或其他元素之间的链接关系。这种链接在一般情况下需要书写绝对的链接地址。 制作外部链接的时候,使用URL统一资源定位符来定位万维网信息,这种方式可以简洁、明了、准确地描述信息所在的地点。
1.通过HTTP协议 2.通过FTP 3.发送Email 4.下载文件 最常见的URL格式
# 邮箱链接mailto
除了页面跳转外可以指定其他链接。使用以下方式也有缺点,邮箱可能会被恶意用户采集到,所以有些用户使用 houdunren#qq.com 然后提示用户 请将#改为@后发邮件的提示形式。
<a href="mailto:2300071698@qq.com">给后盾人发送邮件</a>
mailto标签的参数
<html>
<head>
<title>链接mail服务器</title>
</head>
<body>
链接mail服务器的链接
<hr size="2">
<A href="mailto:mingrisoft@mingrisoft.com">明日编程词典注册信息发送</A>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
# 拨打电话tel
点击以下链接后,手机会询问用户是否拨打电话。
<a href="tel:99999999999">联系客服</a>
# 下载文件
默认情况下使用链接可以下载浏览器无法处理的文件,如果下载图片需要后台语言告之浏览器mime类型(可查看后盾人PHP)相关课程。
<a href="https://www.hdcms.com/HDCMS-201905072207.zip">下载HDCMS</a>