前端面試常見問題——HTML篇

1. HTML語義化

什么是HTML語義化

根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化）鲸湃，選擇合適的標(biāo)簽（代碼語義化）

為什么要語義化
1. 在沒有樣式CSS情況下也以一種文檔格式顯示概龄，容易閱讀
2. 搜索引擎爬蟲依賴標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重右蹦，有利于SEO
3. 語義化HTML會使HTML結(jié)構(gòu)變的清晰，有利于維護(hù)代碼和添加樣式
4. 方便其他設(shè)備解析（如屏幕閱讀器椅文、盲人閱讀器冒晰、移動設(shè)備等）
寫HTML代碼時(shí)應(yīng)該注意
1. 盡可能少使用無語義的標(biāo)簽div和span
2. 在語義不明顯時(shí)，即可以使用div或者p時(shí)蚜枢，盡量用p, 因?yàn)?code>p在默認(rèn)情況下有上下間距缸逃，對兼容特殊終端有利
3. 不要使用純樣式標(biāo)簽，如b厂抽、u需频、i等，改用css設(shè)置
4. 需要強(qiáng)調(diào)的文本筷凤，可以包含在<strong>或者<em>中
5. 使用表格時(shí)昭殉，標(biāo)題用caption包圍，表頭用thead包圍嵌施，主體部分用tbody包圍饲化，尾部用tfoot包圍
6. 表單域用fieldset標(biāo)簽包圍，并用legend標(biāo)簽說明表單用途
7. input標(biāo)簽對應(yīng)的說明文本使用label標(biāo)簽吗伤，通過為input設(shè)置id屬性吃靠，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來
常用的語義元素
- <header>
  定義頁面的介紹展示區(qū)域，通常包括網(wǎng)站logo足淆、主導(dǎo)航以及搜索框巢块。
- <nav>
  定義頁面的導(dǎo)航鏈接部分區(qū)域
- <hgroup>
  當(dāng)標(biāo)題有多個(gè)層級時(shí)，該元素將h1到h6元素放在其內(nèi)巧号，譬如文章的主標(biāo)題和副標(biāo)題的組合
- <article>
  定義頁面獨(dú)立的內(nèi)容族奢，有自己的header、footer丹鸿、section等越走，專注于單個(gè)主題的文章
- <section>
  標(biāo)記文檔的節(jié)或段，通常自帶標(biāo)題
- <aside>
  定義與主要內(nèi)容相關(guān)的內(nèi)容塊。通常顯示為側(cè)邊欄
- <footer>
  定義底部區(qū)域廊敌，通常包含作者铜跑，著作權(quán)信息，鏈接的使用條款骡澈，聯(lián)系信息等

2. Html5新特性

關(guān)于圖像锅纺，位置，存儲肋殴，多任務(wù)等功能的增加
- canvas繪畫
- video 和 audio 元素囤锉，用于媒介回放
- localStorage本地離線存儲，長期存儲數(shù)據(jù)护锤，瀏覽器關(guān)閉數(shù)據(jù)不丟失
- sessionStorage在瀏覽器關(guān)閉后自動刪除
- article官地、footer、header蔽豺、nav区丑、section 等語義化內(nèi)容元素
- calendar、date修陡、time沧侥、email、url魄鸦、search等表單控件
- webworker宴杀、websocket、manifest離線存儲等新技術(shù)
移除的元素：
- 純表現(xiàn)的元素拾因，如big旺罢、center、font绢记、 s扁达、strike、tt蠢熄、u
- 對可用性產(chǎn)生負(fù)面影響的元素：frame跪解、frameset、noframes
IE8/IE7/IE6如何支持HTML5新標(biāo)簽：

通過document.createElement方法讓這些瀏覽器支持HTML5新標(biāo)簽签孔，還需要添加標(biāo)簽?zāi)J(rèn)的樣式叉讥。當(dāng)然也可以直接使用成熟的框架、比如html5shim

3. Web Worker

HTML5提供的一種多線程解決方案饥追，可以將大計(jì)算量的代碼交給web worker而不凍結(jié)頁面图仓。但子線程完全受主線程控制，且不得操作dom但绕，還是沒有改變js單線程的本質(zhì)

使用方式
- 創(chuàng)建在分線程中執(zhí)行的js文件救崔，設(shè)置self.onmessage，在回調(diào)函數(shù)中處理數(shù)據(jù)，通過self.postMessage返回要傳遞給主線程的數(shù)據(jù)
- 在主線程的js中創(chuàng)建worker對象帚豪，向分線程發(fā)消息worker.postMessage(要傳遞給分線程的數(shù)據(jù))并設(shè)置回調(diào)worker.onmessage=function(event)
注意事項(xiàng)
- 主線程和分線程的this不同碳竟，所以分線程很多屬性、方法不能用（document狸臣、window、alert等）昌执，也不能操作DOM更新界面
- 同源限制：分配給分線程的腳本必須與主線程腳本同源
- HTML5新特性：不是所有瀏覽器都兼容

4. Canvas

canvas 是 HTML5 提供的一個(gè)用于展示繪圖效果的標(biāo)簽烛亦，提供了一個(gè)空白的圖形區(qū)域，可以使用特定的JavaScript API來繪畫圖形
在標(biāo)簽中通過width和height可以指定畫布的寬高懂拾，不能在CSS中定義寬高煤禽，因?yàn)?code>canvas的默認(rèn)寬高為300px * 150px，在CSS中為canvas定義寬高岖赋，實(shí)際上把寬高為300px * 150px的畫布進(jìn)行了拉伸檬果，如果在這樣的情況下進(jìn)行繪圖，得到的圖形可能就變形的效果
在開始和閉合標(biāo)簽之間添加后備信息唐断，當(dāng)瀏覽器不支持（IE9以下）時(shí)則會顯示標(biāo)簽內(nèi)的信息
getContext()獲取繪圖上下文
translate(x, y)更改坐標(biāo)原點(diǎn)
fillStyle屬性指定填充樣式
strokeStyle选脊、lineWidth等屬性指定描邊樣式
繪制路徑
- moveTo(x,y) 定義線條開始坐標(biāo)
- lineTo(x,y) 定義線條結(jié)束坐標(biāo)
- rect(x, y, width, height) 可以繪制一個(gè)左上角坐標(biāo)為(x, y)，寬width脸甘，高height的矩形路徑
繪制圖形
- fillRect(x, y, width, height) 繪制一個(gè)由fillStyle指定填充樣式的矩形
繪制文本
- fillText(text, x, y, maxWidth) 使用fillStyle屬性顯示文本
- strokeText(text, x, y, maxWidth) 使用strokeStyle屬性為文本描邊
繪制圖像
- drawImage(image, x1, y1, width1, height1, x2, y2, width2, height2)
創(chuàng)建漸變恳啥、陰影
變換
- rotate(angle) 旋轉(zhuǎn)
- scale(scaleX, scaleY) 縮放
導(dǎo)出畫布
- toDataURL()

5. Canvas和SVG的區(qū)別

svg繪制出來的每一個(gè)圖形的元素都是獨(dú)立的DOM節(jié)點(diǎn)，能夠方便的綁定事件或用來修改丹诀。canvas輸出的是一整幅畫布
svg輸出的圖形是矢量圖形钝的，后期可以修改參數(shù)來自由放大縮小，不會失真和鋸齒铆遭。而canvas輸出標(biāo)量畫布硝桩，就像一張圖片一樣，放大會失真或者鋸齒

6. HTML5離線儲存manifest

原理

基于新建的.appcache文件的緩存機(jī)制枚荣，通過這個(gè)文件上的解析清單碗脊，離線存儲資源。之后當(dāng)網(wǎng)絡(luò)處于離線狀態(tài)時(shí)棍弄，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示望薄，當(dāng)與因特網(wǎng)連接時(shí)，更新機(jī)器上的緩存文件

如何使用：
- 頁面頭部加入一個(gè)manifest的屬性呼畸；
- 在cache.manifest文件的編寫離線存儲的資源
- 在離線狀態(tài)時(shí)痕支，操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)
管理和加載
- 在線情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性蛮原，會請求manifest文件卧须，第一次訪問會根據(jù)文件內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲。如果已經(jīng)離線存儲，則使用離線的資源加載頁面花嘶，然后對比新舊的manifest文件笋籽，如果文件改變了，那么就會重新下載并存儲椭员。
- 離線的情況下直接使用離線存儲的資源
- 如果服務(wù)器對離線的資源進(jìn)行了更新车海，那么必須更新manifest文件，如果只是更新了資源而沒有更新manifest文件的話隘击，瀏覽器不會重新下載資源
- 在更新資源之后侍芝，新的資源需要到下次打開才會生效，如需馬上生效埋同，可以使用window.applicationCache.swapCache()``方法州叠，出現(xiàn)這種現(xiàn)象的原因是瀏覽器會先使用離線資源加載頁面，然后再去檢查manifest是否有更新凶赁，所以需要到下次打開頁面才能生效咧栗。
- 對于manifest文件最好不要設(shè)置緩存
- 瀏覽器在下載manifest文件中的資源的時(shí)候，它會一次性下載所有資源虱肄，如果某個(gè)資源由于某種原因下載失敗致板，那么這次的所有更新就算是失敗的，瀏覽器還是會使用原來的資源浩峡。

7. iframe缺點(diǎn)

iframe會阻塞主頁面的onload事件
iframe和主頁面共享連接池可岂，而瀏覽器對相同域的連接有限制，這意味著有可能iframe中的資源占用了可用連接而阻塞了主頁面的資源加載
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)翰灾。如果需要使用iframe缕粹，最好是通過javascript動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個(gè)問題
搜索引擎的檢索程序無法解讀這種頁面纸淮，不利于SEO

8. Doctype平斩，嚴(yán)格模式與混雜模式

<!DOCTYPE> 聲明位于文檔中的最前面，告知瀏覽器的解析器咽块，用什么文檔類型規(guī)范來解析文檔
嚴(yán)格模式的排版和JS運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行
混雜模式的頁面以寬松的向后兼容的方式顯示绘面。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作
DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)

9. HTML5 為何只需寫 <!DOCTYPE HTML>

HTML5 不基于 SGML，因此不需要對DTD進(jìn)行引用侈沪，但是需要doctype來規(guī)范瀏覽器的行為
而HTML4.01基于SGML揭璃，所以需要對DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型
SGML(Standard Generalized Markup language)標(biāo)準(zhǔn)通用標(biāo)記語言亭罪，是國際上定義電子文件結(jié)構(gòu)和內(nèi)容描述的標(biāo)準(zhǔn)瘦馍，而超文本標(biāo)記語言HyperText Markup Language(HTML)，標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用
隨著Web應(yīng)用的不斷深入应役，HTML在需求廣泛的應(yīng)用中已顯得捉襟見肘情组，有人建議直接使用SGML作為Web語言燥筷。但SGML太龐大了，于是W3C建議使用一種精簡的SGML版本——XML可擴(kuò)展標(biāo)記語言
XML和HTML之間的差異
XML不是HTML的替代院崇，是對HTML的補(bǔ)充肆氓，為不同的目的而設(shè)計(jì)；XML被設(shè)計(jì)用來傳輸和存儲數(shù)據(jù)底瓣，其焦點(diǎn)是數(shù)據(jù)的內(nèi)容谢揪。HTML被設(shè)計(jì)用來顯示數(shù)據(jù)，其焦點(diǎn)是數(shù)據(jù)的外觀濒持。HTML旨在顯示信息键耕，而XML旨在傳輸信息

10. xhtml和html的區(qū)別

XHTML(eXtensible HyperText Markup Language)可擴(kuò)展超文本標(biāo)記語言表現(xiàn)方式與HTML類似，但語法上更加嚴(yán)格柑营。從繼承關(guān)系上講，HTML是一種基于標(biāo)準(zhǔn)通用標(biāo)記語言SGML的應(yīng)用村视，XHTML則基于可擴(kuò)展標(biāo)記語言XML官套，XML是SGML的一個(gè)子集
功能上：XHTML可兼容各大瀏覽器、手機(jī)以及PDA蚁孔，并且瀏覽器也能快速正確地編譯網(wǎng)頁
書寫習(xí)慣上：XHTML 元素必須被正確地嵌套奶赔，閉合，區(qū)分大小寫杠氢，文檔必須擁有根元素站刑，所有屬性都必須使用雙引號

11. HTML全局屬性

class:為元素設(shè)置類標(biāo)識
data-*: 為元素增加自定義屬性
draggable: 設(shè)置元素是否可拖拽
id: 元素id，文檔內(nèi)唯一
lang: 元素內(nèi)容的的語言
style: 行內(nèi)css樣式
title: 元素相關(guān)的建議信息

12. Viewport

// width 設(shè)置viewport寬度鼻百，為一個(gè)正整數(shù)绞旅，或字符串‘device-width’

// device-width 設(shè)備寬度

// height 設(shè)置viewport高度，一般設(shè)置了寬度温艇，會自動解析出高度因悲，可以不用設(shè)置

// initial-scale 默認(rèn)縮放比例（初始縮放比例），為一個(gè)數(shù)字勺爱，可以帶小數(shù)

// minimum-scale 允許用戶最小縮放比例晃琳，為一個(gè)數(shù)字，可以帶小數(shù)

// maximum-scale 允許用戶最大縮放比例琐鲁，為一個(gè)數(shù)字卫旱，可以帶小數(shù)

// user-scalable 是否允許手動縮放

延伸提問：怎樣處理移動端 1px 被渲染成 2px問題
局部處理
mate標(biāo)簽中的 viewport屬性，initial-scale 設(shè)置為 1
rem按照設(shè)計(jì)稿標(biāo)準(zhǔn)走围段，外加利用transfrom 的scale(0.5) 縮小一倍即可顾翼；
全局處理
mate標(biāo)簽中的 viewport屬性，initial-scale 設(shè)置為 0.5
rem 按照設(shè)計(jì)稿標(biāo)準(zhǔn)走即可

13. div+css的布局較table布局有什么優(yōu)點(diǎn)蒜撮？

改版更方便只要改css文件
頁面加載速度更快暴构、結(jié)構(gòu)化清晰跪呈、頁面顯示簡潔
表現(xiàn)與結(jié)構(gòu)相分離
易于優(yōu)化SEO，對搜索引擎更友好取逾，排名更容易靠前

14. src與href的區(qū)別

src用于替換當(dāng)前元素耗绿，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫砾隅，指向外部資源的位置误阻，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請求src資源時(shí)會將其指向的資源下載并應(yīng)用到文檔內(nèi)晴埂，例如js腳本究反，img圖片,會暫停其他資源的下載和處理，直到將該資源加載儒洛、編譯精耐、執(zhí)行完畢，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)琅锻。
href是Hypertext Reference的縮寫卦停，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接恼蓬，例如超鏈接惊完；如果我們在文檔中添加<link href="common.css" rel="stylesheet"/>那么瀏覽器會識別該文檔為css文件，就會并行下載資源并且不會停止對當(dāng)前文檔的處理处硬。這也是為什么建議使用link方式來加載css小槐，而不是使用@import方式

前端面試常見問題——HTML篇

1. HTML語義化

什么是HTML語義化

為什么要語義化

寫HTML代碼時(shí)應(yīng)該注意

常用的語義元素

2. Html5新特性

關(guān)于圖像锅纺，位置，存儲肋殴，多任務(wù)等功能的增加

移除的元素：

IE8/IE7/IE6如何支持HTML5新標(biāo)簽：

3. Web Worker

使用方式

注意事項(xiàng)

4. Canvas

繪制路徑

繪制圖形

繪制文本

繪制圖像

創(chuàng)建漸變恳啥、陰影

變換