代码探索者

这个屌丝很懒，什么也没留下！

热门标签

面试 HTML 框架八股文十问十答第一期

作者：代码探索者 | 2024-01-29 16:36:12

踩

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）src和href的区别

src和href的区别：
- src（source）：
  - 用于外部资源的引入，比如<script>标签的src属性用于引入外部JavaScript文件。
  - 浏览器会根据src的值发起请求，并执行相应的资源。
  - 用于替代内嵌内容。
- href（hypertext reference）：
  - 用于建立当前元素与外部资源之间的关系，比如<link>标签的href属性用于引入外部样式表。
  - 浏览器不会像src一样去获取资源，而是根据href的值建立元素与外部资源的关联。
  - 用于链接到外部资源，例如CSS文件或超链接。

2）对HTML语义化的理解

HTML语义化是指在编写HTML代码时，使用具有含义的标签，使文档结构清晰、易读、有助于理解。语义化的优点包括：

提升可访问性： 有意义的标签可以提高页面在辅助技术（如屏幕阅读器）中的表现，使页面更容易理解。
搜索引擎优化（SEO）： 搜索引擎能够更好地理解文档结构，提高网页在搜索结果中的排名。
便于维护： 具有语义的HTML使代码更易于理解和维护，降低团队合作的难度。
跨平台兼容性： 语义化的HTML有助于在不同设备和平台上获得一致的显示效果。

3）DOCTYPE(⽂档类型) 的作⽤

DOCTYPE声明用于指定HTML文档的版本和类型，告诉浏览器使用哪个HTML规范来解析文档。它的作用包括：

触发标准模式： 通过正确声明DOCTYPE，可以让浏览器以标准模式（standards mode）来渲染页面，确保浏览器按照规范进行渲染。
确保浏览器正确解析文档： DOCTYPE声明告诉浏览器使用哪个HTML版本的规范解析文档，以确保正确显示页面。
提高浏览器渲染性能： 标准模式下的渲染更符合规范，有助于提高页面的性能。

例子：<!DOCTYPE html>

4）script标签中defer和async的区别

defer：
- 告诉浏览器立即下载文件，但延迟执行脚本，即在文档解析完成后才执行。
- 多个带有defer属性的脚本按照它们在文档中的顺序执行。
- 适用于脚本之间没有依赖关系，且需要在文档解析完成后执行的情况。
async：
- 告诉浏览器立即下载文件，下载完成后立即执行脚本，不等待其他脚本和文档解析。
- 多个带有async属性的脚本不能保证执行顺序，谁先下载完成就先执行谁。
- 适用于独立的脚本，彼此之间没有依赖关系。

使用示例：

<script defer src="script1.js"></script>
<script async src="script2.js"></script>
1
2

5）常⽤的meta标签有哪些

<meta charset="UTF-8">： 指定文档使用UTF-8字符集。
<meta name="viewport" content="width=device-width, initial-scale=1.0">： 针对移动设备设置视口，以确保页面在不同设备上的显示效果良好。
<meta name="description" content="描述内容">： 提供页面的描述，用于搜索引擎显示搜索结果摘要。
<meta name="keywords" content="关键词1, 关键词2, ...">： 指定页面的关键词，有助于搜索引擎优化。
<meta name="author" content="作者">： 指定页面的作者信息。
<meta http-equiv="X-UA-Compatible" content="IE=edge">： 设置IE浏览器使用最新的引擎渲染页面。
<meta name="robots" content="index, follow">： 控制搜索引擎爬虫的行为。

这些meta标签有助于提高网页的可访问性、搜索引擎优化和用户体验。

6）HTML5有哪些更新

HTML5引入了许多新特性和API，其中一些主要的更新包括：
- 语义化标签： 引入了一系列新的语义化标签，如<header>、<nav>、<article>、<section>、<footer>等，以更清晰地描述文档结构。
- 多媒体支持： 新增了<audio>和<video>标签，提供原生的音频和视频支持。
- Canvas绘图： 引入了<canvas>标签，使得通过JavaScript脚本可以进行动态绘图。
- 新表单特性： 引入了一些新的表单元素和属性，如<input type="date">、<input type="email">、<input type="url">等，以及placeholder、required等属性。
- 本地存储： 提供了localStorage和sessionStorage，用于在客户端存储数据。
- Web Workers： 支持在后台运行的多线程脚本，提高前端性能。
- WebSockets： 提供了基于WebSocket协议的API，支持实时双向通信。

7）img的srcset属性的作⽤？

srcset属性是<img>标签的一个属性，用于指定多个图像源，以便根据不同的屏幕尺寸和分辨率选择最合适的图像进行显示。主要作用包括：

响应式图像： 根据设备的屏幕尺寸和分辨率，选择合适的图像，以优化页面加载速度和显示效果。
节省带宽： 避免在高分辨率设备上加载过大的图像，节省用户的带宽和提高页面加载性能。
提高用户体验： 显示适合设备屏幕的图像，提高用户体验和页面的可读性。

示例：

<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" alt="描述">
1

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

行内元素：
- <span>、<a>、<strong>、<em>、<img>、<br>等。
- 默认在一行内显示，不会独占一行，只占据自身的宽度。
块级元素：
- <div>、<p>、<h1>到<h6>、<ul>、<ol>、<li>等。
- 默认独占一行，占据整个可用的宽度。
空(void)元素：
- 指没有内容的元素，只有一个开始标签，没有结束标签。
- 如<br>、<img>、<input>、<hr>等。

9）说一下 web worker

Web Worker是HTML5引入的一项技术，允许在浏览器中创建后台线程，使得脚本能够在主线程之外运行。主要特点包括：

多线程执行： 允许在后台线程中执行脚本，避免阻塞主线程，提高页面性能和响应速度。
独立的全局对象： Web Worker拥有自己独立的全局对象，与主线程的全局对象相互独立，无法直接访问主线程中的变量和DOM。
通过消息传递通信： 主线程和Web Worker之间通过消息传递进行通信，通过postMessage和onmessage实现。
不可操作DOM： Web Worker无法直接操作DOM，主要用于处理计算密集型任务和异步操作。

示例：

// 主线程
const worker = new Worker('worker.js');
worker.postMessage('Hello from main thread!');
worker.onmessage = (event) => {
  console.log('Received message from Web Worker:', event.data);
};

// Web Worker (worker.js)
onmessage = (event) => {
  console.log('Received message in Web Worker:', event.data);
  postMessage('Hello from Web Worker!');
};
1
2
3
4
5
6
7
8
9
10
11
12

10）HTML5的离线储存怎么使用，它的工作原理是什么

HTML5的离线储存通过Application Cache实现。使用离线储存，可以使网页在没有网络连接时仍然能够访问并加载。使用步骤包括：

创建一个Manifest文件： 在Manifest文件中列出需要离线存储的资源，如HTML文件、CSS、JavaScript、图片等。
在HTML文件中引用Manifest文件： 在HTML文件的<html>标签中通过manifest属性引用Manifest文件。

<!DOCTYPE html>
<html manifest="example.appcache">
<!-- 页面内容 -->
</html>
1
2
3
4

Manifest文件示例（example.appcache）：

CACHE MANIFEST
# 版本号
# 注释行，以#开头

# 明确指定需要缓存的资源
CACHE:
/css/style.css
/js/script.js
/images/logo.png

# 明确指定需要在线获取的资源
NETWORK:
/api/data

# 明确指定不缓存的资源
FALLBACK:
/offline.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

浏览器首次访问页面时，会下载Manifest文件中列出的资源，并将它们存储在离线缓存中。
之后，如果用户再次访问页面且处于离线状态，浏览器将从离线缓存中加载页面所需的资源，而不需要发起网络请求。
如果资源在离线缓存中发生变化，浏览器会在下一次在线访问时检测到，并更新离线缓存中的资源。
注意，Manifest文件中的每一行都可能以特定的符号开头，如CACHE、NETWORK、FALLBACK，它们分别表示缓存的资源、需要在线获取的资源和指定的备用页面。

使用HTML5离线储存有助于提高应用程序的性能和用户体验，特别是在网络连接不稳定或者处于离线状态时。然而，也要注意谨慎使用，确保及时更新资源，以防止用户访问过期或过时的内容。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】

面试 HTML 框架八股文十问十答第一期