HTML、CSS部分：
一、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
新特性：
HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
拖拽釋放(Drag and drop) API
語義化更好的內容標簽（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；
sessionStorage 的數據在瀏覽器關閉后自動刪除
表單控件，calendar、date、time、email、url、search
新的技術webworker, websocket, Geolocation
移除元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
h5新標簽兼容：
IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
如何區分：
DOCTYPE聲明\新增的結構元素\功能元素
二、CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增偽類有那些？
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）
可以繼承的屬性：
可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border padding margin width height ;
優先級：
!important > id > class > tag
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 單選框或復選框被選中。
三、CSS3有哪些新特性？
更詳細的請見：https://www.cnblogs.com/qianduantuanzhang/p/7793638.html
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
四、解釋盒模型寬高值得計算方式，邊界塌陷，負值作用，box-sizing概念？
1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，寬度 = 邊框 + padding + 內容寬度； chrom、IE9+、(添加doctype) 使用標准盒模型， 寬度 = 內容寬度。
2. box-sizing : 為了解決標准黑子和IE盒子的不同，CSS3增添了盒模型屬性box-sizing，content-box(默認)，border-box 讓元素維持IE傳統盒子模型， inherit 繼承 父盒子模型；
3. 邊界塌陷：塊元素的 top 與 bottom 外邊距有時會合並（塌陷）為單個外邊距（合並后最大的外邊距），這樣的現象稱之為 外邊距塌陷。
4. 負值作用：負margin會改變浮動元素的顯示位置，即使我的元素寫在DOM的后面，我也能讓它顯示在最前面。
五、BFC（Block Formatting Context） 是什么？應用？
1. BFC 就是 ‘塊級格式上下文’ 的格式，創建了BFC的元素就是一個獨立的盒子，不過只有BLock-level box可以參與創建BFC，它規定了內部的Bloc-level Box 如何布局，並且與這個獨立盒子里的布局不受外部影響，當然它也不會影響到外面的元素。
2. 應用場景：
1. 解決margin疊加的問題
2. 用於布局（overflow: hidden）,BFC不會與浮動盒子疊加。
3. 用於清除浮動，計算BFC高度。
六、如何實現瀏覽器內多個標簽頁之間的通信?
調用localstorge、cookies等本地存儲方式
七、簡要說一下CSS的元素分類
塊級元素：div,p,h1,form,ul,li;
行內元素 : span,a,label,input,img,strong,em;
八、解釋下浮動和它的工作原理？清除浮動的方法
浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
1.使用空標簽清除浮動。
這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽。
2.使用after偽對象清除浮動
該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置 height:0，否則該元素會比實際高出若干像素；
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3.設置overflow為hidden或者auto
4.浮動外部元素
九、CSS隱藏元素的幾種方法（至少說出三種）
Opacity:元素本身依然占據它自己的位置並對網頁的布局起作用。它也將響應用戶交互;
Visibility:與 opacity 唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏;
Display:display 設為 none 任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在;
Position:不會影響布局，能讓元素保持可以操作;
Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;
十、如何讓一個盒子水平垂直居中
//已知寬高
<div class="div1"></div> <style> .div1{ width:400px; height:400px; position:absolute; left:50%; top:50% margin:-200px 0 0 -200px; } </style> //未知寬高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; border: 1px solid #000; width: 400px; height: 400px; } </style> </head> <body> <div class="div1"></div> </body> </html> //未知寬高方法二： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid #000; width: 400px; height: 400px; } </style> </head> <body> <div class="div1"></div> </body> </html>
十一、請描述一下cookies，sessionStorage和localStorage的區別？
相同點：都會在瀏覽器端保存，有大小和同源限制。
不同點：
1、cookie會隨請求發送到服務器，作為會話表示，服務器可修改cookie。web storage不會隨請求大宋到服務器。
2、cookie有path的概念，子路徑可以訪問父路徑的cookie，父路徑不可以訪問子路徑的cookie。
3、有效期： cookie在設置的有效期內有效，默認為瀏覽器關閉消失。sessionStorage在會話窗口關閉后失效，localStorage長期有效，需主動刪除。
4、sessionStorage不能共享，localStorage在同源文檔之間可以共享，cookie在同源且符合path規則的文檔之間可以共享。
5、localStorage的修改會觸發其他文檔的update事件。
6、cooie有secure屬性要求HTTPS傳輸。
7、瀏覽器不能保存超過300個cookie，單個服務器不能超過20個，每個cookie不能超過4k。webStorage可以支持5M的存儲。
十二、一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直為100px，右邊的div跟隨瀏覽器大小變化（比如瀏覽器為500，右邊div為400，瀏覽器為900，右邊div為800），請寫出大概的css代碼。
// 方法一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ width: 100px; height: 200px; background-color: #ccc; float: left; } .div2{ background-color: #ff0; margin-left: 100px; height: 200px; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html> //方法二： <head> <meta charset="UTF-8"> <title>Document</title> <style> .div{ display: flex; flex-direction: row; align-items: center; } .div1{ flex-basis: 100px; background-color: #ccc; height: 300px; } .div2{ background-color: #ff0; height: 300px; flex-grow: 1; } </style> </head> <body> <div class="div"> <div class="div1"></div> <div class="div2"></div> </div> </body>
十三、什么是語義化的HTML?
直觀的認識標簽 對於搜索引擎的抓取有好處，用正確的標簽做正確的事情！
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CCS情況下也以一種文檔格式顯示，並且是容易閱讀的。搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
十四、link和@import有什么區別？
link屬於XHTML標簽，除了加載CSS外，還能用於定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用於加載CSS;
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;
十五、常見的瀏覽器內核有哪些？
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
十六、如何解決跨域問題
JSONP、CORS、通過修改document.domain來跨子域、使用window.name來進行跨域、HTML5中新引進的window.postMessage方法、在服務器上設置代理頁面
1、JSONP
原理是：動態插入script標簽，通過script標簽引入一個js文件，這個js文件載入成功后會執行我們在url參數中指定的函數，並且會把我們需要的json數據作為參數傳入。
由於同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、端口）的資源，為了實現跨域請求，可以通過script標簽實現跨域請求，然后在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。
優點是兼容性好，簡單易用，支持瀏覽器與服務器雙向通信。缺點是只支持GET請求。
2、CORS
服務器端對於CORS的支持，主要就是通過設置Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設置，就可以允許Ajax進行跨域的訪問。
3、通過修改document.domain來跨子域
將子域和主域的document.domain設為同一個主域.前提條件：這兩個域名必須屬於同一個基礎域名!而且所用的協議，端口都要一致，否則無法利用document.domain進行跨域
主域相同的使用document.domain
4、使用window.name來進行跨域
window對象有個name屬性，該屬性有個特征：即在一個窗口(window)的生命周期內,窗口載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的所有頁面中的
十七、前端性能優化的方式
1、減少DOM操作
2、部署前，圖片壓縮，代碼壓縮
3、優化js代碼結構，減少冗余代碼
4、減少http請求，合理設置HTTP緩存
5、使用內容分發cdn加速
6、靜態資源緩存
7、圖片延遲加載
十八、對前端工程化的理解
開發規范
模塊化開發
組件化開發
開發倉庫
性能優化
項目部署
開發流程
開發工具