一、主体搭建
1.建立站点文件夹
1.1、在项目的根目录下建立如下文件夹：
注意：
1.文件夹名称不能是中文
2.里面至少应该包含css/js/images三个子文件夹
3.里面至少应该包含index.html文件/
- 项目根目录
- css（文件夹）
- base.css(放css的工具类)
- index.css
- normalize.css（或者cssreset-min.css，用于清除默认样式）
- font（文件夹，字体图标等）
- images（文件夹，资源图片）
- js（文件夹）
- favicon.ico（选项卡标题旁边的小图标）
- index.html（首页）
- css（文件夹）
1.2、设置favorites icon网页图标
显示在网页选项卡和收藏夹中的图标，我们称之为favicon。
一般获取网址为http://www.官网域名.com/favicon.ico
(a)、生成网页图标，放在站点根目录下
(b)、在head标签中添加:
2.添加网站优化的三大标签
2.1、网页title标题
- title是网页中第一个重要的标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。
- 标题长度：Google 35个中文，baidu 28个中文。
- 格式：网站名（产品名）——网站的介绍。
- 特点：越先出现的词语，权重越高。
<title>淘宝网 - 淘！我喜欢</title>
<title>京东（JD.COM）- 正品低价、品质保障、配送及时、轻松购物！</title>
<title>苏宁易购（Suning.com）（JD.COM）- 送货更准时、价格更超值、上新货更快</title>
2.2、Keywodrs 关键字
Keywodrs是页面关键词，是搜索引擎重点关注点之一。
- Keywodrs应该限制在6~8个关键词左右，电商类网站可以多几个。企业中一般有专业的分析人员分析高频关键词，提供给开发人员。
- 具体在浏览器中的显示优先级别同站点的优化，和是否付费有关。
<meta name="keywords" content="苏宁易购网上商城,苏宁电器,Suning,手机,电脑,冰箱,洗衣机,相机,数码,家居用品,鞋帽,化妆品,母婴用品,图书,食品,正品行货">
2.3、Description 网站说明
对于关键词的作用明显降低，很多搜索引擎，仍然大量采用网页的meta标签中描述部分作为搜索结果的“内容摘要”，就是简要说明我们网站主要是做什么的。
- 补充在title和Keywodrs中未能充分表述的说明
- 字符数含空格在内不要超过120个汉字
- 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣，吸引用户点击
<meta name="description" content="苏宁易购-综合网上购物平台，商品涵盖家电、手机、电脑、超市、母婴、服装、百货、海外购等品类。送货更准时、价格更超值、上新货更快，正品行货、全国联保、可门店自提，全网更低价，让您放心去喜欢！">
3.导入CSS
Rest类库，将所有的浏览器的自带样式重置掉，保持各浏览器渲染的一致性
3.1、reset.css
- 无论是否有用，一律清零
3.2、normalize.css
- 一般化的样式：为大部分HTML元素提供
- 修复浏览器自身的bug并保证各浏览器的一致性
- 优化CSS可用性：用一些小技巧
- 解释代码：用注释和详细的文档
4.设置全局通用字体行高
一般设计师提供设计图片的时候都会说明，整体网页中用的字体等信息。
body{
/*
字体大小：12像素，
行高：1.5em
*/
font: 12px/1.5em "Microsoft YaHei UI", Tahoma, Arial,"Hiragino Sans GB";
color: #999;
background: #f2f2f2;
}
5.思考：优雅降级和渐进增强（兼容性处理）
5.1、渐进增强
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能，以达到更好的用户体验。（低版本看基础功能，高版本看完整功能）
5.2、优雅降级
开始就在高级浏览器上构建完整的功能，然后再针对低版本浏览器进行兼容。
建议：现在微软都抛弃了ie浏览器转而支持edge，所以大多数情况下没有必要再时刻想着低版本浏览器。可以一开始就构建完整的效果，根据实际情况向下兼容低版本浏览器的问题。
- 修补时最常见的做法就是为低版本浏览器，单独制作一个跳转页，告诉用户升级浏览器。
