建站流程总结

新建站点文件夹

1. 文件夹名称不能是中文命名
2. 文件夹根目录里面至少包含了css、js、images三个子文件夹
3. 文件里根目录里面至少应该有index.html

设置网页图标

1. 设置favorites.icon网页图标
   注意点:favorites图标就是显示在网页选项卡和收藏夹中的图标
2. 把制作好的网页图标上传到favicon.ico在线制作网站，选择尺寸，然后把图标文件下载到本地
   3.把图标命名为favicon.ico并且放在网页站点文件夹的根目录中
   4.在head标签中添加

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

添加网站优化的三大标签

1. 网页title标题
   • 注意点:title是网页中第一重要的标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。
   • 标题长度:Google 35个中文，baidu 28个中文
   • 格式:网站名(产品名) - 网站的介绍
     例如以下的网站格式:

<title>淘宝网 - 淘！我喜欢</title>
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<title>苏宁易购(Suning.com)-送货更准时、价格更超值、上新货更快</title>
<title>国美(GOME)-综合网购商城，正品低价、品质保障、快速送达、安心服务！</title>
/* 在title中 ， 最前面出现的词汇，权重就越高*/

2. Keywords 关键字

• Keywords是页面的关键字，是搜索引擎重点关注点之一
  • keywords应该限制在6~8个关键之以内，如果是电商网站的话，那么可以适量多几个
    例如:

<meta name="keywords" content="苏宁易购网上商城,苏宁电器,Suning,手机,电脑,冰箱,洗衣机,相机,数码,家居用品,鞋帽,化妆品,母婴用品,图书,食品,正品行货"/>

3. Description 网站说明

• 对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的mata标签中的描述部分作为搜索结果的。
• "内容摘要"，就是简要说明我们的网站主要是做什么的
• 补充title和keywords中未能充分表述的说明
• 字符数含空格在内不要超过 120 个汉字
• 描述中出现关键词，与正文内容相关，这部分内容是给用户看的，所以要写的很详细，让用户感兴趣，吸引用户点击
  例如:

<meta name="description" content="苏宁易购-综合网上购物平台，商品涵盖家电、手机、电脑、超市、母婴、服装、百货、海外购等品类。送货更准时、价格更超值、上新货更快，正品行货、全国联保、可门店自提，全网更低价，让您放心去喜欢！" />

4. 导入CSS Rest 类库，将所有的浏览器的自带样式重置掉，保持各浏览器的一致性

推荐两种方式:

• . reset.css
  • 无论有没有用，全部默认的样式都清空
• . normalize.css
  • 保护有用的浏览器默认样式，而不是完全去除
  • 一般化的样式，为大部分的html元素提供
  • 修复浏览器自身的bug并且保证各浏览器的一致性
  • 优化CSS可用性:用一些小技巧
  • 点击查看normalize.css官网文档

5.设置全局样式
例如:

body{
    font: 12px/1.5em "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB";
    color: #999;
    background: #f2f2f2;
}

以上步骤完成之后，一个网站的基本配置已经搞定了

优雅降级

一开始就在高级浏览器上构建完整的功能，然后再针对低版本的浏览器进行兼容

渐进增强

针对低版本的浏览器先进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能，达到更好的用户体验

个人建议

现在开发应用优雅降级的会比较多一些，因为现在很少人用ie之类的低版本浏览器了，所以我们直接构建好最完整的界面，然后根据实际情况去适配需要的浏览器。

• 最常用的修补手法就是为了低版本的浏览器单独制作一个页面，提示使用高级浏览器

例如:

www.zhihu.com
www.jd.com
www.taobao.com