HTML知识点
文章目录 HTML知识点前言一、H5的新特性知道有哪些二、css3新特性三、怎么实现水平居中，怎么垂直居中四、盒模型五、display:none和 visibility：hidden区别六、响应式布局实现的几种方法1.弹性布局2.bootstrap3.Media Query媒体查询 七、js有哪些基本数据类型八、前端跨域问题九、setInterval与setTimeout的区别十、Vue常用7个属性十一、vue的生命周期十二、模块化开发的理解什么是模块化 十三、浅拷贝与深拷贝十四、var、let与const的异同。十五、HTTP与HTTPS有什么区别十六、宏任务和微任务详解十七、inline和inline-block的差别十八、写出五大主流浏览器的内核名称十九、JSON基础与使用以及实例演示二十、虚拟DOM 前言跟大家分享一下自己接触到的，或则收集到可能会用到的前端面试资料~
一、H5的新特性知道有哪些 1、用于绘画的canvas元素； 2、用于媒介回放的video和audio元素； 3、对本地离线存储的更好的支持； 4、新的特殊内容元素，比如article、header、nav等； 5、新的表单控件，比如date、time等；html5总的来说比html4多了十个新特性，但其不支持ie8及ie8以下版本的浏览器： https://·blogs.com/DSC1991/p/8665891.html
setIntervalsetInterval()方法可按照指定的周期来调用函数或者计算表达式（以毫秒为单位）
语法：
setInterval(函数表达式，毫秒数)；
setInterval()会不停的调用函数，直到clearInterval()被调用或者窗口被关闭，由 setInterval()返回的ID值可用作clearInterval()方法的参数。
setTimeoutsetTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式（以毫秒为单位）
语法：
setTimeout(函数表达式，毫秒数)；
setTimeout()只执行函数一次，如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout()
十、Vue常用7个属性Vue常用7个属性
1.el属性 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。 2.data属性 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。 3.template属性 用来设置模板，会替换页面元素，包括占位符。 4.methods属性 放置页面中的业务逻辑，js方法一般都放置在methods中 5.render属性 创建真正的Virtual Dom 6.computed属性 用来计算 7.watch属性 watch:function(new,old){} 监听data中数据的变化 两个参数，一个返回新值，一个返回旧值， 十一、vue的生命周期官网给的vue生命周期的图：
总结下来就是：
beforecreate-->created-->beforemount-->mounted-[->beforeUpdate-->updated-]->beforeDestory-->destoryed
十二、模块化开发的理解 什么是模块化谈谈你对模块化开发的理解？
所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数
（一）使用函数封装
functionfunc1(){ //... } functionfunc2(){ //... }（二）使用对象封装
varobj = { age : 0, func1 : function (){ //... }, func2 : function (){ //... } };（三）立即执行函数写法
var oj= (function(){ var _age= 0; var func1= function(){ //... }; var func2= function(){ //... }; return { m1 : func1, m2 : func2 }; })();（四）放大模式
var obj =(function (mod){ mod.func3= function () { //... }; returnmod;//方便方法连续调用 })(obj);（五）宽放大模式（Loose augmentation）
var obj =( function (mod){ //... returnmod; })(window.obj|| {});//确保对象不为空（六）输入全局变量
(function(window, undefined ) { //... })(window ); 十三、浅拷贝与深拷贝浅拷贝与深拷贝
深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。
深拷贝和浅拷贝的示意图大致如下：
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象与原对象不共享内存，修改新对象不会改到原对象。
十四、var、let与const的异同。var:
var 声明的变量在执行上下文创建阶段就会被「创建」和「初始化」，因此对于执行阶段来说，可以在声明之前使用。 let 声明的变量在执行上下文创建阶段只会被「创建」而不会被「初始化」，因此对于执行阶段来说，如果在其定义执行前使用，相当于使用了未被初始化的变量，会报错。let与const:
const 与 let 很类似，都具有上面提到的 let 的特性，唯一区别就在于 const 声明的是一个只读变量，声明之后不允许改变其值。因此，const 一旦声明必须初始化，否则会报错。 十五、HTTP与HTTPS有什么区别HTTPS和HTTP的区别主要如下： 1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。 2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。 3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。 4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
十六、宏任务和微任务详解https://·/suihang/p/13450709.html
十七、inline和inline-block的差别布局方式相同，唯一的区别在inline-block可以设置宽高，inline不可以。另外：inline设置上下内边距和上下外边距会造成一些mess。
十八、写出五大主流浏览器的内核名称 IE浏览器：Trident是IE的内核TRident是IE的内核，也就是国内双核浏览器的内核之一。Trident内核一直延续到IE11，IE11的后继者Edge采用了新内核EdgeHTML。
Firefox浏览器：Gecko是FireFox的内核 Gecko是Netscape6Z开始采用的内核，是一个开源内核，后来被FF(FireFox)采用。
Safari浏览器：Webkit是Safari的内核 Webkit的鼻祖是Safari,其前身是KDE(Linux的桌面系统)的KHTML。Webkit也是开源的。 注意Webkit其实包括是渲染引擎Webcore(前身是KHTML),以及JS引擎JSCore。
Chrome浏览器：webkit是Chrome的内核–> Chromium（Blink，V8）是Chrome的内核 Chromiun fork自webkit，代码可读性和编译速度得到提升。值得一提的是谷歌专门研发了自己的JS引擎—V8，极大地提高了JS的运算速度。由于Chromium也是开源的，所以搜狗、QQ、360都用Chromium内核。
Opera浏览器：Presto是Opera的内核–>Webkit是Opera的内核–>Chromium（Blink）是Opera的内核 Opera是挪威Opera Software ASA公司旗下的浏览器。1995年，opera公司发布第一版Opera浏览器，使用自己研发的Presto内核。当时opera公司的开发团队不断完善Presto内核，使Opera浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了Oprea浏览器，从此也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。
总结
IE浏览器内核：Trident内核，也是俗称的IE内核；Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；Firefox浏览器内核：Gecko内核，俗称Firefox内核；Safari浏览器内核：Webkit内核；Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；360浏览器、猎豹浏览器内核：IE+Chrome双内核；搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；百度浏览器、世界之窗内核：IE内核；2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核； 十九、JSON基础与使用以及实例演示 var JSONObject= { "name":"大白菜", "url":"https://mrdjun.github.io/", "slogan":"热爱知识，传递技术！" }; document.getElementById("goodsname").innerHTML=JSONObject.name // innerHTML在JS是双向功能：获取对象内容 或 向对象插入内容； //在这是向id为goodsname的对象插入JSONObject.name内容 //即将HSONObject的name属性的值赋给goodsname document.getElementById("goodsurl").innerHTML=JSONObject.url document.getElementById("goodsslogan").innerHTML=JSONObject.slogan 二十、虚拟DOM 什么是虚拟DOM、虚拟DOM是对DOM的抽象，本质上是JavaScript对象，这个对象就是更加轻量级的对DOM的描述。
为什么需要虚拟DOM 首先，前端性能优化的一个秘诀就是尽可能少地操作DOM，不仅仅是DOM相对较慢，更因为频繁变动DOM会造成浏览器的回流或者重回，这些都是性能的杀手，因此我们需要这一层抽象，在patch过程中尽可能地一次性将差异更新到DOM中，这样保证了DOM不会出现性能很差地情况。其次，现代前端框架地一个基本要求就是无须手动操作DOM，一方面是因为手动操作DOM无法保证程序性能，多人协作地项目中如果review不严格，可能会有开发者写出性能较低地代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率。最后，虚拟DOM最初的目的，就是为了更好的跨平台，比如Node.js就没有DOM，如果想实现SSR（服务端渲染），那么一个方式就是借助虚拟DOM，因为虚拟DOM本身是JavaScript对象。 http协议http请求由三部分组成，分别是：请求行、消息报头、请求
推荐：前端面试（2）：https://blog.csdn.net/weixin_45266979/article/details/122704709
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #前端面试知识点
