標(biāo)準(zhǔn)的HTML文檔必須包含哪幾個(gè)元素:
- DOCTYPE
- html
- head
- body
HTML和HTML5的區(qū)別有哪些赏迟？
- 舊版本的HTML比較依賴瀏覽器的插件，例如播放視頻需要安裝Flash插件
- 由于HTML5不再基于SGML盘榨，所以文檔聲明類型（DOCTYPE）只有一種
- HTML5消除了過時(shí)或冗余的元素宇葱，如：font、center等
- HTML5新增了許多語義化的元素（article仗颈、header等）和新功能（video、canvas等）椎例，提供更好的跨平臺(tái)支持
- HTML5制訂了新的全局屬性和元素屬性，全局屬性有draffable订歪、contenteditable等，元素屬性有accept刷晋、placeholder等
HTML實(shí)體的應(yīng)用場(chǎng)景有哪些？
如果要在HTML文檔中顯示特殊字符（‘<’,‘>’等）眼虱，那么就可以使用HTML實(shí)體喻奥。
HTML實(shí)體還能預(yù)防XSS（跨站腳本攻擊）。XSS通常會(huì)將腳本代碼注入到HTML文檔中捏悬，再解析執(zhí)行撞蚕。但使用了HTML實(shí)體后，就可以讓相關(guān)代碼只打印邮破，而不執(zhí)行诈豌。
什么是Shadow DOM(影子中的DOM)仆救？
Shadow DOM是瀏覽器的一種功能抒和，能夠自動(dòng)添加子元素矫渔，例如audio元素（如下）在網(wǎng)頁(yè)中能使用進(jìn)度條、音量控制等功能摧莽，這些相關(guān)元素都由瀏覽器自動(dòng)生成庙洼。
<audio controls src="test.wav"></audio>
元素屬性src和href有何區(qū)別？
兩者功能不同镊辕。href(hypertext reference)能夠建立一條通道油够，將當(dāng)前文檔和定義的資源連接起來。src(source)是將定義的資源嵌入到當(dāng)前文檔中征懈。
img元素中的title和alt屬性有何區(qū)別石咬？
title是全局屬性，提供額外的提示信息卖哎，當(dāng)鼠標(biāo)滑動(dòng)到該元素時(shí)鬼悠，顯示定義的提示。link和style元素中的title比較特殊亏娜，表示樣式表的名稱焕窝；alt是局部屬性，僅可用在img维贺、input等元素它掂，提供在圖片未載入或加載失敗時(shí)的替代文本。只有當(dāng)input元素的type屬性為image時(shí)溯泣，才能使用alt屬性虐秋。
3種將CSS樣式應(yīng)用到元素上的方式有什么區(qū)別？
| 方式 | 特殊性 | HTTP請(qǐng)求 | 重用范圍 | 文檔大小 | 偽類與偽元素 |
|---|---|---|---|---|---|
| 內(nèi)聯(lián)樣式 | 最高 | 無 | 不可重用 | 增加 | 不可定義 |
| 內(nèi)嵌樣式 | 與外部相同 | 無 | 當(dāng)前文檔 | 增加 | 可定義 |
| 外部樣式 | 與內(nèi)嵌相同 | 有 | 整個(gè)項(xiàng)目 | 保持 | 可定義 |
3種嵌入JavaScript的方式有什么區(qū)別垃沦？
| 方式 | 內(nèi)容和行為 | HTTP請(qǐng)求 | 重用范圍 | 文檔大小 | 特點(diǎn) |
|---|---|---|---|---|---|
| 內(nèi)聯(lián)腳本 | 耦合 | 無 | 當(dāng)前文檔 | 增加 | 將內(nèi)聯(lián)腳本放在外部樣式表之后客给，會(huì)延遲其他資源的下載 |
| 外部腳本 | 分離 | 有 | 整個(gè)項(xiàng)目 | 保持 | 容易維護(hù)，高復(fù)用栏尚，可用defer或async屬性解決頁(yè)面阻塞問題 |
| 元素屬性 | 耦合 | 無 | 不可重用 | 增加 | 兩種定義方式起愈，分別是事件屬性和在鏈接屬性中使用特殊偽協(xié)議的URL。不但能制作可執(zhí)行JavaScript的瀏覽器書簽译仗，還能用a元素模擬按鈕的效果 |
meta元素可以定義文檔的哪些元數(shù)據(jù)抬虽？
meta元素可定義的元數(shù)據(jù)可簡(jiǎn)要概括為4類：
- 聲明HTML文檔內(nèi)容所用的字符編碼
- 完善文檔描述信息，讓搜索引擎更容易解析索引纵菌，提升SEO(search engine optimization)
- 適配移動(dòng)設(shè)備阐污，使頁(yè)面在各種尺寸的屏幕中顯示正確
- 指定首選樣式表、執(zhí)行重載或重定向
a元素除了可以用于導(dǎo)航外笛辟，還有什么其他功能？
href屬性中的URL可以是瀏覽器支持的任何協(xié)議手幢，因?yàn)橛羞@個(gè)特點(diǎn)，a元素也可以用于手機(jī)撥號(hào)跺涤、發(fā)送短信监透、發(fā)送郵件等功能。當(dāng)發(fā)送短信的時(shí)候胀蛮，可將內(nèi)容作為參數(shù)直接帶過去；當(dāng)發(fā)送郵件時(shí)退腥，可將收件人鸳玩、抄送人、主題和內(nèi)容作為參數(shù)直接帶過去颓帝，如下所示：
<a href="tel:10086">撥打電話</a>
<a href="sms:10086?body=text">發(fā)送短信</a>
<a href="mailto:strick@pw.org?cc=jane@pe.com">發(fā)送郵件</a>
元素的布爾屬性disable和readonly有何區(qū)別窝革？
元素操作是指讀取、寫入的操作瘪板。Tab導(dǎo)航是指能否用Tab鍵定位到該元素
| 屬性 | 元素外觀 | 元素操作 | 獲取焦點(diǎn) | Tab導(dǎo)航 | 表單提交 | 元素支持 |
|---|---|---|---|---|---|---|
| disabled | 修改 | 否 | 否 | 否 | 沒有發(fā)送數(shù)據(jù) | input侮攀、textarea、option兰英、select和button等元素 |
| readonly | 維持 | 是 | 是 | 是 | 會(huì)發(fā)送數(shù)據(jù) | input和textarea |
表格布局的弊端
- 可訪問性差供鸠，表格布局中的內(nèi)容從左到右和從上到下的讀取并不總是有意義，并且還缺乏依賴關(guān)系薄坏，無障礙工具（如屏幕閱讀器）從這些文檔中獲取的數(shù)據(jù)會(huì)非常混亂胶坠，影響用戶的瀏覽
- 難以實(shí)現(xiàn)響應(yīng)式涵但，通嘲粒可用媒體查詢對(duì)不同設(shè)備呈現(xiàn)適合的界面塑娇，但表格布局需要用單元格嵌套表格，而單元格之間的合并要用元素的colspan或rowspan屬性哨啃，不能用CSS屬性簡(jiǎn)單的設(shè)置
- 可維護(hù)性差写妥，表格布局需要使用大量的元素屬性，并且表格之間需要相互嵌套祝峻。這使得代碼難以閱讀扎筒，特別是如果不縮進(jìn)，標(biāo)簽沒有層次感嗜桌，更加難以理解代碼的意圖
- 不夠語義化，表格布局會(huì)用到大量的單元格浮定，單元格（th或td）不像nav层亿、header、footer等元素有明確的含義棕所。語義化的界面既能保持代碼整齊，又能提升搜索引擎優(yōu)化
- 加載速度慢迎吵，嵌套的表越多，文檔就變得越臃腫击费，不但會(huì)加長(zhǎng)網(wǎng)絡(luò)傳輸?shù)臅r(shí)間，而且會(huì)增加渲染的時(shí)間
除了video和audio元素谆棱，HTML5還支持哪些其他多媒體元素圆仔？
HTML5還支持embed和track元素。embed元素用于嵌入外部資源个从，例如SVG矢量圖形歪沃、應(yīng)用程序或插件等。track元素是audio和video的子元素沪曙，為多媒體文件添加輔助文本信息，例如字幕碳默、屏幕閱讀器說明和主題等育灸。在Chrome瀏覽器中，可用WebVTT(網(wǎng)絡(luò)視頻文本軌道)文件和track元素結(jié)合儿子，給媒體資源添加可同步字幕砸喻。
<video>
<source src="video" type="video/webm">
<track kind="subtitles" src="video" label="中文" srclang="zh" default>
</video>
canvas元素用屬性和用CSS設(shè)置寬高有什么區(qū)別？
可將canvas元素簡(jiǎn)單理解為兩部分：畫布和容器愉适。CSS控制的是容器的尺寸癣漆，而屬性控制的是畫布的尺寸，繪圖都是在畫布上進(jìn)行，畫布默認(rèn)寬為300px瞬哼，高位150px租副。
