前端面试题系列文章：
- 【1】备战前端实习面试之HTML篇
- 【2】备战前端实习面试之CSS篇
- 【3】备战前端实习面试之JavaScript篇
- 【4】备战前端实习面试之React篇
- 【5】备战前端实习面试之Vue篇
- 【6】备战前端实习面试之Node.js篇
- 【7】备战前端实习面试之浏览器篇
- 【8】备战前端实习面试之性能优化篇
- 【9】备战前端实习面试之计算机网络篇
- 【10】备战前端实习面试之手写代码篇
- 【11】备战前端实习面试之代码输出结果篇
HTML
一、html 常用的标签
h、p、hr、br、div、span、ul li、ol li、img、a、input、label、textarea、select、form、head、nav、footer、article、section、aside、audio、video
二、html 新特性
新增语义化标签
header头部、footer底部、nav导航栏、article主要内容、aside侧边栏、section区块（有语义化的div）、meau菜单新增媒体元素
①audio：音频<audio src='' controls autoplay loop='true'></audio>属性：
- controls 控制面板
- autoplay 自动播放
- loop=‘true’ 循环播放
②video：视频
属性：<video src='' poster='imgs/aa.jpg' controls></video> - poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一帧画面，当然通过 poster 也可以自己指定。
- controls 控制面板
- width
- height
- 新增用于绘画的 canvas 属性
- 新增本地存储方式：
sessionStorage、localStorage - 新的技术：
webworker、websocket - 新增表单控件：
calendar、date、time、email、url、search
三、对语义化的理解
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），也就是说用正确的标签做正确的事。
好处：
- 对开发者友好，让人容易理解，利于代码可读性
- 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO
四、说说 web worker
web worker 的作用是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，然后将一些任务分配给其运行。
在主线程运行的同时，Worker 线程在后台运行，两者互不干扰，等到 Worker 线程完成任务后就将结果返回给主线程。这样的好处是：一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程就会很流畅，不会被阻塞或拖慢（通过 postMessage 将结果传回到主线程即可）。
Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。
这里有几个注意点：
- 同源限制
分配给 Worker 线程的脚本文件，必须和主线程脚本文件同源。 - 脚本限制
Worker 线程不能执行alert()方法和confirm()方法，但可以使用XMLHttpRequest对象发出AJAX请求。 - DOM 限制
Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是 Worker 线程可以使用navigator对象和location对象。 - 通信联系
Worker 线程和主线程不在同一个上下文环境，不能直接通信，必须通过消息完成。 - 文件限制
Worker 线程无法读取本地文件，即不能打开本机的文件系统，它所加载的脚本，必须来自于网络。
五、HTML5 的离线储存的工作原理是什么？该怎么使用？如何进行管理和加载？
离线存储指的是：在用户没有连接网络时，可以正常访问站点或应用，当连接上网络后，更新用户机器上的缓存文件。
原理：html5 的离线缓存是基于一个新建的 .appcache 文件的缓存机制，即通过这个文件上的解析清单 离线缓存资源。之后当网络在离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
使用方法：
- 首先要创建一个和
.html文件同名的.manifest文件，然后在页面头部插入manifest属性：<html lang="en" manifest="index.manifest"> - 在
cache.manifest文件中编写需要离线存储的资源：CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
- CACHE: 表示需要离线存储的资源列表。由于包含
.manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。 - NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
- FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他。比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。
- 在离线状态时，操作 window.applicationCache 进行离线缓存的操作。
更新缓存的方案：理所当然的就是更新 .manifest 文件
管理和加载：
- 在线情况下，浏览器发现 html 头部有
manifest属性，它会请求.manifest文件，如果是第一次访问页面，那么浏览器就会根据.manifest文件的内容下载相应的资源并进行离线存储；如果已经访问过页面并进行过离线存储，那么浏览器会使用离线的资源加载页面，然后对比新旧.manifest文件，若文件发生改变就会重新下载文件中的资源并进行存储。 - 离线情况下，浏览器会直接使用离线存储的资源加载页面。
注意事项：
（1）浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
（2）如果 .manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
（3）引用 .manifest 的 html 必须与 .manifest 文件同源，在同一个域下。
（4）FALLBACK 中的资源必须和 .manifest 文件同源。
（5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
（6）站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。
（7）当 .manifest 文件发生改变时，资源请求本身也会触发更新。
六、DOCTYPE（文档类型）的作用？标准模式与兼容模式各有什么区别?
!DOCTYPE 是用来声明文档类型的。声明位于 HTML 文档中的第一行，不是一个 HTML 标签，处于 HTML 标签之前。告知浏览器要以什么文档标准解析这个文档：!DOCTYPE 存在即表示要以 HTML5 标准解析页面，也就是标准模式；如果不写或格式不正确会导致文档以兼容模式呈现。
- 标准模式的排版 和 JS 运作模式都是以该浏览器支持的最高标准运行。
- 在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
七、常⽤的 meta 标签有哪些
meta 标签由 name 和 content 属性定义，用来描述网页文档的属性。
| 属性 | 描述 | 值 | 例子 |
|---|---|---|---|
| charset | HTML文档的编码类型 | utf-8 gbk |
<meta charset="UTF-8" > |
| keywords | 页面关键词 | 自定义 | <meta name="keywords" content="关键词" /> |
| description | 页面描述 | 自定义 | <meta name="description" content="页面描述内容" /> |
| refresh | 页面重定向和刷新 | 自定义 | <meta http-equiv="refresh" content="0;url=" /> |
| viewport | 适配移动端，可以控制视口的大小和比例 | width viewport ：宽度 height viewport ：高度 initial-scale ：初始缩放比例 maximum-scale：最大缩放比例 minimum-scale ：最小缩放比例 user-scalable ：是否允许用户缩放(yes/no） |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
| robots | 搜索引擎索引方式 | all：文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索； nofollow：页面上的链接不可以被查询。 |
<meta name="robots" content="index,follow" /> |
八、iframe 有那些优点和缺点
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
优点：
- 用来加载速度较慢的内容（如广告）
- 可以使脚本可以并行下载
- 可以实现跨子域通信
缺点：
- iframe 会阻塞主页面的 onload 事件；
- 搜索引擎的检索程序无法解读这种页面，不利于 SEO ；
- iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。
九、defer 和 async 的区别
defer 和 async 都是 <script> 标签的属性。
从下图可以得知：
defer：
- 在 script 标签添加 defer 属性，就可以让这个 script 外联的 js 变成异步加载。当 html 解析过程中碰到这个 script ，就会开辟一个新线程来下载脚本（这个脚本的下载和 html 的解析是同步的），当脚本下载完毕后不会立即执行，而是等待 html 解析完毕后才开始执行。
- 所有 defer 的 js 代码都保证按顺序执行。
async：
- 在 script 标签添加 async 属性后，html 解析过程中碰到这个 script ，也会开辟新线程来同步下载脚本，但下载完毕后会立即执行脚本，并中断 html 解析流程，等到脚本执行完之后再接着解析 html 。
- async 的 js 代码不能保证按顺序执行，而是谁先下载完就先执行哪个脚本。
十、src 和 href 的区别
- src 会将其指向的资源下载并应用到文档内，这时候它会暂停其他资源的下载，直到该资源加载、编译、执行完毕。
- href 会与指向的网络资源建立链接关系，它会与其他资源并行下载，不会停止对当前文档的处理。
十一、行内元素、块级元素，以及两者的区别
定义：CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，如 div 的 display 默认值为“block”，则为“块级”元素；span 默认 display 属性值为“inline”，是“行内”元素。
- 行内元素有：
a、br、cite、em、i、img、input、label、select、span、strong、sub、sup、textarea - 块级元素有：
div、p、form、ul、ol、dl、h、hr、table、menu、 - 区别：
- 块级元素独占一行，行内元素不会
- 块级元素可以设置宽高，行内元素不能
- 块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素。
- 块级元素可以设置
margin和padding，行内元素的水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）若是设置为行内块级元素，它也不能独占一行，但能设置宽高
十二、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别
title属性没有明确意义只表示是个标题，h1则表示层次明确的标题。strong标签有语义，是起到加重语气的效果，而b标签是没有的。虽然都能加粗字体，但搜索引擎更侧重strong标签。- 效果都是斜体，
em是语义化标签，表强调；i是样式标签，表斜体。
十三、label 的作用
<label> 标签是用来定义故意表单控件的关系。
作用：用于绑定一个表单元素，当点击 label 标签的时候，被绑定的表单元素就会获得输入焦点。
- 使用方法1：
<label for="mobile">Number:</label> <input type="text" id="mobile"/> - 使用方法2：
<label>Date:<input type="text"/></label>
十四、canvas 和 svg 的区别
- canvas 是 HTML5 提供的新元素
<canvas>，而 svg 存在的历史要比 canvas 久远，已经有十几年了。 - canvas 可以看做是一个画布，其绘制出来的图形为标量图，因此可以在 canvas 中引入 jpg 或 png 这类格式的图片，适合图形密集型的游戏。另外，我们喜欢用 canvas 来做一些统计用的图表，如柱状图曲线图或饼状图等。
- svg 所绘制的图形为矢量图，因此在 svg 中不能引入普通的图片。因为矢量图的不会失真的效果，在项目中我们会用来做小图标。但是由于其本质为矢量图，可以被无限放大而不会失真，这很适合被用来做地图，而百度地图就是用 svg 技术做出来的。
- 从技术发面来讲 canvas 里面绘制的图形不能被引擎抓取，如我们要让 canvas 里面的一个图片跟随鼠标事件:
canvas.onmouseover=function(){}。 而 svg 里面的图形可以被引擎抓取，支持事件的绑定。 - canvas 中我们绘制图形通常是通过 javascript 来实现，svg 更多的是通过标签来来实现的。
十五、渐进增强、优雅降级，以及两者的区别
- 渐进增强：针对低版本浏览器也能保证基础功能，然后对高级浏览器改进追加功能（向上兼容）。
- 优雅降级：一开始就构建站点的完整功能，然后针对浏览器进行测试和修复（向下兼容）。
- 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
十六、 scoped 的作用
scoped 是一个用于 <style> 标签的 HTML 属性，它的作用是将样式限定在特定的父元素范围内生效，不影响其他元素。
具体来说，当在 <style> 标签中添加 scoped 属性时，该样式仅适用于包含该 <style> 标签的父元素及其子元素，而不会影响其他元素。这意味着在相同页面中的其他地方使用相同的 CSS 选择器名称时，不会出现样式冲突的问题。
使用 scoped 属性可以方便地在组件化开发或特定模块中定义样式，而不必担心样式会影响到其他地方的元素。这样可以提高代码的可维护性和可重用性。
需要注意的是， scoped 属性在 HTML5 中已被废弃，它在最新的 HTML 标准中已经不推荐使用。而现代前端开发中，一般使用 CSS-in-JS、CSS Modules、CSS 命名空间等技术来实现样式的模块化和隔离，以解决样式冲突的问题。
十七、css 样式隔离
CSS样式隔离是一种将样式限定在特定范围内生效的方法，避免样式冲突和影响其他元素的外观。它在前端开发中非常有用，特别是在组件化开发或模块化开发中，可以确保样式的独立性和可重用性。
以下是几种实现CSS样式隔离的常见方法：
- 命名约定：使用一套约定俗成的命名规范来命名CSS类名，确保在不同的模块或组件中命名不会冲突。例如，可以使用BEM（Block-Element-Modifier）命名规范来规范化类名，避免样式冲突。
- CSS模块化：使用CSS模块化工具或框架，如CSS Modules、Styled Components等，将样式与组件进行绑定，确保样式仅应用于对应的组件。这种方式通过使用特定的语法或编译工具，将CSS样式隔离在组件的作用域内，避免了全局样式的冲突。
- CSS-in-JS：使用CSS-in-JS库，如Emotion、Styled Components等，将CSS样式直接写在JavaScript/TypeScript代码中，通过动态生成样式类名或行内样式的方式，实现样式的隔离和组件化。
- Shadow DOM：使用Web标准中的Shadow DOM技术，创建一个独立的DOM子树，使得其内部的样式只影响Shadow DOM内的元素，不会泄漏到外部。这种方式在一些现代浏览器中得到了广泛支持。
- CSS命名空间：使用CSS命名空间的概念，将样式规则嵌套在特定的命名空间下，限定样式的作用范围。通过给根元素或容器元素添加命名空间前缀，实现样式的隔离。
这些方法可以根据具体情况和开发需求选择使用。通过使用适当的样式隔离方法，可以确保样式的独立性和可维护性，减少样式冲突的问题，提高前端开发的效率和代码的可靠性。
