混杂模式： 又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码.混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；
区分：
网页中的DTD，直接影响到使用的是严格模式还是浏览模式，可以说DTD的使用与这两种方式的区别息息相关。
-
如果文档包含严格的
DOCTYPE，那么它一般以严格模式呈现（严格 DTD ——严格模式）； -
包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）；
-
DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现（DTD不存在或者格式不正确——混杂模式）；
-
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。
总的来说，严格模式让各个浏览器统一执行一套规范.兼容模式保证了旧网站的正常运行。
12. 如何实现浏览器内多个标签页之间的通信
可以通过调用localstorge、cookies等本地存储方式。
13. webSocket如何兼容低浏览器
Adobe Flash Socket；
ActiveX HTMLFile (IE) ；
基于 multipart 编码发送 XHR；
基于长轮询的 XHR；
14. iframe有哪些优缺点
优点
-
iframe可以实现
无刷新文件上传； -
iframe可以
跨域通信； -
解决了加载缓慢的第三方内容如图标和广告等的
加载问题。
缺点
-
iframe
会阻塞主页面的Onload事件; -
无法被一些搜索引擎索引到; -
页面
会增加服务器的http请求; -
会产生很多页面，不容易管理。
15. src与href有什么区别
src用于替换当前元素；
href用于在当前文档和引用资源之间确立联系；
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。
17. 浏览器乱码的原因是什么？如何解决？
产生乱码的原因
网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之也会出现乱码；
html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；
浏览器不能自动检测网页编码，造成网页乱码。
解决办法
使用软件进行编辑HTML网页内容；
如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；
如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换；
18. HTML和DOM有何关系？
HTML是死的，只是一个字符串；而DOM是由html解析而来，是活的，我们可以通过Javascript维护DOM。
19. property和attribute的区别是什么
property是DOM中的属性，是JavaScript里的对象;
attribute是HTML标签上的特性，它的值只能够是字符串;
简单的理解就是：Attribute就是DOM节点自带的属性，例如html中常用的id、class、title、align等；而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。
20. HTML元素如何体现其嵌套关系
-
块级元素可以包含行内元素` -
块级元素不一定能包含块级元素 -
行内元素一般不能包含块级元素
（a元素例外)
22. html5有哪些新特性、移除了那些元素
新特性
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API；
语义化更好的内容标签（header, nav, footer, aside, article, section）;
音频、视频API(audio, video);
画布(Canvas) API;
地理(Geolocation) API;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除;
表单控件:calendar、date、time、email、url、search ;
新的技术webworker, websocket, Geolocation等；
移除元素
纯表现元素：
<basefont> 默认字体，不设置字体，以此渲染；
<font>字体标签；
<center> 水平居中；
<u>下划线；
<big>字体；
<strike>中横字；
<tt>文本等宽；
对可用性产生负面影响的元素：
<frameset>,<noframes>和<frame>；
23. Quirks模式是什么？它和Standards模式有什么区别？
Quirks模式
Quirks模式，又称怪癖模式、诡异模式、怪异模式。
Quirks和Standards模式的区别
当我们在写程序时，遇到新旧功能不兼容的时候，如何做才能保证原来的接口不变，又可以提供强大的功能？
一般情况下可以通过增加参数和分支来解决。也就是当某个参数为true时，使用新功能，为false时使用旧功能，这样就能不破坏原有的程序，又能提供新功能。
IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，第一IE6就假定，如果写了DTD就意味这个页面将采用对CSS支持更好的布局，而如果没有就采用兼容之前的布局方式，这就是Quirks模式（怪癖，诡异，怪异模式）。
其与Standards的区别总体会有布局、样式解析、和脚本执行三个方面的区别：
盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border；
设置行内元素的高宽：在Standards模式下，给行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效；
设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用；
设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
24. 什么是前端的结构，样式和行为相分离？以及分离的好处是什么？
结构，样式和行为分离
小编的理解是： 若是将前端比作一个人来举例子，结构（HTML）就相当于是人体的“骨架”，样式就相当于人体的“装饰”，例如衣服，首饰等；行为就相当于人做出的一系列“动作”。
结构，样式和行为分离，就是将三者分离开，各自负责各自的内容，各部分可以通过引用进行使用。
在分离的基础上，我们需要做到代码的：精简， 重用， 有序。
分离的好处
-
代码分离，利于团队的开发和后期的
维护； -
减少维护成本，提高可读性和更好的
兼容性；
25. 对HTML5有什么了解？
-
良好的
移动性，以移动设备为主； -
响应式设计，以适应自动变化的屏幕尺寸； -
支持
离线缓存技术，webStorage本地缓存； -
新增了
canvas，video，audio等新标签元素；以及特殊内容元素：article，footer，header，nav，section等；以及表单控件：calendar，date，time，email，url，search等； -
新增
webSocket/webWork技术； -
还有新增的
地理位置等。
26. 如何对网站的文件和资源进行优化
文件合并（目的是减少http请求）；
文件压缩 （目的是直接减少文件下载的体积）；
使用缓存；
使用cdn托管资源；
gizp压缩需要的js和css文件；
反向链接，网站外链接优化；
meta标签优化（title, description, keywords）,heading标签的优化,alt优化；
28. Html5中本地存储概念是什么，有什么优点，与cookie有什么区别？
HTML5的Web storage的存储方式有两种：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话中的数据，当会话结束后就会销毁；
localStorage用于持久化的本地存储，除非用户主动删除数据，否则数据永远不会过期；
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
区别：
从浏览器和服务器间的传递看：
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
从大小看, 存储大小限制不同:
cookie数据不能超过4k，只适合保存很小的数据；
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
从数据有效期看：
sessionStorage在会话关闭会立刻关闭，因此持续性不久；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
localStorage始终有效。
从作用域看：
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage和cookie都是可以在所有的同源窗口中共享的。
29. 常见的浏览器内核有哪些
Trident内核：IE最先开发或使用的， 360浏览器；
Webkit内核：Google Chrome，Safari， 搜狗浏览器，360极速浏览器， 阿里云浏览器等；
Gecko内核： Mozilla FireFox (火狐浏览器) ，K-Meleon浏览器；
Presto内核：Opera浏览器；
30. Canvas是什么？怎样写Canvas？
概念
Canvas是HTML5的一个元素，它使用JavaScript在网页上绘制图形。Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制。使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。
使用方式
如果要在我们的HTML文档中添加Canvas标签，我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。
<canvas id="myCanvas" width="100" height="100"> </canvas>
31. 使用HTML5需要遵守哪些规则
新的特性应该基于HTML、CSS、DOM和JavaScript,
减少对外部插件的需求（如Flash）;
更好的错误处理；
更多的替换脚本的标志；
HTML5应与设备无关；
开发过程必须可视化；
33. 最新的HTML5标准中的API是什么
Canvas ：Canvas由HTML代码中定义的具有高度和宽度属性的可绘制区域组成。JavaScript代码可以通过一组完整的绘图函数访问该区域，这与其他常见的2D API类似，因此允许动态生成图形。Canvas 的一些预期用途包括构建图形、动画、游戏和图像合成。
媒体定时回放；
离线存储数据库；
文档编辑；
拖放；
跨文档消息传递；
浏览器历史管理；
MIME类型和协议处理程序注册；
34. LocalStorage本地存储在HTML5中有什么用途
localStorage本地存储相当于一个轻量级的数据库，可以在本地永久的储存数据（除非人为删除）。此外，还可以在断网情况下读取本地缓存的cookies。
使用localStorage保存数据： localStorage.setItem(key, value);
使用localStorage获取保存的数据: localStorage.getItem(key);
清除localStorage保存的数据：localStorage.removeItem(key);
清除全部localStorage对象保存的数据:localStorage.clear( )
35. 有关HTML5中新的输入类型属性
36. 对于web标准以及w3c有何理解与认识
于WEB而言：web标准简单来说可以分为结构、表现和行为。web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰；
于W3C而言： W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范，如下：
结构上的要求：
标签必须闭合、标签小写、不乱嵌套，可以提高搜索机器人对网页内容的搜索几率；
对于css和js来说：
建议使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容；
样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低维护成本、改版更方便；
不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性；
总之，遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。
37. 新的HTML5文档类型和字符集是什么
HTML5文档类型：<!doctype html>
字符集：HTML5使用的编码<meta charset=”UTF-8”>
38. 渐进增强和优雅降级之间的区别
渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果，交互等方面的改进和追加功能，以达到更好的用户体验。
优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
最后
喜欢的话别忘了关注、点赞哦~
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
可以添加V获取：vip1024c （备注前端）**
[外链图片转存中…(img-4mRF6OI3-1712143815465)]
最后
喜欢的话别忘了关注、点赞哦~
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
