2020-11-09 ico图标

一.ico图标
使用ico图
—首先把favicon.ico图标放入跟目录下
—再在html和head之间引入代码
如：

<link rel="shortcut icon" href="favicon.ico" type="image/x-ico"/>

二.网页优化三大标签
第一个：
title（网站名/产品名+网站介绍）
如：

<title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>

description（网站说明）
如：

<meta name="description" content="JD.com-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验！">

keyword（关键词）
一般6-8个
如：

<meta name="Keywords" content="网上购物，网上商城，手机，笔记本，电脑，MP3，CD，VCD，DV，相机，数码，配件，手表，存储卡，品优购"/>

三.字体图标
在icoMoon网站中下载想要图标，把压缩包里面的fonts文件放到根目录下
再进行引用，在网站图标尾复制粘贴（看不见）到Html标签中

如：
html中：

<span></span>

在css中:
@font-face {
font-family:‘icomoon’;
src:url(‘fonts/icomoon.eot?7kkyc2’);
font-weight:normal;
font-style:normal;
}
span {
font-family:‘icomoon’;
font-style:50px;
color:red;
}

追加字体图标：
点击import icons把压缩包里面的selection.json新上传

四.logo优化
logo里面放了h1标签，为了提权
h1里面放了链接，可以返回首页
链接里面放了文字，为了搜索引擎收录网页关键字
同时，用text-indent和overflow或者font-size隐藏文字
例如：
html:

 <div class="logo">               
  <!--h1里面放链接，使得用户点击链接可以返回首页，要大小和颜色-->           
       <h1>              
             <a href="品优购.html">品优购</a>     
       </h1>     
 </div>

css:

.logo a {   
display: block; 
   /*隐藏a中的品优购三个字*/  
overflow: hidden;  
width: 175px;   
height: 56px; 
background:url(../images/logo_03.png) no-repeat;    
text-indent: -999px;
}