HTMLpart1.你是如何理解HTML语义的？第一步：首先举个例子说明，HTML语义简单来说就是用正确的标签做正确的事。比如用p标签表示段落，h1-h6标签表示标题，article表示文章等。Step2：说说为什么要用语义标签前期：前端工作主要由后台完成-终端人员，即现场阶段，使用表格布局中期：美工使用div+css完成当前：专业的前端开发应该使用合适的标签来表达页面结构的正确含义，让页面有一个良好的结构和意义，可以有效提高：辅助功能：帮助辅助技术更好地阅读和翻译您的网页，有利于无障碍阅读；可检索性：具有良好的结构和语义，可以提高搜索引擎的有效抓取，增加网站流量；国际化：世界上只有13%的人口以英语为母语，因此通用的语义标签可以使来自世界各地的开发人员更容易了解您网页的结构；互操作性：减少网页之间的差异，帮助其他开发者了解你网页的结构，方便后期的开发和维护2.metaviewport是做什么用的，怎么写？第一步：使用目的是防止用户在移动端缩放页面。第二步：怎么写第三步：解释每个词的意思with=device-width设置布局视口的宽度为设备屏幕分辨率的宽度initial-scale=1页面初始缩放比例为屏幕分辨率的宽度maximum-scale=1指定最大比例theusercanzoominminimum-scale=1指定用户可以缩小的最大比例3.什么是H5？总之，营销页面不是HTML54.label标签的功能。label标签定义了表单控件之间的关系。当用户选择标签时，浏览器会自动将焦点放在与标签相关的表单控件上。编号：5.CSS3中新的伪类有哪些：CSS3新的伪类示例：p:first-of-type选择属于其父元素的第一个元素的每个元素。p:last-of-type选择作为其父元素的最后一个元素的每个元素。p:only-of-type选择作为其父元素的唯一元素的每个元素。p:only-child选择作为其父元素的唯一子元素的每个元素。p:nth-child(2)选择作为其父元素的第二个子元素的每个元素。:enabled:disabled控制表单控件的禁用状态。:checked单选或复选框被选中。6、如何禁止a标签中的href跳转到页面或定位链接e.preventDefault();href="javascript:void(0);7、设置canvas的宽高有什么区别在标签上设置样式画布的宽高标签的宽高就是画布的实际宽高，绘制的图形都在这上面，样式的宽高就是高度和在浏览器中渲染的画布的宽度。如果画布的宽度和高度没有指定或者有一个值如果不正确，它将被设置为默认值。8.你在哪些浏览器上测试过页面？这些浏览器的内核是什么?IE:tridentcoreFirefox:geckocoreSafari:webkitcoreOpera:以前是prestoKernel，Opera现在已经切换到GoogleChrome的Blink内核Chrome:Blink（基于webkit，由Google和OperaSoftware共同开发)9、iframe的缺点是什么?iframe是frame的一种，也是一种很常见的网页嵌入方式。iframe的优点：1.iframe可以完整显示嵌入的网页。2、如果多个网页都引用了iframe，那么只需要修改iframe的内容就可以实现调用的每个页面内容的变化，方便快捷。3、如果网页为了风格统一，页眉和版本相同，可以写成一个页面，用iframe嵌套，可以增加代码的复用性。4、如果遇到加载缓慢的图标、广告等第三方内容，这些问题都可以通过iframe来解决。iframe的缺点：1、会生成很多页面，不好管理。2.iframe的框架结构有时会让人迷惑。如果框架过多，可能会出现上下左右的滚动条，分散访问者的注意力，造成用户体验不佳。3、代码复杂，无法被部分搜索引擎收录。这个非常重要。现在的搜索引擎爬虫不能很好的处理iframe中的内容，所以使用iframe不利于搜索引擎优化。4.很多移动设备（PDA手机）无法完整显示边框，设备兼容性差。5、iframe框架页面会增加服务器的http请求，大型网站不可取。现在基本都是用Ajax代替iframe，所以iframe也逐渐退出了前端开发。十、HTML5新特性1、本地离线存储localStorage长期存储数据，关闭浏览器后数据不会丢失；sessionStorage数据在浏览器关闭后自动删除；新技术webworker、websocket、Geolocation；11、浏览器如何响应如何管理和加载HTML5离线存储资源？在线时，浏览器在html头中找到manifest属性，就会请求manifest文件。如果是第一次访问app，浏览器会根据manifest文件的内容下载相应的资源并离线存储。如果app被访问过，并且资源已经离线存储，浏览器会使用离线资源加载页面，然后浏览器会比较新的manifest文件和旧的manifest文件，如果文件没有变化，什么都不做，如果文件发生变化，文件中的资源会被重新下载并离线存储。离线时，浏览器直接使用离线存储的资源。12.Doctype的作用是什么？如何区分严格模式和混合模式？它们的意义是什么？(1)、声明位于文档的顶部，标签之前。告诉浏览器在哪种模式下呈现文档。(2)严格模式的排版和JS运行模式以浏览器支持的最高标准运行。(3)在混杂模式下，页面以松散的向后兼容方式显示。模拟旧浏览器的行为以防止网站无法正常工作。(4)、DOCTYPE不存在或格式不正确会导致文档以混合模式呈现。复制代码你知道多少种Doctype文档类型？此标记声明了三种DTD类型，分别表示严格的、临时的和基于框架的HTML文档。HTML4.01指定了三种文档类型：Strict、Transitional和Frameset。XHTML1.0指定了三种XML文档类型：Strict、Transitional和Frameset。标准模式（又名严格呈现模式）用于呈现符合最新标准的网页，而怪癖（又名松散呈现模式或兼容模式）用于呈现为旧版浏览器设计的网页。13.HTML和XHTML——两者有什么区别：1.所有标签必须有对应的结束标签2.所有标签元素和属性的名称必须小写3.所有XML标签必须合理嵌套4.所有属性必须用引号""括起来5.编码所有<和&特殊符号6.给所有属性赋值7.注释内容不要使用"--"8.图片必须有说明文字复制代码由于文章篇幅限制，无法以文本形式展示所有面试题。本文为大家挑选了一些面试题。需要的程序员（元）可以在文末获取~CSSpart1页面渲染时，可以通过box-sizing设置dom元素采用的布局模型。根据计算出的宽高区域可以分为：content-box（W3C标准盒模型）border-box（IE盒模型）padding-box（FireFox曾经支持）margin-box（浏览器未实现）Tips：理论上是的以上4种框，但是现在w3c和mdn规范都只支持content-box和border-box；2、iebox模型统计border、padding和自身（不包括margin），标准只统计自身的formsizecss设置方法如下：标准模型：box-sizing:content-box；IE模型：box-sizing:border-box3.获取宽高的几种方式：dom.style.width/height该方法只能获取dom元素的内联样式设置的宽高，也就是说，如果在style标签或outlineCSS文件中设置了节点的样式，则无法通过该方法获取dom的宽高。dom.currentStyle.width/height该方法获取的是页面渲染完成后的结果，也就是说不管样式是通过哪种方式设置的，都可以获取到。但是这种方法只有IE浏览器支持。window.getComputedStyle(dom).width/height该方法原理同2，该方法兼容更多浏览器，通用性更好。dom.getBoundingClientRect().width/height该方法是根据元素在窗口中的绝对位置获取dom.offsetWidth/offsetHeight的宽高。这个没什么好说的，最常用，最好兼容。4.扩展各种宽高获取方式：获取屏幕高宽（屏幕分辨率）：window.screen.height/width获取屏幕工作区高宽（去掉状态栏）：window.screen.availHeight/availWidth网页全文的高度和宽度：document.body.scrollHeight/Width滚动条向上滚动的高度和向右滚动的宽度：document.body.scrollTop/scrollLeft高度和网页可见区域的宽度（无边框）：document.body.clientHeight/clientWidth网页可见区域的高度和宽度（带边框）：document.body.offsetHeight/offsetWidth5.css优先级判定级别：每个选择器都有一个权重，权重越大，继承样式的优先级越低自己指定样式！important优先级最高的js在权重相同的情况下不能修改，靠近高位的元素的样式优先级为内联样式表（标签内）>内部样式表（当前文件内）>外部样式sheet（在外档）由于文章篇幅所限，无法以文字形式展示所有面试题。本文为大家挑选了一些面试题。需要的程序员（元）可以在文末获取~JavaScript1.JS中垃圾回收机制的必要性：由于字符串、对象、数组没有固定的大小，只有在大小合适的情况下才能动态分配已知。每次JavaScript程序创建字符串、数组或对象时，解释器都必须分配内存来存储该实体。只要内存是这样动态分配的，它最终必须被释放，这样才能被重用，否则，JavaScript解释器将消耗掉系统中所有可用的内存，导致系统崩溃。这段话解释了为什么系统需要垃圾回收。与C/C++不同，JS有自己的垃圾回收机制（GarbageCollection）。JavaScript解释器可以检测程序何时不再使用某个对象。当他确定一个对象无用时，他就知道这个对象不再需要了，它占用的内存就可以释放了。例如：vara="helloworld";varb="world";vara=b;//这时候会释放“helloworld”，释放内存，这样垃圾回收方法就可以再次被引用：markclearing,countingreferences。Markclear这是最常见的垃圾回收方式。当变量进入环境时，它被标记为“进入环境”。按理来说，进入环境的变量占用的内存永远无法释放，进入环境的变量也永远无法释放。只要执行进程进入相应的环境，就可以使用占用的内存。当离开环境时，它被标记为离开环境。垃圾收集器在运行时，会对内存中存储的所有变量进行标记（全部添加），然后清除环境变量中的变量和环境变量中变量引用的变量（有条件清除标记），删除所有被标记的变量，被删除的变量在环境变量中无法访问所以会被删除，最后垃圾回收器完成内存清理工作，回收它们占用的内存。另一种不太常见的引用计数方法是引用计数法。引用计数法是指每个值未被引用的次数。当声明一个变量，并为该变量赋值一个引用类型的值时，该值对该值的引用次数为1；反之，如果包含对这个值的引用的变量获得了另一个值，则对原引用值的引用次数将减1。当对这个值的引用次数为0时，表示没有没有办法再次访问这个值，所以占用的内存被回收，这样当垃圾收集器再次运行时，它会释放这些引用计数为0的值。会出现内存泄漏引用计数方法。我们来看原因：functionproblem(){varobjA=newObject();varobjB=newObject();objA.someOtherObject=objB;objB.anotherObject=objA;}在这个例子中，objA和objB是指通过各自的属性相互联系。在这种情况下，两个对象的引用计数为2。在使用引用计数的策略中，由于函数执行后两个对象离开作用域，函数执行完毕后，因为计数不为0，这样的相互引用如果数量多的话会造成内存泄漏。特别是在DOM对象中，很容易出现这样的问题：varelement=document.getElementById('');varmyObj=newObject();myObj.element=element;element.someObject=myObj;这样就不会有垃圾回收的过程。2、说说Commonjs、AMD和CMD。模块是可以实现特定功能的文件。有了模块，你就可以很方便的使用别人的代码，你可以加载任何你想要的功能的模块。Commonjs：从服务端模块化开始，同步定义模块化，每个模块都是一个独立的作用域，模块输出，modules.exports，模块加载require()导入模块。AMD：中文名异步模块定义的意思。requireJS实现了AMD规范，主要用于解决以下两个问题。1、多个文件存在依赖关系，被依赖的文件需要比被依赖的文件更早加载到浏览器中。2、浏览器在加载时会停止页面渲染。加载的文件越多，页面无响应的时间就越长。语法：requireJS定义了一个函数define，它是一个全局变量，用来定义模块。requireJS示例：//定义模块define(['dependency'],function(){varname='Byron';functionprintName(){console.log(name);}return{printName:printName};});//加载模块require(['myModule'],function(my){my.printName();}requirejs定义了一个函数define，它是一个全局变量，用来定义模块：define(id?dependencies?,factory)使用页面上的模块加载函数：require([dependencies],factory);总结一下AMD规范：require()函数在加载依赖函数时异步加载，这样浏览器就不会丢失响应，回调函数它指定，只有前面的模块加载成功才会执行，因为网页在加载js的时候会停止渲染，所以我们可以异步加载js，如果需要依赖的东西，我们也会异步依赖，并且依赖一些方法后执行3.对象深度克隆函数的简单实现deepClone(obj){varnewObj=objinstanceofArray?[]:{};for(variteminobj){vartemple=typeofobj[item]=='object'?deepClone(obj[item]):obj[item];newObj[item]=temple;}returnnewObj;}ES5是一种常用的对象克隆方法。注意，数组是对象，但又不同于对象，所以我们一开始就判断了一些类型，决定newObj是对象还是数组~由于文章篇幅所限，无法全部展示文本形式的面试问题。本文为大家精选了一些面试题，有需要的程序员（元）可以在文末领取~Vuepart1.nextTick在下一个dom更新周期结束后执行一个延迟回调，可以用来获取更新的dom状态。新版本中默认是microtasks，v-on会使用macrotasks执行macrotasks任务：osetImmediate/MessageChannel/setTimeout2。什么是vue生命周期一个Vue实例从创建到销毁的过程就是生命周期。即从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称之为Vue的生命周期。3.vuexstate：状态中心mutations：改变状态actions：异步改变状态getters：获取状态modules：将状态分成多个模块，方便管理的作用主要是高效更新虚拟DOM。另外，在vue中使用同标签名元素的transition时，也会用到key属性。目的也是为了让vue能够区分它们，否则vue只会替换其内部属性而不会触发过渡效果。5.为什么data在Vue组件中必须是一个函数？在newVue()中，数据可以作为一个对象来操作，但是在组件中，数据只能以函数的形式存在，不能直接给它赋值对象。当data选项为函数时，每个实例都可以维护一份独立的返回对象副本，这样每个实例中的数据就不会相互影响，是独立的。6.v-for和v-if的优先级v-for的优先级高于v-if。7.说出vue中至少4种指令及其用法v-if（判断是否隐藏）v-for（遍历数据）v-bind（绑定属性）v-model（实现双向绑定）8.vue中子组件调用父组件的方法第一种方法是在子组件中通过this.$parent.event直接调用父组件的方法。第二种方法是在子组件中使用$emit向父组件触发事件，父组件只需要监听该事件即可。第三种是父组件将方法传递给子组件，在子组件中直接调用这个方法。9、vue中父组件调用子组件的方法。父组件使用ref属性来操作子组件的方法。parent:child:method:{test(){alert(1)}}在父组件中调用test，即this.$refs.childMethod.test()10。vuepage层级组件之间传值1.使用vue-router传递带有跳转链接的参数。2.使用本地缓存localStorge。3.使用vuex数据管理传值。11.说说vue的动态组件。多个组件通过同一个挂载点切换组件。如果值为whichcomponent的名字，那么页面上会显示哪个component。主要检查这个组件的is属性。由于文章篇幅所限，无法以文字形式展示所有面试题。本文为大家挑选了一些面试题。需要的程序员（元）可以在文末获取~服务器和网络部分1.常用状态码1xx：已接受，继续处理200：成功，并返回数据201：已创建202：已接受203：成为，但是未授权204：成功，无内容205：成功，重置内容206：成功，部分内容301：永久移动，重定向302：临时移动，可以使用原URI304：资源未修改，缓存可以被使用305:需要代理访问400:请求语法错误401:需要认证403:请求被拒绝404:资源不存在500:服务器错误2.get/postget:缓存，请求长度有限，会被记录在历史中o无副作用（不修改资源），幂等（请求次数与资源无关）场景贴：安全，大数据，多编码两种类型详细对比如下：3.WebsocketWebsocket是一个持久化的协议，基于http，服务端可以主动推送兼容：oFLASHSockettolongpolling：定时发送ajaxolongpoll：send-->有消息时，respondnewWebSocket(url)ws.onerror=fnws.onclose=fnws.onopen=fnws.onmessage=fnws.send()4、TCP三次握手建立连接前，客户端和服务器需要通过握手相互确认：客户端发送syn(同步序列号)请求，输入syn_send状态，等待确认server收到syn包并确认后发送syn+ack包，进入syn_recv状态client收到syn+ack包后发送ack包，双方进入established状态5.TCP四次Wavingclient--FIN-->server,FIN—WAITserver--ACK-->client,CLOSE-WAITserver--ACK,FIN-->client,LAST-ACKclient--ACK-->服务器端，CLOSED期末面试是最直接有效的跳槽加薪方式。现在你可以开始准备明年春天的面试了。您准备好接受建造飞机并搞砸工作的面试了吗？掌握这些知识点，你就能在面试中脱颖而出，爆击9999分的机会是留给有准备的人的。只有充分的准备，才能从候选人中脱颖而出。快速入门频道：（点此）下载！满满的诚意！！！整理不易，觉得有帮助的朋友可以帮忙点赞分享支持小编哦~您的支持就是我的动力；祝大家前程似锦，优惠不断！！！
