前端面試題1（HTML篇）

時間  2019-11-07
標籤 端面 試題 html 欄目 HTML 简体版
原文   原文鏈接

HTML

語義化javascript

  • HTML標籤的語義化是指：經過使用包含語義的標籤（如h1-h6）恰當地表示文檔結構
  • css命名的語義化是指：爲html標籤添加有意義的class

  • 爲何須要語義化：css

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

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

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

Doctype做用？標準模式與兼容模式各有什麼區別?html5

  • <!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現
  • 標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做

HTML5 爲何只須要寫 <!DOCTYPE HTML>？java

  • HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）
  • 而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型

頁面導入樣式時，使用link和@import有什麼區別？web

  • link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS,定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS
  • 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載
  • import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題

常見的瀏覽器內核有哪些？算法

  • Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
  • Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
  • Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]
  • Webkit內核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]

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

  • 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請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞
  • sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存

  • 存儲大小：

    • cookie數據大小不能超過4k
    • sessionStorage和localStorage雖然也有存儲大小的限制，但比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
  • 應該準確使用語義樣式標籤, 但不能濫用。若是不能肯定時，首選使用天然樣式標籤
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程