HTML5——初识html5

一.新增标签

1. <header>用在页面的头部或者版块的头部</header>
2. <footer>用在页面的头部或者版块的头部</footer>
3. <section>用来划分区域</section>
4. <article>主体</article>     <aside>和主体相关的附属信息</aside>

   	<article>
   		<aside>侧边栏</aside>
   		<section>内容区域</section>
   	</article>

   
   
5. <time>时间</time>
6. <datalist></datalist>选项列表。与input元素配合使用，来定义input可能的值

   	<input type="text" list="valList" />
   	<datalist id="valList">
   		<option value="javascript">javascript</option>
   		<option value="html">html</option>
   		<option value="css">css</option>
   	</datalist>

   
   
7. <address>定义文章或页面作者信息</address>
8. <mark>需要标记的词或句子</mark>
9. <progress max="100" value="76"></progress>   进度条
10. 输入型控件
    email：电子邮箱文本框 ，当输入的不是邮箱的时候，验证通不过
    tel：电话号码，输入的不是号码，验证通不过
    url：网址，输入的不是网址，验证通不过
    search：搜索引擎
    range：特定范围内的数值选择器
    number：只能包含数字的输入框，并且提供数字加减选择
    color：颜色选择器
    datatime ：显示完整日期
    datatime-local：显示完整日期，不包含时区
    time：显示时间，不含时区
    date：显示日期
    week：显示周
    month：显示月
11. 表单属性
    placeholder：输入框提示信息
    autocomplete：是否保存用户输入值
    autofocus：指定表单获取输入焦点
    list和datalist：为输入框构造一个选择列表（list值为datalist的id）
    required：强制用户必须输入
    pattern：正则验证；例：pattern="/d{1,5}"
    formaction：在submit里定义提交地址
12. 表单验证：
    validity对象，通过下面的valid可以查看验证是否通过，如果八字验证都通过返回true，一种验证失败返回false
    oTest.addEventListener("invalid",fn1,false);
    valueMissing：输入值为空时
    typeMismatch：输入值与预期类型不匹配
    patternMismatch：输入值不满足不满足pattern正则
    toolong：超过maxLength最大时
    rangeUnderflow：验证range最小值
    rangeOverflow：验证range最大值
    stepMismatch：验证range的当前值是否符合min、max、step的规则
    customError：不符合自定义验证
    formnovalidate属性：关闭验证

二.新增选择器

1. 新的选择器
   querySelector 用法：var oDiv=document.querySelector('.box');  //只能选择一组中第一个元素
   querySelectorAll   用法：var oDiv=document.querySelectorAll('.box')  //选择一组中元素，数组
   getElementsByClassName  用法：var oDiv=document.getElementsByClassName  ('box')  //获取class为box的元素，数组
2. 获取class列表属性
   classList：
   length：class的长度
   add()：添加class方法
   remove()：删除class方法
   foggle()：切换class方法
   用法：oDiv.classList.add('box1');     oDiv.classList.remove('box3');
      oDiv.classList.foggle('box2');  如果oDiv中有box2则删除box2，没有则添加

三.json的新方法

parse()：把字符串转换成json，字符串中属性要严格加上引号

stringify()：把json转化成字符串，会自动把双引号加上

例：var a={name:'lhf'}

var str = JSON.stringify(a);

var b = JSON.parse(str);

alert(b.name);

四.历史管理

onhashchange：改变hash值来管理

history：

服务器下运行

pushState：三个参数：数据  标题    地址(可选)

popstate事件：读取数据  event.state

五.元素拖放

draggable   设置为true，元素就可以拖拽了

例：

	<ul>
		<li draggable="true">a</li>
		<li draggable="true">b</li>
		<li draggable="true">c</li>
	</ul>

拖放事件：

拖拽元素事件：事件对象为被拖拽元素

dragstart，拖拽前触发

drag，拖拽前，拖拽结束之间，连续触发

dragend，拖拽结束触发

目标元素事件：事件对象为目标元素

dragenter：进入目标元素触发，相当于mouseover

dragover：进入目标、离开目标之间，连续触发

dragleave：离开目标元素触发，相当于mouseout

drop：在目标元素上释放鼠标触发

火狐下需要设置dataTransfer对象的setDate方法才可以拖拽除图片外的其他标签

dataTransfer有以下方法：

setData()：设置数据key和value（必须是字符串）

getData()：获取数据，根据key值，获取对应的value

effectAllowed：设置光标样式（none,copy,copyLink,copyMove,link,linkMove,move,all和uninitialized)

setDragImage：三个参数：指定的元素，坐标X，坐标Y

files：获取外部拖拽的文件，返回一个fileslList列表，还有一个type属性，返回文件类型

FileReader

readAsDataUrl ：参数为要读取的文件对象，将文件读取为DataUrl

onload：当读取文件成功时触发此事件

this.result 来获取读取的文件数据，是图片则返回base64格式的图片数据

六. canvas：用于绘制图形

translate：偏移，从起始位置为基准点，移动当前坐标位置

rotate：旋转，参数为弧度

scale：缩放

1. 绘制环境：getContext('2d'); //目前支持2d的场景
   
2. 绘制方块
   fillRect(L,T,W,H)：默认颜色是黑色 strokeRect(L,T,W,H)：带边框的方块
3. 设置绘图
   fileStyle：填充颜色
   lineWidth：线宽度，是一个数值
   strokeStyle：边线颜色
4. 边界绘制
   lineJoin：边界连接点样式：miter（默认）round（圆角）bevel（斜角）
   lineCao：端点样式：butt（默认）round（圆角）squre（高多出宽一半的值）
5. 绘制路径
   beginPath：开始绘制路径
   closePath：结束绘制路径
   moveTo：移动到绘制的新目标点
   lineTo：新的目标点
   stroke：画线，默认黑色
   fill：填充，默认黑色
   rect：矩形区域
   clearRect：删除一个画布的矩形区域
   save：保存路径
   restore：恢复路径
6. 绘制圆：
   arc(x,y,半径,起始弧度,结束弧度,旋转方向)
   x，y：起始位置
   弧度与角度的关系：弧度=角度*Math.PI/180
   旋转方向：顺时针（默认false）、逆时针（true）
   
7. 绘制其他曲线
   arcTo(x1,y1,x2,y2,r)：第一组坐标，第二组坐标，半径
   quadraticCurveTo(dx,dy,x1,y1)：贝塞尔曲线：第一组控制点，第二组结束坐标
   bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)：贝塞尔曲线，第一组控制点，第二组控制点，第三组结束坐标
8. 插入图片：等图片加载完，再执行canvas操作
   drawImage(oimg,x,y,w,h)；oImg：当前图片x,y：坐标；w,h：宽高
9. 设置背景
   createPattern(oImg,平铺方式)  //平铺方式可以是：repeat、repeat-x、repeat-y、no-repeat
10. 渐变
    createLinearGradient(x1,y1,x2,y2);  线性渐变 第一组参数：起始点坐标，第二组参数：结束点坐标; addColorStop(位置，颜色)添加渐变点
     
    createRadialGradient(x1,y1,r1,x2,y2,r2); 放射性渐变；第一个圆的坐标和半径，第二个圆的坐标和半径
11. 文本
    strokeText(文字,x,y)；文字边框
    fileText(文字,x,y)；文字填充
    font：字体大小
    textAlign：默认是start跟left一样的效果end  right   center
    textBaseline：文字上下的位置；默认：alphabetic
12. 文本、阴影
    measureText()：measureText(str).width：只有宽度，没有高度
    shadowOffsetX、shaowOffsetY：x轴偏移，Y轴偏移
    shadowBlur：高斯模糊值
    shadowColor：阴影颜色
13. 像素
    getImageData(x,y,w,h)；//获取图像数据
    putImageData(获取图像,x,y)；//设置新的图像数据
    属性：width：一行的像素个数；Height：一列的像素个数；data：一个数组，包含每个像素的rgba四个值，每个值都在0~255之间
14. 合成
    全局阿尔法值：globalAlpha
    覆盖合成：globalCompositeOperation属性
15. 将画布导出为图像
    topDataUrl
16. 事件操作
    isPointInPath：是否在点击范围内      jCanvaScript(canvas中的jquery)
    http://jcscript.com/

七.跨文档消息通信

XMLHttp