48个技术公司经典的前端面试HTML问题点和答案分享

随着越来越多的公司面向Web，前端开发的受欢迎程度继续提高。随着新技术不断创新前端空间，公司正在寻找专业的前端开发人员。在准备进行前端开发面试时，您将精通JavaScript和最新的框架，但是请不要忘记HTML（HTML是Web开发的基础构建块）这一点很重要。

您可能认为您不需要复习HTML概念，但是在面试过程中，您会遇到需要事先准备的细微问题。今天，我们将分解30多个流行的HTML访谈问题，以在您下次进行前端采访之前刷新您对HTML的理解。

今天，我们将介绍以下内容：

前端面试简介
HTML面试的前30+个问题和解答
更多练习题
包和资源

成功进行前端面试。

查看此资源，以策略性地准备您的前端编码采访。

前端面试简介

技术前端采访可能非常困难。在几乎每种情况下，HTML都不是接受采访的唯一概念。您将通过对Web开发所有组件的理解而接受测试，但是HTML对您的成功至关重要。HTML是准备编写代码采访的第一步，因为它是整个Web开发人员的基础。

尽管我们今天将专注于HTML，但是您将需要了解其他概念。刷新您的理解。以下前端概念：

通用网络知识： 技术，体系结构和范例，例如HTTP请求，Web安全性，REST与RPC等
CSS：语言基础和高级附加组件，例如 SASS预处理器
JavaScript语言：高级JavaScript，包括回调和 Promise之类的概念
设计模式：结构，创造，行为等
框架和库：您将要谈谈您对.js框架的个人经验。和图书馆
数据结构：链表，哈希表，树，图（已知搜索算法）等
算法：准备时研究每种算法的Big-O复杂性
Web性能：代码对性能的影响，例如关键的渲染路径。服务人员，图像优化，渲染性能等

HTML和前端面试问题的类型

在研究问题之前，重要的是要了解编码问题属于常见模式。了解这些模式可以更轻松地快速提出解决方案。面试问题大致可分为以下几类：

技能演示。这些旨在让您看到实际情况以评估工作流程的效率。

适应能力。这些问题将判断您对当前技术趋势的了解以及如何使用新技术。例如，可能会询问您喜欢阅读哪种博客或关注的Twitter开发人员。

知识。测试您对行业的了解的问题

个性。衡量您对公司价值观的适应程度

开放式问题。这些问题可能会评估您的技能，对Web开发的兴趣，编程历史以及其他方面的任何方面，例如，

是什么让您对Web开发感到兴奋？
什么是前端Web开发，它与后端Web开发有何不同？
您怎么知道哪个HTML标签最适合哪个内容？

有关HTML面试问题的提示

事先了解面试的结构。前端面试没有一种结构。因此，在面试之前，请务必向招聘者询问有关格式。有时，您的采访可能使用白板，而其他人可能使用在线文本编辑器。确保知道您将要使用的环境，以便事先进行调整。

准备谈论您的项目。在前端面试中，您会被问到的第一个问题是关于您过去的项目。这是个好主意。准备有关您的项目的简短演讲，包括使用的工具。这可以包括您贡献的开源项目。

用系统处理编码问题。对于面试中的技术问题，请务必弄清楚您已理解该问题。建议您在进入之前先对自己进行评估，因为这可能会改变您的策略。优先与面试官相互理解，以便您可以适应反馈。

从多个角度解决问题。被困在一种方法上的受访者不会太过分。不要设置一种方法。招聘人员想知道您可以获取反馈。并根据需要进行调整。因此，请尝试从多个角度解决该问题并阐明任何替代方案。

HTML面试的前30+个问题和解答

既然我们对前端面试的内容有了一个大致的了解，那么让我们开始研究HTML。我们知道HTML只是图片的一部分，但这是Web开发的基础。对此有深入的了解是Web开发前进的唯一途径。让我们深入探讨您可能期望在编码面试中看到的30多个与HTML相关的问题。

1.什么是HTML？

HTML代表超文本标记语言，是一种用于在Web上创建页面的标准文本格式语言。该语言使文本更具交互性和动态性。除此之外，它还可以将文本转换为图像，表格，链接等。

2.什么是W3C和WHATWG？

在万维网联盟（W3C）是开发一个社区，对设置了一组用于开发全球标准的工作。

WHATWG（Web超文本应用程序技术工作组，是由Apple，Mozilla和Opera于2004年在W3C研讨会上创建的。WHATWG是一个开发人员社区，致力于专门设置HTML标准以满足用户的需求。

3. HTML模板的基本结构是什么？

<html>
      <head>
                <title></title>
      </head>
      <body>
      </body>
</html>

4.什么是属性？

每个标签都可以包含其他属性，这些属性会更改标签的行为方式。例如，input标签具有type属性，该属性使您可以指定输入字段是文本字段，复选框还是单选按钮以及其他选项。

5.如何使用属性？

在两个括号内的HTML标记内指定属性。属性字段后跟一个equals符号，属性值用双引号括起来”。请确保在等号之前和之后都没有空格，这是一种很好的做法。您可以一个接一个地使用多个属性，以空格分隔。

这是一个例子：

<input type="text" />

<input type="checkbox" />

<input type="radio" value="on" />

6. HTML中的实体是什么？

HTML字符实体用于替换HTML中的保留字符。您也可以使用实体替换键盘上不存在的字符。

7.如何减少页面的加载时间？

优化页面加载时间的基本规则是减少网页上元素的下载大小，并减少HTTP请求的数量。

我们还可以遵循以下一些技术：

文件压缩
文件串联
重新组织和完善代码
使用内部和外部样式表并最小化内联CSS
将CDN用于媒体文件
在不同域上托管我们网站的资产，同时还减少了DNS查找

HTML5

8.什么是HTML5？

HTML5是超文本标记语言的最新版本。HTML5引入了几个新功能：

添加新属性
允许离线编辑
添加新的解析规则以增强灵活性
支持（Web SQL）
支持协议和MIME处理程序注册，使您可以更改用户与文档交互的方式。

9.使用HTML5有什么优势？

当您在网页上嵌入视频，音频和图形时，HTML5大大简化了构建交互式网站的过程。HTML5支持Web上的多媒体技术和图形内容，而无需使用Flash之类的第三方插件。

更多功能：

地理位置
离线应用程序缓存
错误处理
浏览器支持和兼容性
客户端数据库

支持新的API：

浏览器历史记录管理
拖放
网页上的3D绘图
时间媒体播放

支持的应用程序包括：

网络工作者-JavaScript
本地文件访问
应用程序缓存
本地数据存储
本地SQL数据库

10. HTML5中的语义元素是什么？

语义HTML为网页提供了含义，而不仅仅是网页的表示形式。例如，p标签指示文本是段落。本质上，这既是语义上的又是表示上的，因为浏览器知道如何显示段落，人们知道段落是什么。

相比之下，诸如<b>和之<i>类的标记不是语义的，因为它们仅告诉浏览器文本在表示方式上应该是什么样。它们在语义上没有为标记提供其他含义。

11.什么是HTML5的API？

API代表应用程序编程接口，是一种通过预构建的组件构建各种Web应用程序的方法。通过使用现有API中的组件到新站点中，开发人员可以更快地构建其应用程序。

12. HTML5中的一些API是：

数据传输API
媒体API
用户互动
历史
命令API
文字跟踪API
HTML地理位置
HTML本地存储
约束验证API

13.目的是<!Doctype html>什么？

Doctype在每个HTML5页面的顶部声明，以指示Web浏览器有关文档中使用的HTML的版本和类型。这很重要，因为它允许浏览器正确读取和加载文档。

Doctypes有三种类型：

严格的文档类型
框架集文档类型
过渡文档类型

<table>：定义一个表
<tr>：定义表格行
<th>：定义标头单元格
<td>：定义一个单元格
<caption>：定义表格标题
<colgroup>：指定表格中一组一个或多个列以进行格式化
<col>：用于<colgroup>每个列的特定属性
<tbody>：在表格中将正文内容分组
<thead>：将表头内容分组
<tfooter>：将表中的页脚内容分组

17.什么是iFrame？

该<iframe>标记用于显示网页中的网页。通过使用<iframe>标签，我们可以轻松地将外部文档插入到主HTML文档中。<iframe>标签的常见示例是来自第三方平台的网站上的横幅广告。使用iframe可能会带来安全风险，因为该网站现在容易受到跨站点攻击。

18. HTML5引入了哪些媒体元素标签？

这是HTML5引入的新元素标签的列表：

<audio>：用于多媒体声音，音频流，音乐，嵌入音频内容，而无需利用Flash播放器等其他插件
<source>：用于媒体元素中的多种媒体资源，包括音频，视频，图片等
<embed>：用于外部应用程序或插件等嵌入式内容
<video>：用于视频内容，例如视频流，电影剪辑等
<track>：用于添加包含视频或音频元素中文本的字幕。

19.设计网页时使用哪些常用列表？

设计网页时，使用几种不同类型的列表。这是最常见的：

有序列表：列表以从1到n的数字格式显示。可以使用ol标签创建有序列表。
无序列表：使用项目符号点显示列表。可以使用ul标签创建无序列表。
定义列表：列表以定义形式显示，例如字典。的dl，dt和dd标签用于创建定义列表。

20. HTML5中的canvas元素是什么？

该<canvas>元素是使用Python或JavaScript之类的脚本语言在网页上绘制图形的容器。该元素允许对2D形状和图像进行脚本化和动态渲染。在画布中，有几种不同的绘制路径，框，圆，文本等的方法。

其他

21.什么是样式表？

一个样式表创建构建可以应用到您的网页一致和简洁的风格模板。样式表在文档的设计，外观和格式方面提供了额外的元素。通常，我们使用CSS在样式表中指定模板。

22. HTML文档可以支持多少种标题？

HTML文档可以支持从<h1>到的六个标题级别<h6>。

<h1> an h1 </h1>
<h2> an h2 </h2>
<h3> an h3 </h3>
<h4> an h4 </h4>
<h5> an h5 </h5>
<h6> an h6 </h6>

23.使用定位标记，单击后如何在新选项卡中打开URL？

要在点击用户后将用户定向到新标签中的网址，我们可以将target属性设置为_blank。请参阅以下示例：

<a href="https://www.itxiaozhan.cn" target="_blank">Visit Educative!</a>

24.什么是SVG？

SVG代表可缩放矢量图形，是一种用于绘制矢量图像的基于XML的格式。SVG图像是使用XML文本文件定义的，我们可以使用文本编辑器来创建和编辑。我们可以使用SVG创建类似矢量的图表：饼图，二维图等。

<svg width="100" height="100">    
 <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />    
</svg>

恭喜您复查了这些问题！ 上面的问题应该使您对面试中的内容有深刻的认识。这些是最常见的问题，但是还有很多要学习的！

为了让您掌握最新信息，我们整理了一系列您可能希望在前端采访中看到的HTML问题。确保准备尽可能多的东西，并识别出可以加快处理速度的模式。

1. 1. 所有HTML标记都有结束标记吗？
  2. HTML的格式是什么？
  3. HTML元素和标签之间有什么区别？
  4. 什么是图像图？
  5. 如何用HTML创建嵌套网页？
  6. HTML中的DIV和SPAN有什么区别？
  7. 如何制作网页背景图片？
  8. 什么是空元素？
  9. span标签的用途是什么？举一个例子。
  10. 为什么URL用HTML编码？
  11. HTML5支持哪种类型的视频格式？
  12. HTML 5中figcaption标记的用途是什么？
  13. 在图像中使用替代文本的目的是什么？
1. 如何创建一个新的HTML元素？
2. 您可以在网页上创建彩色文本吗？
3. 如何制作网页背景图片？
4. 折叠空白有什么好处？
5. 什么时候适合使用框架？
6. 样式表遵循的层次结构是什么？
7. 您如何在网页上创建文本，以便在单击时发送电子邮件？
8. 活动链接与普通链接有何不同？
9. 分隔文本部分的标记有哪些？
10. 我们如何用HTML注释？
11. HTML中的内联元素和块级元素是什么？
Wrapping up and resources

如果您想通过前端编码面试，而又不陷入基础问题，那么拥有良好的HTML理解基础至关重要。阅读本文后，继续练习更多面试问题非常重要。一旦掌握了HTML的使用速度，就需要使用CSS，JavaScript和将它们结合在一起的高级Web开发概念。