App下載

2021前端面試題--HTML 篇

猿友 2021-03-06 15:29:44 瀏覽數(shù) (4597)
反饋

現(xiàn)在，各大公司的春招如火如荼的進行著。眾所周知，春招于各大高校的畢業(yè)生而言意義是非凡的，對于想進像騰訊、阿里這類大型互聯(lián)網(wǎng)公司學(xué)生而言，春招就是一次寶貴的機會。各大互聯(lián)網(wǎng)公司的準入門檻還是挺高的，畢竟待遇和機會也是最好的。以 BOSS 直聘的校招信息來看，這個薪資實屬讓人心動。

QQ截圖20210306140540

那么，一般前端面試中會涉及哪些問題呢，W3Cschool 小編為大家整理了一份前端面試中常見的 HTML 問題。


1、HTML5 有新增了哪些表單元素？

HTML5 新增了表單元素有：datalist，keygen，output；

<datalist> 元素規(guī)定輸入域的選項列表。

<keygen> 元素的作用是提供一種驗證用戶的可靠方法。

<output> 元素用于不同類型的輸出，比如計算或腳本輸出。

具體介紹請查看 HTML5 表單元素。

2、XHTML 和 HTML 有什么區(qū)別?

XHTML 是 XML 重寫了 HTML 的規(guī)范，比 HTML 更加嚴格，表現(xiàn)如下：

XHTML 中所有的標(biāo)記都必須有一個相應(yīng)的結(jié)束標(biāo)簽。

XHTML 所有標(biāo)簽的元素和屬性的名字都必須使用小寫。

所有的 XML 標(biāo)記都必須合理嵌套。

所有的屬性都必須用引號?“”?括起來。

把所有?<?和?&?特殊符號用編碼表示。

不要在注釋內(nèi)容中使用“--”。

圖片必須使用說明文字。

3、HTML5 為什么只需要寫 <!DOCTYPE HTML>？

HTML 4.01 中的 doctype 需要對 DTD 進行引用，因為 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要對 DTD 進行引用，但是需要 doctype 來規(guī)范瀏覽器的行為。其中，SGML 是標(biāo)準通用標(biāo)記語言,簡單的說，就是比 HTML,XML 更老的標(biāo)準，這兩者都是由SGML 發(fā)展而來的。BUT，HTML5 不是的。

4、id 與 class 有什么區(qū)別？

id 屬性是用于指定文檔的唯一標(biāo)識符；因而，可以使用id在頁面中區(qū)分不同的模塊。class 屬性用于為 HTML 元素指定一個或多個類名；class 屬性可用于任何 HTML 元素。CSS 和 JavaScript 可以使用類名來為具有指定類名的元素執(zhí)行某些任務(wù)。

5、Canvas 和 SVG 有什么區(qū)別？

SVG 是一種使用 XML 描述 2D 圖形的語言，它基于 XML 也就是我們可以為某個元素附加 JavaScript 事件處理器，如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形。

Canvas 通過 JavaScript 來繪制 2D 圖形。它是逐像素進行渲染的，一旦圖形被繪制完成，如果它的位置發(fā)生了變化，那么整個場景都需要重新繪制，包括任何或者已經(jīng)被覆蓋的對象 。

SVG 與 Canvas 的區(qū)別 ：

（1）SVG 是用來描述 XML 中 2D 圖形的語言，Canvas 借助 JavaScript 動態(tài)描繪 2D 圖形 　　

（2）SVG 可支持事件處理程序而 Canvas 不支持 　　

（3）SVG 中屬性改變時，瀏覽器可以重新呈現(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 編碼。

QQ截圖20210306145727

7、HTML5 標(biāo)準提供了哪些新的 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)放在上面時顯示的文字；alt 是必要屬性，title 非必要。

9、行內(nèi)元素有哪些？塊級元素有哪些？空 (void) 元素有那些？

行內(nèi)元素有：<a>,<b>,<span>,<img>,<input>,<select>,<strong>

塊級元素有：<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ū)別其他文字，起到強調(diào)作用。

語義化標(biāo)簽的好處：

  • 語義化標(biāo)簽具有可讀性，使得文檔結(jié)構(gòu)清晰。
  • 瀏覽器便于讀取，有利于 SEO 優(yōu)化。
  • 展現(xiàn)在頁面中時，用戶體驗好。
  • 便于團隊開發(fā)和維護。

以上就是 W3Cschool 小編為大家整理的常見的HTML面試題。更多 HTML 學(xué)習(xí)請關(guān)注 W3Cschool 官網(wǎng)。

推薦課程：小白學(xué)前端、HTML+CSS入門


HTML

0 人點贊