1. <image> 標簽上 title 屬性與 alt 屬性的區(qū)別是什么娇掏?
alt 屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的爽哎。
且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短婆跑。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶,視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設(shè)置該屬性的元素提供建議性的信息橙依。使用title屬性提供非本質(zhì)的額外信息枣接。
2. 請寫出至少 5 個 html5 新增的標簽颂暇,并說明其語義和應(yīng)用場景
section:定義文檔中的一個章節(jié)
nav:定義只包含導(dǎo)航鏈接的章節(jié)
header:定義頁面或章節(jié)的頭部。它經(jīng)常包含 logo但惶、頁面標題和導(dǎo)航性的目錄耳鸯。
footer:定義頁面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息膀曾、法律信息鏈接和反饋建議用的地址片拍。
aside:定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除,剩下的內(nèi)容仍然很合理妓肢。
3. 請說說你對標簽語義化的理解捌省?
a. 去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
b. 有利于SEO:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重
c. 方便其他設(shè)備解析(如屏幕閱讀器碉钠、盲人閱讀器纲缓、移動設(shè)備)以意義的方式來渲染網(wǎng)頁
d. 便于團隊開發(fā)和維護卷拘,語義化更具可讀性,遵循W3C標準的團隊都遵循這個標準祝高,可以減少差異化
4. Doctype 作用栗弟?嚴格模式與混雜模式如何區(qū)分?它們有何意義工闺?
聲明位于文檔中的最前面乍赫,處于標簽之前。
告知瀏覽器以何種模式來渲染文檔陆蟆。嚴格模式的排版和 JS 運作模式是雷厂,以該瀏覽器支持的最高標準運行。
在混雜模式中叠殷,頁面以寬松的向后兼容的方式顯示改鲫。
模擬老式瀏覽器的行為以防止站點無法工作。
DOCTYPE 不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)林束。
5. 你知道多少種 Doctype 文檔類型像棘?
標簽可聲明三種 DTD 類型,分別表示嚴格版本壶冒、過渡版本以及基于框架的 HTML 文檔缕题。
HTML 4.01 規(guī)定了三種文檔類型:Strict、Transitional 以及 Frameset胖腾。
XHTML 1.0 規(guī)定了三種 XML 文檔類型:Strict烟零、Transitional 以及 Frameset。
Standards (標準)模式(也就是嚴格呈現(xiàn)模式)用于呈現(xiàn)遵循最新標準的網(wǎng)頁胸嘁, Quirks(包容)模式(也就是松散呈現(xiàn)模式或者兼容模式)用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計的網(wǎng)頁瓶摆。
6. HTML 與 XHTML —— 二者有什么區(qū)別?
a. XHTML 元素必須被正確地嵌套性宏。
b. XHTML 元素必須被關(guān)閉群井。
c. 標簽名必須用小寫字母。
d. XHTML 文檔必須擁有根元素毫胜。 參考《XHTML 與 HTML 之間的差異》
7. Html5 有哪些新特性书斜、移除了那些元素?
a. HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集酵使,主要是關(guān)于圖像荐吉,位置,存儲口渔,多任務(wù)等功能的增加样屠;
b. 拖拽釋放(Drag and drop) API;
c. 語義化更好的內(nèi)容標簽(header, nav, footer, aside, article, section);
d. 音頻痪欲、視頻API(audio,video)悦穿;
e. 畫布(Canvas) API;
f. 地理(Geolocation) API业踢;
g. 本地離線存儲 localStorage 長期存儲數(shù)據(jù)栗柒,瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
h. sessionStorage 的數(shù)據(jù)在頁面會話結(jié)束時會被清除知举;
i. 表單控件瞬沦,calendar、date雇锡、time逛钻、email、url遮糖、search绣的;
j. 新的技術(shù)webworker, websocket等
移除的元素:
a. 純表現(xiàn)的元素:basefont叠赐、big欲账、center、s芭概、strike赛不、tt、u罢洲;
b. 對可用性產(chǎn)生負面影響的元素:frame踢故、frameset、noframes
8. Iframe 的優(yōu)缺點惹苗?
優(yōu)點:
a. 解決加載緩慢的第三方內(nèi)容如圖標和廣告等的加載問題
b. iframe無刷新文件上傳
c. iframe跨域通信
缺點:
a. iframe會阻塞主頁面的Onload事件
b. 無法被一些搜索引擎索引到
c. 頁面會增加服務(wù)器的http請求
d. 會產(chǎn)生很多頁面殿较,不容易管理。
9. Quirks 模式是什么桩蓉?
在寫程序時我們也會經(jīng)常遇到這樣的問題淋纲,如何保證原來的接口不變,又提供更強大的功能院究,尤其是新功能不兼容舊功能時洽瞬。
IE6以前的頁面大家都不會去寫DTD,所以IE6就假定 如果寫了DTD业汰,就意味著這個頁面將采用對CSS支持更好的布局伙窃,而如果沒有,則采用兼容之前的布局方式样漆。
這就是Quirks模式(怪癖模式为障,詭異模式,怪異模式)。
10. 請闡述 table 的缺點
a. 太深的嵌套鳍怨,比如table>tr>td>h3鹅髓,會導(dǎo)致搜索引擎讀取困難,而且京景,最直接的損失就是大大增加了冗余代碼量窿冯。
b. 靈活性差,比如要將tr設(shè)置border等屬性确徙,是不行的醒串,得通過td
c. 代碼臃腫,當在table中套用table的時候鄙皇,閱讀代碼會顯得異澄叨模混亂
d. 混亂的colspan與rowspan,用來布局時伴逸,頻繁使用他們會造成整個文檔順序混亂缠沈。
e. 不夠語義
11.簡述一下 src 與 href 的區(qū)別
src用于替換當前元素;href用于在當前文檔和引用資源之間確立聯(lián)系错蝴。
src是source的縮寫洲愤,指向外部資源的位置,指向的內(nèi)容將會嵌入到文檔中當前標簽所在位置顷锰。
href是Hypertext Reference的縮寫柬赐,指向網(wǎng)絡(luò)資源所在位置,建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接官紫。