HTML
- Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
- HTML5 為什么只需要寫 <!DOCTYPE HTML>？
- 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
- 行內元素(行內元素默認不會從新行開始，而塊級元素會新起一行):b,big,i,small,tt;abbr,acronym,cite,code,dfn,em,kbd,strong,samp,var;a,bdo,br,img,map,object,q,script,span,sub,sup;button,input,label,select,textarea
- 塊兒元素：h5：figcaption,article,figure,aside,output,footer,audio,section,canvas,header,hgroup,video;address,blockquote,dd,div,dl,fieldset,form,h1,h3,h6,hr,noscript,ol,p,pre,table,tfoot,ul。
- 空(void)元素(沒有內容的元素)：br，hr，input,img,link,meta；area,base,col,command,embed,keygen,param,source,track,wbr
- 頁面導入樣式時，使用link和@import有什么區別
- link屬於xhtml標簽，除了家在css外，還能用於定義rss定義rel連接屬性等作用；@import是css提供的，只能用於加載css；
- 頁面被加載時，link會同時被加載，@import引用的css會等到頁面加載完再加載；
- @import是css2.1提出，ie5以上，link是xhtml標簽，無兼容問題。
- 介紹一下你對瀏覽器內核的理解？答案
- 主要氛圍兩部分：渲染引擎(Render Engine)和JS引擎
- 渲染引擎(Render Engine)：負責取得網頁的內容(html,xml和圖像等)，整理訊息(例如假如css)，以及計算網頁的顯示方式，然后輸出到顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不同。所有網頁瀏覽器、電子郵件客戶端以及它需要編輯、顯示網絡內容的應用程序都需要內核。
- JS引擎：解析和執行JavaScript來實現網頁的動態效果。
- 常見的瀏覽器內核有哪些？
- Trident內核：IE，360，搜過瀏覽器；
- Gecko內核：Netscape6及以上版本
- Presto內核：Opera
- Blink內核：Opera
- Webkit內核：Safari，Chrome
- html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？h5標簽
- 新特性：圖像，位置，存儲，多任務等，例如canvas,video,audio,localStorage，sessionStorage.
- 語意化更好的內容元素：article,footer,header,nav,section
- 表單：calendar，date，time，email，url，search
- 新技術：Websockt，Webworker，Geolocation
- 簡述一下你對HTML語義化的理解？ 答案
- 根據內容的結構化，選擇合適的標簽，便於開發者閱讀和寫出更優雅的代碼，讓瀏覽器的爬蟲和機器很好地解析。
- 在沒有css的情況下，頁面也可以呈現出很好地內容結構、代碼結構
- 有利於SEO：有利於爬蟲抓取更多的有效信息:爬蟲依賴於標簽來確定上下文和各關鍵字的權重；
- 方便其他設備解析(屏幕閱讀器，盲人閱讀器，移動設備)以意義的方式來渲染網頁
- 便於團隊開發和維護，語義化更具可讀性
- HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
- 瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
- 在線情況下，瀏覽器發現html頭部manifest屬性，會請求manifest文件，如果是第一次，瀏覽器根據文件內容下載對應的資源並且進行離線緩存，如果已經訪問過app並且資源文件已經離線存儲。瀏覽器使用離線資源加載頁面，然后瀏覽器對比新舊manifest文件，如果改變，重新下載文件中的資源並進行離線緩存。離線時間直接使用離線存儲的資源
- 請描述一下 cookies，sessionStorage 和 localStorage 的區別？
- localStorage是h5標准中新加入的技術 答案
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 數據的生命周期 | 可以設置失效時間，默認是關閉瀏覽器后失效 | 除非清除緩存否則永久保存 | 僅在當前會話下有效，關閉頁面或瀏覽器會被清除 |
| 存放數據大小 | 4K左右 | 一般為5MB | 一般為5MB |
| 與服務器端通信 | 每次都會攜帶在http頭中，使用cookie保存過多數據會帶來性能問題 | 僅在客戶端中保存，不參與服務器通信 | 僅在客戶端中保存，不參與服務器通信 |
| 易用性 | 需要開發人員自己封裝，原生的Cookie借口不友好 | 原生接口可以接受，亦可以再次封裝來更好的支持Object和Array |
- iframe有那些缺點？
- 鏈接
- 優點
- iframe能夠原封不動地把嵌入的網頁展現出來
- 如果有多個網頁調用iframe，只需要修改iframe的內容，就可以實現對調用iframe的每一個頁面內容的更改，方便快捷
- 網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來嵌套，可以增加代碼的可重用性。
- 如果遇到加載緩慢的第三方內容，如圖標和廣告等，可以用iframe來解決。
- 缺點
- 會產生很多頁面，不容易管理
- 在幾個框架中都出現上下、左右滾動條時，這些滾動條除了會擠占已經非常有限的頁面空間外，還會分散訪問者的注意力。
- 使用框架結構時，必須保證正確設置所有的導航鏈接，否則會給訪問者帶來很大的麻煩。比如被鏈接的頁面出現在導航框架內，這種情況下會導致鏈接死循環。
- 很多的移動設備（PDA手機）無法完全顯示框架，設備兼容性差。
- iframe框架頁面會增加服務器的http請求，對於大型網站是不可取的。
- 現在基本上都是用Ajax來代替iframe，iframe已漸漸退出了前端開發。
- Label的作用是什么？是怎么用的？（加 for 或 包裹）
- 元素定義標注（標記）。 label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。
- HTML5的form如何關閉自動完成功能？
<form autocomplete="on|off">
- 如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
- cookie
- 客戶端和服務器端都會請求服務器，性能下降
- 存儲限制4kb
- 頁面的cookie是共享的
- storage:只在客戶端使用，不會請求服務器處理，存儲量比較大，只能存儲字符串，非字符串會被轉成字符串
- sessionStorage：臨時性的，頁面打開有關閉則沒有，數據不共享
- localStorage：永久性的存儲，數據共享
- api：clear()，getItem,key(index),removeItem (name),setItem(name,value)
- cookie
- webSocket如何兼容低瀏覽器？(阿里)
- (WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與服務器全雙工通信(full-duplex)。在瀏覽器中通過http僅能實現單向的通信,comet可以一定程度上模擬雙向通信,但效率較低,並需要服務器有較好的支持; flash中的socket和xmlsocket可以實現真正的雙向通信,通過 flex ajax bridge,可以在javascript中使用這兩項功能. 可以預見,如果websocket一旦在瀏覽器中得到實現,將會替代上面兩項技術,得到廣泛的使用.) WebSocket是目前"唯一"的一個瀏覽器下的Socket的標准, 它是通過瀏覽器內部提供的API來實現訪問的. 低版本的瀏覽器沒有WebSocket這個標准, 就意味這些瀏覽器不允許用戶通過它們來實現Socket通訊. 解決兼容性的辦法就是准備一套Ajax + Server-side Script的后備方案. 比如Ajax + PHP Socket. 其他方案:Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基於 multipart 編碼 發送 XHR 、基於長輪詢的 XHR. 作者： 熠熠生陽 鏈接：http://www.imooc.com/article/details/id/10377 來源：慕課網 本文原創發布於慕課網 ，轉載請注明出處，謝謝合作！
- 頁面可見性（Page Visibility）API 可以有哪些用途？
- 如何在頁面上實現一個圓形的可點擊區域？
- map+Area/svg，boder-radius,js 19.實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
<div style="height:1px;overflow:hidden;background:black"></div>
- map+Area/svg，boder-radius,js 19.實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
- 網頁驗證碼是干嘛的，是為了解決什么安全問題？
- 減少非正常的請求，保護用戶權益，例如暴力破解用戶密碼，腳本登陸，頻繁使用涉及后台性能平靜的功能。
- tite與h1的區別、b與strong的區別、i與em的區別？
CSS
-
介紹一下標准的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
- 標准css盒子的寬度指的是內容區content的寬度，IE css盒子模型的寬指的是內容區寬+填充寬+邊界寬。
-
CSS選擇符有哪些？哪些屬性可以繼承？博客
- 類選擇器，id選擇器，偽類選擇器，屬性選擇器，類型選擇器
- 是否可以繼承
- 所有元素可以繼承：visibility和cursor
- 內聯元素可以繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
- 終端塊狀元素可繼承：text-indent和text-align。
- 列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image
- 不可繼承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
-
CSS優先級算法如何計算？
- 第一等：內聯樣式，權值為1000
- 第二等：代表ID選擇器，權值100
- 第三等：類，偽類，屬性選擇器，權值10
- 第四等：類型選擇器和偽元素選擇器，權值為1
- 通用選擇器，子選擇器，相鄰同胞選擇器權值為0
-
CSS3新增偽類有那些？