HTML

一、src和href的区别？

1. 请求资源类型不同：

   • src对资源的引用，将其指向的资源下载并应用到文档中，有img，script，iframe标签；
   • href超文本引用，建立当前元素和文档之间的链接，有link，a标签；

2. 作用结果不同：

   • src会替换当前内容；
   • href是用于在当前文本和引用资源之间确立联系；

3. 浏览器解析不同：

   • 浏览器在解析src时，会暂停其它资源下载和处理，直到将该资源加载，编译，执行完毕，图片和框架等也如此。 所以建议将js脚本放置在底部而非头部；
   • 浏览器在解析href时，会并行下载资源和处理当前文档，因此建议使用link方式加载css，而非@import方式。

引申：link和@import的区别？

1. link还可以定义RSS等其它事务，@import能可以加载css；
2. link引入css时，在页面载入时同时加载，@import需要页面完成载入以后再加载；
3. link是XHTML标签无兼容问题，@import低版本的浏览器不支持
4. link使用js控制DOM改变样式；@import不支持。

二、对HTML语义化的理解？

1. 含义：根据内容的结构化，选择合适的标签

2. 优点：

   • 对机器友好：带有语义的文字表现力更丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO（HTML语义化可以帮助搜索引擎更好地理解页面内容，从而提高页面排名，增加流量）。此外，语义类还支持读屏软件，根据文章可以自动生成目录；
   • 对开发者友好：语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发和维护。

3. 包括的标签有：header，nav，section，main，article，aside，footer

三、DOCTYPE全面解析

1. 含义：是一种通用标记语言的文档声明类型，它的主要作用是告诉浏览器的解析器，应该以什么样的文档类型定义来解析文档，不同的渲染模式会影响浏览器对CSS代码甚至js脚本的解析。它必须声明在文档第一行。 让浏览器进入标准模式，使用最新的HTML5标准来解析渲染页面；如果不写，浏览器就进入混杂模式，需避免。

2. 标准模式和怪异模式：浏览器渲染页面的两种模式，可用document.compatMode来获取：

   • CSS1Compat：标准模式（严格模式） ，是默认模式，浏览器按照W3C标准来解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面
   • BackCompat：怪异模式（混杂模式） ，浏览器使用自己的方式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

3. 如何区分两种模式：浏览器解析时到底使用严格模式还是混杂模式，与网页中的DTD直接相关。

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

4. 意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

5. 常见区别：

   • 严格模式下 —— W3C 标准的盒模型
   • 怪异模式下 —— IE 盒模型：border和padding在width里面

四、script标签中的defer和async的区别？

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

2. defer和async都是去异步加载外部的js脚本文件，它们都不会堵塞页面的解析，区别如下：

   • 执行顺序：多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行；
   • 脚本是否执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载是并行进行的，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

3. 引申：DOMContentLoaded事件：浏览器已经完全加载了HTML文件，并且DOM树已经生成好了，但是其它外部资源，如样式文件，图片，字体等并没有加载好

4. 举个栗子：当浏览器碰到 script 脚本的时候：

   • <script src="script.js"></script>

     没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

   • <script async src="script.js"></script>

     有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

   • <script defer src="myscript.js"></script>

     有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

五、常见的meta标签有哪些？

1. 含义：meta标签由name和content属性定义，用来描述网页文档的属性，比如网页的作者、网页描述、关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name

2. 常见的meta标签有：

   • charset：描述HTML文档的编码类型

   • keywords：页面的关键词

   • description：页面描述：

   • refresh：页面重定向和刷新：

   • viewport：适配移动端，可以控制视口的大小和比例：

     content参数有以下几种：

     • width=数值/device-width 宽度
     • height=数值/device-height 高度
     • initial-scale=1初始缩放比例
     • maximum-scale=2 最大缩放比例
     • minimum-scale=1 最小缩放比例
     • user-scalable=yes/no 是否允许用户缩放

   • robots：搜索引擎索引方式：

     content参数有以下几种：

     • all：文件将被检索，且页面上的链接可以被查询
     • none：文件将不被检索，且页面上的链接不可以被查询
     • index：文件将被检索
     • follow：页面的链接可以被查询
     • noindex：文件将不被检索
     • nofollow：页面上的链接不可以被查询

六、HTML5有哪些更新？

1. 语义化标签：header、nav、footer、article、section、aside

2. 媒体标签：

   • audio音频

     <audio src="" controls autoplay loop='true'></audio>

     属性：

     • controls控制面板
     • autoplay自动播放
     • loop循环播放

   • video视频

     <video src='' poster='imgs/aa.jpg' controls><video>

     属性：

     • poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
     • controls控制面板
     • width、height

   • source标签 因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。

     <video> <source src='aa.flv'></source><source src='aa.mp4'></source> </video>

3. 表单

   • 表单类型：

     • email：验证输入的邮箱地址是否合法
     • url：验证url
     • number：只能输入数字，其他的输入不了，自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值
     • serach：输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化
     • range：提供一个范围，可以设置max和min以及value，value属性可以设置为默认值
     • color：提供颜色拾取器
     • time：时分秒
     • data：日期选择年月日
     • datatime：时间和日期
     • datatime-local：日期时间控件
     • week：周控件
     • month：月控件

   • 表单属性：

     • placeholder：提示信息
     • autofocus：自动获取焦点
     • autocomplete="on/off" 使用前提：表单提交过，必须有name属性
     • require：要求输入框不能为空，必须有值才能够提交
     • pattern="" 里面写入正则模式，例如手机号pat="^(+86)?\d{10}$"
     • multiple：可以选择多个文件或者多个邮箱
     • form="form表单的ID"

   • 表单事件：

     • oninput 每当input里输入框内容发生变化时都会触发此事件
     • oninvalid当验证不通过时触发此事件

4. 进度条、度量器：

   • progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度，value表示已完成多少

   • meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持）

     • high/low：规定被视作高/低的范围
     • max/min：规定最大/小值
     • value：规定当前度量值

5. DOM查询操作：

   • document.querySelector()
   • document.querySelectorAll()

   它们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加#)

6. Web存储：

   • localStorage 没有时间限制的数据存储
   • sessionStorage 针对一个session的数据存储

7. 其他：

   • 拖放：抓取对象以后拖到另一个位置

     <img draggable="true" />

   • 画布：canvas元素使用js在网页上绘制图像。画布是一个矩形区域，可以控制其每一个像素。canvas拥有多种绘制路径、矩形、圆型、字符以及添加图像的方法

     <canvas id="myCanvas" width="200" height="100"></canvas>

   • SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准

   • 地理定位：Geolocation（地理定位）用于定位用户的位置。

8. 总结：

   • 新增语义标签：nav、header、footer、aside、section、article
   • 音频、视频标签：audio、video
   • 数据存储：localStorage、sessionStorage
   • canvas（画布）、Geolocation（地理位置）、websocket（通信协议）
   • input标签新增属性：placeholder、autocomplete、autofocus、required
   • history API：go、forward、back、pushstate

移除的元素有：

• 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
• 对可用性产生负面影响的元素：frame，frameset，noframes；

七、img的srcset属性的作用？

响应式页面中经常用到根据屏幕密度设置不同的图片，这是就用到了img标签的srcset属性。srcset属性用于设置不同屏幕密度下，img会自动加载不同的图片。用法如下：

< img src="img-1.png" srcset="img-2.png 2x" />

使用上面代码，就能实现在屏幕密度为1x的情况下加载img-1.png，屏幕密度为2x时加载img-2.png

按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x，2x，3x，4x四种，如果每张图片都设置四张图片，加载就会很慢。所以就有了新的srcset标准。代码如下：

<img src="img-1.png"

srcset="img-1.png 128w,img-2.png 256w,img-3.png 512w

sizes="(max-width:360px) 340px,128px />

其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于srcset中的w单位，可以理解为图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。（浏览器宽度达到256px，加载img-2）

sizes语法如下：

sizes="[media query] [length]],[media query] [length]..."

sizes就是默认显示128px，如果视区宽度大于360px，则显示340px

八、行内元素有哪些？块级元素有哪些？空元素有哪些？

1. 行内元素：a、b、span、img、input、select、strong；
2. 块级元素：div、ul、ol、li、dt、dd、h1-h6、p；
3. 空元素：即没有内容的HTML元素，空元素没有闭合标签。<br>,<hr>,<img>,<input>,<link>,<meta>；鲜见的有：<area>,<base>,<col>,<colgroup>,<command>,<embed>,<keygen>,<param>,<source>,<track>,

九、说一下web worker

1. 前言：单线程：在HTML页面中，如果执行脚本时，页面的状态是不可响应的，直到脚本执行完毕后，页面才变成可响应。

2. 作用：创建多线程环境：web worker为js创造多线程环境，允许主线程创建worker线程，将一些任务（如懒加载、文本分析、canvas图像绘制）分配给后者运行

3. 分类：专用线程：被创建它的脚本所使用（常用）；共享线程：可在不同脚本使用

4. 限制：

   a. 同源限制：分配给worker线程运行的脚本文件，必须与主线程的脚本文件同源；

   b. 文件限制：worker线程无法读取本地文件(file://)，会拒绝使用file协议创建worker实例，它所加载的脚本，必须来自网络

   c. DOM操作限制：worker线程所在的全局对象，和主线程不一样，区别在于：无法读取主线程所在网页的DOM对象；无法使用document、window、parent这些对象

   d. 通信限制：线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成，交互方法是postMessage和onMessage，并且在数据传递的时候，worker是使用拷贝的方式

   e. 脚本限制：worker线程不能执行alert()方法和confirm()方法，但可以使用XHTMLRequest对象发出AJAX请求，也可以使用setTimeout/setInterval等API

5. 基本API：

   const worker = new Worker('./worker.js',options);
   worker.postMessage // 向worker内部作用域发送消息，消息由任何js对象组成
   worker.onmessage // 当worker的父级接收到来自其worker的消息时，会在Worker对象上触发message事件
   worker.terminate // 立即终止worker，不会等到worker完成剩余操作，会立即停止
   worker.onerror // 当worker出现运行中错误时，onerror被调用
   ​
   worker.addEventListener('error',function(e) {
       console.log(e.message) // 可读性良好的错误消息
       console.log(e.filename) // 发生错误的脚本文件名
       console.log(e.lineno) // 发生错误时所在脚本文件的行号
   })
   ​
   // main页面中
   // 监听接收worker线程发的消息
   worker.onmessage = function(e) {
       console.log('主线程收到worker线程消息：', e.data)
   }
   // 向worker线程发送消息
   worker.postMessage('主线程发送hello world')
   ​
   // worker.js中
   // self 代表子线程自身，即子线程的全局对象
   self.addEventListener("message", function (e) {
     // e.data表示主线程发送过来的数据
     self.postMessage("worker线程收到的：" + e.data); // 向主线程发送消息
   });
   ​
   

6. Worker线程内部要加载其他脚本，可以使用 importScripts()

   // worker.js
   importScripts("constants.js");
   // self 代表子线程自身，即子线程的全局对象
   self.addEventListener("message", function (e) {
     self.postMessage(foo); // 可拿到 `foo`、`getAge()`、`getName`的结果值 
   });
   ​
   ​
   // constants.js
   const foo = "变量";
   function getAge() {
     return 25;
   }
   const getName = () => {
     return "jacky";
   };
   ​
   // 还可以同时加载多个脚本
   importScripts('script1.js', 'script2.js');
   

7. 实战：

   <script>
   const worker = new Worker('./worker.js')
   ​
   function calc() {
       const num = parseInt(document.getElementById('num').value)
       worker.postMessage(num)
   }
   ​
   worker.onmessage = function (e) {
       document.getElementById('result').innerHTML = e.data
   }
   </script>
   ​
   // ./worker.js
   function calc(num) {
     let result = 0
     let startTime = performance.now()
     // 计算求和（模拟复杂计算）
     for (let i = 0; i <= num; i++) {
       result += i
     }
     // 由于是同步计算，在没计算完成之前下面的代码都无法执行
     const time = performance.now() - startTime
     console.log('总计算花费时间:', time)
     self.postMessage(result)
   }
   ​
   self.onmessage = function (e) {
     calc(e.data)
   }
   ​
   

web worker是运行在后台的js，独立于其他脚本，不会影响页面的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会堵塞主线程了。

如何创建web worker：

1. 检测浏览器对于web worker 的支持性
2. 创建web worker文件（js，回传函数等）
3. 创建web worker对象

十、HTML5的离线存储怎么使用，工作原理是什么？

1. 定义：在用户没有与因特网连接时，可以正常访问站点或应用，在用户和因特网连接时，更新用户机器上的缓存文件。

2. 原理：将Web应用程序的核心文件(HTML、CSS、JavaScript等)缓存到客户端本地存储，以便在访问Web应用程序时无需从网络上下载，从而提高Web应用程序的性能和可靠性。

   在HTML文件的头部使用manifest属性引用清单文件，在清单文件中列出要缓存的文件。当Web应用程序首次加载时，浏览器会下载这些文件并将它们存储到本地缓存中。当Web应用程序下一次被打开时，如果网络连接不可用，浏览器将从本地缓存中获取需要的资源，从而避免了网络请求。

3. 使用场景：

   a、移动设备应用：HTML5离线缓存适用于移动设备应用，用户可以在不在线的情况下快速方便地访问Web应用程序。

   b、新闻网站、博客等：对于一些内容类型比较固定的站点，可以使用离线缓存将一些静态资源缓存到本地，减少对服务器的请求次数，提高页面访问速度和用户体验。

   c、游戏应用程序：游戏应用程序常需要加载大量的资源文件，在使用离线缓存后可以快速地从本地缓存中加载文件，提高游戏体验。

   d、网络教育平台：HTML5离线缓存适用于一些在线的教育平台以及具有固定内容的文档等，可以提升用户跨网络使用体验。

   e、电子商务平台：对于电子商务平台，可以将电商页面的基础数据、商品数据等内容通过离线储存到本地，以便在离线状态下能够查询商品信息，提升用户购物体验。

4. 使用步骤：

   ① 创建并配置缓存清单：创建缓存清单文件，包括CACHE（需要缓存的文件），NETWORK（只有在在线时才能被访问），FALLBACK（某个文件无法下载时使用哪个备用文件）

   CACHE MANIFEST
   ​
   CACHE:
   index.html
   css/style.css
   js/main.js
   ​
   NETWORK:
   *
   ​
   FALLBACK:
   /test.html /fallback.html
   

   ②关联缓存清单和HTML文件

   <!DOCTYPE html>
   <html manifest="/demo.appcache">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>HTML5离线缓存</title>
       <link rel="manifest" href="/demo.appcache" />
   </head>
   <body>
       ...
       <script src="jquery.min.js"></script>
       <script src="main.js"></script>
   </body>
   </html>
   

   ③使用js调用应用程序缓存对象，使用window.applicationCache对象来访问应用程序缓存

   var appCache = window.applicationCache;
   appCache.update();
   appCache.addEventListener('updateready', function(e){
     if (appCache.status == appCache.UPDATEREADY) {
       appCache.swapCache(); 
     }
   }, false);
   ​
   

5. 注意事项：

   ①缓存的资源必须在同一域名下。

   ②一旦您的浏览器实现了HTML5离线缓存，缓存的文件在客户端将一直保留着，除非您手动清除浏览器的缓存。

   ③如果应用程序涉及到修改缓存清单文件，浏览器将重新下载缓存清单文件和所有列出的文件。

   ④请确保您要缓存的资源文件与缓存清单文件中指向的URL（包括子目录和查询字符串）完全匹配，否则会导致离线缓存失效。

   ⑤由于离线缓存是在客户端进行的，因此不会影响服务器端缓存或CDN缓存。

   ⑥每个缓存在浏览器中的资源文件大小不能超过50M。

   ⑦对于很少更新的文件，如图片或视频，使用离线缓存可以帮助您减少对服务器的访问次数。但是对于经常变化的内容，如动态生成的页面或者一些需要更新的脚本，离线缓存不太适用。

   ⑧使用离线缓存时，应当在每个请求中添加一个特殊的HTTP头，以确保缓存清单文件及时更新，以避免应用程序脱离同步。

   例如：

   <html manifest="demo.appcache">
   <head>
     <meta http-equiv="CACHE-CONTROL" content="no-cache">
     ...
   </head>
   <body>
     ...
   </body>
   </html>
   ​
   

6. 最后，使用HTML5离线存储技术需要谨慎使用。虽然它可以帮助提高Web应用程序的性能和用户体验，但不适用于所有类型的Web应用程序。在使用HTML5离线存储技术之前，请仔细评估您的应用程序需要和性能需求，并选择正确的技术方案。

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

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

十二、title和h1的区别？b和strong的区别？i和em的区别

• strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只有一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签；
• title属性没有明确意义，只表示个标题，h1表示层次明确的标题，对页面信息的抓取有很大影响
• i内容展示为斜体，em表示强调的文本

十三、iframe的优缺点？

1. 介绍：前端的iframe（内联框架）是一种HTML元素，它允许你在网页中嵌入另一个网页或文档。通过使用iframe，你可以在一个网页中显示来自不同源或同一源的内容，这对于嵌入地图、视频、广告或其他外部资源非常有用。

2. 使用：

   嵌入外部网页： 最常见的用途是在你的网页中嵌入其他网站的内容。这可以用于显示其他网站的页面、地图、社交媒体小部件、外部应用程序或其他在线资源。

   <iframe src="https://www.example.com"></iframe>
   

   嵌入本地网页： 你可以使用iframe来嵌入同一网站内的其他页面或本地HTML文件。这对于在一个页面中显示多个内容块或小部件非常有用。

   <iframe src="other-page.html"></iframe>
   

   视频和音频嵌入： 你可以使用iframe来嵌入在线视频和音频播放器，例如YouTube、Vimeo、SoundCloud等。

   <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
   

   广告显示： 广告网络通常使用iframe来嵌入广告，以便在多个网站上显示广告内容。

   <iframe src="https://advertisements.com/advert"></iframe>
   

   安全隔离： 有时，你可能需要在网页中加载来自不同源的内容，但由于同源策略的限制，使用iframe可以在一定程度上实现安全隔离。

   跨域通信： 使用postMessage API，你可以在不同的iframe之间进行跨域通信，以实现数据传输和事件处理。

   多语言支持： 在多语言网站中，你可以使用iframe来嵌入不同语言版本的内容，以便用户切换语言。

   动态加载内容： 通过JavaScript，你可以动态创建和加载iframe，以便根据用户的交互或其他条件加载不同的内容。

3. iframe页面如何接收父级页面的参数？ 为了更灵活的使用iframe嵌套，iframe页面接收父级页面的参数，可以针对不同情况展示不同的内容。有几种方法可以实现这种参数传递：

   URL查询参数： 你可以将参数作为查询字符串附加到iframe的src属性中。iframe页面可以通过js来解析URL中的查询参数并使用它们。

   父级页面：

   < iframe src="iframe.html?param1=value1&param2=value2"></iframe>
   

   iframe页面：

   // 解析查询参数
   var urlParams = new URLSearchParams(window.location.search);
   var param1 = urlParams.get('param1');
   var param2 = urlParams.get('param2');
   

   postMessage API： 使用postMessage API，你可以将参数作为消息发送给iframe页面。这提供更灵活的方式来传递数据，包括跨域通信。

   父级页面：

   var iframe = document.getElementById('myIframe');
   iframe.contentWindow.postMessage({ param1: 'value1', param2: 'value2' }, 'https://example.com');
   

   iframe页面：

   window.addEventListener('message', function(event) {
     if (event.origin === 'https://example.com') {
       // 处理从父级页面发送的消息
       var data = event.data;
       var param1 = data.param1;
       var param2 = data.param2;
     }
   });
   

   Cookie： 如果iframe和父级页面位于同一域名下，你可以使用Cookie来在它们之间共享数据。请注意，这只适用于同一域名的情况。

   父级页面：

   document.cookie = 'param1=value1; path=/';
   document.cookie = 'param2=value2; path=/';
   

   iframe页面：

   // 从Cookie中读取参数
   var param1 = getCookie('param1');
   var param2 = getCookie('param2');
   

4. 优点和缺点：

   优点：用来加载速度较慢的内容（广告）；可以使脚本并行下载；可以实现跨子域通信

   缺点：iframe会堵塞主页面的onload事件；无法被一些搜索引擎识别；会产生很多页面，不容易管理

十四、label标签的作用

1. 概念：label标签为input元素定义标注

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

3. 使用方法：

   • label直接包括input表单：

     <label>用户名：<input type="radio" name="username" value="请输入用户名"/> </label>

   • for属性和表单的id关联，规定label和哪个表单元素绑定：

     <label for="sex">男<label>

     <input type="radio" name="sex" id="sex"/>

十五、Canvas和SVG区别

1. SVG可缩放矢量图形，是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML意味着SVG DOM中每个元素都是可用的，可以为某个元素添加JS事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生改变，那么浏览器能够自动重现图形。

    <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
       <rect width="100%" height="100%" fill="lightblue"
           onclick="alert('Rectangle!')" />
       <circle cx="100" cy="50" r="40" fill="orange" 
           onclick="alert('Circle!')" />
    </svg>   

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

   var canvas = document.querySelector("canvas");
   var ctx = canvas.getContext("2d");
   function img() {
       var imgObj = new Image();
       imgObj.src = './nanji.png'
       imgObj.onload = function() {
           ctx.drawImage(imgObj,100,100,300,300)
       }
   }
   img();
   

3. 比较：

	canvas	svg
功能	简便，2D绘图API	功能丰富，各种图形，动画
特点	像素，脚本驱动，不可操作	矢量，XML，可操作
性能	适合小面积	适合大面积
文件格式	.png .jpg	.svg
分辨率	依赖分辨率	不依赖分辨率
事件处理	不支持	支持
应用范围	适合图像密集型的游戏，许多对象会被频繁重绘	适合大型渲染区域的应用程序，如谷歌地图

十六、head标签有什么作用，其中什么标签必不可少？

1. head标签用于定义文档的头部，是所有头部元素的容器

2. head标签描述了文档的各种属性和信息，包括文档的标题，在Web中的位置以及和其他文档的关系。绝大多数文档头部包含的数据都不会真正作为内容显示给读者

3. head标签包括：<base>,<link>,<script>,<style>,<title>

   其中<title>定义文档的标题，是head部分中唯一必需的元素

十七、浏览器乱码原因？如何解决？

1. 原因：

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

2. 解决办法：

   • 使用软件编辑HTML网页内容：如VS code底部状态栏可以看到当前文件的编码，确保和网页设置一致；
   • 如果网页设置编码是 gbk ，而数据库储存数据编码格式是 UTF-8，此时需要在程序查询数据库显示数据前进行程序转码；

   // 在写数据库连接文件时，写成：
   $conn = mysql_connect("$host","$user","$password");
   
   mysql_query("SET NAMES 'UTF8'"); //将查询数据转码为utf8
   mysql_select_db("$database",$conn);
   // 然后在做页面时，注意这句：
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       
   // 同样的，如果一开始写数据库连接文件时写成：
   mysql_query("SET NAMES 'GBK'"); //将查询数据转码为GBK
   // 那页面也要相应变成：
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   

   • 如果浏览器浏览的时候出现乱码，在浏览器中找到转码编码的菜单进行转换：谷歌浏览器中浏览需要转码的网页时，点击右上角“三横”图标选择“工具”-->“编码”即可选择切换网页编码达到让浏览器浏览此网页不是乱码。

十八、渐进增强和优雅降级区别

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

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

3. 区别：

   • 优雅降级更注重现代浏览器的性能和功能，并在必要时提供降级方案。渐进增强更注重网站的基础功能，并为现代浏览器提供额外的优化和功能；
   • 优雅降级可能会导致在旧版浏览器或设备上出现问题，如果没有提供降级方案，网站可能出现错误或根本无法使用；渐进增强可以确保网站在各种浏览器和设备上都能够良好运行，但是在现代浏览器上无法充分利用浏览器的性能和功能；

十九、说一下HTML5 drag API

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

拖拽过程：

1. 被拖拽元素：

   • 设置 draggable = true
   • 添加dragstart事件监听
   • 在监听事件中设置拖拽数据

2. 目标元素：

   • 监听dragover事件，事件中调用 preventDefault
   • 监听drop事件，处理对应的逻辑

3. dataTransfer对象有getData()和setData()两个主要方法，操作dataTransfer中携带的数据：

   //手动设置数据，format是指格式
   event.dataTransfer.setData(format, data);
   //获取数据
   event.dataTransfer.getData(format);
   //清除数据
   event.dataTransfer.clearData([format])
   

文章借鉴：「2021」高频前端面试题汇总之HTML篇 - 掘金 (juejin.cn)