前端面試題1（HTML篇）

2023年12月27日 76次阅读 来源: keywords

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銜接屬性等作用；而@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？

  • 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
  • 應當正確運用語義款式標籤, 但不能濫用。假如不能肯定時，首選運用天然款式標籤
    原文作者：keywords
    原文地址: https://segmentfault.com/a/1190000014994737
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞