面試總結與積累

時間 2019-11-21

標籤面試總結積累欄目快樂工作简体版

原文原文鏈接

一、行內元素有哪些？塊級元素有哪些？空元素有哪些？CSS盒模型？javascript

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquotecss

空元素：即沒有內容的HTML元素，例如：br、meta、hr、link、input、imghtml

CSS盒模型：前端

首先要清楚，咱們寫CSS樣式，目的就是爲告終構與表現相分離。其次，ＣＳＳ中的盒子模型是爲了讓咱們充分理解html5

ｄｉｖ＋ｃｓｓ模型的定位功能，就是利用盒子模型這樣的佈局方式代替傳統的表格佈局方式。java

在進行ｈｔｍｌ佈局時常常會遇到佈局ｄｉｖ，而盒模型則是重中之重，ＣＳＳ盒模型的尺寸基準(box-sizing的值)有兩種，一種是默認的jquery

content-box 一種是border-box；關於元素是哪一種盒模型，咱們可使用火狐瀏覽器的firebug插件的佈局選項中進行查看。程序員

理論上說，content-box和border-box的主要區別是兩者的盒子的寬度是否包含元素的邊框和內邊距。前者width不包含內邊距和邊框，後者的width包含內邊距和邊框。web

二、CSS 的引入方式有哪些？link和@import的區別是？面試

1）內聯方式：

內聯方式指的是直接在 HTML 標籤中的 style 屬性中添加 CSS。

示例：

<div style="background: red"></div>

這一般是個很糟糕的書寫方式，它只能改變當前標籤的樣式，若是想要多個 <div> 擁有相同的樣式，你不得不重複地爲每一個 <div> 添加相同的樣式，若是想要修改一種樣式，又不得不修改全部的 style 中的代碼。很顯然，內聯方式引入 CSS 代碼會致使 HTML 代碼變得冗長，且使得網頁難以維護。

2）內部樣式表

內部樣式表指的是在 HTML 頭部中的 <style> 標籤下書寫 CSS 代碼

嵌入方式的 CSS 只對當前的網頁有效。由於 CSS 代碼是在 HTML 文件中，因此會使得代碼比較集中，當咱們寫模板網頁時這一般比較有利。由於查看模板代碼的人能夠一目瞭然地查看 HTML 結構和 CSS 樣式。由於嵌入的 CSS 只對當前頁面有效，因此當多個頁面須要引入相同的 CSS 代碼時，這樣寫會致使代碼冗餘，也不利於維護。

3）外部樣式表

外部樣式表是指使用 HTML 的 <link> 標籤引入外部的 CSS 文件。

示例：

<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>

這是最多見的也是最推薦的引入 CSS 的方式。使用這種方式，全部的 CSS 代碼只存在於單獨的 CSS 文件中，因此具備良好的可維護性。而且全部的 CSS 代碼只存在於 CSS 文件中，CSS 文件會在第一次加載時引入，之後切換頁面時只需加載 HTML 文件便可。

4）導入方式

導入方式指的是使用 CSS 規則引入外部 CSS 文件。

示例：


</style>


<style> @import url(style.css)

link和@import都是外部引用CSS的方式，可是存在必定的區別：

　　區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。

　　區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。

　　區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

　　區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

三、css實現垂直水平居中

1）無論是父元素有沒有高度和寬度，也無論子元素是div仍是圖片，均可以水平垂直居中的方法

<head>

<style>

 .Absolute-Center {
           display:table-cell;
            text-align:center;
            vertical-align: middle;
            height:300px;
            width:400px;
        }
        .center{
            display:inline-block;
        }

    </style>
</head>
<body>
<div class="Absolute-Center">
    <img src="images/photo.jpg" class="center">
</body>

</html>

缺點：

1.須要一個容器

2.水平居中依賴於margin-left: -0.25em;該尺寸對於不一樣的字體/字號須要調整。

3.內容塊寬度不能超過容器的100% - 0.25em。

2)CSS3新屬性

CSS3爲咱們提供了一種可伸縮的靈活的web頁面佈局方式-flexbox佈局，它具備很強大的功能，能夠很輕鬆實現不少複雜佈局，在它出現以前，咱們常用的佈局方式是浮動或者固定寬度+百分比來進行佈局，代碼量較大且難以理解。

爲了更好理解flexbox佈局，這裏首先要介紹幾個概念：

若是所示：

（1）主軸（側軸），flexbox佈局裏面將一個可伸縮容器按照水平和垂直方向分爲主軸或側軸，若是你想讓這個容器中的可伸縮項目在水平方向上可伸縮展開，那麼水平方向上就是主軸，垂直方向上是側軸，反之亦然；

（2）主軸（側軸）長度，當肯定了哪一個是主軸哪一個是側軸以後，在主軸方向上可伸縮容器的尺寸（寬或高）就被稱做主軸長度，側軸方向上的容器尺寸（寬或高）就被稱做側軸長度；

（3）主軸（側軸）起點，主軸（側軸）終點，例如主軸方向是水平方向，一般在水平方向上網頁佈局是從左向右的，那麼可伸縮容器的左border就是主軸起點，右border就是主軸終點，側軸是在垂直方向，一般是從上到下的，因此上border就是側軸起點，下border就是側軸終點；

（4）伸縮容器：若是要構建一個可伸縮的盒子，這些可伸縮的項目必需要由一個display：flex的屬性的盒子包裹起來，這個盒子就叫作伸縮容器；

（5）伸縮項目：包含在伸縮容器中須要進行伸縮佈局的元素被稱做伸縮項目；

明確以上概念以後就能夠來構建flexbox佈局了；

第一步，構建一個flexbox容器，並在容器中放置幾個可伸縮項目，以下：

css代碼：

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
        }
.flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;
        }

HTML代碼：

<div class="flex-container">
       <div class="flex-item ">A</div>
       <div class="flex-item ">B</div>
       <div class="flex-item ">A</div>
       <div class="flex-item ">B</div>
   </div>

效果以下：

其中四個可伸縮的項目在水平方向上被排列成了一行，同時可伸縮項目相左對齊；

display：flex表明這個容器是一個可伸縮容器，還能夠取值爲inline-flex,二者的區別在於前者將這個容器渲染爲塊級元素，後者將其渲染爲內聯元素。

這裏有幾個默認的屬性雖然沒有設置，可是默認值確實起做用了，它們是：

flex-direction屬性，它的取值爲row，column，column-reverse，row-reverse,默認值是row，表示在水平方向上展開可伸縮項，若是取column表明在垂直方向上展開可伸縮項目，column-reverse，row-reverse表明相反方向，通俗講，flex-direction屬性就是用來定義主軸側軸方向的。給以上效果添加flex-direction：column效果以下：

justify-content屬性，用來表示可伸縮項目在主軸方向上的對齊方式，能夠取值爲flex-start,flex-end,center,space-between,space-around，其中flex-start,flex-end,表示相對於主軸起點和終點對齊，center表示居中對齊，space-between表示兩端對齊並將剩餘空間在主軸方向上進行平均分配，space-around表示居中對齊而後在主軸方向上將剩餘空間平均分配

justify-content:space-between

css代碼：

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-between;
        }
.flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;
        }

效果以下：

能夠看到它將各個可伸縮項目在主軸方向上兩端對齊並平分了剩餘空間；

justify-content:space-around

css代碼：

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
        }
.flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;
        }

效果以下：

能夠看到這個屬性讓可伸縮項目沿着主軸方向進行了居中對齊而且均分了剩餘空間；

align-items屬性：該屬性是用來表示可伸縮項目在側軸方向上的對齊方式，可取的值有flex-start,flex-end,center,baseline,stretch，須要解釋的是baseline值，它是按照一個計算出來的基準線而後讓這些項目沿這個基準線對齊，基準線的計算取決於可伸縮項目的尺寸及內容，以下：

align-items:baseline;

css代碼：

.flex-container{
            display:flex;     
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;;
        }
        .a{
            margin-top: 10px;
            height: 100px;
        }
        .b{
            margin-top: 20px;
            height: 150px;
        }
        .c{
            margin-top: 30px;
            height: 80px;
        }

HTML代碼：

 <div class="flex-container">
       <div class="flex-item a">A</div>
       <div class="flex-item b">B</div>
       <div class="flex-item c">A</div>
       <div class="flex-item a">B</div>
   </div>

效果以下：

能夠看到四個可伸縮項目在側軸方向上（垂直方向）高度不一，margin不同，可是最後都按照計算出來的一個基準線對齊；

align-items:stretch;

這個是取值會讓可伸縮項目在側軸方向上進行拉伸，前提是這些項目在側軸方向上沒有設置尺寸，不然會按照你設置的尺寸來渲染。

css代碼：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:stretch;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            /*height: 100px;*/
            margin: 5px;;
        }

HTML代碼：

<div class="flex-container">
       <div class="flex-item ">A</div>
       <div class="flex-item ">B</div>
       <div class="flex-item ">A</div>
       <div class="flex-item ">B</div>
   </div>

效果以下：

能夠看到這些可伸縮項目在側軸方向上被拉伸了，由於在垂直方向上沒有設置高度。

到目前爲止，咱們全部的伸縮項目都是在一行或者一列上進行的，並無進行換行和換列，flex-wrap屬性表示是否支持換行或者換列，它有nowrap,wrap,wrap-reverse三個取值，nowrap是默認值，表示不換行或者換列，wrap表示換行或者換列，wrap-reverse表示支持換行或者換列，可是會沿着相反方向進行排列（如主軸是垂直方向換行後就按照先下後上的順序來排列伸縮項）

css代碼：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-wrap: wrap;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }

HTML代碼：

<div class="flex-container">
    <div class="flex-item ">A</div>
    <div class="flex-item ">B</div>
    <div class="flex-item ">A</div>
    <div class="flex-item ">B</div>
    <div class="flex-item ">A</div>
    <div class="flex-item ">B</div>
    <div class="flex-item ">A</div>
    <div class="flex-item ">B</div>
</div>

效果以下：

能夠看到伸縮項增多以後一行難以放下的時候會接着換行。wrap屬性保證換行後按照正常的從上到下順序排列

align-content屬性用來表示換行以後各個伸縮行的對齊方式，它的取值有 stretch,flex-start,flex-end,center,space-between,space-around，意義和align-items屬性取值意義相同，上面咱們將7個伸縮項目分紅了兩行來排列，

將css代碼添加align-content屬性，html代碼不變，以下：

CSS代碼：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-wrap: wrap;
            align-content: space-between;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }

效果以下：

能夠看到兩個伸縮行在側軸（垂直）方向上兩端對齊了。

flex-flow屬性，該屬性是個復屬性，它是flex-direction和flex-wrap的複合屬性，flex-direction：row;flex-wrap:wrap就等同於flex-flow:row wrap

order屬性，該屬性用來表示伸縮項目的排列方式，正常狀況下伸縮項目會按照主軸起點到主軸終點排列，遇到換行或者換列會按照從側軸起點到終點進行排列（除非設置了某些對齊方式的reverse），可是某些狀況下這種默認顯示順序不符合要求，能夠採用給伸縮項添加order屬性來指定排列順序，默認狀況下，每一個伸縮項的order都是0，改屬性可正可負，越大的值會被排列在越後面。

css代碼：

 .flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;    
            flex-flow: row wrap;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .order1{
            order:1;
        }
        .order2{
            order:2;
        }

HTML代碼：

<div class="flex-container">
    <div class="flex-item order1">1</div>
    <div class="flex-item  order2">2</div>
    <div class="flex-item ">3</div>
    <div class="flex-item ">4</div>
    <div class="flex-item ">5</div>
    <div class="flex-item ">6</div>
    <div class="flex-item ">7</div>
    <div class="flex-item ">8</div>
</div>

效果以下：

默認狀況下，會按照HTML的順序1-8進行顯示，可是因爲給div1和2設置了大於0的order,因此他們被放在了最後顯示（由於其餘沒有被設置的div的order默認屬性都是0）

margin屬性在flexbox佈局中有很強大的做用，若是給某個可伸縮項設置某個方向上的margin爲auto，那麼這個可伸縮項就會在這個方向上佔用該方向的剩餘空間來做爲本身的這個方向上的margin。

css代碼：

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-flow: row wrap;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .a{
            margin-right:auto;
        }

HTML代碼：

<div class="flex-container">
    <div class="flex-item a">1</div>
    <div class="flex-item  ">2</div>
    <div class="flex-item ">3</div>

</div>

效果以下：

因爲給伸縮項1添加了margin-right爲auto，因此它獨佔了本行的剩餘空間做爲它的right margin值。

利用這個特性，咱們在flexbox佈局中很容易實現可伸縮元素的垂直水平居中，

css代碼;

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-flow: row wrap;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .a{
            margin:auto;
        }

HTML代碼：

<div class="flex-container">
    <div class="flex-item a">1</div>
</div>

效果以下：

align-self屬性，該屬性是給各個可伸縮項設置本身的在側軸上的對齊方式的，以前在容器上設置的align-item屬性是做爲一個總體設置的，全部的元素對齊方式都同樣，align-self屬性會覆蓋以前的align-item屬性，讓每一個可伸縮項在側軸上具備不一樣的對齊方式，取值和align-item相同：

css代碼：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .a{
            align-self:flex-start ;
        }
        .b{
            align-self:flex-end;
        }
        .c{
            align-self:center;
        }

html代碼：

<div class="flex-container">
    <div class="flex-item a">1</div>
    <div class="flex-item  b">2</div>
    <div class="flex-item c">3</div>

</div>

效果以下：

能夠看到三個伸縮項在側軸上被賦予了不一樣的對齊方式。

flex屬性，這個屬性是加在伸縮項上面的，它定義了伸縮項如何分配主軸尺寸，一般取值爲auto或者數字，auto瀏覽器會自動均分，數字會按照伸縮項所佔的數字比重來分配空間，

這個屬性會覆蓋伸縮項在主軸上設定的尺寸，當給主軸上伸縮項設定了尺寸（寬或高）和這個屬性的時候，事實上仍是會按照這個屬性來進行空間分配。

css代碼：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .a{
            align-self:flex-start ;
            flex:1;
        }
        .b{
            align-self:flex-end;
            flex:2;
        }
        .c{
            align-self:center;
            flex:1;
        }

HTML代碼：

<div class="flex-container">
    <div class="flex-item a">1</div>
    <div class="flex-item  b">2</div>
    <div class="flex-item c">3</div>

</div>

效果以下：

能夠看到伸縮項儘管設置了寬度，可是最終仍是按照咱們設置的flex比例對水平空間進行了分割。

——摘自博客園myzhibie

四、CSS優先級算法如何計算？

多重樣式優先級

多重樣式（Multiple Styles）：

若是外部樣式、內部樣式和內聯樣式同時應用於同一個元素，就是使多重樣式的狀況。

通常狀況下，優先級以下：

（外部樣式）External style sheet <（內部樣式）Internal style sheet <（內聯樣式）Inline style

有個例外的狀況，就是若是外部樣式放在內部樣式的後面，則外部樣式將覆蓋內部樣式。

<style type="text/css"> /* 內部樣式 */ h3{color:green;} </style> <!-- 外部樣式 style.css --> <link rel="stylesheet" type="text/css" href="style.css"/>

2.CSS樣式優先級算法如何計算？

內聯樣式表的權值最高 1000；
ID 選擇器的權值爲 100
Class 類選擇器的權值爲 10
HTML 標籤選擇器的權值爲 1

1.css優先級

是由四個級別和各個級別出現的次數決定的，值從左到右，左面的最大，一級大於一級

2.優先級算法

每一個規則對應一個初始四位數：0,0,0,0

如果行內樣式優先級，則是1,0,0,0，高於外部定義

<div style=」color: red」>sjweb</div>

如果ID選擇符，則分別加0,1,0,0

如果類選擇符，屬性選擇符，僞類選擇符，則分別加0,0,1,0

如果元素選擇器，僞類選擇器，則分別加0,0,0,1

3.須要注意

!important的優先級是最高的，但出現衝突時則需比較」四位數「

優先級相同時，則採用就近原則

繼承得來的屬性，其優先級最低

五、display有哪些值，說明他們的做用？

一、none：元素不會顯示，並且該元素現實的空間也不會保留。但有另一個 visibility: hidden，是保留元素的空間的。

二、inline： display的默認屬性。將元素顯示爲內聯元素，元素先後沒有換行符。咱們知道內聯元素是沒法設置寬高的，因此一旦將元素的display 屬性設爲 inline，設置屬性height和width是沒有用的。此時影響它的高度通常是內部元素的高度（font-size）和padding。

三、block：將元素將顯示爲塊級元素，元素先後會帶有換行符。設置爲block後，元素能夠設置width和height了。元素獨佔一行。

四、inline-block：行內塊元素。這個屬性值融合了inline 和 block 的特性，便是它既是內聯元素，又能夠設置width和height。

看例子

.inline{
    display:inline; 
    width:100px; 
    height:100px; 
    padding:10px; 
    background-color:red;
}
.block{
    display:block; 
    width:100px; 
    height:100px; 
    padding:10px;
    background-color:green;
}
.inline-block{
    display:inline-block; 
    width:100px;
    height:100px; 
    padding:10px;
    background-color:blue;
}


<div class="wrap">
    <div class="inline">
    inline
    </div>inline
    <div class="block">
    block
    </div> block
    <div class="inline-block">
    inline-block
    </div>inline-block
</div>

這裏說起下內聯元素和塊級元素的一些特色：

內聯元素：

和其餘元素都在一行上；
元素的高度、寬度及頂部和底部邊距不可設置；
元素的寬度就是它包含的文字或圖片的寬度，不可改變。

塊級元素：

   每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）；
   元素的高度、寬度、行高以及頂和底邊距均可設置。
   元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。

經常使用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form

內聯塊狀元素：

和其餘元素都在一行上；
元素的高度、寬度、行高以及頂和底邊距均可設置。

經常使用的內聯塊狀元素有：
<img>、<input>

空元素：即沒有內容的HTML元素，例如：br、meta、hr、link、input、img

其餘display的屬性值不是很經常使用，其具體的含義以下：

list-item：     此元素會做爲列表顯示。
run-in：     此元素會根據上下文做爲塊級元素或內聯元素顯示。
table：     此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。
inline-table：     此元素會做爲內聯表格來顯示（相似 <table>），表格先後沒有換行符。
table-row-group：     此元素會做爲一個或多個行的分組來顯示（相似 <tbody>）。
table-header-group：     此元素會做爲一個或多個行的分組來顯示（相似 <thead>）。
table-footer-group：     此元素會做爲一個或多個行的分組來顯示（相似 <tfoot>）。
table-row：     此元素會做爲一個表格行顯示（相似 <tr>）。
table-column-group：     此元素會做爲一個或多個列的分組來顯示（相似 <colgroup>）。
table-column：     此元素會做爲一個單元格列顯示（相似 <col>）
table-cell：     此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）
table-caption：     此元素會做爲一個表格標題顯示（相似 <caption>）
inherit：     規定應該從父元素繼承 display 屬性的值。

另外有兩個已經廢除的屬性值：
compact    CSS 中有值 compact，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。
marker    CSS 中有值 marker，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。

六、瀏覽器的內核分別是什麼？

1、Trident內核表明產品Internet Explorer，又稱其爲IE內核。Trident（又稱爲MSHTML），是微軟開發的一種排版引擎。使用Trident渲染引擎的瀏覽器包括：IE、傲遊、世界之窗瀏覽器、Avant、騰訊TT、Netscape 八、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等

2、Gecko內核表明做品Mozilla FirefoxGecko是一套開放源代碼的、以C++編寫的網頁排版引擎。Gecko是最流行的排版引擎之一，僅次於Trident。使用它的最著名瀏覽器有Firefox、Netscape6至 9。

3、WebKit內核表明做品Safari、Chromewebkit 是一個開源項目，包含了來自KDE項目和蘋果公司的一些組件，主要用於Mac OS系統，它的特色在於源碼結構清晰、渲染速度極快。缺點是對網頁代碼的兼容性不高，致使一些編寫不標準的網頁沒法正常顯示。主要表明做品有Safari和Google的瀏覽器Chrome。

4、Presto內核表明做品OperaPresto是由Opera Software開發的瀏覽器排版引擎，供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動態功能，例如網頁或其部分可隨着DOM及Script語法的事件而從新排版。

七、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
繪畫 canvas;
用於媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
sessionStorage 的數據在瀏覽器關閉後自動刪除;
語意化更好的內容元素，好比 article、footer、heade

八、doctype的做用

<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。

標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。

HTML5 爲何只須要寫 <!DOCTYPE HTML>？




HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；

 而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

九、data-屬性的做用是什麼？

data-爲前端開發者提供自定義的屬性，這些屬性集能夠經過對象的dataset屬性獲取，不支持該屬性的瀏覽器能夠經過 getAttribute方法獲取。ppk提到過使用rel屬性，lightbox庫推廣了rel屬性，HTML5提供了data-作替代，這樣能夠更好地使用自定義的屬性。

上面HTML代碼提供了單個文章所擁有的一些屬性。經過JS代碼能夠得到這些自定義的屬性。

var post = document.getElementsByTagName('div')[0];
post.dataset; // DOMStringMap
post.dataset.commentNum; // 10

須要注意的是，data-以後的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峯風格。

並非全部的瀏覽器都支持.dataset屬性，測試的瀏覽器中只有Chrome和Opera支持。

經過js方式給data-*設置值

<div id="content" data-user-list="user_list">data-user_list自定義屬性 </div>

//js

var content= document.getElementById('content');

content.dataset.name='我叫tom'

alert(content.dataset.name)

//jquery

$('#content').data('name','我叫tom');//寫

getAttribute/setAttribute方法的使用

var content= document.getElementById('content');

content.dataset.birthDate = '19990619';

content.setAttribute('age', 25);

console.log(content.getAttribute('data-age')); //25 console.log(content.getAttribute('data-birth-date')); //19990519

十、描述一下<script>、<script async>、<script defer>之間的不一樣？

向html頁面中插入javascript代碼的主要方法就是經過script標籤。其中包括兩種形式，第一種直接在script標籤之間插入js代碼，第二種便是經過src屬性引入外部js文件。因爲解釋器在解析執行js代碼期間會阻塞頁面其他部分的渲染，對於存在大量js代碼的頁面來講會致使瀏覽器出現長時間的空白和延遲，爲了不這個問題，建議把所有的js引用放在</body>標籤以前。

　　script標籤存在兩個屬性，defer和async，所以script標籤的使用分爲三種狀況：

　　1.<script src="example.js"></script>

　　　沒有defer或async屬性，瀏覽器會當即加載並執行相應的腳本。也就是說在渲染script標籤以後的文檔以前，不等待後續加載的文檔元素，讀到就開始加載和執行，此舉會阻塞後續文檔的加載；

　　2.<script async src="example.js"></script>

　　有了async屬性，表示後續文檔的加載和渲染與js腳本的加載和執行是並行進行的，即異步執行；

　　3.<script defer src="example.js"></script>

有了defer屬性，加載後續文檔的過程和js腳本的加載(此時僅加載不執行)是並行進行的(異步)，js腳本的執行須要等到文檔全部元素解析完成以後，DOMContentLoaded事件觸發執行以前。

　　下圖能夠直觀的看出三者之間的區別:

　　其中藍色表明js腳本網絡加載時間，紅色表明js腳本執行時間，綠色表明html解析。

　　從圖中咱們能夠明確一下幾點：

　　1.defer和async在網絡加載過程是一致的，都是異步執行的；

　　2.二者的區別在於腳本加載完成以後什麼時候執行，能夠看出defer更符合大多數場景對應用腳本加載和執行的要求；

　　3.若是存在多個有defer屬性的腳本，那麼它們是按照加載順序執行腳本的；而對於async，它的加載和執行是牢牢挨着的，不管聲明順序如何，只要加載完成就馬上執行，它對於應用腳本用處不大，由於它徹底不考慮依賴。

小結：

defer 和 async 的共同點是都是能夠並行加載JS文件，不會阻塞頁面的加載，不一樣點是 defer的加載完成以後，JS會等待整個頁面所有加載完成了再執行，而async是加載完成以後，會立刻執行JS，因此假如對JS的執行有嚴格順序的話，那麼建議用 defer加載。

十一、實現add(2,5);//7

add(2)(5);//7的函數

var add = function(x,r) { if(arguments.length == 1){ return function(y) { return x + y; }; }else{ return x+r; } }; console.log(add(2)(5)); console.log(add(2,5));

十二、寫出一下程序的打印結果。

console.log('one');

setTimeout(function(){

　　console.log('two');

},0);

console.log('three');

//one

//three

//two

console.log('one');

setTimeout(function(){

　　console.log('two');

},0);

console.log('three');


for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }(),0);
}
與上面配合結果爲：//one three 0 1 2 3 4 two

for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    },0);
}

與上面配合結果爲：//one three two 5個5

for (let i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    },0);
}

與上面配合結果爲：//one three two 0 1 2 3 4

解析：

for (var i = 0; i < 3; i++) {
2     setTimeout(function() {
3         console.log(i);
4     }, 0);
5     console.log(i);
6 }

結果是：0 1 2 3 3 3
不少公司面試都愛出這道題，此題考察的知識點仍是蠻多的。都考察了那些知識點呢？
異步、做用域、閉包。
咱們來簡化此題：

1 setTimeout(function() {
2         console.log(1);
3 }, 0);
4 console.log(2);   //先打印2，再打印1

由於是setTimeout是異步的。
正確的理解setTimeout的方式(註冊事件)：有兩個參數，第一個參數是函數，第二參數是時間值。調用setTimeout時，把函數參數，放到事件隊列中。等主程序運行完，再調用。

就像咱們給按鈕綁定事件同樣：

1 btn.onclick = function() {
2         alert(1);
3 };

這麼寫完，會彈出1嗎。不會！！只是綁定事件而已！必須等咱們去觸發事件，好比去點擊這個按鈕，纔會彈出1。

setTimeout也是這樣的！只是綁定事件，等主程序運行完畢後，再去調用。

setTimeout的時間值是怎麼回事呢？

1 setTimeout(fn, 2000)

程序會不會報錯？不會！並且還會準確得打印1。爲何？由於真正去執行console.log(i)這句代碼時，var i = 1已經執行完畢了！

因此咱們進行dom操做。能夠先綁定事件，而後再去寫其餘邏輯。

1 window.onload = function() {
2         fn();
3 }
4 var fn = function() {
5         alert('hello')
6 };

這麼寫，徹底是能夠的。由於異步！

es5中是沒有塊級做用域的。

1 for (var i = 0; i < 3; i++) {}
2 console.log(i); //3，也就說i能夠在for循環體外訪問到。因此是沒有塊級做用域。

這回咱們再來看看原題。
原題使用了for循環。循環的本質是幹嗎的？是爲了方便咱們程序員，少寫重複代碼。

原題等價於：

 1 var i = 0;
 2 setTimeout(function() {
 3     console.log(i);
 4 }, 0);
 5 console.log(i);
 6 i++;
 7 setTimeout(function() {
 8     console.log(i);
 9 }, 0);
10 console.log(i);
11 i++;
12 setTimeout(function() {
13     console.log(i);
14 }, 0);
15 console.log(i);
16 i++;

由於setTimeout是註冊事件。根據前面的討論，能夠都放在後面。
原題又等價於以下的寫法：

 1 var i = 0;
 2 console.log(i);
 3 i++;
 4 console.log(i);
 5 i++;
 6 console.log(i);
 7 i++;
 8 setTimeout(function() {
 9     console.log(i);
10 }, 0);
11 setTimeout(function() {
12     console.log(i);
13 }, 0);
14 setTimeout(function() {
15     console.log(i);
16 }, 0);  //彈出 0 1 2 3 3 3

怎麼保證能彈出0，1， 2呢？

1 for (var i = 0; i < 3; i++) {
2     setTimeout((function(i) {
3         return function() {
4             console.log(i);
5         };
6     })(i), 0);  //改成當即執行的函數
7     console.log(i);  
8 }

十一、用ajax請求後臺數據，是否每次響應狀態碼爲200時，都會執行success函數，何時會進入error函數？

1. 返回的數據類型必定要符合定義的數據類型。即若是你定義的 dataType 是 json 類型的，那麼返回來的數據必定是 json 才能夠，平且否則就會執行 error 裏的程序塊兒。[/b] [color=red]
(1) 同時須要特別的注意返回的JSON數據是不是嚴格的JSON格式.
(2) 也應該嚴重關切當後臺返回的是一個List 數據（List當中的數據是Json格式）時，有沒髒數據即不是嚴格的JSON格式。
很隱蔽的多是數據某一個字段中在開始或末尾含有特殊字符，以"回車鍵"、"Tab鍵"等
這類隱蔽錯誤的規避措施就是好的編程習慣：
a. 對於在頁面填寫入庫的數據最好強制性的作，去空操做<利用客戶端最好>。
b. 特殊的業務需注意特殊字符。
這樣還不夠，由於在開發過程當中測試或開發人員本身在數據庫中手動添加數據，可能會多加了空格等，致使程序調試，測試帶來了麻煩。這時就須要考慮在後臺代碼對獲取的數據作處理。[/color][/align][/color]
[b]
2. 緣由是ajax請求跨域了，解決方法是在兩個文件裏都添加一段 js: [/b]document.domain，或者採用Jsonp的方式，如個人前一篇blog中提到的。

還有一點對JQuery 中Ajax的一點其它的認識：客戶端發起請求，獲得服務器端的相應是200，<正確拿到服務器響應的數據>沒有問題.此時在判斷進入success 對應的回調函數仍是進入到error對應的回調函數以前，可能會校驗一些東西：
1. 返回的每條數據是不是dataType中定義的數據類型。若是有部分數據不是或者哪怕一條數據沒有嚴格的按照dataType定義的類型，程序就會進入到error:function(){****}
2. 請求的域和當前域是不是同一域，若是不是同一域也十分有可能進入error:function(){***}

十二、常見的http請求錯誤代碼緣由及解決方法？

HTTP 錯誤 400

400 請求出錯因爲語法格式有誤，服務器沒法理解此請求。不做修改，客戶程序就沒法重複此請求。

HTTP 錯誤 401

401.1 未受權：登陸失敗

此錯誤代表傳輸給服務器的證書與登陸服務器所需的證書不匹配。

請與 Web 服務器的管理員聯繫，以確認您是否具備訪問所請求資源的權限。 401.2 未受權：服務器的配置致使登陸失敗

此錯誤代表傳輸給服務器的證書與登陸服務器所需的證書不匹配。此錯誤一般由未發送正確的 WWW 驗證表頭字段所致。

請與 Web 服務器的管理員聯繫，以確認您是否具備訪問所請求資源的權限。 401.3 未受權：因爲資源中的 ACL 而未受權

此錯誤代表客戶所傳輸的證書沒有對服務器中特定資源的訪問權限。此資源多是客戶機中的地址行所列出的網頁或文件，也多是處理客戶機中的地址行所列出的文件所需服務器上的其餘文件。

請記錄試圖訪問的完整地址，並與 Web 服務器的管理員聯繫以確認您是否具備訪問所請求資源的權限。

401.4 未受權：受權服務被篩選程序拒絕

此錯誤代表 Web 服務器已經安裝了篩選程序，用以驗證鏈接到服務器的用戶。此篩選程序拒絕鏈接到此服務器的真品證書的訪問。請記錄試圖訪問的完整地址，並與 Web 服務器的管理員聯繫以確認您是否具備訪問所請求資源的權限。

401.5 未受權：ISAPI/CGI 應用程序的受權失敗

此錯誤代表試圖使用的 Web服務器中的地址已經安裝了 ISAPI 或 CGI程序，在繼續以前用以驗證用戶的證書。此程序拒絕用來鏈接到服務器的真品證書的訪問。

請記錄試圖訪問的完整地址，並與 Web服務器的管理員聯繫以確認您是否具備訪問所請求資源的權限

HTTP 錯誤 403 
403.1 禁止：禁止執行訪問 
若是從並不容許執行程序的目錄中執行 CGI、ISAPI或其餘執行程序就可能引發此錯誤。  
403.2 禁止：禁止讀取訪問 
若是沒有可用的默認網頁或未啓用此目錄的目錄瀏覽，或者試圖顯示駐留在只標記爲執行或腳本權限的目錄中的HTML 頁時就會致使此錯誤。  
403.3 禁止：禁止寫訪問 
若是試圖上載或修改不容許寫訪問的目錄中的文件，就會致使此問題。 
403.4 禁止：須要 SSL 
此錯誤代表試圖訪問的網頁受安全套接字層（SSL）的保護。要查看，必須在試圖訪問的地址前輸入https:// 以啓用 SSL。 
403.5 禁止：須要 SSL 128 
此錯誤消息代表您試圖訪問的資源受 128位的安全套接字層（SSL）保護。要查看此資源，須要有支持此SSL 層的瀏覽器。 
請確認瀏覽器是否支持 128 位 SSL安全性。若是支持，就與 Web服務器的管理員聯繫，並報告問題。 
403.6 禁止：拒絕 IP 地址 
若是服務器含有不容許訪問此站點的 IP地址列表，而且您正使用的 IP地址在此列表中，就會致使此問題。  
403.7 禁止：須要用戶證書 
當試圖訪問的資源要求瀏覽器具備服務器可識別的用戶安全套接字層（SSL）證書時就會致使此問題。可用來驗證您是否爲此資源的合法用戶。 
請與 Web服務器的管理員聯繫以獲取有效的用戶證書。 
403.8 禁止：禁止站點訪問 
若是 Web服務器不爲請求提供服務，或您沒有鏈接到此站點的權限時，就會致使此問題。 
403.9 禁止訪問：所鏈接的用戶太多 
若是 Web太忙而且因爲流量過大而沒法處理您的請求時就會致使此問題。請稍後再次鏈接。 
403.10 禁止訪問：配置無效 
此時 Web 服務器的配置存在問題。 
403.11 禁止訪問：密碼已更改 
在身份驗證的過程當中若是用戶輸入錯誤的密碼，就會致使此錯誤。請刷新網頁並重試。 
403.12 禁止訪問：映射程序拒絕訪問 
拒絕用戶證書試圖訪問此 Web 站點。 請與站點管理員聯繫以創建用戶證書權限。若是必要，也能夠更改用戶證書並重試。

HTTP 錯誤 404

404 找不到 Web 服務器找不到您所請求的文件或腳本。請檢查URL 以確保路徑正確。

HTTP 錯誤 405

405 不容許此方法對於請求所標識的資源，不容許使用請求行中所指定的方法。請確保爲所請求的資源設置了正確的 MIME 類型。

HTTP 錯誤 406

406 不可接受根據此請求中所發送的「接受」標題，此請求所標識的資源只能生成內容特徵爲「不可接受」的響應實體。

HTTP 錯誤 407

407 須要代理身份驗證在可爲此請求提供服務以前，您必須驗證此代理服務器。請登陸到代理服務器，而後重試。

HTTP 錯誤 412

412 前提條件失敗在服務器上測試前提條件時，部分請求標題字段中所給定的前提條件估計爲FALSE。客戶機將前提條件放置在當前資源 metainformation（標題字段數據）中，以防止所請求的方法被誤用到其餘資源。

HTTP 錯誤 414

414 Request-URI 太長 Request-URL太長，服務器拒絕服務此請求。僅在下列條件下才有可能發生此條件：客戶機錯誤地將 POST 請求轉換爲具備較長的查詢信息的 GET 請求。客戶機遇到了重定向問題（例如，指向自身的後綴的重定向前綴）。服務器正遭受試圖利用某些服務器（將固定長度的緩衝區用於讀取或執行 Request-URI）中的安全性漏洞的客戶干擾。

HTTP 錯誤 500

500 服務器的內部錯誤 Web 服務器不能執行此請求。請稍後重試此請求。

HTTP 錯誤 501

501 未實現 Web 服務器不支持實現此請求所需的功能。請檢查URL 中的錯誤

HTTP 錯誤 502

502 網關出錯當用做網關或代理時，服務器將從試圖實現此請求時所訪問的upstream 服務器中接收無效的響應。

1三、網頁常見錯誤代碼列表

1 網址協議不支持的協議。

2 檢測器內部錯誤。

3 網址格式不正確。

5 沒法鏈接到代理服務器。

6 沒法鏈接到服務器或找不到域名。

7 鏈接服務器失敗。

28 操做超時。可能緣由：頁面執行時間過長、服務器壓力大。

52 服務器未返回任何內容。

100 Continue 初始的請求已經接受，客戶應當繼續發送請求的其他部分。

101 Switching Protocols 服務器將聽從客戶的請求轉換到另一種協議

200 OK 一切正常

201 Created 服務器已經建立了文檔，Location頭給出了它的URL。

202 Accepted 已經接受請求，但處理還沒有完成。

203 Non-Authoritative Information 文檔已經正常地返回，但一些應答頭可能不正確，由於使用的是文檔的拷貝。

204 No Content 沒有新文檔，瀏覽器應該繼續顯示原來的文檔。若是用戶按期地刷新頁面，而Servlet能夠肯定用戶文檔足夠新，這個狀態代碼是頗有用的。

205 Reset Content 沒有新的內容，但瀏覽器應該重置它所顯示的內容。用來強制瀏覽器清除表單輸入內容。

206 Partial Content 客戶發送了一個帶有Range頭的GET請求，服務器完成了它。

300 Multiple Choices 客戶請求的文檔能夠在多個位置找到，這些位置已經在返回的文檔內列出。若是服務器要提出優先選擇，則應該在Location應答頭指明。

301 Moved Permanently 客戶請求的文檔在其餘地方，新的URL在Location頭中給出，瀏覽器應該自動地訪問新的URL。

302 Found 相似於301，但新的URL應該被視爲臨時性的替代，而不是永久性的。注意，在HTTP1.0中對應的狀態信息是「Moved Temporatily」。出現該狀態代碼時，瀏覽器可以自動訪問新的URL，所以它是一個頗有用的狀態代碼。注意這個狀態代碼有時候能夠和301替換使用。例如，若是瀏覽器錯誤地請求http://host/~user（缺乏了後面的斜槓），有的服務器返回301，有的則返回302。嚴格地說，咱們只能假定只有當原來的請求是GET時瀏覽器纔會自動重定向。請參見307。

303 See Other 相似於301/302，不一樣之處在於，若是原來的請求是POST，Location頭指定的重定向目標文檔應該經過GET提取。

304 Not Modified 客戶端有緩衝的文檔併發出了一個條件性的請求（通常是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務器告訴客戶，原來緩衝的文檔還能夠繼續使用。

305 Use Proxy 客戶請求的文檔應該經過Location頭所指明的代理服務器提取。

307 Temporary Redirect 和302（Found）相同。許多瀏覽器會錯誤地響應302應答進行重定向，即便原來的請求是POST，即便它實際上只能在POST請求的應答是303時才能重定向。因爲這個緣由，HTTP 1.1新增了307，以便更加清除地區分幾個狀態代碼：當出現303應答時，瀏覽器能夠跟隨重定向的GET和POST請求；若是是307應答，則瀏覽器只能跟隨對GET請求的重定向。

400 Bad Request 請求出現語法錯誤。

401 Unauthorized 客戶試圖未經受權訪問受密碼保護的頁面。應答中會包含一個WWW-Authenticate頭，瀏覽器據此顯示用戶名字/密碼對話框，而後在填寫合適的Authorization頭後再次發出請求。

403 Forbidden 資源不可用。服務器理解客戶的請求，但拒絕處理它。一般因爲服務器上文件或目錄的權限設置致使。

404 Not Found 沒法找到指定位置的資源。這也是一個經常使用的應答。

405 Method Not Allowed 請求方法（GET、POST、HEAD、Delete、PUT、TRACE等）對指定的資源不適用。

406 Not Acceptable 指定的資源已經找到，但它的MIME類型和客戶在Accpet頭中所指定的不兼容。

407 Proxy Authentication Required 相似於401，表示客戶必須先通過代理服務器的受權。

408 Request Timeout 在服務器許可的等待時間內，客戶一直沒有發出任何請求。客戶能夠在之後重複同一請求。

409 Conflict 一般和PUT請求有關。因爲請求和資源的當前狀態相沖突，所以請求不能成功。

410 Gone 所請求的文檔已經再也不可用，並且服務器不知道應該重定向到哪個地址。它和404的不一樣在於，返回407表示文檔永久地離開了指定的位置，而404表示因爲未知的緣由文檔不可用。

411 Length Required 服務器不能處理請求，除非客戶發送一個Content-Length頭。

412 Precondition Failed 請求頭中指定的一些前提條件失敗。