19-字体图标和编写网站基本步骤

字体图标

• 单张图片缺点
  • 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.css

• 4.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了，所以我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题
  • 修补时现在最常见的做法就是为低版本浏览器 单独制作一个跳转页面