HTML5、CSS3、ES6新特性

HTML5新特性

标签	意义
article	页面独立的内容区域
aside	页面的侧边栏内容
bdi	允许设置一段文本，使其脱离父元素的文本方向设置
command	命名按钮，比如单选按钮、复选框或按钮
details	描述文档或文档某个部分的细节
dialog	对话框，比如提示框
summary	包含.detail元素的标题
figure	规定独立的流内容（图像、图表、照片、代码等）
figcaption	定义figure的标题
footer	section或document的页脚
header	文档的头部
mark	带有记号的文本
meter	度量衡，仅用于已知最大和最小值得度量
nav	导航链接的部分
progress	任何类型的任务进度
ruby	ruby注释（中文注音或字符）
rt	字符（中文注音或字符）的解释或发音
rp	在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容
section	文档中的节（section、区段）
time	定义日期或时间
wbr	规定在文本中的何处适合添加换行符

canvas 绘制

canvas只是图形容器，必须使用脚本来绘制

<canvas id="mycanvas" width="200" height="100"></canvas>
<script>
  var c = document.getElementById("mycanvas");
  var ctx = c.getContext("2d")
  ctx.fillStyle = "#FF0000"
  ctx.fillRect(0,0,150,75)
</script>

SVG 可伸缩矢量图形

图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG	canvas
基于 XML,SVG DOM 中的每个元素都是可用的	通过 JavaScript 来绘制 2D 图形,不支持事件处理器
每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形	一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象

属性draggable=“true” 拖放

项目	Value
拖动什么	ondragstart和setData()
放到何处	ondragover
进行放置	ondrop

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev) {
   
  ev.dataTransfer.setData("Text",ev.target.id)
}

ondragover 事件规定在何处放置被拖动的数据；
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
调用：event.preventDefault()

进行放置 ondrop：
当放置被拖数据时，会发生 drop 事件；
ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
   
  ev.preventDefault();  // drop 事件的默认行为是以链接形式打开
  var data=ev.dataTransfer.getData("Text");
  // 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在setData() 方法中设置为相同类型的任何数据
  ev.target.appendChild(document.getElementById(data));
  // 把被拖元素追加到放置元素（目标元素）中
}

audio(音频) video(视频)

属性	值	描述
autoplay	autoplay	自动播放
controls	controls	向用户显示控件，比如播放按钮
height	pixels	设置视频播放器的高度
loop	loop	循环播放
preload	preload	视频在页面加载时进行加载，并预备播放。
src	url	要播放的视频的 URL
width	pixels	设置视频播放器的宽度

Web存储 localStorage、sessionStorage

1、sessionStorage
①生命周期为关闭浏览器窗口
②在同一个窗口（页面）下，数据可以共享
③以键值对的形式存储使用
存储数据：sessionStorage.setItem(key,val)
获取数据：sessionStorage.getItem(key)
删除数据：sessionStorage.removeItem(key)
清空数据：sessionStorage.clear()

2、loaclStorage
①生命周期永久生效，除非手动删除，否则页面关闭依旧存在
②可以多窗口（页面）共享（同一浏览器可以共享）
③以键值对的形式存储使用
存储数据：loaclStorage.setItem(key,val)
获取数据：loaclStorage.getItem(key)
删除数据：loaclStorage.removeItem(key)
清空数据：loaclStorage.clear()

Input 类型

type=""	作用
email	包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值
url	包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值
number	包含数值的输入域。还能够设定对所接受的数字的限定 min max step(间隔) value(默认值)
range	包含一定范围内数字值的输入域，range 类型显示为滑动条，还能够设定对所接受的数字的限定 min max
date, month, week, time, datetime, datetime-local	日期选择器
search	搜索

CSS3新特性

属性选择器

属性选择器	描述
E[att] {}	选择具有att属性的E元素。
E[att=“val”] {}	选择具有att属性且属性值等于val的E元素。
E[att~=“val”] {}	att=“val” √；att=“val val2” √；att=“valval2” ×；
E[att^=“val”] {}	att=“val” √；att=“valval2” √；att=“vval” ×；（属性字符串以val开头即可）
E[att$=“val”] {}	属性字符串以val结尾即可
E[att*=“val”] {}	属性字符串含有val即可
E[att l=“val”] {}	att=“val” √；att=“val-…” √；att=“val…” ×

结构伪类选择器

p: type 父级的第n个p元素
p: child 父级的第几个子元素
比如：p:nth-of-type(2) 父级的第二个p元素，p:nth-child(2) 父级的第二个子元素

盒模型

box-sizing属性是用来切换盒模型

box-sizing的默认属性是content-box

属性值	意义
box-sizing:content-box;	元素的宽高只包含content（W3C标准盒模型）
box-sizing:pandding-box;	元素宽高包含padding和content
box-sizing:border-box;	元素的宽高包含border、padding和content （常用，IE怪异盒模型）
box-sizing: inherit;	规定应从父元素继承 box-sizing 属性的值。

border（边框）

属性	作用
border-image	设置所有边框图像的速记属性
border-radius	设置边框半径 圆角
box-shadow	盒子阴影

文本效果

属性	作用
text-align: “justify”	行对齐
text-overflow	文本溢出
text-shadow	文本阴影

transform 转换变形

在原来位置移动，而不是现在位置移动

作用	Value
移动	translate(x,y)、translateX(n)、translateY(n)
缩放	scale(x,y)、scaleX(n)、scaleY(n)
旋转	rotate(angle)
倾斜转换	skew(x-angle,y-angle)、skewX(angle)、skewY(angle)

transition 过渡

动画

作用：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

主要属性：
@keyframes ：在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

例：

@keyframes myfirst{
   
  from {
   background: red;}
  to {
   background: yellow;}
}

@keyframes myfirst{
   
  0%   {
   background: red;}
  25%  {
   background: yellow;}
  50%  {
   background: blue;}
  100% {
   background: green;}
}

@keyframes 中创建动画后，要把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：规定动画的名称、规定动画的时长
例：animation: myfirst 5s;
表示把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：

display=“flex” 弹性盒 伸缩布局

属性	作用
justify-content	元素在主轴(横轴)方向上的对齐
align-item	元素在侧轴(纵轴)方向上的对齐
flex	分配空间

ES6新特性

var、let、const、增强字面量、闭包

传送门

for …of … ,for … in …

… 展开运算符

const books = ["Kevin", "Durant"];
console.log(...books); // Kevin Druant

结合数组：

const fruits = ["apples", "bananas", "pears"];
const vegetables = ["corn", "potatoes", "carrots"];
var product1 = fruits.concat(vegetables); // Array.concat()
const produce2 = [...fruits,...vegetables]; // 展开运算符
console.log(produce1);  // ["apples", "bananas", "pears","corn", "potatoes", "carrots"]
console.log(produce2);  // ["apples", "bananas", "pears","corn", "potatoes", "carrots"]

箭头函数