前端面試題1(HTML篇)

keywords發表於2019-02-16

HTML


語義化

  • HTML標籤的語義化是指:通過使用包含語義的標籤(如h1-h6)恰當地表示文件結構
  • css命名的語義化是指:為html標籤新增有意義的class
  • 為什麼需要語義化:

    • 去掉樣式後頁面呈現清晰的結構
    • 盲人使用讀屏器更好地閱讀
    • 搜尋引擎更好地理解頁面,有利於收錄
    • 便團隊專案的可持續運作及維護

簡述一下你對HTML語義化的理解?

  • 用正確的標籤做正確的事情。
  • html語義化讓頁面的內容結構化,結構更清晰,便於對瀏覽器、搜尋引擎解析;
  • 即使在沒有樣式CSS情況下也以一種文件格式顯示,並且是容易閱讀的;
  • 搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重,利於SEO;
  • 使閱讀原始碼的人對網站更容易將網站分塊,便於閱讀維護理解

Doctype作用?標準模式與相容模式各有什麼區別?

  • <!DOCTYPE>宣告位於位於HTML文件中的第一行,處於 <html> 標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現
  • 標準模式的排版 和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中,頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作

HTML5 為什麼只需要寫 <!DOCTYPE HTML>?

  • HTML5 不基於 SGML,因此不需要對DTD進行引用,但是需要doctype來規範瀏覽器的行為(讓瀏覽器按照它們應該的方式來執行)
  • 而HTML4.01基於SGML,所以需要對DTD進行引用,才能告知瀏覽器文件所使用的文件型別

頁面匯入樣式時,使用link和@import有什麼區別?

  • link屬於XHTML標籤,除了載入CSS外,還能用於定義RSS,定義rel連線屬性等作用;而@importCSS提供的,只能用於載入CSS
  • 頁面被載入的時,link會同時被載入,而@import引用的CSS會等到頁面被載入完再載入
  • importCSS2.1 提出的,只在IE5以上才能被識別,而linkXHTML標籤,無相容問題

常見的瀏覽器核心有哪些?

  • Trident核心:IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
  • Gecko核心:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey
  • Presto核心:Opera7及以上。 [Opera核心原為:Presto,現為:Blink;]
  • Webkit核心:Safari,Chrome等。 [ ChromeBlinkWebKit的分支)]

html5有哪些新特性、移除了那些元素?如何處理HTML5新標籤的瀏覽器相容問題?如何區分 HTML 和 HTML5?

  • HTML5 現在已經不是 SGML 的子集,主要是關於影像,位置,儲存,多工等功能的增加

    • 繪畫 canvas
    • 用於媒介回放的 video 和 audio 元素
    • 本地離線儲存 localStorage 長期儲存資料,瀏覽器關閉後資料不丟失
    • sessionStorage 的資料在瀏覽器關閉後自動刪除
    • 語意化更好的內容元素,比如 article、footer、header、nav、section
    • 表單控制元件,calendar、date、time、email、url、search
    • 新的技術webworker, websocket, Geolocation
  • 移除的元素:

    • 純表現的元素:basefont,big,center,font, s,strike,tt,u
    • 對可用性產生負面影響的元素:frame,frameset,noframes
  • 支援HTML5新標籤:

    • IE8/IE7/IE6支援通過document.createElement方法產生的標籤
    • 可以利用這一特性讓這些瀏覽器支援HTML5新標籤
    • 瀏覽器支援新標籤後,還需要新增標籤預設的樣式

html5有哪些新特性、移除了那些元素?如何處理HTML5新標籤的瀏覽器相容問題?如何區分 HTML 和 HTML5?

  • HTML5 現在已經不是 SGML 的子集,主要是關於影像,位置,儲存,多工等功能的增加

    • 繪畫 canvas
    • 用於媒介回放的 video 和 audio 元素
    • 本地離線儲存 localStorage 長期儲存資料,瀏覽器關閉後資料不丟失
    • sessionStorage 的資料在瀏覽器關閉後自動刪除
    • 語意化更好的內容元素,比如 article、footer、header、nav、section
    • 表單控制元件,calendar、date、time、email、url、search
    • 新的技術webworker, websocket, Geolocation
  • 移除的元素:

    • 純表現的元素:basefont,big,center,font, s,strike,tt,u
    • 對可用性產生負面影響的元素:frame,frameset,noframes
  • 支援HTML5新標籤:

    • IE8/IE7/IE6支援通過document.createElement方法產生的標籤
    • 可以利用這一特性讓這些瀏覽器支援HTML5新標籤
    • 瀏覽器支援新標籤後,還需要新增標籤預設的樣式
  • 當然也可以直接使用成熟的框架、比如html5shim
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com
/svn/trunk/html5.js"</script><![endif]-->
  • 如何區分HTML5: DOCTYPE宣告新增的結構元素功能元素

HTML5的離線儲存怎麼使用,工作原理能不能解釋一下?

  • 在使用者沒有與因特網連線時,可以正常訪問站點或應用,在使用者與因特網連線時,更新使用者機器上的快取檔案
  • 原理:HTML5的離線儲存是基於一個新建的.appcache檔案的快取機制(不是儲存技術),通過這個檔案上的解析清單離線儲存資源,這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時,瀏覽器會通過被離線儲存的資料進行頁面展示
  • 如何使用:

    • 頁面頭部像下面一樣加入一個manifest的屬性;
    • 在cache.manifest檔案的編寫離線儲存的資源
    • 在離線狀態時,操作window.applicationCache進行需求實現
CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢?

  • 線上的情況下,瀏覽器發現html頭部有manifest屬性,它會請求manifest檔案,如果是第一次訪問app,那麼瀏覽器就會根據manifest檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過app並且資源已經離線儲存了,那麼瀏覽器就會使用離線的資源載入頁面,然後瀏覽器會對比新的manifest檔案與舊的manifest檔案,如果檔案沒有發生改變,就不做任何操作,如果檔案改變了,那麼就會重新下載檔案中的資源並進行離線儲存。
  • 離線的情況下,瀏覽器就直接使用離線儲存的資源

請描述一下 cookies,sessionStorage 和 localStorage 的區別?

  • cookie是網站為了標示使用者身份而儲存在使用者本地終端(Client Side)上的資料(通常經過加密)
  • cookie資料始終在同源的http請求中攜帶(即使不需要),記會在瀏覽器和伺服器間來回傳遞
  • sessionStoragelocalStorage不會自動把資料發給伺服器,僅在本地儲存
  • 儲存大小:

    • cookie資料大小不能超過4k
    • sessionStoragelocalStorage雖然也有儲存大小的限制,但比cookie大得多,可以達到5M或更大
  • 有期時間:

    • localStorage 儲存持久資料,瀏覽器關閉後資料不丟失除非主動刪除資料
    • sessionStorage 資料在當前瀏覽器視窗關閉後自動刪除
    • cookie 設定的cookie過期時間之前一直有效,即使視窗或瀏覽器關閉

iframe有哪些優點和缺點?

  • 缺點:
  • iframe會阻塞主頁面的Onload事件
  • 搜尋引擎的檢索程式無法解讀這種頁面,不利於SEO
  • iframe和主頁面共享連線池,而瀏覽器對相同域的連線有限制,所以會影響頁面的並行載入
  • 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是通過javascript動態給iframe新增src屬性值,這樣可以繞開以上兩個問題
  • 優點:

    • 用來載入速度較慢的內容(如廣告)
    • 可以使指令碼可以並行下載
    • 可以實現跨子域通訊

Label的作用是什麼?是怎麼用的?

  • label標籤來定義表單控制間的關係,當使用者選擇該標籤時,瀏覽器會自動將焦點轉到和標籤相關的表單控制元件

HTML5的form如何關閉自動完成功能?

  • 給不想要提示的 form 或某個 input 設定為 autocomplete=off。

如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

  • WebSocket、SharedWorker
  • 也可以呼叫localstorge、cookies等本地儲存方式

webSocket如何相容低瀏覽器?(阿里)

  • Adobe Flash Socket 、
  • ActiveX HTMLFile (IE) 、
  • 基於 multipart 編碼傳送 XHR 、
  • 基於長輪詢的 XHR

頁面可見性(Page Visibility API) 可以有哪些用途?

  • 通過 visibilityState 的值檢測頁面當前是否可見,以及開啟網頁的時間等;
  • 在頁面被切換到其他後臺程式的時候,自動暫停音樂或視訊的播放

如何在頁面上實現一個圓形的可點選區域?

  • map+area或者svg
  • border-radius
  • 純js實現 需要求一個點在不在圓上簡單演算法、獲取滑鼠座標等等

實現不使用 border 畫出1px高的線,在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果

<div style="height:1px;overflow:hidden;background:red"></div>

如何實現瀏覽器內多個標籤頁之間的通訊?

  • iframe + contentWindow
  • postMessage
  • SharedWorker(Web Worker API)
  • storage 事件(localStorge API)
  • WebSocket

webSocket 如何相容低瀏覽器?

  • Adobe Flash Socket
  • ActiveX HTMLFile (IE)
  • 基於 multipart 編碼傳送 XHR
  • 基於長輪詢的 XHR

title 與 h1 的區別、b 與 strong 的區別、i 與 em 的區別?

  • title 表示是整個頁面標題,h1 則表示層次明確的標題,對頁面資訊的抓取有很大的影響
  • strong 標明重點內容,有語氣加強的含義,使用閱讀裝置閱讀網路時,strong 會重讀,而 b 是展示強調內容
  • i內容展示為斜體,em 表示強調的文字
  • 自然樣式標籤:b, i, u, s, pre
  • 語義樣式標籤:strong, em, ins, del, code
  • 應該準確使用語義樣式標籤, 但不能濫用。如果不能確定時,首選使用自然樣式標籤

相關文章