HTML面试题精选及详细解答🍁🔥👌😊🤘 第一部分
大家好。在回顾了最有用的CSS面试题之后，我们可以继续我们的小冒险，在本系列文章中练习HTML。
你可能在想，HTML 很简单吧？错！HTML 就像一个无底洞，比 CSS 复杂得多。它包含大量的属性、规则、API 等等。它不仅关乎标记，更关乎控制这些标记的规则。希望通过本系列文章，你能提前做好准备，揭开 HTML 中一些难点的面纱。
不过，我做了一些改动。为了方便起见，我把答案放在了每个问题旁边。但是，你应该能够不作弊就回答大部分问题，或者至少能够理解其中的概念。
和往常一样，给下次技术面试一点建议。尽量做你自己，不要做无稽之谈。有些东西可以伪装，但大多数是装不出来的。你也要展现你的个性和你如何融入面试团队，所以要格外注意。
开始吧💫
我们应该在哪里使用该<video>元素？
答案：该<video>元素提供了一种无需插件即可在浏览器中播放视频的方法。
HTML5 文档最基本的结构是什么样的？
答案：最基本的结构是 a<!DOCTYPE>后面跟着html,head和body。
以下元标签的含义是什么？
<meta charset="utf-8">
答：此charset元标签声明页面的字符集为 UTF -8 utf-8。例如，它将仅显示 UTF-8 范围内的字符。
样式表链接的默认类型是什么？
答案：默认情况下是text/css。
哪个元素在语义上适合用作标题、别名或其他重要细节？
答案：那就是<header>元素。
我们通常会如何使用<hgroup>元素？
答案：我们会使用 <h1> 标签<hgroup>将多个 h1-h6 元素组合在一起，形成一个标题。例如：
<hgroup>
<h1>Chapter 1</h1>
<h4>Once upon a time...</h4>
</hgroup>
我们通常会如何使用<mark>元素？
答：我们可以使用该<mark>元素来标记或突出显示较长文本中的一段文本。例如，当我们在搜索输入框中自动补全词语时。
如何在输入元素中添加占位符文本？
答案：通过添加placeholder属性。
以下元素表示什么？
<progress value="25" max="100" min="50"></progress>
答案：它会显示一个进度条，显示已完成四分之一。min 属性不起作用。
以下元素表示什么？
<details>
<summary>Copyright 2018</summary>
<p> - by Theo. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of Theo.</p>
</details>
答案：它会显示一个带有标题的可折叠元素Copyright 2018，点击标题后就会显示其余内容。
这个元素的作用是什么<canvas>？
答：该<canvas>元素提供了一个 API，无需安装插件即可绘制或操作图像和图形。例如，我们可以创建形状、定义路径、使用颜色、导出为 PNG 格式等等。
服务器发送事件和 WebSocket 的主要区别是什么？
答：主要区别在于服务器发送的事件是单向的，只能从服务器发送到浏览器，而 WebSocket 可以建立双向通信。
如何使 DOM 中的任何元素都可编辑？
答：我们可以使用全局contenteditable="true"属性使文本内容可编辑。
如何让整个文档都可编辑？
答：我们可以使用全局document.designMode="on"属性，使整个文档可编辑。
当我们超过 cookie 存储的最大容量时会发生什么？
答：浏览器会开始丢弃较旧的 cookie，以便为较新的 cookie 腾出空间。
Session Storage和之间的主要区别是什么Local Storage？
答：sessionStorage客户端数据仅在当前会话或每个标签页期间有效。打开新标签页时，数据会重新开始保存。而localStorage我们没有这种限制。
该元素的主要用途是什么<output>？
答案：该<output>元素用于显示计算结果。它接受诸如form_id引用其所属表单 ID 之类的属性。
我们有一个输入框，想添加一个简单的规则检查，例如，检查输入框的长度是否正确，以及是否只包含数字。我们该如何用 HTML 实现呢？
答：我们可以使用该pattern属性来指定正则表达式。例如：pattern="[0-9]{10,16}"将只允许输入长度为 10 到 16 的数字。
我们有一个表单，想要禁用其内置的表单验证功能。我们需要怎么做？
答：我们可以novalidate给表单添加一个属性，使其绕过已应用的验证规则。
我们有以下表格：
<form action="/submit.php">
First name: <input type="text" name="fist_name"><br>
Last name: <input type="text" name="last_name"><br>
<button type="submit">Submit</button><br>
<button type="submit">Save for later</button>
</form>
我们希望点击“保存稍后提交”按钮后，能够提交到不同的端点。我们该如何实现呢？
答：我们可以formaction给按钮添加属性。例如：
<button type="submit" formaction="/save_for_later.php">Save for later</button>
这将向该按钮的另一个端点发布消息。
如何在不使用 Javascript 的情况下获取输入元素的值（以数字形式）？
答案：在这种情况下，我们需要使用一个valueAsNumber属性，该属性会在元素的值有效时返回一个数字。
<select>元素和元素之间的主要区别是什么<datalist>？
答案：一个<select>元素提供了一个我们需要从中选择的选项列表，而一个<datalist>元素提供了一个我们可以选择也可以不选择的选项列表，因为它们起到推荐的作用。
您对约束验证 API 了解多少？
答：约束验证 API 是一组方法和属性，可用于检测和修改给定元素的有效性。我们可以使用它来应用自定义验证规则或直接更改默认错误消息。
该方法的主要目的是什么setCustomValidity？
答：我们过去常常setCustomValidity为元素的验证检查设置自定义消息。
我们如何监听表单提交时的无效事件？
答案：我们实际上需要使用oninvalid事件监听器。例如：
<input type="text" oninvalid="alert('You must fill your name!');" required>
什么是聚酯填充物？
答案：polyfill 是一段代码，用于模拟浏览器中缺失的某些功能。例如，Promise 或 ES6 方法等。