Web前端面試之HTML
1. 對WEB標準以及W3C的理解與認識
web標準規范要求，書寫標簽閉合、小寫、不亂嵌套，可提高搜索機器人對網頁內容的搜索幾率。--- SEO
使用外鏈css和js腳本，結構與行為、結構與表現分離，提高頁面的渲染速度，更快地顯示頁面的內容。
樣式與標簽的分離，更合理的語義化標簽，使內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件， 從而降低維護成本、改版更方便
不需要變動頁面內容，便可提供打印版本而不需要復制內容，提高網站易用性
遵循w3c制定的web標準，能夠使用戶瀏覽者更方便的閱讀，使網頁開發者之間更好的交流。
2. DOCTYPE作用？嚴格模式與混雜模式如何區分？它們有何意義?
Doctype 是一種標準通用標記語言的文檔類型聲明，它的目的是要告訴標準通用標記語言解析器，它應該使用什么樣的文檔類型定義(DTD)來解析文檔。
嚴格模式的排版和js運作模式是以該瀏覽器支持的最高標準運行
在混雜模式中，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作，DOCTYPE不存在 或格式不正確會導致文檔以混雜模式呈現
加入xml頭部聲明可以觸發IE瀏覽器的Quirks mode，觸發之后，瀏覽器解析方式就和IE5.5一樣，擁有IE5.5一樣的bug和其他問題，行為（Javascript）也是如此。
IE6的觸發,在XHTML的DOCTYPE前加入XML聲明
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
IE7的觸發,在XML聲明和XHTML的DOCTYPE之間加入HTML注釋
<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
IE6和IE7都可以觸發的,在HTML4.01的DOCTYPE文檔頭部加入HTML注釋
<!-- quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
意義：各個瀏覽器的混雜模式，基本就是各個瀏覽器的私有模式，不相互兼容。所以，除非是為了兼容的問題，比如你不想修改很久很久以前做的IE ONLY的網頁，否則刻意觸發混雜模式沒有任何意義。
3. 瀏覽器標準模式和怪異模式之間的區別是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什么模式
BackCompat：標準兼容模式關閉。
CSS1Compat：標準兼容模式開啟。
當document.compatMode等于BackCompat時，瀏覽器客戶區寬度是document.body.clientWidth；
當document.compatMode等于CSS1Compat時，瀏覽器客戶區寬度是document.documentElement.clientWidth。
4. 行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標簽'P"。“form"這個塊元素比較特殊，它只能用來容納其他塊元素。
div、dir - 目錄列表、center、h1-h6、ol、ul、table、pre- 格式化文本、form、fieldset - form控制組、address、blockquote - 塊引用、dl - 定義列表、menu、p、hr
noframes - frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容）、noscript - 可選腳本內容（對于不支持script的瀏覽器顯示此內容）
內聯元素：內聯元素(inline element)一般都是基于語義級(semantic)的基本元素。內聯元素只能容納文本或者其他內聯元素，常見內聯元素 “a”。
a/b/br/i/img/strong/small/input/font/cite/code/em/span/sub/sup/select
可變元素 : 需要根據上下文關系確定該元素是塊元素或者內聯元素。一旦上下文關系確定了類別，就遵循塊元素或者內聯元素的規則限制。
* applet - java applet * button - 按鈕 * del - 刪除文本 * iframe - inline frame * ins - 插入的文本 * map - 圖片區塊(map) * object - object對象 * script - 客戶端腳本
空元素(沒有內容的HTML內容被稱為空元素，空元素是在開始標簽中關閉的)有: img input br hr link meta
5. CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
link 方式的樣式的權重>@import的權重
link屬于XHTML標簽，而@import是CSS提供的；
前者無兼容性，后者CSS2.1以下瀏覽器不支持
link是在加載頁面前把css加載完畢，而@import url（）則是讀取完文件后在加載
Link 支持使用javascript改變樣式，后者不可
link除了能加載css外還能定義RSS，定義rel連接屬性，@import只能加載css
所以我認為結合來使用就最好，比如：<link href="css/main.css" rel="stylesheet" type="text/css">引用了一個main.css文件，在main.css里面再引用@import url(footer.css);@import url(head.css);這樣達到一個清晰明了的作用.
6. CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?
標簽選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標簽選擇
后者優先級高
7. 前端頁面有哪三層構成，分別是什么?作用是什么?
結構層 Html 表示層 CSS 行為層 js
8. css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
9. 你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么?
Ie(Trident) 火狐（Gecko） 谷歌（WebKit的分支Blink） opear(原為Presto現為Blink)
10. 寫出幾種IE6 BUG的解決方法
【IE6的瘋狂之一】IE6中奇數寬高的BUG：http://www.css88.com/archives/1725
【IE6的瘋狂之二】IE6中PNG Alpha透明：http://www.css88.com/archives/577
【IE6的瘋狂之三】IE6 3像素BUG的實例：http://www.css88.com/archives/117
【IE6的瘋狂之四】IE6文字溢出BUG：http://www.css88.com/archives/253
【IE6的瘋狂之五】div遮蓋select的解決方案：http://www.css88.com/archives/545
【IE6的瘋狂之六】li在IE中底部3像素的BUG（增加浮動解決問題）：http://www.css88.com/archives/421
【IE6的瘋狂之七】樣式中文注釋后引發失效：http://www.css88.com/archives/726
【IE6的瘋狂之八】鏈接偽類（:hover）CSS背景圖片有閃動BUG：http://www.css88.com/archives/744
【IE6的瘋狂之九】li在IE中底部空行的BUG：http://www.css88.com/archives/1111
【IE6的瘋狂之十】父級使用padding后，子元素絕對定位的BUGhttp://www.css88.com/archives/1584
【IE6的瘋狂之十一】!important在IE6下的一個BUG：http://www.css88.com/archives/1716
【IE6的瘋狂之十二】一個display:none引起的3像素的BUG：http://www.css88.com/archives/1797
【IE6的瘋狂之十三】IE6下使用濾鏡后鏈接不能點擊的BUG：http://www.css88.com/archives/2916
11. 前端性能優化
網絡性能優化，加快訪問速度，瀏覽器并行加載數量，怎樣實現原生JS異步載入，CDN加速的原理，如何將不同靜態資源發布到多個域名服務器上，發布后這些靜態字段的url路徑改怎么批量改寫，用什么工具進行項目打包，css打包后的相對路徑怎么轉換為絕對路徑，用什么工具進行項目模塊依賴管理，怎么進行cookie優化等等，
這個說起來就很多了，盡可能的按照自己做過的優化來講，否則面試官隨便挑一項深究都可能會卡殼，與其這樣還不如不講。
12. 介紹一下你對瀏覽器內核的理解？
瀏覽器內核是瀏覽器最重要的或者說是最核心的部分。主要負責對網頁語法的解釋并渲染(顯示)網頁。
瀏覽器內核又可以分為兩個部分（渲染引擎和js引擎）
js引擎則是解析JavaScript語言，執行javascript語言來實現網頁的動態效果。
渲染引擎負責取的網頁的內容，整理訊息，以及計算網頁的顯示方式，然后哦會輸出至顯示器或者打印機。
13. 簡述一下你對HTML語義化的理解？
HTML語義化是指根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
HTML語義化的主要目的是：
1).為了在沒有css的情況下，頁面也能呈現出很好地內容結構、代碼結構
2).有利于用戶體驗
3).有利于SEO和搜索引擎建立良好的溝通。
4).方便其他設備解析以意義的方式來渲染網頁、
5).便于團隊開發和維護，增加可讀性。
14. HTML5的離線儲存怎么使用
離線存儲局勢將一些源代碼文件保存在本地，這樣后續的頁面重新加載將使用本地資源文件，在離線情況下可以繼續訪問web應用，同時通過一定的手法(更新相關文件或者使用相關 API)，可以更新、刪除離線存儲等操作
15. HTML5 為什么只需要寫 <!DOCTYPE HTML>？
html5不基于SGML(標準通用語言)，因此不需要對DTD（文檔類型定義）進行引用，但需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式運行）
而html4.01基于SGML，所以需要對DTD進行應用，才能告知瀏覽器文檔所使用的文檔類型
浙公網安備 33010602011771號