H5+C3

新增的语义标签

1.主体结构元素 主要用来划分区域

< nav>导航< /nav>
< article>主体< /article>
< section>用来表示 段或者章节 (模块)< /section>
< aside>主体之外的附属信息 例如侧边广告栏< /aside>
< time>9:00< /time>

2.非主体元素

< header>用在页面的头部< /header>
< footer>用在页面的底部< /footer>
< address>标签定义文档坐着或拥有的联系信息 < /address>
< main>定义文档的主要内容< /main>

3.进度条

< progress value=“25” min=“0” max=“50” id=“pro”>< /progress>

4.新增的表单控件

email: < input type=“email” name="" value="" />
电话号码： < input type=“tel” name="" value="" />

5.在移动端会有键盘的切换

搜索： < input type=“search” name="" value="" />
网址：< input type=“url” />
数字： < input type=“number” />

step 每次移动的增量 min:最小值 max:最大值 value: 初始位置
数值选择器： < input type=“range” step=“1” min=“0” max=“10” value=“10”/>
颜色：< input type=“color” id=“col”/>
日期： < input type=“date” />
时间： < input type=“time” name="" id="" value="" />
周：< input type=“week” />
月：< input type=“month” />
< input type=“submit” name="" id="" value=“提交” />

6.新增的表单属性

placeholder : 提示信息
autocomplete : 是否保存用户输入值(取消提示信息)
autofocus : 指定表单获取输入焦点
required : 表示此项必填 ，不能为空
pattern : 正则验证 pattern="\d{1,5}"
formaction : 在submit里定义提交地址
formmethod : 选择数据提交方式 get post

7.新增的表单验证方法

< form action="" method=“post” οnsubmit=“return check()”>
< input type=“text” name="" id= value=“用户名” />
< input type=“password” pattern="^\d{1,4}" name="" id=“tex” value="" />
< input type=“email” name=“ema” id=“ema” value="" required=""/>
< input type=“submit” value=""/>
< / form>

novalidate=“novalidate” : 提交后重新加载当前页面

< form action="" method=“post” >
用户新名：< input type=“text” required=“required” id=“name”/>
< input type=“email” value=""/>
< input type=“submit” value=“提交11” οnclick=“checkForm(this.form)”/>
< input type=“submit” formnovalidate=“formnovalidate”/>

checkValidity()方法
显式验证方法。每个表单元素都可以调用checkValidity()方法（包括form），它返回一个布尔值，
表示是否通过验证。默认情况下，表单的验证发生在表单提交时，如果使用checkValidity()方法，

// //可以在需要的任何地方验证表单
// console.log(col.value);
//
// function check(){
// if(tex.value == “”){
// alert(“请输入用户名”);
// return false;
// }else if(!ema.checkValidity()){ //符合emali的验证alert(“请输入emali邮箱”)
// return false;
// }else{
// alert(“验证通过”)
// }
// }

setCustomValidity()方法
自定义错误提示信息的方法。
当默认的提示错误满足不了需求时，可以通过该方法自定义错误提示。

function checkForm(frm){
var name = frm.name;
console.log(name.value);
if(name.value == “”){
name.setCustomValidity(“你是猪吗？！”);
}else{
name.setCustomValidity("");
}
}

音频和视频

标签

1. audio 、 video
2. source

媒体元素属性

controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
currentTime : 开始到播放现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音

媒体元素

paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)

play() : 媒体播放
pause() : 媒体暂停
load() : 重新加载媒体

事件：

onended：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。

ontimeupdate：当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。

Video额外特性

poster : 视频播放前的预览图片 eg:oV.poster = ‘timg.jpg’
width、height : 设置视频的尺寸
videoWidth、 videoHeight : 视频的实际尺寸(只读)

canvas的基本使用

获取标签

var cc = document.getElementById(“cc”);

通过标签获取画布

canvas是标签， 画布是canvas的一个属性
我们在绘制之前，都需要先通过标签来获取到画布，再通过画布来调用绘制的方法
画布： canvas绘制的上下文
var ig = cc.getContext(“2d”);

绘制直线的流程

1.开始绘制 (落笔)
ig.beginPath();

保存当前样式
ig.save();

2.设置起点
ig.moveTo(10,10);

3.设置终点
终点，可以设置多个
ig.lineTo(100,100);
ig.lineTo(80,55);
ig.lineTo(110,40);

1.闭合路径 2. (抬笔)
可选(根据当前需求来看)
可以将最后一个终点和起点 相连接
ig.closePath();

4.根据 设置的点，来连接
设置连接线的样式

ig.lineWidth = 8; // 设置线宽
ig.strokeStyle = “blue”; // 设置连接线的颜色
// ig.stroke();
ig.restore(); //加载保存过的样式

1.空心的矩形

ig.strokeRect(300,150,100,100);

2.实心矩形

ig.fillStyle = “blue”;
ig.fillRect(300,30,100,100);

3.清除矩形

ig.clearRect(325,55,50,50);

4.文字

空心字
// ig.font = “50px 楷体”;
// ig.strokeStyle = “orange”;
// ig.strokeText(“小小涛”,310,200);

实心字
// ig.fillText(“大大涛”,10,300);

5.渐变

var col = ig.createLinearGradient(10,10,170,10);
col.addColorStop(0,“pink”);
col.addColorStop(1,“purple”);

ig.fillStyle = col;
g.fillRect(10,10,200,20);

strokeRect()
定义和用法:strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。
JavaScript语法: context.strokeRect(x,y,width,height);

strokeStyle 属性
定义和用法：strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式

fillRect()
定义和用法:fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
格式和strokeRect一样。

fillStyle 属性
定义和用法：fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
JavaScript 语法： context.fillStyle=color|gradient|pattern;

clearRect()
定义和用法：clearRect() 方法清空给定矩形内的指定像素。
JavaScript 语法：context.clearRect(x,y,width,height);

stroke()
实际的绘制出通过moveTo和lineTo方法定义路径，默认颜色为黑色

lineWidth
lineWidth 属性设置或返回当前线条的宽度，以像素计

fill() 填充
fill() 方法填充当前的图像（路径）。默认颜色是黑色。

圆

arc: 画圆
//参数： 1. 在canvas中 x轴上的位置
// 2. 。。。。。 y轴上的位置
// 3. 半径
// 4. 开始角度 Math.PI 约等于 180°
// 5. 结束角度
// 6. 是否逆时针绘制 可选参数 默认 顺时针

ctx.arc(150,100,100,0Math.PI,Math.PI/180180);
ctx.strokeStyle = “green”;
ctx.lineWidth = 1;
ctx.closePath();
ctx.fillStyle = “red”;
ctx.fill();
ctx.stroke();

拖拽属性是H5的新特性：
是指鼠标点击源对象之后，不松手将其拖拽到目标对象，或半途松手(释放)的过程–>

拖拽 Drag

源对象： 指定的鼠标点击的一个事物，例如： 一个元素，一个图片等
目标对象： 指定是我们拖动源对象后，预计要进入的区域

1. 被拖动的源对象可以触发的方法：
   1) ondragstart: 源对象开始被拖动
   2) ondrag: 被拖动过程中
   3) ondragend: 源对象被拖动结束

2. 源对象进入目标对象可以触发的事件
   1) ondragenter： 源对象进入目标对象时触发
   2) ondragover: 源对象悬停在目标对象上方时触发
   3) ondragleave: 源对象被拖动着离开目标对象时触发
   4) ondrop: 源对象在目标对象上松手时 触发

//开始拖动时
box.ondragstart = function (ev) {
//获取鼠标在元素上的位置
offsetX = ev.offsetX;
offsetY = ev.offsetY;

ev.dataTransfer.setData(“text”,this.innerText);
console.log(typeof this.innerText);
}
//源对象被拖动时
box.ondrag = function (ev) {
var x = ev.clientX;
var y = ev.clientY;

//drag事件最后一刻，无法读取鼠标的坐标， x 和 y 都会变成0
if(x == 0 && y == 0){
return false; //直接结束，不赋值给元素
}

x -= offsetX;
y -= offsetY;

this.style.left = x + “px”;
this.style.top = y + “px”;
}
//拖动结束时
box.ondragend = function (ev) {
// alert(“我脱完了~~该你了”);
}
//源对象进入目标对象时 触发
two.ondragenter = function (ev) {
two.style.backgroundColor = “yellow”;
}
//从目标对象出去时 触发的方法
two.ondragleave = function (ev) {
two.style.backgroundColor = “red”;
}

two.ondragover = function (ev) {
//为了使ondrop方法生效，阻止默认事件
// ev.stopPropagation(); 阻止冒泡

// 阻止默认事件的 方式1：
ev.preventDefault();

//方式2
// return false;
}

//在目标对象上松手时触发
//直接使用 ondrop方法的时候，是无法触发的，我们需要在ondragover中做一下处理
two.ondrop = function (ev) {
// this.innerHTML = “我被释放了·”;
// console.log(“触发”);
this.innerHTML = ev.dataTransfer.getData(“text”);
}

event.dataTransfer： 数据传递对象
功能： 用于在源对象和目标对象之间传递数据

setData(): 设置数据 参数是 key 和 value(value必须是字符串)
getData(): 获取数据，参数是key 。 通过key去获取对应的value值

使用JSON对象中的方法 转换 字符串和对象的数据类型
var str = new String();
var obj = {};

JSON.stringify(对象) ： 可以将对象类型 转换为字符串类型
console.log(typeof JSON.stringify(obj));

JSON.parse(字符串) ： 可以将字符串类型 转换为对象类型
console.log(typeof JSON.parse(str));

echarts(图库）

1.引入echarst文件
< script src=“echarts.min.js”>< /script>

2.准备一个DOM容器，来存放echarts的内容
< div id=“box”>< /div>

< script type=“text/javascript”>

3. 基于DOM容器，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘box’));

4.为图表准备数据
var option = {

};

5.将数据放入 echarts实例中
myChart.setOption(option);

本地存储

localStorage : 永久存储(相对)，其中的数据不随着浏览器的开关而改变
sessionStorage： 临时存储(相对), 当浏览器关闭时，数据消失(页面刷新时，不会受到影响)

var ipt = document.getElementsByClassName(“ipt”)[0];
var but = document.getElementsByTagName(“button”);
var ipt2 = document.getElementById(“ipt2”);

// if(typeof (Storage) !== “undefind”){
// alert(“是的，我支持本地存储”);
// }else {
// alert(“抱歉，不支持web存储”);
// }

//保存数据
but[0].onclick = function () {
//setItem()：将数据已键值对的方式，存储
// 谁调用存个谁
// localStorage.setItem(“text”,ipt.value);
// localStorage.setItem(“txt”,ipt2.value);
// console.log(typeof ipt.value);
var obj = {“name”:“高萌宠”};

sessionStorage.setItem(“text”,JSON.stringify(obj)); //value值必须是字符串
}

//获取数据
but[1].onclick = function () {

// for(var i = 0; i < localStorage.length; i++){
// //获取key键
// console.log(localStorage.key(i));
// }
//根据key键 获取对应的value值
// console.log(localStorage.getItem(“text”));
// console.log(localStorage.length);

var b = JSON.parse(sessionStorage.getItem(“text”));
//遍历 forin
//将in 后面 的属性 逐个取出 存到 in前面的变量中
//for(变量 in 对象){}
for(var k in b){
console.log(k);
console.log(b[k]);
}

}

//删除数据
but[2].onclick = function () {
//根据key键 删除对应的键值对
localStorage.removeItem(“text”);
localStorage.removeItem(“txt”);
}

but[3].onclick = function () {
location.href = “备份.html”;
}

C3选择器

伪类选择器

:link 伪类向未访问的链接添加特殊的样式。
:visited 伪类向已访问的链接添加特殊的样式。
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
:active 伪类向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。

结构性伪类选择器

:root选择器用匹配文档的根元素。
:not(selector) 选择器匹配非指定元素/选择器的每个元素。
:empty 选择器匹配没有子元素（包括文本节点）的每个元素。
:target 选择器可用于选取当前活动的目标元素。
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被 链接的元素就是目标元素(target element)。

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。
:only-child 选择器匹配属于其父元素的唯一子元素的每个元素。

n:(even、odd、ab+b)

E:nth-child(n) 选择器匹配属于其父元素的第n个子元素，并且这个元素还得是E元素；
E:nth-last-child(n) 选择器匹配属于其元素的第n个子元素的每个元素，并且这个元素还得是E元素，从最后一个子元素开始计数。

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
:nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数

UI元素状态伪类选择器(表单专用)

:focus 选择器用于选取获得焦点的元素。
:enabled选择器被用来指定当元素处于可用状态时的样式。
:disabled选择器被用来指定当元素处于不可用状态时的样式。

:read-only选择器被用来指定当元素处于只读状态时的样式。
:read-write 选择器用于匹配可读及可写的元素。

:checked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。

::selection伪类选择器用来指定当元素处于选中状态时的样式

伪元素选择器

:first-line 选择器用于选取指定选择器的首行。
**:first-letter:**为某个元素中的文字的首字母或第一个字使用样式；
**:before:**在某个元素之前插入一些内容；(请使用 content 属性来指定要插入的内容。)
:after: 在某个元素之后插入一些内容；(请使用 content 属性来指定要插入的内容。)
Content 属性：需要与上面俩个配合使用！

2D效果

1.旋转 单位是 度 deg

< div style=“transform: rotateZ(-30deg)”>旋转< /div>

2.位移 单位是 像素 px

< div style=“transform: translateX(150px)”>位移< /div>

3.缩放 正常比例是 1 大于1 为放大 小于1 为缩小 没有单位

< div style=“transform: scale(1.5,1.5)”>缩放< /div>

4.倾斜 单位是 度

< div style=“transform: skewX(45deg)”>倾斜X< /div>
< div style=“transform: skewY(45deg)”>倾斜Y< /div>
< div style=“transform: skew(30deg,30deg)”>倾斜< /div>

5.文字反倾斜的方式

< div style=“transform: skewX(45deg)”>
< p style=“transform: skewX(-45deg)”>倾斜< /p>
< /div>

自定义动画

自定义动画(也叫关键帧动画)： 其中，制作动画和绑定动画两个过程缺一不可
备注:
1） 衣服可以制作很多件
2） 同一件衣服也可以给多个人穿

animation 属性是一个简写属性，用于设置六个动画属性：

1.animation-name ：动画名称 必填
2.animation-duration： 动画执行所需的时间 必填
3.animation-timing-function： 动画执行的速度曲线 可选 默认值 ease
4.animation-delay：动画开始之前的延迟 可选 默认值 0s
5.animation-iteration-count ： 动画执行的次数 可选 默认值1 没有单位 infinite:无限次
6.animation-direction： 规定是否轮流反向播放 (注意：播放次数至少为2) 可选 默认不反向,alternate：反向播放
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

animation: myAnimation 3s ease-in-out 4s infinite alternate;

@keyframes 声明自定义动画的关键词 后面需要写自定义动画的名称，空格间隔*/

@keyframes myAnimation{
from{} 相当于 0%
o{} 相当于 100%
}

0%{}
25%{
transform: translateX(400px);
}
50%{
transform: translate(400px,400px);
}
75%{
transform: translate(0px,400px);
}
100%{
/transform: translate(-200px,600px);/
}

盒模型

盒模型⼀共有两种模式，⼀种是标准模式，另⼀种就是怪异 模式
标准模式：
盒⼦总宽度/⾼度 =width/height+padding+border+margin

怪异模式：盒⼦总宽度/⾼度=width/height + margin = 内容 区宽度/⾼度 + padding + border + margin;

box-sizing有两个值⼀个是content-box，另⼀个是border-box。
当设置为box-sizing:content-box时，将采⽤标准模式解析计 算，也是默认模式；
当设置为box-sizing:border-box时，将采⽤怪异模式解析计算；

box-shadow：盒子阴影
属性值1： 水平位置的偏移 必填
属性值2： 垂直位置的偏移 必填
属性值3： 模糊度 可选
属性值4： 阴影面积 可选
属性值5： 阴影的颜色 可选
属性值6： 内外阴影 默认外部阴影
inset: 内部阴影

box-shadow: 10px 10px 15px 3px black;

开启弹性盒模型
display: flex;

根据主轴上的位置变化

对齐方式：
flex-start: 开始位置 (默认值)
flex-end: 结束位置
center: 中心位置
space-around: 两端对齐 (元素到边框的距离是 元素之间的一半)
space-between: 两端对齐 (元素到边框之间没有距离)

justify-content:space-around;

flex-direction 主轴的方向：

row（默认值）：从左到右。
row-reverse： 从右到左
column：从上到下
column-reverse：从下到上

flex-direction: column-reverse;

align-items:交叉轴上的对齐方式 （规定所有的子元素）

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项⽬的第⼀⾏⽂字的基线对齐。
stretch（默认值）：如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼ 度。

align-items: center;

flex-wrap 开启换行 弹性盒模型下， 默认是不换行

nowrap: 不换行
wrap: 换行
wrap-reverse : 倒序换行

flex-wrap: wrap;

align-content 的功能和 align-item类似
不同点： 该属性必须多行的时候，对单行元素无效
同时，也可以去掉多余的行间距

设置 单个元素 在交叉轴上的 对齐方式
main>div:nth-child(2){
align-self: center;
}

元素的缩放

flex 的收缩 默认是按照等比 超出的部分/元素总个数 = 每个元素要收缩的面积
flex-grow:扩大

.main>div:nth-child(1){
flex-shrink: 2;
}
.main>div:nth-child(2){
flex-shrink: 1;
}
.main>div:nth-child(3){
flex-shrink: 1;
}

元素的排序

需要将当前层级的每一个元素都排列
否则： 排序的元素和未排序的元素 将按照两套排序规则走

.box:nth-child(1){
order: 3;
}
.box:nth-child(2){
order: 2;
}
.box:nth-child(3){
order: 1;
}