静态 网站 基本搭建步骤和要素

一、主体搭建

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（首页）

1.2、设置favorites icon网页图标

 显示在网页选项卡和收藏夹中的图标，我们称之为favicon。

 一般获取网址为http://www.官网域名.com/favicon.ico

(a)、生成网页图标，放在站点根目录下

(b)、在head标签中添加:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

苹果设备需要额外添加：
apple-touch-icon:是苹果私有的属性（只在苹果浏览器中有效）
作用：指定将网页保存到主屏幕上的图标

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon114.png">

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.移动端适配（不用移动端的时候可不设置）

适配移动端可以查看：前端页面适配移动端常用方案

<!--移动端适配-->
    <script>
        let scale = 1.0 / window.devicePixelRatio;
        let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scaleable=no">`;
        document.write(text);//解决物理像素同逻辑像素不同的问题
        // document.documentElement;返回整体html
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";//可视区域一份的大小
    </script>

4.导入CSS

Rest类库，将所有的浏览器的自带样式重置掉，保持各浏览器渲染的一致性

4.1、reset.css

• 无论是否有用，一律清零

4.2、normalize.css

• 一般化的样式：为大部分HTML元素提供
• 修复浏览器自身的bug并保证各浏览器的一致性
• 优化CSS可用性：用一些小技巧
• 解释代码：用注释和详细的文档

5.设置全局通用字体行高

一般设计师提供设计图片的时候都会说明，整体网页中用的字体等信息。

body{
    /*
    字体大小：12像素，
    行高：1.5em
     */
    font: 12px/1.5em "Microsoft YaHei UI", Tahoma, Arial,"Hiragino Sans GB";
    color: #999;
    background: #f2f2f2;
}

6.思考：优雅降级和渐进增强（兼容性处理）

6.1、渐进增强

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

6.2、优雅降级

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

建议：现在微软都抛弃了ie浏览器转而支持edge，所以大多数情况下没有必要再时刻想着低版本浏览器。可以一开始就构建完整的效果，根据实际情况向下兼容低版本浏览器的问题。

• 修补时最常见的做法就是为低版本浏览器，单独制作一个跳转页，告诉用户升级浏览器。