day10
常见的图片格式和特点
格式 | 优点 | 缺点 | 使用场景 |
---|---|---|---|
jpg | 色彩丰富,文件小 | 有损压缩,反复保存图片质量下降明显 | 色彩丰富的图片/渐变图像 |
gif | 文件小,支持动画、透明,兼容性比较好 | 只支持256种颜色 | 色彩简单的logo/icon/动图 |
png | 无损压缩,支持透明,简单图片尺寸小 | 不支持动画,色彩丰富的图片尺寸大 | logo/icon/透明图 |
webp | 文件小,支持有损和无损压缩,支持动画、透明 | 浏览器兼容性不好 | 支持webp格式的app和webview |
网站favicon
favicon.ico 一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。
制作favicon图标
(1) 把图标切成 png
图片 (2)把 png
图片转换为 ico
图标,这需要借助于第三方转换网站,例如比特虫:http://www.bitbug.net/
使用favicon图标
-
(1)favicon图标放到网站根目录下
-
(2)HTML页面引入favicon图标
-
<link rel="shortcut icon" href="./favicon.ico">
网站TDK
其实TDK就是网站的标题(title)、描述(description)和关键词(keyword),TDK是网站很重要的元素,他是网络爬虫爬取你的网站之后最先看到的东西,所以设置好TDK对网站的优化是很关键的。
title(网站标题)
-
是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
-
通常是网站名(产品名)- 网站的介绍 (尽量不要超过30个汉字)
<title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物!</title>
description(网站描述):
简要说明我们网站主要是做什么的。
description 作为网站的总体业务和主题概括,多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话:010…”之类语句。
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
keywords (关键字)
-
页面关键词,是搜索引擎的关注点之一。
-
keywords 最好限制为 6~8 个关键词,关键词之间用英文逗号隔开,采用 关键词1,关键词2 的形式
<meta name= "keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
-
注:对于我们前端人员来说,我们只需要准备好这三个标签,具体里面的内容,有专门的 SEO 人员准备
-
盒子阴影
-
box-shadow
-
-
box-shadow: h-shadow v-shadow blur spread color inset;
-
h-shadow 必需,水平阴影的位置,允许负值;
-
v-shadow 必需,垂直阴影的位置,允许负值;
-
blur 可选,模糊距离;
-
spread 可选,阴影的尺寸;
-
color 可选,阴影的颜色;
-
inset 可选,将外部阴影改为内部阴影
-
-
复合写法:box-shadow: 10px 10px 10px gold,-10px -10px 10px blue ,20px 20px 10px purple;
文字阴影
-
text-shadow
-
-
text-shadow: h-shadow v-shadow blur color;
-
h-shadow 必需,水平阴影的位置,允许负值;
-
v-shadow 必需,垂直阴影的位置,允许负值;
-
blur 可选,模糊距离;
-
color 可选,阴影的颜色;
-
复合写法: text-shadow: 0 0 3px gold ,0 0 5px gold ,0 0 10px gold ,0 0 15px gold,0 0 20px gold;