本文介绍: 面试必备八股文!内容包含: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应用中实现拖拽和放置的交互操作。主要涉及到的事件包括dragstartdragenddragenterdragleavedragoverdrop

  • 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. 在目标区域的事件处理程序中处理dragenterdragleavedragoverdrop事件。

      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!

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

原文地址:https://blog.csdn.net/qq_67358181/article/details/135892787

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_63521.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!

发表回复

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