前言又到了逃跑跳槽的时候了。由于一些个人原因，最近参加了很多面试，发现有很多基础的东西掌握的不够，所以总结一下，说说最近面试遇到的问题和我个人觉得的东西认为更重要。留给自己消化，分享给需要的朋友。谢谢，废话不多说，下面↓HTML1.Doctype函数，HTML5为什么只需要写doctype是标准通用标记语言文档类型声明，目的是告诉标准通用标记语言解析器以什么文档类型来定义DTD来解析文档.语句必须是HTML文档的第一行，位于html标记之前。HTML5不是基于SGML，所以没有必要引用DTD。在HTML5中只有一种SGML：StandardGeneralizedMarkupLanguage，是当今常用的超文本格式的最高级别标准2、什么是行内元素，什么是块级元素，什么是行内元素void元素的元素：aspaniimginputselectb等块级元素：divulollih1~h6ptable等空元素：brhrlink等3.简述自己对HTML语义的理解做对了thing，它有以下好处：有助于结构良好的HTML结构，便于搜索引擎的索引和抓取，便于SEO，便于分析不同的设备，便于构建清晰的组织，便于团队开发、维护4、常见的浏览器内核有哪些？下面介绍一下你对浏览器内核的理解。Trident内核：IEGecko内核：NETSCAPE6及以上，FirefoxPresto内核：Opera7及以上。【Opera内核原为：Presto，现为：Blink；】Webkit内核：Safari、Chrome等【Chrome：Blink（WebKit的一个分支）】浏览器核心可分为渲染引擎和JS引擎两部分.渲染引擎主要负责获取网页的内容、组织信息、计算网页的显示方式等，而JS引擎则负责解析Javascript语言并执行JavaScript语言，实现动态效果网页。5、html5有哪些新特性？语义标签：headerfooternavsectionarticleaside和其他增强形式：date（从日期选择器中选择一个日期）email（包含电子邮件地址的输入字段）number（值的输入字段）range（数值的输入字段在一定范围内）search（用于搜索字段）tel（定义输入电话号码字段）等videoandaudio：音频视频Canvas绘图SVG绘图geolocation：Geolocation拖放API：dragwebworker：是在后台运行JavaScript，独立其他脚本，不会影响页面的性能webstorage:localStoragesessionStorageWebSocket:HTML5开始提供在单个TCP连接上进行全双工通信的协议6.描述cookie、sessionStorage和localStorage的区别特征CookielocalStoragesessionStorage的生命周期可以设置过期时间，如果不设置，默认是关闭浏览器过期，除非手动清除，否则永久保存，仅有效在当前websession中，关闭页面或浏览器后将被删除清除存储的数据。存储数据的大小约为4KB，可以保存5MB的信息。http请求每次都会在HTTP头中携带。如果使用cookie保存过多的数据，会导致性能问题。它只保存在客户端（即浏览器），不参与与服务器的通信。通信7.如何实现浏览器中多个标签页之间的通信使用localStorage:localStorage.setItem(key,value),localStorage.getItem(key)websocket协议webworker多个标签页之间的通信8.HTML5如何使用离线存储，讲解工作原理HTML5离线存储原理9.src和href的区别区别：src用来替换这个元素，href用来建立这个标签和外部资源的关系这里浏览器加载时不会暂停html的渲染和解析，同时进行css文件的加载当浏览器解析这段代码10.表单提交中Get和Post方法的区别Get一般用于从服务器获取数据，Post向服务器传输数据Get传输的数据拼接在Url之后，用户可见;Post传输的数据对用户是不可见的，Get传输的数据量较小，不能大于2KB，Post传输的数据量比较大，一般默认为无限制，get是安全的安全性很低，Post的安全性高，提交FORM时，如果不指定Method，默认是Get请求CSS1.css盒子模型，box-sizing属性的理解。css盒子model由content（内容）、padding（内边距）、bord组成er（边框）和margin（外边距）。但是盒子的大小是由content+padding+border这几个部分决定的。Box-sizing是一个CSS3属性，与盒子模型密切相关。即决定了元素的宽度如何计算高度，box-sizing有3个属性：box-sizing:content-box|border-box|inherit:content-box使得元素的宽高等于内容区域的宽度和高度（默认模式）border-box：计算方法content+padding+border=元素本身的大小，即内容的大小被缩小。inherit指定box-sizing属性的值，应该从父元素继承。脱离文档的标准流程，如果不知道浮动，会导致父元素的高度塌陷，影响页面布局。清除浮动的方法：为父元素设置高度，在父元素中添加overflow:hidden伪元素。fix::after{content:"";显示：块；clear:both;}使用伪元素的好处：没有多余的DOM节点，符合语义overflow:hidden可以触发BFC机制。BFC：block-levelformattingcontext，创建BFC的元素是一个独立的盒子，规定了里面如何布局，而这个独立盒子里的布局不受外面的影响，当然也不会影响外面的元素,在计算BFC的高度时，浮动元素也参与计算3.如何让一个宽度和高度可变的盒子水平和垂直居中。父亲{位置：相对；}.儿子{位置：绝对；顶部：0；右：0；底部：0；左：0；margin:auto;}css3property.father{position:relative;}.son{position:absolute;顶部：50%；左：50%；转换：翻译（-50%，-50%）；}flexlayout.father{显示：flex；证明内容：居中；align-items:center;}4.px与em和rem的区别px：像素，相对长度单位。Pixelpx是相对于显示器的屏幕分辨率的。em的值不固定。它将继承父元素的字体大小。表示倍数的rem的值是不固定的。它始终基于根元素。表示5的倍数。position的静态值有哪些：默认值。没有定位，元素出现在正常流中relative（相对定位）：生成一个相对定位的元素，相对于其正常（原始）位置定位absolute（绝对定位）：生成一个绝对定位的元素，相对于非静态定位固定(固定定位)：生成一个绝对定位的元素，相对于浏览器窗口定位6.display:none和visibility:hidden的区别任意空格，文档渲染时，该元素不存在（但仍然存在于文档对象模型树）。元素空间是否还存在会触发回流（reflow），而渲染只会触发重绘（redraw），因为没有改变位置是继承属性，不会进行渲染。该元素及其子元素将消失。它是一个继承的属性。如果子元素使用visibility:visible，则不会被继承，子元素会再次出现。7.CSS中的link与@import的区别在于link是一个XHTML标签。@import是CSS提供的一种方法。它只能加载CSS加载顺序的差异。加载页面时，link引用的CSS会同时加载，而@import引用的CSS会等到页面完全下载后再加载兼容性差异。由于@import是CSS2.1提出的，旧浏览器不支持，link标签不存在这个问题。使用javascript控制dom改变样式时，只能使用link标签，因为@import不受dom控制。8、什么是响应式设计，响应式设计的基本原理是什么？响应式网站设计是一个网站可以兼容多种终端，而不是针对每个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸并进行处理。9、为什么要初始化CSS样式因为浏览器兼容性问题，不同的浏览器对一些标签的默认值不同。如果CSS没有初始化，会经常出现浏览。浏览器页面显示差异初始化样式会对SEO有一定影响Newlineword-wrap,linear-gradientlinear-gradient实现旋转transform:rotate(90deg),zoomscale(0.85,0.90),translate(0px,-30px)定位、倾斜skew(-9deg,0deg)；添加了更多CSS选择器、多重背景和rgba()引入的唯一伪元素是::selection;实现媒体查询@media，多栏布局flex转场动画11.::before和:after中的双冒号和单冒号有什么区别？解释这两个伪元素的作用。单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成），目前规范中引入双冒号来区分伪类和伪元素12.CSS优化和性能提升的方法有哪些去除空css规则（RemoveEmptyrules)正确使用displayproperties不要滥用float，webfonts不要声明太多font-sizes不要在selectors中使用IDidentifiers遵守boxmodel规则最小化页面重排和重绘Abstraction提取公共样式，减少代码量13.RedrawingandreflowRedrawingandreflowing14.flexlayoutflexlayouttutorial--RuanYifeng15.csspreprocessor提供了写css的方法，常见的有SAAS文档和LESS文档Postscript这只是一道前端面试题A部分内容后续会持续更新。感兴趣的朋友可以点这里，或者扫描下方二维码关注我的微信公众号，查看更多前端小片段，欢迎star关注
