HTML部分javascript
1.Doctype做用？標準模式與兼容模式如何區分？css
<!DOCTYPE>告知瀏覽器的解析器解析文檔的標準。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。標準模式的頁面渲染和JS運行都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。
2.HTML5 爲何只須要寫<!DOCTYPE HTML>？
HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲。w3c 和 WHATWG合做制定的新標準。
3.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
每一個元素都有默認的display值disblock 塊級元素，inline 行內元素。
（1）行內元素有：a b span img input select strong（強調的語氣） （2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
<br> <hr> <img> <input> <link> <meta>
4.頁面導入樣式時，使用link和@import有什麼區別？
（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;html
5.瀏覽器內核的理解？html5
主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎java
渲染引擎負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等）渲染。node
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey，Firefox 。
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]。
Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]。css3
6.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？web
HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。算法
繪畫 canvas;
用於媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
sessionStorage 的數據在瀏覽器關閉後自動刪除;
語意化更好的內容元素，好比 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術webworker, websockt, Geolocation;chrome
區分：頭部標準，標籤。
E8/IE7/IE6支持經過document.createElement方法產生的標籤，
能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還須要添加標籤默認的樣式。
固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
7.HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？
在用戶斷網時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。
如何使用：
一、頁面頭部像下面同樣加入一個manifest的屬性；
二、在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
三、在離線狀態時，操做window.applicationCache進行需求實現。
8.瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？
在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。
離線的狀況下，瀏覽器就直接使用離線存儲的資源。
9.簡述一下你對HTML語義化的理解？
使文檔結構化，讓瀏覽器爬蟲（依賴於標籤來肯定上下文和各個關鍵字的權重）更好的理解標籤意思。即便沒有樣式也頁面也能呈現出很好地內容結構。用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用；方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁。語義化能夠減小編碼差別，增長可讀性。
10.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
有期時間：
localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。
11.iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。
12.Label的做用是什麼？是怎麼用的？
label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。for 屬性關聯 表單 的 id 屬性。
13.HTML5的form如何關閉自動完成功能？
給不想要提示的 form 或下某個input 設置爲 autocomplete=off。
14.如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)
調用localstorge、cookies等本地存儲方式
webSocket如何兼容低瀏覽器？(阿里)
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼發送 XHR 、 基於長輪詢的 XHR
15.如何在頁面上實現一個圓形的可點擊區域？
border-radius js canvas
16.title與h1的區別、b與strong的區別、i與em的區別？
對於搜索引擎來講em和strong比i和b要重視的多。
1.H1是大標題的意思。通常出現網頁文章頁面，做用如同一張報紙的大標題，使用讀者在沒看內容以前就
大概瞭解本文的旨意，它是直接給用戶看的。並且在SEO中，搜索引擎也很是重視H1，目的是告訴搜索引擎，這
個地方的內容很重要,H1要求貼近文章內容，突出主題，言簡意賅。
2.title是用來面對的是搜索引擎和用戶，其範圍相對於H1來講要廣，title中能夠包含H1，在搜索引擎中
tiele的權重要高於H1;通常來說，H1作到突出主題目，title修飾主題關鍵字。
CSS部分
1.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？
CSS盒子模型：由四個屬性組成的外邊距(margin)、內邊距(padding)、邊界(border)、內容區(width和height);
標準的CSS盒子模型和低端IE CSS盒子模型不一樣：寬高不同
標準的css盒子模型寬高就是內容區寬高；
低端IE css盒子模型寬高 內邊距﹢邊界寬﹢內容區；
2.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) 3.!important > id > class > tag
4) important 比 內聯優先級高，但內聯比 id 要高
1) p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
2) p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
3) p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
4) p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
5) p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
6) :enabled :disabled 控制表單控件的禁用狀態。
7) :checked 單選框或複選框被選中。
1) CSS3實現圓角（border-radius），陰影（box-shadow），
2) 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
3) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
4) 增長了更多的CSS選擇器 多背景 rgba
5) 在CSS3中惟一引入的僞元素是 ::selection.
6) 媒體查詢，多欄佈局
7) border-image
position: relative;float: left;left: 50%; 內層元素。height:200px;width:200pxfloat: left;position: relative;right: 50%;
4.內容居中
3.如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
塊狀元素水平居中：margin：0 auto;
浮動元素居中：
1.在浮動元素外面再嵌套一層div,然會外層元素設置margin:0 auto;
2.外層元素
內聯元素：text-align:center；vertical-align:middle
塊狀元素：
display:table-cell;vertical-align:middle;
如果單行內容：line-height=height
5.絕對定位元素居中
1.已知元素尺寸。
.element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 寬度的一半 */ }
2.未知元素尺寸
.element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 第一個50%爲width的一半，第二個50%爲height的一半 */ }
.element { width: 600px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 水平和垂直都居中 */ }
4.position的值relative和absolute定位原點是？
一、static（靜態定位）：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
二、relative（相對定位）：生成相對定位的元素，經過top,bottom,left,right的設置相對於其正常（原先自己）位置進行定位。可經過z-index進行層次分級。
三、absolute（絕對定位）：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。
四、fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。
5.CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？
6.用純CSS建立一個三角形的原理是什麼？
等分原理：一個塊級元素，設置height:100px;width:100px;border:100px solid transparent;border-bottom:100px solid yellow;
直角三角形（以下）
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
7.li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？
<li>橫向排列，而又爲了能設置其寬度和高度，爲其設置display:inline-block，相鄰<li>之間會出現8px的空白間隔，不是margin也不是padding。
緣由：.瀏覽器的默認行爲是把inline元素間的空白字符（空格換行tab）渲染成一個空格，也就是咱們上面的代碼<li>換行後會產生換行字符，而它會變成一個空格，固然空格就佔用一個字符的寬度。
解決方案：1.既然是由於<li>換行致使的，那就能夠將<li>代碼所有寫在一排。
2.不少時候咱們不可能將<li>所有寫在一排，那怎麼辦？既然是空格佔一個字符的寬度，那咱們索性就將<ul>內的字符尺寸直接設爲0，將下面樣式放入樣式表，問題解決。
3.原本覺得方法二可以徹底解決問題，但經測試，將li父級標籤字符設置爲0在Safari瀏覽器依然出現間隔空白；既然設置字符大小爲0不行，那咱就將間隔消除了，將下面代碼替換方法二的代碼，目前測試完美解決。一樣隨來而來的問題是li內的字符間隔也被設置了，咱們須要將li內的字符間隔設爲默認。.wrap ul{letter-spacing: -5px;} .wrap ul li{letter-spacing: normal;}
8.爲何要初始化瀏覽器樣式？
消除不一樣瀏覽器渲染的差別
9.對BFC規範(塊級格式化上下文：block formatting context)的理解？
css定位方案三種：
一，普通流 ：元素按照其在 HTML 中的前後位置至上而下佈局，在這個過程當中，行內元素水平排列，直到當行被佔滿而後換行，塊級元素則會被渲染爲完整的一個新行， 除非另外指定，不然全部元素默認都是普通流定位，也能夠說，普通流中元素的位置由該元素在 HTML 文檔中的位置決定。
二，浮動 ：在浮動佈局中，元素首先按照普通流的位置出現，而後根據浮動的方向儘量的向左邊或右邊偏移，其效果與印刷排版中的文本環繞類似。
三，絕對定位：元素會總體脫離普通流，所以絕對定位元素不會對其兄弟元素形成影響，而元素具體的位置由絕對定位的座標決定。
具備 BFC 的元素能夠看做是隔離了的獨立容器，容器裏面的元素不會在佈局上影響到外面的元素，而且 BFC 具備普通容器沒有的一些特性，例如能夠包含浮動元素，上文中的第二類清除浮動的方法（如 overflow 方法）就是觸發了浮動元素的父元素的 BFC ，使到它能夠包含浮動元素，從而防止出現高度塌陷的問題。
知足下面任一條件的元素，會觸發爲 BFC ：
除了使用 overflow: hidden 觸發 BFC 外，還使用了一個 *zomm: 1 的屬性，這是 IEhack
10.請解釋一下爲何須要清除浮動？清除浮動的方式
清除浮動是指清除因爲子元素浮動帶來父元素高度塌陷的影響。
清除浮動的兩種基本方法：
1.腳底插入clear:both;
2.父元素BFC/haslayout
BFC/haslayout一般聲明
當設置了zoom的值以後，所設置的元素就會就會擴大或者縮小，高度寬度就會從新計算了，這裏一旦改變zoom值時其實也會發生從新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨着自動擴大的問題。
ie下子元素浮動時候父元素不隨着自動擴大的問題，使用下面的CSS寫法。父元素 { overflow: auto; zoom: 1 }
11.移動端的佈局用過媒體查詢嗎？
@media screen and (min-width: 400px) and (max-width: 700px) { … }
12.CSS優化、提升性能的方法有哪些？
一、儘可能將樣式寫在單獨的css文件裏面，在head元素中引用
二、不使用@import
三、避免使用複雜的選擇器，層級越少越好
四、精簡頁面的樣式文件，去掉不用的樣式
五、利用CSS繼承減小代碼量
六、慎重使用高性能屬性：浮動、定位；
13.元素豎向的百分比設定是相對於容器的高度嗎？
1.豎向百分比 ——之高度 相對於容器的height。
2.豎向百分比——之 間距 相對對於margin-top、margin-bottom、padding-top、padding-bottom這些豎直方向的內外邊距屬性的百分比取值，參考的實際上是容器的寬度而不是高低。
14.移動端優化的站點 視口基礎？
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> initial-scale屬性控制頁面最初加載時的縮放等級。maximum-scale、minimum-scale及user-scalable屬性控制容許用戶以怎樣的方式放大或縮小頁面。
15.::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個僞元素的做用。
單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素（僞元素由雙冒號和僞元素名稱組成）
16.如何修改chrome記住密碼後自動填充表單的黃色背景 ？
情景一：input文本框是純色背景的 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; border: 1px solid #CCC!important; } 思路二： 關閉瀏覽器自帶填充表單功能 設置表單屬性 autocomplete="off/on" 關閉自動填充表單，本身實現記住密碼 <!-- 對整個表單設置 --> <form autocomplete="off" method=".." action=".."> <!-- 或對單一元素設置 --> <input type="text" name="textboxname" autocomplete="off">
17.設置元素浮動後，該元素的display值是多少？
（自動變成display:block）
18.怎麼讓Chrome支持小於12px 的文字？
transform:scale()
19.讓頁面裏的字體變清晰，變細用CSS怎麼作？
（-webkit-font-smoothing: antialiased;）
20.font-style屬性可讓它賦值爲「oblique」 oblique是什麼意思？
oblique是一種模仿的斜體，而不是真正的斜體。和斜體」italic」的效果是同樣。
21.若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）
多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms
22.overflow: scroll時不能平滑滾動的問題怎麼處理？
在 overflow:scroll部分，也就是須要滑動的層處，加css
: -webkit-overflow-scrolling: touch;
23.png、jpg、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp？
24.css3的calc()屬性
.test {
width: calc(100% - 50px);
background: #eee;
}
25.什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼作）
document.cookie = null;
Javascript
1.寫javascript基本規範？
1.減小全局污染
2.變量名的提高
3.for循環 （length屬性提早算，不要在循環條件裏算，否則每次循環都須要計算一次）
4.用「===」取代"=="
5.命名規則 構造函數首字母大寫 Person(){}
6.寫註釋。
7.不要在同一個行內聲明多個變量。
8.Switch語句中必須帶有default分支.
2.JavaScript原型，原型鏈 ? 有什麼特色？
3.JavaScript有幾種類型的值？
堆：原始數據類型和 棧：引用數據類型
。
。
。
。
。
18.那些操做會形成內存泄漏？
1.意外的全局變量引發的內存泄露
function leak(){ leak="xxx";//leak成爲一個全局變量，不會被回收 }
2.閉包引發的內存泄露
function bindEvent(){ var obj=document.createElement("XXX"); obj.onclick=function(){ //Even if it's a empty function } }
3.被遺忘的定時器或者回調
var someResouce=getData(); setInterval(function(){ var node=document.getElementById('Node'); if(node){ node.innerHTML=JSON.stringify(someResouce) } },1000)
這樣的代碼很常見, 若是 id 爲 Node 的元素從 DOM 中移除, 該定時器仍會存在, 同時, 由於回調函數中包含對 someResource 的引用, 定時器外面的 someResource 也不會被釋放。
19.如何避免內存泄漏？
1）減小沒必要要的全局變量，或者生命週期較長的對象，及時對無用的數據進行垃圾回收；
2）注意程序邏輯，避免「死循環」之類的 ；
3）避免建立過多的對象 原則：不用了的東西要及時歸還。
20.事件節流 和 函數防抖
1.一些短期內頻繁觸發的事件會致使佔用過多的資源，這時候咱們設置一個觸發間隔。頻繁觸發的事件，例如的 mousemove（鼠標移動）、scroll（滾動條），resize 等
實現原理：
1.初次調用函數時，設置一個定時器，在指定的 間隔 以後運行代碼
2.第二次調用函數時（若小於 間隔 時間，定時器 還沒有執行），清除定時器並重設一個
3.若是定時器已經執行（過了間隔時間），這次操做就無心義。
4.目的是隻有在執行函數的請求中止了一段時間（間隔時間）以後才執行。
const filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
$("#email").on("keyup",checkEmail());
function checkEmail(){
let timer=null;
return function (){
clearTimeout(timer);
timer=setTimeout(function(){
console.log('執行檢查');
},800);
}
}
$(window).scroll(loadMore()); function loadMore(){ var canRun=true; return function(){ if(!canRun){return;} canRun=false; setTimeout(function(){ console.log("執行滾動事件"); var docHeight=$(document).height(); var winHeight=$(window).innerHeight(); var scrollDistance=$(window).scrollTop(); if( docHeight - (winHeight+scrollDistance) <=100 ){ console.log('加載中...'); } canRun=true; },600); } }