第一单元
主体结构元素
(1)：article 独立文章内容
（2）：section 定义文档中的节（区间）
（3）：aside 主题内容说明（侧边栏）
（4）：nav 导航链部分
（5）：time 机器可读日期时间
（6）：datetime 可指定日期
非主体元素
（1）：header 页面头部
（2）：footer 页脚
（3）：address 文档作者的联系信息
（4）：main 文档的主要内容
表单域增强元素
formaction 覆盖form中的action 提交地址
formmethod 覆盖form中的method 提交方式
submit image 必须通过具有submit 功能的控件
autofocus 自动获得焦点
required 必填项
placeholder 提示内容
pattern 正则
autocomplete 自动保存用户输入 （off--关闭 on---开启）
表单控件（新增）
search 搜索关键字
email 邮件（格式：内容@内容）
url 输入网址 （格式：http://.~~~）
number 数字输入框
range 滑块类型
color 颜色
date 日期
time 时间
week 星期
month 月
tel 在移动端会弹出输入数字键盘
新增表单验证
checkValidity() 验证用户输入的内容是否正确 返回（true）（false）
取消表单验证
novalidate（） 加给form
formnovalidate（） 加给submit
setCustomValidite（） 自定义错误信息
新增页面元素
mark 突出显示
progress 进度条（ie9以下不支持）
figure 独立内容
figcaption 标题（必须在figure内部）
details 详细信息，点击详细信息，进行展开
summary
第二单元
音频视频标签
audio 音频
video 视频
source 媒介元素
媒体元素属性
：controls 显示/隐藏用户控制界面
：autoplay 媒体是否自动播放
：loop 媒体是否自动循环播放
：.currentTime 当前播放时间
：.duration 媒体总时间（未加载完返回NaN 正常返回秒）
：.volume 音量相对值（0.0——1.0）
：.muted 是否静音（静音----true 不静音----false）
媒体元素
：.paused 是否暂停
：.ended 是否播放完毕
：.error 媒体发生错误的时候 返回错误代码
：.currentSrc 义字符串的形式返回媒体地址
：.play （） 播放
：.pause（） 暂停
：.load （） 重新加载
事件
：.onended 播放结束
：.ontimeupdate 播放位置改变时运行的脚本
：.oncanplay 能播放的时候
Video的特性
：poster 视频播放前的预览图片
：width / height 设置视频的尺寸
：videoWidth / videoHeight 视频的实际尺寸
第三单元
画布: Canvas
用法:
(1):获取canvas (2):创建绘图环境 用（.getContext()）调用2d
方法：
：.strokeRect（x,y,width,height） 空心矩形
：.fillReck（x,y,width,height） 实心矩形
：.clearReck（x,y,width,height） 清空矩形内的指定元素
：.moveTo（x,y） 开始的坐标（起点）
：.lineTo（x,y） 结束的坐标（终点）
：.stroke() 连线（通过moveTo和lineTo的路径）
：.fill（） 填充
：.beginPath（） 创建开始路径
：.closePath（） 关闭路径
属性：
：.strokeStyle 设置空心矩形边框的颜色
：.fillStyle 设置实心矩形的背景颜色
：.lineWidth 线条的宽度（像素）
圆：
.arc（x,y,r,起始角，结束角，（true=逆时针，false =顺时针））
公式：角度90=度数*Math.PI/180
方法：
：.translate（x,y） 位移
：.Scale（1,1） 缩放 （1不放大不缩小， 小于1缩小， 大于1放大）
：.rotate（） 旋转 （30度） 30*Math.PI/180
：.Save（） 保存
：.restore（） 恢复
第四单元
插入图片（图片加载完，在执行canvas （）.onload=function(){}）
定位语法（3种）
：drawImage（图片,x,y） 定位图像
：drawImage（图片,x,y，width,height）
定位图像 并规定图的高度和宽度
：drawImage（图片,sx,sy，swidth,sheight,x,y,width,height）
：sx,sy=剪切的位置 swidth,sheight=剪切的宽高
x,y= 定位位置 width，height=显示的大小
设置背景： 创建画布名.
：.createpattern(图，平铺方式) 指定的方向重复指定的元素
渐变：
：.createLinearGradient(x1,y1,x2,y2) 创建线性渐变
x1,y1=起点 x2,y2=终点
：.createRadialGradient(x1,y1,r1,x2,y2,r2)创建放射性渐变
（3）共同属性：渐变名.
：.addColorStop(位置（0-1），颜色)
Canvas文本
：.strokeText（文字，x,y） 空心文字
：.fillText（文字，x,y） 实心文字
：.font =（“40px 宋体”） 文字大小
：.textAlign=（left=start,right=end,center）水平对齐方式
：.textBaseline（top,middle,bottom） 垂直对齐方式
阴影：
：shadowOffsetX / shadowOffsetY （向x,y轴偏移）
：shadpwBlur = 模糊
：shadowcolor 颜色
第五单元
新选择器：
：querySelsctor（） 单个
：querySelsctorAll（） 多个
拖拽事件：
：draggable： 设置true 可以实现拖拽
拖拽事件元素（拖拽事件元）：
：.ondragstart 开始拖
：ondrag 正在拖（连续触发）
：ondragend 拖动结束
目标元素事件：
：.ondragenter 进入目标
：.ondragover 在目标的上面
注意：（有ondrop事件必须在on大染缸ondragover加阻止默认事件 e.preventDefault（））
：.ondragleave 离开目标
：ondrop 释放目标
拖放事件3 （可以拖拽除图片外的其他标签）
格式：
：设置图片event.dataTransfer.setData（“url”,this.src）
：设置内容 event.dataTransfer.setData（“nr”,this.src）
事件：
：.dataTransfer 对象
setData（） 设置数据
getData（） 获取数据
：effectAllowed 设置光标样式
第六单元 本地存储
对象：
：localStorage（） 存储的数据没有时间的限制
：sessionStorage（） 有时间限制 用户关闭浏览器会删除
对象方法：
：setItem（key，value） 保存数据
：getItem（key） 读取数据
：removeItem（key） 删除单个
：clear（） 删除多个
：.key（index） 索引的key
检测获取的内容类型
Typeof
转换对象的方法
：parse（） 字符串转换为对象
：stringify（）对象转化为字符串
第七单元 css3选择器
相邻选择器
：.a+.b + 相邻的下一个紧跟元素
：.a~.b ~相邻后面所有不紧跟元素
属性选择器
：[class] 只选取属性名
：[class = ”a”] 只选中该属性名的属性值
：[class ~=”ab”] 只选中该属性名中具有该属性值 ab=词
：[class ^= ”a”] 只选中以.a值开头的第一个元素
：[class $= ”a”] 只选中以.a值结尾的最后元一个元素
：[class *= ”a”] 包含a的都选中
：[class |= ”a”] 只选中以a/a- 开头，以a开头的时候，只
允许有一个值a
伪类选择器 （爱恨原则 （love hate））
：:link 伪类 未访问链接 的添加样式
：:visited 伪类 已访问链接 的添加样式
：:hover 伪类鼠标移到元素上的添加样式
：:active 伪类鼠标点击与释放之间发生的事件
结构性伪类
：:root 文档的根元素
：:not（.a） 非指定的元素
：:empty 没有子元素的每一个父元素（空盒子）
：:target 用于选取当前活动的目标元素（用于锚链接）
：:first-child 父级下的第一个子元素。
：:last-child 父级下的最后一个子元素
：:only-child 每个父级下唯一子元素。
2n=even=偶数 2n+1= odd = 奇数
：E:nth-child(n) 父级下的第n个子元素，且这个元素得是E
元素；
：E:nth-last-child(n) 每个父级下的第n个子元素 ，且这个
素得是E元素；从最后一个子元素开始计数。
：:nth-of-type(n) 每个父级下的第n个子元素
：:nth-last-of-type(n) 每个父级下的第n个子元素 ，从最
一个元素开始计数。最后一个子元素
表单属性
：:focus 选取获得焦点的元素
：:enabled 元素处于可用状态时的样式
：:disabled 元素处于不可用状态时的样式
：:read-only 元素处于只读状态时的样式
：:read-write 可读可写的元素
：:checked 单选框 / 复选框处于选中状态时的样式
：:default页面打开时，默认选中状态的单选框/复选框的样式
：:indeterminate当页面打开时，单选框中没选中状态时样式
：::selection伪类选择器指定当元素处于选中状态时的样式
伪元素选择器
（1）：:first-line 选取指定选择器的首行。
（2）：:first-letter: 元素中的首字母或第一个字使用样式；
（3）：:before: 某个元素之前插入内容
（4）：:after: 某个元素之后插入内容；
（5）：Content 属性：需要与:before :after 配合使用！
第八单元 移动端头部标签
http-equiv 文件头作用（正确和精确显示网页内容）
http-equiv 属性
：refresh 文档自动刷新时间间隔
：content-type 文档的字符编码
：content-language 显示语言的设定
：X-UA-compatible 文件兼容性
name : HTML文档的描述 关键字 作者
name属性
：description 页面的描述
：keywords 逗号的分隔的关键字词列表
Viewport（重点）（用户网页的可视区域）
Viewport属性
：width=device-width 设备宽/高度
：initial-scale=1 初始缩放比例
：maximum-scale=1 最大缩放比例
：minimum-scale=1 最小缩放比例
：user-scalable （no yes）用户是否可以手动缩放
format-detection格式检测
format-detection属性
（1）：telephone（no=禁止把数字转化为拨号链接）
（yes=开启数字转化为拨号链接）
：email=（no禁止作为邮箱地址yes开启文字默认邮箱地址）
：adress=（no禁止跳转至地图yes开启地址直接跳转地图）
：-webkit-user-select：禁止选中文本
none=文本不选择 text= 可以选择文本
：-webkit-appearance:none;去掉表单样式
-webkit-tap-highlight-color:rgba(0,0,0,0); 去掉a、input
button点击时的蓝色外边框和灰色半透明背景
：-webkit-input-placeholder {color}修改 placeholder样式
重点（em rem）
：em 相对父级元素来设置字体
：rem 相对body,html根源来设置字体大小
第九单元 盒模型
盒模型 （2种）
：标准模式 box-sizing: content-box;
标准盒宽高=width/height+padding+border+margin
：怪异模式 box-sizing: border-box;
怪异盒宽高=width/height+margin=padding+border+margin+内容区宽高
弹性盒：是除css3的新的布局模式（由弹性容器和弹性元素组成）
弹性盒的基本属性
：display（
属性值： flex=块元素布局
inline-flex =内元素布局
：flex-direction 主轴方向
属性值：row=从左到右
row-reverse=从右到左
column=从上到下
column-reverse=从下到 上
（3）：flex-wrap 是否换行
属性值：nowrap=不换行
wrap=换行
wrap-reverse=倒序换行
（4）：flex-flow 复合属性 （方向 换行）
属性值：(row nowrap ) (column nowrap)
（5）：justify-content 水平对齐方式
属性值：flex-start=左对齐
flex-end=右对齐
center=居中
space-between=两端对齐
space-around= 分布元素周围
：align-items 垂直对齐方式
属性值：flex-start=上对齐
flex-end=下对齐
center=居中
baseline=以第一行的文字位置为基准
stretch=拉升 子元素高度为0/auto
：align-content 各个行的对齐方式
属性值：flex-start=上对齐
flex-end=下对齐
center=居中
space-between=两端对齐
space-around= 分布元素周围
stretch=拉升 子元素高度为0/auto
：条目的顺序：order（自定义子元素的显示顺序）
：条目尺寸的弹性（子元素）
属性值：flex-grow 扩张比例
flex-shrink 收缩比例
：文字对齐方式：align-self