Html/Css/Jquery知識點集錦

時間 2019-12-05

標籤 html css jquery 知識集錦欄目 HTML 简体版

原文原文鏈接

Html

一、Html5有哪些新特性，移除了哪些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區別HTML和HTML5?javascript

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
拖拽釋放(Drag and drop) API
語義化更好的內容標籤（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
getCurrentPosition() 方法來得到用戶的位置

1.檢測是否支持地理定位
2.若是支持，則運行 getCurrentPosition() 方法。若是不支持，則向用戶顯示一段消息。
3.若是getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象
4.showPosition() 函數得到並顯示經度和緯度
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage的數據在瀏覽器關閉後自動刪除
表單控件，calendar、date、time、email、url、search
新的技術webworker, websocket, Geolocation
移除的元素
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
HTML5新標籤兼容：css

IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還須要添加標籤默認的樣式：
固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
首先利用條件註釋判斷是否是IE9以前版本，若是是就執行js。先把全部新標籤寫入e數組中，而後遍歷整個數組，並建立副本。

該腳本已經託管在Google Project Hosting上，你能夠直接外鏈這個腳本：

　另外，這段腳本須要放在頁面起始的部分，最好是head中，不要放在底部。這樣IE在解析頁面標籤以前就會先運行這段代碼。html

如何區分： DOCTYPE聲明新增的結構元素功能元素

2.目前主流的瀏覽器內核有哪些，有哪些常見的兼容性問題前端

Ie(Ie內核) 火狐（Gecko）谷歌（webkit） opear(Presto)
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)
兼容性問題：html5

png24位的圖片在iE6瀏覽器上出現背景

解決方案：作成PNG8，也能夠引用一段腳本處理.

瀏覽器默認的margin和padding不一樣

解決方案：加一個全局的 *{margin:0;padding:0;} 來統一。

IE6 雙邊距 bug：在 IE6 下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。

#box{ float:left; width:10px; margin:0 0 0 10px;}

這種狀況之下 IE6 會產生20px的距離java

解決方案：在float的標籤樣式控制中加入 display:inline; 將其轉化爲行內屬性。( 這個符號只有 IE6 會識別)

漸進識別的方式，從整體中逐漸排除局部。

首先，巧妙的使用「9」這一標記，將IE遊覽器從全部狀況中分離出來。
接着，再次使用 "+" 將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。
.bb{
    background-color:#f1ee18; /全部識別/
    .background-color:#00deff9; /IE六、七、8識別/
    +background-color:#a200ff; /IE六、7識別/
    _background-color:#1e0bd1; /IE6識別/
} jquery

IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用 getAttribute() 獲取自定義屬性；Firefox下,只能使用getAttribute()獲取自定義屬性

解決方法：統一經過getAttribute()獲取自定義屬性

IE下，event對象有 x、y 屬性，可是沒有 pageX、pageY屬性; Firefox下，event對象有 pageX、pageY 屬性，可是沒有 x、y 屬性

解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示

解決方法：可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決

超連接訪問事後 hover 樣式就不出現了，被點擊訪問過的超連接樣式不在具備 hover 和 active 了

解決方法：改變CSS屬性的排列順序 L-V-H-A
a:link {}
a:visited {}
a:hover {}
a:active {}

怪異模式問題：漏寫 DTD 聲明，Firefox 仍然會按照標準模式來解析網頁，但在 IE 中會觸發怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫 DTD 聲明的好習慣。如今可使用html5 推薦的寫法：`<!DOCTYPE html>
上下margin重合問題：ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。

解決方法：養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。

ie6對png圖片格式支持很差

解決方案：引用一段腳本處理

3.怎麼存儲和讀取localstorageandroid

存值setItem localStorage.setItem('a','1'); //存儲的值爲'1'
取值getItem var a3 = localStorage.getItem('a');//獲取a的值

http://www.cnblogs.com/yunkou...css3

4.描述一段語義的html代碼程序員

（HTML5中新增長的不少標籤（如：<article>、<nav>、<header>和<footer>等）就是基於語義化設計原則）

< div id="header">
< h1>標題< /h1>
< h2>專一Web前端技術< /h2>
< /div>

語義 HTML 具備如下特性：
文字包裹在元素中，用以反映內容。例如：
段落包含在 <p> 元素中。
順序表包含在<ol>元素中。
從其餘來源引用的大型文字塊包含在<blockquote>元素中。
HTML 元素不能用做語義用途之外的其餘目的。例如：
<h1>包含標題，但並不是用於放大文本。
<blockquote>包含大段引述，但並不是用於文本縮進。
空白段落元素 ( <p></p> ) 並不是用於跳行。
文本並不直接包含任何樣式信息。例如：
不使用 <font> 或 <center> 等格式標記。
類或 ID 中不引用顏色或位置。

5.99%的網站都須要被重構是那本書上寫的？

網站重構：應用web標準進行設計（第2版）

6.什麼叫優雅降級和漸進加強？

優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。（Web站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工做。因爲IE獨特的盒模型佈局問題，針對不一樣版本的IE的hack實踐過優雅降級了，爲那些沒法支持功能的瀏覽器增長候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效。）
漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。（從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害於基礎瀏覽器的額外樣式和功能。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。）
區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的、可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。

7.頁面重構怎麼操做？

編寫 CSS、讓頁面結構更合理化，提高用戶體驗，實現良好的頁面效果和提高性能。
頁面重構就是根據原有頁面內容和結構的基礎上，經過div+css寫出符合web標準的頁面結構。

具體實現要達到如下三點：

結構完整，可經過標準驗證

標籤語義化，結構合理

充分考慮到頁面在站點中的「做用和重要性」，並對其進行有針對性的優化

8.語義化的理解？

直觀的認識標籤，對於搜索引擎的抓取有好處
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。
搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

9.HTML5的離線儲存？

localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 數據在瀏覽器關閉後自動刪除。

10.Document.write和innerHTML的區別

document.write是重寫整個document, 寫入內容是字符串的html
innerHTML是HTMLElement的屬性，是一個元素的內部html內容
document.write只能重繪整個頁面
innerHTML能夠重繪頁面的一部分
一、write是DOM方法,向文檔寫入HTML表達式或JavaScript代碼，可列出多個參數，參數被順序添加到文檔中；innerHTML是DOM屬性,設置或返回調用元素開始結束標籤之間的HTML元素。
二、二者均可向頁面輸出內容,innerHTML比document.write更靈活。
當文檔加載時調用document.write直接向頁面輸出內容，文檔加載結束後調用document.write輸出內容會重寫整個頁面。一般按照兩種的方式使用 write() 方法：一是在使用該方在文檔中輸出 HTML，二是在調用該方法的的窗口以外的窗口、框架中產生新文檔（務必使用close關閉文檔）。
在讀模式下，innerHTML屬性返回與調用元素的全部子節點對應的HTML標記，在寫模式下，innerHTML會根據指定的值建立新的DOM樹替換調用元素原先的全部子節點。
三、二者均可動態包含外部資源如JavaScript文件
經過document.write插入<script>元素會自動執行其中的腳本；
大多數瀏覽器中，經過innerHTML插入<script>元素並不會執行其中的腳本。

11.前端頁面有哪三層構成，分別是什麼？做用是什麼？

結構層（由 html 或 xhtml 之類的標記語言負責建立）
表示層（主要是指頁面渲染,由css控制）
行爲層（javascript語言和dom主宰的領域）

12.Div+css的佈局較table佈局有什麼優勢？

代碼少，頁面文件小，下載快
佈局靈活，網頁有小的改動不影響搜索引擎收錄
影響搜索排名

13.Meta標籤的經常使用屬性有幾種？做用是什麼？

meta標籤共有兩個屬性，它們分別是http-equiv屬性和name屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。

http://blog.csdn.net/fu_manxi...

14.盒子模型模式是什麼？它和標準模式有什麼區別？

在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分能夠顯示相應的內容，而有的部分只用來分隔相鄰的區域。4個部分一塊兒構成了css中元素的盒模型。

15.爲何 DOCTYPE 只用添加<!DOCTYPE html> 就能夠了?
http://www.cnblogs.com/zhangb...

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

HTML5 不基於 SGML（標準通用標記語言），所以不須要對DTD（指定公開文本類，即所引用的對象類型。）進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

17.請簡述Doctype的用途？嚴格模式與混雜模式如何區分？它們有何意義

（1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器以何種模式（html/Xhtml）來渲染文檔。
（2）、嚴格模式的排版和JS運做模式是以該瀏覽器支持的最高標準運行。（若是頁面上有完整的dtd聲明則是嚴格模式）
（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。（便可實現IE5.5如下版本瀏覽器的渲染方式）
（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

18.IE和標準下有哪些兼容性的寫法5種

Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement || ev.target

19.SGML、HTML、XML之間是什麼關係？

SGML是標準通用標記語言
HTML是超文本標記語言，主要是用於規定怎麼顯示網頁
XML是可擴展標記語言是將來網頁語言的發展方向，可能會替代HTML，他和HTML都是由SGML延伸轉變而來的，你能夠理解SGML是最先的版本，但如今已經淘汰不用了
XML和HTML的最大區別就在於 XML的標籤是能夠本身建立的，數量無限多，而HTML的標籤都是固定的並且數量有限。
還有一個是XHTML也是如今基本上全部網頁都在用的標記語言，他其實和HTML沒什麼本質的區別標籤都同樣，用法也都同樣，就是比HTML更嚴格，好比標籤必須都用小寫，標籤都必須有閉合標籤等。

20.HTML和XHTML---兩者有什麼區別，你以爲應該使用哪個並說出理由

區別：HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言。簡單來講，XHTML 能夠認爲是 XML 版本的 HTML，爲符合 XML 要求，XHTML 語法上要求更嚴謹些。

語法上XHTML要求：

一、XHTML元素必須被正確地嵌套。
二、XHTML全部元素必須關閉
三、標籤名必須用小寫字母
四、XHTML 文檔必須擁有根元素。
五、全部的屬性必須用引號""括起來
六、把全部<和&特殊符號用編碼表示
七、給全部屬性賦一個值
八、不要在註釋內容中使「--」
九、圖片必須有說明文字

功能上：

主要是XHTML可兼容各大瀏覽器、手機以及PDA，而且瀏覽器也能快速正確地編譯網頁。

21.瀏覽器標準模式和怪異模式之間的區別是什麼?

盒子模型、渲染模式的不一樣
使用 window.top.document.compatMode可顯示爲何模式
標準模式是指瀏覽器按W3C標準解析執行代碼；
怪異模式則是使用瀏覽器本身的方式解析執行代碼。由於不一樣瀏覽器解析執行的方式不同，因此咱們稱之爲怪異模式。
瀏覽器解析時到底使用標準模式仍是怪異模式，與你網頁中的DTD聲明直接相關，DTD聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略DTD聲明,將使網頁進入怪異模式(quirks mode)。

22.標籤上title與alt屬性的區別是什麼?

Alt 當圖片不顯示時，用文字表明。
Title 爲該屬性提供信息

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

（1）web標準：

什麼是web標準：一系列標準的集合，包括結構化標準語言（html等）、表現標準語言（css）、行爲標準語言（EMCAScript等）。這些標準大部分由萬維網聯盟起草和發佈
爲何使用web標準：爲了解決因瀏覽器版本不一樣、軟硬件設備不一樣致使的需多版本開發的問題

（2）W3C：萬維網聯盟，是一個web開發的國際性聯盟
標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性；

CSS

一、元素居中的幾種方法

方法1： 絕對定位法（transform屬性）不須要知道元素的寬、高
使用css3的transform設置元素進行水平垂直居中，不須要知道元素的寬、高
用絕對定位來實現的垂直居中，取決與元素的寬度和高度，能夠用下面這兩個公式來計算元素的左邊距和上邊距：
元素的寬度/2 = 負左邊距
元素的高度/2 = 負上邊距

#father{
    //假設主框爲600*300
    position: relative；     /*很重要*/
    width: 600px;
    height: 300px;
    background-color: blue:
}
#child{
   position: absolute;     /*很重要*/
   /*子元素左上角定位到父級元素的正中間*/
   top: 50%;
   left: 50%;    
   /*子元素相對於自身左移上移到中間，實現居中定位*/ 
   transform: translate(-50%,-50%);   
   background-color: lawngreen;
}

上述方法利用了CSS3中的 transform:translate(x,y) 屬性，這是子元素相對於自身的定位實現的x軸和y軸的偏移，若是子元素沒有設置寬和高值的話能夠用這個方法實現（作自適應頁面的時候用到）

方法2： 定位法（相對位置）已知子元素的寬和高
利用position生成絕對定位的元素進行水平垂直居中，該方法須要知道元素的寬、高

#father{
    position:relative;
    width:600px;
    height:300px;
    background-color:deepskyblue;
    border: 2px red dashed;
}
#child{
    position: absolute;
    width:200px;
    height:100px;
    top: 50%;
    left: 50%;
    /*transform: translate(-50%,-50%);*/
    margin-left:-100px;
    margin-top:-50px;
    background-color: lawngreen;
    /*內容居中*/
    text-align: center;
    line-height:100px;  /*行間距和div寬度相同*/
}

方法3： 定位法 margin：auto

使用position生成絕對定位與margin:auto結合讓元素進行水平垂直居中，改方法須要設置元素的寬、高

#father{
            position:relative;
            width:600px;
            height:300px;
            background-color:deepskyblue;
            border: 2px red dashed;
        }
#child{
    position: absolute;
    width : 200px;
    height : 100px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: lawngreen;
}

僅實現水平居中（子元素）： margin：0 auto； (當子元素position爲非默認及relative時，這種設置會失效)
僅實現垂直居中（子元素）：margin：auto 0；
上述文字沒有實現居中，可參考方法2中的居中，可是要注意：如<p>等標籤中內的文字內容水平居中：使用{text-align:center}。垂直居中設置該元素的行高等於元素的高。

方法4： display：table-cell 實現法
display：table-cell 主要針對多行文字內容的垂直居中對齊。
經過display轉化成爲表格的形式，再採用垂直居中的方法獲得須要的結果
display:table 此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。
display:table-cell 此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）

div {
    display: table-cell;
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #F00;
}

二、CSS3動畫（360度旋轉、旋轉放大、放大、移動）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width:120px;
            height:120px;
            line-height:120px;
            margin: 20px;
            background-color: #5cb85c;
            float: left;
            font-size: 12px;
            text-align: center;
            color:orangered;
        }
        /*效果一：360°旋轉 修改rotate(旋轉度數)*/
        .img1 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img1:hover {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }

        /*效果二：放大 修改scale(放大的值)*/
        .img2 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img2:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
        }
       /*效果三：旋轉放大 修改rotate(旋轉度數) scale(放大值)*/
        .img3 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img3:hover {
            transform: rotate(360deg) scale(1.2);
            -webkit-transform: rotate(360deg) scale(1.2);
            -moz-transform: rotate(360deg) scale(1.2);
            -o-transform: rotate(360deg) scale(1.2);
            -ms-transform: rotate(360deg) scale(1.2);
        }
        /*效果四：上下左右移動 修改translate(x軸,y軸)*/
        .img4 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img4:hover {
            transform: translate(0, -10px);
            -webkit-transform: translate(0, -10px);
            -moz-transform: translate(0, -10px);
            -o-transform: translate(0, -10px);
            -ms-transform: translate(0, -10px);
        }
    </style>
</head>
<body>
<div class="img1">效果一：360°旋轉 </div>
<div class="img2">效果二：放大</div>
<div class="img3">效果三：旋轉放大</div>
<div class="img4">效果四：上下左右移動 </div>

</body>
</html>

三、CSS 實現左側固定，右側自適應兩欄佈局的方法: https://www.cnblogs.com/vicky...

1>將左側div浮動，右側div設置margin-left
2>固定區採用絕對定位，自適應區設置margin
3>標準瀏覽器的方法 table-cell
4>雙float + calc()計算屬性
5>雙inline-block + calc()計算屬性
6>float + BFC方法
7>flex

四、純CSS寫三角形-border法
https://www.cnblogs.com/blosa...
https://blog.csdn.net/linda_4...

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

五、css3實現loading :https://www.cnblogs.com/lhb25...

<!DOCTYPE html>
<html>
<head>
    <title>加載效果</title>
    <style type="text/css">
        .loading{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 5px solid #BEBEBE;
            border-left: 5px solid #498aca;
            animation: load 1s linear infinite;
            -moz-animation:load 1s linear infinite;
            -webkit-animation: load 1s linear infinite;
            -o-animation:load 1s linear infinite;
        }
        @-webkit-keyframes load
        {
            from{-webkit-transform:rotate(0deg);}
            to{-webkit-transform:rotate(360deg);}
        }
        @-moz-keyframes load
        {
            from{-moz-transform:rotate(0deg);}
            to{-moz-transform:rotate(360deg);}
        }
        @-o-keyframes load
        {
            from{-o-transform:rotate(0deg);}
            to{-o-transform:rotate(360deg);}
        }
    </style>
</head>
<body>
<div class="loading"></div>
</body>
</html>

六、flex

flex佈局是圍繞父元素和軸來進行佈局的，只須要給直接父容器設置爲display: flex;，子元素就默認具備了可收縮性。

https://www.jianshu.com/p/c25...

七、深刻理解CSS盒模型：https://www.cnblogs.com/cheng...

盒模型的組成你們確定都懂，由裏向外content,padding,border,margin.
盒模型是有兩種標準的，一個是標準模型，一個是IE模型。
盒模型的寬高只是內容（content）的寬高，而在IE模型中盒模型的寬高是內容(content)+填充(padding)+邊框(border)的總寬高。

css如何設置兩種模型：box-sizing

/* 標準模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

八、行內元素和塊級元素的區別：

行內元素：
與其餘行內元素並排；
不能設置寬、高。默認的寬度，就是文字的寬度。
塊級元素：
霸佔一行，不能與其餘任何元素並列；
能接受寬、高。若是不設置寬度，那麼寬度將默認變爲父親的100%。

咱們能夠經過display屬性將塊級元素和行內元素進行相互轉換。display即「顯示模式」。

九、文檔流的理解

文檔流就是網頁渲染呈現的時候，按照HTML文檔從上到下的順序呈現，也就是HTML文檔中先寫的內容，會呈如今網頁的前面。
一、從左至右，從上至上的佈局。
二、符合html中標籤自己含義的佈局，好比某些標籤獨佔一行。有些標籤屬於行內元素等。

在這幾種定位機制中，有幾種方式是脫離文檔流的。什麼是脫離文檔流呢？能夠這樣理解，原本這個標籤是屬於文檔流管理的，那麼它應該按照文檔流的正常佈局方式從左至右從上之下，而且符合標籤自己的含義。脫離文檔流是指，這個標籤脫離了文檔流的管理。不受文檔流的佈局約束了，而且更重要的一點是，這個標籤在原文檔流中所佔的空間也被清除了。
css中一共有三種手段，使一個元素脫離標準文檔流：
（1）浮動：float
（2）絕對定位:absolute
（3）固定定位:fixed

十、浮動：https://www.cnblogs.com/smyhv...

一旦一個元素浮動了，那麼，將可以並排了，而且可以設置寬高了。不管它原來是個div仍是個span。
性質1：浮動的元素脫離標準流
性質2：浮動的元素互相貼靠
性質3：浮動的元素有「字圍」效果
性質4：收縮
收縮：一個浮動的元素，若是沒有設置width，那麼將自動收縮爲內容的寬度（這點很是像行內元素）。

清除浮動：

方法1：給浮動元素的祖先元素加高度
若是一個元素要浮動，那麼它的祖先元素必定要有高度。有高度的盒子，才能關住浮動。
只要浮動在一個有高度的盒子中，那麼這個浮動就不會影響後面的浮動元素。因此就是清除浮動帶來的影響了。
方法2：clear:both;
clear就是清除，both指的是左浮動、右浮動都要清除。意思就是：清除別人對個人影響。
3>方法3：overflow:hidden;
overflow即「溢出」， hidden即「隱藏」。這個屬性的意思是「溢出隱藏」。顧名思義：全部溢出邊框的內容，都要隱藏掉。

盒子居中margin:0 auto;

注意：
（1）使用margin:0 auto;的盒子，必須有width，有明確的width。（能夠這樣理解，若是沒有明確的witdh，那麼它的witdh就是霸佔整行，沒有意義）
（2）只有標準流的盒子，才能使用margin:0 auto;居中。也就是說，當一個盒子浮動了、絕對定位了、固定定位了，都不能使用margin:0 auto;
（3）margin:0 auto;是讓盒子居中，不是讓盒子裏的文本居中。文本的居中，要使用text-align:center;

margin這個屬性，本質上描述的是兄弟和兄弟之間的距離；最好不要用這個marign表達父子之間的距離。
十一、meta viewport原理：https://www.cnblogs.com/2050/...
https://www.cnblogs.com/pigta...
十二、float和display：inline-block；的區別：

區別：
①inline-block: 水平排列一行，即便元素高度不一，也會以高度最大的元素高度爲行高，即便高度小的元素周圍留空，也不回有第二行元素上浮補位。能夠設置默認的垂直對齊基線。
②float: 讓元素脫離當前文檔流，呈環繞裝排列，如趕上行有空白，而當前元素大小能夠擠進去，這個元素會在上行補位排列。默認是頂部對齊。
場景：
①inline-block：當咱們要設置某些元素在一行顯示，而且排列方向一致的狀況下，咱們儘量去用inline-block。由於inline-block的元素仍然在當前文檔流裏面，這樣就減小了程序對DOM的更改操做，由於DOM的每一次更改，瀏覽器會重繪DOM樹。理論上會增長性能消耗。這樣也不用像flaot那樣麻煩，須要清除flaot.
②float：即便inline-block爲佈局首選，可是也有inline-block所不能涉及的一些業務需求，好比：有兩個元素，咱們須要一個向左，一個向右排列，這時候咱們就只能用float來實現，對於新手來講，會糾結float很差調，比較麻煩，想到達到預期效果，須要屢次調整，有時候咱們給元素設置了浮動，元素顯示的順序卻變了，一時搞不清楚就改變HTML中元素的先後順序等等。由於瀏覽器的解析順序是逐行解析，當設置兩個元素的右浮動時，順序在前面的元素會先被解析，他是右浮動，那麼在前邊的元素就先往右浮動佔位置，後邊的元素依次被解析到之後，才往右排列，這樣咱們看到的順序就是反的，當弄明白緣由以後，調試就方便多了。

https://www.cnblogs.com/scot/...
1三、兼容ie６的水平垂直居中：https://www.cnblogs.com/hongc...
1四、h5和原生android的優缺點：https://www.jianshu.com/p/091...
1五、編寫h5須要注意什麼：https://www.jianshu.com/p/e95...
1六、css優先級：https://www.cnblogs.com/nange...
1七、如何實現點擊radio的文字描述控制radio的狀態（經過label實現）：https://ykyfendou.iteye.com/b...
1八、display:none與visible:hidden的區別：https://www.cnblogs.com/shenx...
1九、三欄佈局:https://www.cnblogs.com/p2227...
20、url、href、src 詳解：https://segmentfault.com/a/11...
2一、CSS Flex佈局屬性整理：https://www.jianshu.com/p/bd9...
2二、CSS中<li>標籤橫向排列出現間距問題

緣由：<li>標籤和<li>標籤之間有空格引發
方式1：
解決：第一個<li>標籤和第二個<li>標籤直接註釋掉或者緊挨着沒有空格
方式2：
解決：li選擇器中加入 float: left; 讓li變成浮動，讓各個<li>標籤緊挨着排列。同時還能夠看到 float具備inline元素特性。
方式3：
解決：設置ul標籤的屬性 font-size ＝ 0，再從新設置li標籤的 font-size 。
我的建議方式2是最後考慮的一種方式。

2三、請使用三種以上方法css實現一個左右200px，中間自適應的佈局
https://www.cnblogs.com/guoqi...
https://www.cnblogs.com/ikong...
2四、移動端佈局可選
https://blog.csdn.net/chenjua...
https://www.cnblogs.com/axl23...
2五、幾種方式能夠隱藏一個元素?

CSS display的值是none。
type=」hidden」的表單元素。
寬度和高度都顯式設置爲0。
一個祖先元素是隱藏的，該元素是不會在頁面上顯示。
CSS visibility的值是hidden。
CSS opacity的指是0。
設置z-index位置在-1000

2六、爲何要初始化CSS樣式

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

2七、列出display的值，說明他們的做用。position的值， relative和absolute定位原點是？

diaplay取值有：
block :設置元素以塊樣式顯示
inline：設置元素以行內形式顯示
inline-block：向行內元素同樣顯示，但內容向塊級元素同樣
none：隱藏元素，在頁面中不佔據空間
list-item：向塊級同樣顯示，但添加列表樣式
absolute 是絕對定位，相對於父級定位元素定位；
relative 是相對定位，相對於自身定位。

absolute 生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。
fixed （老IE不支持）生成絕對定位的元素，相對於瀏覽器窗口進行定位。
relative生成相對定位的元素，相對於其正常位置進行定位。
static 默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。
inherit 規定從父元素繼承 position 屬性的值。

2八、Display:none和visibility:hidden的區別是什麼？

display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。
visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

2九、CSS引入的方式有哪些?

CSS引入的方式：內聯內嵌外鏈導入

30、link和@import的區別是?

link和@import雖然都是引入外部的css文件，link屬於HTML標籤，而@import是CSS提供的方式，要寫在css文件或者style標籤中。
link和@import雖然都是引入外部的css文件，link屬於HTML標籤，而@import是CSS提供的方式，要寫在css文件或者style標籤中。

link （連接式）語法爲：

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

@import （導入式）語法爲：

<style type="text/css">
    @import url("style.css");
</style>

加載順序不一樣，頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
@import只在IE5以上才能識別， CSS2.1如下瀏覽器不支持，而link是HTML標籤，無兼容問題;

Link 支持使用javascript改變樣式，import不可。當使用javascript控制DOM去改變css樣式的時候，只能使用link標籤，由於import是不能被DOM控制的。

link方式的樣式的權重高於@import的權重.

3一、請解釋一下block，inline以及inline-block的區別？

block獨佔一行，寬度繼承父級，可設置寬高，但設置後仍是獨佔一行。
inline不佔一行，寬度隨元素內容，不可設置寬高。
inline-block上面兩者強強聯合，可設置寬高，可同行。

display:block

block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度。
block元素能夠設置width,height屬性。塊級元素即便設置了寬度,仍然是獨佔一行。
block元素能夠設置margin和padding屬性。

display:inline

inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。
inline元素設置width,height屬性無效。
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

display:inline-block

簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。好比咱們能夠給一個link（a元素）inline-block屬性值，使其既具備block的寬度高度特性又具備inline的同行特性。

3二、CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增長了更多的CSS選擇器多背景 rgba
在CSS3中惟一引入的僞元素是::selection.
媒體查詢，多欄佈局
border-image

3三、簡述一下src與href的區別

href 表示超文本引用，在 link和a 等元素上使用。
src 表示來源地址，在 img、script、iframe 等元素上使用。
src 的內容，是頁面必不可少的一部分，是引入。
href 的內容，是與該頁面有關聯，是引用。

區別就是，引入和引用。

3四、行內元素有哪些？塊級元素有哪些？空（void）元素有哪些？

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

3五、寫出幾種IE6 BUG的解決方法5種，解釋css sprites，如何使用
雙邊距BUG float引發的使用display
3像素問題 使用float引發的使用dislpay:inline -3px
超連接hover 點擊後失效 使用正確的書寫順序 link visited hover active
Ie z-index問題 給父級添加position:relative
Png 透明 使用js代碼改
Min-height 最小高度 ！Important 解決’
select 在ie6下遮蓋 使用iframe嵌套
爲何沒有辦法定義1px左右的寬度容器 IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px

http://www.frontopen.com/1130...

css sprites: css精靈就是把網站中須要使用的小圖片，作成一張大圖，使用的時候，用背景定位得到須要的圖片，減輕服務器對圖片的請求數量。
這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是也有限制，通常瀏覽器都是6個。對於將來而言，就不須要這樣作了，由於有了 http2。

3六、你使用css預處理器嗎？若是使用，描述你的喜愛

css預處理器：用一種專門的編程語言，編寫web樣式，再編譯成css文件格式。讓css像其餘語言同樣能夠作一些預約的處理。(SASS,Compass,Stylus,LESS)
目前主流的預處理器裏最經常使用的三種有：Sass，Less，Stylus 。
用一些 CSS 的預處理能有效的提升開發效率，節約成本。
目前選擇的是LESS，有不少開源項目都使用他，能夠閱讀學習。他沒有SASS要求那麼嚴謹，好比要mixin（中文不知道怎麼翻譯）時，SASS要求被mixin樣式須要添加聲明，調用時也要求調用。
用過LESS，僅限於簡單的嘗試，沒有應用於實際的項目中，優勢來講，結構更清晰吧，並且能夠繼承，這個很方便，缺點的話就是須要額外的工具來編譯吧。

3七、在書寫高效css文件時會有哪些問題須要考慮

佈局遵循從全局到局部，從左到右，從上到下
Class、Id命名儘可能簡短且通俗易懂
提取公共樣式，提升代碼複用率
開始要Css樣式初始化
大項目能夠考慮三層架構
樣式是：從右向左的解析一個選擇器；
ID最快，Universal最慢有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal ；
不要tag-qualify（永遠不要這樣作ul#main-navigation{}ID已是惟一的，不須要Tag來標識，這樣作會讓選擇器變慢。）；
後代選擇器最糟糕（換句話說，下面這個選擇器是很低效的：html body ul li a{}）；
想清楚你爲何這樣寫；
CSS3的效率問題（CSS3選擇器（好比:nth-child）可以漂亮的定位咱們想要的元素，又能保證咱們的CSS整潔易讀。可是這些神奇的選擇器會浪費不少的瀏覽器資源。）；
咱們知道#ID速度是最快的，那麼咱們都用ID，是否是很快。可是咱們不該該爲了效率而犧牲可讀性和可維護性。

3八、你使用過media queries(媒體查詢)嗎，或者移動網站相關的css佈局

經過媒體查詢能夠爲不一樣大小和尺寸的媒體定義不一樣的css，適合相應的設備顯示；即響應式佈局
媒體查詢，就是響應式佈局。經過不一樣的媒介類型和條件定義樣式表規則。媒介查詢讓CSS能夠更精確做用於不一樣的媒介類型和同一媒介的不一樣條件。
語法結構及用法：@media 設備名 only （選取條件） not （選取條件） and（設備選取條件），設備二{sRules}。

/* 當瀏覽器的可視區域小於980px */
@media screen and （max-width： 980px） {
#content {width： 60%;padding： 5%;}
}
/* 當瀏覽器的可視區域小於650px */
@media screen and （max-width： 650px） {
#sidebar {width： 100%; float： none; margin： 0;}
}

3九、清除浮動的幾種方式，各自的優缺點，分別適用於什麼情形？

第一種：添加新的元素，應用clear：both；
<div style="clear:both;"></div>（缺點：不過這個辦法會增長額外的標籤使HTML結構看起來不夠簡潔。）
第二種：給父級元素定義overflow；設置 overflow爲 hidden或者auto
第三種：使用after僞類 :after（注意：做用於浮動元素的父親）（最佳方式）

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
    }

使用空標籤清除浮動 clear:both（理論上能清除任何標籤，增長無心義的標籤）
使用overflow:auto（空標籤元素清除浮動而不得不增長無心代碼的弊端,,使用zoom:1用於兼容IE）
使用afert僞元素清除浮動(用於非IE瀏覽器)

40、如何居中div？如何居中一個浮動元素？
http://www.w3cplus.com/css/el...

4一、CSS垂直居中的方法

負邊距

<div class="inner"></div>

.inner{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px; 
 }

絕對定位和0

.inner{
  width: 50%; 
  height: 50%; 
  background:red;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
}

這裏是經過margin:auto和top,left,right,bottom都設置爲0實現居中。不過這裏得肯定內部元素的高度，能夠用百分比，比較適合移動端。

未知元素寬高：

CSS3的transform屬性來實現移位
經過設置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。

.box6 span{   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: red;
    width: 100px;
    height: 100px; }

使用CSS3的彈性佈局（flex）
只要設置父元素（這裏是指body）的display的值爲flex便可

.body{
      width: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: flex;
      align-items: center; //定義body的元素垂直居中
      justify-content: center; //定義body的裏的元素水平居中
 }
 .inner{
      border: 1px solid #546461;
      width: 100px;
      height: 100px;
 }

display:-webkit-box

.box{
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-orient: vertical;
    text-align: center;
    background: red;
    width: 200px;
    height: 200px;
  }
  .inner{
    width: 100px;
    height: 100px;
    background: blue;
 }

table佈局： ie8如下不支持。
能夠將父容器設置爲display:table ，而後將子元素也就是要垂直居中顯示的元素設置爲 display:table-cell 。可是，這是不值得推薦的，由於會破壞總體的佈局。

<div class="box">
        <div class="inner">hello world-1</div>
</div>
.box{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.inner{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

當要被居中的元素是inline或者inline-block元素

.box{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background: red;
    width: 200px;
    height: 200px;
  }
  .inner{
    width: 100px;
    height: 100px;
    background: blue;
    display: inline-block;
 }

4二、描述css reset的做用和用途

Reset重置瀏覽器的css默認屬性瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一

4三、談談css盒模型，標準盒模型與Ie盒模型的區別；box-sizing經常使用的屬性有哪些？分別有什麼做用？

css盒模型: 內容(content)、填充(padding)、邊框(border)、邊界(margin)
區別：
W3C 盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包含其餘部分。
IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不一樣的是：IE 盒子模型的 content 部分包含了 border 和padding。

在標準模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
在怪異模式下，一個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）

box-sizing: content-box|border-box|inherit;
當設置爲box-sizing:content-box時，將採用標準模式解析計算，也是默認模式；
當設置爲box-sizing:border-box時，將採用怪異模式解析計算；

content-box:寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。

4四、CSS選擇符有哪些?哪些屬性能夠繼承?優先級算法如何計算?內聯和important哪一個優先級高? CSS3新增僞類有那些？

經常使用的有標籤選擇器、類選擇器、ID選擇器等

CSS 選擇符：

1.id選擇器(# myid)
2.類選擇器(.myclassname)
3.標籤選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li)
6.後代選擇器(li a)
7.通配符選擇器( * )
8.屬性選擇器(a[rel = "external"])
9.僞類選擇器(a: hover, li:nth-child)

可繼承的樣式：

1.font-size
2.font-family
3.color
4.text-indent

不可繼承的樣式：

1.border
2.padding
3.margin
4.width
5.height

優先級算法：
1.優先級就近原則，同權重狀況下樣式定義最近者爲準;
2.載入樣式以最後載入的定位爲準;
3.!important > id > class > tag
4.important 比內聯優先級高，但內聯比 id 要高

CSS3新增僞類舉例：
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中。

總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
4個等級的定義以下：
第一等：表明內聯樣式，如: style=」」，權值爲1000。
第二等：表明ID選擇器，如：#content，權值爲100。
第三等：表明類，僞類和屬性選擇器，如.content，權值爲10。
第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲1。

4五、<div><h1></h1><p></p><p></p><p></p><span></span></div>,使用css選擇div中的非p元素或選擇div中偶數下標p元素；

div p:nth-child(even) //偶數
div :not(p) //非P

4六、使用CSS3把一個div順時針旋轉90度，或者長和寬縮放爲原來的兩倍。

-webkit-transform: rotate(90deg);  
-webkit-transform: scale(2,2);

4七、CSS3實現動畫的兩種方式：https://www.cnblogs.com/donte...

Jquery

一、jquery怎麼獲取每一個li元素下的第三個a元素

:eq（index）選擇器
$('li').find('a:eq(2)');

二、jQuery 事件綁定

bind 是使用頻率較高的一種，做用就是在選擇到的元素上綁定特定事件類型的監聽函數

$("#div li").bind("click",myFun);

on() 方法在被選元素及子元素上添加一個或多個事件處理程序。最經常使用的一種$(selector).on(event,childSelector,data,function);

三、jQuery實現的全選、反選和不選功能：

$(function () {
    //全選或全不選
    $("#all").click(function(){   
        if(this.checked){   
       $("#list :checkbox").prop("checked", true);  
        }else{   
        $("#list :checkbox").prop("checked", false);
        }   
     }); 
    //全選  
    $("#selectAll").click(function () {
         $("#list :checkbox,#all").prop("checked", true);  
    });  
    //全不選
    $("#unSelect").click(function () {  
         $("#list :checkbox,#all").prop("checked", false);  
    });  
    //反選 
    $("#reverse").click(function () { 
         $("#list :checkbox").each(function () {  
              $(this).prop("checked", !$(this).prop("checked"));  
         });
         allchk();
    });    
    //設置全選複選框
    $("#list :checkbox").click(function(){
        allchk();
    }); 
    //獲取選中選項的值
    $("#getValue").click(function(){
        var valArr = new Array;
        $("#list :checkbox[checked]").each(function(i){
            valArr[i] = $(this).val();
        });
        var vals = valArr.join(',');
          alert(vals);
    });
}); 
function allchk(){
    var chknum = $("#list :checkbox").size();//選項總個數
    var chk = 0;
    $("#list :checkbox").each(function () {  
        if($(this).prop("checked")==true){
            chk++;
        }
    });
    if(chknum==chk){//全選
        $("#all").prop("checked",true);
    }else{//不全選
        $("#all").prop("checked",false);
    }
}

https://www.helloweba.net/jav...
四、jQuery庫衝突解決辦法:https://www.cnblogs.com/staro...
五、jquery的bind跟on綁定事件的區別

jquery文檔中bind和on函數綁定事件的用法：
.bind(events [,eventData], handler)
.on(events [,selector] [,data], handler)
從文檔中能夠看出，.on方法比.bind方法多一個參數'selector'
.on的selector參數是篩選出調用.on方法的dom元素的指定子元素，如：
$('ul').on('click', 'li', function(){console.log('click');})就是篩選出ul下的li給其綁定click事件；
$('ul li').bind('click', function(){console.log('click');})

六、jQuery對象與js對象互相轉換

兩種轉換方式將一個jQuery對象轉換成js對象：[index]和.get(index);
(1)jQuery對象是一個數據對象，能夠經過[index]的方法，來獲得相應的js對象。
如：var $v =$("#v") ; //jQuery對象
var v=$v[0]; //js對象
alert(v.checked) //檢測這個checkbox是否被選中
(2)jQuery自己提供，經過.get(index)方法，獲得相應的js對象
如：var $v=$("#v"); //jQuery對象
var v=$v.get(0); //js對象
alert(v.checked) //檢測這個checkbox是否被選中

js對象轉成jQuery對象:

對於已是一個js對象，只須要用$()把DOM對象包裝起來，就能夠得到一個jQuery對象了。$(js對象)
如：var v=document.getElementById("v"); //js對象
var $v=$(v); //jQuery對象
轉換後，就能夠任意使用jQuery的方法了。

七、Jquery與jQuery UI 有啥區別？

jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。
jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。
提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等

八、jquery 中如何將數組轉化爲json字符串，而後再轉化回來？

現代瀏覽器中提供了JSON.stringify()方法將數組，對象轉成json。
JSON.stringify 把一個對象轉換成json字符串，
JSON.parse 把一個json字符串解析成對象。
不支持的能夠引入json2.js
jQuery中沒有提供這個功能，因此你須要先編寫兩個jQuery的擴展：

$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
  }
 $.fn.parseArray = function(array) {
     return JSON.parse(array)
    }

而後調用：

$("").stringifyArray(array)

九、body中的onload（）函數和jquery中的document.ready（）有什麼區別？

onload()和document.ready()的區別有如下兩點：
一、咱們能夠在頁面中使用多個document.ready()，但只能使用一次onload()。
二、document.ready()函數在頁面DOM元素加載完之後就會被調用，而onload()函數則要在全部的關聯資源（包括圖像、音頻）加載完畢後纔會調用。

dom文檔加載的步驟爲：

1.解析html結構
2.加載外部腳本和樣式表文件
3.解析並執行腳本代碼
4.dom樹構建完成 // DOMContentLoaded
5.加載圖片等外部文件
6.頁面加載完畢
domready（也叫DOMContentLoaded ），在第4步完成後觸發；
圖片onload是在第5步完成後觸發；
頁面onload是第6步完成後觸發。
因而可知三者執行順序爲：domready→圖片load→頁面load。
document load 與document ready的區別

頁面加載完成有兩種事件
1.load是當頁面全部資源所有加載完成後（包括DOM文檔樹，css文件，js文件，圖片資源等），執行一個函數
問題：若是圖片資源較多，加載時間較長，onload後等待執行的函數須要等待較長時間，因此一些效果可能受到影響
2.$(document).ready()是當DOM文檔樹加載完成後執行一個函數（不包含圖片，css等）因此會比load較快執行
在原生的jS中不包括ready()這個方法，只有load方法就是onload事件

https://www.cnblogs.com/hangu...

十、jquery的優缺點

優勢：
jQuery消除了JavaScript跨平臺兼容問題。
相比其餘JavaScript和JavaScript庫，jQuery更容易使用。
jQuery有一個龐大的庫/函數。
jQuery有良好的文檔和幫助手冊。
jQuery支持AJAX。
與JavaScript相比，jQuery的語法更加簡單。經過jQuery，能夠很容易地瀏覽文檔、選擇元素、處理事件以及添加效果等，同時還容許開發者定製插件。
缺點：
jQuery嚴格意義來講不是一個前端框架，只是一個前端js類庫，若是你開發比較大型的應用的話，使用jQuery代碼相對會比較難於維護和更改，而且要求開發的程序員比較熟練。
因爲不是原生JavaScript語言，理解起來可能會受到限制。
項目中須要包含jQuery庫文件。若是包含多個版本的jQuery庫，可能會發生衝突。

十一、請寫出jquery綁定事件的方法，很多於兩種

$("").click()
$("").ready()
$("").change()
$("").focus()

十二、$(this)和this關鍵字在Jquery中有何不一樣

一、this表示javascript的dom對象
二、$(this)表示把dom對象轉換爲jquery對象
三、jquery包的方法只能由jquery對象調用，不能用javascript的的dom對象使用
$("input").click(function(){
//這裏的this表示被點擊的輸入框對象,可使用javascript對該對象進行操做
var value=this.value;
//jquery對象與dom對象取值方法不同，要用jquery方法必須使用$(dom對象)轉換
var val=$(this).val();
})
$(this)是jquery對象，能調用jquery的方法，例如click(), keyup()。
而this,則是html元素對象，能調用元素屬性，例如this.id,this.value。
例如假設已經使得this和$(this)都指向了input對象了，若要得到input的值,能夠this.value，但$(this)就得$(this).val()。

其餘

一、關於移動端適配的技術方案：https://blog.csdn.net/chenjua...

（1）經過媒體查詢的方式即CSS3的meida queries
（2）以天貓首頁爲表明的 flex 彈性佈局
（3）以淘寶首頁爲表明的 rem+viewport縮放
（4）rem 方式

二、懶加載：https://www.jianshu.com/p/e86...

咱們以前看到的懶加載通常是這樣的形式：
瀏覽一個網頁，準備往下拖動滾動條
拖動一個佔位圖片到視窗
佔位圖片被瞬間替換成最終的圖片
咱們能夠在Medium中看到懶加載是如何使用的，網頁首先用一張輕量級的圖片佔位，當佔位圖片被拖動到視窗，瞬間加載目標圖片，而後替換佔位圖片。
懶加載圖片和視頻，能夠減小頁面加載的時間、頁面的大小和下降系統資源的佔用，這些對於性能都有顯著地提高

三、XMLHTTP與後臺交互時返回的一個狀態碼：https://www.cnblogs.com/small...

1XX 信息性狀態碼（Informational）服務器正在處理請求
2XX 成功狀態碼（Success）請求已正常處理完畢
3XX 重定向狀態碼（Redirection）須要進行額外操做以完成請求
4XX 客戶端錯誤狀態碼（Client Error）客戶端緣由致使服務器沒法處理請求
5XX 服務器錯誤狀態碼（Server Error）服務器緣由致使處理請求出錯

四、GET和POST的區別

GET產生一個TCP數據包；POST產生兩個TCP數據包。
GET在瀏覽器回退時是無害的，而POST會再次提交請求。
GET產生的URL地址能夠被Bookmark，而POST不能夠。
GET請求會被瀏覽器主動cache，而POST不會，除非手動設置。
GET請求只能進行url編碼，而POST支持多種編碼方式。
GET請求參數會被完整保留在瀏覽器歷史記錄裏，而POST中的參數不會被保留。
GET請求在URL中傳送的參數是有長度限制的，而POST麼有。
對參數的數據類型，GET只接受ASCII字符，而POST沒有限制。
GET比POST更不安全，由於參數直接暴露在URL上，因此不能用來傳遞敏感信息。
GET參數經過URL傳遞，POST放在Request body中。

五、響應式佈局的兩種實現形式： https://www.cnblogs.com/luowe...
六、移動端橫豎屏判斷

//判斷手機橫豎屏狀態： 
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { 
            if (window.orientation === 180 || window.orientation === 0) {  
               //alert('豎屏狀態！'); 
            }  
            if (window.orientation === 90 || window.orientation === -90 ){  
                //alert('橫屏狀態！'); 
            }   
        }, false);  
//移動端的瀏覽器通常都支持window.orientation這個參數，經過這個參數能夠判斷出手機是處在橫屏仍是豎屏狀態。

CSS

@media all and (orientation : landscape) {
 
/*橫屏時*/
 
}
 
@media all and (orientation : portrait){
 
/*豎屏時*/
 
}

七、常見自適應佈局/等分佈局/九宮格佈局
https://www.jianshu.com/p/3cf...
八、谷歌瀏覽器調試技巧
https://blog.csdn.net/u010001...
九、DIV+CSS有什麼優勢？
https://zhidao.baidu.com/ques...
十、前端工程化方面作了哪些東西，怎麼作。：https://www.cnblogs.com/fsyz/...
十一、前端優化策略列舉：https://www.cnblogs.com/wzndk...
雅虎優化：https://www.cnblogs.com/xiany...
十二、域名收斂是什麼：https://www.cnblogs.com/coco1...

PC 時代爲了突破瀏覽器的域名併發限制。有了域名發散。
瀏覽器有併發限制，是爲了防止DDOS攻擊。
域名收斂：就是將靜態資源放在一個域名下。減小DNS解析的開銷。
域名發散：是將靜態資源放在多個子域名下，就能夠多線程下載，提升並行度，使客戶端加載靜態資源更加迅速。
域名發散是pc端爲了利用瀏覽器的多線程並行下載能力。而域名收斂多用與移動端，提升性能，由於dns解析是是從後向前迭代解析，若是域名過多性能會降低，增長DNS的解析開銷。

1三、請你描述下用戶從輸入url到看到完整頁面這個過程發生的事情，儘量的詳細。：https://blog.csdn.net/samjust...
1四、WEB前端開發必備之瀏覽器兼容性處理方法大全：https://wenku.baidu.com/view/...

1五、有了解過哪些web前端框架(jQuery,bootstrap,jquery,JQuery,Ui等)?請簡要介紹。

jQuery是一套跨瀏覽器的JavaScript庫，簡化HTML與JavaScript之間的操做。特色是輕量級，豐富的DOM選擇器，事件、樣式、動畫支持，Ajax操做支持，可擴展性強
boostrap是一套追求一致性的框架。特色是跨設備，跨瀏覽，響應佈局，支持html5 css3，支持less動態樣式擴展
jquery ui是jquery對桌面端的擴展，能夠經過可視化界面進行配置。

1六、PC端頁面適配
http://www.cnblogs.com/itlich...

1七、你怎麼來實現頁面設計圖，你認爲前端應該如何高質量完成工做? 一個滿屏品字佈局如何設計?

首先劃分紅頭部、body、尾部；。。。。。
實現效果圖是最基本的工做，精確到2px；
與設計師，產品經理的溝通和項目的參與
作好的頁面結構，頁面重構和用戶體驗
處理hack，兼容、寫出優美的代碼格式
針對服務器的優化、擁抱 HTML5。

1八、前端優化、性能優化，你如何管理你的項目

前期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等；
編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；
頁面進行標註（例如頁面模塊開始和結束）；
CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；
JS 分文件夾存放命名以該JS功能爲準的英文翻譯。
圖片採用整合的 images.png png8 格式文件使用儘可能整合在一塊兒使用方便未來的管理

1九、對網站重構的理解

網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化，在擴展的同時保持一致的UI。

對於傳統的網站來講重構一般是：

表格(table)佈局改成DIV+CSS
使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)
對於移動平臺的優化
針對於SEO進行優化
深層次的網站重構應該考慮的方面

減小代碼間的耦合
讓代碼保持彈性
嚴格按規範編寫代碼
設計可擴展的API
代替舊有的框架、語言(如VB)
加強用戶體驗
一般來講對於速度的優化也包含在重構中

壓縮JS、CSS、image等前端資源(一般是由服務器來解決)
程序的性能優化(如數據讀寫)
採用CDN來加速資源加載
對於JS DOM的優化
HTTP服務器的文件緩存
20、你都使用哪些工具來測試代碼的性能？

Profiler, JSPerf（ http://jsperf.com/nexttick-vs...）, Dromaeo

2一、你如何對網站的文件和資源進行佈局與優化？以及寫出至少三種減低頁面加載時間的方法

文件和資源進行佈局與優化
期待的解決方案包括：
文件合併
文件最小化/文件壓縮
使用 CDN 託管
緩存的使用（多個域名來提供緩存）
其餘
實現對頁面訪問的性能優化：
（1）減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存，圖片服務器。
（2）前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數
（3）用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。
（4）當須要設置的樣式不少時設置className而不是直接操做style。
（5）少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。
（6）避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
（7）圖片預加載，將樣式表放在頂部，將腳本放在底部，加上時間戳。
（8）避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢。

減低頁面加載時間：
1.優化圖片
2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
3.優化CSS（壓縮合並css，如margin-top,margin-left...)
4.網址後加斜槓（如www.campr.com/目錄，會判斷這個「目錄是什麼文件類型，或者是目錄。）
5.標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。
當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了。）
6.減小http請求（合併文件，合併圖片）。

2二、描述一下你製做一個網頁的工做流程

內容分析：分清展示在網絡中內容的層次和邏輯關係
結構設計：寫出合理的html結構代碼
佈局設計：使用html+css進行佈局
樣式設計：首先要使用reset.css
交互設計：鼠標特效
行爲設計：js代碼，ajax頁面行爲和從服務器獲取數據
測試兼容性；優化性能

2三、你最厲害的技能是什麼

描述界面的語言：HTML, CSS
描述數據的語言（格式）：JSON, XML
鏈接數據和界面的語言：JavaScript
jQuery只是JavaScript的一個框架，由於便利，應用很廣，固然也應該掌握。
AngularJS最近比較火，建議也學學。
若要用好JavaScript（其實其餘語言也同樣），正則表達式是必須學會的，達不到精通也要會。
做爲前端，設計界面，免不了要和圖片打交道，不會PhotoShop恐怕也說不過去。
另外，雖然是前端，服務器方面的知識也應該具有一些，好比Linux/Apache/PHP/MySQL（簡稱LAMP）。

2四、一個頁面有大量的圖片，加載很慢，你有哪些方法優化這些圖片的加載，請從幻燈片、CSS圖片、圖片過大、圖片太小四種狀況來講明。

圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。
若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。
若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。
若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

2五、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）
2六、項目製做流程