現(xiàn)在，各大公司的春招如火如荼的進(jìn)行著。眾所周知，春招于各大高校的畢業(yè)生而言意義是非凡的，對(duì)于想進(jìn)像騰訊、阿里這類大型互聯(lián)網(wǎng)公司學(xué)生而言，春招就是一次寶貴的機(jī)會(huì)。各大互聯(lián)網(wǎng)公司的準(zhǔn)入門檻還是挺高的，畢竟待遇和機(jī)會(huì)也是最好的。以 BOSS 直聘的校招信息來看，這個(gè)薪資實(shí)屬讓人心動(dòng)。
那么，一般前端面試中會(huì)涉及哪些問題呢，W3Cschool 小編為大家整理了一份前端面試中常見的 HTML 問題。
1、HTML5 有新增了哪些表單元素？
HTML5 新增了表單元素有：datalist，keygen，output；
<datalist> 元素規(guī)定輸入域的選項(xiàng)列表。
<keygen> 元素的作用是提供一種驗(yàn)證用戶的可靠方法。
<output> 元素用于不同類型的輸出，比如計(jì)算或腳本輸出。
具體介紹請(qǐng)查看 HTML5 表單元素。
2、XHTML 和 HTML 有什么區(qū)別?
XHTML 是 XML 重寫了 HTML 的規(guī)范，比 HTML 更加嚴(yán)格，表現(xiàn)如下：
XHTML 中所有的標(biāo)記都必須有一個(gè)相應(yīng)的結(jié)束標(biāo)簽。
XHTML 所有標(biāo)簽的元素和屬性的名字都必須使用小寫。
所有的 XML 標(biāo)記都必須合理嵌套。
所有的屬性都必須用引號(hào)?“”?括起來。
把所有?<?和?&?特殊符號(hào)用編碼表示。
不要在注釋內(nèi)容中使用“--”。
圖片必須使用說明文字。
3、HTML5 為什么只需要寫 <!DOCTYPE HTML>？
HTML 4.01 中的 doctype 需要對(duì) DTD 進(jìn)行引用，因?yàn)?HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要對(duì) DTD 進(jìn)行引用，但是需要 doctype 來規(guī)范瀏覽器的行為。其中，SGML 是標(biāo)準(zhǔn)通用標(biāo)記語言,簡(jiǎn)單的說，就是比 HTML,XML 更老的標(biāo)準(zhǔn)，這兩者都是由SGML 發(fā)展而來的。BUT，HTML5 不是的。
4、id 與 class 有什么區(qū)別？
id 屬性是用于指定文檔的唯一標(biāo)識(shí)符；因而，可以使用id在頁面中區(qū)分不同的模塊。class 屬性用于為 HTML 元素指定一個(gè)或多個(gè)類名；class 屬性可用于任何 HTML 元素。CSS 和 JavaScript 可以使用類名來為具有指定類名的元素執(zhí)行某些任務(wù)。
5、Canvas 和 SVG 有什么區(qū)別？
SVG 是一種使用 XML 描述 2D 圖形的語言，它基于 XML 也就是我們可以為某個(gè)元素附加 JavaScript 事件處理器，如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。
Canvas 通過 JavaScript 來繪制 2D 圖形。它是逐像素進(jìn)行渲染的，一旦圖形被繪制完成，如果它的位置發(fā)生了變化，那么整個(gè)場(chǎng)景都需要重新繪制，包括任何或者已經(jīng)被覆蓋的對(duì)象 。
SVG 與 Canvas 的區(qū)別 ：
（1）SVG 是用來描述 XML 中 2D 圖形的語言，Canvas 借助 JavaScript 動(dòng)態(tài)描繪 2D 圖形
（2）SVG 可支持事件處理程序而 Canvas 不支持
（3）SVG 中屬性改變時(shí)，瀏覽器可以重新呈現(xiàn)它，適用于矢量圖，而 Canvas 不可以，更適合視頻游戲等。
（4）Canvas 可以很好的繪制像素，用于保存結(jié)果為 .png 或者 .gif,可做為 API 容器。
（5）Canvas 取決于分辨率。SVG 與分辨率無關(guān)。
（6）SVG 具有更好的文本渲染，而 Canvas 不能很好的渲染，渲染中的 SVG 可能比 Canvas 慢，特別是應(yīng)用了大量的 DOM。
（7）畫布更適合渲染較小的區(qū)域。SVG 渲染更好的更大區(qū)域。
6、HTML5 文檔類型和字符集是？
HTML5 使用 UTF-8 編碼。
7、HTML5 標(biāo)準(zhǔn)提供了哪些新的 API？
Media API
Text Track API
Application Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API
8、<img>的 title 和 alt 有什么區(qū)別?
alt： 規(guī)定圖像的替代文本；title： 鼠標(biāo)放在上面時(shí)顯示的文字；alt 是必要屬性，title 非必要。
9、行內(nèi)元素有哪些？塊級(jí)元素有哪些？空 (void) 元素有那些？
行內(nèi)元素有：<a>,<b>,<span>,<img>,<input>,<select>,<strong>
塊級(jí)元素有：<div>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<p>,<h1>······<h6>
常見的空元素：<br>,<hr>,<img>,<input>,<link>,<meta>
10、如何理解語義化標(biāo)簽？
語義化標(biāo)簽就是具有語義的標(biāo)簽，它可以清晰地向我們展示它的作用和用途。例如 h 系列標(biāo)簽，可以將文字加粗放大。<strong> 標(biāo)簽可用于區(qū)別其他文字，起到強(qiáng)調(diào)作用。
語義化標(biāo)簽的好處：
- 語義化標(biāo)簽具有可讀性，使得文檔結(jié)構(gòu)清晰。
- 瀏覽器便于讀取，有利于 SEO 優(yōu)化。
- 展現(xiàn)在頁面中時(shí)，用戶體驗(yàn)好。
- 便于團(tuán)隊(duì)開發(fā)和維護(hù)。
以上就是 W3Cschool 小編為大家整理的常見的HTML面試題。更多 HTML 學(xué)習(xí)請(qǐng)關(guān)注 W3Cschool 官網(wǎng)。
推薦課程：小白學(xué)前端、HTML+CSS入門
