Html

利用 ES5 的 Object.defineProperty 实现let student = {};let age = undefined;Object.defineProperty(student, 'age', { get: function() { // 获取该属性时触发 return age; }, set: function(val) { // 设置该属性值时触发 age = val; }});student.age = 20;console.log(student.age); // 20利用 ES6 的 Proxy 实现let student = new Proxy( {}, { get: (obj, prop) => { // 获取该属性时触发 return obj[prop]; }, set: (obj, prop, value) => { // 设置该属性值时触发 obj[prop] = value; return true; } });student.age = 20;console.log(student.age); // 20文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

JS 内存生命周期调配你所须要的内存应用调配到的内存（读、写）不须要时将其开释、偿还什么是垃圾回收机制？垃圾回收机制就是找出那些不再持续应用的值，而后开释其占用的内存空间。垃圾回收器每隔固定的时间段就执行一次开释操作 垃圾回收执行的形式有哪些？标记革除 不能开释“进入环境”的变量所占的内存，只有执行流进入相应的环境，就有可能用到他们。而当变量来到环境的时候，则将其标记为“来到环境”进行标记的形式有很多种：翻转某个非凡位来来记录一个变量何时进入环境；应用一个“进入环境”变量列表和一个“来到环境”列表垃圾回收器在运行的时候会给所有变量都加上标记，而后，环境中的变量以及环境中的变量援用的变量，他们身上的标记会被去掉而在此之后再被加上标记的变量将被视为筹备删除的变量，起因是环境中的变量曾经无法访问到这些变量了最初，垃圾收集器实现内存革除工作，销毁那些带标记的值并回收它们所占用的内存空间援用计数跟踪记录每个值被援用的次数 当申明了一个变量，并将一个援用类型值赋值给该变量时，则这个值的援用次数就是 1如果同一个值又被赋给另外一个变量，则该值得引用次数加 1相同，如果蕴含对这个值援用的变量又获得了另外一个值，则这个值的援用次数减 1当这个值的援用次数变成 0 时，则阐明没有方法再拜访这个值了，因此就能够将其占用的内存空间回收回来这样，当垃圾收集器下次再运行时，它就会开释那 些援用次数为零的值所占用的内存循环援用如果在 IE 中是不会被革除的，必须要手动革除。否则会导致内存泄露文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

事件循环机制在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的工作解决是比较复杂的，但关键步骤如下： 执行一个宏工作（栈中没有就从事件队列中获取）执行过程中如果遇到微工作，就将它增加到微工作的工作队列中宏工作执行结束后，立刻执行以后微工作队列中的所有微工作（顺次执行）以后宏工作执行结束，开始查看渲染，而后 GUI 线程接管渲染渲染结束后，JS 线程持续接管，开始下一个宏工作（从事件队列中获取）流程图如下： <img src="https://noxussj.top:3000/41/1.png"></img> 那么什么是宏工作和微工作呢？ 宏工作(macro)task（又称之为宏工作），能够了解是每次执行栈执行的代码就是一个宏工作（包含每次从事件队列中获取一个事件回调并放到执行栈中执行） 浏览器为了可能使得 JS 外部(macro)task 与 DOM 工作可能有序的执行，会在一个(macro)task 执行完结后，在下一个(macro)task 执行开始前，对页面进行从新渲染 (macro)task 次要蕴含：script(整体代码)、setTimeout、setInterval微工作microtask（又称为微工作），能够了解是在以后(macro) task 执行完结后立刻执行的工作。也就是说，在以后(macro)task 工作后，下一个(macro)task 之前，在渲染之前。 所以它的响应速度相比 setTimeout（setTimeout 是(macro)task）会更快，因为无需等渲染。也就是说，在某一个 macrotask 执行完后，就会将在它执行期间产生的所有 microtask 都执行结束（在渲染前） microtask 次要蕴含：Promise.then、await 办法前面的代码属于.then（await 相当于一个 Promise）栗子async function async1() { console.log('A'); await async2(); console.log('B');}async function async2() { console.log('C');}console.log('D');setTimeout(function() { console.log('E');});async1();new Promise(function(resolve) { console.log('F'); resolve();}).then(function() { console.log('G');});console.log('H');首先咱们须要明确以下几件事件 工作队列次要包含以下 3 个，宏工作队列、微工作队列、执行栈 一开始执行栈，以及微工作队列为空，宏工作只有一个 script 代码块执行栈为空时，就把下一个宏工作增加到执行栈中运行开始运行宏工作 script程序往下执行遇到了 console.log('D')，这个时候间接打印后果为： // D而后持续往下执行遇到了 setTimeout，它属于宏工作所以先把它增加到宏工作队列中工作队列状态如下执行栈：script宏工作队列：setTimeout微工作队列：空持续往下执行遇到了 async1()办法，运行该办法遇到了 console.log('A')，间接打印后果为：// D A持续往下执行遇到了 async2()办法，运行该办法遇到了 console.log('C')，间接打印后果为：// D A Casync2()办法内的程序都执行结束，回到上一层 async1()中，遇到 console.log('B')，它在 await async2() 的前面，所以属于异步并且增加到微工作队列中，而后回到最里面一层工作队列状态如下执行栈：script宏工作队列：setTimeout微工作队列：console.log('B')持续往下执行遇到了 new Promise()，该作用域内同步工作。执行作用域内办法，遇到了 console.log('F')，间接打印后果为：// D A C F持续往下执行遇到了.then 属于异步，将 then 外部的代码增加到微工作队列中 工作队列状态如下 执行栈：script 宏工作队列：setTimeout 微工作队列：console.log('B')、console.log('G')该 new Promise 办法执行结束，回到最初里面，遇到了 console.log('H')，间接打印 后果为：// D A C F H以后 script 代码块程序执行结束，也就是以后宏工作执行结束。在执行该宏工作的过程中，如果某个微工作曾经准备就绪好了会标记一个准备就绪的状态将已就绪的微工作从微工作队列中增加到执行栈中 工作队列状态如下 执行栈：console.log('B')、console.log('G') 宏工作队列：setTimeout 微工作队列：空开始运行执行栈的工作，按程序执行间接打印 后果为：// D A C F H B G 工作队列状态如下 执行栈：空 宏工作队列：setTimeout 微工作队列：空以后的执行栈为空，则把宏工作队列中的 setTimeout 增加到执行栈中运行setTimeout 中遇到了 console.log('E')间接打印 后果为：// D A C F H B G E以后执行栈已执行结束，检测是否有微工作（没有），检测是否有宏工作（没有）。整个程序执行结束此题留下了一个问题，假如遇到多个 setTimeout 提早执行的工夫不同时，该如何执行？ ...

次要应用以下文件 config.js：ajax 申请配置外围文件 loading.js：element-ui 申请加载动画 index.js：二次封装 config.js 申请并导出该办法，配置申请拦截器、响应拦截器 index.vue：调用 ajax 的示例页面 留神：举荐在 api 目录对立治理所有接口，如果遇到报错请调整正确援用门路 config.js import loading from './loading.js'; // 加载动画类const animation = false; // 接口加载动画const intTimer = 10; // 接口申请超时工夫（秒）class Config { constructor(data) { this.method = data.method; this.url = data.url; this.param = data.param || {}; this.header = data.header || {}; this.interceptors = data.interceptors; this.response = data.response; return this.filter(); } // 创立XHR对象 createXHR() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } else { // code for IE6, IE5 return new ActiveXObject('Microsoft.XMLHTTP'); } } // HTTP申请 xhrRequest(header, method, url, param, async, interceptors, response) { return new Promise(resolve => { var xhr = this.createXHR(); if (animation == true) { loading.requestStart(); // 执行动画 } // 申请拦挡 if (interceptors({ header, method, url: this.url, param: this.param, async })) { xhr.open(method, url, async); xhr.timeout = 1000 * intTimer; //设置xhr申请的超时工夫 Object.keys(header).map(key => { xhr.setRequestHeader(key, header[key]); }); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; application/json; charset=utf-8'); xhr.send(param); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { loading.requestEnd(); // 完结动画 try { let data = JSON.parse(xhr.responseText); resolve(response(data, { header, method, url: this.url, param: this.param, async })); } catch (error) { console.log('接口返回没有任何信息!'); resolve(false); } } else { return 'request is unsucessful ' + xhr.status; } }; } else { console.error('request interceptor', '申请未收回, 申请拦截器已失效!'); } // 申请超时办法 xhr.ontimeout = function(e) { console.log('接口申请超时!'); loading.requestEnd(); // 完结动画 }; // 申请错误方法 xhr.onerror = function(e) { console.log('接口申请失败'); loading.requestEnd(); // 完结动画 }; }); } // 参数转换 convParams(param) { let mark = '?'; let hasMark = this.url.indexOf(mark) > 0; // 是否蕴含特殊字符 if (hasMark) { mark = '&'; } let newParams = ''; let i = 0; for (let key in param) { if (i > 0) { newParams += `&${key}=${param[key]}`; } else { newParams += `${mark}${key}=${param[key]}`; } i++; } return newParams; } // 数据GET、POST申请解决 filter() { let obj = { header: this.header, method: this.method, url: this.url, param: {}, async: true, interceptors: this.interceptors, response: this.response }; // 接口名称拼接地位：(1、url) (2、param) let newParams = this.convParams(this.param); if (this.method == 'GET') { obj.url += newParams; } else { newParams = newParams.replace('?', ''); obj.param = newParams; } return this.xhrRequest(obj.header, obj.method, obj.url, obj.param, obj.async, obj.interceptors, obj.response); }}export default Config;loading.js ...

数据类型根本类型 String、Number、Boolean、Null、Undefined援用类型 Object、Array、Function判断数据类型的形式1. 应用 typeof typeof 'test' // stringtypeof 1880 // numbertypeof true // booleantypeof null // objecttypeof undefined // undefinedtypeof {} // objecttypeof [] // objecttypeof function() {} // function毛病：判断根本类型还是能够的，判断援用类型作用就没那么大了。无奈校验数组、对象、Null 2. 应用 constructor let xiaoming = 'text';xiaoming.constructor // String(){}let xiaoming = 1880;xiaoming.constructor // Number(){}let xiaoming = true;xiaoming.constructor // Boolean(){}let xiaoming = null;xiaoming.constructor // 报错let xiaoming = undefined;xiaoming.constructor // 报错let xiaoming = {};xiaoming.constructor // Object(){}let xiaoming = [];xiaoming.constructor // Array(){}let xiaoming = function() {};xiaoming.constructor // Function(){}毛病：无奈校验 Null 和 Undefined ...

三者都是扭转 this 指向的 api 用法apply：xxx.apply(this, [arg1, arg2]) call：xxx.call(this, arg1, arg2) bind：xxx.bind(this, arg1, arg2) 区别次要是传参形式和执行形式不同 apply、call 的区别：承受参数的形式不一样bind：不立刻执行。而 apply、call 立刻执行栗子初始状态 let Person = function(name, age) { this.name = name; this.age = age;};let Student = function() { this.class = 'classA'; this.run = function() { console.log(this); };};let student = new Student();student.run();<img src="https://noxussj.top:3000/38/1.png"></img> 能够看见这个时候打印的 this 是指向 Student 构造函数，并且和 Person 构造函数没有任何关联 应用 apply 扭转 this 指向let Person = function(name, age) { this.name = name; this.age = age;};let Student = function() { this.class = 'classA'; this.run = function() { Person.apply(this, ['xiaoming', 20]); console.log(this); };};let student = new Student();student.run();<img src="https://noxussj.top:3000/38/2.png"></img> ...

this 的指向不是在创立时就决定了，而是由执行环境决定的，包含全局环境、对象环境、构造函数环境、事件对象 全局环境全局环境下，this 就代表 window 对象 var name = 'xiaoming';function say(){ console.log(this.name);}say(); //xiaomig对象环境对象环境指向对象 var obj = { name : "xiaoming", say : function(){ console.log(this.name); }}obj.say(); //xiaoming构造函数环境构造函数中的 this 会指向创立进去的实例对象 function Person() { this.name = 'xiaoming';}var p = new Person();console.log(p.name); // xiaoming事件对象在 DOM 事件中应用 this，this 指向了触发事件的 DOM 元素自身 li.onclick = function(){ console.log(this.innerHTML);}扭转 this 指向的办法有哪些？通过 call()、apply()、bind()扭转 this 指向 那么箭头函数中的 this 呢？箭头函数体内的 this 对象，就是定义该函数时所在的作用域指向的对象，而不是应用时所在的作用域指向的对象 箭头函数自身没有 this 指向，如果应用 this 则指向上一级函数（非箭头函数）的 this箭头函数申明的构造函数不可能被 new 实例化var name = 'window';var A = { name: 'A', sayHello: () => { console.log(this.name) }}A.sayHello();// 还是认为输入A ? 错啦，其实输入的是window这里的箭头函数，也就是 sayHello，所在的作用域其实是最外层的 js 环境，因为没有其余函数包裹；而后最外层的 js 环境指向的对象是 winodw 对象，所以这里的 this 指向的是 window 对象 ...

什么是原型？每个函数都有 prototype（原型）属性，这个属性是一个指针，指向一个对象，这个对象的用处是蕴含特定类型的所有实例共享的属性和办法，这个对象（原型对象）是用来给实例共享属性和办法的。 function Person() {}Person.prototype.name = 'Nicholas';Person.prototype.age = '29';Person.prototype.job = 'SoftWare Engineer';Person.prototype.sayName = function() { console.log(this.name);};var person1 = new Person();person1.sayName(); // Nicholasvar person2 = new Person();person1.sayName(); // Nicholasconsole.log(person1.sayName === person2.sayName); // true以下是关系图 <img src="https://noxussj.top:3000/36/1.png"></img> 由上图可知 构造函数的 prototype（原型）属性，指向原型对象因为目前原型对象是属于 Person 构造函数的，所以它的 constructor 指向 Person 构造函数实例 1、实例 2 都是指向原型对象，所以就证实了 Person.prototype 定义的属性和办法都会共享给它的实例。即代码中 person1.sayName === person2.sayName 返回 true。即它们应用的的确是同一个函数（函数的援用地址雷同）当调用构造函数创立一个新的实例后，该实例外部将蕴含一个指针（外部属性）即[[Prototype]]，指向构造函数的原型对象。尽管在脚本中没有规范的形式拜访[[Prototype]]，但 Firefox、Safari、Chrome 等浏览器在每个对象上都反对一个属性proto；要留神一点，实例 1、实例 2 的[[Prototype]]都是指向原型对象，而不是间接指向构造函数自身尽管无法访问[[Prototype]]属性，然而能够通过原型对象的 isPrototypeOf()办法来判断实例是否指向该构造函数的原型对象，Person.prototype.isPrototypeOf(person1) 返回 true在 ES5 中，新增了一个办法 Object.getPrototypeOf()，返回[[Prototype]]的值到目前为止，应该了解原型、原型对象、构造函数之间的关系了吧 什么是原型链？假如一个原型对象等于另一个类型的实例，另一个类型的原型对象又等于另一个类型的实例。就像这样一层层递进，就形成了实例与原型的链条，这个就是所谓的原型链的基本概念 // 定义构造函数：超类function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function() { return this.property;};// 定义构造函数：子类function SubType() { this.subproperty = false;}// SubType.prototype 等于 SuperType的实例，即重写SubType原型对象SubType.prototype = new SuperType();// 原型对象重写后又新增了办法SubType.prototype.getSubValue = function() { return this.subproperty;};var instance = new SubType();关系图 ...

利用数组的 reverse 实现 let arr = 'abcdefg';let res = [...arr].reverse().join('');console.log(res); // gfedcba文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是二叉查找树（BST）？这边只简略形容一下什么是二叉查找树，更具体的先不形容了。 二叉查找树的个性： 若它的左子树不为空，则左子树上的所有节点的值都小于它的根节点的值若它的右子树不为空，则右子树上所有节点的值都大于它的根节点的值其余的左右子树也别离为二叉查找树二叉查找树是动静查找表，在查找的过程中可见增加和删除相应的元素，在这些操作中须要放弃二叉查找树的以上性质下图就是一个二叉查找树 <img src="https://noxussj.top:3000/34/1.png"></img> 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

Windows下Node多版本装置单版本的node装置我这边就不做赘述了，去官网下载windows安装包即可需要工具：nvmnodeNVM的装置【下载setup装置即可】：下载地址： NVMgithub地址 查看装置版本： nvm 多版本node的装置：查看可装置Node nvm list available 装置指定的Node版本 //nvm install 上图node版本nvm install 16.8.0列出已装置版本【米字符的即是以后node版本】 nvm list 查看以后Node版本 node --version 指定以后所须要应用的node版本【应用nvm list查看以后已装置的node】 //nvm use node版本nvm use 16.3.0 卸载某一个Node版本 nvm uninstall 16.3.0其余指令阐明：nvm arch：显示node是运行在32位还是64位。nvm install <version> [arch] ：装置node， version是特定版本也能够是最新稳固版本latest。可选参数arch指定装置32位还是64位版本，默认是零碎位数。能够增加--insecure绕过近程服务器的SSL。nvm list [available] ：显示已装置的列表。可选参数available，显示可装置的所有版本。list可简化为ls。nvm on ：开启node.js版本治理。nvm off ：敞开node.js版本治理。nvm proxy [url] ：设置下载代理。不加可选参数url，显示以后代理。将url设置为none则移除代理。nvm node_mirror [url] ：设置node镜像。默认是https://nodejs.org/dist/。如果不写url，则应用默认url。设置后可至装置目录settings.txt文件查看，也可间接在该文件操作。nvm npm_mirror [url] ：设置npm镜像。https://github.com/npm/cli/ar...。如果不写url，则应用默认url。设置后可至装置目录settings.txt文件查看，也可间接在该文件操作。nvm uninstall <version> ：卸载指定版本node。nvm use [version] [arch] ：应用制订版本node。可指定32/64位。nvm root [path] ：设置存储不同版本node的目录。如果未设置，默认应用当前目录。nvm version ：显示nvm版本。version可简化为v。

利用 ES6 新增的数据结构 Set 实现 let arr = [20, 28, 28, 30, 28, 50, 40];let res = [...new Set(arr)];console.log(res); // [20, 28, 30, 50, 40]文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

间接上代码 let str = 'apple';let obj = {};let number = 0;let activeIndex = '';[...str].map(key => { key in obj ? obj[key]++ : (obj[key] = 1); obj[key] > number ? (activeIndex = key) : ''; number = obj[key];});console.log(activeIndex); // p文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

算法分类（比拟和非比拟）非线性工夫比拟类排序：通过比拟来决定元素间的绝对秩序，因为其工夫复杂度不能冲破 O(nlogn)，因而称为非线性工夫比拟类排序 线性工夫非比拟类排序：不通过比拟来决定元素间的绝对秩序，它能够冲破基于比拟排序的工夫下界，以线性工夫运行，因而称为线性工夫非比拟类排序 <img src="https://noxussj.top:3000/31/1.png"></img> 排序算法评估规范工夫复杂度 工夫复杂度分为：最坏工夫复杂度、均匀工夫复杂度、最好工夫复杂度。次要反馈的是执行程序的次数空间复杂度 是对一个算法在运行过程中长期占用存储空间大小的量度稳定性 稳定性的意思是对于序列中键值（Key value）雷同的元素，它们在排序前后的绝对关系放弃不变。对于 int 这样的根本数据类型，稳定性基本上是没有意义的，因为它的键值就是元素自身，两个元素的键值雷同他们就能够被认为是雷同的。但对于简单的数据类型，数据的键值雷同，数据不肯定雷同，比方一个 Student 类，包含 Name 和 Score 两个属性，以 Score 为键值排序，这时候键值雷同元素间的绝对关系就有意义了。总结就是通过排序之后,能使值雷同的数据放弃原程序中的绝对地位不变内排序 所有排序操作都在内存中实现，实用于数据规模不是特地大的状况外排序 因为数据太大，因而把数据放在磁盘中，而排序通过磁盘和内存的数据传输能力进行各排序算法总结<img src="https://noxussj.top:3000/31/2.png"></img> 名词解释： n: 数据规模（即序列的长度） k: “桶”的个数 In-place: 占用常数内存，不占用额定内存 Out-place: 占用额定内存 参考资料：值得珍藏的十大经典排序算法 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是基数排序？根本思维：基数排序是依照低位先排序，而后收集；再依照高位排序，而后再收集；顺次类推，直到最高位 直观表白：就是将每个数依照它的位数进行拆分，对每一个对应的位数进行比拟排序，直到所有位数都进行过一遍排序地位 根底排序最重要的就是位数 数字：832 通过位数能够拆分成 个位数，十位数，百位数 字母：sdf 通过位数能够拆分成 s d f 栗子假如有一组序列：329, 457, 657, 839, 436, 720, 355 首先咱们晓得它他们最大的值（839）的位数有 3 位（百位数，十位数，个位数），那么就能够这组序列的对应位数进行排序比拟 首先对个位数（最左边的数）进行排序，后果为 720, 355, 436, 457, 657, 329, 839 而后对十位数（两头的数）进行排序，后果为 720, 329, 436, 839, 355, 457, 657 而后对百位数（最左边的数）进行排序，后果为 329, 355, 436, 457, 657, 720, 839 每一个位数都别离进行了排序比拟，所以遍历完结。 最初失去曾经排好序的序列 那么这个时候就会有人问了，如果它们的位数不同呢？如果每个元素是一串字母而不是数字呢？ 位数不同如何解决？3, 200, 55, 220, 70 个别咱们对每个位数进行判断都是从 0~9 来进行，如果位数不同，那么就要提前判断该元素是否领有个位数，十位数，百位数，如果没有则排在 0 后面 元素为英文字符串，并非是数字？单个字母也是能够进行大小判断的，a-z 元素为英文字符串和数字的实现形式也是一样的，只是没有了个位数，十位数，百位数的说法，能够换成左边第 0 位，1 位，2 位这样 <img src="https://noxussj.top:3000/30/1.png"></img> 动图展现<img src="https://noxussj.top:3000/30/2.gif"></img> 参考资料值得珍藏的十大经典排序算法漫画：什么是基数排序？ 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

办法 一 : readonly 规定输出字段为只读可复制，然而，用户能够应用Tab键切换到该字段，可抉择,能够接管焦点，还能够选中或拷贝其文本。(状态: 输入框会变成灰色) <input type="text" value="hello JavaScript" readonly="readonly">办法 二 : disabled 被禁用的 input 元素可复制，不能接管焦点,设置后文字的色彩会变成灰色。无奈与 一起应用。 (状态: 输入框会变成灰色) <input type="text" value="hello JavaScript" disabled="disabled">办法 三 : 通过管制input的max length为0实现 <input type="text" maxlength="0">办法 四 : nfcus="this.blur();“onfocuse是聚焦的意思，当你把光标放在文本框上输出的时候，就是聚焦，但这里增加了"this.blur()”，blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能输出文本了 (状态: 输入框无变色) <input type="text" value="hello JavaScript" nfcus="this.blur();">

什么是桶排序？桶排序是计数排序的升级版，有些排序场景计数排序无奈应用（数值超出范围或者不是整数）。将数据分到无限数量的桶里，每个桶再别离排序（有可能再应用别的排序算法或是以递归形式持续应用桶排序） 算法形容设置 n 个数量的空桶，并且确定每个桶的范畴； 遍历输出数据，并且把数据一个一个放到对应的桶里去； 对每个能够进行排序（桶外面的数量大于 1 个）的桶进行排序； 把排序好的桶拼接起来 栗子每一个桶代表一个区间范畴，外面能够承载一个或多个元素。 桶排序的第一步，就是创立这些桶，确定每一个桶的区间范畴 <img src="https://noxussj.top:3000/29/1.png"></img> 这个时候就会有人发问，怎么晓得建设多少个桶？每个桶的范畴是多少呢？ 具体建设多少个桶，如何确定桶的区间范畴，有很多不同的形式，由理论状况去定义 这里只举例其中一种，创立的桶数量等于原始序列的元素数量，除了最初一个桶只蕴含数列最大值，后面各个桶的区间依照比例确定 区间跨度 （求平均值）= （最大值-最小值）/ （桶的数量 - 1） 第二步，遍历原始序列，把元素对号入座放入各个桶中 <img src="https://noxussj.top:3000/29/2.png"></img> 第三步，每个桶外部的元素别离排序（显然，只有第一个桶须要排序） <img src="https://noxussj.top:3000/29/3.png"></img> 最初一步，遍历所有的桶，输入所有元素 0.5，0.84，2.18，3.25，4.5 参考资料值得珍藏的十大经典排序算法漫画：什么是桶排序？ 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是计数排序？计数排序不是基于比拟的排序算法，其外围在于将输出的数据值转化为键存储在额定开拓的数组空间中。 作为一种线性工夫复杂度的排序，计数排序要求输出的数据必须是有确定范畴的整数 计数排序最重要的一点，确定范畴的整数，比如说范畴 0-10，那么数组外面的值就要在 0-10 之间 栗子序列：9，3，5，4，9，1，2，7，8，1，3，6，5，3，4，0，10，9 ，7，9 首先确定序列的范畴是 0-10，并且列出范畴的序列，如图 1 比方第一个整数是 9，那么数组下标为 9 的元素加 1 <img src="https://noxussj.top:3000/28/1.png"></img> 图 1第二个整数是 3，那么数组下标为 3 的元素加 1，如图 2 <img src="https://noxussj.top:3000/28/2.png"></img> 图 2以此类推反复遍历... 最终遍历实现后状态如下，如图 3 <img src="https://noxussj.top:3000/28/3.png"></img> 图 3数组每一个下标地位的值，代表了在序列中对应整数呈现的次数 有了这个“统计后果”，排序就很简略了。间接遍历数组，输入数组元素的下标值，元素的值是几，就输入几次 0，1，1，2，3，3，3，4，4，5，5，6，7，7，8，9，9，9，9，10 最初输入的序列曾经是排好序的 <img src="https://noxussj.top:3000/28/4.gif"></img> 这个时候可能会有人问，如果序列的最小值不是从 0 开始呢？ 这个时候就要计算偏移量 如何计算偏移量？以序列的最小值作为偏移量。比方最小值是 90， 那么整数 95 对应的统计数组下标就是 95-90 = 5 <img src="https://noxussj.top:3000/28/5.png"></img> 参考资料值得珍藏的十大经典排序算法漫画：什么是计数排序？ 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是堆排序？是指利用堆这种数据结构所设计的一种排序算法。沉积是一个近似齐全二叉树的构造，并同时满足沉积的性质：即子结点的键值或索引总是小于（或者大于）它的父节点 在看本文之前请先理解以下概念 齐全二叉树：除了最初一层之外的其余每一层都被齐全填充，每一层从左到右的填充数据，不能空缺（只是相似这个构造，所以本文不会用到这个知识点） 堆：分为大顶堆和小顶堆两种 大顶堆（小顶堆）：可分为有序区和无序区，初始全副为无序区 执行的步骤是如何进行的？无非就是将一个无序数组转化为大顶堆（小顶堆）将堆顶的值和无序数组开端值替换地位依据堆的性质进行调整，成为大顶堆（小顶堆）而后又持续 1~3 的步骤，反反复复直到无序区没有值为止这个时候必定会有人问，怎么区别有序区和无序区？什么是大顶堆（小顶堆）？以及大顶堆（小顶堆）是如何调整进去的？ 如何分别有序区和无序区？<img src="https://noxussj.top:3000/27/1.png"></img> <img src="https://noxussj.top:3000/27/2.png"></img> 循环完结后应该是这样的，没有无序区了 <img src="https://noxussj.top:3000/27/3.png"></img> 下面的大顶堆（小顶堆）理论在存储在数组中是这样的 当初应该晓得有序区和无序区如何分辨了吧，以及大顶堆是如何在数组中进行存储的 什么是大顶堆（小顶堆）？<img src="https://noxussj.top:3000/27/4.png"></img> 通过上图应该都能看进去大顶堆和小顶堆的区别了吧。 大顶堆：每个结点的值都大于或等于其左右孩子结点的值（大到小排列） 小顶堆：每个结点的值都小于或等于其左右孩子结点的值（小到大排列） 大顶堆（小顶堆）是如何调整进去的？也是本文中最难了解的中央，上面简略形容一下次要的步骤： 指标：将无序数组(R1,R2....Rn)构建成大顶堆，即实现工作 初始时，此堆的所有值都是属于无序区将堆顶元素 R[1]与无序区中最初一个元素 R[n]替换，此时失去新的无序区(R1,R2,......Rn-1)和新的有序区(Rn)因为替换后新的堆顶 R[1]可能违反堆的性质，因而须要对以后无序区(R1,R2,......Rn-1)调整为新堆而后再次将 R[1]与无序区最初一个元素替换，失去新的无序区(R1,R2....Rn-2)和新的有序区(Rn-1,Rn)。一直反复此过程直到无序区的元素个数 0，则整个排序过程实现总结其实次要的操作就是结构初始堆和调整堆。每次调整都是从父节点（i - 1）/ 2、左孩子节点（2 i + 1）、右孩子节点（2 i + 2）三者中抉择最大者跟父节点进行替换地位<img src="https://noxussj.top:3000/27/5.gif"></img> 堆排序过程 参考资料神级根底排序——堆排序值得珍藏的十大经典排序算法漫画：什么是堆排序？堆排序（大根堆） 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

选择器权重和优先级优先级 作用:当多个选择器选中同一个标签, 并且给同一个标签设置雷同的属性时, 如何层叠就由优先级来确定 优先级判断的三种形式 -间接选中就是指继承 如果是间接选中, 那么就是谁离指标标签比拟近就听谁的 -雷同选择器(间接选中) 如果都是间接选中, 并且都是同类型的选择器, 那么就是谁写在前面就听谁的 -不同选择器(间接选中) 如果都是间接选中, 并且不是雷同类型的选择器, 那么就会依照选择器的优先级来层叠 id>类>标签>通配符>继承>浏览器默认 优先级权重 作用: 当多个选择器混合在一起应用时, 咱们能够通过计算权重来判断谁的优先级最高 权重计算规定内联款式，如: style="..."，权值为1000。 ID选择器，如：#content，权值为0100。 类，伪类、属性选择器，如.content，权值为0010。 标签选择器、伪元素选择器，如div p，权值为0001。 通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。(子选择器，后辈选择器拆开相加计算权值) 继承的款式没有权值 权值的计算只相加，不进位！就是说十个类选择器的权重也不会超过ID选择器！ <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .div1>.div2>.div3>.div4>.p1{ color: blue; } .div1> .div4>.p1{ color: red; } </style></head><body> <div class="div1"> <div class="div2"> <di class="div3"> <div class="div4"> <p class="p1" id="oneP">我是谁</p> </div> </di> </div> </div></body></html>这里的后果就是咱们无妨加上10层class <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .div1>.div2>.div3>.div4>.div5>.div6>.div7>.div8>.div9>.div10>.p1{ color: blue; } #oneP{ color: red; } </style></head><body> <div class="div1"> <div class="div2"> <di class="div3"> <div class="div4"> <div class="div5"> <div class="div6"> <div class="div7"> <div class="div8"> <div class="div9"> <div class="div10"> <p id="oneP" class="p1">我是谁</p> </div> </div> </div> </div> </div> </div> </div> </di> </div> </div></body></html>十个class相加的权值也不会有id选择器的权重高，权值相加不会进行进位 ...

什么是疾速排序？在一个序列中随机找出一个数（称为基准元素），而后就是比基准元素小的数放在右边，比基准元素大的数放在左边，这样就将一个序列分成了两个子序列，而后再依照同样的办法把子序列再分成更小的子序列，直到不能分解为止 栗子<img src="https://noxussj.top:3000/26/1.png"></img> 紫色：基准元素 绿色：比基准元素小的数 黄色：比基准元素大的数 算法形容假如一组序列为 6, 9, 2, 4, 5, 1, 8, 7 首先随机找一个数（6） 判断比 6 小的放在右边，大的放在左边 后果：2, 4, 5, 1, 6, 9, 8, 7 失去 2 个新的序列，右边（2, 4, 5, 1），左边（6, 8, 7） ------------------------------------------------- 而后对右边序列进行拆分，左边序列就不列举了 序列 2, 4, 5, 1 随机找一个数（2）持续进行判断，比 2 小的放在右边，大的放在左边 后果：1, 2, 4, 5 失去 2 个新的序列，右边（1），左边（4, 5） ------------------------------------------------- 而后发现右边序列（1）不可能进行拆分，所以要进行向上合并 左边序列（4, 5）能够持续拆分 随机找一个数（4）持续进行判断，比 4 小的放在右边，大的放在左边 后果：4, 5 失去新的序列，右边（4），左边（5） 而后发现右边序列（4）和右序列（5）不可能进行拆分，所以要进行向上合并 ------------------------------------------------- 所有元素向上合并后失去后果 1, 2, 4, 5, 6, 7, 8 <img src="https://noxussj.top:3000/26/2.gif"></img> 如果还是看不懂这个图，那证实你还没了解疾速排序集体倡议，最好拿笔和纸本人试着排列一下 参考资料值得珍藏的十大经典排序算法漫画：什么是疾速排序？（完整版） ...

什么是归并排序？把长度为 n 的输出序列分成两个长度为 n/2 的子序列； 对这两个子序列别离采纳归并排序； 将两个排序好的子序列合并成一个最终的排序序列。 <img src="https://noxussj.top:3000/25/1.png"></img> 总的来说就是先拆分，后合并，合并的同时进行排序 栗子归并排序就像一场比武大赛 举个例子，有 A、B、C、D、E、F、G、H 一共 8 个武术家参考加入比武大会。 第一轮，两两一组，有 4 名选手胜出（四分之一决赛） 第二轮，两两一组，有两名选手胜出（半决赛） 第三轮，仅剩的两人一组，冠军胜出（总决赛） <img src="https://noxussj.top:3000/25/2.png"></img> 算法形容<img src="https://noxussj.top:3000/25/3.gif"></img> 参考资料值得珍藏的十大经典排序算法什么是归并排序？归并排序详解 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

html:不是一种编程语言，而是一种标记语言。应用.html与.htm作为HTML文件的后缀名； html版本：HTML 1.0：1993年6月 HTML 2.0：1995年1 1月 HTML 3.2：1997年1月14日 HTML 4.0：1997年12月18日 HTML 4.01（渺小改良）：1999年12月24日 HTML 5：2014年10月 HTML特点：繁难性，可扩展性，平台无关性，通用性 html与css之间的关系：HTML是网页内容的载体； CSS款式是体现； html正文： <!--正文内容--> 记录编程思路，解释阐明业务性能 html外围属性：title、id、class、style title：形容信息 id：惟一标识 class：标识一类元素 style 款式 空白：在文档中无论呈现多少个空白或者换行，浏览器都解析为一个空白 空格：&nbsp <：&lt &gt块级元素： 特点： 独占一行空间默认宽度为100%高度由子元素或内容决定能够通过css指定其宽度 元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address 行内元素： 特点： 与其余行内元素共享一行空间宽高由本身决定因为不用来搭建网页构造，所以也无需通过css指定其宽度行内元素中不能够嵌套块元素元素：span、a、img、strong、b、i、em、sub、sup 块级元素与行内元素的区别： 1.经典：块级元素独占一行，行内元素与其余元素共享一行。 2.宽高：块级能够间接设置宽高，行内不能够间接设置宽高，须要通过 display扭转元素属性来设置。（img、input 非凡的行内，置换元素） 3.块级元素能够蕴含块级与行内，行内只能蕴含行内。 根底标签的应用： h标签：h1标签十分重要，它会影响到页面在搜索引擎中的排名，一个页面最好只写一个h1标签 eg:<h1>这是一个h1标签</h1> p标签:p标签中的文字，会独占一行，并且段与段之间会有一个间距 eg:<p></p> br标签:不另起一个段落换行 hr标签:在页面中生成一个分割线 字符实体:空格  < &lt; &gt;“ &quot;& &amp;‘ 'img标签: alt:能够用来设置在图片不能显示的时，对图片的形容 title：用于通知浏览器，鼠标悬停的时候，须要弹出的形容框中显示什么内容 ...

我刚开始看这个的时候，一脸懵逼。前面又多看了几篇其他人的文章后才了解了 在理解这个希尔排序之前，我想先进行一个小游戏，大家应该都有玩过。希尔排序原理和这个小游戏差不多 小明（玩家）、安琪拉（出题者） 安琪拉：请你在 0~100 之间，猜一个数，猜的次数越少分数越高 失常玩家，可能会顺次从 0 开始一个个去猜，0, 1, 2, 3 ... 这样始终上来猜，运气不好可能要猜 99 次能力正确（这个就是插入排序） 希尔排序是插入排序的升级版，次要目标是缩小猜的次数 小明最初利用了/2 的办法进行猜数（这个就是希尔排序） --------------------------------------------------- 答题开始 小明：猜数字是 50 安琪拉：提醒数字猜小了 小明：那么范畴必定在（50~100）之间了，这次猜是 75 安琪拉：提醒数字猜小了 小明：那么范畴必定在（75~100）之间了，这次猜 87 安琪拉：提醒数字猜小了 小明：那么范畴必定在（87~100）之间了，这次猜 93 安琪拉：提醒数字猜大了 小明：那么范畴必定在（87~93）之间了，这次猜 90 安琪拉：提醒数字猜大了 小明：那么范畴必定在（87~90）之间了，这次猜 89 安琪拉：提醒数字猜大了 小明：那么范畴必定在（87~89）之间了，剩下 3 个数了，那么就能够进行一个个去猜了（插入排序）87, 88, 89 安琪拉：答案是 88 --------------------------------------------------- 当初开始进入正题 什么是希尔排序？希尔排序就是在一个序列中进行分组（简称：增量），而后对每个分组别离进行插入排序。随着增量逐步缩小，每组蕴含的关键词越来越多，当增量减至 1 时，整个序列恰好被分成一组，算法便终止 算法形容<img src="https://noxussj.top:3000/24/1.png"></img> <img src="https://noxussj.top:3000/24/2.gif"></img> 参考资料图解排序算法(二)之希尔排序值得珍藏的十大经典排序算法 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是插入排序？就是在数组中从左到右，先取一个数进去，而后把它放到适合的地位 算法形容假如一个数组中有 2 个区域 5, 8, 2, 3, 1 有序区为空，无序区为 5, 8, 2, 3, 1 ----------------------------------- 首先在无序区当选第一个值（5），把它放在有序区的尾部，第一步基本上不必动 后果：5, 8, 2, 3, 1 有序区为 5，无序区为 8, 2, 3, 1 ----------------------------------- 而后在无序区中取第一个值（8）记录下来，而后持续在无序区中查找比它更小的值（1），而后在有序区中从右往左寻找适合的地位（小于 1 和大于 1 的两头）插入 后果：5, 8, 2, 3, 1 有序区为 1, 5，无序区为 8, 2, 3 ----------------------------------- 而后在无序区中取第一个值（8）记录下来，而后持续在无序区中查找比它更小的值（2），而后在有序区中从右往左寻找适合的地位（小于 2 和大于 2 的两头）插入 后果：5, 8, 2, 3, 1 有序区为 1, 2, 5，无序区为 8, 3 ----------------------------------- ... 以此类推，直到无序区为空 <img src="https://noxussj.top:3000/23/1.gif"></img> 参考资料值得珍藏的十大经典排序算法 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是抉择排序？根本思维：在一个排列中划分为有序区和无序区，有序区在右边，无序区在左边。首先在无序区中找到最小（大）元素，寄存到有序区的起始地位，而后，再从残余的无序区中持续寻找最小（大）元素，而后放到有序区的开端。以此类推，直到无序区没有元素可排列 直观表白：就是在一个数组中遍历查找，找到小的放在数组的左侧，而后在残余的元素中持续查找，直到排序实现 算法形容假如一个数组中有 2 个区域 5, 8, 2, 3, 1 有序区为空，无序区为 5, 8, 2, 3, 1 ----------------------------------- 首先：记录数组的第一个值（5），看看还有没有比它更小的，如果有则记录下来（1）。直到数组第一遍遍历实现。而后把最小的值（1）和无序区的第一个值（5）替换地位 后果：1, 8, 2, 3, 5 有序区为 1，无序区为 8, 2, 3, 5 ----------------------------------- 而后进行第二遍遍历，在无序区中持续查找最小值（2），遍历结束后将最小值（2）与无序区第一值（8）替换地位 后果：1, 2, 8, 3, 5 有序区为 1, 2，无序区为 8, 3, 5 ----------------------------------- ... 以此类推，直到无序区为空 <img src="https://noxussj.top:3000/21/1.gif"></img> 参考资料值得珍藏的十大经典排序算法 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是冒泡排序？根本思维：冒泡排序，相似于水中冒泡，较大的数沉下去，较小的数缓缓浮起来直观表白：即在数组排序中，从小到大排序 算法形容从第一个数开始，每 2 个相邻的数进行比拟，小的放在右边，大的放在左边。反反复复反复 n 遍，n 即代表数组的长度 - 1 形容太多也没用，间接看图就能懂了 <img src="https://noxussj.top:3000/21/1.gif"></img> 代码演示我觉这个应该不须要了，只有晓得算法的逻辑就能够了 参考资料排序-冒泡排序 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

文章目录网页作品介绍成果演示代码演示源码获取 网页作品介绍 本HTML动态网页作品采纳DW制作，主题为华为热门产品，共10个页面，首页1页，二级图文页面1页，二级产品1页，三级产品详情6页，留言表单1页。 学生根底程度，未应用非凡技术，制作了留言表单页面，表单页面插入了背景图，丑化了表单项。三级产品介绍页面间接调用的图片。 页面整体精美但!无技术难点，只是图片丑陋，适宜中低要求。 成果演示 代码演示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页</title> <!--增加链入式--> <link href="css/index.css" type="text/css" rel="stylesheet" /> <!--增加链入式完结--></head><body><a name="1"></ a> <!--增加1号书签--> < a href=" ">我在找OA零碎</ a><br /> <!--增加head--> <div id="head"> < img src="images/twoo.png" /> <!--增加head_hf--> <div id="head_hf"> < a href="#">首页</ a> < a href="list.html" target="_blank">内容</ a> < a href="content.html" target="_blank">详情</ a> < a href="#">介绍</ a> < a href="#">更多</ a> </div> <!--增加head_hf完结--> </div> <!--增加head完结--> <!--增加top--> <div id="top"> </div> <!--增加top完结--> <!--增加banner--> <div id="banner"> <!--增加banner_nr--> <div id="banner_nr"> <!--增加banner_nr_left--> <div id="banner_nr_left"> <h2>11月22日</h2> <p>上映工夫</p > </div> <!--增加banner_nr_left完结--> <!--增加banner_nr_right--> <div id="banner_nr_right"> <h2>历经6年倾力之作</h2> <p>敬请期待...</p > </div> <!--增加banner_nr_right完结--> </div> <!--增加banner_nr完结--> </div> <!--增加banner完结--> <!--增加conten--> <div id="content"> <h2>神秘魔法从天而降，艾莎生世如何揭晓</h2> <p>让咱们一探到底...</p > <div class="one"> < img src="images/two.jpg" /> </div> </div> <!--增加conten完结--> <!--增加nav--> <div id="nav"> <!--增加two--> <div class="two"> <h2>相干视频</h2> <p>冒险旅程</p > </div> <!--增加two完结--> <!--增加vi--> <div id="vi"> <video width="800px" height="500px" controls="controls" /> <source src="videos/jianji.mp4" type="video/mp4" /> </div> <!--增加vi完结--> </div> <!--增加nav完结--> <!--增加sc--> <div id="sc"> </div> <!--增加sc完结--> <!--增加footer--> <div id="footer"> < img src="images/twos.png" /> <!--增加footer_right--> <div id="footer_right"> <span>< a href="#">对于网页</ a></span> <span>< a href="#">制作人员</ a></span> <span>< a href="#">分割作者</ a></span> <span>< a href="#1">返回顶部</ a></span> </div> <a name="d3"></ a> <!--增加footer_right完结--> </div> <!--增加footer完结--></body></html>@charset "utf-8";/*设置全局管制*/ *{ margin:0; padding:0;}/*增加body的背景图片*/ body{ background-color:000; font-family:楷体; /*给予body整体文字为楷体*/ }/*设置head开始*/ #head{ height:60px; background-color:#000; } #head_hf{ height:60px; width:600px; background-color:#000; float:right; /*设置为右浮动*/ line-height:60px; /*行高为60px*/ } #head_hf a{ display:block; width:120px; height:55px; float:left; /*设置为左浮动*/ text-align:center; font-size:22px; } #head_hf a:link,#head_hf a:visited{ background-color:#000; color:#CFB53B; text-decoration:none; /*打消下划线*/ } #head_hf a:hover{ border-bottom:solid 2px #CFB53B; background-color:#212121; color:#FFF; }/*设置head完结*//*设置top开始*/ #top{ height:670px; background-image:url(../images/44.jpg); background-size:100% 100%; /*背景图片大小*/ background-repeat:no-repeat; /*背景图片不做任何平铺*/ }/*设置top完结*//*设置banner开始*/ #banner{ height:150px; margin:0 auto; /*上下边距为0，且此盒子居中于父级*/ background-color:#212121; } #banner_nr{ width:842px; height:150px; margin:0 auto; /*上下边距为0，且此盒子居中于父级*/ background-color:#cfb53b; } #banner_nr_left{ float:left; /*设置为左浮动*/ height:150px; width:420px; background-color:#212121; } #banner_nr_left h2{ text-align:center; /*此盒子文本元素居中*/ color:#cfb53b; font-size:50px; margin-top:20px; } #banner_nr_left p{ color:#bdbdbd; text-align:center; font-size:36px; } #banner_nr_right{ float:right; /*设置为右浮动*/ height:150px; width:420px; background-color:#212121; } #banner_nr_right h2{ text-align:center; color:#cfb53b; font-size:50px; margin-top:20px; } #banner_nr_right p{ color:#bdbdbd; text-align:center; font-size:36px; }/*设置banner完结*//*设置content开始*/ #content{ height:1200px; background-image:url(../images/010.jpg); background-attachment:fixed; /*给予此背景图片固定地位*/ background-size:100% 100%; /*背景图片大小为100%*/ background-repeat:no-repeat; /*背景图片不做任何平铺*/ }/*对于one类设置*/ .one{ width:920px; height:920px; margin:50px auto; } #content h2{ color:#FFF; font-size:40px; text-align:center; line-height:80px; /*设置行高为80px*/ margin-bottom:30px; } #content p{ color:#bdbdbd; text-align:center; font-size:28px; margin-top:20px; }/*设置content完结*//*设置nav开始*/ #nav{ height:600px; background-color:#000; } #nav h2{ color:#FFF; font-size:40px; text-align:center; line-height:60px; /*行高设为60px*/ } #nav p{ color:#bdbdbd; text-align:center; font-size:28px; }/*设置nav完结*//*设置视频*/ #vi{ width:800px; height:500px; margin:0px auto; } .two{ background-color:#212121; height:100px; width:100%; } #sc{ height:800px; background-image:url(../images/55.jpg); background-size:100% 100%; /*背景图片大小为100%*/ background-repeat:no-repeat; /*背景图片不做任何平铺*/ }/*设置footer开始*/ #footer{ height:150px; background-color:#000; } #footer img{float:left;} #footer_right{ background-color:#000; width:800px; height:60px; text-align:center; line-height:60px; /*设置行高为60px*/ float:right; /*设置为右浮动*/ } #footer_right a{ display:block; /*将a标签转换为块级元素*/ width:200px; height:58px; } #footer_right a:link,#footer_right a:visited{ background-color:#000; color:#CFB53B; text-decoration:none; /*革除下划线*/ } #footer_right a:hover{ border-bottom:solid 2px #CFB53B; background-color:#212121; color:#FFF; } #footer span{float:left;} /*设置为左浮动*//*设置footer完结*/代码目录 ...

download：前端支流布局零碎进阶与实战,一课搞定4大支流布局，轻松实现各种精美页面上面的都不重要//四则运算 include "stdafx.h"includeinclude<stdio.h>using namespace std;void add(){ printf("输出要计算的加数（例如a b）\n");int adda=0, addb=0,addc=0;cin >> adda;cin >> addb;addc = adda+addb;cout <<adda<<"加"<<addb<< "等于" << addc << endl; }void substraction(){ printf("输出要计算的减数（例如a b）\n");int suba = 0, subb = 0, subc = 0;cin >> suba;cin >> subb;subc = suba-subb;cout <<suba<<"减"<<subb<< "等于" << subc << endl;}void multiplication(){ printf("输出要计算的乘数（例如a b）\n");int mula = 0, mulb = 0, mulc = 0;cin >> mula;cin >> mulb;mulc = mula*mulb;cout <<mula<<"乘"<<mulb<< "等于" << mulc << endl;}void division(){ ...

网上看了很多文章，只想说一句话：“真的啥都没看懂”。以下是我集体的了解，有不对的中央能够提出。 在形容他们之间的区别之前，咱们首先要理解一下什么是 BFC、IFC、GFC、FFC？ 咱们晓得元素有内联元素、块级元素、行内块级元素，在页面上渲染时它们的定位，排列形式等都有所不同，就是因为它们依据外部的格式化上下文进行不同的渲染，即 BFC 和 IFC。前面 CSS3 新增了 grid 布局以及 flex 布局，所以也迎来了 GFC、FFC分割线-------------------------------------------------------------------- 下方的内容在网上找，基本上都是差不多的 BFC（Block formatting contexts）：块级格局上下文页面上的一个隔离的渲染区域，那么他是如何产生的呢？能够触发 BFC 的元素有 float、position、overflow、display：table-cell/ inline-block/table-caption ；BFC 有什么作用呢？比如说实现多栏布局 IFC（Inline formatting contexts）：内联格局上下文IFC 的 line box（线框）高度由其蕴含行内元素中最高的理论高度计算而来（不受到竖直方向的 padding/margin 影响)IFC 中的 line box 个别左右都贴紧整个 IFC，然而会因为 float 元素而扰乱。float 元素会位于 IFC 与与 line box 之间，使得 line box 宽度缩短。 同个 ifc 下的多个 line box 高度会不同 IFC 中时不可能有块级元素的，当插入块级元素时（如 p 中插入 div）会产生两个匿名块与 div 分隔开，即产生两个 IFC，每个 IFC 对外体现为块级元素，与 div 垂直排列。 那么 IFC 个别有什么用呢？ ...

<img src="https://noxussj.top:3000/19/1.png"></img> 实现上方成果，上面列举几个罕用的办法，集体比拟举荐用 flex 布局实现 形式 1（利用 margin 和相对定位）html <div class="container"> <div class="box"></div></div>css .container { position: relative; width: 150px; height: 150px; background-color: #000; .box { margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 50px; height: 50px; background-color: #fff; }}形式 2（利用 flex 布局）html <div class="container"> <div class="box"></div></div>css .container { position: relative; width: 150px; height: 150px; background-color: #000; display: flex; justify-content: center; align-items: center; .box { width: 50px; height: 50px; background-color: #fff; }}文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

以上几个属性都是属于暗藏元素，使用户看不见该元素。那么他们有什么区别呢？ <img src="https://noxussj.top:3000/18/1.png"></img> 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

罕用的动画分为 2D 和 3D2D：位移、旋转、放大放大、突变显示暗藏、变形3D：旋转、视角放大放大等文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

headermainfooternavsectionasidearticledetailsfiguresectionsummarytimefigurefigcaption

尽管网上有很多对于绘制三角形的代码，然而我置信还是有一部分人是不晓得如何实现的。我上面举个栗子。 这种状况应该都能了解，不就是设置一个边框嘛 width: 100px;height: 100px;border: 20px solid;border-color: #000;box-sizing: border-box;<img src="https://noxussj.top:3000/16/1.png"></img> 第二步，把边框色彩改一下，应该也能看懂 width: 100px;height: 100px;border: 20px solid;border-color: green blue red orange;box-sizing: border-box;<img src="https://noxussj.top:3000/16/2.png"></img> 第三步，把边框放大，使得外面的红色区域缩小到没有为止 width: 100px;height: 100px;border: 50px solid;border-color: green blue red orange;box-sizing: border-box;<img src="https://noxussj.top:3000/16/3.png"></img> 第四步，把其余边框色彩改为通明色试试 width: 100px;height: 100px;border: 50px solid;border-color: green transparent transparent transparent;box-sizing: border-box;<img src="https://noxussj.top:3000/16/4.png"></img> 就是这么简略，通过 border-color 管制三角形方向，通过 width、height、border 宽度来调整三角形大小和形态 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是回流？当一个元素本身的宽高，布局，显示或暗藏，或元素外部的文字构造发生变化，导致须要从新构建页面的时候，就产生了回流什么是重绘？当一个元素本身的宽高，布局，及显示或暗藏没有扭转，而只是扭转了元素的外观格调的时候，就产生了重绘什么时候会进行回流？增加或者删除可见的 DOM 元素的时候元素的地位产生扭转元素的尺寸产生扭转内容扭转页面第一次渲染的时候列举一些相干的 CSS 款式：width、height、line-height、padding、margin、diaplay、border、top、position、float、font-size、overflow 等什么时候会进行重绘？列举一些相干的 CSS 款式：color、background、background-size、visibility、box-shadow如何进行性能优化？用 transform 代替 top，left ，margin-top， margin-left… 这些位移属性不要应用 js 代码对 dom 元素设置多条款式，抉择用一个 className 代替之不要在循环内获取 dom 的款式例如：offsetWidth, offsetHeight, clientWidth, clientHeight 等。浏览器有一个回流的缓冲机制，获取这些属性时会产生回流防止设置多层内联款式，写个外部类这样只回流一次让屡次回流的元素脱离文档流比方动画，应用 position 属性的 fixed 值或 absolute 值一起变动（同时批改所有须要变动的属性）文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

应用图片应用字体文件应用 Canvas 等绘图应用 CSS3 transform: scale(0.9) （目前来说比拟不便的一种）文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

罕用的 CSS 选择器ID 选择器、类选择器、标签选择器、属性选择器、伪类选择器、后辈选择器权重划分在同一层级下 !important > 内联款式 > ID 选择器 > 类选择器 > （标签选择器、伪类选择器、属性选择器）不同层级下 失常来说权重值越高的优先级越高，然而始终以来没有具体的权重值划分，所以目前大多数开发中层级越深的优先级越高文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

为什么要应用 Flex 布局？Flex 布局是目前比拟风行的一种布局，因为它非常简略灵便，区区简略几行代码就能够实现各种页面的的布局，以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。应用 Flex 属性就能够写出简洁优雅简单的页面布局目前整顿了一些 Flex 布局罕用的一些属性，以下简略说一下容器和我的项目的意思 容器：采纳 Flex 布局的元素，称为容器我的项目：指的是容器外面的子元素容器的 6 个属性flex-direction：属性决定主轴的方向（即我的项目的排列方向）flex-wrap：默认状况下我的项目都排在一条轴线上，如果一行放不下如何解决（换行形式）flex-flow：flex-direction | flex-wrap（2 个属性的简写）justify-content：我的项目在主轴上的对齐形式（默认程度对齐形式）align-items：我的项目在穿插轴上如何对齐（默认垂直对齐形式）align-content：多根轴线的对齐形式（即多行的对齐形式）我的项目的 6 个属性order：我的项目的排列程序。数值越小，排列越靠前，默认为 0flex-grow：我的项目的放大（默认指宽度）比例，默认为 0，即如果存在残余空间，也不放大flex-shrink：我的项目的放大（默认指宽度）比例，默认为 1，即如果空间有余，该我的项目将放大flex-basis：我的项目将占据固定空间（默认设置固定宽度）flex：flex-grow | flex-shrink | flex-basis（3 个属性的缩写）align-self：容许单个我的项目有与其余我的项目不一样的对齐形式，可覆 align-items 属性参考资料：Flex 布局教程：语法篇 - 阮一峰的网络日志 文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

概念CSS3 是在 CSS 的根底上新增了一些个性CSS3 新个性CSS3 圆角 div{ border-radius:25px;}CSS3 盒暗影 div{ box-shadow: 10px 10px 5px #888;}CSS3 边框图片 div{ border-image:url(border.png) 30 30 round;}CSS3 背景 div{ background: url(img_flwr.gif);}CSS3 突变 div{ background-image: linear-gradient(#e66465, #9198e5); background-image: radial-gradient(red 5%, yellow 15%, green 60%);}CSS3 文本成果 div{ text-shadow: 5px 5px 5px #FF0000; text-overflow: clip;}CSS3 字体 @font-face{ font-family: myFirstFont; src: url(sansation_light.woff);}CSS2D 转换 div{ transform: translate(x,y);}CSS3D 转换 div{ transform-style: preserve-3d; transform: translate3d(x,y,z);}CSS3 过渡 div{ transition:width 2s;}CSS3 动画 @keyframes myfirst{ 0% { background: red; } 100% { background: yellow;}}div{ animation: myfirst 5s linear 2s infinite alternate;}CSS3 多列 ...

动态布局形容：就是设定好的长和宽，大小不会扭转，不论你多大的屏幕它都是那么大，分辨率是不会扭转的长处：这个对于开发者来说是最简略的一种布局形式，没有什么兼容性的问题毛病：当屏幕分辨率太低时，会展现出滚动条场景：传统 web 网站自适应布局形容：不同屏幕分辨率下，放弃原有展现形式。即元素的地位会变动而大小不会变动长处：页面可能兼容不同分辨率的设施毛病：屏幕太小会产生内容过于拥挤。所有的设施看起来都是一样的网站，不过是长度或者图片变小了，不会依据设施采纳不同的展现款式场景：传统 web 网站响应式布局形容：不同屏幕分辨率下，展现形式不同长处：一套代码兼容 web 端、平板、以及手机端网页毛病：工作量大、UI 设计也须要多个版本场景：同时兼容多种不同设施弹性布局（em/rem 布局）形容：应用 em 或 rem 单位进行绝对布局，在不同屏幕分辨率下页面所有元素的高宽都等比例缩放长处：所有屏幕的高宽比和最后的设计高宽比一样，或者相差不多，完满适应毛病：这种布局形式只是宽度自适应，高度却没有做到自适应场景：同时兼容多种不同设施弹性布局（flex 布局）形容：目前比拟风行的一种布局，应用传统布局难以实现一些简单的布局，应用 flex 布局实现就变得非常容易长处：简便、残缺、响应式地实现各种页面布局毛病：只兼容 IE10+的浏览器场景：三栏式布局、垂直程度居中布局流式布局（百分比布局）形容：页面元素的宽度依照屏幕分辨率进行适配调整，但整体布局不变。次要特色是像瀑布一样往下流，有法则的有限遍历模块。长处：灵便，充分利用浏览器的空间毛病：宽度依照屏幕进行适配调整，对于大屏幕来说用户体验并不是特地好，有些布局元素会显得很长场景：相似抖音视频、微博音讯、微信朋友圈等布局文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

次要是体现在代码标准上，XHTML 标准会更加严格XHTML 元素必须被正确地嵌套正确示范 <b><i>This text is bold and italic</i></b>谬误示范 <b><i>This text is bold and italic</b></i>XHTML 元素必须被敞开正确示范 <p>This is a paragraph</p><p>This is another paragraph</p>A break: <br />A horizontal rule: <hr />An image: <img src="happy.gif" alt="Happy face" />谬误示范 <p>This is a paragraph<p>This is another paragraphA break: <br>A horizontal rule: <hr>An image: <img src="happy.gif" alt="Happy face">标签名必须用小写字母正确示范 <body> <p>This is a paragraph</p></body>谬误示范 <BODY> <P>This is a paragraph</P></BODY>XHTML 文档必须领有根元素所有的 XHTML 元素必须被嵌套于 根元素中 <html><head> ... </head><body> ... </body></html>文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

1.性能元素1.1.列表标签 列表标签的作用: 给一堆数据增加列表语义, 也就是通知搜索引擎通知浏览器这一堆数据是一个整体 - HTML中列表标签的分类 无序列表(最多)(unordered list) 有序列表(起码)(ordered list) 定义列表(其次)(definition list) 1.1.1.无序列表: 给一堆数据增加列表语义, 并且这一堆数据中所有的数据都没有先后之分 什么叫有先后之分? 例如: 排行榜 什么叫没有先后之分? 例如: 中国有哪些城市 - 无序列表格局:<ul> <li>须要显示的条目内容</li></ul>li其实是英文list item的缩写list是列表的意思item是条目标意思所以联合起来就是 列表条目标意思- 无序列表款式<ul type="value"></ul>disc 默认值 实心圆circle 空心圆square 实心方块尽管通过标签属性也能批改款式, 然而在企业开发中千万不要这么干 - 留神点: 1.肯定要记住ul标签是用来给一堆数据增加列表语义的, 而不是用来给他们增加小圆点的 2.ul标签和li标签是一个整体, 是一个组合. 所以个别状况下ul标签和li标签都是一起呈现, 不会单个呈现. 也就 是说不会独自应用一个ul标签或者独自应用一个li 标签, 都是联合在一起应用 3.因为ul标签和li标签是一个组合, 所以ul标签中不举荐蕴含其它标签, 也就是说当前你在ul标签中只会看到li 标签 - 无序列表利用场景: 1.新闻列表 2.商品列表 3.导航条 1.1.2.有序列表 有序列表的作用: 给一堆数据增加列表语义, 并且这一堆数据中所有的数据都有先后之分 - 有序列表格局:<ol> <li></li></ol>其它用法和ul都差不多, 也就是利用场景/留神点都和ul差不多- 有序列表款式<ol type="A"></ol>1 默认值。数字有序列表。（1、2、3、4）a 按字母顺序排列的有序列表，小写。（a、b、c、d）A 按字母顺序排列的有序列表，大写。（A、B、C、D）i 罗马字母，小写。（i, ii, iii, iv）I 罗马字母，大写。（I, II, III, IV）1.1.3.定义列表 给一堆数据增加列表语义，先通过dt标签定义列表中的所有题目, 而后再通过dd标签给每个题目增加形容信息 ...

应用媒体查问（@media） 应用媒体查问能够依据用户不同分辨率展现不同的款式（即可实现不同的布局形式），从而达到响应式布局 @media screen and (max-width: 1920px) { body { background: red; }}@media screen and (max-width: 1600px) { body { background: blue; }}@media screen and (max-width: 1440px) { body { background: green; }}@media screen and (max-width: 960px) { body { background: yellow; }}文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

这个题目没有标准答案，以下是我集体的了解 浏览器通过 DNS 查找域名的 IP 地址浏览器与指标服务器建设 TCP 连贯（3 次握手）浏览器通过 http 协定发送资源申请（接口、图片、音频、视频、CSS、JS 等等）服务器端响应 http 申请浏览器解析渲染 HTML 代码，最终出现给用户敞开页面，开释 TCP 连贯（4 次挥手）文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

1.列表元素 无序列表 ul、li 班级、同学/城市 给一堆数据增加列表语义, 并且这一堆数据中所有的数据都没有先后之分 <ul type="value"> <li>要展现的数据</li></ul> type： disc 默认值 实心圆circle 空心圆square 实心方块有序列表： ol、li 给一堆数据增加列表语义, 并且这一堆数据中所有的数据都有先后之分(排行榜) <ol type="A"> <li></li></ol> 1 默认值。数字有序列表。（1、2、3、4） a 按字母顺序排列的有序列表，小写。（a、b、c、d） A 按字母顺序排列的有序列表，大写。（A、B、C、D） i 罗马字母，小写。（i, ii, iii, iv） I 罗马字母，大写。（I, II, III, IV） 定义列表： <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd></dl> 给一堆数据增加列表语义，先通过dt标签定义列表中的所有题目, 而后再通过dd标签给每个题目增加形容信息 2.表格标签： 一对table标签就是一个表格 一对tr标签就是表格中的一行 一对td标签就是一行中的一个单元格 <table> <tr> <td>须要展现的内容</td> </tr> </table>留神留神留神留神留神留神留神留神： -1表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认状况下这个属性的值是0, 所以看不到边框-2表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起呈现, 要么一起不呈现, 不会单个呈现-3能够给table标签和td标签应用 表格的宽高：默认是依照内容的尺寸来调整 table的width/height 单元格的宽高：td的widht/height（不会影响整个表格的宽度和高度） 行内款式：style="color:red;background-color:white" 优先级最高 -4表格内单元格的程度、垂直对齐 程度：align table(表格程度对齐形式) tr、td(以后单元格内容的程度对齐形式) 垂直：valign tr、td(单元格中的内容在垂直方向的对齐形式) -5表格的内边距与外边距属性cellspacing外边距：单元格和单元格之间的间隔(默认2)cellpadding内边距：单元格的边框和文字之间的间隙(默认1)-6单元格合并colspan：程度方向上的单元格合并rowspan：垂直方向上的单元格合并--表格的残缺构造 ...

web 规范web 规范次要分为构造、体现、行为 3 局部构造：指咱们平时在 body 外面写的标签，次要是由 HTML 标签组成体现：指更加丰盛 HTML 标签款式，次要由 CSS 款式组成行为：指页面和用户的交互，次要由 JS 局部组成W3CW3C 对 web 规范提出了规范化的要求，即代码标准 对构造的要求标签字母要小写标签要闭合标签不容许随便嵌套对体现和行为的要求 倡议应用外链 CSS 和 js 脚本，实现构造与体现拆散、构造与行为拆散，能进步页面的渲染效率，更快地显示网页内容文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是浏览器内核？浏览器内核也能够了解为排版引擎，次要由 2 局部组成，渲染引擎和 JS 引擎排版引擎次要是负责获取网页内容（HTML、XML、图像、CSS、JS）等信息进行解析、渲染网页，将网页的代码转换为看失去的页面浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的成果也不雷同，常见的内核有 Trident、 Gecko、 Webkit、 Presto、 Blink 五种Trident 内核代表作品是 IE，俗称 IE 内核；应用 IE 内核的浏览器包含、傲游、世界之窗、百度浏览器、兼容模式的浏览器等WebKit 内核代表作品是 Safari、旧版的 ChromePresto 内核代表作品是 Opera，Presto 是由 Opera Software 开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在 13 年之后，Opera 发表退出谷歌营垒，弃用了 PrestoBlink 内核代表作品是 Chrome、Opera；由 Google 和 Opera Software 开发的浏览器排版引擎Gecko 内核代表作品是 Firefox，俗称 Firefox 内核Chromium 内核这个比拟非凡，Chromium 是谷歌的开源我的项目是一款浏览器，Chrome 是 Chromium 的稳定版。国内的大部分双核浏览器都采纳 Chromium 内核文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

1.HTML与CSS1.1.什么是HTML？什么是CSS？HTML是HyperText Markup Language(超文本标记语言)不是编程语言 它不是一种编程语言，而是一种标记语言，用于通知浏览器如何结构你的页面。它能够由一系列HTML元素组合成web开发人员想要的简略或者简单的页面。“超文本”就是指页面内能够蕴含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种标准，一种规范，它通过标记符号来标记要显示的网页中的各个局部。网页文件自身是一种文本文件，通过在文本文件中增加标记符，能够通知浏览器如何显示其中的内容（如：文字如何解决，画面如何安顿，图片如何显示等）。浏览器按程序浏览网页文件，而后依据标记符解释和显示其标记的内容，对书写出错的标记将不指出其谬误，且不进行其解释执行过程，编制者只能通过显示成果来剖析出错起因和出错部位。能够应用.html与.htm作为HTML文件的后缀名（扩展名） HTML的历史版本倒退 ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案公布。 ②HTML 2.0：1995年1 1月作为RFC 1866公布，于2000年6月公布之后被发表曾经过期。 ③HTML 3.2：1997年1月14日，W3C举荐规范。 ④HTML 4.0：1997年12月18日，W3C举荐规范。 ⑤HTML 4.01（渺小改良）：1999年12月24日，W3C举荐规范。 ⑥HTML 5：2014年10月，HTML5是公认的下一代Web语言，极大地晋升了Web在富媒体、富内容和富利用等方面的能力，被喻为终将扭转挪动互联网的重要推手。Internet Explorer 8及以前的版本不反对。 HTML特点 超文本标记语言文档制作不是很简单，但功能强大，反对不同数据格式的文件镶入，这也是万维网 （WWW）流行的起因之一，其次要特点如下： 1.繁难性：超文本标记语言版本升级采纳超集形式，从而更加灵便不便。 2.可扩展性：超文本标记语言的广泛应用带来了增强性能，减少标识符等要求，超文本标记语言采取子类 元素的形式，为零碎扩大带来保障。 3.平台无关性：尽管集体计算机大行其道，但应用MAC等其余机器的大有人在，超文本标记语言能够应用 在宽泛的平台上，这也是万维网（WWW）流行的另一个起因。 4.通用性：另外，HTML是网络的通用语言，一种简略、通用的全置标记语言。它容许网页制作人建设文本与图片相结合的简单页面，这些页面能够被网上任何其他人浏览到，无论应用的是什么类型的电脑或浏览器。 CSS (Cascading Style Sheets) 层叠样式表 是一个用于润饰文档（能够是标记语言HTML，也能够是XML或者SVN）的语言，能够将文档以更优雅的模式出现给用户 1.2.HTML和CSS之间的关系？HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，能够蕴含文字、图片、视频等。CSS款式是体现。就像网页的外衣。比方，题目字体、色彩变动，或为题目退出背景图片、边框等。所有这些用来扭转内容外观的货色称之为体现。 HTML就像是一个人，而CSS就像是衣服和化妆品，用来装璜HTML1.3.构造，体现，行为？构造HTML用于形容页面的构造体现CSS用于管制页面中元素的款式行为JavaScript用于响应用户操作2.初识HTML2.1.开发环境搭建可用于编写HTML的编译工具有很多记事本：特点：无代码提醒、无代码高亮显示、用户界面不敌对；Sublime（举荐）：特点：运行速度快、代码提醒、高亮显示、插件拓展、html 插件emmet、sublime text3 装置emmet插件；VSCode（举荐）：特点：丰盛的插件反对、可进行git治理；Idea：特点：集成开发工具、相似DW,node,npm...运行速度较慢；Html是在浏览器上解析执行的，每种浏览器对雷同的Html代码解析可能产生不同的后果，所以咱们须要装置多种支流的浏览器进行兼容性测试；支流浏览器：Google Chrome（谷歌）、Firefox（火狐）、Opera、Safari、Microsoft Edge。 VSCode插件举荐 HTML CSS Support - Html提醒Css主动补全 HTML Preview - 提供预览HTML文档的性能 HTML Snippets - 残缺的HTML标签，包含HTML5片段 ...

1. 排版标签排版标签次要和css搭配应用，显示网页构造的标签，是网页布局最罕用的标签。 1.1 题目标签h单词缩写： head 头部. 题目 title 文档题目 为了使网页更具备语义化，咱们常常会在页面中用到题目标签，HTML提供了6个等级的题目，即 题目标签语义： 作为题目应用，并且根据重要性递加 其根本语法格局如下： <h1> 题目文本 </h1><h2> 题目文本 </h2><h3> 题目文本 </h3><h4> 题目文本 </h4><h5> 题目文本 </h5><h6> 题目文本 </h6>显示成果： 1.2 段落标签p单词缩写： paragraph 段落 [pærgræf] 毋庸记这个单词 作用语义： 能够把 HTML 文档宰割为若干段落 在网页中要把文字有条理地显示进去，离不开段落标签，就如同咱们平时写文章一样，整个网页也能够分为若干个段落，而段落的标签就是 <p> 文本内容 </p>是HTML文档中最常见的标签，默认状况下，文本在一个段落中会依据浏览器窗口的大小主动换行。 1.3 水平线标签hr单词缩写： horizontal 横线 [hrzntl] 同上 在网页中经常看到一些水平线将段落与段落之间隔开，使得文档构造清晰，层次分明。这些水平线能够通过插入图片实现，也能够简略地通过标签来实现，\<hr />就是创立横跨网页水平线的标签。其根本语法格局如下： <hr />是单标签在网页中显示默认款式的水平线。 1.4 换行标签br单词缩写： break 打断 ,换行 在HTML中，一个段落中的文字会从左到右顺次排列，直到浏览器窗口的右端，而后主动换行。如果心愿某段文本强制换行显示，就须要应用换行标签 <br />这时如果还像在word中间接敲回车键换行就不起作用了。 1.5 div 和 span标签div span 是没有语义的 是咱们网页布局次要的2个盒子 想必你听过 css+div div 就是 division 的缩写 宰割， 分区的意思 其实有很多div 来组合网页。 ...

存储大小cookie：数据大小不能超过 4klocalStorage、sessionStorage：数据大小反对 5M 左右，不同浏览器存储大小不同生命周期（无效工夫）cookie：须要设置有效期，过期后 cookie 就会销毁localStorage：除非被手动清理，否则永恒存在sessionStorage：页面敞开（包含标签选项卡）后就会被销毁存储模式三者都是存储字符串类型，简单对象能够采纳 json 的 stringify 和 parse 办法来做解决安全性cookie：申请时个别会携带在 header 中localStorage、sessionStorage：申请时不会携带文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是标签语义化？晋升代码可读性，便于团队开发和保护为什么要标签语义化？当网页去掉 CSS 款式时，页面能出现进去清晰的构造案例不存在语义化 <div></div><div></div><div></div>应用语义化 <header></header><main></main><footer></footer>总结：从下面能够看出，一个页面外面放 3 个 div 他人也不晓得这是啥意思。如果应用语义化标签就能分明的晓得分为 3 个模块顶部、两头、底部。文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

概念能够把所有 HTML 标签都了解成一个盒子模型盒子模型次要由 4 个局部组成：content、padding、border、margin <img src="https://noxussj.top:3000/2/1.png"></img> 规范盒模型（W3C 盒模型） content-box盒子的尺寸 = content怪异盒模型（IE 盒模型） border-box盒子的尺寸 = content + padding + border文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

概念HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新规范文档类型申明HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3333.org/TR/html4/ strict.dtd">HTML5 <!DOCTYPE html>能够看出 HTML 的文档类型申明太长而且简单，而 HTML5 的文档申明相对来说更为简便，有利于程序员疾速浏览和开发音频和视频的反对HTML5 通过 audio 和 video 标签来反对音频和视频管制图形的反对HTML5 通过 svg、canvas 标签进行绘图新增了一些语义化元素和移除元素新增 article、nav、details、footer、header、main、time、canvas、svg、audio、video 等标签移除 font、center、u、big、strike、tt 等标签会话存储和本地存储localStorage、sessionStorage文章的内容/灵感都从下方内容中借鉴【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

let webSocket = null;let mAudio = null;let webSocketStateInterval = null;let heartInterval = null;let number = 3;let _closeType = false; // true被动挂断 false被动挂断export default { initWebsocket() { let _that = this; let userInfo = JSON.parse(localStorage.getItem("userInfo")); let _url = process.env.VUE_APP_socketURL + userInfo.id; webSocket = new WebSocket( _url); webSocket.onopen = function(event) { // console.log("webSocket onopen ----->", event); heartInterval = setInterval(function(){ webSocket.send(JSON.stringify({cmd: 100})); }, 10000); webSocketStateInterval = setInterval(function(){ switch (webSocket.readyState) { case WebSocket.CONNECTING: console.log("webSocket连贯中---->"); break; case WebSocket.OPEN: console.log("webSocket关上中---->"); break; case WebSocket.CLOSING: console.log("webSocket敞开中---->"); break; case WebSocket.CLOSED: console.log("webSocket敞开胜利---->"); if(webSocketStateInterval){ clearInterval(webSocketStateInterval); } if(_closeType == false){ _that.initWebsocket(); // number--; if(number === 0) {webSocket.close();} } break; default: console.log("webSocket-------"); break; } }, 2000); }; webSocket.onmessage = function(event) { // console.log("webSocket onmessage ----->", event); let message = JSON.parse(event.data); // console.log("message----->", message); if (message.cmd == 100) { console.log("100-心跳中------", message.msg); } }; webSocket.onerror = function(event) { console.log("webSocket onerror ----->", event); _that.initWebsocket(); }; webSocket.onclose = function(event) { console.log("webSocket onclose --->", event); if(_closeType){ if(webSocketStateInterval){ clearInterval(webSocketStateInterval); } } if(heartInterval){ clearInterval(heartInterval); } _closeType = false; }; // return new Promise((resolve, reject) => {resolve()}); }, sendWebSocket(text) { webSocket.send(JSON.stringify(text)); }, closeWebSocket(closeType) { _closeType = closeType; webSocket.close(); }, closeAudio() { mAudio.pause(); }}

次要是体现在代码标准上，XHTML 标准会更加严格XHTML 元素必须被正确地嵌套正确示范 <b><i>This text is bold and italic</i></b>谬误示范 <b><i>This text is bold and italic</b></i>XHTML 元素必须被敞开正确示范 <p>This is a paragraph</p><p>This is another paragraph</p>A break: <br />A horizontal rule: <hr />An image: <img src="happy.gif" alt="Happy face" />谬误示范 <p>This is a paragraph<p>This is another paragraphA break: <br>A horizontal rule: <hr>An image: <img src="happy.gif" alt="Happy face">标签名必须用小写字母正确示范 <body> <p>This is a paragraph</p></body>谬误示范 <BODY> <P>This is a paragraph</P></BODY>XHTML 文档必须领有根元素所有的 XHTML 元素必须被嵌套于 根元素中 <html><head> ... </head><body> ... </body></html>附加【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

应用 flex 弹性布局应用媒体查问（@media）附加【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

这个题目没有标准答案，以下是我集体的了解 浏览器通过 DNS 查找域名的 IP 地址浏览器与指标服务器建设 TCP 连贯（3 次握手）浏览器通过 http 协定发送资源申请（接口、图片、音频、视频、CSS、JS 等等）服务器端响应 http 申请浏览器解析渲染 HTML 代码，最终出现给用户敞开页面，开释 TCP 连贯（4 次挥手）附加【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

web 规范web 规范次要分为构造、体现、行为 3 局部构造：指咱们平时在 body 外面写的标签，次要是由 HTML 标签组成体现：指更加丰盛 HTML 标签款式，次要由 CSS 款式组成行为：指页面和用户的交互，次要由 JS 局部组成W3CW3C 对 web 规范提出了规范化的要求，即代码标准 对构造的要求标签字母要小写标签要闭合标签不容许随便嵌套对体现和行为的要求 倡议应用外链 CSS 和 js 脚本，实现构造与体现拆散、构造与行为拆散，能进步页面的渲染效率，更快地显示网页内容附加【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是浏览器内核？浏览器内核也能够了解为排版引擎，次要由 2 局部组成，渲染引擎和 JS 引擎排版引擎次要是负责获取网页内容（HTML、XML、图像、CSS、JS）等信息进行解析、渲染网页，将网页的代码转换为看失去的页面浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的成果也不雷同，常见的内核有 Trident、 Gecko、 Webkit、 Presto、 Blink 五种Trident 内核代表作品是 IE，俗称 IE 内核；应用 IE 内核的浏览器包含、傲游、世界之窗、百度浏览器、兼容模式的浏览器等WebKit 内核代表作品是 Safari、旧版的 ChromePresto 内核代表作品是 Opera，Presto 是由 Opera Software 开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在 13 年之后，Opera 发表退出谷歌营垒，弃用了 PrestoBlink 内核代表作品是 Chrome、Opera；由 Google 和 Opera Software 开发的浏览器排版引擎Gecko 内核代表作品是 Firefox，俗称 Firefox 内核Chromium 内核这个比拟非凡，Chromium 是谷歌的开源我的项目是一款浏览器，Chrome 是 Chromium 的稳定版。国内的大部分双核浏览器都采纳 Chromium 内核附加【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

概念HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新规范文档类型申明HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3333.org/TR/html4/ strict.dtd">HTML5 <!DOCTYPE html>能够看出 HTML 的文档类型申明太长而且简单，而 HTML5 的文档申明相对来说更为简便，有利于程序员疾速浏览和开发音频和视频的反对HTML5 通过 audio 和 video 标签来反对音频和视频管制图形的反对HTML5 通过 svg、canvas 标签进行绘图新增了一些语义化元素和移除元素新增 article、nav、details、footer、header、main、time、canvas、svg、audio、video 等标签移除 font、center、u、big、strike、tt 等标签会话存储和本地存储localStorage、sessionStorage附加【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【大数据可视化图表插件】https://www.npmjs.com/package...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

在线HTML转MarkDown工具在线HTML转MarkDown工具 Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。 它容许人们应用易读易写的纯文本格式编写文档，而后转换成无效的XHTML（或者HTML）文档。 https://tooltt.com/html2markdown/

响应式图片img标签在HTML5.1中新减少了srcset和sizes属性，能够用来实现图片的响应式 srcsetsrcset能够用来指定多张图像，能够用不同的描符来进行辨别 xx用来形容不同的像素密度倍数，例如1x, 2x, 3x, 写法为 <img srcset="./nice/2.gif 3x, ./nice/1.jpg 2x, ./nice/1.gif" src="./nice/2.jpg" />当像素比与所设的不匹配的时候，会进行向上匹配，即2x的没有预设，则会选用3x的，src属性会被标识为1x，srcset中没有写1x也会标识为1x。先匹配srcset中，再匹配src中的。 ww用来形容图片资源的尺寸，此时的写法为 <img srcset="./nice/1.jpg 1920w, ./nice/big.jpg 800w" sizes="(max-width: 700px) 500px, (max-width: 1280px) 700px" src="./nice/4.jpg" />sizes中的前半句为媒体查问，后半句为图片的显示宽度。显示宽度能够写px或者vw。 浏览器首先依据媒体查问找到显示的图片大小，而后乘以设施像素比，去跟图片像素比拟，显示最靠近的 留神sizes独自存在有效

明天的知识点 (2021.07.24) —— 第830天 (我也要出题)[html] 应用HTML5绘制一支铅笔[css] 应用CSS3实现牛顿摇晃球动画[js] 异步工作从开始执行到调用回调函数这段时间放到哪边？[软技能] 你感觉你住的中央离公司远吗？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！ 欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！ 心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

毕业生信息管理系统，实现学生个人信息根本的增删改查， 我想了想前段时间刚学习的列表，这个简略啊 ，设计一个学生信息列表，而后列表外面再存每个学生详细信息的列表，而后来实现一个根本的增删查改，这个不难啊！间接开始撸代码！所以想学的同学，有必要听一下这位老师的课、支付python福利奥，想学的同学能够到梦子老师的围鑫（同音）：前排的是：762，两头一排是：459，后排的一组是：510 ,把以上三组字母依照程序组合起来即可她会安顿学习的。 上代码！ `def Menu():##菜单主界面 print(''22) print(" 查看毕业生列表输出: 1 ") print(" 增加毕业生信息输出: 2 ") print(" 批改毕业生信息输出: 3 ") print(" 删除毕业生信息输出: 4 ") print(" 退出零碎请输出   0 ") print(''22) def CheckIdisRight(StudentList,id):##查看学号是否在列表中 for i in range(0, len(StudentList)):   if((id in StudentList[i])==True):     return True return False def PrintStudentList(StudentList):#打印学生信息列表 for i in range(0, len(StudentList)):   print(StudentList[i]) def AddStudent(StudentList):##增加学生信息 number = int((input("请输出学号："))) if(number<1000000000 and CheckIdisRight(StudentList,number)==False):##学号判断   print("学号输出谬误&学号已存在！请从新输出：")   number = (input("请输出学号：")) name = input("请输出你的名字：") tell = input("请输出你的电话：") if(len(tell)!=11):   print("请输出正确的电话号码(11)位：")   tell = input() college = input("请输出你的学院名称：") grade = input("请输出你的年级：") isjob = int(input("是否待业？：是填 1 否则填0: ")) if(isjob == 1):   company = input("请输出你公司的名称：") else:   company = 0 arry = [number, name, tell, college, grade, isjob, company] StudentList.append(arry)##将新建的学生信息进行插入 PrintStudentList(StudentList)##打印学生信息列表 ...

利用数组的 reverse 实现 let arr = 'abcdefg';let res = [...arr].reverse().join('');console.log(res); // gfedcba附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是二叉查找树（BST）？这边只简略形容一下什么是二叉查找树，更具体的先不形容了。 二叉查找树的个性： 若它的左子树不为空，则左子树上的所有节点的值都小于它的根节点的值若它的右子树不为空，则右子树上所有节点的值都大于它的根节点的值其余的左右子树也别离为二叉查找树二叉查找树是动静查找表，在查找的过程中可见增加和删除相应的元素，在这些操作中须要放弃二叉查找树的以上性质下图就是一个二叉查找树 <img src="https://noxussj.top:3000/34/1.png"></img> 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

利用 ES6 新增的数据结构 Set 实现 let arr = [20, 28, 28, 30, 28, 50, 40];let res = [...new Set(arr)];console.log(res); // [20, 28, 30, 50, 40]附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

间接上代码 let str = 'apple';let obj = {};let number = 0;let activeIndex = '';[...str].map(key => { key in obj ? obj[key]++ : (obj[key] = 1); obj[key] > number ? (activeIndex = key) : ''; number = obj[key];});console.log(activeIndex); // p附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

算法分类（比拟和非比拟）非线性工夫比拟类排序：通过比拟来决定元素间的绝对秩序，因为其工夫复杂度不能冲破 O(nlogn)，因而称为非线性工夫比拟类排序 线性工夫非比拟类排序：不通过比拟来决定元素间的绝对秩序，它能够冲破基于比拟排序的工夫下界，以线性工夫运行，因而称为线性工夫非比拟类排序 <img src="https://noxussj.top:3000/31/1.png"></img> 排序算法评估规范工夫复杂度 工夫复杂度分为：最坏工夫复杂度、均匀工夫复杂度、最好工夫复杂度。次要反馈的是执行程序的次数空间复杂度 是对一个算法在运行过程中长期占用存储空间大小的量度稳定性 稳定性的意思是对于序列中键值（Key value）雷同的元素，它们在排序前后的绝对关系放弃不变。对于 int 这样的根本数据类型，稳定性基本上是没有意义的，因为它的键值就是元素自身，两个元素的键值雷同他们就能够被认为是雷同的。但对于简单的数据类型，数据的键值雷同，数据不肯定雷同，比方一个 Student 类，包含 Name 和 Score 两个属性，以 Score 为键值排序，这时候键值雷同元素间的绝对关系就有意义了。总结就是通过排序之后,能使值雷同的数据放弃原程序中的绝对地位不变内排序 所有排序操作都在内存中实现，实用于数据规模不是特地大的状况外排序 因为数据太大，因而把数据放在磁盘中，而排序通过磁盘和内存的数据传输能力进行各排序算法总结<img src="https://noxussj.top:3000/31/2.png"></img> 名词解释： n: 数据规模（即序列的长度） k: “桶”的个数 In-place: 占用常数内存，不占用额定内存 Out-place: 占用额定内存 参考资料：值得珍藏的十大经典排序算法 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是基数排序？根本思维：基数排序是依照低位先排序，而后收集；再依照高位排序，而后再收集；顺次类推，直到最高位 直观表白：就是将每个数依照它的位数进行拆分，对每一个对应的位数进行比拟排序，直到所有位数都进行过一遍排序地位 根底排序最重要的就是位数 数字：832 通过位数能够拆分成 个位数，十位数，百位数 字母：sdf 通过位数能够拆分成 s d f 栗子假如有一组序列：329, 457, 657, 839, 436, 720, 355 首先咱们晓得它他们最大的值（839）的位数有 3 位（百位数，十位数，个位数），那么就能够这组序列的对应位数进行排序比拟 首先对个位数（最左边的数）进行排序，后果为 720, 355, 436, 457, 657, 329, 839 而后对十位数（两头的数）进行排序，后果为 720, 329, 436, 839, 355, 457, 657 而后对百位数（最左边的数）进行排序，后果为 329, 355, 436, 457, 657, 720, 839 每一个位数都别离进行了排序比拟，所以遍历完结。 最初失去曾经排好序的序列 那么这个时候就会有人问了，如果它们的位数不同呢？如果每个元素是一串字母而不是数字呢？ 位数不同如何解决？3, 200, 55, 220, 70 个别咱们对每个位数进行判断都是从 0~9 来进行，如果位数不同，那么就要提前判断该元素是否领有个位数，十位数，百位数，如果没有则排在 0 后面 元素为英文字符串，并非是数字？单个字母也是能够进行大小判断的，a-z 元素为英文字符串和数字的实现形式也是一样的，只是没有了个位数，十位数，百位数的说法，能够换成左边第 0 位，1 位，2 位这样 <img src="https://noxussj.top:3000/30/1.png"></img> 动图展现<img src="https://noxussj.top:3000/30/2.gif"></img> 参考资料值得珍藏的十大经典排序算法漫画：什么是基数排序？ 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是冒泡排序？根本思维：冒泡排序，相似于水中冒泡，较大的数沉下去，较小的数缓缓浮起来直观表白：即在数组排序中，从小到大排序 算法形容从第一个数开始，每 2 个相邻的数进行比拟，小的放在右边，大的放在左边。反反复复反复 n 遍，n 即代表数组的长度 - 1 形容太多也没用，间接看图就能懂了 <img src="https://noxussj.top:3000/21/1.gif"></img> 代码演示我觉这个应该不须要了，只有晓得算法的逻辑就能够了 参考资料排序-冒泡排序 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

网上看了很多文章，只想说一句话：“真的啥都没看懂”。以下是我集体的了解，有不对的中央能够提出。 在形容他们之间的区别之前，咱们首先要理解一下什么是 BFC、IFC、GFC、FFC？ 咱们晓得元素有内联元素、块级元素、行内块级元素，在页面上渲染时它们的定位，排列形式等都有所不同，就是因为它们依据外部的格式化上下文进行不同的渲染，即 BFC 和 IFC。前面 CSS3 新增了 grid 布局以及 flex 布局，所以也迎来了 GFC、FFC分割线-------------------------------------------------------------------- 下方的内容在网上找，基本上都是差不多的 BFC（Block formatting contexts）：块级格局上下文页面上的一个隔离的渲染区域，那么他是如何产生的呢？能够触发 BFC 的元素有 float、position、overflow、display：table-cell/ inline-block/table-caption ；BFC 有什么作用呢？比如说实现多栏布局 IFC（Inline formatting contexts）：内联格局上下文IFC 的 line box（线框）高度由其蕴含行内元素中最高的理论高度计算而来（不受到竖直方向的 padding/margin 影响)IFC 中的 line box 个别左右都贴紧整个 IFC，然而会因为 float 元素而扰乱。float 元素会位于 IFC 与与 line box 之间，使得 line box 宽度缩短。 同个 ifc 下的多个 line box 高度会不同 IFC 中时不可能有块级元素的，当插入块级元素时（如 p 中插入 div）会产生两个匿名块与 div 分隔开，即产生两个 IFC，每个 IFC 对外体现为块级元素，与 div 垂直排列。 那么 IFC 个别有什么用呢？ ...

<img src="https://noxussj.top:3000/19/1.png"></img> 实现上方成果，上面列举几个罕用的办法，集体比拟举荐用 flex 布局实现 形式 1（利用 margin 和相对定位）html <div class="container"> <div class="box"></div></div>css .container { position: relative; width: 150px; height: 150px; background-color: #000; .box { margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 50px; height: 50px; background-color: #fff; }}形式 2（利用 flex 布局）html <div class="container"> <div class="box"></div></div>css .container { position: relative; width: 150px; height: 150px; background-color: #000; display: flex; justify-content: center; align-items: center; .box { width: 50px; height: 50px; background-color: #fff; }}附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

罕用的动画分为 2D 和 3D2D：位移、旋转、放大放大、突变显示暗藏、变形3D：旋转、视角放大放大等附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是回流？当一个元素本身的宽高，布局，显示或暗藏，或元素外部的文字构造发生变化，导致须要从新构建页面的时候，就产生了回流什么是重绘？当一个元素本身的宽高，布局，及显示或暗藏没有扭转，而只是扭转了元素的外观格调的时候，就产生了重绘什么时候会进行回流？增加或者删除可见的 DOM 元素的时候元素的地位产生扭转元素的尺寸产生扭转内容扭转页面第一次渲染的时候列举一些相干的 CSS 款式：width、height、line-height、padding、margin、diaplay、border、top、position、float、font-size、overflow 等什么时候会进行重绘？列举一些相干的 CSS 款式：color、background、background-size、visibility、box-shadow如何进行性能优化？用 transform 代替 top，left ，margin-top， margin-left… 这些位移属性不要应用 js 代码对 dom 元素设置多条款式，抉择用一个 className 代替之不要在循环内获取 dom 的款式例如：offsetWidth, offsetHeight, clientWidth, clientHeight 等。浏览器有一个回流的缓冲机制，获取这些属性时会产生回流防止设置多层内联款式，写个外部类这样只回流一次让屡次回流的元素脱离文档流比方动画，应用 position 属性的 fixed 值或 absolute 值一起变动（同时批改所有须要变动的属性）附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

罕用的 CSS 选择器ID 选择器、类选择器、标签选择器、属性选择器、伪类选择器、后辈选择器权重划分在同一层级下 !important > 内联款式 > ID 选择器 > 类选择器 > （标签选择器、伪类选择器、属性选择器）不同层级下 失常来说权重值越高的优先级越高，然而始终以来没有具体的权重值划分，所以目前大多数开发中层级越深的优先级越高附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

概念CSS3 是在 CSS 的根底上新增了一些个性CSS3 新个性CSS3 圆角 div{ border-radius:25px;}CSS3 盒暗影 div{ box-shadow: 10px 10px 5px #888;}CSS3 边框图片 div{ border-image:url(border.png) 30 30 round;}CSS3 背景 div{ background: url(img_flwr.gif);}CSS3 突变 div{ background-image: linear-gradient(#e66465, #9198e5); background-image: radial-gradient(red 5%, yellow 15%, green 60%);}CSS3 文本成果 div{ text-shadow: 5px 5px 5px #FF0000; text-overflow: clip;}CSS3 字体 @font-face{ font-family: myFirstFont; src: url(sansation_light.woff);}CSS2D 转换 div{ transform: translate(x,y);}CSS3D 转换 div{ transform-style: preserve-3d; transform: translate3d(x,y,z);}CSS3 过渡 div{ transition:width 2s;}CSS3 动画 @keyframes myfirst{ 0% { background: red; } 100% { background: yellow;}}div{ animation: myfirst 5s linear 2s infinite alternate;}CSS3 多列 ...

什么是桶排序？桶排序是计数排序的升级版，有些排序场景计数排序无奈应用（数值超出范围或者不是整数）。将数据分到无限数量的桶里，每个桶再别离排序（有可能再应用别的排序算法或是以递归形式持续应用桶排序） 算法形容设置 n 个数量的空桶，并且确定每个桶的范畴； 遍历输出数据，并且把数据一个一个放到对应的桶里去； 对每个能够进行排序（桶外面的数量大于 1 个）的桶进行排序； 把排序好的桶拼接起来 栗子每一个桶代表一个区间范畴，外面能够承载一个或多个元素。 桶排序的第一步，就是创立这些桶，确定每一个桶的区间范畴 <img src="https://noxussj.top:3000/29/1.png"></img> 这个时候就会有人发问，怎么晓得建设多少个桶？每个桶的范畴是多少呢？ 具体建设多少个桶，如何确定桶的区间范畴，有很多不同的形式，由理论状况去定义 这里只举例其中一种，创立的桶数量等于原始序列的元素数量，除了最初一个桶只蕴含数列最大值，后面各个桶的区间依照比例确定 区间跨度 （求平均值）= （最大值-最小值）/ （桶的数量 - 1） 第二步，遍历原始序列，把元素对号入座放入各个桶中 <img src="https://noxussj.top:3000/29/2.png"></img> 第三步，每个桶外部的元素别离排序（显然，只有第一个桶须要排序） <img src="https://noxussj.top:3000/29/3.png"></img> 最初一步，遍历所有的桶，输入所有元素 0.5，0.84，2.18，3.25，4.5 参考资料值得珍藏的十大经典排序算法漫画：什么是桶排序？ 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是堆排序？是指利用堆这种数据结构所设计的一种排序算法。沉积是一个近似齐全二叉树的构造，并同时满足沉积的性质：即子结点的键值或索引总是小于（或者大于）它的父节点 在看本文之前请先理解以下概念 齐全二叉树：除了最初一层之外的其余每一层都被齐全填充，每一层从左到右的填充数据，不能空缺（只是相似这个构造，所以本文不会用到这个知识点） 堆：分为大顶堆和小顶堆两种 大顶堆（小顶堆）：可分为有序区和无序区，初始全副为无序区 执行的步骤是如何进行的？无非就是将一个无序数组转化为大顶堆（小顶堆）将堆顶的值和无序数组开端值替换地位依据堆的性质进行调整，成为大顶堆（小顶堆）而后又持续 1~3 的步骤，反反复复直到无序区没有值为止这个时候必定会有人问，怎么区别有序区和无序区？什么是大顶堆（小顶堆）？以及大顶堆（小顶堆）是如何调整进去的？ 如何分别有序区和无序区？<img src="https://noxussj.top:3000/27/1.png"></img> <img src="https://noxussj.top:3000/27/2.png"></img> 循环完结后应该是这样的，没有无序区了 <img src="https://noxussj.top:3000/27/3.png"></img> 下面的大顶堆（小顶堆）理论在存储在数组中是这样的 当初应该晓得有序区和无序区如何分辨了吧，以及大顶堆是如何在数组中进行存储的 什么是大顶堆（小顶堆）？<img src="https://noxussj.top:3000/27/4.png"></img> 通过上图应该都能看进去大顶堆和小顶堆的区别了吧。 大顶堆：每个结点的值都大于或等于其左右孩子结点的值（大到小排列） 小顶堆：每个结点的值都小于或等于其左右孩子结点的值（小到大排列） 大顶堆（小顶堆）是如何调整进去的？也是本文中最难了解的中央，上面简略形容一下次要的步骤： 指标：将无序数组(R1,R2....Rn)构建成大顶堆，即实现工作 初始时，此堆的所有值都是属于无序区将堆顶元素 R[1]与无序区中最初一个元素 R[n]替换，此时失去新的无序区(R1,R2,......Rn-1)和新的有序区(Rn)因为替换后新的堆顶 R[1]可能违反堆的性质，因而须要对以后无序区(R1,R2,......Rn-1)调整为新堆而后再次将 R[1]与无序区最初一个元素替换，失去新的无序区(R1,R2....Rn-2)和新的有序区(Rn-1,Rn)。一直反复此过程直到无序区的元素个数 0，则整个排序过程实现总结其实次要的操作就是结构初始堆和调整堆。每次调整都是从父节点（i - 1）/ 2、左孩子节点（2 i + 1）、右孩子节点（2 i + 2）三者中抉择最大者跟父节点进行替换地位<img src="https://noxussj.top:3000/27/5.gif"></img> 堆排序过程 参考资料神级根底排序——堆排序值得珍藏的十大经典排序算法漫画：什么是堆排序？堆排序（大根堆） 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是计数排序？计数排序不是基于比拟的排序算法，其外围在于将输出的数据值转化为键存储在额定开拓的数组空间中。 作为一种线性工夫复杂度的排序，计数排序要求输出的数据必须是有确定范畴的整数 计数排序最重要的一点，确定范畴的整数，比如说范畴 0-10，那么数组外面的值就要在 0-10 之间 栗子序列：9，3，5，4，9，1，2，7，8，1，3，6，5，3，4，0，10，9 ，7，9 首先确定序列的范畴是 0-10，并且列出范畴的序列，如图 1 比方第一个整数是 9，那么数组下标为 9 的元素加 1 <img src="https://noxussj.top:3000/28/1.png"></img> 图 1第二个整数是 3，那么数组下标为 3 的元素加 1，如图 2 <img src="https://noxussj.top:3000/28/2.png"></img> 图 2以此类推反复遍历... 最终遍历实现后状态如下，如图 3 <img src="https://noxussj.top:3000/28/3.png"></img> 图 3数组每一个下标地位的值，代表了在序列中对应整数呈现的次数 有了这个“统计后果”，排序就很简略了。间接遍历数组，输入数组元素的下标值，元素的值是几，就输入几次 0，1，1，2，3，3，3，4，4，5，5，6，7，7，8，9，9，9，9，10 最初输入的序列曾经是排好序的 <img src="https://noxussj.top:3000/28/4.gif"></img> 这个时候可能会有人问，如果序列的最小值不是从 0 开始呢？ 这个时候就要计算偏移量 如何计算偏移量？以序列的最小值作为偏移量。比方最小值是 90， 那么整数 95 对应的统计数组下标就是 95-90 = 5 <img src="https://noxussj.top:3000/28/5.png"></img> 参考资料值得珍藏的十大经典排序算法漫画：什么是计数排序？ 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是疾速排序？在一个序列中随机找出一个数（称为基准元素），而后就是比基准元素小的数放在右边，比基准元素大的数放在左边，这样就将一个序列分成了两个子序列，而后再依照同样的办法把子序列再分成更小的子序列，直到不能分解为止 栗子<img src="https://noxussj.top:3000/26/1.png"></img> 紫色：基准元素 绿色：比基准元素小的数 黄色：比基准元素大的数 算法形容假如一组序列为 6, 9, 2, 4, 5, 1, 8, 7 首先随机找一个数（6） 判断比 6 小的放在右边，大的放在左边 后果：2, 4, 5, 1, 6, 9, 8, 7 失去 2 个新的序列，右边（2, 4, 5, 1），左边（6, 8, 7） ------------------------------------------------- 而后对右边序列进行拆分，左边序列就不列举了 序列 2, 4, 5, 1 随机找一个数（2）持续进行判断，比 2 小的放在右边，大的放在左边 后果：1, 2, 4, 5 失去 2 个新的序列，右边（1），左边（4, 5） ------------------------------------------------- 而后发现右边序列（1）不可能进行拆分，所以要进行向上合并 左边序列（4, 5）能够持续拆分 随机找一个数（4）持续进行判断，比 4 小的放在右边，大的放在左边 后果：4, 5 失去新的序列，右边（4），左边（5） 而后发现右边序列（4）和右序列（5）不可能进行拆分，所以要进行向上合并 ------------------------------------------------- 所有元素向上合并后失去后果 1, 2, 4, 5, 6, 7, 8 <img src="https://noxussj.top:3000/26/2.gif"></img> 如果还是看不懂这个图，那证实你还没了解疾速排序集体倡议，最好拿笔和纸本人试着排列一下 参考资料值得珍藏的十大经典排序算法漫画：什么是疾速排序？（完整版） ...

我刚开始看这个的时候，一脸懵逼。前面又多看了几篇其他人的文章后才了解了 在理解这个希尔排序之前，我想先进行一个小游戏，大家应该都有玩过。希尔排序原理和这个小游戏差不多 小明（玩家）、安琪拉（出题者） 安琪拉：请你在 0~100 之间，猜一个数，猜的次数越少分数越高 失常玩家，可能会顺次从 0 开始一个个去猜，0, 1, 2, 3 ... 这样始终上来猜，运气不好可能要猜 99 次能力正确（这个就是插入排序） 希尔排序是插入排序的升级版，次要目标是缩小猜的次数 小明最初利用了/2 的办法进行猜数（这个就是希尔排序） --------------------------------------------------- 答题开始 小明：猜数字是 50 安琪拉：提醒数字猜小了 小明：那么范畴必定在（50~100）之间了，这次猜是 75 安琪拉：提醒数字猜小了 小明：那么范畴必定在（75~100）之间了，这次猜 87 安琪拉：提醒数字猜小了 小明：那么范畴必定在（87~100）之间了，这次猜 93 安琪拉：提醒数字猜大了 小明：那么范畴必定在（87~93）之间了，这次猜 90 安琪拉：提醒数字猜大了 小明：那么范畴必定在（87~90）之间了，这次猜 89 安琪拉：提醒数字猜大了 小明：那么范畴必定在（87~89）之间了，剩下 3 个数了，那么就能够进行一个个去猜了（插入排序）87, 88, 89 安琪拉：答案是 88 --------------------------------------------------- 当初开始进入正题 什么是希尔排序？希尔排序就是在一个序列中进行分组（简称：增量），而后对每个分组别离进行插入排序。随着增量逐步缩小，每组蕴含的关键词越来越多，当增量减至 1 时，整个序列恰好被分成一组，算法便终止 算法形容<img src="https://noxussj.top:3000/24/1.png"></img> <img src="https://noxussj.top:3000/24/2.gif"></img> 参考资料图解排序算法(二)之希尔排序值得珍藏的十大经典排序算法 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是插入排序？就是在数组中从左到右，先取一个数进去，而后把它放到适合的地位 算法形容假如一个数组中有 2 个区域 5, 8, 2, 3, 1 有序区为空，无序区为 5, 8, 2, 3, 1 ----------------------------------- 首先在无序区当选第一个值（5），把它放在有序区的尾部，第一步基本上不必动 后果：5, 8, 2, 3, 1 有序区为 5，无序区为 8, 2, 3, 1 ----------------------------------- 而后在无序区中取第一个值（8）记录下来，而后持续在无序区中查找比它更小的值（1），而后在有序区中从右往左寻找适合的地位（小于 1 和大于 1 的两头）插入 后果：5, 8, 2, 3, 1 有序区为 1, 5，无序区为 8, 2, 3 ----------------------------------- 而后在无序区中取第一个值（8）记录下来，而后持续在无序区中查找比它更小的值（2），而后在有序区中从右往左寻找适合的地位（小于 2 和大于 2 的两头）插入 后果：5, 8, 2, 3, 1 有序区为 1, 2, 5，无序区为 8, 3 ----------------------------------- ... 以此类推，直到无序区为空 <img src="https://noxussj.top:3000/23/1.gif"></img> 参考资料值得珍藏的十大经典排序算法 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是归并排序？把长度为 n 的输出序列分成两个长度为 n/2 的子序列； 对这两个子序列别离采纳归并排序； 将两个排序好的子序列合并成一个最终的排序序列。 <img src="https://noxussj.top:3000/25/1.png"></img> 总的来说就是先拆分，后合并，合并的同时进行排序 栗子归并排序就像一场比武大赛 举个例子，有 A、B、C、D、E、F、G、H 一共 8 个武术家参考加入比武大会。 第一轮，两两一组，有 4 名选手胜出（四分之一决赛） 第二轮，两两一组，有两名选手胜出（半决赛） 第三轮，仅剩的两人一组，冠军胜出（总决赛） <img src="https://noxussj.top:3000/25/2.png"></img> 算法形容<img src="https://noxussj.top:3000/25/3.gif"></img> 参考资料值得珍藏的十大经典排序算法什么是归并排序？归并排序详解 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是抉择排序？根本思维：在一个排列中划分为有序区和无序区，有序区在右边，无序区在左边。首先在无序区中找到最小（大）元素，寄存到有序区的起始地位，而后，再从残余的无序区中持续寻找最小（大）元素，而后放到有序区的开端。以此类推，直到无序区没有元素可排列 直观表白：就是在一个数组中遍历查找，找到小的放在数组的左侧，而后在残余的元素中持续查找，直到排序实现 算法形容假如一个数组中有 2 个区域 5, 8, 2, 3, 1 有序区为空，无序区为 5, 8, 2, 3, 1 ----------------------------------- 首先：记录数组的第一个值（5），看看还有没有比它更小的，如果有则记录下来（1）。直到数组第一遍遍历实现。而后把最小的值（1）和无序区的第一个值（5）替换地位 后果：1, 8, 2, 3, 5 有序区为 1，无序区为 8, 2, 3, 5 ----------------------------------- 而后进行第二遍遍历，在无序区中持续查找最小值（2），遍历结束后将最小值（2）与无序区第一值（8）替换地位 后果：1, 2, 8, 3, 5 有序区为 1, 2，无序区为 8, 3, 5 ----------------------------------- ... 以此类推，直到无序区为空 <img src="https://noxussj.top:3000/21/1.gif"></img> 参考资料值得珍藏的十大经典排序算法 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

以上几个属性都是属于暗藏元素，使用户看不见该元素。那么他们有什么区别呢？ <img src="https://noxussj.top:3000/18/1.png"></img> 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

尽管网上有很多对于绘制三角形的代码，然而我置信还是有一部分人是不晓得如何实现的。我上面举个栗子。 这种状况应该都能了解，不就是设置一个边框嘛 width: 100px;height: 100px;border: 20px solid;border-color: #000;box-sizing: border-box;<img src="https://noxussj.top:3000/16/1.png"></img> 第二步，把边框色彩改一下，应该也能看懂 width: 100px;height: 100px;border: 20px solid;border-color: green blue red orange;box-sizing: border-box;<img src="https://noxussj.top:3000/16/2.png"></img> 第三步，把边框放大，使得外面的红色区域缩小到没有为止 width: 100px;height: 100px;border: 50px solid;border-color: green blue red orange;box-sizing: border-box;<img src="https://noxussj.top:3000/16/3.png"></img> 第四步，把其余边框色彩改为通明色试试 width: 100px;height: 100px;border: 50px solid;border-color: green transparent transparent transparent;box-sizing: border-box;<img src="https://noxussj.top:3000/16/4.png"></img> 就是这么简略，通过 border-color 管制三角形方向，通过 width、height、border 宽度来调整三角形大小和形态 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

应用图片应用字体文件应用 Canvas 等绘图应用 CSS3 transform: scale(0.9) （目前来说比拟不便的一种）附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

为什么要应用 Flex 布局？Flex 布局是目前比拟风行的一种布局，因为它非常简略灵便，区区简略几行代码就能够实现各种页面的的布局，以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。应用 Flex 属性就能够写出简洁优雅简单的页面布局目前整顿了一些 Flex 布局罕用的一些属性，以下简略说一下容器和我的项目的意思 容器：采纳 Flex 布局的元素，称为容器我的项目：指的是容器外面的子元素容器的 6 个属性flex-direction：属性决定主轴的方向（即我的项目的排列方向）flex-wrap：默认状况下我的项目都排在一条轴线上，如果一行放不下如何解决（换行形式）flex-flow：flex-direction | flex-wrap（2 个属性的简写）justify-content：我的项目在主轴上的对齐形式（默认程度对齐形式）align-items：我的项目在穿插轴上如何对齐（默认垂直对齐形式）align-content：多根轴线的对齐形式（即多行的对齐形式）我的项目的 6 个属性order：我的项目的排列程序。数值越小，排列越靠前，默认为 0flex-grow：我的项目的放大（默认指宽度）比例，默认为 0，即如果存在残余空间，也不放大flex-shrink：我的项目的放大（默认指宽度）比例，默认为 1，即如果空间有余，该我的项目将放大flex-basis：我的项目将占据固定空间（默认设置固定宽度）flex：flex-grow | flex-shrink | flex-basis（3 个属性的缩写）align-self：容许单个我的项目有与其余我的项目不一样的对齐形式，可覆 align-items 属性参考资料：Flex 布局教程：语法篇 - 阮一峰的网络日志 附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

动态布局形容：就是设定好的长和宽，大小不会扭转，不论你多大的屏幕它都是那么大，分辨率是不会扭转的长处：这个对于开发者来说是最简略的一种布局形式，没有什么兼容性的问题毛病：当屏幕分辨率太低时，会展现出滚动条场景：传统 web 网站自适应布局形容：不同屏幕分辨率下，放弃原有展现形式。即元素的地位会变动而大小不会变动长处：页面可能兼容不同分辨率的设施毛病：屏幕太小会产生内容过于拥挤。所有的设施看起来都是一样的网站，不过是长度或者图片变小了，不会依据设施采纳不同的展现款式场景：传统 web 网站响应式布局形容：不同屏幕分辨率下，展现形式不同长处：一套代码兼容 web 端、平板、以及手机端网页毛病：工作量大、UI 设计也须要多个版本场景：同时兼容多种不同设施弹性布局（em/rem 布局）形容：应用 em 或 rem 单位进行绝对布局，在不同屏幕分辨率下页面所有元素的高宽都等比例缩放长处：所有屏幕的高宽比和最后的设计高宽比一样，或者相差不多，完满适应毛病：这种布局形式只是宽度自适应，高度却没有做到自适应场景：同时兼容多种不同设施弹性布局（flex 布局）形容：目前比拟风行的一种布局，应用传统布局难以实现一些简单的布局，应用 flex 布局实现就变得非常容易长处：简便、残缺、响应式地实现各种页面布局毛病：只兼容 IE10+的浏览器场景：三栏式布局、垂直程度居中布局流式布局（百分比布局）形容：页面元素的宽度依照屏幕分辨率进行适配调整，但整体布局不变。次要特色是像瀑布一样往下流，有法则的有限遍历模块。长处：灵便，充分利用浏览器的空间毛病：宽度依照屏幕进行适配调整，对于大屏幕来说用户体验并不是特地好，有些布局元素会显得很长场景：相似抖音视频、微博音讯、微信朋友圈等布局附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

次要是体现在代码标准上，XHTML 标准会更加严格XHTML 元素必须被正确地嵌套正确示范 <b><i>This text is bold and italic</i></b>谬误示范 <b><i>This text is bold and italic</b></i>XHTML 元素必须被敞开正确示范 <p>This is a paragraph</p><p>This is another paragraph</p>A break: <br />A horizontal rule: <hr />An image: <img src="happy.gif" alt="Happy face" />谬误示范 <p>This is a paragraph<p>This is another paragraphA break: <br>A horizontal rule: <hr>An image: <img src="happy.gif" alt="Happy face">标签名必须用小写字母正确示范 <body> <p>This is a paragraph</p></body>谬误示范 <BODY> <P>This is a paragraph</P></BODY>XHTML 文档必须领有根元素所有的 XHTML 元素必须被嵌套于 根元素中 <html><head> ... </head><body> ... </body></html>附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

应用 flex 弹性布局应用媒体查问（@media）附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

这个题目没有标准答案，以下是我集体的了解 浏览器通过 DNS 查找域名的 IP 地址浏览器与指标服务器建设 TCP 连贯（3 次握手）浏览器通过 http 协定发送资源申请（接口、图片、音频、视频、CSS、JS 等等）服务器端响应 http 申请浏览器解析渲染 HTML 代码，最终出现给用户敞开页面，开释 TCP 连贯（4 次挥手）附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

web 规范web 规范次要分为构造、体现、行为 3 局部构造：指咱们平时在 body 外面写的标签，次要是由 HTML 标签组成体现：指更加丰盛 HTML 标签款式，次要由 CSS 款式组成行为：指页面和用户的交互，次要由 JS 局部组成W3CW3C 对 web 规范提出了规范化的要求，即代码标准 对构造的要求标签字母要小写标签要闭合标签不容许随便嵌套对体现和行为的要求 倡议应用外链 CSS 和 js 脚本，实现构造与体现拆散、构造与行为拆散，能进步页面的渲染效率，更快地显示网页内容附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是浏览器内核？浏览器内核也能够了解为排版引擎，次要由 2 局部组成，渲染引擎和 JS 引擎排版引擎次要是负责获取网页内容（HTML、XML、图像、CSS、JS）等信息进行解析、渲染网页，将网页的代码转换为看失去的页面浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的成果也不雷同，常见的内核有 Trident、 Gecko、 Webkit、 Presto、 Blink 五种Trident 内核代表作品是 IE，俗称 IE 内核；应用 IE 内核的浏览器包含、傲游、世界之窗、百度浏览器、兼容模式的浏览器等WebKit 内核代表作品是 Safari、旧版的 ChromePresto 内核代表作品是 Opera，Presto 是由 Opera Software 开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在 13 年之后，Opera 发表退出谷歌营垒，弃用了 PrestoBlink 内核代表作品是 Chrome、Opera；由 Google 和 Opera Software 开发的浏览器排版引擎Gecko 内核代表作品是 Firefox，俗称 Firefox 内核Chromium 内核这个比拟非凡，Chromium 是谷歌的开源我的项目是一款浏览器，Chrome 是 Chromium 的稳定版。国内的大部分双核浏览器都采纳 Chromium 内核附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

存储大小cookie：数据大小不能超过 4klocalStorage、sessionStorage：数据大小反对 5M 左右，不同浏览器存储大小不同生命周期（无效工夫）cookie：须要设置有效期，过期后 cookie 就会销毁localStorage：除非被手动清理，否则永恒存在sessionStorage：页面敞开（包含标签选项卡）后就会被销毁存储模式三者都是存储字符串类型，简单对象能够采纳 json 的 stringify 和 parse 办法来做解决安全性cookie：申请时个别会携带在 header 中localStorage、sessionStorage：申请时不会携带附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

什么是标签语义化？晋升代码可读性，便于团队开发和保护为什么要标签语义化？当网页去掉 CSS 款式时，页面能出现进去清晰的构造案例不存在语义化 <div></div><div></div><div></div>应用语义化 <header></header><main></main><footer></footer>总结：从下面能够看出，一个页面外面放 3 个 div 他人也不晓得这是啥意思。如果应用语义化标签就能分明的晓得分为 3 个模块顶部、两头、底部。附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

概念能够把所有 HTML 标签都了解成一个盒子模型盒子模型次要由 4 个局部组成：content、padding、border、margin <img src="https://noxussj.top:3000/2/1.png"></img> 规范盒模型（W3C 盒模型） content-box盒子的尺寸 = content怪异盒模型（IE 盒模型） border-box盒子的尺寸 = content + padding + border附加此文章通过自媒体多平台公布，公布后不再进行保护，如对内容有任何异议能够到下方的 GitHub 中进行探讨【继续保护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

draggable此属性规定元素是否可拖动，默认状况下链接和头像是能够拖动的 事件拖拽的元素ondragstart 拖拽的一瞬间触发ondrag 拖拽期间间断触发ondragend 拖拽完结触发指标元素ondragenter 进入指标元素触发（鼠标光标进入）ondragover 进入来到指标元素间断触发ondragleave 来到指标元素触发ondrop 在指标元素上开释鼠标触发注意事项默认状况下，一个元素无奈拖拽到另一个元素上，ondrop事件无奈触发，须要在ondragover中阻止默认事件