前端HTML、JS、CSS

时间  2019-11-08
标签 前端 html css 栏目 HTML 繁體版
原文   原文链接

基础

一、前端页面有哪三层构成？ HTML结构层、CSS表示层、JS行为层。
二、浏览器内核(渲染引擎)javascript

①IE内核 -- Trident                                              
②Firefox内核 -- Gecko
③Safari内核(曾经Chrome内核) -- Webkit      
④现Chrome内核 -- Blink

三、绑定事件的方式？css

一、直接在dom里绑定：<div onclick="test(this)"></div>
 二、在js中经过onclick绑定：xxx.onclick=test;
 三、经过事件绑定：dom.addEventListener("click", ele, boolean)

(拓展：js事件流模型？)html

“事件冒泡”：事件由最具体的元素接收，而后逐级向上传播；
“事件捕捉”：事件由最不具体的节点先接收，而后逐级向下，一直到最具体元素；
“dom事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡；

e.stopPropagation() 阻止冒泡
e.preventDefault() 阻止默认事件前端

四、form表单提交与ajax提交什么区别？java

一、Ajax在提交、请求、接收时都是异步进行的，网页不须要刷新；
   而Form提交则是新建一个页面，哪怕是提交给本身自己的页面，也是须要刷新的。
二、Ajax在提交时是在后台新建一个请求；Form倒是放弃本页面，然后再请求。
三、Ajax在提交、请求、接收时整个过程都须要程序来对其数据进行整理；
   Form提交倒是根据表单结构自动完成，不须要代码干预。
四、Ajax必需要使用JS来实现，不启用JS的浏览器没法完成该操做；
   Form倒是浏览器的本能，不管是否开启JS均可以提交表单。

五、为何要用Ajax？jquery

使用Ajax用户体验会更“敏捷”：数据提交页面不会闪屏；页面局部更新速度快；网络带宽占用小

六、离线存储--本地存储和离线缓存 及优缺点android

1.本地存储--1) cookie    2) localStorage    3) sessionStorage
2.离线缓存--1) Application Cache (Manifest)

Cookieios

优势：
    可控制过时时间，使其不会长期有效
    可扩展、可用性比较好
    可加密减小cookie被破解的可能性
缺点：
    数量和长度有限制，最多20条，最长不能超过4k
    请求头上带着数据安全性差
主要应用：
    购物车、客户端登陆

localStorage(本地存储)web

优势：
    localStorage拓展了cookie的4k限制
    localStorage能够将第一次请求的5M大小数据直接存储到本地，相比于cookie能够节约带宽
    localStorage的使用也是遵循同源策略的，因此不一样的网站直接是不能共用相同的localStorage
缺点：
    须要手动删除，不然长期存在
    浏览器大小不一，版本的支持也不同
    localStorage只支持string类型的存储，JSON对象须要转换
    localStorage本质上是对字符串的读取，若是存储内容多的话会消耗内存空间，会致使页面变卡
特色：
    同源策略限制、只在本地存储、永久保存、同浏览器共享、存储方式、存储上限限制(大多数5MB如下)。
应用场合：
    数据比较大的临时保存方案。如在线编辑文章时的自动保存。

sessionStorage(会话存储)ajax

特色：
    同源策略限制、只在本地存储、单标签页限制、存储方式、存储上限限制(大多数5MB如下)。
应用场合：
    适合单页应用程序，方便在各业务模块进行传值。

离线缓存--Application Cache (Manifest)

优点：
    离线浏览：用户可在应用离线时使用它们
    速度：已缓存资源加载速度块
    减小服务器负载：浏览器只从服务器下载更新过的资源
 
使用方法：
 在html标签添加manifest属性，属性值为manifest文件的路径
 <!DOCTYPE HTML> 
    <html manifest=""demo.manifest""></html>
编写manifest文件
manifest文件可分为三部分：
 (1) CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
 (2)NETWORK - 在此标题下列出的文件须要与服务器的链接，且不会被缓存
 (3)FALLBACK - 在此标题下列出的文件规定当页面没法访问时的回退页面（好比 404 页面）
CACHE MANIFEST
    #version 1.1   /*版本号*/
    CACHE:
        html/index.html /*须要缓存的文件*/
    NETWORK:
        js/jquery.js /*不须要缓存的文件*/
    FALLBACK: 
        html/index.html /*当页面没法访问时的回退页面*/

HTML

一、HTML 块级元素、行内元素
块级元素：块状元素排斥其余元素与其位于同一行，能够设定元素的宽块级元素：

①老是在新行开始；
②宽高，行高以及内外边距均可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它能够容纳内联元素和其余块元素

from table ol ul dl div p h1-h6
nav、header、section、footer。

行内元素：

①和其余元素都在一行上；
②宽高，行高及内外边距不可改变，除左右方向的外边距margin、内边距padding；
③内联元素只能容纳文本或者其余内联元素

lable span a em

行内块状元素：

综合了行内元素和块状元素的特性，显示效果为行内元素，但它拥有块状元素的属性。
select  textarea button

这三者能够经过 display 相互转换。

三、表单标签的readonly与disabled的区别

readonly 只读，只用于文本输入框，input type="text/password"、textarea；
使用表单提交时会提交此元素，应用在用户只读同时须要提交数据的场景。
disabled 禁用，可用于全部表单标签，使用表单提交时不会提交此元素。

二、H5 新特性

一、语义特性 -- 新增语义化标签，例如 header section footer nav 
二、本地存储特性 -- 对本地离线存储更好的支持，
   例如 localStorage sessionStorage ApplicationCache应用程序缓存。
三、设备访问特性 -- 地理位置API - 获取用户的地理位置 getCurrentPosition()。媒体访问API getUserMedia()
四、链接特性 -- Web Sockets
五、网页多媒体特性 -- Audio 和 Video 标签
六、三维图形 特性 -- 可缩放矢量图形 SVG。画布 Canvas

JS

一、JS是一门什么样的语言及特色？
JavaScript是客户端脚本语言,是一种动态、弱类型、基于原型的语言；

1.不须要编译就能够由解释器直接运行；
2.语法相似于常见的高级语言，如C和Java；
3. 变量松散定义，属于弱类型语言；
4. 面向对象的。

二、JS的数据类型

基本数据类型 String Number Boolean undefined null  -- 指的是简单的数据段，按值访问。
引用数据类型 Object(Array Date Regxp Function) -- 可能有多个值构成的对象 按引用访问。

三、JS如何查找元素？
document
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()

querySelector()
querySelectorAll()

节点指针
父节点.firstChild -- firstElementChild
父节点.lastChild -- lastElementChild
父节点.childNodes
兄弟节点.previousSibling -- previousElementSibling
兄弟节点.nextSibling -- nextElementSibling
子节点.parentNode

四、JS如何建立节点?
docuement.
createElement(元素标签) 建立元素节点
createAttribute(元素属性)
createTextNode(文本内容) 建立文本节点

五、JS如何操做节点(插入、替换、复制、删除)？
插入
appendChild(添加的新子节点) 向子节点列表末尾添加新的子节点
insertBefore(插入当前节点的新节点,已知子节点) 在已知的子节点以前插入新的子节点

son.parentNode.insertBefore

替换节点
replaceChild(要插入的新元素, 将被替换的老元素)
删除节点
removeChild(要删除的节点)
复制节点
须要被复制的节点.cloneNode(true/false)
true -- 复制当前节点及其全部子节点
false -- 仅复制当前节点

六、JS属性操做？
获取属性 getAttribute
元素节点.getAttribute(元素属性名)

设置属性 setAttribute
元素节点.setAttribute(元素属性名, 属性值)

删除属性 removeAttribute
元素节点.removeAttribute(元素属性名)

七、什么是伪数组？
一、具备 length 属性。
二、按索引方式存储数据。
三、不具备数组的 push()、pop() 等方法或指望 length 属性有什么特殊的行为。
好比 arguments 对象，调用 getElementsByTagName document.childNodes 之类的返回 NodeList对象都属于伪数组。arguments能够经过Array.prototype.slice.call(fakeArray) 将伪数组转换成真正的Array对象;
jQuery中的 $() 对象都是伪数组对象，保存的是DOM对象。基于此也就更能理解 jQuery 的 this。

八、var that=this;
this 关键字表明函数运行时自动生成的一个内部对象，只能在函数内部使用，指向调用函数的那个对象。
九、eval();
eval()函数就像是一个ECMAScript解析器，只接收一个参数，即执行的ECMAScript字符串。将传入的字符串看成实际的语句来解析。
十、什么是Ajax和JSON，它们的优缺点？
Ajax Asynchronous Javascript And XML/异步的javascript和xml
优势：

可使页面不重载所有内容的状况下加载局部内容，下降数据传输量。
避免用户不断刷新或者跳转页面，提升用户体验。

缺点：

对搜索引擎不友好。
要实现ajax下的先后退功能成本较大
可能形成请求数的增长
跨域问题限制

JSON：一、一种轻量级的数据交换格式，占用带宽小；

二、易阅读编写解析；
  三、支持复合数据类型；
  四、基于纯文本，跨平台传递极其简单，Javascript原生支持，理想的数据交换格式；
缺点：相对xml通用性较差，数据可描述性较差

十一、JSONP与JSON
跨域请求的概念 同一域名不一样端口 不一样协议(http~https) 不一样二级域名 域名和域名对应ip
JSON是一种基于文本的数据交换方式 (不支持跨域)；
JSONP是一种非官方跨域数据交互协议

JSON

一、一种轻量级的数据交换格式，占用带宽小；
二、容易阅读编写解析；
三、支持复合数据类型；
四、基于纯文本，跨平台传递极其简单，Javascript原生支持，理想的数据交换格式；

没办法跨域直接获取，就将json包裹在一个合法的js语句中做为js文件传过去。json是想要的东西，jsonp是达到这个目的而广泛采用的一种方式

JSONP是怎么产生的
一、 Ajax直接请求普通文件存在跨域无权限访问的问题
二、Web页面拥有"src"属性的标签都拥有跨域的能力
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以得到jsonp回调函数名的参数名(通常默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数
十二、js中的同步和异步
JS 是一门“单线程”的语言，就像一条流水线，不能同时进行多个任务和流程。
差异就在于这条流水线上各个流程的执行顺序不一样。
同步任务指的是，在主线程上排队执行的任务，造成一个执行栈（execution context stack），只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"通知主线程请求执行任务，该任务才会进入主线程执行。
最基础常见的异步是setTimeout和setInterval函数。

1三、get 与 post

一、get参数经过url传递，post 放在request body 中。
二、get请求在url中传递的参数是有长度限制的(2048个字符)，post没有。
三、get比post更不安全，由于参数直接暴露在url中，因此不能用来传递敏感信息。
四、get产生一个TCP数据包，post产生两个TCP数据包。

HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法
1418466-20180810112625596-2103906128.png

1四、http与https

*HTTP*是超文本传输协议，定义了客户端与服务器端之间文本传输的规范。

HTTP协议以明文方式发送内容，不提供任何方式的数据加密，若是攻击者截取Web浏览器和网站服务器之间的传输报文，就能够直接读取其中的信息，因此不适合传输一些敏感信息，好比：信用卡号，密码支付信息。
HTTP默认使用80端口，这个端口指的是服务端的端口，而客户端使用的端口是动态分配的。当咱们没有指定端口访问时，浏览器会默认帮咱们添加80端口。

*https*

为了解决HTTP协议的这一缺陷，须要使用另外一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器的之间的通讯加密。
主要做用能够分为两种：一种是创建一个信息安全通道，来保证数据传输的安全；另外一种就是确认网站的真实性。

1. HTTPS协议须要到ca申请证书，通常免费证书较少，于是须要必定费用。
2. HTTP是超文本传输协议，信息是明文传输，HTTPS则是具备安全性的SSL加密传输协议。
3. HTTP的链接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输，身份认证的网络协议，比HTTP协议安全。

HTTP和HTTPS的区别
1五、原生js的window.onload与jQuery的$(document).ready(function(){})有什么不一样？
如何用原生js实现ready方法？
window.onload方法必须等到页面内包括图片的全部元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，没必要等到加载完毕。

function ready(fn){
   var d = document;        //提升性能
   if(d.addEventListener){
     d.addEventListener("DOMContentLoaded",function(){
       //注销事件，避免反复触发
       d.removeEventListener("DOMContentLoaded",arguments.callee,false);
       fn();
     },false)
   } else if(d.attachEvent){        //ie9如下
     d.attachEvent("onreadystatechange",function(){
       d.detachEvent("onreadystatechange",arguments.callee);
       fn();
     })
   }
 }
 window.onload = function () {
  alert('onload');
 };
 ready(function () {
  alert('ready');
 });

1六、工厂模式、构造函数、原型模式([动态原型模式])
工厂模式:

在函数内建立一个对象，给对象赋予属性及方法再将对象返回。
（  由于在ECMAScript中没法建立类，因此用函数封装以特定接口建立对象。）
  解决了建立多个类似对象的问题，可是工厂模式无从识别对象的类型。
  由于所有都是Object，不像Date、Array等，所以出现了构造函数模式。
function createBlog(name, url) {
  var o = new Object();
  o.name = name;
  o.url = url;
  o.sayUrl= function() {
    alert(this.url);
  }
  return o;
}
var blog1 = createBlog('luomg', 'https://segmentfault.com/');

构造函数模式

能够建立特定类型的对象，相似于Array、Date等原生JS的对象。问题在每一个成员没法获得复用，包括函数。
（在于每次建立实例的时候都要从新建立一次方法）
  1.按照惯例函数名首写字母为大写
  2.没有显示的建立对象
  3.直接将属性和方法赋值给了this对象
  4.没有return语句
  5.使用new建立对象
  6.可以识别对象（这正是构造函数模式胜于工厂模式的地方）
function Blog(name, url) {
  this.name = name;
  this.url = url;
  this.alertUrl = function() {
    alert(this.url);
  }
}
 
var blog = new Blog('luomg', 'https://segmentfault.com/');

原型模式

建立的每一个函数都有prototype (原型)属性，这个属性是一个指针，指向一个对象，
而这个对象的用途是包含能够由特定类型的全部实例共享的属性和方法。
使用原型对象的好处(也是坏处)就是可让全部对象实例共享它所包含的属性及方法。
function Blog() {
}
 
Blog.prototype.name = 'luomg';
Blog.prototype.url = 'https://segmentfault.com/';

混合模式（原型模式 + 构造函数模式）

function Blog(name, url, friend) {
  this.name = name;
  this.url = url;
  this.friend = friend;
}
Blog.prototype.alertInfo = function() {
  alert(this.name + this.url + this.friend);
}
var blog = new Blog('luomg', 'https://segmentfault.com/', ['fn1', 'fn2', 'fn3']);

动态原型模式

将全部信息封装在了构造函数中，经过构造函数中初始化原型（仅第一个对象实例化时初始化原型），
这个能够经过判断该方法是否有效而选择是否须要初始化原型。
function Blog(name, url) {
  this.name = name;
  this.url = url;
 
  if (typeof this.alertInfo != 'function') {
    // 这段代码只执行了一次
    alert('exe time');
    Blog.prototype.alertInfo = function() {
      alert(thia.name + this.url);
    }
  }
}
var blog = new Blog('luomg', 'https://segmentfault.com/')

1七、new 操做符具体干了什么？

一、新建一个对象 var obj=new Object();
二、设置原型链 obj.__proto__=F.prototype;
三、让F中的this指向 obj，执行F的函数体。 F.call(obj);
四、判断F的返回值类型：若是是值类型，就丢弃它，仍是返回 obj。若是是引用类型，就返回这个引用类型的对象，替换掉 obj。

1八、原型链
指的是构造函数、原型和实例的关系。每一个构造函数都有一个prototype原型对象，每一个原型对象都包含一个指向构造函数的指针constructor，而实例都包含一个指向原型对象的内部指针 _proto_。
1九、构造函数相关的检测方法

访问实例属性 obj.hasOwnProperty(key);
访问原型属性 !obj.hasOwnProperty(name) && name in obj
返回一个可枚举属性的字符串数组  Object.keys(obj  ||  Object.prototype);
获得全部实例属性  Object.getOwnPropertyNames(obj  ||  Object.prototype)
肯定原型与实例的关系 obj instanceof Object; Object.prototype.isPrototypeOf(obj);

30、Javascript获取页面元素的位置
①网页的大小和浏览器窗口的大小
若是网页内容可以在浏览器窗口中所有显示(也就是不出现滚动条), 那么网页大小和浏览器窗口大小是相等的。
若是不能所有显示，则滚动浏览器窗口，能够显示出网页的各个部分。

②获取网页的大小(只读属性)

width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight

③获取网页元素的绝对位置--offsetTop和offsetLeft属性
　　function getElementLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}
　　　　return actualLeft;
　　}
2一、浏览器如何渲染解析页面？
解析html以构建dom树 -> 将CSS解析成CSS Rule 树 -> 构建render树 -> 布局render树 -> 绘制render树。
其中某个部分发生了变化影响了布局，就会 回流(Reflow -- 从新渲染) 重绘(Repaint -- 重画某部分)，影响性能。因此写代码时不要一条一条修改DOM的样式，能够先定义好CSS再去修改DOM的className。

2二、“strict mode”的做用
“strict mode” 是一种更加严格的代码检查机制，会让代码更加安全。

一、让Debug更加容易：在正常模式下不少错误都会被忽视掉，“strict mode”模式会让Debug极致更加严谨。
二、防止默认的全局变量：在正常模式下，给一个未通过声明的变量赋值将会将这个变量自动设置为全局变量。在strict模式下，咱们取消了这个默认机制。
三、取消this的默认转换：在正常模式下，给this关键字指引到null或者undefined会让它自动转换为全局。在strict模式下，咱们取消了这个默认机制。
四、防止重复的变量声明和参数声明：在strict模式下进行重复的变量声明会被抱错，如 (e.g., var object = {foo: ""bar"", foo: ""baz""};) 同时，在函数声明中重复使用同一个参数名称也会报错，如 (e.g., function foo(val1, val2, val1){}),
五、让eval()函数更加安全。
六、当遇到无效的delete指令的过后报错：delete指令不能对类中未有的属性执行，在正常状况下这种状况只是默默地忽视掉，而在strict模式是会报错的。

2三、JS 跳转
刷新 window.location.reload()
前进 window.history.go(1)
后退 window.history.go(-1) -- 表单中的内容会丢失
后退 window.history.back() -- 表单中的内容会保留
history.back()的刷新版本 window.location.replace(document.referrer)

[前进 window.history.forward()]
2四、内存泄露缘由及解决办法
没有及时释放内存资源。
JS是一种垃圾收集式语言，内存是根据对象的建立分配给该对象的，并会在没有该对象的引用时由浏览器收回。IE和FireFox均使用引用计数来为 DOM 对象处理内存。若是计数为零，该对象就会被销毁。

1.循环引用                                 --打破循环引用  避免闭包自身
2.由外部函数调用引发的
3.事件处理引发的

2四、内存溢出缘由
程序向系统申请必定大小内存，而系统不能知足程序的要求

2五、闭包
读取其余函数内部变量的函数 -- 定义在一个函数内部的函数。

1.能够读取函数内部的变量
2.使局部变量始终保存在内存中
注意点：
1.会形成网页的性能问题，在IE中可能致使内存泄露，退出函数前将不使用的局部变量所有删除。
2.闭包会在父函数外部，改变父函数内部变量的值。因此，若是你把父函数看成对象（object）使用，把闭包看成它的公用方法（Public Method），把内部变量看成它的私有属性（private value），这时必定要当心，不要随便改变父函数内部变量的值。

2六、typeof 与instanceof 判断类型
typeof -- 获取一个变量或表达式的类型 instanceof -- 判断一个变量是不是某个对象的实例
基本类型 -- typeof => String Number Boolean undefined function Object
引用类型 -- instanceof =>

Array.isArray(arr);
                 constructor 属性返回对建立此对象的数组函数的引用

(a instanceof Array) //a是否Array的实例？true or false
(a.constructor == Array) // a实例所对应的构造函数是否为Array? true or false
2七、JS的apply与call的用法及意义
为了改变函数运行时的上下文，改变函数体内部 this 的指向。
调用一个对象的一个方法，以另外一个对象替换当前对象。
劫持别人的方法--实现继承
做用彻底同样，只是接受参数的方式不太同样。

obj.call(thisObj, arg1, arg2, ...); //连续参数
obj.apply(thisObj, [arg1, arg2, ...]);//数组参数
把obj(即this)绑定到thisObj，这时候thisObj具有了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。

2八、JS做用域、上下文。
做用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。
换句话说，做用域决定了代码区块中变量和其余资源的可见性。
在 ES5及之前 无块级做用域，采用全局和函数做用域，
如 if 和 switch 条件语句或 for 和 while 循环语句，它们不会建立一个新的做用域。
ES6及之后才有块做用域。

上下文(context)是用来指定代码某些特定部分中 this 的值，指 this 在同一做用域内的值。
取决于JavaScript 的宿主换环境，在全局做用域(scope)中上下文中始终是Window对象。

？、数组经常使用方法
栈方法 push pop
队列方法 unshift shift
splice(开始index, 删除length, 插入新增)
join 转换成字符串(链接符链接成一字符串) --split("""")
slice(start,end)
concat(array) 链接数组
reverse() 数组逆序
sort() 排序 降序 -- arr.sort(function(a, b){return b-a})

6.1 == lastIndexOf()、indexOf() -- 查找的项, 查找起点位置的索引(可选的)

filter()、map()、some()、every()、forEach() -- 数组项, 对应数组索引, 数组自己

6.2 == filter() -- “过滤”功能，数组中的每一项运行给定函数，返回知足过滤条件组成的数组。
6.3 == map() -- 指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
6.4 == some() -- 判断数组中是否存在知足条件的项，只要有一项知足条件，就会返回true。
6.5 == every() -- 判断数组中每一项都是否知足条件，只有全部项都知足条件，才会返回true。
6.6 == forEach() --遍历循环、对数组中的每一项运行给定函数, 这个方法没有返回值.

arr.forEach(function(item,index,array){})

？、字符串经常使用方法
.slice(start[,end]) --若是为负，将它做为length+[start, end]处理 end>=start 返回空字符串
.substring(start,end) -- 若是start或end为NaN或者为负数，那么将其替换为0
.substr(start[,length])
.indexOf(substr[,startIndex]) 第一次出现子字符串位置。若是没有找到子字符串，则返回-1。
.lastIndexOf(substr[,startIndex]) 后面查询
.split([separator[,limit]]) 将一个字符串分割为子字符串，而后将结果做为字符串数组返回
limit该值用来限制返回数组中的元素个数
.toLowerCase 返回一个字符串，该字符串中的字母被转换成小写
.toUpperCase 返回大写字符串

.search(reExp)返回与正则表达式查找内容匹配的第一个字符串的位置
.concat(str[,str2,str3]) 字符串链接

.replace 用来查找匹配一个正则表达式的字符串，而后使用新字符串代替匹配
？、常见数学方法
Math.abs() 取绝对值

.ceil()     向上取整 
 .floor()    向下取整
  .round()    四舍五入 
 .random()  随机数

function getRan(n,m,nums){
return Math.floor((Math.random()m+n)nums);
}
1-10 -- Math.floor(Math.random()*(10)+1)
6位随机数[1-9]-- Math.floor((Math.random()9+1)100000)

ES6

一、ES6

一、块级做用域
ES5 只有全局做用域和函数做用域，let、const 实际上为JS 新增了块级做用域
不存在变量提高、不容许重复声明。
let 命令
暂时性死区(let声明变量a，但在这声明以前对a声明、赋值会报错)，typeof再也不是一个百分之百安全的操做
const 命令
声明一个只读的常量且必须赋值。一旦声明，常量的值就不能改变。若是是对象则不能改变对象的引用，或能够增长属性。

ES6 声明变量的六种方法
var、function(ES5)
let、const、import、class
二、字符串
静态字符串一概使用单引号或反引号，不使用双引号。动态字符串使用反引号。
三、解构赋值 -- 对应关系赋值
使用数组成员对变量赋值时，优先使用解构赋值。
四、对象
①单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。
②对象尽可能静态化，不得随意添加新的属性。若是添加属性不可避免，要使用Object.assign方法。
五、数组
    ①使用扩展运算符（...）拷贝数组。
    ②使用 Array.from 方法，将相似数组的对象转为数组(ES5 -- Array.prototype.slice.call)。
六、箭头函数 -- 匿名函数的简写 -- 好比setTimeout
不绑定this与arguments，不能用做构造器，也没有prototype属性，隐式返回值。当即执行函数能够写成箭头函数的形式
简单的、单行的、不会复用的函数，建议采用箭头函数。若是函数体较为复杂，行数较多，仍是应该采用传统的函数写法。
七、Map、Set
八、Class
九、模块
    ①使用import取代require。
    ②使用export取代module.exports。
十、使用ESLint
一个语法规则和代码风格的检查工具，能够用来保证写出语法正确、风格统一的代码。

CSS

一、CSS选择器？引用CSS的方式？CSS 优先级如何计算？盒模型？
①通配选择符、标签名选择符、类选择符、ID选择符、后代选择符(包含)、子选择符、相邻选择符、兄弟选择符、属性选择符、伪类、伪对象。
②行内样式、内嵌式、link连接式、import导入式。
③!import 》行内样式》ID》class 》标签名选择符，选择符越具体等级就越高。
④Margin、border、padding、content。
box-sizing: border-box; // content-box
// 定义 浏览器 应该如何计算一个元素的总宽高；更改元素默认的 CSS 盒子模型

兼容性

一、position属性--底部absolute、fixed元素在安卓浏览器里面会被输入法顶上去。
解决方法：①页面加载完成后计算底部元素到顶部的距离         
②在父级容器中定义容器高度，并设定position属性的值为relative便可解决此问题
（body：relative； 没有验证）。
二、伪类 :active 失效
body添加ontouchstart onmousemove两个空事件
三、对非可点击元素如(label,span)监听click事件，ios下不会触发
css增长 -- cursor:pointer；
四、上下拉动滚动条时卡顿、慢
body { -webkit-overflow-scrolling:touch;  overflow-scrolling: touch; }
五、iphone及ipad下输入框默认内阴影
-webkit-appearance:none;
六、ios和android下触摸元素时出现半透明灰色遮罩
-webkit-tap-highlight-color:rgba(255,255,255,0)
设置alpha值为0就能够去除半透明灰色遮罩，备注：transparent的属性值在android下无效。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程