搜尋

首頁 >web前端 >js教程 >前端面試題HTML新手須知

前端面試題HTML新手須知

php中世界最好的语言
php中世界最好的语言原創
2018-05-24 13:46:321143瀏覽

HTML

語意化

  • #HTML標籤的語意化是指：透過使用包含語意的標籤（如h1-h6）恰當地表示文件結構

  • css命名的語意化是指：為html標籤加入有意義的class

  • 為什麼需要語意化：

    • 去掉樣式後頁面呈現清晰的結構

    • 盲眼使用讀取螢幕器更好地閱讀

    • 搜尋引擎更能理解頁面，有利於收錄

    • 便團隊專案的可持續運作及維護

簡單說明一下你對HTML語意化的理解？

  • 用正確的標籤做正確的事。

  • html語意化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;

  • 即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;

  • 搜尋引擎的爬蟲也依賴HTML標記來確定上下文和各個關鍵字的權重，利於SEO;

  • 讓閱讀原始程式碼的人對網站更容易將網站分塊，便於閱讀維護理解

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

  • <!DOCTYPE>宣告位於位元於HTML文件中的第一行，處於<html> 標籤之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。 DOCTYPE不存在或格式不正確會導致文件以相容模式呈現

  • 標準模式的排版和JS運作模式都是以該瀏覽器支援的最高標準運行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止網站無法工作

HTML5 為什麼只需要寫？

  • 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<a href="http://www.php.cn/wiki/48.html" target="_blank">動態為</a>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高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

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

如何实现浏览器内多个标签页之间的通信？

  • 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

  • 应该准确使用语义样式标签, 但不能滥用。如果不能确定时，首选使用自然样式标签

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

bootstarp+table使用方法分析

前端中排序算法实例详解

以上是前端面試題HTML新手須知的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：bootstarp+table使用方法分析下一篇：bootstarp+table使用方法分析

相關文章

看更多