語(yǔ)義化
HTML標(biāo)簽的語(yǔ)義化是指:通過(guò)使用包含語(yǔ)義的標(biāo)簽(如h1-h6)恰當(dāng)?shù)乇硎疚臋n結(jié)構(gòu)
css命名的語(yǔ)義化是指:為html標(biāo)簽添加有意義的class
-
為什么需要語(yǔ)義化:
- 去掉樣式后頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)
- 盲人使用讀屏器更好地閱讀
- 搜索引擎更好地理解頁(yè)面设联,有利于收錄
- 便團(tuán)隊(duì)項(xiàng)目的可持續(xù)運(yùn)作及維護(hù)
簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解衙猪?
- 用正確的標(biāo)簽做正確的事情瑞佩。
- html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化火窒,結(jié)構(gòu)更清晰想虎,便于對(duì)瀏覽器赶舆、搜索引擎解析;
- 即使在沒(méi)有樣式CSS情況下也以一種文檔格式顯示龄坪,并且是容易閱讀的;
- 搜索引擎的爬蟲也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重叙身,利于SEO;
- 使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊封拧,便于閱讀維護(hù)理解
Doctype作用志鹃?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
-
<!DOCTYPE>
聲明位于位于HTML
文檔中的第一行,處于<html>
標(biāo)簽之前泽西。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔曹铃。DOCTYPE
不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn) - 標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中尝苇,頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作
HTML5 為什么只需要寫 <!DOCTYPE HTML>铛只?
- HTML5 不基于 SGML埠胖,因此不需要對(duì)DTD進(jìn)行引用,但是需要doctype來(lái)規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行)
- 而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用淳玩,才能告知瀏覽器文檔所使用的文檔類型
行內(nèi)元素有哪些直撤?塊級(jí)元素有哪些? 空(void)元素有那些蜕着?
- 行內(nèi)元素有:
a b span img input select strong
(強(qiáng)調(diào)的語(yǔ)氣) - 塊級(jí)元素有:
div ul ol li dl dt dd h1 h2 h3 h4…p
- 常見(jiàn)的空元素:
<br> <hr> <img> <input> <link> <meta>
頁(yè)面導(dǎo)入樣式時(shí)谋竖,使用link和@import有什么區(qū)別?
-
link
屬于XHTML
標(biāo)簽承匣,除了加載CSS
外蓖乘,還能用于定義RSS
,定義rel
連接屬性等作用;而@import
是CSS
提供的韧骗,只能用于加載CSS
- 頁(yè)面被加載的時(shí)嘉抒,
link
會(huì)同時(shí)被加載,而@import
引用的CSS
會(huì)等到頁(yè)面被加載完再加載 -
import
是CSS2.1
提出的袍暴,只在IE5
以上才能被識(shí)別些侍,而link
是XHTML
標(biāo)簽,無(wú)兼容問(wèn)題
介紹一下你對(duì)瀏覽器內(nèi)核的理解政模?
主要分成兩部分:渲染引擎(
layout engineer
或Rendering Engine
)和JS
引擎渲染引擎:負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容(HTML岗宣、XML、圖像等等)淋样、整理訊息(例如加入CSS等)耗式,以及計(jì)算網(wǎng)頁(yè)的顯示方式,然后會(huì)輸出至顯示器或打印機(jī)趁猴。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同刊咳,所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器躲叼、電子郵件客戶端以及其它需要編輯芦缰、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核
JS引擎則:解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果
最開始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確,后來(lái)JS引擎越來(lái)越獨(dú)立枫慷,內(nèi)核就傾向于只指渲染引擎
常見(jiàn)的瀏覽器內(nèi)核有哪些?
-
Trident
內(nèi)核:IE,MaxThon,TT,The World,360
,搜狗瀏覽器等浪规。[又稱MSHTML] -
Gecko
內(nèi)核:Netscape6
及以上版本或听,FF,MozillaSuite/SeaMonkey
等 -
Presto
內(nèi)核:Opera7
及以上。 [Opera
內(nèi)核原為:Presto笋婿,現(xiàn)為:Blink
;] -
Webkit
內(nèi)核:Safari,Chrome
等誉裆。 [Chrome
的Blink
(WebKit
的分支)]
html5有哪些新特性、移除了那些元素缸濒?如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題足丢?如何區(qū)分 HTML 和 HTML5粱腻?
-
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集,主要是關(guān)于圖像斩跌,位置绍些,存儲(chǔ),多任務(wù)等功能的增加
- 繪畫 canvas
- 用于媒介回放的 video 和 audio 元素
- 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)耀鸦,瀏覽器關(guān)閉后數(shù)據(jù)不丟失
- sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
- 語(yǔ)意化更好的內(nèi)容元素柬批,比如 article、footer袖订、header氮帐、nav、section
- 表單控件洛姑,calendar上沐、date、time楞艾、email奄容、url、search
- 新的技術(shù)webworker, websocket, Geolocation
移除的元素:
純表現(xiàn)的元素:basefont产徊,big昂勒,center,font, s舟铜,strike戈盈,tt,u
對(duì)可用性產(chǎn)生負(fù)面影響的元素:frame谆刨,frameset塘娶,noframes
-
支持HTML5新標(biāo)簽:
- IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽
- 可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽
- 瀏覽器支持新標(biāo)簽后,還需要添加標(biāo)簽?zāi)J(rèn)的樣式
當(dāng)然也可以直接使用成熟的框架痊夭、比如html5shim
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com
/svn/trunk/html5.js"</script><![endif]-->
- 如何區(qū)分HTML5: DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
HTML5的離線儲(chǔ)存怎么使用刁岸,工作原理能不能解釋一下?
在用戶沒(méi)有與因特網(wǎng)連接時(shí)她我,可以正常訪問(wèn)站點(diǎn)或應(yīng)用虹曙,在用戶與因特網(wǎng)連接時(shí),更新用戶機(jī)器上的緩存文件
原理:HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))番舆,通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源酝碳,這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái)。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)恨狈,瀏覽器會(huì)通過(guò)被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示
-
如何使用:
- 頁(yè)面頭部像下面一樣加入一個(gè)manifest的屬性疏哗;
- 在cache.manifest文件的編寫離線存儲(chǔ)的資源
- 在離線狀態(tài)時(shí),操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢禾怠?
在線的情況下返奉,瀏覽器發(fā)現(xiàn)html頭部有manifest屬性贝搁,它會(huì)請(qǐng)求manifest文件,如果是第一次訪問(wèn)app芽偏,那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)雷逆。如果已經(jīng)訪問(wèn)過(guò)app并且資源已經(jīng)離線存儲(chǔ)了,那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面哮针,然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件丧诺,如果文件沒(méi)有發(fā)生改變淤年,就不做任何操作捅厂,如果文件改變了探橱,那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)。
離線的情況下蛮放,瀏覽器就直接使用離線存儲(chǔ)的資源缩抡。
請(qǐng)描述一下 cookies,sessionStorage 和 localStorage 的區(qū)別包颁?
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端(Client Side)上的數(shù)據(jù)(通常經(jīng)過(guò)加密)
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要)瞻想,記會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞
sessionStorage
和localStorage
不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存-
存儲(chǔ)大忻浣馈:
-
cookie
數(shù)據(jù)大小不能超過(guò)4k -
sessionStorage
和localStorage
雖然也有存儲(chǔ)大小的限制蘑险,但比cookie大得多,可以達(dá)到5M或更大
-
-
有期時(shí)間:
-
localStorage
存儲(chǔ)持久數(shù)據(jù)岳悟,瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù) -
sessionStorage
數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除 -
cookie
設(shè)置的cookie
過(guò)期時(shí)間之前一直有效佃迄,即使窗口或?yàn)g覽器關(guān)閉
-
iframe有那些缺點(diǎn)?
- iframe會(huì)阻塞主頁(yè)面的Onload事件
- 搜索引擎的檢索程序無(wú)法解讀這種頁(yè)面贵少,不利于SEO
- iframe和主頁(yè)面共享連接池呵俏,而瀏覽器對(duì)相同域的連接有限制,所以會(huì)影響頁(yè)面的并行加載
- 使用
iframe
之前需要考慮這兩個(gè)缺點(diǎn)滔灶。如果需要使用iframe
普碎,最好是通過(guò)javascript
動(dòng)態(tài)給iframe
添加src
屬性值,這樣可以繞開以上兩個(gè)問(wèn)題
Label的作用是什么录平?是怎么用的麻车?
- label標(biāo)簽來(lái)定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件
HTML5的form如何關(guān)閉自動(dòng)完成功能萄涯?
- 給不想要提示的 form 或某個(gè) input 設(shè)置為 autocomplete=off绪氛。
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信? (阿里)
- WebSocket、SharedWorker
- 也可以調(diào)用localstorge涝影、cookies等本地存儲(chǔ)方式
webSocket如何兼容低瀏覽器?(阿里)
- Adobe Flash Socket 争占、
- ActiveX HTMLFile (IE) 燃逻、
- 基于 multipart 編碼發(fā)送 XHR 序目、
- 基于長(zhǎng)輪詢的 XHR
頁(yè)面可見(jiàn)性(Page Visibility API) 可以有哪些用途?
- 通過(guò) visibilityState 的值檢測(cè)頁(yè)面當(dāng)前是否可見(jiàn)伯襟,以及打開網(wǎng)頁(yè)的時(shí)間等;
- 在頁(yè)面被切換到其他后臺(tái)進(jìn)程的時(shí)候猿涨,自動(dòng)暫停音樂(lè)或視頻的播放
如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域?
- map+area或者svg
- border-radius
- 純js實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡(jiǎn)單算法姆怪、獲取鼠標(biāo)坐標(biāo)等等
實(shí)現(xiàn)不使用 border 畫出1px高的線叛赚,在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果
<div style="height:1px;overflow:hidden;background:red"></div>
網(wǎng)頁(yè)驗(yàn)證碼是干嘛的,是為了解決什么安全問(wèn)題
- 區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序稽揭“掣剑可以防止惡意破解密碼、刷票溪掀、論壇灌水
- 有效防止黑客對(duì)某一個(gè)特定注冊(cè)用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試
title與h1的區(qū)別事镣、b與strong的區(qū)別、i與em的區(qū)別揪胃?
-
title
屬性沒(méi)有明確意義只表示是個(gè)標(biāo)題璃哟,H1則表示層次明確的標(biāo)題,對(duì)頁(yè)面信息的抓取也有很大的影響 -
strong
是標(biāo)明重點(diǎn)內(nèi)容喊递,有語(yǔ)氣加強(qiáng)的含義随闪,使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí):<strong>會(huì)重讀,而<B>是展示強(qiáng)調(diào)內(nèi)容 - i內(nèi)容展示為斜體骚勘,em表示強(qiáng)調(diào)的文本
頁(yè)面導(dǎo)入樣式時(shí)铐伴,使用 link 和 @import 有什么區(qū)別?
- link 屬于HTML標(biāo)簽调鲸,除了加載CSS外盛杰,還能用于定 RSS等;@import 只能用于加載CSS
- 頁(yè)面加載的時(shí)藐石,link 會(huì)同時(shí)被加載即供,而 @import 引用的 CSS 會(huì)等到頁(yè)面被加載完再加載
- @import 只在 IE5 以上才能被識(shí)別,而 link 是HTML標(biāo)簽于微,無(wú)兼容問(wèn)題
介紹一下你對(duì)瀏覽器內(nèi)核的理解逗嫡?
- 瀏覽器內(nèi)核主要分為兩部分:渲染引擎(layout engineer 或 Rendering Engine) 和 JS引擎
- 渲染引擎負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容進(jìn)行布局計(jì)和樣式渲染,然后會(huì)輸出至顯示器或打印機(jī)
- JS引擎則負(fù)責(zé)解析和執(zhí)行JS腳本來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果和用戶交互
- 最開始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確株依,后來(lái)JS引擎越來(lái)越獨(dú)立驱证,內(nèi)核就傾向于只指渲染引擎
常見(jiàn)的瀏覽器內(nèi)核有哪些?
- Blink內(nèi)核:新版 Chrome恋腕、新版 Opera
- Webkit內(nèi)核:Safari抹锄、原Chrome
- Gecko內(nèi)核:FireFox、Netscape6及以上版本
- Trident內(nèi)核(又稱MSHTML內(nèi)核):IE、國(guó)產(chǎn)瀏覽器
- Presto內(nèi)核:原Opera7及以上
HTML5有哪些新特性伙单?
- 新增選擇器 document.querySelector获高、document.querySelectorAll
- 拖拽釋放(Drag and drop) API
- 媒體播放的 video 和 audio
- 本地存儲(chǔ) localStorage 和 sessionStorage
- 離線應(yīng)用 manifest
- 桌面通知 Notifications
- 語(yǔ)意化標(biāo)簽 article、footer吻育、header念秧、nav、section
- 增強(qiáng)表單控件 calendar布疼、date摊趾、time、email游两、url砾层、search
- 地理位置 Geolocation
- 多任務(wù) webworker
- 全雙工通信協(xié)議 websocket
- 歷史管理 history
- 跨域資源共享(CORS) Access-Control-Allow-Origin
- 頁(yè)面可見(jiàn)性改變事件 visibilitychange
- 跨窗口通信 PostMessage
- Form Data 對(duì)象
- 繪畫 canvas
HTML5移除了那些元素?
- 純表現(xiàn)的元素:basefont器罐、big梢为、center、font轰坊、s铸董、strike、tt肴沫、u
- 對(duì)可用性產(chǎn)生負(fù)面影響的元素:frame粟害、frameset、noframes
如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題颤芬?
- 通過(guò) document.createElement 創(chuàng)建新標(biāo)簽
- 使用墊片 html5shiv.js
如何區(qū)分 HTML 和 HTML5悲幅?
- DOCTYPE聲明、新增的結(jié)構(gòu)元素站蝠、功能元素
HTML5的離線儲(chǔ)存工作原理能不能解釋一下汰具,怎么使用?
-
HTML5的離線儲(chǔ)存原理:
- 用戶在線時(shí)菱魔,保存更新用戶機(jī)器上的緩存文件留荔;當(dāng)用戶離線時(shí),可以正常訪離線儲(chǔ)存問(wèn)站點(diǎn)或應(yīng)用內(nèi)容
-
HTML5的離線儲(chǔ)存使用:
- 在文檔的 html 標(biāo)簽設(shè)置 manifest 屬性澜倦,如 manifest="/offline.appcache"
- 在項(xiàng)目中新建 manifest 文件聚蝶,manifest 文件的命名建議:xxx.appcache
- 在 web 服務(wù)器配置正確的 MIME-type,即 text/cache-manifest
瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的藻治?
- 在線的情況下碘勉,瀏覽器發(fā)現(xiàn) html 標(biāo)簽有 manifest 屬性,它會(huì)請(qǐng)求 manifest 文件
- 如果是第一次訪問(wèn)app桩卵,那么瀏覽器就會(huì)根據(jù) manifest 文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)
- 如果已經(jīng)訪問(wèn)過(guò)app且資源已經(jīng)離線存儲(chǔ)了验靡,瀏覽器會(huì)對(duì)比新的 manifest 文件與舊的 manifest 文件倍宾,如果文件沒(méi)有發(fā)生改變,就不做任何操作晴叨。如果文件改變了凿宾,那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)
- 離線的情況下矾屯,瀏覽器就直接使用離線存儲(chǔ)的資源兼蕊。
iframe 有那些優(yōu)點(diǎn)和缺點(diǎn)?
-
優(yōu)點(diǎn):
- 用來(lái)加載速度較慢的內(nèi)容(如廣告)
- 可以使腳本可以并行下載
- 可以實(shí)現(xiàn)跨子域通信
-
缺點(diǎn):
- iframe 會(huì)阻塞主頁(yè)面的 onload 事件
- 無(wú)法被一些搜索引擎索識(shí)別
- 會(huì)產(chǎn)生很多頁(yè)面件蚕,不容易管理
label 的作用是什么孙技?怎么使用的?
-
label標(biāo)簽來(lái)定義表單控件的關(guān)系:
- 當(dāng)用戶選擇label標(biāo)簽時(shí)排作,瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和label標(biāo)簽相關(guān)的表單控件上
-
使用方法1:
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
-
使用方法2:
<label>Date:<input type="text"/></label>
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信牵啦?
- iframe + contentWindow
- postMessage
- SharedWorker(Web Worker API)
- storage 事件(localStorge API)
- WebSocket
webSocket 如何兼容低瀏覽器?
- Adobe Flash Socket
- ActiveX HTMLFile (IE)
- 基于 multipart 編碼發(fā)送 XHR
- 基于長(zhǎng)輪詢的 XHR
頁(yè)面可見(jiàn)性(Page Visibility API) 可以有哪些用途妄痪?
- 在頁(yè)面被切換到其他后臺(tái)進(jìn)程的時(shí)候哈雏,自動(dòng)暫停音樂(lè)或視頻的播放
- 當(dāng)用戶瀏覽其他頁(yè)面,暫停網(wǎng)站首頁(yè)幻燈自動(dòng)播放
- 完成登陸后衫生,無(wú)刷新自動(dòng)同步其他頁(yè)面的登錄狀態(tài)
title 與 h1 的區(qū)別裳瘪、b 與 strong 的區(qū)別、i 與 em 的區(qū)別罪针?
- title 表示是整個(gè)頁(yè)面標(biāo)題彭羹,h1 則表示層次明確的標(biāo)題,對(duì)頁(yè)面信息的抓取有很大的影響
- strong 標(biāo)明重點(diǎn)內(nèi)容泪酱,有語(yǔ)氣加強(qiáng)的含義派殷,使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí),strong 會(huì)重讀墓阀,而 b
是展示強(qiáng)調(diào)內(nèi)容
- i 內(nèi)容展示為斜體毡惜,em 表示強(qiáng)調(diào)的文本
- 自然樣式標(biāo)簽:b, i, u, s, pre
- 語(yǔ)義樣式標(biāo)簽:strong, em, ins, del, code
- 應(yīng)該準(zhǔn)確使用語(yǔ)義樣式標(biāo)簽, 但不能濫用。如果不能確定時(shí)斯撮,首選使用自然樣式標(biāo)簽