2023 最新前端面试题 （HTML 篇）

1. src 和 href 的区别

src 用于替换当前元素（引入），href 用于在当前文档和引用资源之间确立联系（引用）

（1）src（source）

指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；

在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。

<script src =”js.js”>script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

（2）href（Hypertext Reference）

指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加

<link href=”common.css” rel=”stylesheet”/>

那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css，而不是使用 @import 方式。

2. @import 和 link 区别

同：都为外部引用 CSS 的方式

异：

1. link 还能定义 RSS 等其他事务；@import 只能加载 CSS；
2. link 在页面载入时同时加载；@import 需要页面完全加入之后加载；
3. link 无兼容问题；@import 在 CSS 2.1 提出，低版本不支持；
4. link 支持使用 JS 控制 DOM 区改变样式，@import 不支持

推荐文章： link 和 @import 区别

3. 对 HTML 语义化的理解

通俗来讲就是用正确的标签做正确的事情。

包括 内容语义化（内容结构化） 和 代码语义化（选择合适的标签）。

语义化的优点：

1. 样式丢失时候还能让页面呈现清晰的结构
2. 读屏软件，根据文章可以自动生成目录
3. 有利于SEO
4. 对开发者友好，增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

<header>header>  头部
 
<nav>nav>  导航栏
 
<section>section>  区块（有语义化的div）
 
<main>main>  主要区域
 
<article>article>  主要内容
 
<aside>aside>  侧边栏
 
<footer>footer>  底部

4. DOCTYPE(文档类型 - document type) 的作⽤，严格模式与混杂模式如何区分？它们有何意义?

DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明；

它的作用是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚至 JavaScript 脚本的解析；

它必须声明在HTML文档的第一行。

浏览器渲染页面的两种模式（可通过document.compatMode获取）：

• CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
• BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

的作用： 的作用就是让浏览器进入标准模式，使用最新的 HTML5 标准来解析渲染页面；如果不写，浏览器就会进入混杂模式。

严格模式与混杂模式的区分：

• 严格模式： 又称为标准模式，指浏览器按照W3C标准解析代码；
• 混杂模式： 又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；

区分：网页中的DTD，直接影响到使用的是严格模式还是浏览模式，可以说DTD的使用与这两种方式的区别息息相关。

• 如果文档包含严格的DOCTYPE ，那么它一般以严格模式呈现（严格 DTD ——严格模式）；
• 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）；
• DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现（DTD不存在或者格式不正确——混杂模式）；
• HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的 法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

总之，严格模式让各个浏览器统一执行一套规范兼容模式保证了旧网站的正常运行。

5. script 标签中 defer 和 async 的区别

如果没有 defer  或 async   属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

下图可以直观的看出三者之间的区别:

其中蓝色代表js脚本网络加载时间，红色代表 js 脚本执行时间，绿色代表 html 解析。

defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：

defer：

HTML 5 规范要求按出现顺序执行且在 DOMContentLoaded 事件之前执行，但实际并没有按照规范执行；

async：

不保证按出现次序执行，可在 DOMContentLoaded 之前或之后执行

6. 常用的 meta 标签有哪些

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

常用的meta标签：

（1）charset，用来描述HTML文档的编码类型：

<meta charset="UTF-8" >

（2） keywords，页面关键词：

<meta name="keywords" content="关键词" />

（3）description，页面描述：

<meta name="description" content="页面描述内容" />

（4）refresh，页面重定向和刷新：

<meta http-equiv="refresh" content="0;url=" />

（5）viewport，适配移动端，可以控制视口的大小和比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

其中，content 参数有以下几种：

• width viewport ：宽度(数值/device-width)
• height viewport ：高度(数值/device-height)
• initial-scale ：初始缩放比例
• maximum-scale ：最大缩放比例
• minimum-scale ：最小缩放比例
• user-scalable ：是否允许用户缩放(yes/no）

（6）搜索引擎索引方式：

<meta name="robots" content="index,follow" />

其中，content 参数有以下几种：

• all：文件将被检索，且页面上的链接可以被查询；
• none：文件将不被检索，且页面上的链接不可以被查询；
• index：文件将被检索；
• follow：页面上的链接可以被查询；
• noindex：文件将不被检索；
• nofollow：页面上的链接不可以被查询。

7. HTML5 有哪些更新

1. 语义化标签

• header：定义文档的页眉（头部）；
• nav：定义导航链接的部分；
• footer：定义文档或节的页脚（底部）；
• article：定义文章内容；
• section：定义文档中的节（section、区段）；
• aside：定义其所处内容之外的内容（侧边）；

2. 媒体标签

（1） audio：音频

<audio src='' controls autoplay loop='true'>audio>

属性：

• controls 控制面板
• autoplay 自动播放
• loop='true' 循环播放

（2）video视频

<video src='' poster='imgs/aa.jpg' controls>video>

属性：

• poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
• controls 控制面板
• width
• height

（3）source 标签

<video>
 	<source src='aa.flv' type='video/flv'>source>
 	<source src='aa.mp4' type='video/mp4'>source>
video>

因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。

3. 表单

表单类型：

• email ：能够验证当前输入的邮箱地址是否合法
• url ： 验证URL
• number ： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
• search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
• range ： 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
• color ： 提供了一个颜色拾取器
• time ： 时分秒
• date ： 日期选择年月日
• datatime ： 时间和日期(目前只有Safari支持)
• datatime-local ：日期时间控件
• week ：周控件
• month：月控件

表单属性：

• placeholder ：提示信息
• autofocus ：自动获取焦点
• autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：
  • 表单必须提交过
  • 必须有name属性。
• required：要求输入框不能为空，必须有值才能够提交。
• pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\d{10}$"
• multiple：可以选择多个文件或者多个邮箱
• form=" form表单的ID"

表单事件：

• oninput 每当input里的输入框内容发生变化都会触发此事件。
• oninvalid 当验证不通过时触发此事件。

4. 进度条、度量器

• progress 标签：用来表示任务的进度（IE、Safari不支持），max 用来表示任务的进度，value 表示已完成多少
• meter 属性：用来显示剩余容量或剩余库存（IE、Safari不支持）
  • high/low：规定被视作高/低的范围
  • max/min：规定最大/小值
  • value：规定当前度量值

设置规则：min < low < high < max

5.DOM查询操作

• document.querySelector()
• document.querySelectorAll()

它们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加#)

6. Web存储

HTML5 提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储

7. 其他

• 拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放：

  <img draggable="true" />
  

• 画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

  <canvas id="myCanvas" width="200" height="100">canvas>
  

• SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准
• 地理定位：Geolocation（地理定位）用于定位用户的位置。‘

拖放效果（黑色箭头指代鼠标）：

总结：

（1）新增语义化标签：nav、header、footer、aside、section、article

（2）音频、视频标签：audio、video

（3）数据存储：localStorage、sessionStorage

（4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议）

（5）input标签新增属性：placeholder、autocomplete、autofocus、required

（6）history API：go、forward、back、pushstate

移除的元素有：

• 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
• 对可用性产生负面影响的元素：frame，frameset，noframes；

7. img 的 srcset 属性的作用？

不同屏幕密度下，img 会自动加载不同的图片。用法如下：

<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。

按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x,2x,3x,4x四种，如果每一个图片都设置4张图片，加载就会很慢。所以就有了新的srcset标准。代码如下：

<img 
  src="https://cloud4.gogoing.site/files/2020-08-21/bbc63bf5-6f56-4d0a-a996-72fff804725c.png"
  sizes="(max-width: 376px) 375px, (max-width: 769px) 768px, 1024px"
  srcset="
    https://cloud3.gogoing.site/files/2020-08-21/bbc63bf5-6f56-4d0a-a996-72fff804725c.png 375w,
    https://cloud2.gogoing.site/files/2020-08-21/69d2679d-eefe-434a-8755-7f8b09166bf3.png 768w,
    https://cloud1.gogoing.site/files/2020-08-21/291087d7-beda-402f-9c28-b23e71beb32e.png 1024w"
>

其中 srcset 指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。

1. 在普通的PC电脑上，屏幕像素比是1，sizes属性计算值为375px，那么，img的实际宽度为375*1=375w，因此，浏览器会加载375px这张图片。
2. 在iphone678这类机型中，屏幕像素比是2，sizes属性计算值为375px，那么，img的实际宽度为375*2=750w，此时，375w < 750w < 768w, 因此，浏览器会加载768px这张图片。
3. iphone plus 和iphone X这类机型中，屏幕像素比是3，sizes属性计算值为375px，那么，img的实际宽度为375*3=1125w，此时，浏览器会加载1024px这张图片。

sizes语法如下：

sizes="[media query] [length], [media query] [length] ... "

8. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

• 行内元素：
  • 一个行内元素只占据它对应标签的边框所包含的空间。
  • a b span img input select strong；
• 块级元素有：
  • 块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。
  • div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
• 行内元素和块级元素的对比：
  • 内容：
    • 一般情况下，行内元素只能包含数据和其他行内元素。
    • 块级元素可以包含行内元素和其他块级元素。
  • 格式：
    • 默认情况下，行内元素不会以新行开始，而块级元素会新起一行

• 空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：
  • 常见的有：
    、

    ---

    、、、、；
  • 鲜见的有：、、、、、、、、、、。