疯狂HTML5、CSS3、Javascript讲义---HTML5部分.doc

HTML5常用元素和属性2012年8月21日10:04HTML5的三点规则：1.兼容性：在老版本的浏览器上也可以运行2.实用性：没有特别复杂的功能，只是封装了常用的简单功能3.非革命性：并不是革命性的发展，只是一种妥协式的规范一、HTML5保留的常用属性二、HTML5新增的属性三、HTML5新增的拖放API通过DataTransfer对象，可以让拖放操作完成更多的功能下面实现一个允许通过拖放来添加、删除收藏夹的功能：通过设置DataTransfer对象的effectAllowed、dropEffect属性可以控制拖放行为，effectAllowed用于控制被拖动元素的拖动行为，通常放在ondragstart事件监听器中，dropEffect则控制被放入目标组件的行为，因此通常放在ondragover事件监听器中如果dropEffect设置的拖放行为不在effectAllowed属性设置的多个拖放行为之内，拖放操作将会失败改变拖放图标setDragImage属性可以改变拖放图标HTML5表单相关元素和属性2012年8月21日10:05一、HTML原有表单及表单控件1.表单元素form的相关属性：action-表单被提交到哪个地址method-GET/POST请求类型enctype-对表单内容编码所采用的字符集 -application/x-www-form-urlencoded（默认编码方式，URL编码格式） -multipart/form-data（二进制方式处理表单-文件上传） -text/plain（直接通过表单发送邮件）name-指定表单唯一名称target-打开目标URL方式有name属性的会生成请求参数，否则不会生成；表单属性设置为disabled则不会被提交2.input元素size指定元素宽度，maxlength指定最大输入字符数3.label元素当用户单击元素所生成的标签时，该标签关联的表单控件元素会获得焦点让标签和表单控件关联有两种方式：隐式关联：使用for属性显式关联：将表单元素直接放在标签中（IE不支持）4.button元素比功能更强大、更丰富不要在button标签之间放置图像映射，会干扰表单按钮的行为5.列表框和下拉列表生成的是下拉列表还是列表框完全由是否指定size或multiple属性来决定，只要指定了其中一个属性，就会生成列表框6.使用textarea指定文本域textarea元素不能指定value属性代码：效果演示：二、HTML5新增属性和元素1.html5为表单控件新增的属性form属性：可以让表单控件在元素之外，提高了灵活性formaction属性：处理表单内包含了多个按钮，不同按钮提交到不同action的场景formxxx属性：与formaction相似，用于指定formenctype、formmethod、formtarget等属性autofocus属性：为某个表单添加该属性后，浏览器打开页面时会自动获得焦点（整个页面最多只能定义一个）placeholder属性：单行文本框、多行文本域显示的提示信息list属性：用于实现下拉框和文本框结合实现自动补全功能，需要与datalist标签配合使用autocomplete属性：主要用于和list组合，当开发者不希望某些用户看到下拉菜单，可通过设置autocomplete来实现，on表示显示下拉菜单，off表示不显示（目前只有Opera支持）HTML5代码：效果：2.功能丰富的input元素Chrome支持部分input属性Opera支持较好：3.HTML5新增表单属性：HTML5新增了一个表单控件，用于显示输出，比如计算结果或者脚本输出必属于某个表单，要么定义在某个表单内部，要么指定form属性三、HTML增强的文件上传域1.FileList对象和File对象两个属性：accept：指定上传文件类型（指定MIME类型）不要单靠accept过滤文件，这只是客户端过滤，很脆弱，如果要过滤，还需要在服务器端设置过滤multiple：允许上传多个文件javascript通过files属性访问上传文件返回一个FileList对象，FileList对象相对于一个数组，开发者可以通过类似访问数组的方式访问每一个File对象File对象包含如下属性：name、type、size等如果要访问文件具体内容（二进制数据），需要借助FileReader等对象2.使用FileReader读取文件内容FileReader同样是一个js对象提供了三个读取文件的方式：readAsText(file,encoding),以文本文件的方式读readAsBinaryString(file)，以二进制方式读取readAsDataURL(file)，以base64方式把文本内容编码成DataURL格式字符串效果演示（文本方式读取）：显示进度条：效果显示：四、HTML5新增的客户端校验1.使用校验属性执行校验：指定该控件必须填写：指定该控件必须符合的正则表达式min/max/step：只对数字类型、日期类型有效2.调用checkValidity方法进行校验除此之外，HTML5为所有表单、表单控件提供了一个validity属性，该属性的值是一个ValidityState对象，该对象代表了表单、表单控件的输入校验状态，其中ValidityState的valid属性可以表示该表单、表单控件是否通过输入校验3.自定义错误提示setCustomValidity()方法调用了某个控件的该方法意味着该表单控件没有通过输入校验。因此只有当表单控件本身没有通过输入校验时才能调用该方法，而不能随便直接调用该方法，否则可能导致本来可以通过校验的表单控件也变成了不能通过校验了目前浏览器对自定义错误的支持不是很理想4.关闭校验为元素增减novalidate属性，该属性的值要么是novalidate要么是省略属性值为或元素设置formnovalidate属性，该属性的值要么是novalidate要么是省略属性值第一种方式将会关闭表单的输入校验功能，第二种方式则是指定的按钮或表单失去校验检验HTML的绘图支持2012年8月22日23:15一、使用canvas元素HTML新增了一个canvas元素，专门用于绘制图形，但实际上该元素自身并不绘制图形，只相当于一张空画布，要想画图，必须借助JavaScript脚本进行绘制向元素上画图，需要经过三个步骤：获取元素对应的DOM对象，这是一个Canvas对象；调用Canvas对象的getContext()方法，返回一个CanvasRenderingContext2D对象；利用CanvasRenderingContext2D对象的方法画图。效果演示：二、绘图1.canvas绘图基础：CanvasRenderingContext2DHTML5绘图的组件是Canvas对象，但是绘图的核心API是CanvasRenderingContext2D，他提供了一系列的方法和属性供绘制图形使用2.绘制几何图形fillRect：填充一个矩形strokeRect：绘制一个矩形边框CanvasRenderingContext2D只提供了这两个绘制几何图形的方法，并没有提供绘制其他几何图形的方法3.绘制字符串fillText：填充字符串strokeText：绘制字符串边框字体的对齐方式：textAlign：水平对齐方式textBaseAlign：垂直对齐方式4.设置阴影shadowBlur：阴影的模糊度shadowColor：阴影的颜色shadowOffsetX：阴影在X方向的偏移shadowOffsetY：阴影在Y方向的偏移5.使用路径为了在Canvas上绘制更加复杂的图形，必须在Canvas上启用路径，借助路径来绘制图形按如下步骤：调用CanvasRenderingContext2D的beginPath()方法开始定义路径调用CanvasRenderingContext2D的各种方法添加子路径调用CanvasRenderingContext2D的closePath()方法关闭路径调用CanvasRenderingContext2D的fill()或者stroke()方法来填充路径或者绘制路径边框CanvasRenderingContext2D提供了如下方法添加子路径：arc(x,y,radius,startAngle,endAngle,counterclockwise(boolean值，true为逆时针)：添加一段弧arcTo(x1,y1,x2,y2,radius)：添加一段弧,确定这段圆弧的方式是假设从当前点到P1(x1,y1)绘制一条线条，再从P1(x1,y1)到P2(x2,y2)绘制一条线条，arcTo()则绘制一段同时与上面两条线条相切，且半径为radius的圆弧bezierCurveTo:贝济埃曲线lineTo(x,y):添加一段线段moveTo(x,y)：移动到(x,y)quadraticCurveTo：二次曲线rect(x,y,width,height):添加一个矩形6.绘制曲线bezierCurveTo:贝济埃曲线quadraticCurveTo：二次曲线7.绘制位图drawImage方法该方法需要传入Image对象，创建Image对象采用如下方法：Image img = new Image(width,height);img.src = 图片地址;需要指出的是为Image对象的src属性赋值后，Image对象会去装载指定图片，这种装载是异步的，需要一定的时间开销，为保证图片装载完成之后才去绘制，可用如下代码来绘制：Image img = new Image(width,height);img.src = 图片地址;img.onload = function()/在该函数里绘制三、图形特效处理1.使用坐标变换translate:平移坐标系统scale：缩放坐标系统（水平方向上缩放sx,垂直方向上缩放sy）totate：旋转坐标系统还提供了save和restore方法，避免多次坐标变换后累加结果需要指出的是save方法保存的绘图状态，不仅包括当前系统的坐标状态，还包括填充风格、线条风格等各种绘图状态，但是不包括Canvas上绘制的图形2.坐标变换与路径结合使用雪花飘飘的动态效果：3.使用矩阵变换CanvasRenderingContext2D提供了一种更加通用的坐标变换方法：transform(m11,m12,m21,m22,dx,dy)这是一个基于矩阵变换的方法，前面三个变换方法都可以通过transform来实现，只是比较复杂x,y-x*m11+y*m21+dx,x*m12+y*m22+dy实现自定义变换-倾斜变换：对于倾斜变换而言，Y坐标无需变换，只要将X坐标横向移动tan(angle)*Y即可，这就是实现倾斜变换的理论基础四.控制叠加风格通过CanvasRenderingContext2D的globalCompositeOperation属性来实现五.控制填充风格除了fillStyle，CanvasRenderingContext2D还支持渐变填充(CanvasGradient)和位图填充(CanvasPattern)1.线性渐变调用CanvasRenderingContext2D的createLinearGradient方法创建一个线性渐变，返回一个CanvasGradient对象；调用CanvasGradient对象的addColorStop方法向线性渐变中添加颜色变化；将CanvasGradient对象赋给CanvasRenderingContext2D的fillStyle或strokeStyle属性。2.圆形渐变createRadialGradient3.位图填充createPattern六、位图处理1.位图裁剪clip这个方法会把位图当前路径裁剪下来：将要裁剪的部分定义成Canvas路径；调用CanvasRenderingContext2D的clip方法把路径裁剪下来；绘制位图-被裁剪部分才会显示。2.像素处理getImageData(int x,int y,int width,int height):该方法获取从Canvas上从(x,y)点开始，宽为width，高为height的图片区域的数据，该方法返回值是一个CanvasPixelArray对象（包含width、height、data属性，datar1,g1,b1,a1,r2,g2,b2,a2,.,rN,gN,bN,aN,每四个元素确定一个像素点）putImageData(CanvasPixelArray data,x,y):把data里的数据放入Canvas中从(x,y)开始的区域，该方法直接改变Canvas上的图像数据通过以上两种像素处理方法，可以对图片进行各种复杂的处理，例如改变图片透明度、高亮、剪切、复制等；如果配合一些算法理论，甚至可以对图片进行模糊、降噪等复杂的滤波处理。1）带透明度的画图2）高亮画图：所谓高亮就是把图片像素的R、G、B值都按比例放大七、输出位图toDataURL(String type):type是MIME字符串DataURL格式是一种保存二进制文件的方式，我们既可把图片转换为DataURL格式的字符串，也可把DataURL格式的字符串恢复成原来的文件实际上，Canvas可以把图片转换成DataURL格式的字符串，