對WEB標準以及W3C的理解與認識

WEB標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行爲（Behavior）。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行爲標準主要包括對象模型（如W3C DOM）、ECMAScript等。

標籤閉合、標籤小寫、不亂嵌套、提高搜索機器人搜索機率、使用外鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維護、改版方便，不需要變動頁面內容、提供打印版本而不需要複製內容、提高網站易用性。

爲什麼將css引入放頭部，js引入放後面？
瀏覽器從上到下依次解析html文檔。將css文件放到頭部，css文件可以先加載。避免先加載body內容，導致頁面一開始樣式錯亂，然後閃爍。
將javascript文件放到底部是因爲：若將javascript文件放到head裏面，就意味着必須等到所有的javascript代碼都被下載、解析和執行完成之後纔開始呈現頁面內容。這樣就會造成呈現頁面時出現明顯的延遲，窗口一片空白。
style 標籤寫在 body 後和 body 前有什麼區別？
頁面加載自上而下，當然是需要先加載樣式。
寫在body標籤後，由於瀏覽器以逐行方式對HTML文檔進行解析，當解析寫在尾部的樣式表會導致瀏覽器停止之前的渲染，等待加載且解析樣式表後才重新進行渲染，這樣可能導致留白現象（所以最好將style標籤寫在body前）。

"流"概念

‘流’是css的一種基本定位和佈局機制，HTML默認的佈局機制就是’流佈局’,是一種自上而下（例如塊級元素div），從左到右排列的佈局方式。

盒模型

兩種類型 & 區別
IE盒模型（怪異盒模型）:
width = border + padding + content;
一個塊的寬度 = width + margin。

W3C盒模型（標準盒模型）:
width = content；
一個塊的寬度 = width + padding + border + margin。

切換方式

box-sizing: border-box; // IE盒模型標準
box-sizing: content-box; // W3C盒模型標準

margin | padding 分別適用於什麼場合
margin：在border外側需要留空
padding：在border內側需要留空
1. 瀏覽器兼容性問題（瞭解）
  在IE5.X,IE6中，爲float的盒子指定margin時，左側margin可能會變成兩倍的寬度，通過改用padding或者指定盒子爲display:inline就可以解決。

HTML

HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．通過這些標籤可以將網絡上的文檔格式統一。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。

文檔解析類型

HTML存在兩種文檔類型
怪異模型（默認）：瀏覽器按照自己的方式解析
標準模式：按照W3C標準
如何避免瀏覽器的怪異模式?
通過聲明文檔的解析類型 <!DOCTYPE html>

HTML語義化

Html語義化可以使頁面更加結構化，提供了一系列具有結構意義的標籤，例如header,footer等，讓結構更加清晰，有利於瀏覽器的解析。
即使在沒有css樣式的情況下，頁面也會以一種文檔結構來顯示，更加易於閱讀。
由於搜索引擎的爬蟲也會依賴於Html標記來確定上下文和各個關鍵字的權重，因此有利於SEO。
Html語義化更便於閱讀，維護和理解。

非替換元素&替換元素

可替換元素：其內容是通過標籤類型以及其屬性值來決定的。例如：iframe、video、img。
非可替換元素：其內容由其標籤包裹內容決定。例如div、p、span、ul、li、ol。

塊級元素和行內元素

行內元素：

左右兩邊都可以有元素，和其他元素在一行上。
不可以設置寬高，其寬度就是內容的寬度。對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，但是padding上下對其他元素無影響。
常見有：span、a、img(行內替換元素)

塊級元素：

默認獨自佔據一行，左右兩邊都沒有元素。
可以設置寬高，在不設置寬度的情況下，默認爲父元素的寬度一致。
常見有：h1~h6、p、div

HTML5

Html5新特性

語義化標籤： header、footer、article、aside、caption、nav等
畫布canvas
SVG繪圖
視頻video和音頻audio
input增強型表單控件：calendar,date,time,email,url,search
本地離線存儲localStorage長期存儲數據，瀏覽器關閉後數據不丟失；sessionStorage的數據在瀏覽器關閉後自動刪除。
WebWorker、WebSocket

Html5移除的元素(瞭解)

純表現的元素：basefont,big,center,font,s,strike,tt,u;
對可用性產生負面影響的元素：frame,frameset,noframes;

Html5哪些標籤可以優化SEO

title
Meta 詳情
Meta提供給頁面一些元信息（名稱/鍵值），它有利於SEO。
屬性：

屬性	描述
name	用於描述網站
http-equiv	沒有name時，可以採用這個屬性的值（content-type,expires(期限),refresh,set-cookie,content屬性關聯到http請求頭）
content	名稱/值中的值，可以是任意有效字符串
scheme	用於指定要用來翻譯屬性值的方案

語義化標籤： header、footer、article、aside、caption、nav等。

iframe

iframe 是一種內聯框架，也是一種很常見的網頁嵌入方式。
優點：

iframe能夠原封不動的把嵌入的網頁展示出來
如果有多個網頁引用iframe,只需要修改iframe的內容
如果遇到加載緩慢的第三方內容如圖標和廣告，可以由iframe來解決

缺點：

會產生很多頁面，不容易管理，同時造成onload阻塞
iframe框架結構有時讓人感到迷惑，用戶體驗感差
代碼結構變得複雜，影響搜索引擎
iframe框架頁面會增加服務器的http請求

Html 提供哪些 Api

全屏滾動 Fullscreen API
頁面可見性 Pge Visibility API
訪問攝像頭和麥克風 getUserMedia API
電池 Battery API
預加載網頁內容 Link prefetching

CSS

CSS引入方式

Css引入方式有4種內聯、內嵌、外鏈、導入。

通過link和@import引入有什麼區別？

外鏈link 除了可以加載css之外,還可以定義rss、rel等屬性，沒有兼容性問題，支持使用javascript改變樣式。
@import 是css提供的，只能用於加載css，不支持通過javascript修改樣式。
頁面被加載的時候，link會被同時加載，而@import則需等到頁面加載完後再加載，可能出現無樣式網頁。

CSS選擇器

CSS選擇器有哪些? 11個

id選擇器、類選擇器、標籤選擇器、相鄰選擇器(h1+p)、子選擇器(ul>li)、後代選擇器(li a)、通配符選擇器(*)、屬性選擇器(a[rel = "XXX"])、僞類選擇器、僞元素選擇器、分組選擇器

僞類選擇器
1. CSS3新增僞類
  x:first-of-type：選擇屬於其父元素的首個 <x> 元素的每個 <x> 元素
  x:last-of-type：選擇屬於其父元素的最後一個 <x> 元素的每個 <x> 元素
  x:only-of-type：選擇屬於其父元素唯一的 <x> 元素的每個 <x> 元素
  x:only-child：選擇屬於其父元素的唯一子元素的每個 <x> 元素
  x:nth-child(1)：選擇屬於其父元素的第一個子元素的每個 <x> 元素
  等等
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：在元素之後添加內容

可繼承 & 不可繼承的樣式

可繼承的樣式：font-size, font-family, color...
不可繼承的樣式：border, padding, margin, width, height...

Css選擇器優先級 & 權重

優先級：!important > 內聯style > ID選擇器 > 類選擇器 > 標籤選擇器 > 通配符選擇器
權重：二進制規則計算，各選擇器權值總覽
內聯style，權值：1000
ID選擇器，權值：0100
類選擇器，權值：0010
標籤選擇器 & 僞元素選擇器，權值：0001
通配符、子選擇器、相鄰選擇器等，權值：0000
繼承樣式沒有權值
如果層級相同，則向後比較，層級不同時，層級高的權重大

瀏覽器如何解析Css選擇器？

css選擇器的解析是從右向左解析，爲了避免對所有元素進行解析

CSS3新特性 10個

各種css選擇器
1）E:last-child 匹配父元素的最後一個子元素E。
2）E:nth-child(n) 匹配父元素的第n個子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒數第n個子元素E。
圓角border-radius
多列布局詳情
文本效果
@Font-face 特性
線性漸變
linear-gradient(left, red, blue)
transform 樣式
translate()：元素從其當前位置移動，根據給定的 left（x 座標）和 top（y 座標）位置參數
rotate()：元素順時針旋轉給定的角度。
scale()：元素的尺寸會增加或減少。
skew()：元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數
matrix()：把所有 2D 轉換方法組合在一起
過渡 transition: property duration timing-function delay;
property：規定設置過渡效果的 CSS 屬性的名稱。
duration：規定完成過渡效果需要多少秒或毫秒。
timing-function：規定速度效果的速度曲線。
delay：定義過渡效果何時開始。
動畫 animation
flex佈局 👉 詳情：見文本的‘佈局–flex佈局’

媒體查詢👉 聯繫文本的“佈局–響應式佈局–原理”

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

常見的Css兼容性問題 4個

不同瀏覽器的標籤默認的padding/margin不同，通過初始化css樣式可以解決。
```
*{
    margin:0;
    padding:0px;
}
```
IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性。
Chrome中文界面下默認會將小於12px的文本強制爲12px。
通過加入css屬性 -webkit-text-size-adjust：none;可以解決，或者使用transform中的scale()縮放屬性
超鏈接訪問過後hover樣式就不出現，因爲被點擊訪問過的超鏈接樣式不再具有hover和active了。
解決方法是改變css屬性的排列順序：
a:link{} → a:visited{} → a:focus → a:hover{} → a:active{}

Css優化，如何提高性能 6個

儘量將樣式寫在單獨的css文件裏面，在head元素中引用
不使用@import
避免使用複雜的選擇器，層級越少越好
精簡頁面的樣式文件，去掉不用的樣式
利用CSS繼承減少代碼量
慎重使用高性能屬性：浮動、定位；

display:none 與 visibility:hidden 的區別

display:none 隱藏對應的元素，在文檔佈局中不再分配空間（導致重排）
visibility:hidden 隱藏對應的元素，在文檔佈局中保留原來的空間（導致重繪）

position屬性

relative：相對定位，相對於自身位置進行定位
absolute：絕對定位，相對於position不爲static的第一個父級元素進行定位
fixed：固定定位。相對於瀏覽器窗口進行定位
inherit：繼承父級元素position屬性值
static：默認值，即沒有定位，仍爲文檔流
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;
}
```

垂直居中

line-height: 盒子高度;適合純文字類內容居中
父元素設置相對定位，子元素設置絕對定位，標籤通過margin實現自適應居中

萬能flex

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

父元素設置相對定位，子元素設置絕對定位，通過transform實現居中。
父元素設置display:table + 子元素設置vertical-align:middle。

垂直水平居中

flex

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

position + transform （寬高未知）

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

position + margin （寬高確定）

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

絕對定位設置各個方向爲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種方式

額外標籤法（不推薦）：在最後一個浮動標籤後，新加一個標籤，給其設置clear：both;。
父級添加overflow屬性（不推薦）：
父元素添加overflow:hidden。
原理：觸發BFC。（聯繫：文本的‘BFC–BFC的作用’）

使用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.
}

使用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>;：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。

<meta name=“viewport” content=“width=device-width，initial-scale=1.maximum-scale=1，user-scalable=no”>

佈局題

三欄式佈局 3種方式

左右容器固定，中間容器自適應

<div class="container">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>

flex

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

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;
}

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，另一個填補剩下的高度。

方法一 flex

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>自適應填補 方法一 flex</title>
    <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>

方法二定位

<!DOCTYPE html>
<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>

輪播圖

<!DOCTYPE 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實現。

<!DOCTYPE html>
<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. 導航優化
  導航應該儘量採用文字方式，也可以搭配圖片導航，但是圖片代碼一定要進行優化，<img>標籤必須添加“alt”和“title”屬性，告訴搜索引擎導航的定位，做到即使圖片未能正常顯示時，用戶也能看到提示文字。
  其次，在每一個網頁上應該加上麪包屑導航，對“蜘蛛”而言，能夠清楚的瞭解網站結構，同時還增加了大量的內部鏈接，方便抓取，降低跳出率。
4. 網站的結構佈局—不可忽略的細節
  頁面頭部：logo及主導航，以及用戶的信息。
  頁面底部：版權信息和友情鏈接。
5. 利用佈局，把重要內容HTML代碼放在最前
6. 控制頁面的大小，減少http請求，提高網站的加載速度。
  一個頁面最好不要超過100k，太大，頁面加載速度慢。當速度很慢時，用戶體驗不好，留不住訪客，並且一旦超時，“蜘蛛”也會離開。
網頁代碼優化
1. 突出重要內容—合理的設計title、description和keywords
  <title>標題：只強調重點即可，儘量把重要的關鍵詞放在前面，關鍵詞不要重複出現，儘量做到每個頁面的<title>標題中不要設置相同的內容。
  <meta keywords>標籤：關鍵詞，列舉出幾個頁面的重要關鍵字即可，切記過分堆砌。
  <meta description>標籤：網頁描述，需要高度概括網頁內容，切記不能太長，過分堆砌關鍵詞，每個頁面也要有所不同。
2. 語義化書寫HTML代碼，符合W3C標準
  儘量讓代碼語義化，在適當的位置使用適當的標籤，用正確的標籤做正確的事。讓閱讀源碼者和“蜘蛛”都一目瞭然。比如：h1-h6 是用於標題類的，<nav>標籤是用來設置頁面主導航，列表形式的代碼使用ul或ol，重要的文字使用strong等。
3. <a>標籤
  頁內鏈接，要加 “title” 屬性加以說明，讓訪客和 “蜘蛛” 知道。而外部鏈接，鏈接到其他網站的，則需要加上 rel="nofollow" 屬性, 告訴 “蜘蛛” 不要爬，因爲一旦“蜘蛛”爬了外部鏈接之後，就不會再回來了。
4. 正文標題要用<h1>標籤
  h1標籤自帶權重“蜘蛛” 認爲它最重要，一個頁面有且最多只能有一個H1標籤，放在該頁面最重要的標題上面，如首頁的logo上可以加H1標籤。副標題用<h2>標籤, 而其它地方不應該隨便亂用 h 標題標籤。
5. <img>應使用 “alt” 屬性加以說明
```
<img src="cat.jpg" width="300" height="200" alt="貓"  />
```
  當網絡速度很慢，或者圖片地址失效的時候，就可以體現出alt屬性的作用，他可以讓用戶在圖片沒有顯示的時候知道這個圖片的作用。同時爲圖片設置高度和寬度，可提高頁面的加載速度。
6. 表格應該使用<caption>表格標題標籤
  caption 元素定義表格標題。caption 標籤必須緊隨 table 標籤之後，您只能對每個表格定義一個caption 標籤。
```
<table border='1'>
    <caption>表格標題</caption>
    <tbody>
        <tr>
            <td>apple</td>
            <td>100</td>
        </tr>
        <tr>
            <td>banana</td>
            <td>200</td>
        </tr>
    </tbody>
</table>
```
7. <br>標籤：只用於文本內容的換行
8. <strong>、<em>標籤
  需要強調時使用。<strong>標籤在搜索引擎中能夠得到高度的重視，它能突出關鍵詞，表現重要的內容，<em>標籤強調效果僅次於<strong>標籤；<b>、<i>標籤：只是用於顯示效果時使用，在SEO中不會起任何效果。
9. 文本縮進 & 版權符號
  文本縮進不要使用特殊符號   應當使用CSS進行設置。版權符號不要使用特殊符號 © 可以直接使用輸入法打出版權符號©。
10. 重要內容不要用JS輸出，因爲“蜘蛛”不會讀取JS裏的內容，所以重要內容必須放在HTML裏。
11. 儘量少使用iframe框架,因爲“蜘蛛”一般不會讀取其中的內容。
12. 謹慎使用 display：none;
  對於不想顯示的文字內容，應當設置z-index或縮進設置成足夠大的負數偏離出瀏覽器之外。因爲搜索引擎會過濾掉display:none其中的內容。
前端網站性能優化
1. 減少http請求數量
  1. CSS Sprites(CSS精靈)
    國內俗稱CSS精靈，這是將多張圖片合併成一張圖片達到減少HTTP請求的一種解決方案，可以通過CSS的background屬性來訪問圖片內容。這種方案同時還可以減少圖片總字節數。
  2. 合併CSS和JS文件
    現在前端有很多工程化打包工具，如：grunt、gulp、webpack等。爲了減少 HTTP 請求數量，可以通過這些工具再發布前將多個CSS或者多個JS合併成一個文件。
  3. 採用lazyload
    俗稱懶加載，可以控制網頁上的內容在一開始無需加載，不需要發請求，等到用戶操作真正需要的時候立即加載出內容。這樣就控制了網頁資源一次性請求數量。
2. 控制資源文件加載優先級
  瀏覽器在加載HTML內容時，是將HTML內容從上至下依次解析，解析到link或者script標籤就會加載href或者src對應鏈接內容，爲了第一時間展示頁面給用戶，就需要將CSS提前加載，不要受 JS 加載影響。
  一般情況下都是CSS在頭部，JS在底部。
3. 儘量外鏈CSS和JS（結構、表現和行爲的分離），保證網頁代碼的潔，也有利於日後維護
```
<link rel="stylesheet" href="asstes/css/style.css" />
<script src="assets/js/main.js"></script>
```
4. 利用瀏覽器緩存
  瀏覽器緩存是將網絡資源存儲在本地，等待下次請求該資源時，如果資源已經存在就不需要到服務器重新請求該資源，直接在本地讀取該資源。
5. 減少重排（Reflow）
  基本原理：重排是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證 DOM 樹上的所有其它結點的visibility屬性，這也是Reflow低效的原因。如果Reflow的過於頻繁，CPU使用率就會急劇上升。
  減少Reflow，如果需要在DOM操作時添加樣式，儘量使用增加class屬性，而不是通過style操作樣式。
6. 減少 DOM 操作
7. 圖標使用IconFont替換
8. 不使用CSS表達式，會影響效率
9. 使用CDN網絡緩存，加快用戶訪問速度，減輕服務器壓力
10. 啓用GZIP壓縮，瀏覽速度變快，搜索引擎的蜘蛛抓取信息量也會增大
11. 僞靜態設置
  如果是動態網頁，可以開啓僞靜態功能，讓蜘蛛“誤以爲”這是靜態網頁，因爲靜態網頁比較合蜘蛛的胃口，如果url中帶有關鍵詞效果更好。
  動態地址：http://www.xxx.cn/index.php
  僞靜態地址：http://www.xxx.cn/index.html

黑帽SEO(瞭解)

快照劫持：通過判斷IP，模擬用戶與蜘蛛，進行有效的給出內容與跳轉。
隱藏內容：它包括隱藏文字與鏈接，試圖增加頁面的相關度。
鏈接農場：它基於蜘蛛池原理，在頁面中，產生大量的連接池。
購買黑鏈：試圖降低購買鏈接成本。
快排策略：利用大量真正IP切換，模擬真實用戶搜索，有效刷點擊。
文不對題：熊掌ID，利用原創垃圾內容填充文本，而標題採用搜索標題。
降維打擊：惡意攻擊競爭對手，使得自己排名快速提升。
站羣外鏈：建立大量網站，利用內頁做關鍵詞排名。
個性簽名：將網址填充到各大社交網站的簽名處，比如：豆瓣簽名，以及論壇簽名。
視頻外鏈：早期經常被使用的視頻標題外鏈。

瀏覽器

瀏覽器內核

-webkit- → webkit內核（Chrome）
-moz- → Gecko內核（fixfox）
-o- → Opera內核（Opera)
-ms- → Trident內核（IE）

瀏覽器的渲染機制

瀏覽器渲染過程:

解析HTML，生成DOM樹，解析CSS，生成CSSOM樹，解析HTML和解析CSS同時進行。
將DOM樹和CSSOM樹，關聯起來，構建一棵渲染樹（Render Tree）(這一過程又稱爲Attachment)。每個DOM節點都有attach方法，接受樣式信息，返回一個render對象(又名renderer)。這些render對象最終會被構建成一棵渲染樹（Render Tree）。
Layout(佈局)：根據生成的渲染樹，進行佈局(Layout)，爲每個Render樹上的節點確定幾何信息（位置，大小）。
Painting(重繪)：根據渲染樹以及迴流得到的幾何信息，得到節點的絕對像素
Display：將像素髮送給GPU（圖形處理器），展示在頁面上。

瀏覽器內多個標籤頁之間的通信

通過調用localStorage
使用cookie + setInterval
postMessage API
WebSocket 服務器中轉

JavaScript請求一般情況下有哪些地方需要用到緩存處理？

詳情

DNS緩存
DNS緩存是指在正常訪問ip之後，系統會將這個ip存儲起來，當再次訪問的時候，系統就會把本地的DNS緩存提取顯示，等於是加速了網址的解析。
DNS記錄存儲在區域文件中，用於將域名轉換爲IP地址，還包括域名的服務器名稱和郵件服務器信息，由於DNS記錄完全由文本組成，因此在需要時可以進行修改
CDN緩存
用戶瀏覽器與服務器交互，沒有接入CDN時：用戶在瀏覽網站的時候，瀏覽器能夠在本地保存網站中的圖片或者其他文件的副本，這樣用戶再次訪問該網站的時候，瀏覽器就不用再下載全部的文件，減少了下載量意味着提高了頁面加載的速度。
接入CDN時：客戶端瀏覽器先檢查是否有本地緩存是否過期，如果過期，則向CDN邊緣節點發起請求，CDN邊緣節點會檢測用戶請求數據的緩存是否過期，如果沒有過期，則直接響應用戶請求，此時一個完成http請求結束；如果數據已經過期，那麼CDN還需要向源站發出回源請求（back to the source request）,來拉取最新的數據。
瀏覽器緩存
客戶端緩存減少了服務器請求，避免了文件重複加載，顯著地提升了用戶體驗。但是當網站發生更新時(如替換了css，js以及圖片文件)，瀏覽器本地仍保存着舊版本的文件，從而導致無法預料的後果。
服務器緩存
緩存指的是將需要頻繁訪問的網絡內容存放在離用戶較近、訪問速度更快的系統中，以提高內容訪問速度的一種技術。服務器緩存就是存放頻繁訪問內容的服務器。

網絡通信

物理層、數據鏈路層、網絡層、傳輸層、會話層、表示層和應用層。

UDP & TCP

TCP 和 UDP 的區別
TCP 是面向連接的，UDP 是面向無連接的
TCP 結構複雜，包頭長度較長；UDP程序結構較簡單，UDP的包頭長度爲端口號長度（16）。
TCP 是面向字節流的，UDP 是基於數據報的
TCP 保證數據正確性，UDP 可能丟包
TCP 保證數據順序，UDP 不保證
面向連接 & 面向無連接
在互通之前，面向連接的協議會先建立連接，如 TCP 有三次握手，而 UDP 不會。
1. 三次握手
  簡單理解：
  A：您好，我是 A
  B：您好 A，我是 B
  A：您好 B
  
  爲什麼是三次握手？
  總結的話就是通信雙方全都有來有回。對於 A 來說它發出請求，並收到了 B 的響應，對於 B 來說它響應了 A 的請求，並且也接收到了響應。
  
  TCP 的三次握手除了建立連接外，主要還是爲了溝通 TCP 包的序號問題。
  
  A 告訴 B，我發起的包的序號是從哪個號開始的，B 同樣也告訴 A，B 發起的包的序號是從哪個號開始的。
  
  雙方建立連接之後需要共同維護一個狀態機，在建立連接的過程中，雙方的狀態變化時序圖。
  
  如圖，剛開始的時候，客戶端和服務器都處於 CLOSED 狀態，先是服務端主動監聽某個端口，處於 LISTEN 狀態。然後客戶端主動發起連接 SYN，之後處於 SYN-SENT 狀態。服務端接收了發起的連接，返回 SYN，並且 ACK ( 確認 ) 客戶端的 SYN，之後處於 SYN-SENT 狀態。客戶端接收到服務端發送的 SYN 和 ACK 之後，發送 ACK 的 ACK，之後就處於 ESTAVLISHED 狀態，因爲它一發一收成功了。服務端收到 ACK 的 ACK 之後，也處於 ESTABLISHED 狀態，因爲它也一發一收了。
2. 四次揮手
  
  簡單理解如下：
  A：B 啊，我不想玩了
  B：哦，你不想玩了啊，我知道了
  這個時候，只是 A 不想玩了，即不再發送數據，但是 B 可能還有未發送完的數據，所以需要等待 B 也主動關閉。
  B：A 啊，好吧，我也不玩了，拜拜
  A：好的，拜拜
  
  這樣整個連接就關閉了，當然上面只是正常的狀態，也有些非正常的狀態（比如 A 說完不玩了，直接跑路，B 發起的結束得不到 A 的回答，不知道該怎麼辦或則 B 直接跑路 A 不知道該怎麼辦），TCP 協議專門設計了幾個狀態來處理這些非正常狀態。
  
  斷開的時候，當 A 說不玩了，就進入 FIN_WAIT_1 的狀態，B 收到 A 不玩了的消息後，進入 CLOSE_WAIT 的狀態。
  
  A 收到 B 說知道了，就進入 FIN_WAIT_2 的狀態，如果 B 直接跑路，則 A 永遠處與這個狀態。TCP 協議裏面並沒有對這個狀態的處理，但 Linux 有，可以調整 tcp_fin_timeout 這個參數，設置一個超時時間。
  
  如果 B 沒有跑路，A 接收到 B 的不玩了請求之後，從 FIN_WAIT_2 狀態結束，按說 A 可以跑路了，但是如果 B 沒有接收到 A 跑路的 ACK 呢，就再也接收不到了，所以這時候 A 需要等待一段時間，因爲如果 B 沒接收到 A 的 ACK 的話會重新發送給 A，所以 A 的等待時間需要足夠長。
TCP 爲什麼是可靠連接
1. 通過 TCP 連接傳輸的數據無差錯，不丟失，不重複，且按順序到達。
2. TCP 報文頭裏面的序號能使 TCP 的數據按序到達
3. 報文頭裏面的確認序號能保證不丟包，累計確認及超時重傳機制
4. TCP 擁有流量控制及擁塞控制的機制

Http & Https

詳情

HTTP
超文本傳輸協議。
客戶端和服務器端傳遞的是明文的消息。
採用80端口。
HTTPS
1. 非對稱加密 & 對稱加密
  非對稱加密：用公鑰和私鑰來加解密。
  對稱加密：加密解密都用同一套祕鑰。
  注：非對稱加密更加安全，對稱加密速度更快。
2. 請求流程
  1. 客戶端（瀏覽器）向服務器請求https連接。
  2. 服務器發送了一個SSL證書給客戶端，SSL證書中包含了具體的內容有證書的頒發機構、有效期、公鑰、證書持有者、簽名，通過第三方的校驗保證身份的合法。
  3. 客戶端會讀取證書所有者、有效期等信息進行校驗。
    
    客戶端（瀏覽器）開始查找操作系統中已內置的受信任的證書發佈機構CA，與服務器發過來的證書的頒發CA比對，用於驗證證書是否爲合法機構頒發。
    
    如果找不到，瀏覽器就會報錯。
    
    如果找到了，就會取出其中的公鑰，對證書內的簽名進行解密。
    
    使用相同的Hash算法對簽名進行去摘要並與服務器發來的摘要進行對比。如果對比一致，則合法，這樣就得到公鑰了
  4. 客戶端隨機的祕鑰A（用於對稱加密）。
  5. 客戶端用公鑰對A進行加密。
  6. 客戶端將加密A後的密文發送給服務器。
  7. 服務器通過私鑰對密文進行解密得到對稱加密的祕鑰。
  8. 客戶端與服務器通過對稱祕鑰加密的密文通信。

【參考文檔】：

html + css 面試