前端面试---html（下）
Published on Feb 09, 2023, with 2 view(s) and 0 comment(s)
Ai 摘要：本文总结了HTML相关的面试题，包括离线缓存的原理与使用方法、浏览器对离线资源的管理、常见标签的区别（如title/h1、b/strong、i/em）、iframe的优缺点、label标签的作用、Canvas与SVG的区别、head标签的作用、文档声明的作用与严格/混杂模式的区别、浏览器乱码的原因与解决方法、渐进增强与优雅降级的区别，以及HTML5拖拽API的事件。这些知识点涵盖了HTML的基础与进阶内容，适合面试准备与知识回顾。

10，离线缓存

离线存储指的是:在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。 原理:html5的离线存储是基于一个新建的.appcache 文件的缓存机制（不是存储技术），通过这个文件上传的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器就会通过被离线的数据进行页面展示。

使用方法:

  • (1）创建一个和 html同名的manifest文件，然后在页面头部加入manifest属性:

<html lang="en" manifest="index.manifest">

  • (2)在cache.manifest文件中编写需要离线存储的资源:

CACHE MANIFEST
  #v0.11
  CACHE:
  js/app.js
  css/style.css
  NETWORK:
  resourse/logo.png
  FALLBACK:
  // offline.html

  • - ·CACHE:表示需要离线存储的资源列表，由于包含 manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。

  • - ·NETWORK:表示在它下面到出来的资源只有在在H线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是被离线存储的，也就是cache的优先级更高。

  • - ·FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html

  • (3）在离线状态时，操作window.applicationCache进行离线缓存的操作。如何更新缓存:

  • (1）更新manifest文件

  • (2）通过javascript操作

  • (3）清除浏览器缓存

注意事项：

  • (1）浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点5MB)。

  • (2)如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。

  • (3)引用manifest 的html 必须与manifest 文件同源，在同一个域下。

  • (4) FALLBACK中的资源必须和manifest 文件同源。

  • (5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。

  • (6）站点中的其他页面即使没有设置manifest 属性，请求的资源如果在缓存中也从缓存中访问。

  • (7)当manifest文件发生改变时，资源请求本身·也会触发更新。

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

  • (1）在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问页面，那么路i篮球就会根据manifest文件的内容下载相应的资源并进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器就会对比新的manifest文件与旧的manifest文件，如果文件没有发生变化，就不做如何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。

  • (2)离线的情况下，浏览器会直接使用离线存储的资源。

12. title与h1的区别、b与strong的区别、i与em的区别?

  • strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语 气都是通过粗体来实现的，而搜索引擎更侧重strong标签。

  • title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响

  • i内容展示为斜体，em表示强调的文本

13，iframe的优缺点

iframe元素会创建包含另外一个文档的内联框架（即行内框架）。

优点：

  • 可以用来加载速度较慢的内容（如广告）

  • 可以使脚本可以并行下载

  • 可以实现跨子域通讯

缺点：

  • iframe会阻塞主页面的onload事件

  • 无法被一些搜索引擎识别

  • 会产生很多页面，不容易管理

14，label的作用是什么？如何使用

  • label标签用来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上去。

使用方法1：

<label for="mobile">Number:</label>
<input type="text" id="mobile" />

使用方法2：

<label>Date: <input type="text"/></ label>

15，canvas和svg的区别

(1) SVG:

svg可缩放矢量图形（scalable vector graphics）是基于可扩展标记语言xml描述2d图形的语言，svg基于xml就意味着svg dom中的每个元素都是可用的，可以为某个元素附加JavaScript事件处理器。在svg中，每个被绘制的图形均被视为对象。如果svg对象的属性发生变化，那么浏览器能够自动重现图形。

其特点如下:

  • ·不依赖分辨率

  • ·支持事件处理器

  • ·最适合带有大型渲染区域的应用程序(比如谷歌地图)

  • ·复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快)

  • ·不适合游戏应用

(2) Canvas:

Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

其特点如下:

  • ·依赖分辨率

  • ·不支持事件处理器

  • ·弱的文本渲染能力

  • ·能够以.png或.jpg格式保存结果图像

  • ·最适合图像密集型的游戏，其中的许多对象会被频繁重绘

注:矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮 、大小和屏幕位置等届凿,

16. head标签有什么作用，其中什么标签必不可少?

标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。 文档的头部描述了文档的各种届性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 下面这些标签可用在 head 部分:,,,