# 链接与图片

# 图片处理

# 图像格式

网络带宽成本很高,图片处理在保证用户体验好的前端下,文件尺寸也要尽可能小 图片属性静态文件,不要放在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	图像打开异常时的替代文本-->
1
2
3

设置图像属性——图片显示大小 定义图片的显示大小的方法是:

<img src="sample.jpg" width=100 height=100 >
1

width指定图片的宽度,height指定高度。它们的属性值可以是像素,也可以是%。

设置图片的边框
我们可以为一幅图片加一个边框以突出显示,border的属性值为像素数

<img src="sample.jpg" border= " 2 " >
1

设置图片的对齐方式 图片可以相对于页面或单元格有一个对齐方式。 定义水平对齐方式的方法是:

 <img src=“sample.jpg” align=“left” >
 <img rc=“sample.jpg” align=“right”>
1
2

定义图片的垂直对齐方式:

<img src="sample.jpg" align="top" >
<img src="sample.jpg" align="middle">
<img src="sample.jpg" align="bottom" >
1
2
3

上面是最常用的图片对齐方式,下面再介绍一下其他的对齐方式。

# 网页链接

我们无法在一个页面展示网站的所有功能,需要在不同页面中跳转,这就是链接所起到的功能。

<a href="http://doc.houdunren.com" target="_blank" title="文档库">后盾人文档库</a>
<!-- href 跳转地址 -->
<!-- target="_blank" 新窗口打开 _self 当前窗口打开 -->
<!-- title	链接提示文本 -->
1
2
3
4

# 打开窗口a

下面设置 target 属性在指定窗口打开。

 <a href="https://www.houdunren.com" target="hdcms">
     在IFRAME中打开
</a>
<script>
	window.open('https://www.hdcms.com', 'hdcms');
</script>
1
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>
1
2
3
4
5
6

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

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

# 外部链接

外部链接,指的是跳转到当前网站外部,与其他网站中页面或其他元素之间的链接关系。这种链接在一般情况下需要书写绝对的链接地址。 制作外部链接的时候,使用URL统一资源定位符来定位万维网信息,这种方式可以简洁、明了、准确地描述信息所在的地点。

1.通过HTTP协议 2.通过FTP 3.发送Email 4.下载文件 最常见的URL格式

# 邮箱链接mailto

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

<a href="mailto:2300071698@qq.com">给后盾人发送邮件</a>
1

mailto标签的参数

<html>
<head>
<title>链接mail服务器</title>
</head>
<body>
链接mail服务器的链接
<hr size="2">
<A href="mailto:mingrisoft@mingrisoft.com">明日编程词典注册信息发送</A>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11

# 拨打电话tel

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

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

# 下载文件

默认情况下使用链接可以下载浏览器无法处理的文件,如果下载图片需要后台语言告之浏览器mime类型(可查看后盾人PHP)相关课程。

<a href="https://www.hdcms.com/HDCMS-201905072207.zip">下载HDCMS</a>
1
更新时间: 2020-2-15 13:51:15