2023年前端面试真题之HTML篇

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

大家好，我是江辰，在如今的互联网大环境下，想必大家都或多或少且有感受，浮躁的社会之下，只有不断的保持心性，才能感知不同的收获，互勉。

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

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

欢迎大家点赞，收藏，关注

文章列表

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

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

目的 是为了在移动端不让用户缩放页面使用的

解释每个单词的含义

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

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

编码格式不匹配

浏览器打开网页时,需要根据网页源代码的编码格式来解码。如果网页的编码格式与浏览器的编码格式不匹配,就会出现乱码。比如,网页的编码格式为 UTF-8,而浏览器的编码格式是 GB2312,那么就会出现乱码。

网页编码错误

在编写网页的时候,如果编码出现错误,也会导致浏览器打开网页时出现乱码。比如,在写 HTML 代码时,如果忘记给中文字符指定编码格式,就会出现乱码。

字体缺失

有些网页会使用比较特殊的字体,如果浏览器中没有这个字体,就会找不到对应的字符,从而出现乱码。

iframe 有那些优点和缺点?

优点

• 可以在页面上独立显示一个页面或者内容,不会与页面其他元素产生冲突。
• 可以在多个页面中重用同一个页面或者内容,可以减少代码的冗余。
• 加载是异步的,页面可以在不等待 iframe 加载完成的情况下进行展示。
• 方便地实现跨域访问

缺点

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

HTML5 新特性

• 语义化标签
• 增强型表单(如可以通过 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())

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

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

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

什么是data-属性？

在 JavaScript 框架变得流行之前，前端开发者经常使用 data- 属性，把额外数据存储在 DOM 自身中。当时没有其他 Hack 手段（比如使用非标准属性或 DOM 上额外属性）。这样做是为了将自定义数据存储到页面或应用中，对此没有其他更适当的属性或元素。

而现在，不鼓励使用 data- 属性。原因之一是，用户可以通过在浏览器中利用检查元素，轻松地修改属性值，借此修改数据。数据模型最好存储在 JavaScript 本身中，并利用框架提供的数据绑定，使之与 DOM 保持更新。

请描述 cookie、sessionStorage 和 localStorage 的区别。

	cookie	localStorage	sessionStorage
由谁初始化	客户端或服务器，服务器可以使用 Set-Cookie 请求头。	客户端	客户端
过期时间	手动设置	永不过期	当前页面关闭时
在当前浏览器会话（browser sessions）中是否保持不变	取决于是否设置了过期时间	是	否
是否随着每个 HTTP 请求发送给服务器	是，Cookies 会通过 Cookie 请求头，自动发送给服务器	否	否
容量（每个域名）	4kb	5MB	5MB
访问权限	任意窗口	任意窗口	当前页面窗口

请描述 script、script async 和 script defer 的区别。