前端面試題之---HTML篇

DOCTYPE作用?標準模式與兼容模式各有什麼區別?
1 告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
2 標準模式中,排版和JS運作模式都是以該瀏覽器支持的最高標準運行;
 兼容模式中,頁面以寬鬆的向後兼容的方式呈現,模擬老式瀏覽器的行爲以防止站點無法工作。

HTML5爲什麼只要寫?
HTML5不基於SGML,因此不需要對DTD進行引用,但需要DOCTYPE來規範瀏覽器的行爲;而HTML4.01基於SGML,需要對DTD進行引用,才能告知瀏覽器文檔所使用的文檔類型。

行內元素有哪些?塊級元素有哪些?空元素有哪些?
行內元素:a b i em span input select strong等
塊級元素:h1~h6 p div ul ol dl li等
空元素:meta link br hr img input area等

頁面導入樣式時,使用link和@import有什麼區別?
1 link除了加載CSS之外,還能定義RSS,定義rel連接屬性等作用;而@import只能加載CSS。
2 link在頁面加載時同時加載;而@import引用的CSS會等到頁面加載完後再加載。
3 link是XHTML標籤,無兼容問題;@import是CSS提出的,IE5以上才能識別。

介紹一下你對瀏覽器內核的認識?
主要分成兩部分:渲染引擎和JS引擎。
渲染引擎:負責取得網頁內容,整理訊息,以及計算網頁的顯示方式,然後輸出至顯示器或打印機。瀏覽器的內核不同對於網頁的語法解釋會有不同,所以渲染的效果也不同。
JS引擎:解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎沒有很明確的區分,後來JS引擎越來越獨立,內核就傾向於只指渲染引擎。

常見的瀏覽器內核有哪些?
1 Trident內核:IE
2 Gecko 內核:Firefox
3 Presto 內核:Opera(現爲Blink)
4 Webkit 內核:Safari,Chrome (Chrome現爲Blink)

HTML5有哪些新特性、移除了哪些元素?
HTML5現在已不是SGML的子集,主要是關於圖像,位置,存儲,多任務等功能的增加。
 繪畫:canvas;
 媒體播放:video和audio元素;
 本地離線存儲:localStorage和sessionStorage;
 語義化更好的元素,如article、footer、header、nav、section;
 表單控件,如calendar、date、time、email、url、search;
 新的技術,webworker,websockert,Geolocation;
移除的元素:
 純表現的元素:big,center,font,basefont,strike,s,u;
 對可用性產生負面影響的元素:frame,frameset,noframes;

如何處理HTML5新標籤的瀏覽器兼容問題?如何區分HTML和HTML5?
IE6/7/8支持通過document.createElement方法產生的標籤,可以使用這種方法來兼容,還要添加上標籤默認的樣式。識別HTML5:通過DOCTYPE聲明,新增的結構元素,功能元素

HTML5的離線儲存怎麼使用?工作原理能不能解釋一下?
如何使用:只要在在頁面頭部加入mainfest的屬性就行了。

……
工作原理:HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術),通過這個文件上的解析清單離線存儲資源,這些資源就像cookie一樣被存儲下來。當無網時,瀏覽器會通過被離線存儲的數據進行展示。

瀏覽器是怎麼對HTML5的離線存儲資源進行管理和加載的?
在線的情況下,瀏覽器發現html頭部有manifest屬性,它會請求manifest文件。如果是第一次訪問app,那麼瀏覽器就會根據manifest文件的內容下載相應的資源並進行離線存儲。如果已經訪問過app,瀏覽器就會使用離線的資源加載頁面,然後瀏覽器會對比新的manifest文件和舊的manifest文件,如果發生改變就更新資源。

請描述一下cookies,sessionStorage,localStorage的區別?
cookie是網站爲了標識用戶身份而儲存在用戶本地終端的數據(通常經過加密)。
cookie數據始終在同源的http請求中攜帶,即會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器,僅在本地保存。

存儲大小:
 cookie數據大小不能超過4k。
 sessionStorage和localStorage雖然也有存儲大小限制,但比cookie大得多,有5M或更大。
有效時間:
 cookie     在cookie設置的過期時間之前一直有效,即使瀏覽器關閉
 sessionStorage 數據在當前瀏覽器窗口關閉之後自動刪除
 localStorage   存儲持久數據,瀏覽器關閉之後數據不丟失除非主動刪除數據

iframe有哪些缺點?
1 iframe會阻塞主頁面的Onload事件;
2 搜索引擎的檢索程序無法解讀這種頁面,不利於SEO;
3 iframe和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會影響頁面的並行加載。

如果要使用iframe,最好通過javascript動態給ifarme添加src屬性值,這樣可以避免以上問題。

label的作用是什麼?是怎麼用的?
label標籤定義表單控制間的關係,當用戶選擇該標籤時,瀏覽器會自動將焦點轉到和標籤相關的表單控件上。


HTML5的from如何關閉自動完成功能?
給不想要提示的 from 或某個 input 設置爲 autocomplete=off。

如何實現瀏覽器內多個標籤頁之間的通信?
WebSocket,SharedWorker;也可以調用localStorage,cookies等本地存儲方式;

localStorage在另一個瀏覽器上下文裏被添加、修改或刪除時,它都會觸發一個事件,我們通過監聽事件,控制它的值來進行頁面信息通信。

頁面可見性(Page Visibility API)可以有哪些用途?
通過visibilityState的值檢測頁面當前是否可見,以及打開網頁的時間等;在頁面被切換到其他後臺進程的時候,自動暫停音樂或視頻播放

網頁驗證碼是幹嘛的,是爲了解決什麼安全問題?
區分用戶是人還是計算機的自動程序,可以防止惡意破解密碼,刷票,論壇灌水;有效防止黑客對某個特定用戶用程序來進行暴利破解登陸。

b與strong的區別?i與em的區別?
strong是表明重點內容,有語氣加強的含義,使用閱讀設備閱讀網絡時,strong會重讀,而b是展示強調內容。i內容顯示爲斜體,em表示強調文本。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章