語意化
#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;]
核心: Safari,Chrome
等。 [ Chrome
的Blink
(WebKit
的分支)]
本機離線儲存localStorage 長期儲存數據,瀏覽器關閉後資料不遺失
sessionStorage 的資料在瀏覽器關閉後自動刪除
語義化更好的內容元素,例如article、footer、header、nav、section
表單控件,calendar、date、time、email、url 、search
新的技術webworker, websocket, Geolocation
html5有哪些新特性、移除了那些元素?如何處理HTML5新標籤的瀏覽器相容問題?如何區分 HTML 和 HTML5?
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com /svn/trunk/html5.js"</script><![endif]-->
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
在線上的情況下,瀏覽器發現html頭有manifest屬性,它會要求manifest文件,如果是第一次訪問app,那麼瀏覽器就會根據manifest檔案的內容下載對應的資源並且進行離線儲存。如果已經造訪過app且資源已經離線儲存了,那麼瀏覽器就會使用離線的資源載入頁面,然後瀏覽器會對比新的manifest檔案與舊的manifest文件,如果檔案沒有改變,就不做任何操作,如果檔案改變了,那麼就會重新下載檔案中的資源並進行離線儲存。
離線的情況下,瀏覽器就直接使用離線儲存的資源
請描述一下cookies,sessionStorage 和localStorage 的區別?
cookie是網站為了標示使用者身分而儲存在使用者本地端(Client Side)上的資料(通常經過加密)
cookie資料總是會在同源的http請求中攜帶(即使不需要),記會在瀏覽器和伺服器間來回傳遞
sessionStorage
和localStorage
不會自動把資料發給伺服器,只在本地保存
儲存大小:
##cookie資料大小不能超過4k
sessionStorage和
localStorage雖然也有儲存大小的限制,但比cookie大得多,可以達到5M或更大
儲存持久數據,瀏覽器關閉後資料不遺失除非主動刪除資料
資料在目前瀏覽器視窗關閉後自動刪除
設定的cookie
過期時間之前一直有效,即使視窗或瀏覽器關閉
之前需要考慮這兩個缺點。如果需要使用iframe
,最好是透過javascript
<a href="//m.sbmmt.com/wiki/48.html" target="_blank">動態為</a>iframe
新增src
屬性值,這樣可以繞開以上兩個問題
Visibility API) 可以有哪些用途? 通过 visibilityState 的值检测页面当前是否可见,以及打开网页的时间等; 在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放 如何在页面上实现一个圆形的可点击区域? map+area或者svg border-radius 纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等 实现不使用 border 画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果 如何实现浏览器内多个标签页之间的通信? 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中文网其它相关文章! 推荐阅读:
<p style="height:1px;overflow:hidden;background:red"></p>
以上是前端面試題HTML新手須知的詳細內容。更多資訊請關注PHP中文網其他相關文章!