2021前端面试题--HTML 篇

现在，各大公司的春招如火如荼的进行着。众所周知，春招于各大高校的毕业生而言意义是非凡的，对于想进像腾讯、阿里这类大型互联网公司学生而言，春招就是一次宝贵的机会。各大互联网公司的准入门槛还是挺高的，毕竟待遇和机会也是最好的。以 BOSS 直聘的校招信息来看，这个薪资实属让人心动。

QQ截图20210306140540

那么，一般前端面试中会涉及哪些问题呢，W3Cschool 小编为大家整理了一份前端面试中常见的 HTML 问题。

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

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

<datalist> 元素规定输入域的选项列表。

<keygen> 元素的作用是提供一种验证用户的可靠方法。

<output> 元素用于不同类型的输出，比如计算或脚本输出。

具体介绍请查看 HTML5 表单元素。

2、XHTML 和 HTML 有什么区别?

XHTML 是 XML 重写了 HTML 的规范，比 HTML 更加严格，表现如下：

XHTML 中所有的标记都必须有一个相应的结束标签。

XHTML 所有标签的元素和属性的名字都必须使用小写。

所有的 XML 标记都必须合理嵌套。

所有的属性都必须用引号“”括起来。

把所有<和&特殊符号用编码表示。

不要在注释内容中使用“--”。

图片必须使用说明文字。

3、HTML5 为什么只需要写 <!DOCTYPE HTML>？

HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。其中，SGML 是标准通用标记语言,简单的说，就是比 HTML,XML 更老的标准，这两者都是由SGML 发展而来的。BUT，HTML5 不是的。

4、id 与 class 有什么区别？

id 属性是用于指定文档的唯一标识符；因而，可以使用id在页面中区分不同的模块。class 属性用于为 HTML 元素指定一个或多个类名；class 属性可用于任何 HTML 元素。CSS 和 JavaScript 可以使用类名来为具有指定类名的元素执行某些任务。

5、Canvas 和 SVG 有什么区别？

SVG 是一种使用 XML 描述 2D 图形的语言，它基于 XML 也就是我们可以为某个元素附加 JavaScript 事件处理器，如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 通过 JavaScript 来绘制 2D 图形。它是逐像素进行渲染的，一旦图形被绘制完成，如果它的位置发生了变化，那么整个场景都需要重新绘制，包括任何或者已经被覆盖的对象。

SVG 与 Canvas 的区别：

（1）SVG 是用来描述 XML 中 2D 图形的语言，Canvas 借助 JavaScript 动态描绘 2D 图形　　

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

（3）SVG 中属性改变时，浏览器可以重新呈现它，适用于矢量图，而 Canvas 不可以，更适合视频游戏等。　　

（4）Canvas 可以很好的绘制像素，用于保存结果为 .png 或者 .gif,可做为 API 容器。　　

（5）Canvas 取决于分辨率。SVG 与分辨率无关。　　

（6）SVG 具有更好的文本渲染，而 Canvas 不能很好的渲染，渲染中的 SVG 可能比 Canvas 慢，特别是应用了大量的 DOM。　　

（7）画布更适合渲染较小的区域。SVG 渲染更好的更大区域。

6、HTML5 文档类型和字符集是？

HTML5 使用 UTF-8 编码。

QQ截图20210306145727

7、HTML5 标准提供了哪些新的 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 有什么区别?

alt：规定图像的替代文本；title：鼠标放在上面时显示的文字；alt 是必要属性，title 非必要。

9、行内元素有哪些？块级元素有哪些？空 (void) 元素有那些？

行内元素有：<a>,<b>,<span>,<img>,<input>,<select>,<strong>

块级元素有：<div>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<p>,<h1>······<h6>

常见的空元素：<br>,<hr>,<img>,<input>,<link>,<meta>

10、如何理解语义化标签？

语义化标签就是具有语义的标签，它可以清晰地向我们展示它的作用和用途。例如 h 系列标签，可以将文字加粗放大。<strong> 标签可用于区别其他文字，起到强调作用。

语义化标签的好处：

语义化标签具有可读性，使得文档结构清晰。
浏览器便于读取，有利于 SEO 优化。
展现在页面中时，用户体验好。
便于团队开发和维护。

以上就是 W3Cschool 小编为大家整理的常见的HTML面试题。更多 HTML 学习请关注 W3Cschool 官网。

推荐课程：小白学前端、HTML+CSS入门