字体图标
- 单张图片缺点
- 1.1会增加访问时请求次数
- 1.2体积相对较大, 传输速度较慢
- 1.3图片变大失真
- 精灵图:
- 2.1适当减少访问时请求次数
- 2.2体积相对较大, 传输速度较慢
- 2.3图片变大失真
- 字体图标
- 3.1可以做出跟图片一样效果
- 3.2本质是文字，可以很随意改变颜色、大小等等...
- 3.3本身体积更小，传输速度更快
- 3.4几乎支持所有的浏览器
- 3.5移动端设备必备
字体图标使用
- 1.字体图标使用步骤
1.1设计师设计svg格式图标
1.2上传生成字体包
1.3下载兼容字体包
1.4使用字体包
具体使用方式参考网站: http://www.iconfont.cn/
编写网站的基本步骤
1.新建站点文件夹
- 1.1文件夹名称不能是中文
- 1.2里面至少应该包含css/js/images三个子文件夹
- 1.3里面至少应该包含index.html文件
2.设置favorites icon网页图标
- 显示在网页选项卡和收藏夹中的图标, 我们称之为favicon
- 2.1生成网页图标
搜索ico图标生成--上传图标--下载生成好的图标 - 2.2放到站点目录根目录下
- 2.3在head标签中间添加
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>引入favicon图标
3.网站优化三大标签
-
3.1网页title标题
- title是网页中第一重要的标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。
- 标题长度: Google 35个中文, baidu 28个中文
- 格式: 网站名（产品名）- 网站的介绍
<title>淘宝网 - 淘！我喜欢</title>
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> - 特点: 越先出现的词语, 权重越高
-
3.2Keywords 关键字
- Keywords是页面关键词，是搜索引擎重点关注点之一。
- Keywords应该限制在6～8个关键词左右，电商类网站可以多几个。
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
- 3.3Description网站说明
- 对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述部分作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的
- Description作用
- 补充在 title 和 keywords 中未能充分表述的说明.
- 字符数含空格在内不要超过 120 个汉字
- 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
4.导入CSS Rest 类库清除默认样式
4.1 reset.css
无论是否有用, 一律清零
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css4.2 normalize.css
保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来
使用网址: https://github.com/necolas/normalize.css/
https://necolas.github.io/normalize.css/
5.兼容性选择
5.1渐进增强
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验5.2优雅降级
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容-
5.3个人建议:
- 现在微软都抛弃了ie浏览器转而支持 edge了，所以我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题
- 修补时现在最常见的做法就是为低版本浏览器 单独制作一个跳转页面
