HTML常见的面试题有哪些？热门问题和答案解析

2021年12月12日19:16:54 发表评论 808 次浏览

本文涵盖了面试中最常见的HTML和HTML5问题。

介绍：

在开始 HTML 语言的面试题之前，我们先来了解一下 HTML，什么是 HTML，它提供的就业机会等等。

HTML 代表超文本标记语言。它是 1993 年发布的用于开发网页的标准文本格式语言。 HTML 是一种由浏览器解释的语言，它告诉浏览器要显示什么以及如何显示。

如果有人想在 Web 开发领域工作 [Web 设计师、Web 开发人员]，那么 HTML 是一种需要学习的重要语言。对于 Web 开发人员来说，仅靠 HTML 是不够的，因为 HTML 仅定义了将在网页中的浏览器上呈现的数据的结构，为了使其具有视觉吸引力并使其具有功能性，我们需要分别使用CSS和Javascript。

HTML 的最新版本是 HTML5。HTML 语言中有两个主要组件，标签和属性。下图显示了一些基本的 HTML 标签和属性。

HTML常见面试题和答案合集

1. HTML 标签和元素是一回事吗？

不是。HTML 元素由起始标记定义，可能包含一些内容和结束标记。例如，<h1>Heading 1</h1> 是一个 HTML 元素，但只有 <h1> 是起始标记，而 </h1>是一个结束标记。

2. HTML 中的标签和属性是什么？

标签是 HTML 的主要组成部分，它定义了内容的结构/格式，而属性与 HTML 标签一起使用来定义元素的特征。例如，<p align="center">面试问题</p>，这里的“align”是我们用来对齐段落以显示在视图中心的属性。

3. HTML常见面试题有哪些：什么是 HTML 中的 void 元素？

没有关闭标签或不需要关闭的 HTML 元素是 Void 元素。例如<br />、<img />、<hr /> 等。你可以下载 HTML 面试问题的 PDF 版本。

4. 折叠空白有什么好处？

在 HTML 中，空白字符的空白序列被视为单个空格字符，因为浏览器将多个空格折叠为一个空格字符，这有助于开发人员缩进文本行而无需担心多个空格并保持 HTML 的可读性和可理解性代码。

5. 什么是 HTML 实体？

HTML面试题解析：在 HTML 中，一些字符是保留的，如“<”、“>”、“/”等。要在我们的网页中使用这些字符，我们需要使用称为 HTML 实体的字符实体。下面是保留字符与其各自要使用的实体字符之间的一些映射。

字符实体名称实体编号
<&lt;&#60;
>&gt;&#62;
&&amp;&#38;
(不间断空格) Eg. 10  PM&nbsp; Eg. <p>10&nbsp&nbspPM</p>&#160;

6. HTML 中有哪些不同类型的列表？

7. HTML 中的“class”属性是什么？

class 属性用于指定 HTML 元素的类名。HTML 中的多个元素可以具有相同的类值。此外，它主要用于将样式表中编写的样式与 HTML 元素相关联。

8. HTML 元素的'id' 属性和'class' 属性有什么区别？

HTML 中的多个元素可以具有相同的 class 值，而一个元素的 id 属性值不能与另一个 HTML 元素相关联。

9. 定义多部分表单数据？

多部分表单数据是 enctype 属性的值之一。用于将文件数据发送到服务器端进行处理。enctype 属性的其他有效值是 text/plain 和 application/x-www-form-urlencoded。

10. 描述 HTML 布局结构。

每个网页都有不同的组件来显示预期的内容和特定的 UI。但是，仍然有一些东西是模板化的并且是全球公认的构建网页的方式，例如：

  • <header>：存储网页的起始信息。
  • <footer>：代表页面的最后一部分。
  • <nav> : HTML 页面的导航菜单。
  • <article>：是一组信息。
  • <section> : 用于文章块内部，用于定义页面的基本结构。
  • <aside>：页面的侧边栏内容。

11.如何优化网站资产加载？

为了优化网站加载时间，我们需要优化其资产加载，为此：

  • CDN 托管- CDN 或内容交付网络是地理上分布的服务器，以帮助减少延迟。
  • 文件压缩- 这是一种有助于减少资产大小以减少数据传输的方法
  • 文件串联- 这减少了 HTTP 调用的数量
  • 缩小脚本- 这减少了 js 和 CSS 文件的整体文件大小
  • 并行下载- 在多个子域中托管资产有助于绕过所有现代浏览器每个域 6 个资产的下载限制。这可以配置，但大多数普通用户从不修改这些设置。
  • 延迟加载- 不是一次加载所有资产，而是可以根据需要加载非关键资产。

12. HTML 中的各种格式化标签是什么？

 HTML 有多种格式标签：

  • <b> - 使文本加粗
  • <i> - 使文本斜体
  • <em> - 使文本斜体，但增加了语义重要性
  • <big> - 将文本的字体大小增加一个单位
  • <small> - 将文本的字体大小减小一个单位
  • <sub> - 使文本成为下标
  • <sup> - 使文本成为上标
  • <del> - 显示为删除文本
  • <strong> - 将文本标记为重要
  • <mark> - 突出显示文本
  • <ins> - 显示为添加的文本

13. 有哪些不同类型的文档类型可用？

可用的三种Doctypes：

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

14. 请解释如何在 HTML 中指示文档所使用的字符集？

字符集在 <head> 元素内的 <meta> 标签中定义。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   ...
   ...
 </head>
 ...
</html>

15. HTML常见面试题和答案合集：<strong>, <b> 标签和 <em>, <i> 标签有什么区别？

<strong>、<b>和<em>、<i>标签在普通网页上的效果是一样的。<b> 和 <i> 标签代表粗体和斜体。这两个标签只应用字体样式和粗体标签<b>，只是给文本添加了更多的墨水，这些标签对文本没有任何说明。

而 <strong> 和 <em> 标签分别表示文本的跨度比文本的其余部分具有很强的重要性或更重要和强调。这些标签具有语义意义。

16. HTML中<head>和<body>标签的意义是什么？

<head> 标签提供有关文档的信息。它应始终包含在 <html> 标记中。该标签包含网页的元数据，头部标签中的<link>、<meta>、<style>、<script>等标签不会显示在网页上。此外，整个 Html 文档中只能有 1 个 <head> 标签，并且总是在 <body> 标签之前。

<body> 标签定义了 HTML 文档的正文。它应始终包含在 <html> 标记中。网页上需要显示的所有内容，如图像、文本、音频、视频、内容，使用<p>、<img>、<audio>、<heading>、<video>、<div>等元素，等将始终包含在 <body> 标签中。此外，一个 HTML 文档中只能有 1 个 body 元素，并且总是在 <head> 标签之后。

17.我们可以在一个网页中显示一个网页还是可以嵌套网页？

是的，我们可以在另一个 HTML 网页中显示一个网页。HTML 提供了一个标签 <iframe> ，我们可以使用它来实现这个功能。

<iframe src=”url of the web page to embed” />

18. Cell Padding 与 Cell Spacing 有何不同？

单元格间距是两个连续单元格之间的空间或间隙。而单元格填充是单元格的文本/内容与单元格的边缘/边框之间的空间或间隙。请参考上图示例找出不同之处。

19. 我们如何在 HTML 表格中将两行或更多行或列合并为一行或一列？

HTML 提供了两个表格属性“rowspan”和“colspan”，使一个单元格分别跨越多行和多列。

20. 是否可以将行内元素更改为块级元素？

是的，可以使用值为“block”的“display”属性将内联元素更改为块级元素。

21. 我们可以用多少种方式来定位一个 HTML 元素？或者位置属性的允许值是多少？

主要有 7 个位置属性值可用于定位 HTML 元素：

  1. static：默认值。这里元素是根据文档的正常流来定位的。
  2. absolute：此处元素相对于其父元素定位。最终位置由左、右、上、下的值决定。
  3. fixed：这类似于 absolute ，不同之处在于这里的元素相对于 <html> 元素定位。
  4. relative：这里元素根据文档的正常流程定位，并相对于其原始/正常位置定位。
  5. initial：这会将属性重置为其默认值。
  6. inherit：这里元素继承或采用其父级的属性。

22. HTML 元素有多少种显示方式？

  1. inline：使用它我们可以将任何块级元素显示为内联元素。元素的高度和宽度属性值不会影响。
  2. block：使用它，我们可以将任何内联元素显示为块级元素。 
  3. inline-block：这个属性类似于 inline，除了通过将显示用作 inline-block，我们实际上可以使用高度和宽度值来格式化元素。
  4. flex：它将容器和元素显示为一个灵活的结构。它遵循 flexbox 属性。
  5. inline-flex：它将 flex 容器显示为内联元素，而其内容遵循 flexbox 属性。
  6. grid：它将 HTML 元素显示为网格容器。
  7. none：使用这个属性我们可以隐藏 HTML 元素。

以下是一些很少使用的显示类型：

  1. table
  2. inline-table
  3. table-cell
  4. table-column
  5. table-row
  6. inline-grid
  7. list-item
  8. inherit
  9. initial
  10. table-caption

23. 当用作 HTML 元素的属性时，“display: none”和“visibility: hidden”有什么区别。

当我们为 HTML 元素使用属性“visibility: hidden”时，该元素将从网页中隐藏，但仍会占用空间。然而，如果我们为 HTML 元素使用“display: none”属性，那么该元素将被隐藏，并且它不会占用网页上的任何空间。

24.如何在HTML中指定链接并解释目标属性？

HTML 提供了一个超链接 - <a> 标签来指定网页中的链接。'href' 属性用于指定链接，'target' 属性用于指定我们要在哪里打开链接的文档。“目标”属性可以具有以下值：

  1. _self：这是默认值。它会在单击时在同一窗口或选项卡中打开文档。
  2. _blank：它在新窗口或选项卡中打开文档。
  3. _parent：它在父框架中打开文档。
  4. _top：它在全身窗口中打开文档。

25. 我们可以通过多少种方式为 HTML 元素指定 CSS 样式？

我们可以通过三种方式为 HTML 元素指定样式：

  • 内联：这里我们使用 HTML 元素内的“样式”属性。
  • 内部：这里我们使用 <head> 标签内的 <style> 标签。为了应用样式，我们使用“id”或“class”属性绑定元素。
  • 外部：这里我们使用 <head> 标签内的 <link> 标签将 CSS 文件引用到我们的 HTML 代码中。同样，元素和样式之间的绑定是使用“id”或“class”属性完成的。

26、链接标签<link>和锚标签<a>的区别？

锚标签 <a> 用于创建指向另一个网页或网页某个部分的超链接，这些链接是可点击的，而链接标签 <link> 定义了文档和外部资源之间的链接，而这些链接不是可点击。

27. 如何在 HTML 中包含 javascript 代码？

HTML 提供了一个 <script> 标签，我们可以使用它运行 javascript 代码并使我们的 HTML 页面更加动态。

<!DOCTYPE html>
<html>
   <body>
    <h1>
          <span>This is a demo for </span>
          <u><span id="demo"></span></u>
   </h1>
   <script>
       document.getElementById("demo").innerHTML = "script Tag"
   </script>
   </body>
</html>

28.什么时候在头部使用脚本，什么时候在正文中使用脚本？

如果脚本包含一些事件触发的函数或 jquery 库，那么我们应该在 head 部分使用它们。如果脚本将内容写入页面或不在函数内，则应将其放置在底部的正文部分内。简而言之，请遵循以下三点：

  1. 将库脚本或事件脚本放在 head 部分。
  2. 将不会在页面上写入任何内容的普通脚本放在 head 部分，直到出现任何性能问题。
  3. 将在网页上呈现某些内容的脚本放在正文部分的底部。

29. 什么是表单以及如何在 HTML 中创建表单？

HTML 表单用于收集用户输入。HTML 提供了一个 <form> 标签来创建表单。为了从用户那里获取输入，我们在表单中使用 <input> 标签，以便所有收集的用户数据都可以发送到服务器进行处理。有不同的输入类型，如“按钮”、“复选框”、“数字”、“文本”、“密码”、“提交”等。

<form action="/submit_data.php">
   <label>Enter your name: </label>
   <input type="text" name="name" /> 
   <label>Enter Mobile number </label>
   <input type="number" name="mobile_no"/>
   <input type="submit" value="Submit">
</form>

30.如何处理HTML中的事件？

HTML 允许使用 javascript 或 JQuery 在浏览器中触发事件。有很多事件，如“onclick”、“ondrag”、“onchange”等。

<!DOCTYPE html>
<html>
   <body style="padding-top:50px">
       <h3 id="event_demo">0</h3>
       <input type="button" onclick="myFunction()" value="Click Me" />
       <input type="reset" onclick="reset()" value="Reset" />
   </body>
   
   <script>
       function myFunction() {
           var value = document.getElementById("event_demo").innerHTML
           value = parseInt(value) + 1;
           document.getElementById("event_demo").innerHTML = value;
       }
       function reset() {
           document.getElementById("event_demo").innerHTML = 0;
       }
   </script>
</html>

HTML5 面试问题

31. HTML5 与其以前的版本相比有哪些优点？

HTML5 的一些优点是：-

  • 它有多媒体支持。
  • 它具有使用 SQL 数据库和应用程序缓存存储离线数据的能力。
  • Javascript 可以在后台运行。
  • HTML5 还允许用户绘制各种形状，如矩形、圆形、三角形等。
  • 包括新的语义标签和表单控件标签。

32. HTML常见面试题有哪些：如何在网页中加入音频或视频？

HTML5 提供了两个标签：<audio> 和 <video> 标签，我们可以使用它们直接在网页中添加音频或视频。

33. HTML5 中的内联元素和块元素？

内联元素块元素
内联元素只占用内容绝对必要的空间，而不是从新行开始。
示例：- <span>、<a>、<strong>、<img>、<button>、<em>、<select>、<abbr>、<label>、<sub>、<cite>、<abbr> 、<script>、<label>、<i>、<input>、<output>、<q> 等。		块元素从一个新行开始，并占用可用页面的整个宽度。
示例：- <div>、<p>、<header>、<footer>、<h1>...<h6>、<form>、<table>、<canvas>、<video>、<blockquote>、< pre>、<ul>、<ol>、<figcaption>、<figure>、<hr>、<article>、<section> 等。

34、<figure>标签和<img>标签有什么区别？

<figure> 标签指定自包含的内容，如图表、图像、代码片段等。 <figure> 标签用于从语义上组织图像的内容，如图像、图像标题等，而 <img>标签用于在 HTML5 文档中嵌入图片。

35、HTML5中如何指定元数据？

要指定我们可以使用 <meta> 标签，它是一个空标签，即它没有结束标签。与元标记一起使用的一些属性是名称、内容、http-equiv 等。下图说明了如何指定元数据。

36. <datalist> 标签和 <select> 标签一样吗？

HTML面试题解析：不可以。<datalist> 标签和<select> 标签是不同的。在 <select> 标签的情况下，用户必须从选项列表中进行选择，而 <datalist> 与 <input> 标签一起使用时会提供一个建议，即用户选择给定的选项之一或可以完全输入一些不同的价值。

37.定义图像映射？

Image Map 允许开发人员用不同的网页映射/链接图像的不同部分。它可以通过 HTML5 中的 <map> 标签来实现，使用它我们可以将图像与可点击区域链接起来。

<img  src=”image_url” ,  usemap=”#workspace” />
<map  name=”workspace”>
     <area shape=”rect”  coords=”34, 44, 270, 350” ,  href=”xyz.html” />
     <area shape=”rect”  coords=”10, 120, 250, 360” ,  href=”xyz.html” />
</map>

38. 什么是语义元素？

语义元素是那些向浏览器和开发人员描述特定含义的元素。<form>、<table>、<article>、<figure> 等元素是语义元素。

39. 将下面的数据转换成 HTML5 的表格格式？

S.no.，语言，主要用于

1、HTML、前端

2、CSS、前端

3、Python、后端

40、<meter>标签和<progress>标签有什么区别？

当我们想要显示任务的完成进度时，应该使用 <progress> 标签，而如果我们只想在已知范围或分数值内进行标量测量。此外，我们可以为 <meter> 标签指定多个额外的属性，如“form”、“low”、“high”、“min”等。

41. 是否可以使用 HTML5 进行拖放操作？如何进行？

是的，在 HTML5 中我们可以拖放元素。这可以通过使用与我们要拖放的元素一起使用的拖放相关事件来实现。

42. HTML常见面试题和答案合集：SVG 和 Canvas HTML5 元素的区别？

SVGCanvas
SVG 是基于矢量的，即由形状组成。 它是基于光栅的，即由像素组成。
SVG 在更大的表面上效果更好。画布在较小的表面上效果更好。
可以使用 CSS 和脚本修改 SVG。只能使用脚本修改画布。
SVG 是高度可扩展的。因此，我们可以以高分辨率进行高质量打印。它的可扩展性较差。

43. HTML5 可以播放什么类型的音频文件？

HTML5 支持以下三种音频文件格式：

  1. Mp3
  2. WAV
  3. Ogg

44. HTML5 规范的重要目标是什么？

这些是 HTML5 规范的目标区域：

  • 引入新元素标签以更好地构建网页，例如 <header> 标签。
  • 形成跨浏览器行为的标准并支持不同的设备和平台
  • 向后兼容旧版本的 HTML 网页
  • 引入基本的交互元素，无需依赖插件，例如 <video> 标签，而不是 flash 插件。

45.解释HTML5中网络存储的概念。

这种网络存储有助于将一些静态数据存储在浏览器的本地存储中，这样我们就不需要每次需要时都从服务器获取它。根据不同的浏览器有大小限制。这有助于减少加载时间和流畅的用户体验。有两种类型的 Web 存储用于在 HTML5 中本地存储数据：

  • 本地存储- 这有助于存储即使用户重新打开浏览器也会保留的数据。它存储在不同浏览器上的每个 web 应用程序中。
  • 会话存储- 这仅用于一个会话。用户关闭浏览器后，这将被删除。

46. 什么是 HTML5 中的微数据？

它用于帮助网站爬虫和搜索引擎提取数据。它基本上是一组名称-值对。这些组称为项目，每个名称-值对都是一个属性。大多数搜索引擎，如谷歌、微软、Yandex 等，都遵循 schema.org 词汇来提取这些微数据。

<div itemscope itemtype="http://schema.org/SoftwareApplication">
 <span itemprop="name">Interviewbit Games</span> -
 REQUIRES <span itemprop="operatingSystem">ANDROID</span><br>
 <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/>
 <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
RATING:
<span itemprop="ratingValue">4.6</span> (
<span itemprop="ratingCount">8864</span> ratings )
 </div>
 <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Price: Rs.<span itemprop="price">1.00</span>
<meta itemprop="priceCurrency" content="INR" />
 </div>
</div>
  • itemid – 项目的唯一全局标识符。
  • itemprop – 用于向项目添加属性。
  • itemref – 提供带有附加属性的元素 ID 列表。
  • itemscope – 它定义了与其关联的 itemtype 的范围。
  • itemtype – 指定将用于定义 itemprop 的词汇表的 URL。

上面的例子会被谷歌解析为

47. 哪个标签用于表示计算结果？解释它的属性。

<output> 标签用于表示计算结果。它具有以下属性：

  • for - 它定义了计算中使用的元素和结果之间的关系。
  • form - 用于定义输出元素所属的表单。
  • name - 输出元素的名称。
<form oninput = "result.value=parseInt(n1.value)+parseInt(n2.value)">
     <input type = "number" name = "n1" value = "1" /> +
     <input type = "number" name = "n2" value = "2" /><br />
     The output is: <output name = "result"></output>
</form>

上面的例子看起来像

48. HTML5 中 <header> 和 <h1> 标签之间的关系有哪些新变化？

由于 HTML5 是关于更好的语义和标签和元素的排列，<header> 标签指定网页的标题部分。与之前的版本不同，整个网页只有一个 <h1> 元素，现在这是一个部分的标题，例如 <article> 或 <section>。根据 HTML5 规范，每个 <header> 元素必须至少有一个 <h1> 标签。

49. 解释 HTML5 图形。

HTML5 支持两种图形：

  • Canvas- 这就像在白皮书或空白网页上绘图。我们可以使用绘制各种几何形状的可用方法在网页上添加不同的图形设计。
<!DOCTYPE HTML>
<html>
 <head>
 </head>
 <body>
   <canvas width="300" height="100" style="border:2px solid;"></canvas>  
 </body>
</html>
  • SVG - 可缩放矢量图形主要用于图表或图标。它遵循 XML 格式。
<!DOCTYPE html>
<html>
 <body>
   <svg width="400" height="110">
     <rect width="300" height="100" style="fill:#FFF;stroke-width:2;stroke:#000" />
   </svg>
 </body>
</html>

上述两个示例都产生此输出并代表 HTML5 提供的两种不同方法来实现网页中的图形方面。

50.解释HTML5为表单提供的新输入类型？

以下是 HTML5 提供的重要新数据类型：

  • 日期 - 仅使用 type = "date" 选择日期
  • Week - 使用 type = "week" 选择一个星期
  • 月份 - 仅使用 type = "month" 选择月份
  • 时间 - 仅使用 type = "time" 选择时间。
  • 日期时间 - 使用 type = "datetime" 组合日期和时间
  • Datetime-local - 使用 type = "datetime-local" 组合日期和时间。但忽略时区
  • 颜色 - 使用 type = "color" 接受多种颜色
  • 电子邮件 - 使用 type = "email" 接受一个或多个电子邮件地址
  • Number - 使用 type = "number" 接受带有附加检查的数值，例如 min 和 max
  • 搜索 - 允许通过使用 type = "search" 输入文本来搜索查询
  • Tel - 使用 type = "tel" 允许不同的电话号码
  • 占位符 - 在使用 type = "placeholder" 输入值之前在输入字段中显示简短提示
  • 范围 - 使用 type = "range" 接受特定范围内的数值
  • Url - 使用 type = "url" 接受网址
<form>  
        <div>
            <label>Date:</label>
            <input type="date" id="date" />
            <br>
            <label>Week:</label>
            <input type="week" id="week" />
            <br>
            <label>Month:</label>
            <input type="month" id="month" />
            <br>
            <label>Time:</label>
            <input type="time" id="time" />
            <br>
            <label>Datetime:</label>
            <input type="datetime" id="datetime" />
            <br>
            <label>Datetime Local:</label>
            <input type="datetime-local" id="datetime-local" />
            <br>
            <label>Color:</label>
            <input type="color" id="color"/>
            <br>
            <label>Email:</label>
            <input type="email" id="email" placeholder="email address" />
            <br>
            <label>Number:</label>
            <input type="number" id="number" />
            <br>
            <label>Search:</label>
            <input type="search" id="search" />
            <br>
            <label>Phone:</label>
            <input type="tel" id="phone" placeholder="Phone Number" pattern="\d{10}$" />
            <br>
            <label>Range:</label>
            <input type="range" id="range" />
            <br>
            <label>URL:</label>
            <input type="url" id="url"/>
        </div>  
    </form>

51. HTML5 媒体元素中的新标签是什么？

  • <audio> - 用于声音、音频流或音乐，无需任何附加插件即可嵌入音频内容。
  • <video> - 用于视频流、嵌入视频内容等。
  • <source> - 用于媒体元素中的多种媒体资源，例如音频、视频等。
  • <embed> - 用于外部应用程序或嵌入内容。
  • <track> - 用于视频或音频等媒体元素中的字幕。
<label>
       Video:
   </label>
    <video width="320" height="240" controls>
        <source src="video.mp4" type="video/mp4">
        <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
    </video>
    <br>
    <label>
        Embed:
    </label>
    <embed type="video/webm" src="https://www.youtube.com/embed/MpoE6s2psCw" width="400" height="300">
    <br>
    <label>
        Audio:
    </label>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
    </audio>

52. 为什么你认为在 HTML5 中添加拖放功能很重要？你将如何在 HTML5 中使图像可拖动？

拖放功能是一种非常直观的选择本地文件的方式。这类似于大多数操作系统具有复制功能，因此用户很容易理解。在原生拖放 API 之前，这是可以通过编写复杂的 Javascript 编程或外部框架（如 jQuery）来实现的。

要启用此功能，<img> 标签中有一个可拖动属性，需要将 ondrop 和 ondragover 属性设置为脚本中可用的事件处理程序。

<!DOCTYPE HTML>
<html>
 <head>
   <script>
     function allowDrop(ev) {
       ev.preventDefault();
     }
     function drop(ev) {
       ...
     }
   </script>
 </head>
 <body>
   ...
   <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 1px solid #aaaaaa; width:350px; height: 70px;"></div>
   <br>
   <img id="drag1" src="img_logo.gif" alt="HTML常见的面试题有哪些？热门问题和答案解析" draggable="true" width="336" height="69">
    ...
 </body>
</html>

53. HTML常见面试题有哪些：为什么我们需要 HTML5 中的 MathML 元素？

MathML 代表数学标记语言。它用于在网页上显示数学表达式。为此，使用了 <math> 标签。

<!DOCTYPE HTML>
<html>
 <head>
 </head>
 <body>
<math>
  <mrow>
    <mrow>
      <msup>
        <mi> a </mi>
        <mn> 2 </mn>
      </msup>
      <mo> + </mo>
      <msup>
        <mi> b </mi>
        <mn> 2 </mn>
      </msup>
      <mo> + </mo>
      <mn> 2 </mn>
      <mn> a </mn>
      <mn> b </mn>
    </mrow>
    <mo> = </mo>
    <mn> 0 </mn>
  </mrow>
</math>
 </body>
</html>

这将显示方程 a2 + b2 + 2ab = 0。

54. HTML5 中的服务器发送事件有哪些？

HTML面试题解析：从网络服务器推送到浏览器的事件称为服务器发送事件。DOM 元素可以使用这些事件不断更新。与直接投票相比，这具有主要优势。在轮询中，有很多开销，因为每次建立 HTTP 连接并断开它时，而在服务器发送的事件中，有一个长期存在的 HTTP 连接。要使用服务器发送的事件，请使用 <eventsource> 元素。此元素的 src 属性指定发送具有事件的数据流的 URL。

<eventsource src = "/cgi-bin/myfile.cgi" />

55. 什么是 Web Workers？

添加这些是为了带来并行性和异步能力。它在后台运行以执行计算量大的任务，而不会让页面响应。它是通过为此类任务启动一个单独的线程来实现的。这些不是为了执行 UI 操作。Web Worker 分为三种类型：

  • Dedicated Workers- 这些是由单个脚本使用的工人。
  • Shared Workers - 这些是由在不同窗口、IFrames 等中运行的多个脚本使用的工作程序。
  • Service Workers - 它们充当 Web 应用程序、浏览器和网络之间的代理服务器。主要用于推送通知和同步 API。
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
var w;
function startWorker() {
 if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
  document.getElementById("result").innerHTML = event.data;
};
 }
}
function stopWorker() {
 w.terminate();
 w = undefined;
}
</script>

56. HTML5中引入的form标签的novalidate属性有什么用？

它的值是一个布尔类型，表示表单提交的数据是否会被预先验证。通过将此设置为 false，可以在未经验证的情况下提交表单，这也有助于用户稍后恢复。

<form action = "" method = "get" novalidate>
        Name:<br><input type="name" name="sname"><br>
       Doubt:<br><input type="number" name="doubt"><br>
        <input type="submit" value="Submit">
</form>

57.什么是光栅图像和矢量图像？

光栅图像- 光栅图像由像素在网格中的排列定义，像素应该是什么颜色。很少有光栅文件格式包括 PNG(.png)、JPEG(.jpg) 等。
矢量图像- 使用具有形状和路径定义的算法定义矢量图像，这些算法可用于在屏幕上呈现以类似标记编写的图像时尚。文件扩展名是 .svg

58.如何在旧浏览器中支持SVG？

为了支持旧浏览器而不是在 <img> 标签的 src 属性中定义 svg 的资源，应该在 srcset 属性中定义它，并在 src 中定义后备 png 文件。

<img src="circle.png" alt="HTML常见的面试题有哪些？热门问题和答案解析" alt="circle" srcset="circle.svg">

59. 使图像具有响应性的不同方法有哪些？

  • 艺术指导- 使用 <picture> 元素，可以放大在桌面布局中完全显示的横向图像，并聚焦主要主题以进行纵向布局。
<picture>
 <source media="(min-width: 650px)" srcset="img_cup.jpg">
 <img src="img_marsh.jpg" alt="HTML常见的面试题有哪些？热门问题和答案解析" style="width:auto;">
</picture>

更大的屏幕 (>650px)

HTML常见的面试题有哪些？热门问题和答案解析

对于任何其他屏幕

HTML常见的面试题有哪些？热门问题和答案解析
  • 分辨率切换- 可以使用矢量图形相应地缩放图像，而不是缩放和裁剪。此外，这还可以进一步优化以服务于不同像素密度的屏幕。 

例如SVG

<svg width="100" height="100">
 <circle cx="50" cy="50" r="40"
 stroke="green" stroke-width="4" fill="yellow" />
</svg>
HTML常见的面试题有哪些？热门问题和答案解析

60. HTML常见面试题和答案合集：HTML5 中的清单文件是什么？

清单文件用于列出可以缓存的资源。浏览器使用此信息使网页加载速度比第一次更快。清单文件中有 3 个部分

  • CACHE Manifest - 文件需要缓存
  • Network - 永远不会缓存的文件，始终需要网络连接。
  • Fallback - 如果页面无法访问，回退文件
CACHE MANIFEST
# 2012-06-16 v1.0.0
/style.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
<!DOCTYPE HTML>
<html manifest="tutorial.appcache">
...
...
</html>

61. HTML5 中的 Geolocation API 是什么？

Geolocation API 用于与网站共享客户端的物理位置。这有助于根据用户的位置为用户提供基于区域设置的内容和独特的体验。这适用于全局导航器对象的新属性，并且大多数现代浏览器都支持此功能。

var geolocation = navigator.geolocation;

62. 编写 HTML5 代码来演示 Geolocation API 的使用。

<!DOCTYPE html>
<html>
  <body>
     <p>Click "try it" button to get your coordinates.</p>
     <button onclick="getLocation()">Try It</button>
     <p id="demo"></p>
     <script>
        var x = document.getElementById("demo");
        
        function getLocation() {
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
          } else { 
            x.innerHTML = "Geolocation functionality is not supported by this browser.";
          }
        }
        
        function showPosition(position) {
          x.innerHTML = "Latitude: " + position.coords.latitude + 
          "<br>Longitude: " + position.coords.longitude;
        }
     </script>
  </body>
</html>

上面的例子要求用户允许通过地理定位 API 访问位置数据，点击按钮后显示客户端物理位置的坐标。

HTML常见的面试题有哪些？热门问题和答案解析

63. HTML常见面试题有哪些：解释 Web Components 及其用法。

这些用于创建可重用的自定义元素，这在传统 HTML 中是非常困难的。它由三种技术组成：

  • 自定义元素- 这些是有助于定义自定义元素及其行为的 JavaScript API。
  • Shadow DOM - 这些是 JavaScript API，将封装的 shadow DOM 树附加到元素，以保持元素的特性私有且不受其他部分影响。
<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8">
<title>composed and composedPath demo</title>
<script src="main.js" defer></script>
 </head>
 <body>
<h1><code>composed</code> and <code>composedPath</code> demo</h1>
<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>
 </body>
</html>
customElements.define('open-shadow',
 class extends HTMLElement {
constructor() {
  super();
  const pElem = document.createElement('p');
  pElem.textContent = this.getAttribute('text');
  const shadowRoot = this.attachShadow({mode: 'open'});
  shadowRoot.appendChild(pElem);
}
 }
);
customElements.define('closed-shadow',
 class extends HTMLElement {
constructor() {
  super();
  const pElem = document.createElement('p');
  pElem.textContent = this.getAttribute('text');
  const shadowRoot = this.attachShadow({mode: 'closed'});
  shadowRoot.appendChild(pElem);
}
 }
);
document.querySelector('html').addEventListener('click', e => {
 console.log(e.composed);
 console.log(e.composedPath());
});
HTML常见的面试题有哪些？热门问题和答案解析

这里定义了 2 个自定义元素 <open-shadow> 和 <closed-shadow> ，它们获取它们的文本内容并将它们作为 <p> 元素的内容插入到 shadow DOM 中。

  • HTML 模板- 标记模板是使用 <template> 和 <slot> 元素编写的，这些元素可以作为自定义元素结构的基础多次重复使用。
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Simple template</title>
 <script src="main.js"></script>
</head>
<body>
 <h1>Simple template</h1>
 <template id="my-paragraph">
<style>
  p {
    color: white;
    background-color: #666;
    padding: 5px;
  }
</style>
<p><slot name="my-text">My default text</slot></p>
 </template>
 <my-paragraph>
<span slot="my-text">Let's have some different text!</span>
 </my-paragraph>
 <my-paragraph>
<ul slot="my-text">
  <li>Let's have some different text!</li>
  <li>In a list!</li>
</ul>
 </my-paragraph>
</body>
</html>
customElements.define('my-paragraph',
 class extends HTMLElement {
constructor() {
  super();
  const template = document.getElementById('my-paragraph');
  const templateContent = template.content;
  this.attachShadow({mode: 'open'}).appendChild(
    templateContent.cloneNode(true)
  );
}
 }
);
const slottedSpan = document.querySelector('my-paragraph span');
console.log(slottedSpan.assignedSlot);
console.log(slottedSpan.slot);
HTML常见的面试题有哪些？热门问题和答案解析

这里我们重用了 <my-paragraph> 模板。

参考：

Mozilla MDN

W3C

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: