HTML 面试真题

doctype 的意义是什么

让浏览器以标准模式渲染

让浏览器知道元素的合法性

<!DOCTYPE>（文档类型声明，Document Type 的缩写）是一种用于指定 HTML 或 XML 文档类型的标记。
它告诉浏览器或解析器用什么规范来解析文档。
对于 HTML 文档来说，<!DOCTYPE> 通常位于文档的开头，它指定 HTML 的版本和文档类型定义（DTD），以确保浏览器可以正确地呈现页面。
在 HTML5 中，建议使用简单的 DOCTYPE 声明 <!DOCTYPE html>，因为它是所有 HTML5 文档的标准模式。
如果省略了 <!DOCTYPE>，则浏览器可能会使用混杂模式（quirks mode）解析文档，这可能导致布局和呈现问题。

HTML/XHTML/HTML5 的关系

HTML 属于 SGML

XHTML 属于 XML，是 HTML 进行 XML 严格化的结果

HTML5 不属于 SGML 或 XML；比 XHTML 宽松

HTML、XHTML 和 HTML5 都是用于创建 Web 页面的标记语言。HTML 和 XHTML 都是早期的版本，而 HTML5 是最新版本。
HTML 是 " 超文本标记语言 " 的缩写，是一种用于创建 Web 页面的标记语言，最初于 1993 年推出。
XHTML 是 " 可扩展超文本标记语言 " 的缩写，是 HTML 的一种 XML 扩展。
HTML5 是 HTML 的最新版本，于 2014 年正式推出，包含了新的标记、API 和功能，可以实现更丰富、更交互性和更动态的 Web 页面。
HTML5 不再基于 SGML，也不再要求文档必须是 XML 兼容的，同时也提供了更多新的功能，如视频、音频、Canvas、Web 存储、Web Workers 等等。
因此，相较于 HTML 和 XHTML，HTML5 更具有灵活性和可扩展性，是现代 Web 开发的首选标记语言。

HTML5 有什么变化

新的语义化元素

表单增强

新的 API（离线、音视频、图形、实时通信、本地存储、设备能力）

分类和嵌套变更

分类改为内容分类，不再按照 block/inline/inline-block 划分

a 元素透明属性

新的语义化元素

<header> 元素：表示页面或者页面某一部分的标题区域，通常包含网站的标识、主导航等内容。
<nav> 元素：表示导航部分，通常包含站点内的链接，用于指向其他页面或其他部分。
<main> 元素：表示页面的主体内容区域，通常包含除页眉、页脚和侧边栏之外的大部分内容。
<article> 元素：表示页面或者页面某一部分的独立内容，通常是指具有完整意义的、独立于页面其他部分的文章、博客、评论等。
<section> 元素：表示文档的一个区域或者一个章节，通常包含一个标题。
<aside> 元素：表示与页面主体内容相关但不是主要内容的部分，通常包含边栏、广告、相关文章、标签云等内容。
<footer> 元素：表示页面或者页面某一部分的页脚区域，通常包含版权信息、联系方式、站点地图等内容。
<em> 元素：用于强调文本。通常情况下，浏览器会使用斜体来显示 <em> 元素中的文本。
<strong> 元素：用于表示更强烈的重点或重要性。通常情况下，使用加粗来显示 <strong> 元素中的文本。
<i> 元素：用于表示与周围文本不同的一些文字，通常表现为斜体。常用于表示某些术语、技术术语、外国语单词或其他文本片段，这些文本片段不需要引起强调，但需要与周围的文本区别开来。

表单增强

引入了一些新的 input 元素的 type 属性：

date：用于选择日期。
time：用于选择时间。
datetime 和 datetime-local：用于选择日期和时间。
week：用于选择一周的某个日期。
month：用于选择一年中的某个月份。
number：用于输入数值。
range：用于选择数值范围。
search：用于搜索框。
email：用于电子邮件地址输入。
tel：用于电话号码输入。
url：用于 URL 地址输入。
color：用于颜色选择。

表单验证

使得开发者能够更容易地在客户端对用户提交的表单数据进行验证，减轻服务器端的负担，提高用户体验（之前版本只能使用 JS/Regex 进行验证）。

required：用于标记必填字段。
pattern：用于指定输入值的正则表达式模式。
min 和 max：用于限制数字或日期/时间的最小和最大值。
maxlength 和 minlength：用于限制输入字段的最大和最小长度。
email：用于检测电子邮件地址是否符合标准格式。
tel：用于检测电话号码是否符合标准格式。
url：用于检测网址是否符合标准格式。

注意

这些验证方法仅仅是对于简单的表单输入验证，安全性较低。

自动聚焦/placeholder

使用 autofocus 属性在页面加载后光标自动将焦点设置到指定的表单元素上，使得用户可以更方便地进行输入操作。
使用 placeholder 属性，可以在表单元素中显示默认文本，提供给用户一些提示或示例。这个属性在表单元素未被填写时会显示，在用户输入内容后会自动消失。这个属性可以用来帮助用户更好地理解表单元素所期望的输入格式或内容。

注意

placeholder 属性不应该被用作必填项的提示，因为这个属性只是提供了一个视觉上的提示，但不会对表单数据进行验证。如果想要标记必填项，应该使用 required 属性。

新 API 及其功能

Canvas API：Canvas API 允许 Web 开发者使用 JavaScript 在网页上绘制 2D 和 3D 图形、图像和动画。
Geolocation API：Geolocation API 可用于获取用户的地理位置信息，可以用于各种应用，例如定位、导航和社交网络。
Web Storage API：Web Storage API 提供了一种在 Web 浏览器中存储数据的方法，包括 LocalStorage 和 SessionStorage。这些 API 允许 Web 应用程序在本地存储数据，而不必依赖于服务器。
Web Workers API：Web Workers API 使得 Web 应用程序能够在后台运行多线程代码，提高了 Web 应用程序的性能和响应性。
WebSocket API：WebSocket API 提供了一种实时通信机制，可以实现双向通信。它使得 Web 应用程序能够与服务器进行实时交互，从而提高了 Web 应用程序的响应性和实时性。
WebRTC API：WebRTC API 允许 Web 应用程序通过浏览器直接进行点对点通信，无需第三方插件或软件。
Web Audio API：Web Audio API 提供了一种在 Web 应用程序中处理和合成音频的方式。开发者可以使用 Web Audio API 创建各种音效、音乐和声音。
Fullscreen API：Fullscreen API 使得 Web 应用程序能够全屏显示，提供了更好的用户体验。

元素分类

元数据 (Metadata)：用于描述文档的数据，如文档的标题、作者、字符编码等信息。例如，<title>、<meta>、<link> 等标签属于元数据类别。
流内容 (Flow content)：用于组织页面的主体内容，如段落、列表、表格等。流内容一般不能嵌套标题等结构性元素。例如，<p>、<div>、<ul>、<table> 等标签属于流内容类别。
区块内容 (Sectioning content)：用于组织页面结构，如章节、侧边栏、页脚等。区块内容可以包含其他区块内容和流内容，通常也可以嵌套标题等结构性元素。例如，<section>、<aside>、<footer> 等标签属于区块内容类别。
标题内容 (Heading content)：用于表示文档结构的标题，一般由 h1~h6 六个级别的标题组成。标题内容只能出现在区块内容中，不能出现在流内容中。例如，<h1>、<h2>、<h3> 等标签属于标题内容类别。
短语内容 (Phrasing content)：用于表示文本中的短语，如链接、强调文本、图像等。短语内容可以出现在流内容和区块内容中，但不能嵌套其他结构性元素。例如，<a>、<em>、<img> 等标签属于短语内容类别。
嵌入内容 (Embedded content)：用于在文档中嵌入其他类型的内容，如音频、视频、图形等。嵌入内容可以出现在流内容和区块内容中。例如，<video>、<audio>、<img> 等标签属于嵌入内容类别。
交互内容 (Interactive content)：用于创建用户交互界面的元素，如表单、按钮、链接等。交互内容可以出现在流内容和区块内容中。例如，<form>、<button>、<a> 等标签属于交互内容类别。

a 元素内容模型

在 HTML5 中，<a> 元素的 Content Model 被定义为 " 透明的（Transparent）"，这使得它具有较强的灵活性和可嵌套性。

这意味着它可以包含大多数内容，其父元素所允许的内容也可以放置在 <a> 元素内部。

例如，<a> 元素放在 <div> 可以包含文本、图像、其他嵌套的元素，以及其他链接元素等。

em 和 i 有什么区别

em 是语义化的标签，表强调

i 是纯样式的标签，表斜体，

HTML5 中 i 不推荐使用，一般用作图标

<em> 元素：用于强调文本。通常情况下，浏览器会使用斜体来显示 <em> 元素中的文本。
<strong> 元素：用于表示更强烈的重点或重要性。通常情况下，使用加粗来显示 <strong> 元素中的文本。
<i> 元素：用于表示与周围文本不同的一些文字，通常表现为斜体。常用于表示某些术语、技术术语、外国语单词或其他文本片段，这些文本片段不需要引起强调，但需要与周围的文本区别开来。

em vs i

在 HTML5 中，<i> 元素用于表示与周围文本不同的一些文字，通常表现为斜体。然而 <i> 元素并不是用来强调或者表示强调的文本，应该使用 <em> 元素来实现这种效果。

<p> 在计算机科学中，<i> 递归</i> 是一种常见的算法。</p> 
<p> "Bonjour"是法语中的<i> 你好</i> 。</p>

<i> 元素用于表示特定术语或外语单词，这些文本片段与周围文本不同，但也不需要强调。在视觉上，浏览器通常会将 <i> 元素中的文本呈现为斜体。

语义化的意义是什么

开发者容易理解

机器容易理解结构 (搜索引擎、读屏软件）

有助于 SEO

semantic microdata

语义化

HTML 语义化指的是在 HTML 文档中使用恰当的元素和属性，以便更清晰地描述文档的结构和内容。这样做可以提高文档的可读性和可访问性，并有助于搜索引擎更好地理解文档内容。

semantic

HTML5 中引入了一些新的语义化元素，这些元素使得我们可以更加清晰地描述文档的结构和内容。以下是 HTML5 中的一些常用语义化元素：

<header>: 用于定义文档或节的页眉部分。
<nav>: 用于定义导航链接的部分。
<section>: 用于定义文档中的节或区块。
<article>: 用于定义文档中的一篇独立的文章或内容块。
<aside>: 用于定义页面或文章的侧边栏部分。
<footer>: 用于定义文档或节的页脚部分。
<main>: 用于定义文档的主要内容。

这些语义化元素的引入可以使得 HTML 文档更加清晰和易于理解，同时也有利于搜索引擎和其他程序更好地理解文档的内容。在使用这些元素时，我们需要根据文档的实际结构和内容来选择合适的元素，以便更好地描述文档的语义。同时也要注意，这些语义化元素的引入并不意味着我们应该完全放弃使用其他元素，而是要在使用上更加注重语义化的考虑。

microdata

在 HTML5 中，可以使用语义化标记和微数据（Microdata）来进一步提高文档的语义化。Microdata 是一种在 HTML 标记中嵌入语义信息的方法，它可以描述文档中的实体、属性和关系，并以结构化的方式呈现这些信息。

使用 Microdata 的步骤如下：

定义实体：在文档中定义实体（如人、组织、事件等）并为其添加属性（如名称、日期、地点等）。
描述关系：将实体之间的关系（如作为作者或演员）描述出来。
用 itemtype 属性声明实体类型，用 itemprop 属性声明属性，用 itemscope 属性指定所定义的实体。

例如，以下是一个使用 Microdata 的示例：

<article itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="headline">文章标题</h1>
  <p>这是一篇关于某个主题的文章。</p>
  <div itemprop="author" itemscope itemtype="http://schema.org/Person">
    <p><span itemprop="name">作者名</span>写作</p>
  </div>
  <time itemprop="datePublished" datetime="2023-02-14">发布时间：2023 年 2 月 14 日</time>
</article>

在这个例子中

<article> 元素被用来表示文章的主体
itemscope 属性表示该元素定义了一个实体
itemtype 属性表示该实体的类型为文章
<h1> 元素中的 itemprop 属性表示文章标题的属性
<div> 元素中的 itemprop 属性表示文章作者的属性
<time> 元素中的 itemprop 属性表示文章发布时间的属性。

这些属性都使用了 Schema.org 的类型和属性名。

通过使用语义化标记和 Microdata，我们可以更准确地描述文档中的内容和结构，从而提高文档的可读性和可访问性，同时也有助于搜索引擎更好地理解文档的内容。

哪些元素可以自闭合

表单元素

input

图片 img

br hr

meta link

在 HTML 中，有一些元素可以自闭合，即不需要使用闭合标签来结束该元素。HTML5 中可以自闭合的元素包括：

<area>
<base>
<br>
<col>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<track>
<wbr>

需要注意的是，尽管这些元素可以自闭合，但并不意味着它们必须自闭合。在编写 HTML 代码时，可以根据个人偏好和标准的约定来选择是否自闭合这些元素。另外，对于自闭合元素来说，它们的属性值必须紧贴着元素名称，不能在中间添加空格或换行符等空白字符。

例如，下面是一个使用自闭合的 <br> 元素的示例：

<p>这是一段文本。<br /></p>

而以下示例中的 <br> 元素没有自闭合，而是使用了标准的闭合标签：

<p>这是一段文本。<br /></p>

总之，对于可以自闭合的元素，在编写 HTML 代码时可以根据个人偏好和标准的约定来选择是否自闭合，但需要确保它们的属性值紧贴着元素名称，且不能在中间添加空格或换行符等空白字符。

HTML 和 DOM 的关系

HTML 是 " 死 " 的

DOM 由 HTML 解析而来，是活的

JS 可以维护 DOM

HTML（超文本标记语言）是用于创建 Web 页面的标记语言
DOM（文档对象模型）是用于操作 HTML 文档中元素的 API。
在浏览器加载 HTML 文档时，它会将 HTML 代码解析为 DOM 树，其中每个 HTML 元素都成为 DOM 树上的一个节点，以便可以使用 DOM API 对它们进行访问、修改和操作。
因此，可以说 HTML 和 DOM 是密切相关的，HTML 定义了文档的结构和内容，而 DOM 允许 JavaScript 等脚本语言对该结构进行操作。

property 和 attribute 的区别

attribute 是 " 死 " 的

property 是 " 活 " 的

在 HTML 元素中，属性（attribute）是在 HTML 标记中定义的值，而属性的值可以在 HTML 标记中指定或在 JavaScript 代码中设置。例如，在 HTML 中，img 元素可以定义 src 属性来指定图像的 URL。一旦文档被解析成 DOM 树，这些属性会变成 DOM 节点的属性。
而在 JavaScript 中，属性（property）是对象上的变量。在 DOM 中，属性通常表示节点上的状态和行为，例如节点的 class 属性表示节点的类名，而节点的 style 属性表示节点的 CSS 样式。这些属性可以用 JavaScript 代码来访问和修改。
因此，属性和属性值是 HTML 文档的一部分，而属性则是 DOM 节点的一部分，它们通常相互关联，但是可以有不同的值。
- 如果属性值在 HTML 标记中被设置，则该值成为属性的默认值；
- 如果在 JavaScript 中修改该属性，则该属性的值在 DOM 节点上发生更改，但是 HTML 属性的值保持不变。

示例

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
    <title> property / attribute</title> 
  </head> 
  <body> 
    <input type="text" value="1" /> 
  </body> 
</html>

property-vs-attribute

> $0
<input type="text" value="1"> 

> $0.value
'1'

> $0.value="2"
'2'

> $0.value
'2'

> $0.getAttribute("value")
'1'

> $0.setAttribute("value", "3")
undefined

> $0
<input type="text" value="3"> 

> $0.value
'2'

form 的作用有哪些

直接提交表单

使用 submit/reset 按钮

便于浏览器保存表单

第三方库可以整体提取值

第三方库可以进行表单验证

HTML 中的表单（form）元素允许用户在 Web 页面上输入和提交数据。表单由多个表单控件（form controls）组成，例如文本框、单选按钮、复选框、下拉列表等等。当用户填写表单并提交数据时，浏览器将该数据打包并发送到指定的目标 URL 或 Web 服务器上，从而实现数据的提交和处理。

表单的主要作用如下：

收集和提交数据：表单允许用户输入和提交数据，这些数据可以被用于不同的目的，例如用户注册、搜索、购物等等。
验证数据：表单控件可以设置验证规则，例如必填字段、数据格式、数据范围等等，从而确保提交的数据有效和安全。
支持文件上传：表单控件中的文件选择框允许用户选择本地文件并将其上传到 Web 服务器上。
提供用户界面：表单控件可以提供更好的用户界面，例如单选按钮和复选框可以提供更好的用户选择体验，下拉列表可以提供更好的数据选择体验等等。
表单自动填充：浏览器会记住用户填写的表单数据，例如用户名、密码、地址、电话等等，并在用户下次访问该页面时，自动填充这些数据。这可以让用户更方便地填写表单，并提高用户体验。设置 input 元素的 autocomplete 属性（在 input 中 autocomplete 属性是默认开启的）来控制浏览器是否保存表单数据以便用户下次访问页面时填写。当 autocomplete 属性设置为 "on" 时，浏览器将自动保存该字段的值，当设置为 "off" 时，浏览器将不保存该字段的值。可以使用 autocomplete 属性的值来设置表单中不需要保存的字段，例如信用卡号码等等。

总之，表单是 Web 开发中非常重要和常用的元素，它可以帮助开发人员实现用户数据的收集和处理，从而实现各种功能和交互效果。