html面试题、知识点复习回顾

1.html5 有哪些新特性？ 移除了哪些元素？

• HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加
• 绘画 canvas ⽤于媒介回放的video和 audio 元素
• 本地离线存储 localStorage ⻓期存储数据，浏 览器关闭后数据不丢失 sessionStorage 的数据在浏览器关闭后⾃动删除
• 语意化更好的内容元素，⽐如 article 、 footer 、 header 、 nav 、 section 表单控 件， calendar 、 date 、 time 、 email 、 url 、 search
• 新的技术 webworker （运行在后台的JS 独立于其他脚本）、 websocket（通信） 、 Geolocation （位置API）
• 拖放API ： drag（拖），drop（放）

移除的元素

• 纯表现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
• 对可⽤性产⽣负⾯影 响的元素： frame 、 frameset 、 noframes

支持 html5 新标签

• IE8/IE7/IE6⽀持通过 document.createElement ⽅法产⽣的标签 可以利⽤这⼀特性让这些浏览器⽀ 持 HTML5 新标签 浏览器⽀持新标签后，还需要添加标签默认的样式

2.说一下对语义化的理解

​ 语义化就是构成HTML结构的标签要有意义。根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化？

• 在没有 css 样式的 时候也能 以文档的形式显示，易于阅读
• 搜索引擎的爬虫 依赖标记来确定上下文的权重，利于SEO
• 使开发人员阅读源码时更轻松， 做无障碍时很重要，便于阅读网页内容
• 用户 对于没有加载出css时页面也能有一个良好的结构

3.SEO是什么？ 前端做 SEO 要注意什么？

1. SEO是英文 Search Engine Optimization 的缩写，中文意思“搜索引擎优化”。SEO是指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，从而获得更多流量，最终达成品牌建设或者产品销售的目的。
2. 前端seo最重要的就是h1 标签 一个页面只能有一个 唯一的 最重要的
   • 合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减小，重要关键词不要出现2次，且要放的靠前
   • 语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解⽹⻚
   • 重要内容不要使用 JS 输出 爬虫不会执行JS代码
   • 尽量不要使用iframe
   • a标签 必须写 href 属性 图片必须加 alt 属性 不加爬虫 会认为图片的错误的 不会爬取
   • 提高网站速度，速度也是seo的一个重要指标

4.从浏览器地址栏输⼊url到显示⻚⾯的步骤

简单回答：

• 先走浏览器缓存，查找有没有当地域名的缓存
• 浏览器根据 url 交给dns 进行 域名解析 后返回 ip 向对应ip发请求
• 浏览器对返回的资源进行 解析，建立相应的结构（HTML和DOM）
• 载入解析到的资源文件，渲染页面，完成显示

详细回答：

1. 首先在地址栏输入一个url，浏览器查找一下有没有缓存，如果有就去缓存拿资源
2. dns解析，首先查找 硬盘 hosts文件 找到ip映射就直接发请求， 找不到浏览器会请求本地dns服务器，找不到再一级一级往上找，直到找到 ip 返回 同时进行缓存
3. 建立TCP连接（三次握手）SYN ACK
   • 三次握手是为了防止已失效的连接请求报文端突然又传送到服务器端，因而产生错误。
4. 客户端发送HTTP请求。（包括请求头）
5. 服务器返回HTTP响应。（状态行，响应头，响应正文）
6. 浏览器拿到相应资源进行解析（细说 浏览器渲染过程） 解析 html 词法分析然后解析成 dom 树、解析 css ⽣成 css规则树 、合并成 render 树，然后 layout、painting 渲染、复合图层的合成、 GPU 绘制、外链资源的处 理、 loaded 和 DOMContentLoaded 等
7. 断开TCP（四次挥手） FIN

5.对浏览器内核的理解（webkit blink）

主要分成两部分：渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎

1. 渲染引擎：负责取得⽹⻚的内容（ HTML 、 XML 、图像等等）、整理讯息（例如加⼊ CSS 等），以及计算⽹⻚的 显示⽅式，然后会输出⾄显示器或打印机。浏览器的内核的不同对于⽹⻚的语法解释会有不同，所以渲染的效果也不 相同。所有⽹⻚浏览器、电⼦邮件客户端以及其它需要编辑、显示⽹络内容的应⽤程序都需要内核
2. JS 引擎：解析和执⾏ javascript 来实现⽹⻚的动态效果
3. 最开始渲染引擎和 JS 引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

6.请描述⼀下 cookie，sessionStorage 和 localStorage 以及它们的区别？

• cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端上的数据（通常经过加密）（http无状态的使用cookie方便标识用户身份）
• cookie 数据始终在同源的http请求中自动携带（即使不需要），即会在浏览器和服务器间来回传递
• HTML5的新特性 WebStorage ： localStorage（本地存储）和sessionStorage（会话存储）
• cookie 4kb 20个 webStorage 5MB webStorage只能 存储字符串类型
• 有效时间
  • localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据 sessionStorage 数据在当前浏 览器窗⼝关闭后⾃动删除 cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭
• 作用域不同
  • sessionStorage不在不同的浏览器窗口中共享
  • localStorage在所有同源窗口中都是共享的
  • cookie也是在所有同源窗口中都是共享的

7.页面访问cookie 的限制条件

1.跨域问题

cookie 允许Web开发者保留他们的⽤户的登录状态。但是当你的站点有⼀个以上的域名时就会出现问题了。 在 cookie 规范上说，⼀个 cookie 只能⽤于⼀个域名，不能够发给其它的域名。因此，如果在浏览器中对⼀个域名设 置了⼀个 cookie ，这个 cookie 对于其它的域名将⽆效

解决：

• 通过nginx 反向代理
• jsonp请求

2.设置了 http only：

在cookie 中设置了 HttpOnly 属性 那么通过程序(JS脚本、Applet等)将⽆法读取到 cookie 信息，这样能有 效的防⽌ XSS 攻击。

8.cookie 的属性

在chrome控制台中的Application选项卡中可以看到cookie的信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T0P3tCdG-1662023298896)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20220831154529350.png)]

⼀个域名下⾯可能存在着很多个 cookie 对象。但⼀个 cookie 只能⽤于⼀个域名，不能够发给其它的域名。

• Name： cookie 的名称
• Value： cookie 的值（⽤ JS 操作 Cookie 的时候注意对 Value 进⾏编码处理。 加密）
• Domain： 可以访问此cookie 的域名 有限制 20个
  • ⼆级域名 能读取设置了 domain 为顶级域名或者⾃身的 cookie，不能读取其他⼆级域名 domain 的 cookie 。所 以要想 cookie 在多个⼆级域名中共享，需要设置 domain 为顶级域名，这样就可以在所有⼆级域名⾥⾯获得到这 个 cookie 的值了
• Path：可以访问此cookie 的⻚⾯路径。⽐如domain是abc.com,path是/test，那么只有/test路径下的⻚⾯可以读取此 cookie /test路由的页面专属cookie
• Expires： 超时时间，不设置默认是 seesion 关浏览器删除 值是一个时间（几号几点到期）
• Max-Age：设置在 Cookie 失效之前需要经过的 秒数 Expires和Max-Age 都存在 Max-Age优先级高
  • Max-Age 可以为正数、负数、甚⾄是 0。
  • 正数： 持久化 ， 到期删除
  • 负数 ： 表示是会话性 cookie 关闭浏览器清除
  • 0 ： 立即删除这个cookie
• Size ： 大小
• HttpOnly ： 不能通过document.cookie访问
• Secure： 通过https来传输 cookie
• SameSite： 为了cookie安全提出的 后面详解

9.SameSite详解

作用：

SameSite 属性可以让 Cookie 在跨站请求时不会被发送，从⽽可以阻⽌跨站请求伪造攻击（ CSRF ）

属性值：

• Strict： 严格的，完全禁止第三方获取cookie，当前⽹⻚ URL 与请求 ⽬标 URL 完全⼀致
• Lax：默认值 允许部分第三⽅请求携带 Cookie 设置了samesite 基本就杜绝了CSRF
• None： 没有限制， 但是必须设置为Secure （https）

2019年2月4号谷歌发布Chrome 80稳定版后，关于cookie的SameSite属性做了以下更改：

• 没有设置SameSite属性的默认SameSite=Lax
• SameSite=None的cookie 则必须设置为Secure，即安全链接（https）。

老项目怎么应对samesite：

• samesite = None ，请求通过https

10.doctype是什么？ 有什么作用？

DOCTYPE 是 document type (⽂档类型) 的缩写。 < !DOCTYPE > 声明位于⽂档的最前⾯，处于标签之前，它不 是html标签。主要作⽤是告诉浏览器的解析器使⽤哪种HTML规范或者XHTML规范来解析⻚⾯

• 设置了 <!DOCTYPE html> 表示按照W3C的规范来解析代码，呈现页面 标准模式
• 没设置，或者拼写错误，位置错误，则表示按照浏览器自己的规范来解析代码 混杂模式

WEB标准以及W3C标准是什么？

标签闭合、标签⼩写、不乱嵌套、使⽤外链 css 和 js 、结构⾏为表现的分离

11.为什么需要浏览器缓存？

对于浏览器的缓存，主要针对的是前端的静态资源，最好的效果就是，在发起请求之后，拉取相应的静态资源，并保存在本地。如果服务器的静态资源没有更新，那么在下次请求的时候，就直接从本地读取即可，如果服务器的静态资源已经更新，那么我们再次请求的时候，就到服务器拉取新的资源，并保存在本地。这样就大大的减少了请求的次数，提高了网站的性能。这就要用到浏览器的缓存策略了。

所谓的浏览器缓存指的是浏览器将用户请求过的静态资源，存储到电脑本地磁盘中，当浏览器再次访问时，就可以直接从本地加载，不需要再去服务端请求了。

使用浏览器缓存，有以下优点：

• 减少了服务器的负担，提高了网站的性能
• 加快了客户端网页的加载速度
• 减少了多余网络数据传输

12.什么是文档的预解析？

Webkit 和 Firefox 都做了这个优化，当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变 DOM 树，它将这个工作留给**主解析进程，**自己只解析外部资源的引用，比如外部脚本、样式表及图片。

13.点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？

• 点击刷新按钮或者按 F5： 浏览器直接对本地的缓存文件过期处理，但是会带上If-Modifed-Since，If-None-Match，这就意味着服务器会对文件检查新鲜度，返回结果可能是 304，也有可能是 200。
• 用户按 Ctrl+F5（强制刷新，清除缓存）： 浏览器不仅会对本地文件过期处理，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前请求过，没有缓存，重新请求，返回结果是 200。
• 地址栏回车： 浏览器发起请求，按照正常流程，本地检查是否过期，然后服务器检查新鲜度，最后返回内容。

14.BFC是什么？ 触发的条件？

Block Fromatting Context， 即块级格式上下文。BFC只是一个概念，BFC区域是一个封闭的盒子，不影响外面的元素，也不受外面元素的影响

触发条件

• html 根元素 ：最大的BFC

• 浮动元素 ： float 属性不为 none

• 绝对定位元素：元素的 position 为 absolute 或 fixed

• display 为 inline-block table-cell 表单单元格 table-caption 表单标题

• 弹性元素，网格元素 ： display: flex/grid

• overflow 不为 visible 的 块元素

触发后的作用

• 解决 上下 margin 重叠
• BFC区域不会与浮动元素区域重叠
• 计算BFC的高度时，浮动元素也参与计算
• 解决父子元素上外边距塌陷问题 ： 子元素的上边距作用在了父元素上
• 清除内部浮动：子元素为浮动元素，父元素没高度，因为浮动脱离文档流，撑不开盒子

15.页面导入样式时，使用link和@import有什么区别？

1. link是xhtml 标签，除了加载css 外，还可以定义RSS等其他事务；@import 属于css范畴，只能加载CSS
2. link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
3. link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持
4. link支持使用javascript控制去改变样式，而@import不支持
5. link方式的样式的权重高于@import的权重
6. import在html使用时候需要

@import 可能会造成 无样式内容闪烁 利用link 引入css可以解决，因为link是顺序加载的

16.meta viewport 原理是什么？

meta viewport 标签的作用是让当前 viewport 的宽度等于设备的宽度，同时不允许用户进行手动缩放

viewport的原理：移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是 viewport; 目的是正常展示没有做移动端适配的网页，让他们完整的展示给用户；

17.DOM Tree是如何构建的？

1.HTML 解释器：

HTML 解释器的工作就是将网络或者本地磁盘获取的 HTML 网页和资源从字节流解释成 DOM 树结构。

2.JavaScript 的执行：

在 HTML 解释器的工作过程中，可能会有 JavaScript 代码需要执行，它发生在将字符串解释成词语之后、创建各种节点的时候。这也是为什么全局执行的 JavaScript 代码不能访问 DOM 的原因——因为 DOM 树还没有被创建完呢。

18.说一下 defer 和 async 的区别

• 多个带defer的script标签里 js同步执行， async是异步执行
• defer等所有元素解析完成之后，DOMContentLoaded之前执行
• async 不会等待前面的script 加载完就会执行

19.说一下对 webworker 的理解

• webworker 的作用就是 为了JS创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行（后台运行 JS 独立的不受其他影响）
• Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。
• 通过postMessage 将结果回传到主线程，这样复杂操作的时候，就不会阻塞主进程了

20.html5的离线存储

• 指的是没有网络连接的时候，可以正常访问应用，与网络连接时更新缓存文件

• 在 cache.manifest 文件中编写需要离线存储的资源：

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

• 在离线状态时，操作 window.applicationCache 进行离线缓存的操作。
• 如何清除缓存：更新 manifest 文件，通过 javascript 操作，清除浏览器缓存

21.说一下img的srcset作用？alt和title的区别?

• 在响应式页面中 常用 srcset 属性用于设置在不同宽 高 屏幕密度时，会自动加载不同的图片

• alt 是替代文本 ** 图片失效时显示**

• title 是图片标题 鼠标移到图片上显示

22.说一下 canvas 和 svg 的区别？

• canvas 是画布，适合图形密集型的游戏，不支持事件处理，
• svg 是矢量图，不依赖分辨率，不适合游戏，适合大型渲染区域（地图），支持事件处理

23.说一下 drap drop 拖放API

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