DAY 02 品优购项目

学习目标：学会引入ico图标；简单看懂网站优化的三个标签；能够使用字体图标

网站优化三大标签

SEO是Search Engine Optimization的缩写，中文直译为‘搜索引擎优化’

常见的搜索引擎是百度雅虎谷歌搜狗

SEO具体指的是对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化和站外优化，进而提高网站的关键词排名以及公司产品的曝光度。简单来讲就是对于该网站的描述信息，将其建设成方便搜索引擎推荐的样式以及内容。

三大标签：title description keyword

1. 网页 title 标签

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

标题长度

Google（70KB），35个文字 Baidu（56KB），28个文字

关键字分布

对于关键词来说，最先出现的词语权重更高

关键字词频

一般来说，主关键词出现三次，辅关键词出现一次

建议：

首页标题：网站名（产品名）-网站介绍

eg：

品优购-综合网购首选-正品低价、品质保障、配送及时！

代码位置主要放置于head

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

2. Description 网站说明

网站说明的作用相对于title明显降低，但是很多搜索引擎，仍采用网页的mata标签中描述部分作用作为搜索结果的内容摘要,简要介绍说明该网站主要做什么。

Description作为网站的总体业务和主题概括。

<meta name=''description'' content=''品优购-专业的综合网上购物商城，销售家电、数码通讯、电脑、家具百货、服务服饰！''/>

注意：

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

2、遵循简短原则，字符数含空格在内不超过120个汉字。

3、补充在title和keywords中未能充分表述的说明。

4、用英文逗号关键词1,关键词2

3、 Keywords 关键字

keyword是页面关键词，搜索引擎关注点之一。限制在6-8个关键词左右，电商类网站可以适当增加一些。

<meta name='keywords' content='网上购物，手机、笔记本、配件'

4、总结

1、网站优化方便搜索引擎查找到，优化内容包括三大标签。

2、大致了解规范即可。

3、主要任务是写出三大标签，把优化人员给我们的内容，添加到里面。

字体图标

字体图标主要是为了解决使用图片所带来的缺点，例如图片增加整体文件的大小，增加许多额外的HTTP请求，大大降低网页性能，并且图片的大小缩放会造成失真，此时出现字体图标（iconfont）。

1、字体图标的优点

本身体积很小，但是携带的信息没有削减；

做出与图片一样可以做的事情；

支持所有浏览器

2、字体图标使用流程

1、 UI人员设计字体图标效果图（svg）

2、前端人员上传生成兼容性字体文件包

3、前端人员下载兼容字体文件包到本地

4、把字体文件包引入到HTML页面中

3、设计字体图标

UI设计人员在illustrator或Sketch这类矢量图形软件里创建icon图标，保存为svg格式，给前端人员。

4、上传生成字体包

UI设计人员给我们svg文件时，我们要将其转换成我们页面所需要的字体文件，字体文件需要生成兼容性的各个浏览器。

推荐网站：

[]: icomoon.io

icomoon字库

第一个自定义图标字体生成器，允许用户选择所需要的图标并转换成一种字型，唯一缺点在于是国外服务器，打开网速较慢。

[]: www.iconfont.cn/
阿里icon font字库

阿里妈妈M2UX的一个字体图标字库，包含淘宝图标库和阿里妈妈图标库，可以使用AI制作图标上传生成。

5、下载兼容字体包

刚刚上传完毕，网站会给我们把UI做的svg图片转换为我们需要的字体格式，下载下来即可。

也可以直接在上面的网站上进行下载（下载代码）使用。

6、字体引入到HTML

将代码压缩包下载好，解压之后也不要将压缩包删除，打开压缩包可以看到fonts文件夹，在HTML中引入字体图标之前，先将fonts文件夹放入根目录中，之后创建一个字体的html文件，需要注意的是fonts和最新创建的html文件是同一级的。

方式一：利用unicode

1、在html标签内添加结构

将压缩包中的demo文件打开，在body中引入字体图标的标签结构，即字体图标的后面符号

<span> </span>

2、在样式中声明字体：告诉别人我们自己定义的字体（注意字体文件路径的问题）

@font-face {
/*注意字体名称以及路径*/
 font-family:'icomoon';
 src url('font/icomoon.eot?7kkyc2');
 src url('fonts/icomoon.eot?7kkyc2') format('embedded-opentype'),
   url('fonts/icomoon.eot?7kkyc2') format('turetype'),
   url('fonts/icomoon.eot?7kkyc2') format('woff'),
   url('fonts/icomoon.eot?7kkyc2') format('svg'),
 font-weight:normal;
 font-style:normal;
}

3、给盒子使用字体

span {
         font-family:'icomoon';
}

方式二：利用font class

font-class是unicode使用方式的一个变种，解决Unicode书写不直观、语意不明确。

font-class可以轻松辨别引入的字体图标是什么，代码更加简洁，并且在之后替换图标时，只需要修改class中的unicode引用即可。

1、在head中引入font-class代码

<link rel='stylesheet' href='font/iconfont.css'>

2、挑选相应图标并获取类名，再次应用于页面

对于font-class方法来说，icon的名称更明显地看出是哪个图标

<span class='iconfont icon-xxx'></span>

7、追加字体图标

当想要追加字体图标时，主要使用的是文件夹中的.json文件，直接在图标中导入。

常见字体格式

对于不同浏览器而言，其所支持的字体格式是不同的。

1、 TureType（.ttf）格式

.ttf字体是Windows和Mac最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4。0+、Safari3.1+、Opera10.0+、IOS Mobile、Safari4.2+；

2、 Open Type（.otf格式）

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、IOS Mobile、Safari4.2+；

3、 Web Open Font Format（.woff格式）

woff字体是Web字体中最佳格式，是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、FireFox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

4、 Embedded Open Type（.eot格式）

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4.0+；

5、 SVG（.svg格式）

.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4.0+、Safari3.1+、Opera10.0+、IOS Mobile Safari3.2+

品优购首页布局

命名集合

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwords
导航	nav
导航左侧	dorpdown 包含.dd .dt
导航右侧	navitems

1、 shortcut制作

通知栏的盒子命名为shortcut 快捷导航的意思，注意：这里给行高，可以继承给里面的子盒子
里面包含版心的盒子
版心盒子里面包含1号左侧盒子左浮动
版心盒子里面包含2号右侧盒子右浮动

对于网站来说，快捷导航栏是固定的，所以对于快捷导航栏来说，其样式可以直接写入common.css，之后在html中直接引入即可

<body>
    <!--顶部快捷导航START-->
    <div class='shortcut'>
         <div class='w'> 123 </div>
    </div>
    <!--顶部快捷导航END-->
</body>

前端项目01-品优购项目 DAY02