html + css 面试

对WEB标准以及W3C的理解与认识

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索机率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

1. 为什么将css引入放头部，js引入放后面？
   浏览器从上到下依次解析html文档。将css文件放到头部，css文件可以先加载。避免先加载body内容，导致页面一开始样式错乱，然后闪烁。
   将javascript文件放到底部是因为：若将javascript文件放到head里面，就意味着必须等到所有的javascript代码都被下载、解析和执行完成之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟，窗口一片空白。

2. style 标签写在 body 后和 body 前有什么区别？
   页面加载自上而下，当然是需要先加载样式。
   写在body标签后，由于浏览器以逐行方式对HTML文档进行解析，当解析写在尾部的样式表会导致浏览器停止之前的渲染，等待加载且解析样式表后才重新进行渲染，这样可能导致留白现象（所以最好将style标签写在body前）。

---

---

"流"概念

‘流’是css的一种基本定位和布局机制，HTML默认的布局机制就是’流布局’,是一种自上而下（例如块级元素div），从左到右排列的布局方式。

---

---

盒模型

1. 两种类型 & 区别
   IE盒模型（怪异盒模型）:
   width = border + padding + content;
   一个块的宽度 = width + margin。

   W3C盒模型（标准盒模型）:
   width = content；
   一个块的宽度 = width + padding + border + margin。

2. 切换方式

   box-sizing: border-box; // IE盒模型标准
   box-sizing: content-box; // W3C盒模型标准
   

3. margin | padding 分别适用于什么场合
   margin：在border外侧需要留空
   padding：在border内侧需要留空

   1. 浏览器兼容性问题（了解）
      在IE5.X,IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度，通过改用padding或者指定盒子为display:inline就可以解决。

---

---

HTML

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

---

文档解析类型

1. HTML存在两种文档类型
   怪异模型（默认）：浏览器按照自己的方式解析
   标准模式：按照W3C标准

2. 如何避免浏览器的怪异模式?
   通过声明文档的解析类型

---

HTML语义化

1. Html语义化可以使页面更加结构化，提供了一系列具有结构意义的标签，例如header,footer等，让结构更加清晰，有利于浏览器的解析。
2. 即使在没有css样式的情况下，页面也会以一种文档结构来显示，更加易于阅读。
3. 由于搜索引擎的爬虫也会依赖于Html标记来确定上下文和各个关键字的权重，因此有利于SEO。
4. Html语义化更便于阅读，维护和理解。

---

非替换元素&替换元素

可替换元素：其内容是通过标签类型以及其属性值来决定的。例如：iframe、video、img。
非可替换元素：其内容由其标签包裹内容决定。例如div、p、span、ul、li、ol。

---

块级元素和行内元素

行内元素：

1. 左右两边都可以有元素，和其他元素在一行上。
2. 不可以设置宽高，其宽度就是内容的宽度。对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，但是padding上下对其他元素无影响。
3. 常见有：span、a、img(行内替换元素)

块级元素：

1. 默认独自占据一行，左右两边都没有元素。
2. 可以设置宽高，在不设置宽度的情况下，默认为父元素的宽度一致。
3. 常见有：h1~h6、p、div

---

HTML5

Html5新特性

1. 语义化标签： header、footer、article、aside、caption、nav等
2. 画布canvas
3. SVG绘图
4. 视频video和音频audio
5. input增强型表单控件：calendar,date,time,email,url,search
6. 本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除。
7. WebWorker、WebSocket

Html5移除的元素(了解)

1. 纯表现的元素：basefont,big,center,font,s,strike,tt,u;
2. 对可用性产生负面影响的元素：frame,frameset,noframes;

---

Html5哪些标签可以优化SEO

1. title
2. Meta 详情
   Meta提供给页面一些元信息（名称/键值），它有利于SEO。
   属性：

属性	描述
name	用于描述网站
http-equiv	没有name时，可以采用这个属性的值（content-type,expires(期限),refresh,set-cookie,content属性关联到http请求头）
content	名称/值 中的值，可以是任意有效字符串
scheme	用于指定要用来翻译属性值的方案

3. 语义化标签： header、footer、article、aside、caption、nav等。

---

iframe

iframe 是一种内联框架，也是一种很常见的网页嵌入方式。
优点：

1. iframe能够原封不动的把嵌入的网页展示出来
2. 如果有多个网页引用iframe,只需要修改iframe的内容
3. 如果遇到加载缓慢的第三方内容如图标和广告，可以由iframe来解决

缺点：

1. 会产生很多页面，不容易管理，同时造成onload阻塞
2. iframe框架结构有时让人感到迷惑，用户体验感差
3. 代码结构变得复杂，影响搜索引擎
4. iframe框架页面会增加服务器的http请求

---

Html 提供哪些 Api

1. 全屏滚动 Fullscreen API
2. 页面可见性 Pge Visibility API
3. 访问摄像头和麦克风 getUserMedia API
4. 电池 Battery API
5. 预加载网页内容 Link prefetching

---

---

CSS

CSS引入方式

Css引入方式有4种 内联、内嵌、外链、导入。

通过link和@import引入有什么区别？

1. 外链link 除了可以加载css之外,还可以定义rss、rel等属性，没有兼容性问题，支持使用javascript改变样式。
2. @import 是css提供的，只能用于加载css，不支持通过javascript修改样式。
3. 页面被加载的时候，link会被同时加载，而@import则需等到页面加载完后再加载，可能出现无样式网页。

---

CSS选择器

• CSS选择器有哪些? 11个

id选择器、类选择器、标签选择器、相邻选择器(h1+p)、子选择器(ul>li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel = "XXX"])、伪类选择器、伪元素选择器、分组选择器

• 伪类选择器

  1. CSS3新增伪类
     x:first-of-type：选择属于其父元素的首个 元素的每个 元素
     x:last-of-type：选择属于其父元素的最后一个 元素的每个 元素
     x:only-of-type：选择属于其父元素唯一的 元素的每个 元素
     x:only-child：选择属于其父元素的唯一子元素的每个 元素
     x:nth-child(1)：选择属于其父元素的第一个子元素的每个 元素
     等等

  2. Css伪类与伪元素的区别
     伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性。
     与伪类针对特殊状态的元素不同的是，伪元素对元素中的特定内容进行操作。但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

  3. 用户操作伪类
     推荐书写样式顺序：link、visited、focus、hover、active

• 伪元素选择器

  :first-line、:first-letter、:before、:after、:enabled、:disabled、:checked

  1. Css3新增伪元素
     :enabled：每个已启用的元素（多用于表单元素 例如input）
     :disabled：控制表单控件的禁用状态
     :checked：单选框或复选框被选中
     :before：在元素之前添加内容（可用来做清除浮动）
     :after：在元素之后添加内容

---

• 可继承 & 不可继承 的样式

1. 可继承的样式：font-size, font-family, color...
2. 不可继承的样式：border, padding, margin, width, height...

---

• Css选择器优先级 & 权重

1. 优先级：!important > 内联style > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器
2. 权重：二进制规则计算，各选择器权值总览
   内联style，权值：1000
   ID选择器，权值：0100
   类选择器，权值：0010
   标签选择器 & 伪元素选择器，权值：0001
   通配符、子选择器、相邻选择器等，权值：0000
   继承样式没有权值
   如果层级相同，则向后比较，层级不同时，层级高的权重大

---

• 浏览器如何解析Css选择器？

css选择器的解析是从右向左解析，为了避免对所有元素进行解析

---

CSS3新特性 10个

1. 各种css选择器
   1）E:last-child 匹配父元素的最后一个子元素E。
   2）E:nth-child(n) 匹配父元素的第n个子元素E。
   3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

2. 圆角border-radius

3. 多列布局 详情

4. 文本效果
   @Font-face 特性

5. 线性渐变
   linear-gradient(left, red, blue)

6. transform 样式
   translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
   rotate()：元素顺时针旋转给定的角度。
   scale()：元素的尺寸会增加或减少。
   skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
   matrix()：把所有 2D 转换方法组合在一起

7. 过渡 transition: property duration timing-function delay;
property：规定设置过渡效果的 CSS 属性的名称。
   duration：规定完成过渡效果需要多少秒或毫秒。
   timing-function：规定速度效果的速度曲线。
   delay：定义过渡效果何时开始。

8. 动画 animation

9. flex布局 详情：见文本的‘布局–flex布局’

10. 媒体查询 联系文本的“布局–响应式布局–原理”

    @media screen and (max-width: 300px) {
        body {background-color:lightblue;}
    }
    

---

常见的Css兼容性问题 4个

1. 不同浏览器的标签默认的padding/margin不同，通过初始化css样式可以解决。

   *{
       margin:0;
       padding:0px;
   }
   

2. IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性。

3. Chrome中文界面下默认会将小于12px的文本强制为12px。
   通过加入css属性 -webkit-text-size-adjust：none;可以解决，或者使用transform中的scale()缩放属性

4. 超链接访问过后hover样式就不出现，因为被点击访问过的超链接样式不再具有hover和active了。
   解决方法是改变css属性的排列顺序：
   a:link{} → a:visited{} → a:focus → a:hover{} → a:active{}

---

Css优化，如何提高性能 6个

1. 尽量将样式写在单独的css文件里面，在head元素中引用
2. 不使用@import
3. 避免使用复杂的选择器，层级越少越好
4. 精简页面的样式文件，去掉不用的样式
5. 利用CSS继承减少代码量
6. 慎重使用高性能属性：浮动、定位；

---

display:none 与 visibility:hidden 的区别

display:none 隐藏对应的元素，在文档布局中不再分配空间（导致重排）
visibility:hidden 隐藏对应的元素，在文档布局中保留原来的空间（导致重绘）

---

position属性

1. relative：相对定位，相对于自身位置进行定位
2. absolute：绝对定位，相对于position不为static的第一个父级元素进行定位
3. fixed：固定定位。相对于浏览器窗口进行定位
4. inherit：继承父级元素position属性值
5. static：默认值，即没有定位，仍为文档流
6. sticky：粘性定位详情
   设置position:sticky同时给一个(top,bottom,right,left)之一即可
   使用条件：
   1）父元素不能overflow:hidden或者overflow:auto属性。
   2）必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
   3）父元素的高度不能低于sticky元素的高度
   4）sticky元素仅在其父元素内生效

---

overflow属性

• scroll：必定出现滚动条
• auto：子元素内容大于父元素时出现滚动条
• visible：溢出的内容出现在父元素之外
• hidden：溢出时隐藏

CSS控制文字，超出部分显示省略号

---

如何水平并垂直居中一张背景图？

设置属性 background-position:center;

---

图形题：纯Css创建一个三角形

{
    width:0px;
    height:0px;
    border-top:10px solid transparent;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid #000;
}

---

---

BFC

• 触发BFC方式 4个

  1. float的值不是none。
  2. position设置为 fixed 或者 absolute
  3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  4. overflow的值不是visible。

• BFC的布局规则 6个

  1. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  2. 内部的Box会在垂直方向，一个接一个地放置。
  3. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
  4. 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  5. BFC的区域不会与浮动盒子（float box）重叠。
  6. 计算BFC的高度时，浮动元素也参与计算。

• BFC的作用

  1. 解决外边距合并问题
  2. 自适应两栏布局
  3. 清除元素内部浮动。 联系：文本的‘布局–浮动布局–清除浮动’

---

---

居中

水平居中

• 行内元素：text-align:center
• 块级元素
  • width确定：
    1. width确定，使用margin实现：margin:0 auto
    2. 绝对定位 + margin-left：负宽度/2 （前提父元素设置相对定位）

       {
           width:100px;
           position:absolute;
           left:50%;
           margin-left:-50px
       }
       

  • width未知：

    1. display:table; margin: 0 auto;

    2. display:inline-block; text-align:center;

    3. 绝对定位 + transform

       {
           position: absolute;
           left: 50%;
           transform: translateX(-50%);
       }
       

    4. 万能flex布局（个人推荐）

       {
           display:flex;
           justify-content:center;
       }
       

垂直居中

1. line-height: 盒子高度;适合纯文字类内容居中

2. 父元素设置相对定位，子元素设置绝对定位，标签通过margin实现自适应居中

3. 万能flex

   {
       display:flex;
       align-items:center;
   }
   

4. 父元素设置相对定位，子元素设置绝对定位，通过transform实现居中。

5. 父元素设置display:table + 子元素设置vertical-align:middle。

垂直水平居中

1. flex

   {
       display:flex;
       justify-content:center; 
       align-items:center; 
   }
   

2. position + transform （宽高未知）

   .parent{
       position:relative;
   }
   .child{
       position: absolute;
       left: 50%;
       top: 50%;
       transform: 	translate(-50%,-50%);
   }
   

3. position + margin （宽高确定）

   .parent{
       position: relative;
   }
   .child{
       width: 100px;
       height: 100px;
       position: absolute;
       left: 50%;
       top: 50%;
       margin-left: -50px;
       margin-top: -50px;
   }
   

4. 绝对定位设置各个方向为0，通过margin:auto实现垂直水平居中（宽高已知）

   .parent{
       position: relative;
   }
   .child{
       width: 100px;
       height: 100px;
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       margin: auto;
   }
   

---

---

布局

浮动布局

当元素设置了浮动后，可以向左向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。
浮动元素脱离了正常文档流，可以想象成浮动元素浮在了正常文档流上方，文档流不再有这个元素存在。

• 优点
  在图文混排的场景下十分适用，可以实现文字环绕图片的效果，当元素浮动后，它有着块级元素的特点（可设置宽高），但它与inline-block存在差别。
  float可以在横向排序上设置方向，而inline-block不可。
  inline-block会出现存在空白间隙情况。

• 缺点
  float致使元素脱离文档流，若父元素高度自适应，则会引起父元素高度塌陷。

  • 清除浮动4种方式

  1. 额外标签法（不推荐）：在最后一个浮动标签后，新加一个标签，给其设置clear：both;。

  2. 父级添加overflow属性（不推荐）：
     父元素添加overflow:hidden。
     原理：触发BFC。（联系：文本的‘BFC–BFC的作用’）

  3. 使用after伪元素清除浮动（推荐使用）

     .clearfix:after{
     	//伪元素是行内元素 正常浏览器清除浮动方法
         content: "";
         display: block;
         height: 0;
         clear:both;
         visibility: hidden;
     }
     .clearfix{
         *zoom: 1; 
         //ie6清除浮动的方式，前面加*是hack写法，*号只有IE6-IE7执行，其他浏览器不执行
         //ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
     }
     

  4. 使用before和after双伪元素清除浮动

     .clearfix:after,.clearfix:before{
         content: "";
         display: table;
     }
     .clearfix:after{
         clear: both;
     }
     .clearfix{
         *zoom: 1;
     }
     

• 设置元素浮动后，display会变成block

---

flex布局

详情
该布局提供了一种更高效的方法对容器中的项目进行布局、对齐和分配空间，他没有方向上的限制，可以由开发人员自由操作。

• 使用场景： 移动端开发，安卓，iOS
• 容器属性：
  • flex-direction: row | row-reverse | column | column-reverse;：决定主轴方向（容器排列方向）
  • flex-wrap: nowrap | wrap | wrap-reverse;：如果一条轴线排不下，定义换行规则
  • flex-flow: || ;：flex-direction和flex-wrap的简写形式
  • justify-content: flex-start | flex-end | center | space-between | space-around;：定义容器在主轴上的对齐方式。
  • align-items: flex-start | flex-end | center | baseline | stretch;：定义容器在交叉轴上的对齐方式。
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;：定义多根轴线的对齐方式，如果容器只有一根轴线，该属性不起作用。
• 项目属性

  • order：定义项目的排列顺序，数值越小，排列越靠前，默认为0。

  • flex-grow：定义项目的放大比例，默认为0（即如果存在剩余空间，也不放大）。

  • flex-shrink：定义项目的缩小比例，默认为1（即如果空间不足，该项目将缩小）。

  • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。默认值为auto（项目本来大小）。

  • flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]：
    是flex-grow、flex-shrink和flex-basis的简写，默认值为 0 1 auto。
    该属性有两个快捷值: auto(1 1 auto) 和 none(0 0 auto)。
    建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

  • align-self: auto | flex-start | flex-end | center | baseline | stretch;：
    允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto（表示继承父元素align-items属性，如果没有父元素，等同于stretch）

---

响应式设计

是指网站能够兼容多个终端，而不是为每一个终端特地去开发新的一个版本。

• 原理
  通过媒体查询测试不同的设备屏幕尺寸做处理
• 兼容低版本IE
  页面头部必须有meta声明的viewport。

---

布局题

• 三栏式布局 3种方式

  左右容器固定，中间容器自适应

  <div class="container">
      <div class="left">leftdiv>
      <div class="main">maindiv>
      <div class="right">rightdiv>
  div>
  

  1. flex

     .container{
         display: flex;
     }
     .left{
         flex-basis:200px;
         background: green;
     }
     .main{
         flex: 1;
         background: red;
     }
     .right{
         flex-basis:200px;
         background: green;
     }
     

  2. position + margin

     .left,.right{
         position: absolute;
         top: 0;
         background: red;
     }
     .left{
         left: 0;
         width: 200px;
     }
     .right{
         right: 0;
         width: 200px;
     }
     .main{
         margin: 0 200px ;
         background: green;
     }
     

  3. float + margin

     .left{
         float:left;
         width:200px;
         background:red;
     }
     .main{
         margin:0 200px;
         background: green;
     }
     .right{
         float:right;
         width:200px;
         background:red;
     }
     
     

---

• 自适应填补

  有一个高度固定的div，里面有两个div，一个高度100px，另一个填补剩下的高度。

  1. 方法一 flex

     
     <html>
     
     <head>
         <meta charset="utf-8" />
         <title>自适应填补 方法一 flextitle>
         <style>
             *{
                 margin: 0;
                 padding: 0;
                 font-size: 0;
             }
             .father{
                 display: flex;
                 flex-direction: column;
                 width: 500px;
                 height: 700px;
                 background: blue;
             }
             .child1{
                 flex-basis: 100px;
                 background: blueviolet;
             }
             .child2{
                 flex: 1;
                 background: brown;
             }
         style>
     head>
     
     <body>
         <div class="father">
             <div class="child1">div>
             <div class="child2">div>
         div>
     body>
     
     html>
     

  2. 方法二 定位

     
     <html>
     
     <head>
         <meta charset="utf-8" />
         <title>自适应填补 方法二 定位title>
         <style>
             *{
                 margin: 0;
                 padding: 0;
                 font-size: 0;
             }
             .father{
                 position: relative;
                 width: 500px;
                 height: 700px;
                 background: blue;
             }
             .child1{
                 height: 100px;
                 background: blueviolet;
             }
             .child2{
                 position: absolute;
                 top: 100px;
                 bottom: 0;
                 width: 100%;
                 background: brown;
             }
         style>
     head>
     
     <body>
         <div class="father">
             <div class="child1">div>
             <div class="child2">div>
         div>
     body>
     
     html>
     

---

---

轮播图

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图实现title>
    <style type="text/css">
        .wrapper-container {
            position: relative;
            width: 500px;
            height: 400px;
            overflow: hidden;
            margin: 0 auto;
        }
        .wrapper {
            position: absolute;
            left: 0;
            top: 0;
            width: 300%;
            transition: all ease .5s;
        }
        .wrapper img {
            width: 500px;
            /* display: block; */
            float: left;
        }
    style>
head>
<body>
    <div class="wrapper-container">
        <div class="wrapper" id="wrapper">
            <img src="./images/1.jpg" alt="">
            <img src="./images/2.jpg" alt="">
            <img src="./images/3.jpg" alt="">
        div>
    div>
body>
<script type="text/javascript">
    let index = 0,
        dom = document.querySelector("#wrapper"),
        timer = null,
        childLength = dom.children.length,
        stepWidth = dom.children[0].offsetWidth

    timer = setTimeout(autoPlay, 3000)
   
    function autoPlay () {
        index++
        index = index === childLength ? 0 : index
        dom.style.left = -index * stepWidth + 'px'
        timer = setTimeout(autoPlay, 3000)
    }

script>
html>

---

---

全屏滚动的原理

原理类似于轮播图，整体元素一直排列下去，假设有5个需要展示的全屏页面，那么高度将会是500%，但我们只能展示100%，剩下的内容可以通过transform进行Y轴定位，也可以通过margin-top实现。

<html>
    <head>
        <meta charset="utf-8" />
        <title>全屏滚动title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-size: 0;
            }

            .box {
                position: relative;
                width: 100%;
                height: 100vh;
                overflow: hidden;
            }

            ul {
                position: relative;
            }

            li {
                width: 100%;
                height: 100vh;
                font-size: 30px;
                position: relative;
                display: flex;
                justify-content: center;
                text-align: center;
            }

            li p {
                font-size: 30px;
                position: absolute;
                bottom: 0;
            }
        style>
    head>
    <body>
        <div class="box">
            <ul style="top: 0;">
                <li style="background-color: yellowgreen;">一页面<p>一页面p>
                li>
                <li style="background-color: red;">二页面<p>二页面p>
                li>
                <li style="background-color: skyblue;">三页面<p>三页面p>
                li>
                <li style="background-color: yellow;">四页面<p>四页面p>
                li>
            ul>
        div>
        <script type="text/javascript">
            var kai = true,i=0;
            var oUl = document.getElementsByTagName("ul")[0];
            document.addEventListener('mousewheel', function(ev) {
                var ev = window.event || ev;
                if (kai) {
                    kai = false;
                    oUl.style.transition=" 0.5s ease"; // 原因见下
                    if (ev.wheelDelta < 0 && i<3) { //当滑轮向下滚动时 
                        i++;
                    }
                    if (ev.wheelDelta > 0 && i>0) { //当滑轮向上滚动时 
                        i--;
                    }
                    setTimeout(function() {
                        oUl.style.top = -i*100 + 'vh';
                    }, 0);
                    setTimeout(function() {
                        kai = true;
                    }, 1000);
                }
            });

            // 因为高度为100vh 当窗口或框架被调整大小时， 100vh计算后的值变化, 就会有个缓慢变化的过程
            // 即使改为 ul{ transition : top 0.5s ease;} 也不行
            window.onresize=function(){
                oUl.style.transition="none";
            }
        script>
    body>
html>

代码摘自

---

---

seo搜索引擎优化

详情

搜索引擎工作原理

搜索引擎后台是一个庞大的数据库，里面存储了大量的关键词，每个关键词对应着多个网页。这些网页由“搜索引擎蜘蛛”或“网络爬虫”在网络上收集的。“蜘蛛”每天在互联网上爬行，对网页的内容进行分析提炼，查找其中的关键词。如果“蜘蛛”认为关键词在数据库中没有且对用户是有用的便存入后台的数据库中，反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要。

一个关键字对应多个网址，与关键词最吻合的网址就会排在前面。如果网站内容可以被搜索引擎能识别，那么搜索引擎就会提高该网站的权重，增加对该网站的友好度。这样一个过程我们称之为SEO。

---

作用

提高网站的权重，增强搜索引擎友好度，以达到提高排名，增加流量，改善（潜在）用户体验，促进销售的作用。

---

分类

白帽SEO

白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。

• 网站结构布局优化
  尽量简单、开门见山，提倡扁平化结构。

  1. 控制首页链接数量
     网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
  2. 扁平化的目录层次
     尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。
  3. 导航优化
     导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
     其次，在每一个网页上应该加上面包屑导航，对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
  4. 网站的结构布局—不可忽略的细节
     页面头部：logo及主导航，以及用户的信息。
     页面底部：版权信息和友情链接。
  5. 利用布局，把重要内容HTML代码放在最前
  6. 控制页面的大小，减少http请求，提高网站的加载速度。
     一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。

• 网页代码优化

  1. 突出重要内容—合理的设计title、description和keywords