1.src和href的区别？

src

source 源

使用场景

src指向外部资源的位置，src指向的内容会嵌入到文档中当前标签所在的位置

img标签
script标签

当浏览器解析到src引用时比如下载js脚本，会暂停浏览器的渲染，直到该资源下载完成并解析执行完成，才会继续html的渲染**「这也是建议将javascript脚本放在底部的原因」**

href

hypertext reference 超文本引用

使用场景

用来建立当前元素和文档之间的链接

link标签
a标签浏览器始别href引用的文档并对该文档进行下载，同时不会停止当前文档的处理，「这也是建议用link方式引入css而不用@import的原因」

@import属于css范畴，只能加载css，且需要网页全部加载完成以后才加载css。

总结

href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走。

2. 对 HTML 语义化的理解

语义化就是用正确的标签做正确的事儿。常见的语义化标签

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

优点：

对SEO友好，因为更有利于搜素引擎的爬虫
对开发者友好，结构更清晰，可读性更好

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

DOCTYPE是HTML5文档类型的声明，且必须声明在HTML⽂档的第⼀⾏。

作用是告知浏览器的解析器⽤什么⽂档标准解析这个html⽂档，浏览器解析器解析文档的解析类型一般有两种：

BackCompat：怪异模式，浏览器使⽤⾃⼰的怪异模式解析渲染⻚⾯。（如果没有声明DOCTYPE，默认就是这个模式）
CSS1Compat：标准模式，浏览器使⽤W3C的标准解析渲染⻚⾯

不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析。

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

如果没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

下图可以直观的看出三者之间的区别:

其中蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿色代表 html 解析。

defer 和 async 属性都是异步去加载外部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：

执行顺序: 多个带 async 属性的标签，不能保证加载的顺序，谁先下载完成谁执行；多个带 defer 属性的标签，按照加载顺序执行；
脚本是否并行执行：async 属性，表示后续文档的加载和执行与 js 脚本的加载和执是并行进行的，js脚本下载结束以后立即执行会阻塞html文档的解析；defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded 事件触发执行之前。
async 脚本如果在html文档解析完，脚本才下载结束，那就是在DOMContentLoaded触发之后执行async脚本，也就不会阻塞渲染。如果html文档还没解析完就下载好了，那就是DOMContentLoaded触发之前执行，也就会阻塞渲染。

外部样式表会不会阻塞渲染

样式表通常不会影响 html 文档解析。

对于外部样式文件而言，并不会影响到DOMCotentLoaded事件，它并不会等待外部样式文件加载完成。但是！！！，如果DOMContentLoaded所属的script之前出现的link样式，那么DOMContentLoaded等待样式加载完成。如下：

<link type="text/css" rel="stylesheet" href="style.css">
<script>
  document.addEventListener("DOMContentLoaded", function(){
      // ...
  });
</script>
复制代码

原因是浏览器猜测脚本可能会读取一些样式信息，如位置、颜色，显然脚本就需要等到样式的加载完成了。

4. html页面的生命周期

三个重要事件

DOMContentLoaded

浏览器已经加载完成HTML数据，并且构建了DOM树。但是如样式、图片之类的外部文件有可能仍未加载完成。所以，在这个事件的处理函数中为获取dom元素，以及初始化接口。

在遇到<script>标签之后，脚本会阻塞 DOMContentLoaded，浏览器将等待它们执行结束，因为脚本有可能修改页面的DOM，所以DOMContentLoaded是在解析完脚本以后才执行。

额外说明：
- 如果在样式后面有一个脚本，那么该脚本必须等待样式表加载完成。原因是，脚本可能想要获取元素的坐标和其他与样式相关的属性。
onload

浏览器已经加载完全部的HTML以及图片、样式等外部资源。
beforeunload 和 unload

beforeunload：浏览器窗口关闭或刷新触发，可以在此时设置modal提醒用户是否要关闭，以及保存数据等

unload：用户马上离开。此时仍可以处理一些操作，如发送统计数据等。

如果存在iframe，父iframe会在子iframe卸载前卸载。父beforeunload => 子beforeunload => 父unload => 子unload

4.常⽤的 meta 标签有哪些

<meta charset='UTF-8'> 元素提供有关页面的元信息，放在文档的头部，不包含内容，属性定义了与文档相关的键值对，不会显示在页面上，但对于机器是可读的。 <meta name="description" content="页面描述内容" />

思考：UTF-8是什么？

UTF-8是Unicode的一种编码方案，起初为了编码美国人搞出了编码集ASCII码（英文字母和二进制对照表），因为不包括中文字符中国人兼容ASCII码搞出了GBK（把汉字加了进去），Unicode就是为了统一所有国家不同的编码字符集而产生的一个标准的字符集，就是把字符根据unicode编码对照表编码成计算机可识别的二进制数字，把二进制数字解码成对应字符， UTF-8是Unicode一种用的最多的编码方案

5. HTML5 有哪些更新

HTML5是HTML最新的标准。

HTML5与HTML比较：

html没有语义化标签，而html5 添加了许多语义标签，使代码结构清晰，提高代码可读性，有利于SEO

如：header、nav、footer、main、artical、section等。 html无法在网页上动态的绘制图片，而 html5 新增了canvas画布，canvas绘制的图片放大后会失真，而SVG可绘制矢量图形。

H5 新增特性

<Canvas>、SVG -- 用于绘画的元素，canvas绘制的图片会失真而SVG绘制的不会失真。
<video> <audio> -- 用于播放视频和音频的媒体。
Drag 、Drop -- 用于拖放的。 <p dragable=true>表示p标签可拖动
Geolocation -- 用于获取地理位置。[Geolocation.getCurrentPosition()] (developer.mozilla.org/zh-CN/docs/…) 就是一个API接口
localStorage、sessionStorage -- 用于本地离线存储。
webSQL、IndexDB -- 前端数据库操作，由于安全性极低，目前h5已放弃。
web Worker -- 独立于其他脚本，不影响页面性能运行在后台的javascript。
webSocket(通信协议) -- 单个TCP连接上进行全双工通讯的协议。
新的特殊内容元素 -- 如：article、footer、header、nav、section。
新的表单控件类型 -- 如：date、time、email、url、search。

思考：

1.cookie、localStorage和sessionStorage 三者之间的区别？

前端开发的时候，在网页刷新的时候，所有数据都会被清空，这时候就要用到本地存储的技术，前端本地存储的方式有三种，分别是cookie，localstorage和sessionStorage

生命周期：

cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效

localStorage：除非被手动清除，否则将会永久保存。

sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。

存放数据大小：

cookie：4KB左右

localStorage和sessionStorage：可以保存5MB的信息。

http请求：

cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信

6. img 的 srcset 属性的作⽤？

H5中img有两个新属性，srcset和sizes, 响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的 srcset和size 属性

<img src="image-128.png"
     srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
     sizes="(max-width: 360px) 340px, 128px" />

其中 srcset 指定图片的地址和对应的图片质量。sizes 用来设置图片的尺寸零界点。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。

7. 怎么解决白屏问题（面试题）

1、加loading

2、骨架屏-- 骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容

7.首屏性能优化你是怎么做的（面试题）

首屏性能优化其实就是前端性能优化的一部分

webpack使用压缩，减小html css js 文件的大小，这样页面渲染的就快，就更快出页面
白屏时的loading动画
首屏加骨架屏
webpack 一些三方库使用cdn不打入包内
增加带宽（这个比较直接）
ssr 服务端渲染（Next.js框架）umi内置ssr只需开启插件

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

行内元素有：a span img input；
块级元素有：div ul ol li h1 h2 h3 h4 h5 h6 p；
空元素有 <img>、<input>、<link>、<meta>

行内元素和块级元素的区别？

行内元素不换行块级元素独占一行，行内元素宽度由内容决定，块级元素宽度自动填满父级元素宽度
块级元素可以设置 width, height属性，注意：块级元素即使设置了宽度，仍然是独占一行的。而行内元素设置width, height无效
块级元素可以设置margin 和 padding，行内元素的水平方向的padding和margin有效竖直方向无效
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包括行内元素，有几个特殊的块级元素只能包含行内元素，不能再包含块级元素：h1~h6、p、dt，块级元素不能放在标签 p 里面
行内元素的水平垂直居中都是设置外层块级元素的text-align和 line-height=height，因为行内元素没法设置宽高，块级元素水平居中

块级元素的水平居中，自身定宽且 margin: 0 ,auto

div p{margin:0 auto; width:500px} /*块级元素p一定要设置宽度， 才能相当于DIV父容器水平居中*/

块级元素的垂直居中，父盒子定宽，子块height = line-height

   `div{width:500px} /*DIV父容器设置宽度*/ div p{ height:30px; line-height:30px} /*块级元素p也可以加个宽度， 以达到相对于DIV父容器的水平居中效果*/`

9.说一下 web worker

在 HTML 页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完成后，页面才变成可响应。WebWorker 允许在主线程之外再创建一个 worker 线程，在主线程执行任务的同时，worker 线程也可以在后台执行它自己的任务，互不干扰。

这样就让 JS 变成多线程的环境了，我们可以把高延迟、花费大量时间的运算，分给 worker 线程，最后再把结果返回给主线程就可以了，因为时间花费多的任务被 web worker 承担了，主线程就会很流畅了！

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

**原理：**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: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 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 的离线储存资源进行管理和加载？

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

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

title与h1的区别

定义：
- <title>标题</title>是网站标题，一个页面只能有一个,始终在<head></head>块中使用
- h1是文章主题
作用：
- title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；
- h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的。

13 iframe 有那些优点和缺点？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。它能够将另一个 HTML 页面嵌入到当前页面中。每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录 (session history)和DOM 树。

优点：

用来加载速度较慢的内容（如广告）
可以使脚本并行下载
可以实现跨子域通信
重载时不用重载整个浏览器窗体，只需要重载其中一个小页面

缺点：

iframe 会阻塞主页面的 onload 事件
无法被一些搜索引擎所识别
会产生很多页面，不容易管理
不安全；（不安全）
SEO不友好
页面上的每个<iframe>都需要增加内存和其它计算资源，这是因为每个浏览上下文都拥有完整的文档环境

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 对象的属性发生变化，那么浏览器能够自动重现图形。

基本用法：

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

以<svg>根元素开始，通过它的一个元素比如<cricle />``<text>来绘制二维图形

其特点如下：

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

（2）Canvas：

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

基本用法：先用<canvas></canvas>创建一个固定大小的画布（默认宽高），然后用js代码找到这个渲染上下文，然后用ctx设置它的各种属性方法。

<canvas id="tutorial" width="150" height="150"></canvas>
var canvas = document.getElementById('tutorial');

if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }

其特点如下：

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

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

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

作用

用于定义文档的头部，它是所有头部元素的容器。
引用资源：脚本、样式表等。
描述文档：元信息、文档标题、在 Web 中的位置以及和其他文档的关系等
绝大多数文档头部包含的数据都不会真正作为内容显示给用户

常见标签

base
link
meta
script
style
title(唯一必需)

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

文档声明的作用：文档声明是为了告诉浏览器，当前HTML文档使用什么版本的HTML来写的，这样浏览器才能按照声明的版本来正确的解析。

<!Doctype html>的作用： <!Doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5 标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，我们需要避免此类情况发生。

严格模式与混杂模式的区分：

严格模式：又称为标准模式，指浏览器按照W3C标准解析代码；
混杂模式：又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；

区分：网页中的DTD，直接影响到使用的是严格模式还是浏览模式，可以说DTD的使用与这两种方式的区别息息相关。

如果文档包含严格的DOCTYPE ，那么它一般以严格模式呈现（严格 DTD ——严格模式）；
包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）；
DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现（DTD 不存在或者格式不正确——混杂模式）；
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

总之，严格模式让各个浏览器统一执行一套规范兼容模式保证了旧网站的正常运行。

18浏览器乱码的原因是什么？如何解决？---了解即可

产生乱码的原因：

基本就是编码和解码的方式不是同一个，或者网页头部没有在<meta charset='UTF-8'>,导致浏览器不能检测到编码方式导致乱码

网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码，反之也会出现乱码；
html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；
浏览器不能自动检测网页编码，造成网页乱码。

解决办法：

在html文件头加入

<head>
<meta charset="utf-8" />
</head>
复制代码

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

（1）渐进增强（progressive enhancement） ：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。

（2）优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

两者区别：

优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点则认为应关注于内容本身。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

20.说一下 HTML5 drag API---了解即可

当元素或者选择的文本被拖动时触发 drag 事件

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

offer收割机之HTML篇

1.src和href的区别？

src

使用场景

href

使用场景

总结

2. 对 HTML 语义化的理解

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

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

外部样式表会不会阻塞渲染

4. html页面的生命周期

三个重要事件

4.常⽤的 meta 标签有哪些

5. HTML5 有哪些更新

H5 新增特性

生命周期：

存放数据大小：

http请求：

6. img 的 srcset 属性的作⽤？

7. 怎么解决白屏问题（面试题）

7.首屏性能优化你是怎么做的（面试题）

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

9.说一下 web worker

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

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

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

13 iframe 有那些优点和缺点？

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

15 Canvas 和 SVG 的区别

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

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

18浏览器乱码的原因是什么？如何解决？---了解即可

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

20.说一下 HTML5 drag API---了解即可

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