CSS（十二）--ico图标、优化三大标签、字体图标、logo优化、书写顺序

1.网站ico图标

使用ico图标：在title栏显示

1.1使用ico图标

• 首先把favicon.ico 这个图标放到根目录下。

• 再html里面， head 之间 引入 代码。

    	head标签中：
    		<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>    
  

1.2制作ico图标

• 首先把我们想要的切成图片。
• 要把图片转换为 ico 图标，我们借助于第三方转换网站： http://www.bitbug.net/。 比特虫

2.网站优化三大标签

• SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”！
• 常见的搜索引擎，比如百度，谷歌，雅虎，搜狗等等…
• SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是，把产品做好，搜索引擎就会介绍客户来。

2.1网页title标题

title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。<title>内容</title>

内容：

• 标题不能太长。（谷歌（70kb，35个中文；百度（56kb,28个中文）））
• 最先出现的词语权重越高
• 主关键词出现3次，辅关键词出现一次

2.2 description 网站说明

对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述部分作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的。<meta name="description" content="   ......  " />

注意点：

• 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击。

• 同样遵循简短原则，字符数含空格在内不要超过 120 个汉字。

• 补充在 title 和 keywords 中未能充分表述的说明

• 用英文逗号 关键词1,关键词2

    小米网：<meta name="description" content="小米商城直营小米公司旗下所有产品，囊括小米手机系列小米MIX、小米Note 2，红米手机系列红米Note 4、红米4，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。" />
  

2.3Keywords 关键字

 Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许。<meta name="Keywords" content="   .....  " />
 小米网：<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />

2.4总结

1. 网页要做的优秀，符合搜索引擎的要求，才可以让搜索引擎优先显示我们的网页。 所以我网站要做很多的优化， 其中就有这三大标签。
   2…

3.字体图标

  使用：（一定注意字体文件路径的问题）
 @font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?7kkyc2');
   src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
   url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
   url('fonts/icomoon.woff?7kkyc2') format('woff'),
   url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
给盒子使用字体：
span {
	font-family: "icomoon";
}

推荐网站： http://icomoon.io
阿里icon font字库: http://www.iconfont.cn/

4.Logo优化

• logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要

• h1里面在放一个链接a，可以返回首页的， 给链接一个 大小 和 logo 的背景图片

• 链接 里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不要显示出来

• 要用 text-indent 移到盒子外面 （text-indent: -9999px) :

•  然后**overflow:hidden**  淘宝的做法
  

• 直接给**font-size: 0;**  就看不到文字了，  (京东的做法)
  

• 最后给 连接一个 title 这样鼠标放到 logo 上， 就可以看到提示文字了

5.书写顺序

建议遵循以下顺序：

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …