HTML面试必备：攻克15个关键知识点
2024-02-12 21:26:10
前端开发的世界，HTML就像地基一样，看似简单，却支撑着整个网页的结构。虽然入门容易，但在面试中，一些看似基础的HTML知识点却常常成为考察的重点。很多开发者在实际项目中更多依赖框架和库，反而忽略了对HTML本身的深入理解。今天，我们就来一起梳理15个HTML面试必考知识点，帮你夯实基础，轻松应对面试官的提问。
1. DOCTYPE 的作用是什么？
DOCTYPE是Document Type Declaration的缩写，它位于HTML文档的第一行，用于告知浏览器该文档使用哪种HTML或XHTML规范。不同的规范对HTML元素的解析和渲染方式有所不同，声明DOCTYPE可以确保浏览器以正确的模式解析文档，避免出现兼容性问题。
2. HTML5 与 HTML4 的区别有哪些？
HTML5是HTML的最新版本，相比HTML4，它引入了许多新特性，例如：
- 语义化标签： 新增了
, - 增强型表单： 新增了日期、时间、颜色、邮箱等表单输入类型，以及表单验证功能，提升了用户体验。
- 多媒体支持： 新增了
- Canvas绘图： 新增了
- Web存储： 新增了localStorage和sessionStorage，可以在浏览器本地存储数据，减少服务器压力。
3. 简述一下你对 HTML 语义化的理解
HTML语义化指的是使用合适的HTML标签来表达网页内容的结构和含义，而不是仅仅关注网页的外观。例如，使用
标签表示页面主标题，使用
标签表示段落，使用
语义化HTML的好处有很多：
- 提升可访问性： 屏幕阅读器等辅助工具可以根据语义化标签理解网页内容，方便残障人士访问网页。
- 利于SEO： 搜索引擎可以根据语义化标签理解网页内容，提升网页排名。
- 提高代码可读性： 语义化标签使代码结构更清晰，易于维护。
4. meta viewport 是做什么用的，怎么写？
meta viewport标签用于控制网页在移动设备上的显示效果。它告诉浏览器如何缩放网页，以及是否允许用户缩放。
常见的meta viewport设置如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width表示将网页宽度设置为设备宽度。initial-scale=1.0表示初始缩放比例为1.0，即不缩放。
5. 说一下 HTML5 drag API
HTML5 drag API允许开发者实现网页元素的拖放功能。它提供了一系列事件和属性，用于控制拖放过程的各个阶段。
主要的拖放事件包括：
dragstart： 当元素开始被拖动时触发。drag： 当元素被拖动时持续触发。dragover： 当被拖动的元素在目标元素上方时触发。drop： 当被拖动的元素被放到目标元素上时触发。dragend： 当拖放操作结束时触发。
6. 你如何理解 Web Workers？
Web Workers 允许 JavaScript 脚本在后台运行，独立于主线程。这意味着耗时的操作不会阻塞主线程，从而提升网页的响应速度和用户体验。
Web Workers 的主要特点：
- 独立线程： Web Workers 在独立的线程中运行，不会阻塞主线程。
- 消息传递： Web Workers 与主线程通过消息传递进行通信。
- 限制访问： Web Workers 无法访问 DOM 和一些浏览器 API。
7. 谈谈你对 Canvas 的理解
Canvas 是 HTML5 新增的一个标签，它提供了一个绘图区域，可以使用 JavaScript 在上面绘制图形、动画和游戏。
Canvas 的主要特点：
- 位图绘图： Canvas 使用位图进行绘图，可以绘制像素级别的图形。
- JavaScript 控制： Canvas 的绘图操作完全由 JavaScript 控制。
- 灵活高效： Canvas 可以实现各种复杂的图形效果，并且性能较高。
8. WebSocket 如何工作？
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许客户端和服务器之间进行实时双向通信，无需轮询。
WebSocket 的工作流程：
- 客户端通过 HTTP 请求与服务器建立 WebSocket 连接。
- 连接建立后，客户端和服务器可以通过 WebSocket 连接发送和接收数据。
- 连接关闭时，客户端和服务器都会收到通知。
9. iframe 有哪些缺点？
iframe 允许在网页中嵌入另一个网页。它有一些缺点：
- SEO 不友好： 搜索引擎难以识别 iframe 中的内容。
- 安全性问题： iframe 中的内容可能存在安全风险。
- 性能问题： iframe 会增加网页加载时间。
- 可用性问题： iframe 中的内容可能难以访问。
10. 如何实现浏览器内多个标签页之间的通信？
浏览器内多个标签页之间的通信可以通过以下几种方式实现：
- localStorage： 一个标签页修改 localStorage 数据后，其他标签页可以通过监听
storage事件获取更新。 - Broadcast Channel： Broadcast Channel API 允许同源下的不同标签页、iframe、worker 之间进行通信。
- SharedWorker： SharedWorker 可以在多个标签页之间共享一个 worker 线程，从而实现通信。
- postMessage： 可以使用
postMessage方法向其他标签页发送消息，接收方通过监听message事件获取消息。
11. HTML5 的离线储存怎么使用，工作原理能不能解释一下？
HTML5 的离线存储主要通过以下两种方式实现：
- Application Cache： Application Cache 允许浏览器缓存网页资源，即使在离线状态下也能访问网页。
- localStorage 和 sessionStorage： localStorage 和 sessionStorage 可以在浏览器本地存储数据，即使关闭浏览器也不会丢失数据。
Application Cache 的工作原理：
- 在 HTML 文件中使用
manifest属性指定缓存清单文件。 - 浏览器加载网页时，会下载缓存清单文件中列出的资源并缓存到本地。
- 当用户再次访问网页时，浏览器会优先使用缓存中的资源，即使离线状态下也能访问网页。
12. 请一下 cookies，sessionStorage 和 localStorage 的区别？
cookies、sessionStorage 和 localStorage 都是浏览器本地存储数据的方式，但它们之间有一些区别：
| 特性 | cookies | sessionStorage | localStorage |
|---|---|---|---|
| 存储容量 | 4KB 左右 | 5MB 左右 | 10MB 左右 |
| 生命周期 | 可以设置过期时间，过期后自动删除 | 浏览器窗口关闭后自动删除 | 永久存储，除非手动删除 |
| 数据共享 | 可以跨标签页共享 | 仅限当前标签页 | 可以跨标签页共享 |
| 发送到服务器 | 每次请求都会发送到服务器 | 不会发送到服务器 | 不会发送到服务器 |
13. srcset 属性的用途是什么？
srcset 属性用于为 <img> 和 <source> 标签指定多个图像源，浏览器可以根据设备的屏幕分辨率和像素密度选择最合适的图像源进行加载。
例如：
<img src="image.jpg" srcset="image-small.jpg 320w, image-medium.jpg 640w, image-large.jpg 1280w">
浏览器会根据设备的屏幕宽度选择加载 image-small.jpg、image-medium.jpg 或 image-large.jpg。
14. 渐进式渲染是什么？
渐进式渲染是一种优化网页加载速度的技术，它可以让用户尽快看到网页内容，即使网页还没有完全加载完成。
常见的渐进式渲染技术包括：
- 懒加载： 只加载当前视口内的图片，当用户滚动页面时再加载其他图片。
- 预加载： 提前加载用户可能需要的资源，例如下一页的图片或脚本。
- 骨架屏： 在网页加载完成之前显示一个简单的骨架页面，让用户知道网页正在加载。
15. HTML 中的 lang 属性有什么作用？
lang 属性用于指定网页或网页元素的语言。它可以帮助浏览器和搜索引擎理解网页内容的语言，从而提供更好的用户体验。
例如：
<html lang="zh-CN">
表示整个网页的语言是简体中文。
常见问题解答
1. HTML5 新增了哪些表单元素？
HTML5 新增了以下表单元素：
emailurlnumberrangedatetimedatetime-localmonthweekcolorsearchtel
2. 如何使用 Canvas 绘制一个矩形？
可以使用 Canvas 的 fillRect() 方法绘制一个填充矩形，使用 strokeRect() 方法绘制一个空心矩形。
例如：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个填充矩形
ctx.fillRect(20, 20, 150, 100);
// 绘制一个空心矩形
ctx.strokeRect(200, 20, 150, 100);
3. 如何使用 WebSocket 发送消息？
可以使用 WebSocket 对象的 send() 方法发送消息。
例如：
const websocket = new WebSocket('ws://example.com/ws');
websocket.onopen = function(event) {
websocket.send('Hello, server!');
};
4. 如何使用 localStorage 存储数据？
可以使用 localStorage 对象的 setItem() 方法存储数据，使用 getItem() 方法获取数据。
例如：
// 存储数据
localStorage.setItem('username', 'John Doe');
// 获取数据
const username = localStorage.getItem('username');
5. 如何使用 Application Cache 缓存网页资源？
在 HTML 文件中使用 manifest 属性指定缓存清单文件。
例如：
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
缓存清单文件 cache.manifest 的内容如下：
CACHE MANIFEST
index.html
style.css
script.js
浏览器会缓存 index.html、style.css 和 script.js 这三个文件。
希望以上内容能够帮助你更好地理解HTML，并在面试中取得好成绩。记住，扎实的基础知识是成为优秀前端开发者的关键。
