关于前端:2023年前端面试真题之HTML篇

人的毕生，总是不免有浮沉。不会永远如旭日东升，也不会永远苦楚潦倒。重复地一浮一沉，对于一个人来说，正是磨难。因而，浮在下面的，不用自豪；沉在底下的，更用不着乐观。必须以率直、虚心的态度，乐观进取、向前迈进。——松下幸之助

大家好，我是江辰，在现在的互联网大环境下，想必大家都或多或少且有感触，塌实的社会之下，只有一直的放弃心性，能力感知不同的播种，互勉。

2023 年最新的面试题集锦，时刻做好筹备。

本文首发于微信公众号：家养程序猿江辰

欢送大家点赞，珍藏，关注

2023 年前端面试真题之 JS 篇
2023 年前端面试真题之 CSS 篇
2023 年前端面试真题之编码篇
2023 年前端面试真题之 React 篇
2023 年前端面试真题之 Vue 篇

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

目标是为了在挪动端不让用户缩放页面应用的

解释每个单词的含意

with=device-width 将布局视窗（layout viewport）的宽度设置为设施屏幕分辨率的宽度
initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度
maximum-scale=1 指定用户可能放大的最大比例
minimum-scale=1 指定用户可能放大的最大比例

浏览器关上网页时, 须要依据网页源代码的编码格局来解码。如果网页的编码格局与浏览器的编码格局不匹配, 就会呈现乱码。比方, 网页的编码格局为 UTF-8, 而浏览器的编码格局是 GB2312, 那么就会呈现乱码。

在编写网页的时候, 如果编码呈现谬误, 也会导致浏览器关上网页时呈现乱码。比方, 在写 HTML 代码时, 如果遗记给中文字符指定编码格局, 就会呈现乱码。

有些网页会应用比拟非凡的字体, 如果浏览器中没有这个字体, 就会找不到对应的字符, 从而呈现乱码。

能够在页面上独立显示一个页面或者内容, 不会与页面其余元素产生抵触。
能够在多个页面中重用同一个页面或者内容, 能够缩小代码的冗余。
加载是异步的, 页面能够在不期待 iframe 加载实现的状况下进行展现。
不便地实现跨域拜访

搜索引擎可能无奈正确解析 iframe 中的内容
会阻塞主页面的 onload 事件
和主页面共享连接池, 影响页面并行加载

语义化标签
增强型表单(如能够通过 input 的 type 属性指定类型是 color 还是 date 或者 url 等)
媒体元素标签(video,audio)
canvas,svg
svg 绘图
天文等位(navigator.geolocation.getCurrentPosition(callback))
拖放 API(给标签元素设置属性 draggable 值为 true, 可能实现对指标元素的拖动)
Web Worker(能够开启一个子线程运行脚本)
Web Storage(即 sessionStorage 与 localStorage)
Websocket(双向通信协定, 能够让浏览器接管服务端的申请)
dom 查问 (document.querySelector() 和 document.querySelectorAll())

Canvas 元素容许在网页上应用 JavaScript 绘制图形和动画。以下是一个简略的绘制矩形的示例：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 100, 100);
</script>

在这个示例中，应用 document.getElementById() 办法获取 Canvas 元素，并通过 getContext(“2d”) 获取 2D 绘图上下文。
而后，应用 fillStyle 属性设置填充色彩，fillRect() 办法绘制一个矩形。

在 JavaScript 框架变得风行之前，前端开发者常常应用 data- 属性，把额定数据存储在 DOM 本身中。过后没有其余 Hack 伎俩（比方应用非标准属性或 DOM 上额定属性）。这样做是为了将自定义数据存储到页面或利用中，对此没有其余更适当的属性或元素。

而当初，不激励应用 data- 属性。起因之一是，用户能够通过在浏览器中利用查看元素，轻松地批改属性值，借此批改数据。数据模型最好存储在 JavaScript 自身中，并利用框架提供的数据绑定，使之与 DOM 放弃更新。

	cookie	localStorage	sessionStorage
由谁初始化	客户端或服务器，服务器能够应用 `Set-Cookie` 申请头。	客户端	客户端
过期工夫	手动设置	永不过期	以后页面敞开时
在以后浏览器会话（browser sessions）中是否放弃不变	取决于是否设置了过期工夫	是	否
是否随着每个 HTTP 申请发送给服务器	是，Cookies 会通过 `Cookie` 申请头，主动发送给服务器	否	否
容量（每个域名）	4kb	5MB	5MB
拜访权限	任意窗口	任意窗口	以后页面窗口

<script> – HTML 解析中断，脚本被提取并立刻执行。执行完结后，HTML 解析持续。
<script async> – 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行结束可能在 HTML 解析结束之前。当脚本与页面上其余脚本独立时，能够应用 async，比方用作页面统计分析。
<script defer> – 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析结束后进行。如果有多个含 defer 的脚本，脚本的执行程序将依照在 document 中呈现的地位，从上到下程序执行。

留神：没有 src 属性的脚本，async 和 defer 属性会被疏忽。

把 <link> 标签放在 <head></head> 之间是标准要求的内容。此外，这种做法能够让页面逐渐出现，进步了用户体验。将样式表放在文档底部左近，会使许多浏览器（包含 Internet Explorer）不能逐渐出现页面。一些浏览器会阻止渲染，以防止在页面款式发生变化时，从新绘制页面中的元素。这种做法能够避免出现给用户空白的页面或没有款式的内容。

把 <script> 标签恰好放在 </body> 之前

脚本在下载和执行期间会阻止 HTML 解析。把 <script> 标签放在底部，保障 HTML 首先实现解析，将页面尽早出现给用户。

例外情况是当你的脚本里蕴含 document.write() 时。然而当初，document.write() 不举荐应用。同时，将 <script> 标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档 （document） 被解析。兴许，对此比拟好的做法是，<script> 应用 defer 属性，放在 <head> 中。

渐进式渲染是用于进步网页性能（尤其是进步用户感知的加载速度），以尽快出现页面的技术。

在以前互联网带宽较小的期间，这种技术更为广泛。现在，挪动终端的流行，而挪动网络往往不稳固，渐进式渲染在古代前端开发中依然有用武之地。

一些举例：

图片懒加载——页面上的图片不会一次性全副加载。当用户滚动页面到图片局部时，JavaScript 将加载并显示图像。
确定显示内容的优先级（分档次渲染）——为了尽快将页面出现给用户，页面只蕴含根本的最大量的 CSS、脚本和内容，而后能够应用提早加载脚本或监听 DOMContentLoaded / load 事件加载其余资源和内容。
异步加载 HTML 片段——当页面通过后盾渲染时，把 HTML 拆分，通过异步申请，分块发送给浏览器。

关于前端:2023年前端面试真题之HTML篇

文章列表

meta viewport 是做什么用的，怎么写？

浏览器乱码的起因是什么? 如何解决?

编码格局不匹配

网页编码谬误

字体缺失

iframe 有那些长处和毛病?

长处

毛病

HTML5 新个性

如何应用 HTML5 中的 Canvas 元素绘制图形？

什么是 data- 属性？

请形容 cookie、sessionStorage 和 localStorage 的区别。

请形容 script、script async 和 script defer 的区别。

为什么最好把 CSS 的 link 标签放在 head 之间？为什么最好把 JS 的 script 标签恰好放在 body 之前，有例外情况吗？

什么是渐进式渲染（progressive rendering）？