1、HTML5多媒体
HTML5 是HTML4的升级版。不是特定的开发语言。javascript
目前支持的浏览器有 safari、opera 、firefox 、 chrome、ie 可是较老的版本不支持。html
标签：html5
<audio> 音乐播放器java
controls=“controls” 为显示音乐播放器面板jquery
<source src="连接" type="audio/mpeg（mp3,ogg）"/>git
</audio>程序员
<video> 视频播放器chrome
controls="controls" 视频播放器面板shell
width= 音乐播放器宽度canvas
height= 音乐播放器高度
<source src="连接" type="video/mp4"/>
</video>
document.getElementById("XXX").load 从新加载
document.getElementById("XXX").play 播放
document.getElementById("XXX").pause 暂停
2、HTML5表单
HTML5 表单新增特性
<input type="number"/> 数字
<input type="url"/> URL
<input type="email"/> 邮箱
<input type="color"/> 颜色拾取
<input type="date"/> 日期选择
<input type="range"/> 范围
input新增经常使用属性
min 最小
max 最大
placeholder 默认提示
autocomplete 自动提交
autofocus 自动聚焦
novalidate 提交时不要验证(默认自动验证)
3、画布
HTML5 canvas 画布
<canvas></canvas>
例如：<canvas id="" width="" height=""></canvas>
canvas 自己不能画图，只能借助于javascript画图。
因为jquery并不能保证彻底支持html5的特性，因此建议使用原生的JS语法。
canvas通常前2个步骤为：
一、var can = document.getElementById("") //获取canvas对象
二、var con = can.getContext("2d");//获取上下文。
注意：通常canvas经过上下文去画图，根据图形的特殊性，矩形，圆，线段等统一归类为2d
注意：在canvas画布上画图形以前，要给canvas必定的尺寸以后，再定义在画布上显示的东西，例如：去看电影，幕布就是canvas，显示的电影图像就是咱们要去画的矩形、圆形 等。
注意：在canvas中，画图大体有2个类型：实心和空心。
分别用fill和stroke 表示。经常使用语法以下：
一、stroke(fill)Text 空心(实心)文本
二、stroke(fill)Style 空心(实心)样式
三、stroke(fill) 开始绘制空心(实心)图
四、stroke(fill)Rect 空心(实心)坐标
五、clearRect(x,y,width,height)实际上就是橡皮擦，清除某一块区域的内容
canvas基本分类：
一、画矩形。
var can = document.getElementById("");
var con = can.getContext("2d");
con.fillStyle = "" //设置颜色
con.fillRect(x,y,width,height) //设置矩形显示的尺寸
二、画线段。
var can = document.getElementById("");
var con = can.getContext("2d");
con.moveTo(x,y); //起始坐标位置
con.lineTo(x,y); //结束坐标位置
三、画圆。
var can = document.getElementById("");
var con = can.getContext("2d");
con.beginPath();//开始画圆
con.arc(圆心x,圆心y，半径r，开始弧度，结束弧度)；//顺时针
con.strokeStyle = "white"; //设置空心圆颜色.
con.stroken(); //开始绘制
con.closePath();//结束画圆
四、渐变 矩形。
var can = document.getElementById("");
var con = can.getContext("2d");
var grd = con.createLinearGradient(开始x,开始y,结束x,结束y);//建立一个渐变矩形
grd.addColorStop( 0 ， 开始渐变颜色);
grd.addColorStop( 1， 结束渐变颜色);
con.fillStyle = grd; //实心矩形颜色方案为grd
con.fillRect(x,y,width,height);//这个渐变图形在画布上的坐标。
五、渐变 圆形。
var can = document.getElementById("");
var con = can.getContext("2d");
var grd = con.createRadialGradient(开始的圆心x,开始的圆心y,开始的圆半径,结束的圆心x,结束的圆心y,结束的圆半径);//建立一个渐变圆 。 实际上就是一个圆向另外一个圆渐变！
grd.addColorStop( 0 ， 开始渐变颜色);
grd.addColorStop( 1， 结束渐变颜色);
con.fillStyle = grd; //实心矩形颜色方案为grd
con.fillRect(x,y,width,height);
拖拽：实际上是两个动做。
在HTML5中，特指把一个控件拖拽到另外一个控件中。
drag drop
使用步骤：
一、设置被拖拽的事件 onDrag
二、设置开始拖拽的事件 dragstart
三、设置被放入的事件 onDrop
四、设置开始放入事件 dropover
地图定位：定位经纬度。 //有浏览器兼容性限制
navigator.geolocation.getcurrentposition( 回调位置函数名)
position.coords.latitude; //纬度
position.coords.longitude; //经度
4、CSS3
CSS3 有以下特性：
一、:in-range 范围内 例：input:in-range {border:1px solid blue; } input:out-of-range { border:2px double red; }
二、:out-range 范围外
三、:valid 经过
四、:invalid 没有经过
五、:enabled 能够填写 例：nput[type="text"]:enabled { background: seashell;} input[type="text"]:disabled { background: plum;}
六、:disabled 禁用元素
七、:required 必填选项
八、:optional 可选(默认)
九、:read-only: 选择器用于选取设置了 "readonly" 属性的元素。
十、:nth-of-type 选择器
十一、[属性^=值] 选择器匹配元素属性值带指定的值开始的元素。
注意：从最开始匹配，从左往右
十二、[属性$=值] 选择器同理，匹配元素属性值带指定的值结尾的元素。
注意：从最后开始匹配，可是仍是从左往右数
1三、[属性*=值] 选择器匹配元素属性值包含指定值的元素。
注意：只要出现匹配值，就会被匹配
1四、元素1~元素2 选择器匹配出如今 元素1 后面的 元素2。元素1 和 元素2 这两种元素必须具备相同的父元素。
1五、锚点 ：咧：<a href="#firstChapter">第一章 血尸</a>点击跳到某部位
总结：这周的总结也是今年的总结，书读得太少，写不出不少字，我以为对程序员来说写文章很是重要，新的一年在学习工做之余多读读书，提升本身的文学修养。迷茫的缘由就是想的太多，作的太少，只要一旦放手去作，就会发现事情并不像想象的那么难。我也制定了一些新的计划，但愿可以实现吧。