前端面试题汇总大全（含答案超详细）-- 持续更新

一、HTML 篇

1.xhtml和html有什么区别

• 功能上

• 主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页

• 书写习惯

• XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素

2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别

行内元素有：a b span img input select strong

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

空元素：br、 hr img input link meta

行内元素不可以设置宽高，不独占一行

块级元素可以设置宽高，独占一行

3. 简述一下你对 HTML 语义化的理解？

语义化是指 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

语义化的好处：

• 在没有CSS的情况下，页面也能呈现出很好的内容结构
• 语义化使代码更具可读性，便于团队开发和维护
• 语义化有利于用户体验（例如 title，label，alt属性的灵活运用）
• 语义化有利于SEO（和搜索引擎建立良好的沟通，有助于爬虫爬取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重）

4. 标签上 title 与 alt 属性的区别是什么？

alt 是给搜索引擎识别，在图像无法显示时的替代文本；

title 是关于元素的注释信息，主要是给用户解读。

当鼠标放到文字或是图片上时有 title 文字显示。（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。

在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。

5. iframe的优缺点？

优点：

• 解决加载缓慢的第三方内容如图标和广告等的加载问题
• Security sandbox
• 并行加载脚本

缺点：

• iframe会阻塞主页面的Onload事件
• 即时内容为空，加载也需要时间
• 没有语意
• 使用iframe作为子应用问题：1.没有路有记录 2.样式隔离严重

6. href 与 src？

• href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a
• src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe
• href与src的区别

• 1、请求资源类型不同：href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；
• 2、作用结果不同： src用于替换当前元素；href用于在当前文档和引用资源之间建立联系
• 3、浏览器解析方式不同：当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

7.什么是优雅降级渐进增强？

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

8.HTTP的几种请求方法用途？

• GET方法

• 发送一个请求来取得服务器上的某一资源

• POST方法

• 向URL指定的资源提交数据或附加新的数据

• PUT方法

• 跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有

• HEAD方法

• 只请求页面的首部

• DELETE方法

• 删除服务器上的某资源

• OPTIONS方法

• 它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息

• TRACE方法

• TRACE方法被用于激发一个远程的，应用层的请求消息回路

• CONNECT方法

• 把请求连接转换到透明的TCP/IP通道

9.HTTP状态码都有哪些？

一、临时响应

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

二、成功

200——服务器成功返回网页

201——提示知道新文件的URL

202——接受和处理、但处理未完成

203——返回信息不确定或不完整

204——请求收到，但返回信息为空

205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件

206——服务器已经完成了部分用户的GET请求

三、重定向

300——请求的资源可在多处得到

301——删除请求数据

302——在其他地址发现了请求数据

303——建议客户访问其他URL或访问方式

304——客户端已经执行了GET，但文件未变化

305——请求的资源必须从服务器指定的地址得到

306——前一版本HTTP中使用的代码，现行版本中不再使用

307——申明请求的资源临时性删除

四、请求错误

400——错误请求，如语法错误

401——请求授权失败

402——保留有效ChargeTo头响应

403——请求不允许

404——请求的网页不存在

405——用户在Request-Line字段定义的方法不允许

406——根据用户发送的Accept拖，请求资源不可访问

407——类似401，用户必须首先在代理服务器上得到授权

408——客户端没有在用户指定的饿时间内完成请求

409——对当前资源状态，请求不能完成

410——服务器上不再有此资源且无进一步的参考地址

411——服务器拒绝用户定义的Content-Length属性请求

412——一个或多个请求头字段在当前请求中错误

413——请求的资源大于服务器允许的大小

414——请求的资源URL长于服务器允许的长度

415——请求资源不支持请求项目格式

416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段

417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

五、服务器错误

500——服务器产生内部错误

501——服务器不支持请求的函数

502——服务器暂时不可用，有时是为了防止发生系统过载

503——服务器超时过载或暂停维修

504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长

505——服务器不支持或拒绝支请求头中指定的HTTP版本

10.DOCTYPE (⽂档类型) 的作⽤ ？

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是 告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义 来解析文档 ，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

浏览器渲染页面的两种模式：

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

11.前端需要注意哪些SEO？

• 合理的title、description，keywords：搜索引擎对着这项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

12.script标签中defer和async的区别 ？

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

区别：

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

13.常用meta标签有哪些？

meta标签由name和content属性定义，用来描述网页文档的属性

常用的meta标签：

• charset：用来描述HTML文档的编码类型
• keywords:页面关键词
• description:页面描述
• refresh:页面重定向和刷新
• viewport:适配移动端，可以控制视口大小和比例

• content参数详情：

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

14.一次完整的HTTP事务是怎么一个过程?

• 浏览器的地址栏输入URL并按下回车。
• 浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
• DNS解析URL对应的IP。
• 根据IP建立TCP连接（三次握手）。
• HTTP发起请求。
• 服务器处理请求，浏览器接收HTTP响应。
• 渲染页面，构建DOM树。
• 关闭TCP连接（四次挥手）。

15.HTTP和HTTPS区别？

http:超文本传输协议，是一个客户端和服务器端请求和应答的标准(TCP),用于从www服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更高效，是网络传输减少

https：可以理解为http的安全版，在http下加入SSL层。https协议的主要作用是建立一个安全的信息通道，来确保数组的传输，确保网站的真实性。

区别：

• Https 协议需要 ca 证书，费用较高。
• http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。
• 使用不同的连接方式，端口也不同，一般而言，http 协议的端口为 80，https 的端口为443
• http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、
• 身份认证的网络协议，比 http 协议安全。

16.HTTPS是如何实现加密？

HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL协议不仅仅是一套加密传输的协议，更是一件经过艺术家精心设计的艺术品，TLS/SSL中使用了非对称加密，对称加密以及HASH算法

17.img的srcset属性作用？img加载不同图片

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

18.WEB标准以及W3C标准是什么?

• 标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离

19.HTML5的离线存储怎么使用？工作原理？

离线存储指的是:在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理: HTML5的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

使用方法：

• 创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性
• 在cache .manifest文件中编写需要离线存储的资源

• CACHE:表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
• NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK
• 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高
• FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访根目录下任何一个资源失败了，那么就去访问
• offline.html

• 在离线状态时，操作window.applicationCache进行离线缓存的操作。

20.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

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

21.label的作用是什么？

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

22.Canvas和SVG区别？

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

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

区别：

• svg绘制出来的每一个图形的元素都是独立的DOM节点，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布
• svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是出现锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿

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

标签用于定义文档的头部，它是所有头部元素的容器。中的元索可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。 下面这些标签可用在 head 部分: ,,,

24.严格模式与混杂模式如何区分? 它们有何意义?

严格模式:又称为标准模式，指浏览器按照 w3C 标准解析代码;

混杂模式: 又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作;

区分：

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

25.浏览器乱码的原因是什么？如何解决？

产生乱码的原因：

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

解决办法：

• 使用软件编辑HTML网页内容;
• 如果网页设置编码是 gbk ，而数据库储存数据编码格式是 UTF-8 ，此时需要程序查询数据库数据显示数据前进程序转码:
• 如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。

26. 浏览器存储技术 ?

Cookie：是客户端与服务器进行会话使用的一个能够在浏览器本地存储的技术，能存放4kb数据，目的是辨别用户身份

LocalStorage ： 在HTML5中新增用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)

SessionStorage ： sessionStorage与localStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对就会被清空。

27.如何优化图像？图像格式的区别？

1.不用图片，尽量用css3代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。

2、使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG；修饰图片通常更适合用无损压缩的PNG。

GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。

4、按照HTTP协议设置合理的缓存。

5、使用字体图标webfont、CSS Sprites等。

6、用CSS或JavaScript实现预加载。

7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输

图片格式区别：

• gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。
• JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。
• png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。
• 关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;

28.尽可能多的写出浏览器兼容性问题？解决

• 不同浏览器的标签默认的margin和padding不同

• 在CSS文件开头，加*{margin: 0; padding: 0;}，把所有标签的margin和padding设置为0

• 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

• 可以将块级元素display设置为inline

• 设置较小高度标签（一般小于10px），在IE6，IE7， 实际的高度会超出设置的高度，这是因为浏览器给标签设置了一个默认的最小高度

• 设置{overflow: hidden;}，或者设置line-height小于你设置的高度。

• 在某些浏览器中，图片有默认的间距(所有有文字属性的标签都会有边距，除非两个标签连在一起没有隔开)；

• 使用float为img布局，因为所有标签设置float之后都会变成块级元素，块级元素浮动时会紧挨在一起，没有边距

• IE9以下浏览器不能使用opacity；
• {opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}。

29.HTML全局属性(global attribute)有哪些

• class:为元素设置类标识
• data-*: 为元素增加自定义属性
• draggable: 设置元素是否可拖拽
• id: 元素id，文档内唯一
• lang: 元素内容的的语言
• style: 行内css样式
• title: 元素相关的建议信息

30.网页验证码是干嘛的，是为了解决什么安全问题

• 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
• 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

31.为什么利用多个域名来存储网站资源会更有效？

• CDN缓存更方便
• 突破浏览器并发限制
• 节约cookie带宽
• 节约主域名的连接数，优化页面响应速度
• 防止不必要的安全问题

32.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

• 图片懒加载，在页面上的未可视区域可以添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
• 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
• 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
• 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
• 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

33.web开发中会话跟踪的方法有哪些

• cookie
• session
• url重写
• 隐藏input
• ip地址

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

• title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响
• strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容
• i内容展示为斜体，em表示强调的文本

35.浏览器的内核有哪些？分别有什么代表的浏览器？

• IE: trident内核
• Firefox：gecko内核
• Safari:webkit内核
• Opera:以前是presto内核，Opera现已改用Google - Chrome的Blink内核
• Chrome:Blink(基于webkit，Google与Opera Software共同开发)

36.浏览器是如何渲染页面的？

• 1.解析文档构建DOM树
• HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree）
• CSS：解析样式表，生成CSS规则树（CSS Rule Tree）
• JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。
• 2.构建渲染树
• 解析文档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree（渲染树）
• 3.布局与绘制渲染树
• 解析position, overflow, z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制（repain）。

37.TCP为什么需要三次握手和四次挥手

三次握手是为了建立可靠的数据传输通道，四次挥手则是为了保证等数据完成的被接收完再关闭连接。

38.TCP三次握手

• 当有客户端需要建立连接的时候就会发送一个确定连接的报文，此报文是同步报文SYN = 1，并且会生成一个随机的序号 seq = x，这是第一次握手
• 当服务端接收到请求连接报文的时候，会发送一个同步报文确认报文，此报文 SYN = 1，并且 ACK = 1，同时服务端也会随机生成一个 seq = y，并将 ack 设置成 x + 1，回传给客户端，这是第二次握手
• 当客户端接收到服务端的 ACK 报文后，会回复一个 ACK 确认报文，用于确认确认报文已经收到，此报文 ACK = 1，seq = x + 1, ack = y + 1，这是第三次握手；
• 这里有个点说明一下：大写的 ACK 表示报文的类型是确认报文，小写的 ack 是报文里面的确认号，这个确认号是上一次握手对方的 seq 值加 1 得到
• [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bU41OHCQ-1686967105034)(file:///C:\Users\lenovo\AppData\Local\Temp\ksohtml7300\wps2.jpg)]

39.TCP四次挥手

• 客户端发起 FIN 断开连接的报文，携带随机生成的 seq 值 u，发送给服务端，并且自己处于 FIN-WSIT 状态，这是第一次挥手；
• 服务端接收到 FIN 报文后，回复一个确认报文，其中 ACK = 1，随机生成一个 seq，以及 ack = u + 1，这是第二次挥手；
• 当服务端数据发送完了过后，再发送一个 FIN 报文给客户端，通知客户端，服务端准备关闭连接了，此报文 FIN = 1，ACK = 1，ack = u + 1，seq = w，这是第三次挥手；
• 当客户端收到 FIN 确认报文时再发送一个FIN 的确认报文，其中 ACK = 1，seq = u + 1，ack = w + 1，并进入 TIME-WAIT 状态，当等待 2MSL 后关闭连接，这是第四次挥手。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oh7C8Oyl-1686967105036)(file:///C:\Users\lenovo\AppData\Local\Temp\ksohtml7300\wps3.jpg)]

40.data-属性的作用？

data-为H5新增的为前端开发者提供自定义的属性，

这些属性集可以通过对象的 dataset 属性获取，

不支持该属性的浏览器可以通过 getAttribute 方法获取 :

需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。

即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据

41.HTML5新特性？

1.语义化标签

• header：定义文档的页眉（ 头部）
• nav: 定义导航链接的部分
• footer: 定义文档或节的页脚 (底部)
• article: 定义文章内容
• section: 定义文档中的节 (section、区段)
• aside: 定义其所处内容之外的内容 (侧边)

2.媒体标签

• audio：音频

• 属性：

• src音频链接
• controls控制面板
• autoplay自动播放
• loop='true’循环播放

• video：视频

• 属性：

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

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

3.表单

• 表单类型:

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

• 表单属性：

• placeholder: 提示信息
• autofocus : 自动获取焦点
• autocomplete=“on” 或者 autocomplete=“off”使用这个属性需要有两个前提:

• 表单必须提交过
• 必须有name属性

• required: 要求输入框不能为空，必须有值才能够提交
• pattern=””里面写入想要的正则模式
• 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()

6.Web存储

• localStorage和sessionStorage

7.其他

• 拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放
• canvas和svg
• websocket，webwork
• 地理定位
• data-自定义属性

42.web worker的理解？如何创建？

在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

创建：

• 检测浏览器对于 web worker 的支持性
• 创建 web worker 文件 (js，回传函数等)
• 创建 web worker 对象

43.说下HTML5 drag API

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。

darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。

dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。

dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。

dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

44.Http 短轮询、长轮询

轮询：是由由客户端每隔一段时间(如每隔5s) 向服务器发出HTTP请求，服务端接收到请求后向客户端返回最新的数据。

客户端轮循：短轮询，长轮询

• 短轮询：一般是由客户端每隔一段时间(如每隔5s) 向服务器发起一次普通 HTTP 请求 。服务端查询当前接口是否有数据更新，若有数据更新则向客户端返回最新数据，若无则提示客户端无数据更新
• 长轮询： 一般是由客户端向服务端发出一个设置较长网络超时时间的 HTTP 请求，并在Http连接超时前，不主动断开连接；待客户端超时或有数据返回后，再次建立一个同样的Http请求，重复以上过程

45.canvas绘图基础(直线，三角形，矩形，圆形)

<canvas id=“myCanvas” width=200 height=100 ></canvas>

• id 是canvas元素的标识；
• height,width规定画布大小

直线：

beginPath()方法，指示开始绘图路径： ctx.beginPath();

moveTo()方法将坐标移至直线起点： ctx.moveTo(x,y);

lineTo()方法绘制直线： ctx.lineTo(x,y);

stroke()方法，绘制图形的边界轮廓： ctx.stroke();

closePath()方法，指示闭合绘图路径: ctx.closePath()

var mycanvas=document.getElementById("canvas");
    var ctx=mycanvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(100,100);//移动到绘制点
  ctx.lineTo(200,200);
  ctx.strokeStyle="#000000"; //指定描边颜色
  ctx.stroke();

三角形：

var mycanvas=document.getElementById("canvas");
    var ctx=mycanvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(100,200);
  ctx.lineTo(400,200);
  ctx.lineTo(250,400);
  ctx.closePath();//闭合绘图
  ctx.strokeStyle="#000000";
  ctx.stroke();

矩形：

绘制矩形：rect(x,y,width,height)；

绘制矩形边框：strokeRect(x, y, width, height);

绘制填充矩形：fillRect(x, y, width, height);

擦除指定矩形区域：clearRect(x, y, width, height);

var mycanvas=document.getElementById("canvas");
  var ctx=mycanvas.getContext("2d");
  //rect()函数调用
  ctx.beginPath();
  ctx.rect(20,20,100,50);
  ctx.stroke();

圆形：arc(centerx,centery,radius,startAngle,endAngle,antiClockwise);

• centerx,centery 圆弧中心点坐标
• Radius 半径
• startAngle 起始弧度
• endAngle 终止弧度
• antiClockwise 是否按逆时针方向绘图， 是一个可选参数，默认为false（即顺时针方向绘图）
• 弧度 = 角度* ( Math.PI / 180 )

var mycanvas=document.getElementById("canvas");
  var ctx=mycanvas.getContext("2d");
  //arc()函数调用
  ctx.beginPath();
  ctx.arc(100,150,70,0,90*Math.PI/180,true);
  ctx.stroke();

46.TCP和HTTP区别？

• TCP对应于传输层，HTTP对应于应用层，从本质上来说，二者没有可比性。
• Http协议是建立在TCP协议基础之上的，当浏览器需要从服务器获取网页数据的时候，会发出一次Http请求。Http会通过TCP建立起一个到服务器的连接通道，当本次请求需要的数据完毕后，Http会立即将TCP连接断开，这个过程是很短的。所以Http连接是一种短连接，是一种无状态的连接
• TCP是底层协议，定义的是数据传输和连接方式的规范。

HTTP是应用层协议，定义的是传输数据的内容的规范。

HTTP协议中的数据是利用TCP协议传输的，所以支持HTTP就一定支持TCP