c3h5es6

c3html5es6总结

一、语义化：看到它就知道它是干啥的

语义化标签：使用单词作为标签，使标签更容易被识别

常见的语义化标签 结构化标签：headder  main   footer  nav        aside

                               头部   主体       尾部  导航栏     侧边栏

文本标签：p ,h1-h2, strong加粗 ， i斜体，del删除

什么是HTML语义化？HTML语义化的好处是什么？

  html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

  即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

  搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

  使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

什么是SEO? 如何做SEO优化?

    SEO，是英文SearchEngineOptimization的缩写，中文的意思: 搜索引擎优化。SEO的目的就是让网站或者网页在搜索结果中，处于靠前的位置。

    实现SEO优化的方式有:

    1、合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出      重要关键词。

    2、语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

    3、重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取

    4、重要内容不要用js输出：爬虫不会执行js获取内容

    5、少用iframe：搜索引擎不会抓取iframe中的内容

    6、非装饰性图片必须加alt

    7、提高网站速度：网站速度是搜索引擎排序的一个重要指标。

二、音视频标签

audio 音频标签 video 视频标签

src 属性设置音视频资源路径

controls 属性设置播放控制器

autoplay 属性设置自动播放，需要开启浏览器权限

loap 属性设置循环播放

audio.load() 加载

audio.play() 开始播放

audio.pause() 暂停

audio.currentTime = 30 设置播放速度

三、弹性布局

特点：

  1.弹性布局要设置给父元素标签，把父标签设置为弹性布局容器，其所有一级子标签会作为弹性项目，按照弹性布局排列

  2.默认弹性布局元素从左到右排列，高度为100%（包含margin）

  3.弹性布局不在有行标签和快标签之分

  4.弹性布局如果一行放不下，其空白区会被压缩，当没有空白区域时，会溢出，单不会换行，可以设置换行

flex-wrap: wrap; 换行

设置水平方向排列规则：

 flex-start 默认从左向右

 flex-endd  从右到左

 center     居中

 space-between 两端对齐

 space-around  环绕对齐

 space-evenly  平分对齐

justify-content: space-evenly;  设置垂直对齐方式（适用于单行）

  flex-startb 默认靠上

  flex-end    靠下

  center      居中

  

align-items: center;  设置垂直对齐方式（适用于多行）

  align-content 和 justify-content 值相同

  align-content: flex-start

  注意单行和多行不要一起用

alian-self: flex-end;

align-self 对应 align-items 的值

可以给弹性元素单独设置布局方式和其他元素不同

order: 5;

order 用于设置弹性元素在弹性容器中的排列顺序 默认值为0 可以为负值 值越大 排名越靠后

flex-grow: 2;

flex-grow 元素多的扩展值，就是当弹性容器的宽度用不完，弹性有间隙时，设置某一个元素占用间隙的比例值，默认0，不占用间隙

flex-shrink: 0;

flex-shrink 元素的压缩值，就是当不换行且弹性内部有空白时，设置某一个元素被压缩的比例值，默认值1，等比例压缩

流式布局: 网页默认的布局方式, 元素按照行标签从左向右,块标签从上向下依次排列, 尽量不使标签重叠

    弹性布局: html5新增的网页布局方式, 需要手动设置, 有如下特点:

    1，弹性布局总是给父元素设置， 对第一级子元素起效

    2，弹性布局元素默认从左向右排列，不换行，高度为100%（包含margin）

    3，弹性布局元素没有行标签块标签之分，可以正常设置宽距和宽高

    4，弹性布局元素不能使用浮动， 可以使用定位

    

总结： 弹性布局中的属性设置：

 弹性容器的属性设置：

    display: flex;   设置弹性容器

    flex-wrap: wrap; 设置换行

    justify-content: space-evenly;  设置说水平对齐方式

    align-items: center;    设置单行对齐方式

    align-content: flex-start;  设置多行对齐方式

    弹性元素的属性设置：

    align-self: flex-end; 弹性元素单独对齐

    order: 1;  弹性元素的排列顺序

    flex-grow: 2  元素扩展比例

    flex-shrink: 0;元素压缩比例

    space-between 两端对齐

    space-around  环绕对齐

space-evenly  平分对齐

四、响应式布局

 概念：在浏览器窗口尺寸变化时，是一个网页在不同宽度的窗口上显示不同的排版样式和内容

 使用场景：一般用于pc端网页

 实现原理：使用媒体查询

五、浏览器适配

  概念：在浏览器窗口尺寸变化时，是一个网页在不同宽度的窗口上显示相同的排版样式和内容

  

  使用场景：一般用于移动端

  实现原理：视口单位 vw / vh

六、浏览器兼容

  概念：在浏览器窗口尺寸变化时，使一个网页在不同浏览器的窗口上显示相同的排版样式和内容

  使用场景：在不同内核和不同版本浏览器上的兼容（兼容低版本浏览器）

  实现原理：代码优化

七、媒体查询

   css3新增的功能，可以限制css样式渲染的条件，当满足条件时渲染样式，从而达到响应式布局效果

   结构：

        @media  媒体类型 and （媒体特性）{ 条件满足时，渲染的css样式 }

        媒体类型：此样式在什么设备上生效  all / screen

        媒体特性：此样式渲染的条件，min-width / max-height

        

八、适配

  在不同的设备上显示相同的样式

  viewwport: 视口，可视窗口，一般指移动端屏幕窗口

  

  移动端视口中有两个长度单位 vw 和vh

  

  vw: viewportWidth 视口宽度 100vw == 视口宽度

  vh: viewportHidth 视口高度 100vh == 视口高度

九、requestAnimationFrame

  requestAnimationFrame 和 setTimeout 类似, 都是一个短暂不重复的计时器

  setTimeout可自定义计时时间

  requestAnimationFrame 的计时时间是默认的, 一帧的时间,约等于16.67ms

  由于收到设备性能的影响, 网页的刷新率(帧率)不一定准确维持在60帧/s, 可能偏高或偏低, 所以16.67ms的帧时间是一个大概的值,不是定值

  requestAnimationFrame 优点: 在保证动画流畅运行的前提下, 最大限度的节约性能消耗

十、地理位置

 window.navigter.geolocation 是H5新增的API，用于浏览器获取位置的信息

 window.navigater.geolocation.getCurrentPostion(res=>{ console.log(res.coords) })

 accuracy 定位精度

 altitude 海拔高度

 altitudeAccuracy 海拔精确度

 heading   移动方向

 latitude  纬度

 longitude 经度

 speed     移动速度

十一、canvas

  css设置尺寸只能缩放画布，不能改变画布实际尺寸

  属性height/width设置的才是画布的实际尺寸

  

  获取canvas标签元素

  @type {HTML CanvasElement} 添加canvas  API语法提示

Canvas绘图API：

(一) 方法:

getContext("2d")    创建绘图对象

beginPath();       开始绘制路径

closePath(); 结束绘制路径,闭合线框

moveTo(x,y); 移动到绘制起点

lineTo(x,y); 画线段到指定点

arc(x,y,r,start,end); 绘制圆形(弧度单位)

quadraticCurveTo(x,y,endX,endY) 二次贝塞尔曲线

bezierCurveTo(x1,y1,x2,y2,endX,endY) 三次贝塞尔曲线

stroke(); 线条类型

fill(); 填充类型

fillRect(x,y,w,h) 填充矩形

strokeRect(x,y,w,h) 线框矩形

clearRect(x,y,w,h) 清除矩形

strokeText(string,x,y) 绘制线条文字(空心)

fillText(string,x,y) 绘制填充文字(实心)

drawImage(img,x,y,width,height)  绘制图片(需在img的load函数中)

save() 保存当前状态设定

restore() 恢复到保存之前的状态设定

rotate() 旋转画布角度(弧度制)

(二) 属性:

fillStyle 填充颜色(支持rgb(),#fff,red)

strokeStyle 线条颜色

lineWidth 线条宽度(整数值,默认单位px)

lineJoin 折线拐角类型 (round表示圆角)

font   支持多个值, 例如"10px 宋体"

textBaseline 文字基点(默认bottom左下为基准点, top为左上)

globalCompositeOperation 绘制合成(具体值参考附件)

十二、WebWoker多线程

   分线程使用的API:

         new Worker()   创建分线程

         postMessage()  线程之间发送数据

         onmessage      事件,接收线程发送的数据

         概念

         进程: 一个应用的代码执行流程, 一个应用有且仅有一个进程

         线程: 也叫分线程, 可以独立于主线程执行, 通过代码创建, 可以没有也可以个

         主线程: 同进程

         分线程: 同线程

注意事项:

         1, 分线程不能调用界面相关API,只有主线程可以操作界面

         2, 线程之能同源访问, 跨域无法引入分线程脚本, 网页不能使用file协议本开

         3, 分线程和主线程作用域相互隔离,不能直接调用数据, 需要使用postMessa和      onmessage发送和接收

         4, 分线程不能执行界面相关的alert()等API,但可以执行与界面无关的ajax请求

         5, 分线程无法读取本地文件, 分线程中的数据都要来源于网络

  

十三、块级作用域

ES5创建变量使用var

 var a=1; var b=2;

 function addd(){

   var c=3;

   console.log(a,b,c)

 }

  

var 关键字定义变量有两个作用域 全局作用域 和 局部作用域

let 关键字定义变量有三个作用域 全局作用域 和 局部作用域

  全局变量：在全局范围内定义的变量

  局部变量：在函数内部定义的变量

  块级变量：在语法块中定义的变量 比如循环判断语法块

举例：使用在语法块中定义的变量，只能在语法块中使用

总结: let和var的两点主要区别:

   1, var 在同一作用域可以重复定义同一个变量, let不行

   2, var 没有块级作用域, 在循环中定义的变量都是全局的, 会相互覆盖,  let在循环中定义的   变量都是独立的,互不影响

十四、const常量

 ES6新增了两个关键字  let 定义变量 const定义变量

 使用const定义的是常量，它只能/必须初始化一次，初始化之后不可修改

总结：

    const定义值类型数据，绝对不能改

    const定义引用类型数据，数据内容（对象/数组中的数据）可以改，引用类型本身（内存地址）不能改

十五、箭头函数

  如果箭头函数只有一个参数，可以省略小括号

  如果箭头函数的函数体中只有一句return返回，return和{}可同时省略

总结: 箭头函数用法:

  1, 在事件函数或计时器或异步回调函数中可以保留this上下文指向

  2, 箭头函数在参数和返回值处,满足条件时,都可以简化

  3, 在对象中有一个简化的函数写法

  在node环境下，this默认指向空对象

  console.log(1, this)  // {}

  可以修改这个对象

  this.name = "zhangsan"

  console.log(2, this)  // {name: "zhangsan"}

  setTimeout会把this指向修改为Timeout对象

  setTimeout(function(){

    console.log(3, this) // Timeout

  }, 1000);

  箭头函数会保留this的上下文指向, 使this指向和setTimeout外部相同

  setTimeout(() => {

    console.log(4, this) // {name: "zhangsan"}

  }, 1000);

十六、数组对象的结构赋值

 数组结构允许我们直接使用变量读取数组中的数据

 由于数组有顺序，在结构时，一般前边变量个数和数组中数据个数要一一对应

 可以使用 ...语法结构数组中的一部分数据

 总结:

   数组解构:  var [count1,count2,...count3] = array

   数组赋值1:  array.push(...array2)

   数组赋值2:  array = [...array, ...array2, 5,6,7]

   对象解构:  var { age } = student

   对象赋值:  {...student, height:120}

  

十七、参数的默认值

 js函数定义时有两个参数，调用时必须传入至少两个参数

 如果传入的实参少于形参的个数，为防止错误，可以给形参设置默认值

 ES5使用 || 设置默认值

 function add(a,b){

     a = a || 0

     b = b || 0

     console.log(a+b)

  }

  ES6使用 初始化形参 设置默认值

  function add3(a=0,b=0){

     console.log(a+b)

   }

关于函数的参数, 如果参数个数不确定, 如果获取所有参数

   ES5中通过arguments字段获取参数数组

  function add4(){

     // arguments是一个类数组, 里边放了所有参数

    console.log(arguments, Array.from(arguments))

  }

ES6中通过形参...arr获取参数数组

  function add5(...array){

     形参array是所有参数所在的数组

    console.log(array)

   }

十八、类的创建于继承

 ES6中把工作函数做了进一步封装和优化 叫做类

 类是构造函数的变体，它内部也是构造函数结构，都用于创建对象

 使用class关键字定义一个类

 class People1 {

    // 每一个类中都有一个构造器, 相当于构造函数

    constructor(name, age){

        this.name = name

        this.age = age

    }

    // age = 20  写这里是固定属性, 每一个对象的指都相同

    eat(){

        console.log(this.name+"是一个"+this.age+"岁的吃货")

    }

  }

   var lisi = new People1("李四", 30)

   lisi.eat()

  // 类的继承: 基于构造函数和原型的继承,但类的继承已经内部实现了原型继承, 所以使用类时,不必考虑原型,   使用extends实现类的继承

  // 定义一个新的类Student, 继承People1,  People1作为父类, Student为子类

  // 总结: 关于es5的构造函数和es6的类

  // 1, 类是基于构造函数,是对构造函数的一个封装

 // 2, 类可以像构造函数一样继承, 而且无需再考虑原型的继承

 // 3, 一个类只能继承一次, 只能有一个父类,  但可以拥有多个子类

十九、promise

 函数中有异步函数操作时，return是无效的

 js代码执行过程中，分为同步和异步

 同步：代码从上向下依次执行，上一句执行完，下一句，js通过

 异步：特殊情况下，异步代码可以和其它代码同时执行，互不影响，不 严格按照顺序执行，常见的异步执行逻辑有 计时器，js事件， ajax,promise调用

异步代码标志: 回调函数

  

使用new创建promise对象这个操作是同步的，then函数的调用时候异步的，简单说promise是异步的

  promise有一个类函数all，可以把多个promise对象合并一个，当所有promise对象都调用resolve后，才会调用合并后的then

   all合并后的then回调函数参数是一个数组，数组中按照合并顺序依次获取每一个promise对象的成功数据

 类函数：就是使用类名调用的函数 如all()

 实例函数：就是使用对象调用的函数 如then()

  总结: 说一下你对promise的理解?

  promise 是es6新增的一个类,主要用于解决项目开发中常见异步回掉地域问题,原理上是对回调函数的封装, 开发中经常用于多异步任务嵌套时和多异步任务并发时

二十、async await

  async 用于放在函数function前，修饰函数

  在函数前添加async标记可以使此函数变为异步函数

  箭头函数也可以定义为异步函数

   async异步函数的返回值总是一个promise对象

    await关键字一般放在promise对象前边, 等待promise对象成功的结 果,一旦成功, 无需调用then, 而是通过同步返回值的形式拿到   promise中的异步结果

  await的作用是让异步回调结构改成同步返回值结构,依然能拿到数据, 好处是简化代码结构, 减少嵌套, 优化语法结构

   await只能在async函数中使用

二十一、es6模块化

 把一个整体的js文件或代码块通过功能性分割多个js文件或代码块，这样每一个js文件称之为一个模块化

  模块化语法：

     导出：export default data

     导入：import data form "path"

  es6模块化一般用于vue框架或react框架中

  

 从模块myModule中导入数据

import count from "./myModule.js"

   Cannot use import statement outside a module  不识别import这个语法, 因为es6模块化语法是不能直接在node或浏览器执行的

二十二、多列布局

多列布局:

column-count:;分列

column-gap:;列间距

column-rule:大小 形态 颜色;分割线

column-fill:;列的高度是否统一

auto 列高度自适应内容

balance 所有列的高度以其中最高的一列统一

column-span:;是否横跨所有列

none 不跨

all 横跨所有

column-width:;列宽