HTML面試題總結

時間 2019-11-10

標籤 html 面試總結欄目 HTML 简体版

原文原文鏈接

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有那些缺點？
- 連接
- 優勢
  1. iframe可以原封不動地把嵌入的網頁展示出來
  2. 若是有多個網頁調用iframe，只須要修改iframe的內容，就能夠實現對調用iframe的每個頁面內容的更改，方便快捷
  3. 網頁若是爲了統一風格，頭部和版本都是同樣的，就能夠寫成一個頁面，用iframe來嵌套，能夠增長代碼的可重用性。
  4. 若是遇到加載緩慢的第三方內容，如圖標和廣告等，能夠用iframe來解決。
- 缺點
  1. 會產生不少頁面，不容易管理
  2. 在幾個框架中都出現上下、左右滾動條時，這些滾動條除了會擠佔已經很是有限的頁面空間外，還會分散訪問者的注意力。
  3. 使用框架結構時，必須保證正確設置全部的導航連接，不然會給訪問者帶來很大的麻煩。好比被連接的頁面出如今導航框架內，這種狀況下會致使連接死循環。
  4. 不少的移動設備（PDA手機）沒法徹底顯示框架，設備兼容性差。
  5. iframe框架頁面會增長服務器的http請求，對於大型網站是不可取的。
- 如今基本上都是用Ajax來代替iframe，iframe已漸漸退出了前端開發。
Label的做用是什麼？是怎麼用的？（加 for 或包裹）
- 元素定義標註（標記）。 label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。若是您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。
HTML5的form如何關閉自動完成功能？
- <form autocomplete="on|off">
如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)
- cookie
  1. 客戶端和服務器端都會請求服務器，性能降低
  2. 存儲限制4kb
  3. 頁面的cookie是共享的
- storage:只在客戶端使用，不會請求服務器處理，存儲量比較大，只能存儲字符串，非字符串會被轉成字符串
  1. sessionStorage：臨時性的，頁面打開有關閉則沒有，數據不共享
  2. localStorage：永久性的存儲，數據共享
  3. api：clear()，getItem,key(index),removeItem (name),setItem(name,value)
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>
網頁驗證碼是幹嗎的，是爲了解決什麼安全問題？
- 減小非正常的請求，保護用戶權益，例如暴力破解用戶密碼，腳本登錄，頻繁使用涉及後臺性能平靜的功能。
tite與h1的區別、b與strong的區別、i與em的區別？
- 答案

CSS

介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不一樣的？javascript
- 標準css盒子的寬度指的是內容區content的寬度，IE css盒子模型的寬指的是內容區寬+填充寬+邊界寬。
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優先級算法如何計算？html
- 第一等：內聯樣式，權值爲1000
- 第二等：表明ID選擇器，權值100
- 第三等：類，僞類，屬性選擇器，權值10
- 第四等：類型選擇器和僞元素選擇器，權值爲1
- 通用選擇器，子選擇器，相鄰同胞選擇器權值爲0
CSS3新增僞類有那些？前端
- 博客