当前位置：
  1. 首页
  2. html
  3. 正文
本文介绍: 面试必备八股文！内容包含：Java基础、Java框架、Git命令、JVM、多线程、消息队列、微服务、Linux、数据库、Redis缓存、算法、Vue、React、前端性能优化等八股文。

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

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

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

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

1）浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

HTML5提供了离线储存的功能，使用<html>元素的manifest属性来定义一个包含需要离线访问的资源清单。浏览器会下载这些资源并缓存它们，以便在离线状态下也能访问网页。浏览器会自动检查清单文件是否有更新，如果有更新，会重新下载资源。

  • 启用离线缓存： 在HTML文档中，通过添加<html>标签的manifest属性来启用离线缓存。例如：<html manifest="myapp.appcache">

  • 创建清单文件： 清单文件是一个文本文件，包含了需要离线访问的资源列表。文件中的每一行都是一个资源的URL。例如：

    CACHE MANIFEST
/css/styles.css
/images/logo.png
/js/scripts.js

  • 浏览器缓存管理： 浏览器会自动下载清单文件和其中列出的资源，并缓存在本地。在离线状态下，浏览器会使用缓存中的资源来加载网页。如果清单文件发生更改，浏览器会重新下载资源。

2）title与h1的区别、b与strong的区别、i与em的区别？

  • <title>与<h1>的区别：
    • <title>用于定义网页的标题，显示在浏览器的标题栏或标签页上，不直接显示在页面内容中。
    • <h1>是HTML的标题标签，用于定义页面的主标题，直接显示在页面内容中，通常是页面的最重要的标题。
  • <b>与<strong>的区别：
    • <b>标签是用于文本粗体显示，但没有语义强调，仅用于视觉呈现。
    • <strong>标签也用于文本粗体显示，但具有强烈的语义含义，表示文本的重要性，通常被浏览器或屏幕阅读器以不同方式呈现，如加重显示或读音强调。
  • <i>与<em>的区别：
    • <i>标签用于文本斜体显示，但没有语义强调，仅用于视觉呈现。
    • <em>标签也用于文本斜体显示，但具有强烈的语义含义，表示文本的强调或重要性，通常被浏览器或屏幕阅读器以不同方式呈现，如斜体、加重显示或读音强调。

3）iframe 有那些优点和缺点？

优点：
  • 页面嵌套： 可以嵌套其他网页，实现页面的模块化和复用。
  • 并行加载： iframe可以并行加载嵌套页面，提高页面加载性能。
  • 独立性： 嵌套页面的内容和样式可以相对独立，不受外部页面影响。
  • 实现一些特殊功能： 可以用于嵌入地图、视频、广告等外部内容。
缺点：
  • 性能开销： 每个iframe都需要额外的资源加载和内存消耗，可能导致页面变得臃肿和加载变慢。
  • 安全问题： 如果不谨慎，可以被用于跨站脚本攻击（XSS）或点击劫持攻击。
  • 不利于SEO： 嵌套页面的内容可能对搜索引擎优化不友好，搜索引擎难以解析和索引。
  • 复杂性： 多个嵌套的iframe可能增加页面的维护和调试复杂性。

4）label 的作用是什么？如何使用？

<label>元素用于为表单控件提供标签文本，提升表单的可访问性和用户体验。它的作用是使用户能够点击标签文本来聚焦或选择相应的表单控件，而不仅仅依赖于鼠标点击控件本身。

使用方式：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

上述代码中，for属性指定了与表单控件关联的id，这样用户点击”用户名：”文本时，文本框会获得焦点。这提高了表单的可用性，特别是在移动设备上，用户更容易点击标签文本。

5）Canvas和SVG的区别

Canvas和SVG都是用于图形绘制的HTML5元素，但它们有一些重要的区别：

  • 绘图方式：

    • Canvas： 使用Canvas是基于位图的绘图，通过JavaScript代码直接绘制像素，一旦绘制完成，图形元素不能被直接访问或编辑。
    • SVG： 使用SVG是基于矢量图形的绘图，图形以文本形式描述，可以被DOM访问和操作，容易修改和动画。

  • 性能和复杂性：

    • Canvas： 适合绘制复杂的位图图像，性能较高，但在需要交互性和动画时需要更多的编程工作。
    • SVG： 适合绘制简单的矢量图形和图表，易于操作和动画，但对于复杂图形可能性能较差。

  • Canvas： 在Canvas中，绘制的图形是基于像素的，因此在缩放时可能会失真。Canvas的分辨率通常固定。

  • SVG： SVG是矢量图形，可以无损地缩放，保持图形的清晰度。适合在不同屏幕尺寸和分辨率下显示。

事件处理：

  • Canvas： 对于Canvas上的图形元素，事件处理相对较复杂，需要通过JavaScript代码手动检测鼠标点击位置等。
  • SVG： SVG中的图形元素是DOM元素，可以直接添加事件处理程序，更容易实现交互性。

适用场景：

  • Canvas： 适合需要实时绘制和处理大量像素的图形，如游戏、图像编辑器等。
  • SVG： 适合静态图形、图表、可缩放的图标和需要交互性的场景。

代码结构：

  • Canvas： Canvas绘图主要通过JavaScript脚本实现，代码较为复杂，包含大量的绘图API调用。
  • SVG： SVG是XML格式的文本，直接嵌入HTML中，易于理解和编辑。

总体而言，Canvas和SVG各有优势，选择取决于具体应用场景和需求。Canvas适用于复杂的位图图形和实时绘制，而SVG适用于矢量图形和需要交互性的场景。在一些应用中，它们也可以结合使用，根据需要选择不同的技术。

6）head 标签有什么作用，其中什么标签必不可少？

<head>标签用于定义HTML文档的头部，包含了一些元信息，而不是直接展示在页面上的内容。其中一些重要的子标签包括：

  • <title>： 定义网页的标题，显示在浏览器的标题栏或标签页上。

  • <meta>： 提供元信息，如字符集、关键词、描述等。例如：

    <meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="This is a description of the webpage.">

  • <link>： 引入外部资源，通常用于引入样式表（CSS），图标等。

  • <style>： 内部样式表，用于定义文档的样式。

  • <script>： 用于引入外部脚本文件或内部JavaScript代码。

  • <base>： 设置页面中所有相对链接的基准URL。

其中，<title>标签是 <head> 中必不可少的标签，因为它定义了网页的标题，对搜索引擎优化（SEO）和用户体验都很重要。

7）文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义?

文档声明（Doctype）:
文档声明告诉浏览器使用哪种HTML或XML规范解析页面。在HTML中，<!DOCTYPE html>是HTML5的文档声明，它必须出现在HTML文档的最开始，用于激活浏览器的标准模式。

严格模式与混杂模式：

  • 严格模式（标准模式）： 当文档声明存在且正确时，浏览器以严格模式解析页面。在严格模式下，浏览器会按照HTML和CSS的最新标准来解析和渲染页面，确保更一致的行为。
  • 混杂模式（怪异模式）： 当文档声明缺失或不正确时，浏览器以混杂模式解析页面。混杂模式下，浏览器会尝试向后兼容，但可能导致不同浏览器的行为不一致。

意义：

  • 使用文档声明能够确保浏览器按照规范来解析页面，减少兼容性问题。
  • 严格模式有助于开发者编写更标准、一致的代码，提高页面的可维护性和可靠性。

8）浏览器乱码的原因是什么？如何解决？

浏览器乱码的原因：

  • 字符集不一致： HTML文档中的字符集与浏览器解析时使用的字符集不一致。
  • 未设置字符集： 缺少<meta charset="UTF-8">等元信息，导致浏览器无法正确解析字符集。
  • 服务器响应头不正确： 服务器返回的Content-Type头信息未正确设置字符集。
  • 文件本身编码问题： 文本文件的实际编码与声明的字符集不匹配。

解决方法：

  • 设置正确的字符集： 在HTML文档的<head>中添加<meta charset="UTF-8">，确保字符集一致。
  • 服务器端设置： 确保服务器响应头的Content-Type中包含正确的字符集信息。
  • 检查文件编码： 使用文本编辑器确认文件编码与声明的字符集一致。

9）渐进增强和优雅降级之间的区别

渐进增强（Progressive Enhancement）：
渐进增强是一种设计理念，其核心思想是从基本功能出发，逐步增加更高级的功能和样式，以确保在各种环境和设备上都有可用的基本体验。即先确保核心功能在所有环境中可用，然后再逐步添加更复杂的功能。

优雅降级（Graceful Degradation）：
优雅降级是另一种设计理念，其思想是首先构建完整的、高级的功能，然后在不同的环境中逐步降低功能，以适应较低级的浏览器或设备。即先构建富有功能的体验，然后在不支持的环境中进行降级，以确保基本功能的可用性。

区别：

  • 渐进增强强调从简单到复杂的逐步增加，着眼于确保核心功能在所有环境中都可用。
  • 优雅降级强调从复杂到简单的逐步降级，着眼于在高级环境中提供更富有功能的体验。

10）说一下 HTML5 drag API

HTML5提供了拖放API（Drag and Drop API），用于在Web应用中实现拖拽和放置的交互操作。主要涉及到的事件包括dragstart、dragend、dragenter、dragleave、dragover和drop。

  • dragstart： 拖动开始时触发，可以在事件处理程序中设置拖动的数据。

  • dragend： 拖动结束时触发，无论拖动是否成功都会触发，用于清

  • 理一些状态或执行清理操作。

    • dragenter： 当被拖动的元素进入目标区域时触发，用于标识目标区域。
    • dragleave： 当被拖动的元素离开目标区域时触发，用于清除标识或进行其他操作。
    • dragover： 在被拖动的元素在目标区域内移动时触发，通常需要阻止默认行为以允许放置。
    • drop： 当被拖动的元素在目标区域内释放时触发，用于处理放置的操作。

    基本使用步骤如下：

    1. 设置元素的draggable属性为true，使其可拖动。

      <div draggable="true" ondragstart="dragStart(event)">Drag me</div>

    2. 在dragstart事件处理程序中设置拖动的数据。

      function dragStart(event) {
    event.dataTransfer.setData("text/plain", "Hello, world!");
}

    3. 在目标区域的事件处理程序中处理dragenter、dragleave、dragover和drop事件。

      function allowDrop(event) {
    event.preventDefault(); // 阻止默认行为
}

function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("text/plain");
    // 处理放置的操作
}

    这样，通过使用拖放API，可以实现在Web应用中的元素拖拽和放置的交互。

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

已 300 + Star！

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

显示所有内容
上一篇 Jmeter性能测试： 基于JDK 21 安装 Jmeter 5.6.3
下一篇 苹果m1、m2安装blender GIS，解决not Imageio 报错

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。