前端学习

理解同源策略同源策略是一种约定，它是浏览器最外围也最根本的平安性能，如果短少了同源策略，则浏览器的失常性能可能都会受到影响。在一个网页中发送申请时，会波及到 以后页面的地址 和 申请指标的地址，如果这两个地址中的端口号、域名、传输协定有任意一个不一样就是非同源申请，同时触发浏览器的同源策略，不容许获取申请指标服务器上的数据理解跨域申请当触发同源策略后仍旧须要获取服务器数据的申请就叫做跨域申请 开发过程中的跨域申请（申请第三方服务器）须要跨域申请的状况： 页面服务器（html、js、css、动态资源）与 数据服务器离开寄存购买第三方服务器应用jsonp跨域申请因为浏览器的同源策略，不容许发送跨域申请的 ajax 申请，所以咱们应用 jsonp 手法实现跨域申请 原理：<script> 标签的 src 属性不受同源策略的影响，会将申请回来的数据当作 JS 代码进行执行，外围：利用 script 标签 src 属性，向一个非同源服务器申请数据，服务器只有返回一个字符串，就会将这个字符串当作 JS 代码进行执行jsonp 申请数据时，须要服务器返回的 函数名()这样的字符串，前端须要筹备一个函数，并将这个函数名以参数模式传递给后端jsonp 优缺点： 绕开了同源策略，实现跨域申请，以内部资源的模式进行申请数据不好做平安防备<script type='text/javascript'> window.jsonp = function (res) { console.log(res) }</script><script src='http://localhost:8080/jsonp?id=1&cb=jsonp' type='text/javascript'></script>第一个script，创立一个jsonpCallback函数。然而它还没有被调用,这个函数须要发送给后端第二个script，加载src中的资源，并期待申请的内容返回，后端返回后果后执行jsonp函数代理跨域申请 利用 正向代理 机制实现跨域申请配置代理时倡议应用 nginx 服务器进行配置代理配置代理办法： 找到 nginx.conf配置文件，关上文件找到 server，在server{}内最初进行配置以下内容：配置实现后保留文件，重启服务器// 代理服务器配置内容loaction /xx { proxy_pass 代理指标地址;}/* /xx 是代理标识符，当申请 /xx 时，nginx会找到申请代理标识符， 而后主动转发给proxy_pass前面的指标地址*/cors跨域资源共享(由后端解决跨域申请问题)因为是跨域申请，申请发送到服务器了，服务器返回响应，然而浏览器判断是非同源地位，不容许应用服务器返回的数据，为了解决这个问题，须要服务器通知浏览器这个域名容许应用返回的数据 header("Access-Control-Allow-Origin:*");header("Access-Control-Request-Methods:GET,POST");header("Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid");

理解HTTP协定http 传输协定是前后端交互的一种形式，示意前端以怎么的模式发送数据给后端，后端以怎么的模式返回数据给前端传输协定中必须经验 建设连贯 --> 前端发送申请给后端 --> 后端返回响应给前端 --> 断开连接只能由前端被动发动，后端不能被动沟通前端一次连贯只能沟通一件事，所以对一件事尽可能详细描述前后端进行交互时只能应用字符串格局，不能应用其余格局的数据类型，中文会主动转换为 url 编码传输协定传输过程建设连贯（基于TCP/IP协定的三次握手） 建设连贯的目标是保障浏览器与服务器之间进行通道的连贯 过程： 前端询问后端状态，后端回应前端，前端回应后端的回应，前端与后端确认失常连贯，前端发送申请给后端 前端发送申请（以申请报文模式进行发送） 申请报文是一个非凡格局的字符串文件（由浏览器进行组装）申请行的参数阐明： 申请形式HTTP 1.0 的申请形式： GET 偏差于获取的形式（大部分都是给后端一些参数，用来获取一系列数据）POST 偏差于给服务器一些数据（大部分都是登录，给服务器一些信息，而后返回一个简略的后果）PUT 偏差于给服务器一些信息，增加数据（大部分用于注册，给服务器发送一些信息进行存储）HEAD 用于获取服务器头信息HTTP 1.1 的申请形式： DELDTE 偏差于删除信息（大部分时删除评论等）CONNECT 管道连贯扭转代理连贯应用PATCH 偏差于给服务器一些信息进行批改信息（大部分用于欠缺用户材料）OPTIONS 获取服务器性能，然而须要服务器批准./login.php 示意申请地址HTTP/1.1 示意传输协定版本申请头（对本次申请的形容信息） Host 示意申请的主机Accapt 示意须要的数据类型User Agent 示意申请的终端CookieContent-type 示意申请体的数据格式申请空行（分隔申请体和申请头）申请体（前端携带给后端的参数；GET申请没有） 后端接管申请并返回响应（以响应报文模式发送）状态行： 响应状态码100 ~ 199 示意连贯持续 101 状态码示意连贯持续200 ~ 299 示意各种意义上的胜利200 状态码示意通用胜利300 ~ 399 示意重定向301 状态码示意永恒重定向（本次申请永恒拜访这个地址，从新切换为新的地址）302 状态码示意长期重定向（本次申请长期应用 服务器 来决定浏览器跳转页面）400 ~ 499 示意客户端谬误403 状态码示意拜访权限不够404 状态码示意拜访地址不存在500 ~ 599 示意服务端谬误500 状态码示意通用服务端谬误501 状态码示意服务器保护或过载对响应状态码的简略形容传输协定的版本响应行： ...

理解AJAXAJAX 是前端JS与服务端的交互伎俩，JS与服务端的交互依赖于客户端发送申请通过JS向服务端发送申请，服务端返回的响应不会间接显示在页面上，返回的响应须要JS接管，AJAX ：A示意 async(异步) ；J示意 JavaScript ；A示意 and ；X示意 XML；是异步JavaScript和XMLAJAX的应用语法应用内置构造函数 XMLHttpRequest() 创立 AJAX 实例化对象应用 AJAX实例化对象.open(申请形式, 申请服务器文件地址, 是否异步) 拜访服务器 申请形式填写八种形式中的申请地址填写申请的后端文件地位是否异步默认为异步（true），可填写同步（false）应用AJAX实例化对象.send()前端向后端发送申请应用AJAX实例化对象.onload=function(){}绑定事件，应用事件处理函数应用返回的响应体 事件在相应胜利后触发，xhr 中responseText属性的属性值就是响应体// 异步申请//创立 AJAX 实例化对象const xhr = new XMLHttpRequest()// 配置本次申请信息(参数三选填，默认为 true)xhr.open('GET', './get.php',true)// 发送申请给后端xhr.send()// 接管后端返回后果（存在同步异步问题，须要在发送申请前绑定事件）xhr.onload=function(){ var res = JSON.parse(xhr.responseText) }// 同步申请//创立 ajax 实例化对象const xhr = new XMLHttpRequest()// 配置本次申请信息(参数三选填，默认为 true)xhr.open('GET', './get.php',false)// 接管后端返回后果（存在同步异步问题，须要在发送申请前绑定事件）xhr.onload=function(){ var res = JSON.parse(xhr.responseText)}// 发送申请给后端xhr.send()AJAX 的异步问题异步申请：先创建对象，而后配置信息，发送申请后须要期待响应返回，同时绑定事件，当返回响应后，触发事件同步申请：先创建对象，而后配置信息，发送申请后须要期待响应国过程完结后执行后续代码，当返回响应体后还未绑定事件，而后绑定事件，事件不在触发同步申请时，须要先绑定事件，在发送申请AJAX实例化对象创立的兼容问题解决AJAX 不会被动进行兼容，解决兼容时次要解决 AJAX 对象创立 和 接管响应规范浏览器语法：const xhr = new XMLHttpRequesst()IE7、8、9浏览器语法：const xhr = new ActiveXObject('Msxml.XMLHTTP')IE6浏览器语法：const xhr = new ActiveXObject('Msxml2.XMLHTTP')IE5.5+浏览器语法：const xhr = new ActiveXObject('Microsoft.XMLHTTP')IE 5.5+ 以下不反对 ajax ，ajax 的兼容是基于内核进行兼容的，不能应用最新版IE切换版本进行测试var xmlHttp = false;try { // 规范浏览器 xmlHttp = new XMLHttpRequest();} catch (trymicrosoft) { try { // IE7 8 9兼容 xmlHttp = new ActiveXObject("Msxml.XMLHTTP"); } catch (err) { try { // IE6兼容 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { // IE5.5+兼容 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { // 其余版本IE浏览器 xmlHttp = false; } } }}if (!xmlHttp) { alert("无奈创立 XMLHttpRequest 对象！");}接管响应体兼容问题解决IE低版本没有 onload 事件，只能应用 onreadystatechange 事件进行接管响应 在事件中须要判断 xhr.status在 200~299之间并且xhr.readyState === 4时，失常接管响应体 ...

MySQL语句标准关键字大写 字段名、表名应用反引号包裹 应用一个值时，须要应用引号包裹 连贯数据库语法$变量 = mysqli_connetc('数据库所在电脑IP', '数据库用户名', '数据库明码', '操作数据库中的某一个库');/* 参数一：数据库在本人本机上IP为127.0.0.1 或 localhost，拜访近程数据库时，IP 为数据库所在电脑或服务器的IP 参数二：数据库默认用户名为 root 参数三：数据库默认明码为 root 参数四：抉择须要操作的库 返回值：连贯信息*/// 连贯127.0.0.1服务器数据库中的 user库$link = mysqli_connetc('127.0.0.1', 'root', 'root', 'user');数据库操作语法向数据库增加数据语法： // 所有字段增加数据// id：写 null 时，会主动递增，数据会从左往右进行增加给数据库字段$变量 = 'INSERT INTO `操作的库` VALUES(id, 数据1, 数据2)';$sql = 'INSERT INTO `user` VALUES(null,"张山", "18", "男", "2020", "100")';// 给指定的字段增加数据（须要数据库中容许字段为空）$变量 = 'INSERT INTO `操作的库` (`字段名1`, `字段名1`) VALUES(数据1, 数据2)';$sql = 'INSERT INTO `user` (`username`, `score`) VALUES("张三", 90)';删除数据库中的数据： $变量 = 'DELETE FROM `操作的库` WHERE 删除条件 ';$sql = 'DELETE FROM `user` WHERE `id`>100 ';批改数据库中的数据： ...

解决PHP输入中文乱码再没申明字符集编码时，会呈现中文乱码问题，咱们须要应用 header('utf-8') 申明通知浏览器以申明字符集编码进行解析内容，utf-8 被称为万国码，涵盖了所有国家的字符编码 <?php header('utf-8')?>变量的定义与应用在php中定义变量没有关键字，应用$变量名定义后，应用也是$变量名 <?php // 定义变量 $num = 0; // 应用变量 for($conut=0;$conut<10;$conut++){ 代码; }?>三种输入语法<?php /* 第一种 只能输入根本数据类型，输入简单数据类型会报错， 输入布尔值时 true会被转换为 1 ，false会被转换为 空 */ echo 输入的内容 /* 第二种 能够输入所有数据类型， 输入布尔值时 true会被转换为 1 ，false会被转换为 空 */ print_r('输入内容'); /* 第三种 能够输入所有数据类型， 输入时会显示每个数据的数据类型的详细信息 */ var_dump('输入内容');?>字符串PHP中字符串分为 应用单引号包裹的一般字符串 和 应用双引号包裹的非凡字符串，应用双引号包裹的字符串可进行解析变量PHP中的字符串的拼接，字符串1.字符串2流程管制语句if(){ } else if(){ } else{ }switch(){case:}for(){ }while(){ }do{ }while()数组索引型数组 $arr = array(数据1，数据2···)关联性数组 $arr = array(key=>value, key=>value···)拜访数组元素 数组名[索引]数组名[key]

理解PHPPHP是一门后端语言 PHP文件后缀为.php，代码写在<?php 代码 ?>标签外部 PHP文件须要在apache环境运行，后端须要数据库apache环境分为：WAMP：windows Apache MySQL PHP与MAMP：MacOS Apache MySQL PHP 理解服务器与服务服务器: 相当于一台电脑运行了一个非凡的环境（软件），在这个环境中，会将电脑上某一个 磁盘空间（文件夹）对外开放，当外界电脑找到这个电脑时，能够拜访这个磁盘空间的内容，当这个电脑始终运行，始终能够被拜访，就是一个服务器服务： 在这个磁盘空间中对访问者提供不同需要的数据 理解网络环境https://www.baidu.com:443 https 是传输协定，以怎么的形式传递数据www.baidu.com 是一个域名，服务器的IP地址443 是传输协定的端口号理解phpstudyphpstudy是一个 PHP 的集成环境，蕴含了 MySQL 和 apache个别启动后 MySQL 和 apache 是同时启动的，如果 MySQL 未启动，须要敞开之前装置的 MySQL 服务端口号默认为 80 ，可进行批改phpstudy的凋谢目录，外界可进行拜访的文件夹，门路可进行批改phpstudy的默认首页，文件夹中蕴含 index.xxx的文件会被当作默认首页主动关上phpstudy默认不容许查看目录构造，可设置服务器启动后，外界电脑应用域名进行拜访，本人电脑应用 127.0.0.1 进行拜访phpstudy提供了数据库可视化工具

理解模块化开发模块化开发是指将一类办法封装在一个 JS文件 中，每一个不同的性能类的 JS文件 就是一个模块，而后通过引入不同性能的文件相互配合，实现目标成果引入多个文件呈现的问题 文件引入程序，被依赖文件必须在应用被依赖文件内办法的文件后面当多个JS文件时，产生文件依赖关系不清晰问题JS 文件外部全局变量净化模块化开发发展史没有模块化开发阶段 依照依赖程序进行进入JS文件，最初引入整合文件前期无奈进行保护代码，依赖关系不清晰全局变量净化，模块文件中的全局变量能够在其余模块或整合文件中间接进行应用，其余文件也无奈定义雷同的变量名// 模块文件a<script src="a.js"></script>// 模块文件b// 文件外部可能应用了 a 文件外部办法，所以须要在 a 文件前面引入<script src="b.js"></script>// 性能整合文件main// 文件是整合文件，应用了 a b 文件内的办法，所以 a b 须要引入在 main 文件后面<script src="main.js"></script>// a.jsvar num = 100;function af1(){ console.log('a文件内的af1办法')}function af2(){ console.log('a文件内的af2办法')}// b.jsfunction bf1(){ af2(); console.log('应用了a文件内的af2办法')}function bf2(){ console.log('a文件内的bf2办法')}// main.jsconsole.log(num) // num 是一个全局变量，所以在main文件内能够应用af1();bf1();IIFE伪模块化开发阶段（非官方）原理：在JS文件中书写一个自执行函数，而后将办法写在自执行函数体内，但办法是自执行函数内的局部变量，外界无奈应用，所以须要将外界须要的办法挂载在全局上 解决的问题： 通过自执行函数的参数可晓得依赖了哪些模块在自执行函数中定义的变量属于局部变量，没有全局变量净化问题产生的问题： 文件引入程序不能动尽管晓得依赖了哪些模块，然而不晓得模块是哪个文件的// 模块文件a<script src="a.js"></script>// 模块文件b// 文件外部可能应用了 a 文件外部办法，所以须要在 a 文件前面引入<script src="b.js"></script>// main 文件是整合文件，应用了 a b 文件内的办法，所以 a b 须要引入在 main 文件后面<script src="main.js"></script>// 模块文件a.js(function(){ // 自执行函数执行完结后，变量主动销毁 var num = 100; function af1(){ console.log('a文件内的af1办法') } function af2(){ console.log('a文件内的af2办法') } // 将变量和办法挂载在全局上，其余文件可进行应用 window.madA={ af1, af2, num }})()// 模块文件b.js(function(madA){// 这里的参数接管的是自执行函数参过去的参数 function bf1(){ madA.af2(); console.log('应用了a文件内的af2办法') } function bf2(){ console.log('a文件内的bf2办法') } // 将其余文件须要用到的办法挂在在全局上 window.madB={ bf1, bf2 }// 传入其余模块文件挂载在全局上的对象名，在函数内进行应用外部变量和办法})(madA)// 模块文件main.js(function(madA，madA){ console.log(madA.num) // num 是其余文件挂载在全局上的变量，所以在main文件内能够应用 madA.af1(); madB.bf1();})(madA,madB)commonJS模块化开发规范 CommmonJS用于node端模块化开发(只能用于后端)模块化开发标准： ...

应用typeof进行判断语法：typeof 判断的数据 特点：能够精确判断根本数据类型，无奈对简单数据类型进行精确判断 应用constructor进行判断语法：对象名.constructor 特点：只能判断简单数据类型，不能判断根本数据类型 应用instanceof进行判断语法：对象名 instanceof 构造函数 特点：只能判断简单数据类型，不能判断根本数据类型 应用Object.prototype.toString.call()判断语法：Object.prototype.toString.call(须要判断的数据) 特点：能够精确判断所有数据类型 深度理解对象对象是数据类型的一种，以键值对的模式存储数据key : value，应用__proto__和原型链可拜访本人没有的属性应用 for in循环可遍历对象身上以及原型链上所有可枚举的属性；咱们能够对属性进行设置是否可枚举hasOwnProperty()能够产看是否是本人的属性 语法：对象名.hasOwnProperty('须要检测的属性名')defineProperty()数据劫持 一种给对象增加属性的形式，能够对属性设置各种各样的行为状态 语法：Object.defineProperty(须要增加属性的对象, key, {增加怎么样的设置}) <input id="username" type="username"> <script> let prop = { firstName: '张', lastName: '思锐' } let obj = {} Object.defineProperty(obj, 'username', { enumerable: true,// 设置属性是否可枚举 get() { // 数据劫持prop属性 return prop.firstName + prop.lastName }, // val形参接管外界传过来的值 set(val) { // 接管 形参进行批改 属性值内容 let a = val.slice(0, 1) let b = val.slice(1) // 应用劫持到的属性进行设置 prop.firstName = b prop.lastName = a let inp = document.querySelector('#username') inp.value = obj.username } }) obj.username = '张一山' </script>

理解面向对象面向对象是对面向过程的高度封装（高内聚低耦合）在开发过程中，咱们须要实现某一个性能时，然而 JS 没有可能实现这项性能的对象，咱们创立一个可实现这项性能的对象创立的对象是一个 有属性 、有办法、并且正当的一种面向对象语言须要向开发者提供四种根本能力封装 - 把相干的信息（无论数据或办法）存储在对象中的能力汇集 - 把一个对象存储在另一个对象内的能力继承 - 由另一个类（或多个类）得来类的属性和办法的能力多态 - 编写能以多种办法运行的函数或办法的能力创建对象的形式字面量创立：var obj = {}内置构造函数创：var obj new Object()工厂函数创立：本人书写工厂函数，应用本人书写的工厂函数进行创建对象// 创立工厂函数function createPerson(name, age){ // 手动创立一个对象 var person = new Object(); // 手动向对象增加成员 person.name = name; person.age = age; // 创立办法 person.showName = function(){ alert("姓名："+this.name); } person.showAge = function(){ alert("年龄："+this.age); } // 返回增加成员和办法的对象 return person;}//创立两个对象var p1 = createPerson("jiangzhou", 22);var p2 = createPerson("tom", 20);//调用对象办法p1.showName();p1.showAge(); p2.showName();p2.showAge();自定义构造函数创立 构造函数：不与 new 连用时就是一个一般函数，当与 new 连用时，就具备了结构能力，构造函数里的 this 指向实例对象（创建对象时的那个变量） 本人书写一个构造函数，应用自定义的构造函数创立一个对象function createObj(name,age){ // 会主动进行创立一个对象 // 手动增加成员 this.namee=name // this 指向以后创建对象的变量 this.age=age // this 指向以后创建对象的变量 // 创立办法 this.showName = function(){ alert("姓名："+this.name); } this.showAge = function(){ alert("年龄："+this.age); } // 主动返回对象}let obj=new createObj('Jack', 18)//调用对象办法p1.showName();p1.showAge(); p2.showName();p2.showAge();构造函数的书写与应用标准明确这是一个构造函数，而不是一般函数，构造函数在调用时须要与 new 连用构造函数的目标就是为了创立一个 有属性 有办法 正当的 对象注意事项： ...

理解函数属性——prototypeprototype是每一个函数天生自带的属性，prototype属性又指向一个prototype对象，prototype属性和prototype对象是两个不同的货色prototype(原型对象)对象外部有一个constructor属性，constructor属性指向一个constructor对象，constructor对象就是这个函数自身 理解函数属性——__proto____proto__属性是每一个对象天生自带的属性，指向所属函数的原型对象，实例化对象也是对象，所以也带有__proto__属性function Person(name,age){ this.name = name this.age = age this.sayHi = function (){ console.log('hello')}let p1 = new Person('Jack',18)let p1 = new Person('Rose',20) 理解对象拜访机制当拜访一个对象成员的时候，如果对象自身有该成员，则间接返回后果，进行查问；如果自身没有，则主动去 __proto__ 上拜访查找，如果还没有，持续去__proto__ 上拜访查找，直到顶级对象的 __proto__都没有就返回 undefined每一个函数天生自带一个属性 prototype属性，是一个对象每一个对象天生自带一个属性 __proto__属性，用于指向所属构造函数的 prototype当一个对象没有精确的构造函数来实例化时，那么默认看作是内置构造函数 Object 的实例对象原型原型是每个函数天生自带的一个叫做 prototype属性，prototype属性指向寒素的prototype原型对象prototype中的constructor属性(结构器)指向以后原型对象所属的构造函数 原型链从任何对象登程，依照 __proto__开始往上查找，最终都能查找到 Object.prototype，那么由__proto__串联起来的对象链状构造叫做原型链数组.__proto__ === Array.prototypeArray.prototype.__proto__ === Object.prototype数组.__proto__.__proto__ === Object.prototype

理解ES6ECMAScript 6 是JavaScript语言的第六次订正规范，以后版本的ES6是在2015年公布的，所以又称ECMAScript 2015，也就是说，ES6就是ES2015 ES6语法——定义变量定义常量的语法：const 常量名 = 值定义变量的语法：let 变量名 = 值let/const 和 var 的区别 var 定义的变量会进行预解析，而 let 、const 不会在同一作用域下 var 同一变量名可反复定义，而 let、const 不能反复定义var 没有块级作用域（var 作用域只能在部分作用域中才受到限制），而 let 、const 有块级作用域，每一个{ }就是一个块级作用域，块级作用域限度了变量的应用范畴let 与 const的区别 let 定义的是变量，const定义的常量（不可变量）let 定义变量时能够不进行赋值，const 定义常量时必须赋值let 定义的变量的值能够被批改，const定义的常量的值不能被批改变量定义标准：尽量应用 let 与 const 定义，并且优先应用 const 定义ES6语法——箭头函数箭头函数是ES6 推出的一种匿名函数的简写形式语法：()=>{}构造阐明：()内书写新参，=>是箭头函数的标识符，{}内书写执行代码箭头函数的个性当只有一个形参并且一句执行代码时，箭头函数可写成 形参=>执行代码当只有一个形参和多条执行语句时，箭头函数可写成 形参=>{执行代码}当多个形参和一句执行代码时，箭头函数可写成 (形参)=>执行代码当有多个形参和多句执行代码时，箭头函数语法为 (形参)=>{执行代码}在箭头函数中没有一般函数的 arguments属性箭头函数里的this是捕捉其所在（即定义的地位）上下文的this值， 作为本人的this值，并且箭头函数中this无奈扭转ES6语法——函数参数的默认值定义函数时，给形参一个值，这个叫函数参数的默认值，当调用时有实参传递，应用实参赋值，如果没有实参传递，则应用默认值function fn(a=100,b=200){}let fun = (a=100)=>{}ES6语法——函数参数的默认值应用反引号包裹的字符串可进行换行操作，并且能够解析变量模板字符串可用于调用函数，字符串内容就是函数参数，${ }将字符串进行切割，组成一个数组进行传参，${ } 里的内容也是参数，进行顺次赋值模板引擎兼容问题：IE 低版本不反对，前期通过打包时，打包工具会主动兼容解决var str = `<div class="right"> <li> <div class="img"> <p> 价格：${变量名} </p> </div> </li> </div>`ES6语法——解构赋值解构数组：let[变量1，变量2，变量3]=[数据1，数据2，数据3]解构多维数组：let[变量1，[变量2，[变量3]]]=[数据1，[数据2，数据3]]]解构对象：let{key值:别名,key值}=[key:value,key:value]解构多维对象：let{key值,{key值,key值}}={key:value,{key:value,key:value}}ES6语法——对象的简写当对象中的 key 和 value 完全相同时，间接写 key当 key：非箭头函数时，可间接写 key (){}

理解this和this指向this定义：this是一个在作用域外部的关键字this指向： 全局下应用，this指向window函数内应用，this指向调用者 全局调用，this指向window对象调用，this指向函数名.后面所有名称定时器处理函数，this指向window事件处理函数，this指向事件源自执行函数，this指向window箭头函数里的this是捕捉其所在（即定义的地位）上下文的this指向， 作为本人的this指向扭转this指向应用call()办法特点：扭转指向后立刻执行函数函数名.call(指向指标, 实参1, 实参2···)对象名.函数名.call(指向指标, 实参1, 实参2···)参数阐明：参数一为扭转后的 this指向，参数二开始给函数传递参数应用：// 获取到的li是一个伪数组，无奈应用数组的forEach办法，所以借用一个数组进行调用forEach办法，应用call办法将this指向li的伪数组[].forEach.call(li,function(item){ item.addEventListener('click',function(){ console.log(this,item) })})应用apply()办法特点：扭转指向后立刻执行函数函数名.apply(指向指标, 实参1, 实参2···)对象名.函数名.apply(指向指标, 实参1, 实参2···)参数阐明：参数一为扭转后 `this`指向，参数二开始给函数传递参数，一个数组或伪数组作用：能够以数组模式给一些无奈应用数组传参的性能函数进行传参如：如 Math.max()办法let max=Math.max.apply(this,arr)console.log(max)应用bind()办法特点：扭转指向后不会立刻执行函数，返回一个扭转this指向的新函数函数名.bind(指向指标, 实参1, 实参2···)对象名.函数名.bind(指向指标, 实参1, 实参2···)参数阐明：参数一为扭转后 this指向，参数二开始给函数传递参数作用：扭转事件处理函数或定时器处理函数的 this指向function liClick(){ console.log(this)}ul.addEventListener('click',liClick.bind(li))

理解事件事件是指提前与浏览器设定好的一些行为，当用户触发这些行为时，将执行一个事件处理函数事件三要素： 事件源：将事件绑定在某个元素身上事件类型：触发事件的行为形式事件处理函数：当触发行为后，须要执行一个函数事件绑定的分类DOM 0级事件：事件源.on事件类型 = 事件处理函数毛病：因为是赋值式函数，所以只能绑定一个事件处理函数DOM 2级事件: 规范浏览器语法： 事件源.addEventListener('事件类型', 事件处理函数,事件执行程序)` 参数：至多两个参数，能够绑定多个事件处理函数，函数由上至下执行，第三个参数设置事件执行程序，false 示意事件冒泡程序执行，true 示意事件捕捉程序执行IE低版本浏览器语法： 事件源.attachEvent('on事件类型', 事件处理函数) 只有两个参数，能够绑定多个事件处理函数，函数由下至上执行事件的解绑DOM 0级事件的解绑 事件处理函数是赋值式函数，所以事件解绑间接从新赋值为null即可 语法：事件源.on事件类型 = nullDOM 2级工夫的解绑 留神点：DOM 2级事件解绑时，事件处理函数须要是一个具名函数规范浏览器的事件解绑 事件源.removeEventListener('事件类型', 事件处理函数)IE低版本浏览器的事件解绑 事件源.detachEvent('on事件类型', 事件处理函数)DOM 2级事件绑定与解绑的兼容 // 捕捉段落元素var p1 = document.getElementById("p1");// 定义事件处理函数1var f1 = function () { p1.style.background = 'blue';};//定义事件处理函数2var f2 = function () { p1.style.background = 'red'; //兼容IE低版本浏览器 if (p1.detachEvent) { p1.detachEvent("onmouseover", f1); //登记事件mouseover p1.detachEvent("onmouseout", f2); //登记事件mouseout } //兼容规范浏览器 else { p1.removeEventListener("mouseover", f1); //登记事件mouseover p1.removeEventListener("mouseout", f2); //登记事件mouseout }};// 兼容IE低版本浏览器if (p1.attachEvent) { p1.attachEvent("onmouseover", f1); // 绑定事件mouseover p1.attachEvent("onmouseout", f2); // 绑定事件mouseover}//兼容规范浏览器else { p1.addEventListener("mouseover", f1); // 绑定事件mouseover p1.addEventListener("mouseout", f2); // 绑定事件mouseover}DOM 操作罕用事件鼠标事件： ...

获取元素尺寸特点：当元素设置display: none时，获取的尺寸为0获取元素内容、内边距、边框的尺寸：宽度：获取元素的变量.offsetWidth高度：获取元素的变量.offsetHeight获取元素内容、内边距的尺寸：宽度：获取元素的变量.clientWidth高度：获取元素的变量.clientHeight 获取与本人最近的定位父元素：获取元素的变量.offsetParent获取元素的偏移量特点：元素应用right和bottom进行定位，会主动转换左偏移量和上偏移量获取与本人最近的定位父元素：获取元素的变量.offsetParent获取元素绝对于父元素右边或上边的偏移量:左偏移量：获取元素的变量.offsetLeft右偏移量：获取元素的变量.offsetTop 获取页面的尺寸（不蕴含滚动条）宽度：document.documentElement.clientWidth高度：document.documentElement.clientHeight

理解DOM节点页面由一个一个节点组成，页面的每一部分都是一个节点 Document 是页面中最大的节点，但不属于元素节点，它是一个承载所有节点的容器，每个页面都有一个Document 节点html 是页面中最大的元素节点，叫做根节点，它承载所有元素节点head、body、div等都属于一般元素节点，各自性能都不雷同文本节点承载文本内容，每一段文本都是一个文本节点，文本节点包含换行和空格，个别文本节点是元素节点的子节点属性节点指元素身上的用于形容元素的属性正文节点个别以独立内容呈现，用于阐明文本DOM节点属性节点编号（nodeType） 元素节点：1属性节点：2文本节点：3正文节点：8文档节点：9节点名称（nodeName） 元素节点：大写标签名属性节点：属性名文本节点：#text正文节点：#comment节点值（nodeValue） 元素节点：null属性节点：属性值文本节点：文本内容（包含换行和空格）正文节点：文本内容（包含换行和空格）获取DOM节点API获取元素中所有子节点：获取元素的变量.childNodes 能够应用 length属性获取伪数组长度，和遍历伪数组内容 返回值：由元素的所有子节点汇合，是一个伪数组获取元素中所有子元素节点：获取元素的变量.children 能够应用 length属性获取伪数组长度，和遍历伪数组内容 返回值：由元素的所有子元素节点汇合，是一个伪数组获取元素中第一个子节点：获取元素的变量.firstChild 返回值：元素的第一个子节点获取元素中第一个子元素节点：获取元素的变量.firstElementChild 返回值：元素的第一个子元素节点获取元素中最初一个子节点：获取元素的变量.lastChild 返回值：元素的最初一个子节点获取元素中最初一个子元素节点：获取元素的变量.lastElementChild 返回值：元素的最初一个子元素节点获取元素的上一个兄弟节点：获取元素的变量.previousSibling 返回值：上一个兄弟节点获取元素的上一个兄弟元素节点：获取元素的变量.previousElementSibling 返回值：上一个兄弟节点获取元素的下一个兄弟节点：获取元素的变量.nextSibling 返回值：上一个兄弟节点获取元素的下一个兄弟元素节点：获取元素的变量.nextElementSibling 返回值：下一个兄弟元素节点获取元素的父节点(最高失去Document)：获取元素的变量.parentNode 返回值：元素的父节点获取元素的父元素节点：获取元素的变量.parentElement 返回值：元素的父元素节点获取元素的所有属性节点：获取元素的变量.attribute创立DOM节点的API创立元素节点：document.createElement(‘标签名’) 返回值：创立好的元素节点创立文本节点：document.createTextNode(‘文本内容’)返回值：创立好的文本节点创立正文节点：document.createComment(‘正文内容’)返回值：创立好的正文节点创立属性节点：document.createAttribute(‘属性名’)返回值：创立好的属性节点DOM节点操作API插入节点：将一个节点插入到另一个节点外部 在父节点外部最初插入节点： 父节点.appendChild(子节点)在父节点外部指定元素前插入节点 父节点.insertBefore(子节点,指定元素)删除节点：将一个存在的节点删除 将节点从父元素中删除： 父节点.removeChild(子节点)将本人从父结点中删除： 节点.remove()替换节点：应用一个节点替换一个存在的节点 父节点.replaceChild(替换节点, 被替换节点)克隆节点：将某一个节点复制一份 节点.cloneNode(参数)参数为选填，默认为 true ，示意克隆所有节点，参数为false时，示意不克隆后辈节点文档碎片容器作用：用于承载多个节点，之后一次性将所有节点插入到页面中，插入页面时，文档碎片节点不会被插入到页面中，缩小DOM操作，晋升性能 创立一个文档碎片容器const fr = document.createDocumentFragment()// 向文档碎片容器增加内容fr.appendChild(节点)

理解DOMDOM (Document Object Model) 是文档对象模型提供了应用JavaScript对 HTML页面的操作，对元素进行增删改查、设置元素属性、设置元素款式、给元素增加事件等API理解DOM树DOM根本构造 DOM树 获取DOM元素API获取html元素：document.documentElement获取head元素：document.head获取body元素：document.body通过id属性获取元素：document.getElementById('id名') 返回值：匹配id的元素，id不存在返回null通过标签名获取元素：document.getElementByTagName('标签名') 返回值：有匹配标签名的元素返回一个存储了所有匹配的元素伪数组，没有匹配标签名的元素返回一个空伪数组通过class名获取元素：document.getElementsByClassName('class名') 返回值：有匹配class名的元素返回一个存储了所有匹配的元素伪数组，没有匹配class名的元素怒返回一个空伪数组通过name属性获取元素：document.getElementsByName('name属性值') 返回值：有匹配name属性值的元素返回一个存储了所有匹配的元素伪数组，没有匹配name属性值的元素怒返回一个空伪数组通过选择器获取元素 获取一个：document.querySelector('选择器') 返回值：返回值：匹配 选择器的元素，选择器 不存在返回null 获取多个：document.querySelectorAll('选择器') 返回值：一个存储 匹配 选择器 的所有元素 的伪数组，没有匹配 选择器 的元素 则是一个空伪数组操作元素属性API原生属性：HTML标签自带的属性，如 id、class、style等 操作语法： 获取属性值语法：获取元素的变量.属性名设置、批改属性值语法：获取元素的变量.属性名自定义属性：由本人定义的属性和属性值 操作语法： 获取属性值语法：获取元素的变量.getAttribute('属性名') 设置属性值语法：获取元素的变量.setAttribute('属性名','属性值') 删除属性值语法：获取元素的变量.removeAttribute('属性名')H5自定义属性：由 H5 推出的标准化自定义属性办法，格局为：data-xxx 操作语法： 获取属性值：获取元素的变量.dataset.属性名 设置属性值：获取元素的变量.dataset.属性名='属性值'操作元素类名的API设置类名：获取元素的变量.className = '类名'批改类名：获取元素的变量.className = '类名'追加类名：获取元素的变量.className += '类名'设置类名：获取元素的变量.className = '不写要删除的类名'H5 推出的新API，外部有一个 classList属性 增加类名：获取元素的变量.classList.add('类名')删除类名：获取元素的变量.classList.remove('类名')切换类名：获取元素的变量.classList.toggle('类名')没有这个类名时为增加，有这个类名时删除操作页面构造操作页面超文本构造内容 获取元素内所有超文本和文本内容：获取元素的变量.innerHTML返回值：返回标签+文本的字符串模式将内容插入到元素中：获取元素的变量.innerHTML= '插入内容'留神：齐全笼罩元素中之前的内容，插入内容中的标签会主动解析操作页面一般文本内容 获取元素内所有一般文本内容：获取元素的变量.innerText返回值：返回文本的字符串模式将内容插入到元素中：获取元素的变量.innerText= '插入内容'留神：齐全笼罩元素中之前的内容，插入内容中的标签不会主动解析操作表单元素中value属性值 获取表单元素内的value属性值：获取元素的变量.value返回值：返回value属性值设置value属性值：获取元素的变量.value= '插入内容'操作元素款式API操作元素款式时一些标准语法：增加或批改款式时，如果应用 点语法 操作，多单词款式名应用驼峰式格局，如果应用数组关联语法可间接写款式名 行内款式的操作 获取元素款式获取全副款式语法：获取元素的变量.style返回值：一个蕴含所有可设置款式的对象获取指定款式语法：获取元素的变量.style.款式名返回值：款式的值设置元素款式设置款式的值：获取元素的变量.style.款式名='款式值'非行内款式的操作 留神点：只能获取款式，不能间接设置款式 规范浏览器操作方法：获取全副款式：window.getComputedStyle(获取元素的变量)返回值：一个蕴含所有可设置款式的对象获取单个款式值：window.getComputedStyle(获取元素的变量).款式名IE浏览器操作方法：获取全副款式：获取元素的变量.currentStyle返回值：一个蕴含所有可设置款式的对象获取单个款式值：获取元素的变量.currentStyle.款式名兼容语法var div = document.getElementById('div');// 接管返回的款式信息对象var style = null;if (div.currentStyle) { //兼容IE colorStr = div.currentStyle} else { // 规范浏览器 colorStr = window.getComputedStyle(div)}var 变量 = window.getComputedStyle(获取元素的变量) || 获取元素的变量.currentstyle

理解BOMBOM (Browser Object Model) 是浏览器对象模型浏览器提供了一套可应用 JS 操作浏览器窗口的属性与办法BOM 的顶级对象是 window，每个页面就有一个 window ，所有全局变量页都定义在 window 下操作 BOM 相干API 都是以 window.xxx格局，个别可省略 window浏览器可视窗口大小操作API(蕴含滚动条尺寸)可视窗口的宽度：window.innerWidth可视窗口的高度：window.innerHeight返回值是以后浏览器窗口可视区域的大小 浏览器弹出层API(可在浏览器弹出一个弹窗显示一些信息)正告提示框弹出层 特点：弹出一个正告提示框，提示框内显示一些文本，并且有一个确定按钮语法：window.alert('提醒文本会变量')返回值：点击确定后，返回 undefined 抉择提示框弹出层 特点：弹出一个抉择提示框，提示框内显示一些文本，并且有一个确定按钮和一个勾销按钮语法：window.confirm('提醒文本会变量')返回值：点击确定后，返回 true，点击勾销后，返回 false 输出提示框弹出层 特点：弹出一个输出提示框，提示框内显示一些文本，并且有一个确定按钮和一个勾销按钮，还有一个输入框语法：window.prompt('提醒文本会变量')返回值：输入框内有内容，点击确定返回输入框内的内容，输入框内无内容，点击确定按钮返回值空字符串，输入框无论是否有内容，点击勾销返回值都是null 三种弹出层存在的共性：弹出层都会阻断程序的执行，只有期待用户操作后才会持续进行执行后续代码层序地址栏API浏览器地址栏地址形成局部 传输协定：如http、https、ftp等域名(服务器地址)：如www.baidu.com查问字符串(关上网页携带的信息)：如?fr=aladdin#4哈希(锚点定位)：如#4网页地址栏信息对象——location对象 获取和设置地址栏地址获取地址栏地址语法：window.location.href返回值：以后网页地址栏地址设置跳转地址：window.location.href='跳转页面地址'window.location.href="https://www.baidu.com"获取和设置地址栏中的查问字符串获取地址栏地址语法：window.location.search返回值：以后网页地址栏地址的查问字符串设置地址栏的查问字符串：window.location.search='查问字符串'window.location.search="fr=aladin"获取和设置地址栏中的哈希值获取地址栏地址语法：window.location.hash返回值：以后网页地址栏地址的哈希值设置地址栏的查问字符串：window.location.search='哈希值'window.location.search="4"页面刷新设置属性：window.location.reload()须要写在限度条件内，如果不写在限度条件内会导致浏览器解体浏览器历史记录API——history对象回退到上一个网页操作：window.history.back()后退到下一个网页操作：window.history.forward()蕴含回退、刷新、后退操作：window.history.go(整数) 正整数示意后退，2以上示意多级后退；0 示意刷新；负整数示意回退，-2以上示意多级回退浏览器信息API——navigator对象获取以后浏览器版本信息：window.navigator.userAgent获取浏览器名称：window.navigator.appName获取浏览器以后运行零碎：window.navigator.platform浏览器滚动时卷去的宽高API获取卷去的高度 HTML文件存在DOCTYPE标签时获取形式：var 变量 = document.documentElement.scrollTopHTML文件不存在DOCTYPE标签时获取形式：var 变量 = document.body.scrollTop兼容语法：var 变量 = document.documentElement.scrollTop || document.body.scrollTop获取卷去的宽度 HTML文件存在DOCTYPE标签时获取形式：var 变量 = document.documentElement.scrollLeftHTML文件不存在DOCTYPE标签时获取形式：var 变量 = document.body.scrollLeft兼容语法：var 变量 = document.documentElement.scrollLeft || document.body.scrollLeft 设置浏览器滚动到指定地位API语法①：window.scrollTo(X轴坐标, Y轴坐标)特点：霎时定位到指标地位语法②：window.scrollTo{ // 定位到的指标坐标地位 top: 0, left: 0, // 设置定位时的滚动形式 // 平滑滚动：smooth // 霎时定位：instant behavior: smooth}操作BOM 的事件页面加载事件特点：页面所有资源加载完后触发，可将JS代码前置，并失常应用 ...

理解单线程单线程指同一个工夫只能做一件事，并且须要执行完上一句代码，在执行下一句代码为什么Javascript是单线程javascript 是一门为了解决页面中用户的交互，以及操作DOM而诞生的脚本语言，比方咱们对某个DOM 元素进行增加和删除操作，不能同时进行，应该先进行增加，之后再删除单线程存在的缺点所有工作须要排队，前一个工作完结，才会执行后一个工作，这样所导致的问题是：如果 javascript某一段代码执行的工夫过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉解决Javascript单线程问题利用多核CPU的计算能力，HTML５提出Web Worker 规范，容许JavaScript脚本创立多个线程，于是 js 中呈现了同步和异步机制理解同步与异步机制同步：前一个工作完结后再执行后一个工作，程序的执行程序与工作的排列程序是统一的、同步的异步：你在做一件事件时，因为这件事件会破费很长时间，在做这件事的同时，你还能够去解决其余事件。 计时器（异步机制）在指定工夫后调用函数或计算表达式(只调用一次)语法：setTimeOut(调用函数, 毫秒数)依照指定的周期来调用函数或计算表达式(屡次调用) 语法：setInterval(调用函数, 毫秒数)调用函数只写函数名，不须要写函数名()模式定时器的返回值（Number类型）（示意以后是页面中第几个定时器）敞开定时器 语法①：`clearTimeOut(定时器返回值)`语法②：`clearInterval(定时器返回值)`两种办法都能够敞开不同类型的定时器

理解Date对象Date 对象是 JS 中的内置构造函数，是一个简单数据类型，用于创立和获取工夫信息 创立一个事件信息 终端上的工夫信息：var 工夫对象变量名 = new Date() 指定工夫信息信息(以数值传参)： 语法：var 工夫对象变量名 = new Data(年, 月, 日, 时, 分, 秒, 毫秒) 参数：月份从 0 开始示意 一月，11 示意 12月；只写一个参数示意获取以后终端的规范工夫，至多写两个参数能力创立一个指定工夫；除了年份，其余参数都会主动进位 语法（以字符串传参）：var 工夫对象变量名 = new Date('yyyy-mm-dd HH:MM:SS')获取工夫的办法获取以后终端上年份信息：工夫对象变量名.getFullYear()获取国际标准工夫年份信息：工夫对象变量名.getUTCFullYear()获取以后终端上月份信息：工夫对象变量名.getMonth()获取国际标准工夫月份信息：工夫对象变量名.getUTCMonth()获取以后终端上日期信息：工夫对象变量名.getDate()获取国际标准工夫日期信息：工夫对象变量名.getUTCDate()获取以后终端上小时信息：工夫对象变量名.getHours()获取国际标准工夫小时信息：工夫对象变量名.getUTCHours()获取以后终端上分钟信息：工夫对象变量名.getMinutes()获取国际标准工夫分钟信息：工夫对象变量名.getUTCMinutes()获取以后终端上秒钟信息：工夫对象变量名.getSeconds()获取国际标准工夫秒钟信息：工夫对象变量名.getUTCSeconds()获取以后终端上毫秒信息：工夫对象变量名.getMilliseconds()获取国际标准工夫毫秒信息：工夫对象变量名.getUTCMilliseconds()获取以后终端上星期信息：工夫对象变量名.getDay()0 示意周日获取工夫戳：工夫对象变量名.getTime()工夫戳是指以后工夫到 格林威治 工夫的毫秒数获取工夫的办法设置以后终端上年份信息：工夫对象变量名.setFullYear(设置的年份)设置国际标准工夫年份信息：工夫对象变量名.setUTCFullYear(设置的年份)设置以后终端上月份信息：工夫对象变量名.setMonth(设置的月份)设置国际标准工夫月份信息：工夫对象变量名.setUTCMonth(设置的月份)设置以后终端上日期信息：工夫对象变量名.setDate(设置的日期)设置国际标准工夫日期信息：工夫对象变量名.setUTCDate(设置的日期)设置以后终端上小时信息：工夫对象变量名.setHours(设置的小时)设置国际标准工夫小时信息：工夫对象变量名.setUTCHours(设置的小时)设置以后终端上分钟信息：工夫对象变量名.setMinutes(设置的分钟)设置国际标准工夫分钟信息：工夫对象变量名.setUTCMinutes(设置的分钟)设置以后终端上秒钟信息：工夫对象变量名.setSeconds(设置的分钟)设置国际标准工夫秒钟信息：工夫对象变量名.setUTCSeconds(设置的秒钟)设置以后终端上毫秒信息：工夫对象变量名.setMilliseconds(设置的分钟)设置国际标准工夫毫秒信息：工夫对象变量名.setUTCMilliseconds(设置的毫秒)设置以后终端上工夫戳：工夫对象变量名.setTime(工夫戳)设置工夫戳时会主动转换为失常工夫格局

理解Math对象Math 对象是JS内置的一个操作数字的办法 Math 对象的罕用办法生成0 ~ 1之间的小数 语法：Math.random() 返回值：0~1之间的随机小数（蕴含0，但不蕴含1）数字四舍五入（只看小数点后一位） 语法：Math.round(数字) 返回值：四舍五入后的整数数字向上取整（整数时有效） 语法：Math.ceil(数字) 返回值：向上取整后的数字数字向下取整（整数时有效） 语法：Math.floor(数字) 返回值：向下取整后的数字计算数字的幂次 语法：Math.pow(数字, 幂次) 返回值：数字的幂次计算结果数字的算术平方根（只能计算平方根） 语法：Math.sqrt(数字) 返回值：数字开方后的后果数字的绝对值 语法：Math.abs(数字) 返回值：数字取绝对值后的后果求若干个数中最大值 语法：Math.max(数字1, 数字2，数字3，数字4···) 返回值：最大的数字 须要传入数组时，可应用 ... 运算符将数组进行开展 Math.max(...arr)求若干个数中最小值 语法：Math.min(数字1, 数字2，数字3，数字4···) 返回值：最小的数字 须要传入数组时，可应用 ... 运算符将数组进行开展 Math.min(...arr)进制转换十进制转换为其余进制注意事项： 转换为其余进制后，不能间接进行加法运算，不能间接转换为数字，如果间接转换为数字仍旧为十进制，如果须要进行计算，先应用十进制计算后，将后果转为对应进制 语法：数字.toString(转换为的进制) 返回值：转换后以字符串模式存储的数字其余进制转换为十进制 语法：parseInt('字符串', 以后字符串数字的进制) 返回值：转换后十进制数字指定保留若干位小数办法（以四舍五入进行保留，有余时补0） 语法：变量.toFixed(指定保留几位小数) 返回值：以字符串模式存储的后果

理解JSON格局JSON 格局是一种固定的字符串格局 因为在网络传输过程中，只能传递字符串格局，对象、数组数据类型无奈间接传递，所以须要转换为字符串格局，而JSON格局正好满足对象、数组数据类型转换为字符串数据类型的格局 JSON格局的语法标准对象中的 键值对（key：value） 只能应用双引号包裹，不能应用其余引号；数值、布尔值不须要加引号数组中有多个对象或数据时，应用逗号宰割JSON格局中，只能应用 {} [] "" , ;这五种符号转换为JSON格局时，函数会被主动过滤掉，所以转为JS格局后赋值给另一个对象后，将取得一个没有函数的新对象JSON格局是一种 String 数据类型JSON 格局与 JS格局之间的转换将JSON格局转换为JS格局的对象或数组 语法：JSON.parse(须要转换为对象或数组格局的字符串) 返回值：JS格局的对象或数组将JS格局的对象或数组转换为JSON格局语法：JSON.parse(须要转换为JSON格局的对象或数组)返回值：JSON格局的字符串内部独立JSON文件：文件以.json为后缀，并且文件内只能按JSON格局标准书写理解浏览器的本地缓存将一些数据存储在浏览器缓存中，缓存只能存储字符串数据类型，其余类型须要转换为JSON格局存储永恒缓存（只能手动删除）：localStorage长期缓存（浏览器敞开就失落）：sessionStorage浏览器缓存的操作语法增加缓存数据localStorage.setItem('key','value')sessionStorage.setItem('key','value')获取缓存数据localStorage.getItem('key')sessionStorage.getItem('key’)删除缓存数据localStorage.removetem('key')sessionStorage.removetem('key’)革除缓存数据localStorage.clear()sessionStorage.clear()

理解字符串由引号(双引号、单引号、反引号)包裹的值叫做字符串字符串在应用时主动转换为简单数据类型，应用完后主动转为根本数据类型当应用 字符串.xxx操作语法时，字符串转为简单数据类型，在堆空间开拓一块空间，将每个字符依照索引进行排列，就能够拜访外面的数据，应用完结后，转为根本数据类型，在堆空间内开拓的空间也主动销毁字符串的创立办法字面量创立办法：var 字符串名=''内置构造函数创立办法：var 字符串名=new String('')创立字符串初始化数据字面量创立办法：在var str = 'hello world'内间接写数据即可内置构造函数创立办法：var str = new String('hello world')内写数据即可其余数据类型转换为字符串数据类型办法语法：变量.toString()转换规则： 可将数值、布尔值、字符串转为字符串类型undefined 和 null无奈转为字符串类型字符串的length属性字符串的length属性示意一个字符串的长度；应用 字符串.length 可获取一个字符串的长度；字符串无奈设置本人的长度；在字符串中，空格也算一个字符通过 字符串名[索引] 可获取指定下标的字符，然而不能对某一个字符进行批改，因为字符串时根本数据类型，所以只能从新赋值笼罩之前的数据字符编码ASCII 码：一共128个，键盘上每个按键对应一个二进制码Unicode 码：国内编码，目前应用的为UTF-8GBK 码：中文编码，蕴含所有汉字不同的编码，同一个码值所对应的内容也不一样字符串操作方法获取字符串中指定索引上的字符 语法：字符串名.charAt(索引) 返回值：索引地位存在，返回对应字符，索引地位不存在返回空 应用：str.charAt(12)获取字符串中指定索引上的字符的UTF-8编码值 语法：字符串名.charCodeAt(索引) 返回值：索引地位字符的编码，索引地位不存在返回NaN 应用：str.charCodeAt(12)截取字符串 语法：字符串名.substr(开始截取索引,截取个数) 参数：不写参数默认全副截取，参数二不写截取到字符串开端 返回值：截取到的字符串 应用：str.substr(1,5)截取字符串 语法：字符串名.substring(开始截取索引,完结截取索引) 参数：不写参数默认全副截取，参数二不写截取到字符串开端 返回值：截取到的字符串 应用：str.substr(1,5)将字符串中大写字母转为小写字母 语法：字符串名.toLowerCase() 返回值：转换后的字符串 应用：str.toLowerCase()将字符串中小写字母转为大写字母 语法：字符串名.toUpperCase() 返回值：转换后的字符串 应用：str.toUpperCase()替换指定字符串 语法：字符串名.replace('须要进行替换的字符串','替换的字符串内容') 留神点：参数一字符串中没有时，不进行替换，遇到第一个满足条件的内容替换后不再往下替换 返回值：替换后的字符串 应用：str.replace('H','h')拼接字符串 语法：字符串名.concat('拼接的字符串'···) 参数：能够间接写字符串，也能够写字符串变量 返回值：替换后的字符串 应用：str.concat(str2,' 世界')截取字符串 语法：字符串名.slice(开始索引,完结索引) 参数：索引写负整数示意从 length + 负整数地位 返回值：截取到的字符串 应用：str.slice(5,10)切割字符串 语法：字符串名.split('切割的符号',切割个数) 参数：参数1不写时返回整个字符串，写空字符串示意一位一个进行切割；参数2示意切割的个数，默认为全副进行切割 返回值：切割后一个存储字符的一个数组 应用：str.split(' ',11)从字符串开始地位向后查找字符串片段在字符串中首次呈现的地位 语法①：字符串.indexOf('字符串片段') 语法②：字符串.indexOf('字符串片段', 开始索引) 返回值：字符串中存在该字符串片段，返回对应索引，字符串中不存在该字符串片段，返回-1 应用：str.indexOf('H') str.indexOf('H',5)从字符串完结地位向前查找字符串片段在字符串中首次呈现的地位 语法①：字符串.lastIndexOf('字符串片段') 语法②：字符串.lastIndexOf('字符串片段', 开始索引) 返回值：字符串中存在该字符串片段，返回对应索引，字符串中不存在该字符串片段，返回-1 应用：str.lastIndexOf('H') str.lastIndexOf('H',5)判断字符串中是否蕴含某一个字符串片段 语法：字符串.includes('字符串片段') 返回值：字符串中存在该字符串片段，返回 true，字符串中不存在该字符串片段，返回false 应用：str.includes('w')查找字符串中首次呈现的字符串片段地位 语法：字符串.search('字符串片段') 参数：参数能够写正则表达式 返回值：字符串中存在该字符串片段，返回对应索引，字符串中不存在该字符串片段，返回-1 应用：str.search('w')查找字符串中所有匹配的字符串片段 语法：字符串.match('字符串片段') 参数：参数个别写正则表达式 返回值：一个存储查找到匹配的字符串片段的数组 应用：str.match('w')去除字符串首尾空格 语法：字符串.trim() 返回值：去除首尾空格后的字符串 应用：str.trim()去除字符串头部的空格 语法：字符串.trimStart() 返回值：去除头部空格后的字符串 应用：str.trimStart()去除字符串尾部的空格 语法：字符串.trimEnd() 返回值：去除尾部空格后的字符串 应用：str.trimEnd()从字符串后面补齐字符串 语法：字符串.padStart(指标长度, '填充字符') 参数：参数1：指标长度小于字符串长度时，办法无意义；指标长度大于或等于时，应用填充字符进行填充；参数2：能够是多个字符，也能够只有一个字符，多个字符超出长度后，前面不能补齐的字符被抛弃 返回值：补齐后的字符串 应用：str.padStart(11,'世界')从字符串前面补齐字符串 语法：字符串.padEnd(指标长度, '填充字符') 参数：参数1：指标长度小于字符串长度时，办法无意义；指标长度大于或等于时，应用填充字符进行填充；参数2：能够是多个字符，也能够只有一个字符，多个字符超出长度后，前面不能补齐的字符被抛弃 返回值：补齐后的字符串 应用：str.padEnd(11,'世界')判断一个字符串是否以 指定字符串片段 开始 语法：字符串.startsWith('字符串片段') 返回值：如果是以该字符串片段开始返回 true ，如果不是以该字符串片段开始返回 false 应用：str.startsWith('世界')判断一个字符串是否以 指定字符串片段 开始 语法：字符串.endsWith('字符串片段') 返回值：如果是以该字符串片段开始返回 true ，如果不是以该字符串片段开始返回 false 应用：str.endsWith('世界')

意识数组数组是应用一个独自的变量名来存储一系列的值 数组的创立字面量创立形式：var 数组名 = []内置构造函数创立形式：var 数组名 = new Array()两种创立数组形式的区别字面量创立形式，在[]中间接书写数据即可，多个数据时，应用,进行分隔内置构造函数创立形式，new Array()时，示意创立一个空数组，new Array(正整数)时，示意设置数组的长度，new Array(数据1,数据2,···)时，示意数组中存入的数据数组的length属性数组的length属性示意一个数组的长度，可通过length属性获取和设置数组的长度当数组原来的长度比设置后的长度小时，前面的数组将被删除当数组的数据增加比length+1或+n地位时，两头地位索引会应用空补齐伪数组也能够应用length属性// 获取一个数组的长度var lenth = 数组名.length// 设置一个数组的长度数组名.length = 整数数组数据的排列形式数组依照索引进行排列，索引从 0 开始，顺次递增，最初一位数组的索引为 数组名.length - 1，通过数组名[索引]可获取或批改对应索引上的数据，如果索引地位没有数据则失去undefined，批改时，如果索引地位大于length+1时，两头地位用空补齐遍历数组数据遍历形式一：var arr=[1,2,3,4,5,6,7,8,9]for(var i=0;i<arr.length;i++){ console.log(arr[i])}遍历形式二：// key变量示意一个数组所在的索引var arr=[1,2,3,4,5,6,7,8,9]for(var key in arr){ console.log(arr[key])}数组罕用的操作方法伪数组无奈应用数组的操作方法四类基本操作办法 在原有数组的尾部进行增加数据语法：数组名.push(数据1,数据2,···)返回值：增加数据后数组的新长度应用：`arr.push(1,2,3)删除原有数组的最初一个数据语法：`数组名.pop()`返回值：被删除的那个数据应用：`arr.pop()` 在原有数组的头部进行增加数据语法：`数组名.unshift(数据1,数据2,···)`返回值：增加数据后数组的新长度应用：`arr.unshift(1,2,3)`删除原有数组的第一个数据语法：`数组名.shift()`返回值：被删除的那个数据应用：`arr.shift()`ES 3.0 操作方法 数组数据反转语法：数组名.reverse()返回值：数据反转后的数组应用：arr.reverse()数组数据排序 语法①：数组名.sort() 排序形式：以每个数据中每一位的ASCII码进行排序 返回值：排序后的数组 应用：arr.sort() 语法②：数组名.sort(function(a,b){return a-b}) 排序形式：将数据进行升序排列 返回值：排序后的数组 应用：arr.sort(function(a,b){return a-b}) 语法③：数组名.sort(function(a,b){return b-a}) 排序形式：将数据进行降序排列 返回值：排序后的数组 应用：arr.sort(function(a,b){return b-a})截取数组数据 语法①：数组名.splice(开始索引, 截取个数) 参数：参数二不写示意从开始索引截取到数组开端 返回值：截取的那一段数据的数组 应用：arr.splice(0,5) 语法②：数组名.splice(开始索引, 截取个数, 数据1, 数据2···) 参数：从都三个参数为对截取区间的数据进行批改 返回值：截取的那一段数据的数组 应用：arr.splice(0,1,1)在原数组开端进行追加数据 语法：数组名.concat(数组, 数据···) 参数：参数能够是一个数组，也能够是多个数据 返回值：追加数据后的数组 应用：arr.concat(0,1,1,arr2)获取数组中某一段数据 语法：数组名.slice(开始索引, 完结索引) 参数：参数1不写示意从数组结尾地位开始，参数2不写示意到数组开端完结，参数写正数示意从 length + 负整数 的地位，区间数据包含开始，不包含完结 返回值：获取区间数据的数组 应用：arr.slice(0,5)将数组内的数据应用符号进行拼接 语法：数组名.join('连贯符号') 参数：当参数为空时，默认应用逗号进行拼接 返回值：数组数据拼接后的字符串内容 应用：arr.join('-')ES 5.0 操作方法 ...

JavaScript 因为是一个脚本语言，须要依赖于浏览器执行，所有JavaScript不能间接拜访电脑的内存空间，所以当浏览器运行时，会占用一段内容空间，并将占用的内存空间调配一部分给JavaScriptJavaScript 内存空间 栈内存：先进栈低堆内存：随机存储JavaScript数据类型的存储形式根本数据类型的存储形式：将数据存入到栈空间简单数据类型的存储形式：将数据存在堆空间，将地址存在栈空间 数据的读取：因为只能间接拜访栈空间，所以根本数据类型能够间接获取，而简单数据类型须要先在栈空间获取数据存储地址，再通过这个地址去拜访堆空间内存储的数据不同数据类型赋值的区别根本数据类型：将一个变量的值赋给另一个变量，赋值实现后，这两个变量操作时互不影响简单数据类型：将一个变量的值赋给另一个变量，其实相当于把地址赋给另一个变量，这样另一个变量也能够拜访这个地址的堆空间，操作时两个变量会相互影响函数的内存空间函数的内存空间一部分存储代码，一部分存储数据，两局部空间互不烦扰 函数名();示意当作一个函数应用，进行函数调用函数名.成员名=值示意一个对象，进行操作对象

理解对象数据类型对象数据类型相当于一个盒子，承载一堆数据，应用形象的办法形容一个事物 一个对象内由多组键值对组成 属性名: 属性值 例如形容一辆车：var car = {name:"Fiat", model:500, color:"white"}; 对象的创立办法字面量创立办法：var 对象变量名 = {属性名: 属性值,···}内置构造函数创立办法：var 变量名 = new Object( );两种对象创立形式区别字面量创立办法可在创立时间接增加数据内置构造函数创立办法须要通过前期的 操作方法 进行增加数据对象操作语法点语法操作： 减少对象成员语法：对象名.成员名=值删除对象成员语法：delete 对象名.成员名=值批改对象成员语法(存在成员进行批改，不存在进行增加)：对象名.成员名=值查找对象成员语法(成员不存在返回undefined)：对象名.成员名数组关联语法操作： 减少对象成员语法：对象名['成员名']=值删除对象成员语法： delete 对象名['成员名']=值批改对象成员语法(存在成员进行批改，不存在进行增加)：对象名['成员名']=值查找对象成员语法(成员不存在返回undefined)：对象名['成员名']留神：[ ] 内如果是一个变量，且变量的值为字符串，最终成员名替换为变量的值，如果不是字符串，则间接报错 两种操作语法的区别点语法操作时，成员名不能进行字符串拼接，不能应用变量数组关联语法操作时，成员名可进行字符串拼接和应用字符串类型的变量对象数据类型控制台输入显示的两种状态在为开展查看时，显示的是代码运行过程中存储数据的状态当开展后查看，显示的是代码运行完后，最终存储数据的状态应用console.table()进行表格局输入，能够查看每个阶段对象变动后存储的数据循环遍历对象for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作） for(var 变量 in 对象名){ 执行代码}对象内有多少个成员执行多少次，变量每次循环是对象中的成员，所以应用 对象名[变量]可获取每个成员的值可应用‘成员名’ in 对象名判断对象中是否存在该成员

理解预解析JavaScript中，在代码执行之前，会在相应的执行环境中事后将一些货色解析到内存中 变量的预解析在代码执行之前，编译器会将var关键字定义的变量进行申明，但不会进行赋值，在代码运行后，执行到改行代码后进行变量赋值函数的预解析赋值式函数的预解析与变量的预解析规定雷同，在代码运行后，执行到改行代码后将变量赋值成一个函数申明式函数会在代码执行之前进行申明并赋值为一个函数预解析中的留神点当函数名与变量名重名时，预解析阶段会以函数优先if语句内的变量和函数无论条件是否成立都会进行预解析return 前面代码尽管不执行，但也会进行预解析函数名与变量名的命名与应用标准变量名尽量以名词命名函数名尽量以实现的性能名命名函数应用时尽量先定义在进行调用，最好应用赋值式函数定义变量作用域全局作用域：每一个页面都是一个全局作用域部分作用域：每一个函数外部就是一个部分作用域 作用域中变量的上下级关系和作用 上下级关系确定函数在哪个作用域下创立，变量取值都会在以后作用域中查找，如果没有查到就会像下级作用域查找，直到查到全局作用域，这个查找的过程叫做作用域链作用域上下级关系——变量定义机制 一个变量定义在哪个作用域外面，就只能在以后作用域和上级作用域内应用，对于下级作用域无奈应用该变量作用域上下级关系——变量定义机制 当须要应用一个变量时，首先在以后作用域查找，如果定义了，则间接应用变量，如果没有定义则去下级作用域查找，如果到 window 也没有该变量则间接报错作用域上下级关系——变量赋值机制 当须要给一个变量赋值时，会首先在以后作用查找，如果定义了，则间接进行赋值，如果没有定义，则去下级作用域查找，如果到 window 也没有该变量，则将该变量定义为一个全局变量后进行赋值作用域中的预解析全局作用域中的预解析：当页面关上时就进行预解析，只解析属于全局的内容部分作用域中的预解析：当函数执行时解析函数外部，只解析属于函数外部的内容留神：函数是独自进行预解析的，当函数执行时，先进行形参赋值，在进行预解析

函数的概念函数就是将一个能实现一个特定性能的一段代码进行封装，当须要应用时，间接调用即可 函数的特点可实现代码复用使代码构造变得简洁，不便前期的保护应用机会明确，须要时就调用函数的定义形式申明式函数function 函数名(形参){ JS代码;}赋值式函数var 变量名 = function(形参){ JS代码;}申明式函数可调用后，在进行函数定义；赋值式函数必须先定义，在调用函数的调用函数名(实参);函数的形参加实参之间数量关系当形参加实参一样多时，实参顺次对形参赋值当形参比实参多时，实参顺次对形参赋值，未赋值的形参未undefined当形参比实参少时，实参顺次对形参赋值，没有形参接管的实参无奈间接进行应用函数中的 argumentsarguments 是函数自带的一个变量，是一个伪数组，外面存储着传过来的所有实参arguments 的 length属性 示意伪数组长度，应用 arguments.length可获取传入实参的个数，也可进行设置伪数组的长度arguments 应用索引进行记录数据，索引从 0 开始，通过arguments[索引]可获取对应索引地位的数据，也可对对应索引地位上的数据进行批改函数的返回值函数应用 return关键字返回数据，外界可进行接管返回的数据函数执行时遇见return时，将跳出函数，函数内return前面的代码也将不再执行语法：return 表达式(返回值)递归函数一个函数在函数外部进行调用本人自身来实现一个性能叫做递归函数递归函数的两个必要条件 完结递归的条件一个递归调用的语句函数递归利用function quickSort(arr) { //递归完结条件 if (arr.length < 1) { return arr; } var midIndex = parseInt(arr.length / 2); //两头元素的下标 var mid = arr.splice(midIndex, 1)[0]; //两头元素的值 var left = []; //放小于mid的数 var right = []; //放大于mid的数 //遍历数组 for (var i = 0; i < arr.length; i++) { if (arr[i] < mid) { // left.push(arr[i]); } else { right.push(arr[i]); } } //将排好序的数组进行合并 return quickSort(left).concat(mid, quickSort(right))}事件处理函数当页面某个元素触发行为时，函数可作为一个事件处理函数// 元素绑定一个滚动事件window.onscroll = function () { var scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) + windowHight; var ulHeight = listBox.offsetHeight + ulOffsetTop; if (curPage === totlePage) return; //最初一页加载完后不在加载 if (scrollTop < ulHeight) return; if (!flag) return; flag = false; //为false时，不执行滚动事件 loading.classList.add('active'); console.log(flag) setTimeout(function () { curPage++; bindHtml(); }, 500)}自执行函数自执行函数就是当它被定义进去，就会主动执行的函数自执行函数个别用于内部 JS文件中，避免JS文件中的变量净化全局，当须要一个全局变量时，可将变量挂载在全局// 语法一：(function (形参){})(实参) //(function (形参){})属于函数定义局部，(实参)示意调用函数// 语法二： ~function (形参){}(实参)//~function (形参){}属于函数定义局部，(实参)示意调用函数// 语法三： !function (形参){}(实参)//!function (形参){}属于函数定义局部，(实参)示意调用函数函数的节流与防抖防抖：在一个工夫节点中，屡次触发同一个事件，然而每次只须要在一个固定工夫内执行一次事件，不须要反复操作的时候须要用到函数的防抖，应用计时器进行计时，触发后在一段时间内触发事件没有成果节流：在固定工夫内会反复触发同一个事件，然而在固定工夫内只须要执行第一次，前面的不须要进行执行，当固定的工夫达到在执行下一次事件，定义一个flag变量记录状态，为true时能够进行触发事件，为false时无奈触发事件

程序构造JS 代码从第一句代码开始往下执行，执行完上一句在执行下一句分支抉择构造JS 代码依据不同的条件进行判断，满足条件执行代码，不满足条件间接跳过单分支抉择语句if(条件表达式){ 执行代码;}双分支抉择语句if(条件表达式){ 执行代码;}else{ 执行代码;}多分支语句if(条件表达式){ 执行代码;}else if(条件表达式){ 执行代码;}else{ //当 if() else if()条件都不满足时，执行else内的代码 执行代码;}switch 多分支语句switch(表达式){ case 常量: 执行语句; break; case 常量: 执行语句; break; default: //当以上都不满足时，执行这外面代码 //berak 示意执行完跳出switch语句，在非凡场景可省略不写 执行语句; break;}if 语句与 switch 语句的选用规定 当判断的条件是一个确定的后果时，应用 switch 语句；当判断的条件不是一个确定的后果时，应用 if 语句循环构造while 循环语句初始化条件;while(条件表达式){ 执行语句; 条件调整语句;}do while 循环语句初始化条件;do{ 执行语句; 条件调整语句;}while(条件表达式);while语句 与 do while语句的区别 do while语句无论条件是否成立，都会执行一遍代码，在进行条件判断while语句会进行条件判断，在执行代码for() { } 语句for(初始化语句; 条件表达式; 调整语句) { 执行语句}for语句绝对于while语句、do while语句 将初始化语句、判断语句、调整语句整合在一起，构造上不便前期保护循环语句中的 break 和 continue当循环中遇到 break 时，则间接终止循环当循环中遇到 continue 时，跳过本循环，执行下一次循环循环语句的长处与注意事项：长处：循环构造能够使代码更简洁，不便前期的保护注意事项：当 判断条件 永远成立时，程序则进入死循环循环的必要条件：①初始化语句 ②条件判断语句 ③执行代码 ④调整语句JS 标记语法here://外层的标记for(var i=0;i<10;i++){ for(var j=0;j<10;j++){ console.log('内层循环'); if(i===5&&j===6){ //跳出到外层的标记 break here; } }}

四则运算符：+ - * / %(取余) **(取幂)不同数据类型的之间无奈间接进行算术运算，须要主动进行类型转换类型转换规定 字符串 + 其余数据类型，不是加法运算，而是变成字符串拼接字符串 与 其余数据类型进行 + 以外的运算，字符串会将本人转为数值类型： 字符串为纯数字时，间接转为数字字符串蕴含字符与数字，转为NaNNaN与任何类型运算都是NaN纯数字字符串转换为数值类型的办法：变量*1、变量-0、变量/1留神点：JavaScript 在计算小数时，会有误差；除数可为0，后果为 Infinity 或 -Infinity赋值运算符：= 复合: += -= *= /= %=将等号左边的值 赋给 等号右边的变量复合符号示意：a+=b 等价于 a = a + b一元运算符：++ --前置：变量先自增(自减)再应用后置：变量先应用再自增(自减)关系运算符：> < >= <= == != === !====、!= 与 ===、!== 之间的区别： ==、!= 只比拟两个变量的值，===、!== 比拟两个变量的数据类型和值比拟规定： 两边都为数值类型时间接进行比拟两边都为字符串类型时对一一字符ASCII码值进行比拟其中一个为数值，另一个转为数值后比拟==与!=的比拟规定： 其中一个为布尔值，将其转为数值后比拟其中一个为字符串，将其转为数值后比拟其中一个为NaN，==返回false，!=返回true，NaN与NaN也不相等逻辑运算符：&& || !与运算(&&)：全为true时，后果为true，遇到为false时，前面的不执行或运算(||)：全为false时，后果为false，遇到true，前面的不执行非运算(!)：将数据取反 空字符取反：true非空字符取反：false0 取反：true非0 取反：falseNaN取反：trueundefined取反：true三目运算符：表达式1 ? 表达式2 : 表达式3表达式1成立，执行表达式2；表达式1不成立，执行表达式3开展、合并运算符：...函数实参地位或数组或对象里应用时作为开展运算符函数形参地位应用时作为开展运算符

变量的数据类型根本数据类型：数值类型：Number 十六进制、十进制、八进制、二进制、迷信计数布尔值类型：Boolean true（真）false（假）字符串类型：String由引号（双引号、单引号、反引号）包裹的内容非凡类型：空值：null未定义：undefined非数值：NaN简单数据类型：对象类型：Object函数类型：Function数组类型：Array· · ·JavaScript 是一门弱援用语言，在赋值时确定为某个数据类型后，倡议不再批改数据类型，免得引发歧义可应用 typeo 关键字查看常量或变量的数据类型（返回值是一个字符串类型，多层 typeo 嵌套最终得都是 sting类型数据类型转换转换为布尔值类型：Boolean() 真：true 假：false 数值：非零即真字符串：非空即真NaN：falseundefined：falsenull：false转换为数值类型：Number() 字符串中纯数字转为数值类型，蕴含其余字符都会转为NaNNaN：NaNundefined：NaNnull：0true：1false：0取整数局部：parseInt() 从右往左开始一位一位取，遇到非数字进行取整，第一个为非数字输入 NaN取浮点数：parseFloat()

理解JavascriptJavascript是一个面向对象的跨平台脚本语言 对象：基于对象的脚本语言，它不仅能够创建对象，也能应用现有的对象跨平台：可在各种环境下运行脚本语言：JS程序必须嵌入到HTML文件中能力执行Javascript 组成ECMAScript（ES）：JS的语法规范DOM（文档对象模型）：应用JS操作HTML构造BOM（浏览器对象模型）：应用JS操作浏览器Javascript 引入形式行内JS代码// a标签书写JS代码<a href="javascript:书写JS代码">// 非a标签书写JS代码<div nclick="javascript:书写JS代码> </div>"外部JS代码<script type="text/javascript"> //JS代码</script>内部JS代码（引入内部JS文件后，标签内书写的JS代码有效）<script type="text/javascript" src="JS文件门路">Javascript 中三种输入形式在页面中弹出一个提示框：alert('输入内容')在浏览器页面输入内容：document.write('输入内容') 当内容中有标签时，主动解析，不想解析标签可应用尖括号的转义字符在控制台输入内容：console.log('输入内容')JavaScript 正文办法单行正文：//正文内容多行正文：/*正文内容*/ JavaScript 中的常量与变量常量（个别应用全大写字母）：程序中一旦申明后，在运行过程中不容许被批改的数据 定义常量语法：const 常量名=值变量：程序中申明后，在运行过程中容许被批改的数据 变量申明：var 变量名=值;如果变量申明未给初始值，则默认为 undefined如果变量初值为 null ，示意空值占位变量命名标准不能应用关键字和保留字只能应用字母、数字、下划线和 $符号不能以数字结尾语义化命名多个单词的变量名采纳“驼峰式命名法”或“下划线命名法”变量名称辨别大小写字母代码标准运算符前后加一个空格；，前面加一个空格代码要缩进

Bootstrap响应式布局框架特色疾速实现响应式布局基于Flex的栅格化布局零碎（将一行分为12个单元格）领有丰盛的组件和工具办法常见交互的办法应用引入文件后，元素增加class名即可Bootstrap 六个响应式断点断点类中断响应尺寸extra-small无或auto<576pxsmallsm576px≤X<768pxmediummd768px≤X<992pxlargelg992px≤X<1200pxextra largexl1200px≤X<1400pxextra extra largexxl1400px≤X通栏+版心响应式布局类名通栏：.container-fluid版心：.container指定响应式节点.container-类中断栅格化零碎响应式布局类名用于父元素（开启栅格化零碎）：.row用于父元素设置列宽度：.row-cols-数值用于父元素指定响应式节点时设置列宽度：.row-cols-类中断-数值用于子元素：.col用于子元素占用多少列：.col-数值用于子元素指定响应式断点占用多少列：.col-类中断-数值设置对齐形式垂直对齐 整体对齐：.align-items-对齐形式指定断点整体对齐：.align-items-类中断-对齐形式个体对齐：.align-self-对齐形式指定断点个体对齐：.align-self-类中断-对齐形式 开始地位对齐：start两头地位对齐：center完结地位对齐：end基线对齐：baseline拉伸对齐：stretch程度对齐 整体对齐：.justify-content-对齐形式指定断点整体对齐：.justify-content-类中断-对齐形式 开始地位对齐：start两头地位对齐：center完结地位对齐：end两端对齐元素之间空白均分：between两端对齐元素两侧空白相等：around两端对齐元素空白均分：evenly设置显示程序全副：.order-数值 指定断点：.order-类中断-数值 ==margin与padding的设置==周围外间距：m-数值周围内间距：p-数值独自设置：m方向-数值 p方向-数值 左右：x高低：y上：t下：b左：s右：e指定响应式断点间距设置：.m(p)方向-类中断-数值背景、边框背景：.bg-色彩名周围边框：.border指定方向边框：.border-方向边框色彩：.border-色彩名勾销边框：.border-（方向）-0边宽粗细：.border-数值 上：top下：bottom左：start右：end浮动款式左浮动：float-start右浮动：float-end无浮动：float-none指定响应式断点浮动：float-类中名-方向革除浮动：clearfix

自定义款式变量 定义：--变量名 应用：款式名：var(--变量名) 计算：款式名：cacl(var(--变量名)*1px) 默认值：款式名：var(--变量名, 默认值) 作用域：优先级最高的申明失效 文字盘绕（shapes） 设置文字盘绕形态：shapes-outside 裁剪盘绕形态：clip-path 设置文字与形态间距：shapes-margin 自定义形态：polygon() 文本盘绕偏移量：inset() 圆形：circle() 椭圆：ellipse() 边框盘绕：border-box 内边距盘绕：padding-box 内容区域盘绕：content-box 外间距：margin-box 图像形态：url() 滚动捕获（scroll snap） 指定捕获对象：scroll-snap-type 疏忽捕获点：none强制捕获：mandatory主动调整：proximity捕获吸附：scroll-snap-align 起始地位：start两头地位：center完结地位：end

理解postcsspostcss 一种对css编译的工具，可实现一些工程化操作环境配置 装置node环境下载postcss模块：npm install post-cli -g配置postcss配置文件 module.exports={ plugins:{ 'autoprefixer':{ browsers:'>5%' } } }转换文件：postcss 源文件 -o 生成文件 -w罕用的postcss插件Autoprefixer前缀补全，全自动的，无需多说装置：npm install Autoprefixer --devpostcss-cssnext应用下个版本的css语法装置：npm install postcss-cssnext --devpostcss-pxtorem把px转换成rem装置：npm install postcss-pxtorem --dev[==留神==]px检测辨别大小写，也就是说Px/PX/pX不会被转换，能够用这个形式防止转换成rem

理解 Less 与 SassLess 与 Sass 都是css的拓展语言less 和 sass 最次要的区别是less是通过Javascript编译，而sass是通过ruby编译的如果没有引入前端工程化，less会耗费客户端性能，sass会耗费服务端性能引入前端工程化的话，gunt，gulp，webpack等，less和sass在打包阶段都会转化成css，所以不会有区别，只是sass是基于ruby，所以每次npm的时候绝对慢一点点Less 与 Sass 之间的区别 LessSass变量定义@变量名：值$变量名：值变量应用属性：@变量名属性：$变量名插值应用@变量名：属性名@{变量名}：属性值选择器@{变量名}{}$变量名：属性名#变量名：属性值选择器#{变量名}{}作用域就近准则应用可先应用，后定义就近准则必须先定义后应用嵌套应用后辈选择器(两个都反对)：选择器1{    选择器2{        选择器3{}    }}伪类选择器(两个都反对)：选择器1{    选择器2{        选择器3&:hover{}    }}款式嵌套（Sass反对）：font:{size:16px;         weight：500}运算符+ - * /Sass ‘/’ 默认为分隔符本义转为分隔符：~”20px/1.5“转为除号：(20px/1.5)函数四舍五入：round百分比：percentage随机数（Less不反对）：randm自定义函数(两个都反对)@function 函数名(参数){    @return 返回值} 混入定义：.hide(@参数)应用：.hide(参数)定义：mixin show(参数){}应用：选择器(@inculude show;)命名空间定义：#name(参数){}应用:#nm.show;Sass不反对继承被继承：选择器{}应用继承：&extend(选择器)被继承：%选择器{}应用继承：@extend(%选择器)合并逗号合并：款式名+：值空格合并：款式名+_：值须要合并内容&dollar;款式名{a:\_\_,b:__}逗号合并：map-value(&dollar;款式名)空格合并：zip(map-value($款式名)...)媒体查问与CSS文件写法雷同 条件when关键字@if @else @else if循环递归思维@for()引入文件(两个都反对)@import: '文件门路'

理解响应式布局响应式布局是利用媒体查问（media queries）针对不同的媒体类型进行不同的布局，从而实现响应式布局 响应式布局常见媒体类型媒体类型作用all所有设施print打印机和打印预览screen电脑屏幕、平板电脑、智能手机等speech阅读器等发声设施响应式布局罕用选项和、不执行：and、not最小、最大宽度：min-width、max-width竖屏：orientation: portrait横屏：orientation: landscape应用link标签引入内部响应式布局CSS文件，media管制执行范畴响应式布局实列 .container,.container-fluid,.container-xxl,.container-xl,.container-lg,.container-md,.container-sm { width: 100%; padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto;}@media (min-width: 576px) { .container-sm, .container { max-width: 540px; }}@media (min-width: 768px) { .container-md, .container-sm, .container { max-width: 720px; }}@media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 960px; }}@media (min-width: 1200px) { .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; }}@media (min-width: 1400px) { .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1320px; }}

理解viewport视口挪动端viewport视口就是浏览器显示页面内容的屏幕区域viewport视口包含布局视口（layout viewport）、视觉视口（visual viewport）、现实视口（ideal viewport）布局视口（layout viewport）：布局视口与挪动端浏览器屏幕宽度独立开，CSS布局依据布局视口进行计算视口大小，并被它束缚；挪动端布局视口默认宽度为980px，在挪动端看PC端网页时内容很小，须要进行手动缩放查看视觉视口（visual viewport）：视觉视口指用户看到的区域，用户可对视口进行缩放操作，且不影响布局视口现实视口（ideal viewport）：布局视口默认值并不是一个现实宽度，所有浏览器厂商引入了现实视口概念，对于设施领有一个最现实的布局视口宽度，无需用户手动缩放操作网页查看，利用<meta name="viewpost" content="width=device-width">可设置布局视口宽度与现实视口宽度统一设置视口<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">content内属性值： 视口宽度：width="正整数或device-width”视口高度：height=“正整数或device-height“初始缩放值：initial-scale=1.0最小缩放值：minimum-scale=1.0最大缩放值：maximum-scale=1.0用户缩放操作权限：user-scalable=no挪动端适配计划百分比（流式）布局： 将盒模型宽度设置为百分比，使盒模型宽度进行主动适应屏幕宽度，不受像素单位的束缚，内容向两侧填充长处：大屏显示内容更多毛病：宽屏下比例失调rem布局：em单位和rem单位是绝对单位，1em是绝对于以后元素或父元素的font-size值，而1rem是绝对于根元素（html元素）的font-size值设置根元素的动静的font-size值 应用JS配合实现<script>//获取浏览器以后视口宽度var fontsize=document.documentElement.clientWidth *100 / 375;//给 html 增加 font-sizedocument.documentElement.style.fontSize=fontsize+'px';</script>计算VW单位实现适配// iPhone 6 为例进行计算：100 px / 375px * 100html { font-size: 26.67vw;}body { /*设置回默认16px字体大小 font-size: 0.16rem;}

开启Grid 网格布局块级元素开启：display:grid行内元素开启：display:inline-grid容器设置网格布局后，外面顶层子元素成为容器成员，但子元素外部元素不属于容器成员，并且float、clear、vertical-aligin 、display:inline-block / table-cell 款式都会生效容器程度区域称为行，垂直区域称为列，行与列穿插造成的区域称为单元格，划分网格的线叫网格线作用与容器上的款式单位：像素(px)、百分比(px)、网格比例调配（fr）划分网格的行：grid-template-rows划分网格的列：grid-template-columns 反复值简化写法：repeat( 反复次数,单元格大小) 自适应划分个数：auto-fill单元格范畴值：minmax(最小，最大)单元格自适应宽度：autogrid-template-rows: repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(auto-fill,minmax(20px,auto));grid-template-columns: repeat(auto-fill,minmax(20px,auto));定义划分的网格区域名称 语法：grid-template-ares 区域名字与 grid-ares 绝对应grid-template-rows、grid-template-columns、grid-template-ares 复合语法：grid-template:'区域名称' 行/列// 书写形式一：grid-template: [header-left] "head head" 30px [header-right] [main-left] "nav main" 1fr [main-right] [footer-left] "nav foot" 30px [footer-right] / 100px 1fr;/ [header-left] 示意阐明区域作用// 书写形式二：grid-template: "a b c" 30px "e f g" 30px "h i j" 30px / auto;设置单元格行间距：grid-column-gap设置单元格列间距：grid-row-gapgrid-column-gap: 10px;grid-row-gap: 10px;grid-column-gap、grid-row-gap复合语法：grid-gap: 行间距 列间距设置单元格内容程度对齐形式：justify-items设置单元格内容垂直对齐形式：align-items 单元格起始地位对齐：start单元格两头地位对齐：center单元格完结地位对齐：end内容拉伸占满整个单元格：stretchjustify-items、align-items复合语法：place-items:垂直对齐 程度对齐设置整体网格程度对齐：justify-content设置整体网格垂直对齐: align-content 绝对于容器起始地位对齐：start绝对于容器两头地位对齐：center绝对于单元格完结地位对齐：end单元格拉伸占满整个容器：stretch单元格两侧空白区域相等散布在容器内：space-between单元格与单元格均分空白区域散布在容器内：space-evenlyjustify-content、 align-content复合语法：place-content: 垂直对齐 程度对齐作用在子元素上的款式子元素程度方向占据单元格起始地位：grid-column-start子元素程度方向占据单元格完结地位：grid-column-end子元素垂直方向占据单元格起始地位：grid-row-start子元素垂直方向占据单元格完结地位：grid-row-endgrid-column-start:第几条网格线;grid-column-end:第几条网格线;grid-row-start:第几条网格线;grid-row-end:第几条网格线;grid-column-start:span 2;grid-row-start:span 2;复合写法：grid-column:起始线 / 完结线;grid-row:起始线 / 完结线设置单元格内容程度地位：justify-self设置单元格内容垂直地位：align-self ...

开启弹性盒子模型语法：dispaly:flex容器默认以程度轴为主轴，子元素从左往右排列，纵向轴为侧轴 开启弹性盒子模型后对子元素的影响 所有子元素默认依照主轴从左往右排列所有子元素在主轴上没有长度（主轴为程度方向时，没有宽度；主轴为垂直方向时，没有高度）所有子元素默认在侧轴上填满长度（侧轴为程度方向时，子元素宽度填满侧轴；侧轴为垂方向时，子元素高度填满侧轴）所有子元素在主轴上从主轴开始地位向完结地位重叠所有子元素在侧轴上从侧轴开始地位开始重叠所有子元素默认永不换行，增加元素主动进行平均挤压，直到子元素内容无奈持续挤压，间接溢出盒子设置为弹性盒模型后，所有子元素都将主动成为容器成员，并且float、clear、vertical-aligin 款式都会生效弹性盒子模型作用域父元素上的款式设置主轴和子元素排列方向：flex-direction 以程度轴为主轴，从左往右排列：row以程度轴为主轴，从右往左排列：row-reverse以纵向轴为主轴，从上往下排列：column以纵向轴为主轴，从左往右排列：row-reverse设置主轴方向子元素的排列形式（不扭转元素程序)：justity-content 主轴起始地位对齐：flex-start主轴两头地位对齐：center主轴完结地位对齐：flex-end所有空白填充在两个元素两头（左右两个元素顶格）：space-between所有空白盘绕每个子元素两侧填充：space-around空白均分填充在子元素之间（IOS反对，安卓不反对）：space-evenly子元素在侧轴上的排列形式（没有换行的时候只有一行显示）：align-items 侧轴起始地位排列：flex-start侧轴两头地位排列：center侧轴完结地位排列：flex-end设置是否换行：flex-wrap 不换行：nowrap换行：wrap逆置换行：wrap-reverseflex-direction与flex-wrap复合语法：flex-flow: 排列方向 换行形式设置侧轴的排列形式（设置时须要开启换行，在多行时，每一行都是一个 整体，以一行为一个单位进行设置）：align-content 子元素在侧轴起始地位对齐：flex-start子元素在侧轴两头地位对齐：center子元素在侧轴完结地位对齐：flex-end所有空白填充在两个元素两头（高低两个元素顶格）：space-between所有空白盘绕每个子元素两侧填充：space-around空白均分填充在子元素之间（IOS反对，安卓不反对）：space-evenly作用在子元素上的款式指定子元素对齐形式：align-self 继承父元素的align-items的对齐形式：auto侧轴起始地位对齐：flex-start侧轴两头地位对齐：center侧轴完结地位对齐：flex-end设置弹性宽度（以后元素占据除固定宽的元素后残余局部的比例）：flex 设置后内容会被挤压优先挤压设置弹性宽度的元素弹性宽度元素宽度挤压到极限在挤压固定宽度的宽直到所有不能被挤压，间接溢出子元素排列程序（数字越小，排在越后面）：order子元素的放大比例（默认为0）：flex-grow子元素的放大比例（默认为1）：flex-shrink调配空余空间之前子元素的默认大小：flex-basisflex-grow、flex-shrink、flex-basis复合写法语法(默认值)：flex:0 1l, auto值间接写auto示意flex:1 1 auto值间接写none示意flex:0 0 auto

理解什么是款式兼容CSS3未公布正式规范版本，对于一些款式浏览器厂商有本人的渲染规定，所以须要进行兼容解决 浏览器前缀兼容形式通过对款式名或款式值增加浏览器前缀达到不同浏览器的兼容 浏览器内核前缀IETrident-ms-FirefoxGecko-moz-OperaPresto / Blink-o-ChromeWebkit / Blink-Webkit-SafariWebkit-Webkit-CSS HackCSS Hack用于解决浏览器兼容问题，为不同的浏览器定制编写不同的款式，使所有浏览器的显示款式达到预期的成果 款式增加前缀标识符办法前缀标识兼容浏览器_IE6+ 、 *IE6、IE7\9IE6、IE7、IE8、IE9\0IE8、IE9、IE10、IE11选择器增加前缀计划前缀标识兼容浏览器*htmlIE6*+htmlIE7:rootIE9以上及规范浏览器IE条件正文计划 IE 10 以上浏览器不反对条件正文计划前缀标识兼容浏览器<!--[if IE]> CSS代码 <![endif]--\>IE<!--[if IE7]> CSS代码 <![endif]--\>IE7<!--[if lte IE]> CSS代码 <![endif]--\>IE7以下<!--[if !IE]> CSS代码 <![endif]--\>非IEIE低版本常见BUG 透明度问题：IE8以下版本呈现解决：增加 filter:alpha(opacity=50);范畴为0-100双边距问题：IE6版本（IE6 最小高度19px）解决：增加_overflow:hidden图片边框问题：IE 版本解决：增加：border:none开发中罕用兼容适配办法 渐进加强先对低版本浏览器进行页面的构建，保障最根本的性能，而后针对高级版本浏览器进行成果、交互进行改良，追加更多功能来晋升用户体验优雅降级：先进行残缺性能的构建，在针对低版本浏览器做兼容解决

创立自定义字体图标@font-face可定义图标字体，将图标字体嵌入到网页中，并且可应用文本所i有款式应用语法：@font-face { font-family: 自定义图标字体名; src: url(‘图标地址’);}div{ font-family: 自定图标字体名;}/*应用图标字体*/p::after,p::before{content: 图标字体名;}字体图标库的应用下载字体图标文件 阿里字体图标库：https://www.iconfont.cn/ 自定义字体图标：https://icomoon.io/app/#/select// 单色字体图标<link rel="stylesheet" href="字体图标文件"><标签名 class="icon 图标名"></标签名>// 黑白字体图标<script src="字体图标js文件"><script>增加 .icon{} 款式应用字体图标<svg class="icon" aria-hidden="true"><use xlink:href="#图标名"></use></svg>文字暗影成果语法：text-shadow:X Y blur color X，Y：文字暗影偏移量blur：暗影含糊color：暗影色彩 多组暗影时，每组应用逗号分隔text-shadow: 2px 2px 10px #ff0000, 3px 3px 10px #aa0000, 4px 5px 10px #c75656;盒子暗影成果语法：box-shadow:X Y blur color sparead inset X，Y：盒子暗影X、Y轴偏移量blur：暗影含糊color：暗影色彩sparead：暗影范畴大小inset：设置为内暗影 多组暗影时，应用逗号宰割 box-shadow: 2px 2px 10px #ff0000 inset, 3px 3px 10px #aa0000 ;盒子倒影成果语法：box-reflect 上倒影：above下倒影：below左倒影：left右倒影：right突变倒影成果-webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(rgba(3,3,3,.2)));容器含糊成果语法：filter: blur(1px); CSS的四则运算语法：width:calc(100%-10px); 分栏布局一行分多少栏：column-count每栏的宽度：column-width 分栏个数与栏宽度写其中一个即可栏与栏之间的间距：column-gap栏的边线：column-rule合并栏：column-span

过渡款式设置须要进行过渡的CSS款式：transition-property:款式名设置实现过渡的工夫(单位为秒或毫秒)：transition-duration:10ms设置过渡提早执行工夫(单位为秒或毫秒)：transition-delay:10ms设置过渡动画静止曲线：transition-timing-function:曲线名 直线线性动画：linear缓速曲线动画：ease减速曲线动画：ease-in加速曲线动画：ease-out先减速后加速曲线动画：ease-in-out贝塞尔曲线动画：cubic-bezier适度款式的复合语法：transition:过渡属性 过渡时长 提早执行工夫 过渡动画元素变形款式设置元素位移复合语法：transform:translate(x轴位移量,y轴位移量) 设置x轴位移量：transform:translateX(位移量)设置y轴位移量：transform:translateY(位移量)设置z轴位移量：transform:translateZ(位移量)设置元素缩放复合语法：transform:scale(x轴缩放比,y轴缩放比) 默认缩放比为1，小于1进行放大，大于1进行放大设置x轴缩放量：transform:scaleX(缩放比)设置y轴缩放量：transform:scaleY(缩放比)设置z轴缩放量：transform:scaleZ(缩放比)设置元素斜切复合语法：transform:skew(x轴斜切角度,y轴斜切角度) 设置x轴斜切量：transform:skewX(斜切角度)设置y轴斜切量：transform:skewY(斜切角度)设置元素旋转复合语法：transform:rotate(z轴旋转角度) 设置x轴旋转角度：transform:rotateX(旋转角度)设置y轴旋转角度：transform:rotateY(旋转角度)设置z轴旋转角度：transform:rotateZ(旋转角度)设置元素变形基点复合语法：transform-origin:X轴基点 Y轴基点 Z轴基点设置x轴基点：transform-origin-x:X轴基点设置y轴基点：transform-origin-y:Y轴基点设置z轴基点：transform-origin-z:Z轴基点基点可选值： 左：left右：right上：top下：bottomZ轴只能给数值设置3D变形成果设置给父元素 设置3D空间景深(值越大，幅度越小)：perspective:200px;设置3D空间景深基点地位：perspective-origin:left 从左侧观看：left从右侧观看：right从上侧观看：top从下侧观看：bottom设置给进行3D变形的元素 开启3D空间：transform-style:preserve-3d设置反面显示方式：backface-visibility:hidden 不暗藏反面显示：visible暗藏反面显示：hidden具备3D变形的transform款式值 以x轴高低翻转成果：rotateX(旋转角度)以y轴左右翻转成果：rotateY(旋转角度)以z轴前后位移成果：translateZ(位移量)元素厚度成果：scaleZ(缩放比)3D语法： scale3d(X轴缩放比,Y轴缩放比,Z轴缩放比)translate3d(X轴位移量,Y轴位移量,Z轴位移量)rotate3d(1[X],1[Y],1[Z],旋转角度)——1示意增加，0示意不增加CSS3动画 设置动画名：animation-name:动画名 动画关键字：@keyframes 动画名{动画代码}设置动画时长(单位为毫秒或秒)：animation-duration:10ms——设置提早执行时长(单位为毫秒或秒)：animation-delay:10ms——毫秒或秒设置动画反复次数：animation-iteration-count: infinite;默认执行1次，infinite示意有限次执行设置动画静止曲线：animation-timing-function 直线线性动画：linear缓速曲线动画：ease减速曲线动画：ease-in加速曲线动画：ease-out先减速后加速曲线动画：ease-in-out贝塞尔曲线动画：cubic-bezier设置动画补白形式：animation-fill-mode 不扭转默认行为：none当有延时时，并且第一帧与初始地位不一样，会在延时工夫内达到第一帧地位期待：backwards静止完结后停留在最初一帧：forwardsbackwards 和 forwards 两种个性都具备：both设置动画轮流播放形式：animation-direction 动画失常播放：normal动画正反轮流播放：alternate动画反向播放：reverse动画反正轮流播放：alternate-reverse动画款式复合语法：animation:动画名 静止时长 静止曲线 静止延时 静止次数 轮流播放动画 动画补白CSS3动画库： 开源社区下载：https://daneden.github.io/ani...官网下载：https://animate.style/ 应用形式：下载animate.css后引入文件，给须要增加动画的标签增加 class="animated 动画名 循环次数"动画案例 .wobble { -webkit-animation-name: wobble; animation-name: wobble;}@-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); }}

理解BFC标准BFC即Block Formatting Contexts(块级格式化上下文)。具备BFC个性的元素能够看作是隔离了的独立容器，容器外面的元素不会在布局上影响到里面的元素，并且BFC具备一般元素所没有的一些个性。 触发BFC标准的条件设置浮动款式的元素：除float:none以外设置相对定位的元素：position（absolute、fixed）设置元素类型转换的元素：display（inline-block、table-cells、flex）设置元素内容溢出显示的元素：overflow（hidden、auto、scroll）BFC标准的利用解决margin高度塌陷问题解决margin-top传递问题解决浮动问题解决笼罩问题

设置表格款式设置表格边框与边框之间的间距：border-spacing: 数值;合并单元格边框：border-collapse: collapse;暗藏空单元格：empty-cells: hide;表格单元格布局设置：table-layout: fixed;内容垂直对齐形式：vertical-align 顶部对齐——text-top居中对齐——middle底部对齐——text-bottom上标对齐——super下标对齐——sub设置单元格的显示与暗藏语法：visibility:hidden 暗藏：hidden显示：visible设置表格题目的地位语法：caption-side:top 表格顶部显示——top表格底部显示——bottomCSS雪碧图雪碧图是将网页中一些小的图形拼合造成的一张大图，可缩小图片品质，晋升网页加载速度应用时以背景图模式导入图片，应用背景图定位，将要显示的小图片显示在页面中

绝对定位position:relative 在没有设置偏移量时，对元素自身没有影响设置绝对定位后，元素不会脱离文档流，并且不会影响其余元素布局，但仍旧占位相对定位position:absolute 设置相对定位后，元素会脱离文档流设置相对定位后，行内元素反对块元素个性，块元素反对行内元素个性设置相对定位后，元素参照最近设置绝对定位的父级元素进行偏移定位，如果所有父级元素没有进行设置绝对定位，则依照整个文档窗口进行定位固定定位position:fixed 始终以浏览器可视窗口进行定位，不会受到窗口滚动和父级元素定位的影响设置固定定位后，元素脱离文档流设置固定定位后，行内元素反对块元素个性，块元素反对行内元素个性黏性定位position:sticky 没有达到指定偏移地位无定位成果，当达到指定偏移地位后元素固定在那个地位不动设置定位元素偏移量向左偏移语法：`left:10px`向右偏移语法：`right:10px`向上偏移语法：`top:10px`向下偏移语法：`bottom:10px`设置定位元素显示层级关系z-index:数值 设置定位元素的层叠程序，值越大，层级就越高，显示在下层父元素的层级会影响子元素的层级关系值为auto时，不参加层级关系比拟

设置透明度计划一： opacity:0.5; 属性值取值范畴为 0~1，0示意全透明，1示意不通明计划二： rgba(255,255,255,0.5) a取值范畴为 0~1，0示意全透明，1示意不通明两种计划的区别：opacity为整体进行通明，rgba为指定局部进行通明 设置鼠标手势cursor:pointer; 1. 默认手势：default 2.十字线手势：crosshai 3. 超链接手势：pointer 4. 挪动手势：move 5. 繁忙手势：wait 6. 帮忙手势：help 7. 自定义手势：以 .cur或 .ico文件设置最大最小宽度最大宽度：max-width:最大高度：max-height:最小宽度：min-width:最小高度：min-height:特点：容器自适应内容宽高

理解空白空间的解决while-space:nowrap; 1. 文本不换行并保留回车和空格：pre 2. 文本换行并保留回车和空格：pre-wrap 3. 文本换行并只保留回车：pre-line 4. 文本不换行但不保留回车和空格：nowrap理解溢出内容局部解决overflow:hidden 1. 溢出不暗藏：visible 2. 溢出暗藏：hidden 3. 显示滚动条：scroll 4. 主动显示滚动条：auto设置单行文本溢出省略号显示div{ width:100px; // 增加宽度 while-space:nowrap; // 设置内容单行显示 overflow:hidden; // 设置溢出内容暗藏 text-overflow:ellipsis; // 增加省略号}设置多行文本溢出省略号显示div{ width: 100px; // 增加宽度 display: -webkit-box; // 对象作为弹性伸缩盒子模型显示 -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列形式 -webkit-line-clamp: 3; // 限度显示行数 overflow: hidden; // 设置溢出内容暗藏}留神：须要对不同浏览器进行兼容解决

理解浮动款式的作用盒子默认是从上往下进行排列，当咱们须要将盒子进行从左往右进行排列时，须要应用浮动款式，扭转盒子的排列形式 理解浮动款式的特点设置浮动后，盒子将脱离文档流，不占据地位设置浮动后，前面没有设置浮动的盒子占据它的地位，外面文字内容不会被遮住多个盒子设置浮动，会横向排列，如果总宽度大于窗口宽度，前面放不下的元素将被挤到下一行显示设置浮动的元素最好包在一个大盒子里设置浮动语法float:none 1. 左浮动——left 2. 右浮动——right 3. 不浮动——none革除浮动当元素设置浮动后，会脱离文档流，影响其余元素，为了不影响其余元素，须要革除浮动带来的影响原理：设置革除浮动后，浏览器主动给元素增加一个外边框，使其不受影响clear::after,clear::before{ clear: both;} 1. 革除左侧浮动元素对元素的影响——left 2. 革除右侧浮动元素对元素的影响——right 3. 革除浮动元素对元素的影响最大的一侧——both

理解盒模型根本组成外间距：margin内间距：padding边框：border内容区域：content 元素大小蕴含了边框背景色填充只到边框（包含边框）文字在content区域增加理解内间距用于调整子元素与父元素之间空隙大小padding设置时，会撑大盒子宽高，设置盒子宽高时须要减去padding的值，或者设置box-sizing为border-boxpadding不反对正数，也不反对auto当盒子不设置宽高时，由内容撑开时，不须要减去padding的值padding的设置，不影响背景图设置内间距繁多方向设置：上内间距：padding-top:数值下内间距：padding-bottom:数值左内间距：padding-left:数值右内间距：padding-right:数值复合写法：示意周围都设置：padding：10px 示意高低、左右设置：padding：10px 20px示意上、左右、下设置：padding：10px 20px 30px示意上、右、下、左设置：padding：10px 20px 30px 40px理解外间距用于调整元素与元素之间的间距margin不影响盒子大小margin反对正数和automargin:0 auto 时，示意盒子程度居中设置外间距繁多方向设置：上外间距：margin-top:数值下外间距：margin-bottom:数值左外间距：margin-left:数值右外间距：margin-right:数值复合写法：示意周围都设置：margin：10px 示意高低、左右设置：margin：10px 20px示意上、左右、下设置：margin：10px 20px 30px示意上、右、下、左设置：margin：10px 20px 30px 40px盒模型尺寸计算形式box-sizing:content-box 1. 默认计算形式，盒子尺寸不包含边框、内间距、内容：content-box 2. 内减计算形式，盒子尺寸包含边框、内间距、内容：border-box 3. 继承父元素盒尺寸计算方法：inheritmargin存在问题与解决margin-top传递问题： 当父元素内的子元素设置margin-top时，这个间距将传递给父元素解决：给父元素增加overflow:hidden给父元素增加一个通明边框两个元素之间高度塌陷问题： 当下面元素设置margin-bottom，并且上面元素设置margin-top时，浏览器解析时，他们之间的间距取外间距最大的值解决： 给上面元素增加一个父元素，并给父元素增加overflow：hidden 只给一个元素设置margin值

设置列表润饰符号list-style-type:none 1. 无序列表 实心方块：square 空心圆：sircle 实心圆：disc 2. 有序列表 数字：decimal 小写罗马数字：lower-roman 大写罗马数字：upper-roman 小写字母：lower-alpha 大写字母：upper-alpha设置图片列表符号list-style-image:url('图片地址')设置列表符号的地位list-style-position:inside 1. 符号在内容之外：outside 2. 符号在内容内：insidelist-style 款式复合写法，款式值书写程序任意

设置文本字体大小font-size:16px;设置文本色彩color:#343434款式值： 1. 色彩单词名：red 2. 16进制色彩值：#343434 3. rgba色彩值：rgba(255,255,255,1) ——a示意透明度设置字体类型font-family:'Times New Roman', Times, serif; 1. 设置多个字体时，应用逗号宰割，后面写英文字体，前面写中文字体 2. 字体名有多个单词组成时，应用引号包裹设置文本加粗成果font-weight:normal; 1. 更粗的：bolder 2. 加粗的：bold 3. 惯例的：normal 4. 数值：100-900(600以上显示加粗成果)设置文本斜体成果font-style:normal; 1. 针对具备歪斜属性字体：italic 2. 针对所有字体：oblique 3. 失常字体：normal设置文本行高line-height:16px; 1. 行高指两行文字基线到基线之间垂直距离 2. 革除行高可设置为 1 或与字体大小一样 3. 行高<容器高度时，文本在容器靠上地位 4. 行高=容器高度时，文本在容器居中地位 5. 行高>容器高度时，文本在容器靠下地位font 款式的复合语法font:size/line-height family style weight color;设置文本程度对齐形式text-align:方向1. 靠右对齐：right2. 靠左对齐：left3. 居中对齐：center4. 两端对齐：justify设置文本垂直对齐形式vertical-align:方向1. 顶部对齐：top2. 底部对齐：bottom3. 居中对齐：middle4. 基线对齐：baseline设置文本润饰线text-decoration:none1. 革除润饰：none2. 增加下划线润饰：underline3. 增加上划线润饰：overline4. 增加删除线润饰：line-through设置文本缩进text-indent=2em;1. em单位是绝对单位，1em = 1个字体大小2. 取正值时示意向内缩进3. 取负值时示意向外缩进设置文本缩进text-indent=2em;1. em单位是绝对单位，1em = 1个字体大小2. 取正值时示意向内缩进3. 取负值时示意向外缩进设置字间距与词间距字间距word-spacing=10px;词间距letter-spancing=10px;设置单词大小写text-transform:capitalize 1. 设置为首字母大写：capitalize 2. 设置为全副大写：uppercase 3. 设置为全副小写：lowercase折行款式不强制折行word-wrap:break-word强制折行word-break:break-all设置英文文本为小型大写字体font-variant:small-caps 1. 惯例的——normal 2. 小型大写字体——small-caps

按类型划分块元素(block)个性 独占一行(由上向下排列)反对所有款式不写宽高时继承于父元素所占区域是一个矩形行内元素(inline)个性 从左往右排列局部款式不反对不写宽由内容决定，不能设置高度所占区域不肯定时矩形元素之间空隙是由换行造成的行内块元素(inline-block)同时具备块元素和行内元素的个性按显示方式划分替换元素：浏览器依据元素标签的和属性决定显示的内容非替换元素：浏览器间接显示的内容按内容划分 元素嵌套规定块元素能够嵌套行内元素块元素不肯定能嵌套块元素行内元素肯定不能嵌套块元素元素的类型转换转换为块元素display:block转换为行内元素display:inline转换为行内块元素display:inline-block

根本选择器标签选择器应用HTML标签增加款式 标签名{ 款式名:款式值;}<div></div>div{ width: 100px; height: 100px;}id选择器给HTML标签增加一个id属性id属性的特点：每人id名在一个页面中只容许呈现一次，这叫做id的唯一性 #id名{ 款式名:款式值;}<div id="box"></div>#box{ width: 100px; height: 100px;}class选择器给HTML标签增加一个class属性一个class名在页面中可呈现多个，每个标签能够有多个class名 #class名{ 款式名:款式值;}<div class="box"></div>.box{ width: 100px; height: 100px;}通配符通配符是指所有标签都能够应用款式 *{ padding:0; margin:0;}群组选择器多个标签共用一个款式时，可将多个选择器同时设置雷同款式，打消代码冗余 选择器1,选择器2,选择器3,选择器4{ 款式名:款式值;}div,#id,.class,*{ width: 100px; height: 100px;}选择器命名标准不能应用特殊字符尽量应用小写字母结尾多个单词应用下划线（_）、连字符（-）、前面单词首字母大写形式命名不能应用中文命名语义化命名选择器命名办法下划线命名法：container_left连字符命名法：container-left驼峰式命名法：containerLeft层级选择器后辈选择器抉择父选择器下所有合乎子选择器的子孙元素 父选择器 子选择器{ 款式名:款式值;}ul li{ width:100px; height:100px;}父子选择器抉择父选择器下所有合乎子选择器的子元素 父选择器 > 子选择器{ 款式名:款式值;}ul > li{ width:100px; height:100px;}兄弟选择器抉择雷同的父元素下符合条件的所有兄弟元素 选择器1 ~ 选择器2{ 款式名:款式值;}div ~ p{ width:100px; height:100px;}相邻选择器抉择雷同的父元素下符合条件的第一个元素 选择器1 + 选择器2{ 款式名:款式值;}div + p{ width:100px; height:100px;}伪类选择器同一个标签，依据其不同的种状态，有不同的款式，须要应用伪类选择器进行设置 选择器:伪类选择器{ 款式名:款式值;}鼠标点击之前的状态(只能设置给 a 元素) 选择器:link{ 款式名:款式值;}鼠标点击时的状态(只能设置给 a 元素) 选择器:visited{ 款式名:款式值;}鼠标划入标签状态 选择器:hover{ 款式名:款式值;}鼠标按下的状态 ...

CSS 样式表根本语法行内样式表语法： <标签名 style="款式属性名 : 款式属性值值 ;"></标签名><div style="width: 100px;height: 100px;background: skyblue;"></div>外部样式表： <style> 选择器 { 款式属性名 : 款式属性值值 ; }</style><style> div { width: 100px; height: 100px; background: skyblue; } </style>内部样式表 创立一个CSS文件，在CSS文件中书写款式在html文件中应用<link>或@import引入内部款式文件 <link rel="stylesheet" href="款式文件门路"> <style> @import url("款式文件门路") </style>link 与 @import 区别 link 是HTML的标签，@impost是CSS提供的一种形式link在加载时，页面与款式同时加载，@import在加载时，先加载完页面在加载款式@import只有IE5以上版本可能反对JS操作DOM时，只能应用link标签样式表之间的权重关系行内样式表 > 外部样式表与内部样式表外部样式表与内部样式表权重雷同，当款式雷同时，后写的笼罩先写的款式权重高的样式表会笼罩权重低的样式表，这体现了样式表的层叠性

援用标签援用大段文本：<blockquote></blockquote> 特点：援用的文本会独立进去，左右主动进行缩进援用小段文本：<q></q> 特点：援用的文本不会独立进去，被援用的文本主动应用双引号包裹被援用的文档信息：<address></address> 特点：斜体显示被援用的文档的题目：<cite></cite> 特点：斜体显示文本的缩写或单词缩略词：<abbr title=""></abbr> title属性内写缩写或缩略词的全称语义化标签页面头部：<header></header>页面主体：<main></main>页面尾部：<footer></footer>题目组合：<hgroup></hgroup>导航栏：<nav></nav>输入：<output></output>画布：<canvas></canvas>页面区域划分 区域区块划分：<article></article>次要区域划分：<section></section>辅助区域划分：<aside></aside>文档题目、细节开合管制题目：<summary></summary>细节：<details></details> <details open> <summary>HTML 5</summary> This document teaches you everything you have to learn about HTML 5.</details>open属性管制默认是否关上显示进度条、度量范畴进度条<progress value="22" max="100"></progress> 度量范畴<meter value="3" min="0" max="10">非常之三</meter>日期、工夫<time datetime="2008-02-14">情人节</time>带有标记的文本<mark>milk</mark>代码块标签pre元素包裹的内容将保留空格与换行符code元素将文本内容转化为等宽字体，示意这是一段源代码程序 <pre> <code></code> </pre>文字注解、注音ruby：突围要注音的文字，内含三个元素。rb：要注音的对象rp：若浏览器不反对ruby那么上例就会顺次显示rb rp rt rp rb内容在同一行。如果浏览器反对，那么rp内容 不会显示。如上例，在IE8下可能会显示成 吉林大学(ji lin da xue) <ruby> <rb>吉林大学</rb> <rp>(</rp> <rt>ji lin da xue</rt> <rp>)</rp></ruby>设置文本方向dir属性：属性值有两个ltr、rtl<bdo dir="rtl">123</bdo>罕用特殊字符ItemValueItemValueItemValue空格：&nbsp\;版权：&copy\;注册：&reg\;商标：&trade\;左尖括号&lt\;右尖括号&gt\;

<link>标签引入标题栏图标：<link rel="icon" type="/image/x-icon" href="">引入dns 预解析服务：<link rel="dns-prefetch" href="">引入内部样式表：<link rel="stylesheet" href=""><meta>标签提供网页形容信息：<meta name="description">提供网页关键字信息：<meta name="keywords">浏览器最高版本定义：<meta name="description">定义主动刷新时长：<meta http-equiv="refresh">解决缓存：<meta http-equiv="expires">

audio 与 video 标签音频标签语法：<audio> <source> </audio>视频标签语法<video> <source> </video>audio 与 video 标签属性<audio>、<video>标签属性 引入文件：src="文件地址门路"显示控件：controls自动播放：autoplay循环播放：loop加载机会：prelode="" 页面加载后不载入：none页面加载后载入整个视频：auto页面加载后载入元数据：meta<source>标签属性 引入文件：src="文件地址门路"文件类型：type=""留神：应用<source>标签的 src 属性后，不要给audio 与 video进行设置src属性

frame标签作用：嵌入一个其余页面，可用于数据传输、共享代码、部分刷新、第三方染指 <iframe></iframe>frame标签属性设置iframe显示宽度：width="数值"设置iframe显示高度：height="数值"iframe页面增加边框：frameborder="" 默认为0，须要增加边框设置为1即可iframe页面显示滚动条：scrlling="" 显示滚动条设置为1，不显示滚动条设置为0嵌入页面的指标地址：src=""管制嵌入页面显示的内容：srcdoc="" src 与 srcdoc属性设置其中一个即可map标签作用：设置在图像上可点击区域 <img src="" usemap="#planetmap"/><map name="planetmap" id="planetmap"> <area shape="" coords="" href ="" alt="" /></map><area/>：标识设置在图像上可点击的区域和形态map标签在<img/>上的属性 与<map>建设关联：usemap="#map的id名"在<map>上的属性 与img元素 usemap 建设关联：name=""与img元素 usemap 建设关联：id=""在<area>上的属性 设置在图像上点击的形态：shape="" 矩形：shape="rect"圆形：shape="circle"多边形：shape="poligon"自定义点击范畴形态：coords="" 矩形：coords="左上坐标，右下坐标"圆形：coords="圆心坐标，半径"多边形：coords="各个顶点坐标"

表单标签<form> <input> <textarea></textarea> <label></label> <select> <option></option> </select> <button></button> </form><form>：示意一个表单<input>：单行文本输入框<textarea>：多行文本输入框<label>：表单辅助标签，扩充可点击范畴<select>：示意一个下拉选项菜单<option>：下拉选项菜单中的子菜单项<button>：示意一个按钮<form>标签上的属性表单数据传递目的地：action="传输的目标地址门路"表单数据的申请形式：method="申请形式"表单名：name="自定义语义化名"表单值：value="" name 和 value在服务器上是以键值对模式进行存储数据设置传输的数据类型：enctype=""<input>标签上的属性<input> 单行输入框的属性： 输入框类型属性：type="" 一般文本输入框：type="text"明码输入框：type="password"重置按钮：type="reset"提交按钮：type="submit"单选按钮：type="radio"多选按钮：type="checkbox"上传文件按钮：type="file"无成果点击按钮：type="button"邮件输入框：type="email"网址输入框：type="url"数字输入框：type="number"电话输入框：type="tel"滑动条：type="range"搜寻输入框：type="serch"日期控件：type="data 或 month 或 week"色彩控件：type="color"工夫控件：type="time"输入框值属性：value="" 当type="submit"时，value属性设置的是按钮上的文字当type="checkbox 或 radio"时，value属性设置的是键值对的值当type="text 或 password"时，value设置的是文本框中的默认内容输入框名属性：name="" 当type="radio 或 checkbox"时，必须设置name属性和属性值，并且同一组选项必须设置雷同name属性值输入框文本提醒属性：placeholder="提醒文本" 输出在文本框中输出内容后自动隐藏，清空输入框后主动显示<textarea>多行输入框属性 设置多行文本输入框的宽度：cols="数值"设置多行文本输入框的高度：rows="数值"<label> 辅助表单属性 标记指标属性：for="指标id名"<select> 下拉选项菜单属性 下拉选项菜单名：name=""<option> 菜单选项属性 与菜单name组成键值对：value=""默认选中：selected="selected"<button>按钮属性 按钮类型属性：type="" 重置按钮：type="reset"提交按钮：type="submit"单击按钮：type="button"其余相干属性： 示意选中状态属性：checked="checked"表单元素禁用属性：disabled="disabled"输入框选项列表<input id="myCar" list="cars" /><datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"></datalist>输入框应用 list 属性与 datalist标签的id 名相关联HTML5新增标签表单外部分组标签 <fieldset> <legend>health information</legend> height: <input type="text" /> weight: <input type="text" /></fieldset><fieldset>：示意一组<legend>：示意每组的题目下拉菜单选项分组 <select> <optgroup label="Swedish Cars"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </optgroup></select>HTML5新增属性主动实现输出属性：autocomplete="on 或 off"主动获取焦点属性：autofocus空内容提醒：required正则规定验证表单：pattern多选文件：multiple

表格标签<table> <tr> <th></th> </tr> <tr> <td></td> </tr></table><table>：示意一个表格<tr>：示意一行<th>：示意表格的表头单元格<td>：示意表格的一个单元格HTML5语义化表格标签<caption></caption><table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> <tr> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> </tr> </tfoot> </table><caption>：示意一个表格的题目<thead>：示意表格的头部<tbody>：示意表格的主体<tfoot>：示意表格尾部表格列分组标签从左至右对表格进行列分组第一种语法：<col span="数值"/>第二种语法：<colgroup span="数值"></colgroup>表格标签的属性设置表格的宽度：width="数值"设置表格的高度：height="数值"设置表格的边框：border="数值"设置背景色彩：bgcolor="色值"设置表格内容的程度对齐形式：align="方向" 左对齐：left居中对齐：center右对齐：right设置表格内容的垂直对齐形式：valign="方向" 上对齐：top居中对齐：middle下对齐：bottom<td>标签合并属性 列合并：colspan="数值"行合并：rowspan="数值"< table>标签的属性 设置边框与边框之间的间隔：cellspacing="数值"设置边框与内容之间的间隔：cellpadding="数值"增加分割线：rules="分割线类型" 必须应用<colgroup>标签进行列分组组分割线：group行分割线：rows列分割线：cols行与列分割线：all无分割线：none

理解门路在 HTML 中，门路分为相对路径和绝对路径相对路径是指绝对于本人到指标文件的地址门路 相对路径分为三种： 同级文件门路：./指标文件下级文件门路：../指标文件上级文件门路：./文件夹/指标文件绝对路径是指指标文件的确切地位 绝对路径分为两种： 磁盘上的绝对路径：E:\桌面\前端学习笔记\HTML\指标文件网址式的绝对路径：https://www.baidu.com图片标签 <img/> 图片标签是一个单标签图片标签的属性设置图片宽度：width="数值"设置图片高度：height="数值"图片门路：src="图片门路"设置图片失落或损坏后替换的文本内容：alt="替换的文本内容"设置鼠标悬停在图片上的提示信息：title="提醒的文本信息"

超链接标签<a>文本内容</a>被 <a> 标签包裹的文本内容就是一个超链接文本，可进行点击超链接标签的属性href 属性：用于设置跳转的指标地址设置跳转的链接：href="指标地址"设置一个空链接：href="#"title 属性：用于设置当鼠标悬停在超链接文本上时显示提示信息title="提示信息文本内容"target 属性：设置跳转指标页面时指标页面窗口打开方式设置以后窗口关上：target="_self"设置新窗口关上：target="_blank"rel 属性：设置以后文档与指标URL之间的关系rel="noopener noreferrer"超链接的小利用模仿一个按钮 <a href="javascript:void(0)">按钮</a>跳转锚点 计划一：id 捆绑形式<a href="#maodian">跳转</a><h2 id="maodian">锚点指标</h2>计划二：name 捆绑形式<a href="#maodian">跳转</a> <a name="maodian">锚点指标</a>

HTML标签分为双标签和单标签 双标签语法： <标签名></标签名> <标签名>：示意开始标签 </标签名>：示意完结标签 双标签完结标签的 / 必须写 单标签语法： <标签名/> 单标签只有一个标签，/ 能够省略，但个别倡议加上题目标签题目标签的特点 文本加粗显示一级题目字体最大，逐级递加默认状况独占一行标签不能进行互相嵌套 示意一级题目：<h1>书写题目内容</h1> 示意二级题目：<h2>书写题目内容</h2> 示意三级题目：<h3>书写题目内容</h3> 示意四级题目：<h4>书写题目内容</h4> 示意五级题目：<h5>书写题目内容</h5> 示意六级题目：<h6>书写题目内容</h6>段落标签 <p>段落文本内容</p> 留神：段落标签内不能嵌套题目标签文本内容歪斜标签 <i>文本内容</i> <em>文本内容</em> <em>标签绝对于<i> 标签具备语义化，起到了强调作用文本内容加粗标签 <b>文本内容</b> <strong>文本内容</strong> <strong>标签绝对于<b> 标签具备语义化，起到了强调作用文本内容增加下划线款式标签 <u>文本内容</u> <ins>文本内容</ins> <ins>标签绝对于<u> 标签具备语义化文本内容增加删除线款式标签 <del></del>设置文本上标与下标标签 上标： 上标：设置文本上标与下标标签 上标： 下标：<div>标签与<span>标签 <div></div> 次要对页面进行区块划分，只有增加css款式才具备款式 <span></span> 次要对一小部分内容进行定制款式时应用，只有增加css款式才具备款式