HTML/HTML5 基础知识 | 面试题专用-前端开发

DTD 介绍DTD（Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性...

DTD 介绍

DTD（Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。
DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）

SGML 、 HTML 、XML 和 XHTML 的区别？

SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源
HTML（HyperText Markup Language）是超文本标记语言，它定义了网页内容的含义和结构。
XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。
XHTML 是一个基于 XML 的标记语言，他与 HTML 没什么本质的区别，但他比 HTML 更加严格。
为了规范 HTML，W3C 结合 XML 制定了 XHTML1.0 标准，这个标准没有增加任何新的标签，只是按照 XML 的要求来规范 HTML。两者最主要的区别是：
- 文档顶部 doctype 声明不同，XHTML 的 doctype 顶部声明中明确规定了xhtml DTD的写法
- 元素必须始终正确嵌套
- 标签必须始终关闭
- 标签名必须小写
- 特殊字符必须转义
- 文档必须有根元素
- 属性值必须用双引号 "" 括起来
- 禁止属性最小化（例如，必须使用 checked="checked" 而不是 checked）

DOCTYPE 有什么用？

<!DOCTYPE> 声明位于 HTML 文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器使用标准模式渲染文档。DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。

// 返回当前文档关联的文档类型定义（DTD），如果当前文档没有 DTD，则该属性返回 null。
document.doctype

Doctype

标准模式与兼容模式各有什么区别？它们有何意义？

标准模式：又称严格模式，是指浏览器按照 W3C 标准解析代码。
- 标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。
兼容模式：又称怪异模式或混杂模式，是指浏览器用自己的方式解析代码。
- 在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
如何区分：
- 在 HTML4.01 标准中，浏览器解析时到底使用标准模式还是兼容模式，与网页中的 DTD 直接相关，因为 HTML 4.01 基于 SGML，DTD 规定了标记语言的规则，这样浏览器才能正确地呈现。且有三种
- HTML5 不基于 SGML，因此不需要对 DTD 进行引用。只需要在顶部声明 <!DOCTYPE html>
目的：防止呈现文档时浏览器切换到 “兼容模式”。
怪异模式和标准模式
怪异模式（Quirks Mode）对 HTML 页面的影响

页面导入样式时，使用 link 和 @import 有什么区别？

link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS，定义 rel 连接属性等作用；而 @import 是 CSS 提供的，只能用于加载 CSS；
页面被加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载；
@import 是CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题；
link 方式的样式的权重高于 @import 的权重。

HTML 中 form 里 action 方法的 Get 和 Post 有什么区别？

Get：Form 的默认方法。
Get 是用来从服务器上获得数据。Post 是用来向服务器上传递数据
Get 将表单中数据的按照 name=value 的形式，添加到 action 所指向的 URL 后面，并且两者使用 "?" 连接，而各个变量之间使用 "&" 连接。Post 是将表单中的数据放在 form 的数据体中，按照变量和值相对应的方式，传递到 action 所指向 URL
Get 是不安全的，因为在传输过程，数据被放在请求的 URL 中。Post 的所有操作对用户来说都是不可见的，其放置 request body 中
Get 传输的数据量小，这主要是因为受 URL 长度限制。Post 可以传输大量的数据，所以在上传文件只能使用 Post
Get 限制 Form 表单的数据集的值必须为 ASCII 字符。Post 支持整个 ISO10646 字符集
Get 请求浏览器会主动 cache。Post 支持不会
Get 请求参数会被完整保留在浏览历史记录中。Post 中的参数不会被保留。
GET 和 POST 本质上就是 TCP 链接，并无差别。但是由于 HTTP 的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。

Meta viewport 原理是什么？

meta viewport 标签的作用是让当前 viewport 的宽度等于设备的宽度，同时当设置 user-scalbale="no" 时不允许用户进行手动缩放
viewport 的原理：移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是 viewport；目的是正常展示没有做移动端适配的网页，让他们完整的展示给用户；
viewport 属性值

属性	描述
width	设备的虚拟视口的宽度。
height	设备的虚拟视口的高度。
device-width	设备屏幕的物理宽度。
device-height	设备屏幕的物理高度。
initial-scale	访问页面时的初始缩放。1.0无法缩放。
user-scalable	允许设备放大和缩小，值为 yes 或 no。
minimum-scale	允许用户的最小缩放值，1.0 表无法缩放。
maximum-scale	允许用户的最大缩放值，1.0 表无法缩放。

<meta?name="viewport"?content="width=device-width, initial-scale=1.0"?/>

Meta 的目的是什么？

meta 元素可用于包含描述 HTML 文档属性的名称/值对，如作者，字符编号，关键字列表，文档作者等信息

<!DOCTYPE html>
<html>
  <head>
    <!-- 推荐 Meta Tags -->
    <meta charset="utf-8" />
    <meta name="language" content="english" />
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="Author Name" />
    <meta name="designer" content="Designer Name" />
    <meta name="publisher" content="Publisher Name" />
    <meta name="no-email-collection" content="name@email.com" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- 搜索引擎优化 Meta Tags -->
    <meta name="description" content="Project Description" />
    <meta
      name="keywords"
      content="Software Engineer,Product Manager,Project Manager,Data Scientist"
    />
    <meta name="robots" content="index,follow" />
    <meta name="revisit-after" content="7 days" />
    <meta name="distribution" content="web" />
    <meta name="robots" content="noodp" />

    <!-- 可选 Meta Tags-->
    <meta name="distribution" content="web" />
    <meta name="web_author" content="" />
    <meta name="rating" content="" />
    <meta name="subject" content="Personal" />
    <meta name="title" content=" - Official Website." />
    <meta name="copyright" content="Copyright 2020" />
    <meta name="reply-to" content="" />
    <meta name="abstract" content="" />
    <meta name="city" content="Bangalore" />
    <meta name="country" content="INDIA" />
    <meta name="distribution" content="" />
    <meta name="classification" content="" />

    <!-- 移动设备上 HTML 页面的 Meta Tgas -->
    <meta name="format-detection" content="telephone=yes" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- http-equiv Tags -->
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />

    <title>HTML5 Meta Tags</title>
  </head>
  <body>
    ...
  </body>
</html>

Meta Refresh

<!-- 在5秒钟内重定向到提供的 URL。设置为0可立即重定向 -->
<meta http-equiv="refresh" content="3;url=https://juejin.cn/user/96412754251390" />

Note：如果你的网站不是专门为响应而设计的，并且在这个尺寸下工作得很好，不要使用响应元标签，因为它会让体验变得更糟。
Stop using the viewport meta tag (until you know how to use it)
metatags

什么是替换元素与非替换元素

替换元素：就是浏览器根据其标签的元素属性来判断显示具体的内容的元素，且元素一般拥有固定的尺寸（宽高或宽高比）。
- 在 html 中像这样的元素有 img，input，textarea，select，object，这些都是替换元素，这些元素都没有实际的内容。
非替换元素：html 中大多数都是非替换元素，他们直接将内容告诉浏览器，直接显示出来。
- 如：p标签，浏览器会直接显示 p标签里的内容。
tips：替换元素和非替换元素不仅是在行内元素中有，块级元素也有替换和非替换之分，比如嵌入的文档 iframe，audio，canvas 在某些情况下也为替换元素。

块级元素和行内元素的区别？

HTML4.01 中，元素被分成两大类：inlink（行内元素）与 block（块级元素）。区别如下：

块级元素	行内元素
独占一行	不独占一行
可以设置宽高（盒模型）	不可以设置宽高，宽高由元素内部的内容决定，padding 和 margin 的 top/bottom 不会对元素生效
可以包含行内元素和其他块级元素	行内元素只能包含文本和其他行内元素。

默认情况下是这样，但可以利用 display 来修改其为块级还是行内
内联元素和块级元素

块级元素和行内元素分别有哪些？空（void）元素有哪些？

CSS 规范规定，每个元素都有 display 属性，每个元素都有默认的 display 值。例如：
- div 默认display 属性值为 block，为块级元素；
- span 默认 display 属性值为 inline，为行内元素。
块级元素：
- <h1>-<h6>、<p>、<div>、<ul>、<ol>、<form>、<table>、<address>、<blockquote>、<center>、<dir>、<dl>、<fieldset>、<hr>、<menu>、<noscript>、<pre>、<noframes>、<isindex>
- 当元素的 display 属性为 block、list-item 或 table 时，该元素将成为 “块级元素”。
行内元素：
- <a>、<img>、<input>、<span>、<textarea>、<label>、<select>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<kbd>、<q>、<s>、<samp>、<small>、<strike>、<strong>、<sub>、<sup>、<tt>、<u>
- 当元素的 display 属性为 inline、inline-block 或 inline-table 时，该元素将成为 “行内元素”
常见的空元素：标签内没有内容的 HTML 标签被称为空元素。
- <br>、<hr>、<img>、<input>、<link>、<meta>
不常见的空元素：<area>、<base>、<col>、<command>、<embed>、<keygen>、<param>、<source> <track>、<wbr>

什么是可选标签？为什么要使用它？

在 HTML 中，某些元素具有可选标记。实际上，即使元素本身是必需的，也可以从 HTML 文档中完全删除某些元素的开始和结束标签。
p，li，td，tr，th，html，head，body 等。如：

<p>Paragraph one.
<p>Paragraph two.
<p>Paragraph three.

您不必提供 </p> 结束标签。浏览器会检测到它需要它们，并且无论如何都会正确显示在 DOM 中。但这可能带给你编写上的困难！
您可以节省一些字节并减少需要在 html 文件中下载的字节。

为了便于阅读，当您的标签内有内容/文本时，带上结束标签。

简述一下 src 与 href 的区别？

src 用于引用资源，替换当前元素；href 用于在当前文档和引用资源之间确立联系。
href（hyperReference）即超文本引用：浏览器遇到并行下载资源，不阻塞页面解析，与 link 引入 css 一样，浏览器并行下载 css 不阻塞页面解析
- href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src （resource）即资源：当浏览器遇到 src 时，会暂停页面解析，直到该资源下载或执行完毕，这也是script 标签之所以放底部的原因
- src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
- 在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。
- 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

img 上 title 与 alt

title 是鼠标放在图片上面时显示的文字，title 是对图片的描述和进一步的说明。
alt 定义了图像的备用文本描述。
tips：浏览器并非总是会显示图像。当有下列情况时，alt 属性可以为图像提供替代的信息：
- 非可视化浏览器（Non-visual browsers）（比如有视力障碍的人使用的音频浏览器）
- 用户选择不显示图像（比如为了节省带宽，或出于隐私等考虑不加载包括图片在内的第三方资源文件）
- 图像文件无效，或是使用了不支持的格式
- 浏览器禁用图像等
- tips：建议尽可能地通过 alt 属性提供一些有用的信息。

<!-- × -->
<img src="wenhao.jpg" alt="图片" />

<!-- √ -->
<img src="wenhao.jpg" alt="满脸问号的男人" />

图像上 alt 属性的用途是什么？
- 如果用户无法查看图像，alt 属性将为图像提供可选信息。alt 属性应该用来描述任何图像，除了那些仅用于装饰目的的图像，在这种情况下，应该将其留空。
- 装饰性图像应具有空 alt 属性。
- 网络爬虫使用 alt 标签来理解图像内容，因此它们被认为对搜索引擎优化（SEO）很重要。
- 在 alt 标签的末尾增加可访问性。
img

为什么在 img 标签中使用 srcset 属性？请描述浏览器遇到该属性后的处理过程。

为了设计响应式图片。我们可以使用两个新的属性 srcset 和 sizes 来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
srcset：定义了我们允许浏览器选择的图像集，以及每个图像的大小。
sizes：定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。
处理过程：
- 查看设备宽度
- 检查 sizes 列表中哪个媒体条件是第一个为真
- 查看给予该媒体查询的槽大小
- 加载 srcset 列表中引用的最接近所选的槽大小的图像

<img?srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"?src="..."?alt="">

响应式图像：如果您只是在更改分辨率，请使用srcset。
响应式图像教程

noscript 标签的作用

<noscript> 元素用来定义在脚本未被执行时的替代内容（文本）。
<noscript> 标签中的内容只有在下列情况下才会显示出来：
- 浏览器不支持脚本
- 浏览器支持脚本，但脚本被禁用

<!-- 给予用户友好的提示! -->
<noscript>您的浏览器不支持 JavaScript！</noscript>

label 的作用是什么？是怎么用的？

label 标签定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
两种用法：一种是 id 绑定，一种是嵌套

<label for="select">爱我</label>
<input type="radio" id="select" name="love" value="love" />
<label>恨我<input type="radio" name="hate" value="hate" /></label>

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

<title> 与 <h1> 的区别
- <title> 用于网站信息标题，一个网站可以有多个 title，seo 权重高于 h1；
- <h1> 概括的是文章主题，一个页面最好只用一个 h1，seo 权重低于 title。
<b> 与 <strong> 的区别
- <b> 为了加粗而加粗
- <strong> 为了标明重点内容而加粗，有语气加强的含义
<i> 与 <em> 的区别
- <i> 为了斜体而斜体，<em> 为了标明重点而斜体，且对于搜索引擎来说 <strong> 和 <em> 比 <b> 和 <i> 要重视的多

`rel="noopener"` 应在什么场景下使用，为什么？

rel="noopener" 是 <a> 标签的一个属性。他可以禁止打开的新页面中使用 window.opener 属性，这样一来打开的新页面就不能通过 window.opener 去操作你的页面。
新页面可以通过 window.opener.location = newURL 将你的页面导航至任何网址。

<!-- home.html -->
<a href="./home.html" target="_blank">home</a>
<!-- <a href="./home.html" target="_blank" rel="noopener">home</a> -->

<!-- details.html -->
<h1>点关注 不迷路！</h1>
<script>
  window.opener.location = 'https://juejin.cn/user/96412754251390'
</script>

如果您正在使用带有 target ="_ blank" 的外部链接，则您的链接应具有 rel="noopener" 属性，以防止标签被挪用。如果您需要支持旧版本的 Firefox，请使用 rel="noopener noreferrer"
总结：rel="noopener" 应用于超链接，防止打开的链接操纵源页面