10分钟看懂HTML5

可以看到语义标签和普通标签一样了之后添加类，标签具有一定的语义，增加了代码的可读性，优化了网站seo。不过我们之前说过，H5存在一定的兼容性问题，语义标签在ie8中会出现问题——无法识别。这时，浏览器会把语义标签当作一个[custom]标签，当作一个内联元素。那么我们如何处理兼容性问题呢？如上所述，浏览器将语义标签视为自定义标签，所以让我们创建这个[custom]标签，document.createElement('nav');之后别忘了语义标签也会被视为Inline元素，然后设置display:block；如所须。如果这个方法使用的标签太多的话有点麻烦，不用担心↓↓↓。通过页面中引入的js插件html5shiv.js，可以支持语义标签。然后想想，如果是自己能支持的浏览器，就会多请求一个脚本，造成资源浪费，往下看↓↓↓↓。完美解决方案，把脚本引用放在下面的代码块点我查看权威语义标签文档>>>三、H5中的API为了方便开发，H5中新增了很多API，包括获取元素属性、文件读取、网络状态，以及地理位置，本地存储等1.获取元素，类名，自定义属性获取元素的传统方式是我们习惯引入jq，然后写$('')获取一个元素，但是H5提供了比jq更方便的方法。如下：document.querySelector("selector");//Selector:可以是css中的任意选择器，通过该选择器只能选择第一个元素。document.querySelectorAll("选择器");//与document.querySelector的区别：querySelectorAll可以选择所有符合选择器规则的元素，返回一个列表。querySelector只返回一个元素。获取class样式的方法如下：Dom.classList.add("classname")://给当前dom元素添加class样式Dom.classList.remove("classname");//从当前dom元素中删除类样式Dom.classList.contains("classname");//检测类样式是否包含Dom.classList.toggle("active");//切换类样式（有则删除，无则添加）自定义属性customattribute其实就是对原有自定义属性的升级。我们原来写自定义属性的方式是这样的：vara=$('#text1').attr('_name');H5中的自定义属性是这样的：vara=document.querySelector('#text1').dataset.name;varb=document.querySelector('#text1').dataset['name'];是不是方便直观多了。但是需要注意的是，如果数据名是data-test-name，那么必须使用驼峰命名法来获取document.querySelector('#text1').dataset.testName;document.querySelector('#text1').dataset['testName'];当然，自定义属性也可以添加赋值给Dom.dataset。自定义属性名=值或Dom.dataset[自定义属性名]=值；2.栗子上直接读取文件：varinput=document.querySelector("#file");input.onchange=function(){//获取文件varfile=这个.文件[0]；//开始读取创建一个readervarreader=newFileReader();//开始阅读reader.readAsText(file);//获取读取结果reader.onload=function(){//只有读取文件后才能获取文件内容console.log(reader.result);}}上面的代码很容易理解。唯一需要注意的是，读完文件后一定要等文件读完，也就是触发onload事件的时候。FileReader对象属性，该接口有3个方法用于读取文件并在结果中返回结果：readAsBinaryString---读取文件为二进制代码readAsText---读取文件为文本readAsDataURL---读取文件为提供DataURLFileReader对象：onabort中断时触发onerror，onload发生错误时触发，onloadend在文件读取成功完成时触发，读取完成时触发，无论成功与否onloadstart在读取开始时触发onprogress3.获取网络状态和获取当前网络状态window.navigator.onLine返回一个布尔值，true表示连接上网络，false表示断开网络状态事件1.window.ononline2.window.onoffline4.获取地理位置一次获取当前位置window.navigator.geolocation.getCurrentPosition(success,error);1.coords.latitudedimension2.coords.longitudelongitude注意：该方法不可靠，部分浏览器获取不到。实时获取当前位置window.navigator.geolocation.watchPosition(success,error);functionsuccess(msg,position){}5.本地存储前端技术发展迅速，业务越来越复杂，大量的数据往往存储在本地，传统的cookie，因为大小只有4k，解析复杂，已经不能再满足发展需要。HTML5规范提出的新方案使用sessionStorage和localStorage来存储数据。localStorage：1.永久，可手动清除2.多窗口共享3.容量为20Mapi使用方法如下：window.localStorage.setItem(key,value);//设置存储内容window.localStorage.getItem(key);//获取内容window.localStorage.removeItem(key);//删除内容window.localStorage.clear();//清除内容sessionStorage:1.生命周期为关闭当前浏览器2.只能在当前窗口下访问3.数据大小为5Mapi使用如下：window.sessionStorage.setItem(key,value);//用法与localStorage一致window.sessionStorage.getItem(key);窗口.sessionStorage.removeItem(键);窗口.sessionStorage.clear();4.多媒体标签这里只做简单介绍，因为细节很多，后面会更新专门介绍多媒体标签的文章。视频属性：controls显示控制条属性：autoplay自动播放属性：loop设置循环播放音频属性：同video标签video，支持3种格式，oggmp4WebM，will将三种格式的文件放入源中，浏览器从上到下依次读取，支持的播放。点我查看权威视频标签文档>>>5。canvas标签这里只写一些基本的api使用，以后会更新canvas详细使用的文章。1.开始画画布其实是H5提供的一个标签，使用方法也很简单。首先设置canvas这里要注意一点，设置canvas的大小必须通过设置label属性来完成，不能通过css改变，因为属性改变的只是画布的实际尺寸，而css只是改变标签尺寸，实际画布尺寸不会改变。varcanvas=document.querySelector("canvas");//获取canvas对象varctx=canvas.getContext("2d");//获取绘图上下文2.设置绘图方法后，canvas开始绘图，绘图分为3步，落笔，连线，划笔落笔（求起点坐标）ctx.moveTo(x,y);连接线ctx.lineTo(x,y);strokectx.stroke();//只有stroke边后才能看到图形。绘制图形后，需要打开一个新图层。否则每次调用ctx.stroke()，都会把之前的所有图形都画一遍，导致图形重叠，颜色变深。.新开层的方法如下：ctx.benginPath();设置其他属性的颜色：ctx.strokeStyle="red"线宽：ctx.linewidth="30"备注：不需要单位线连接方式：ctx.lineJoin:round|斜面|miter(default)linecap(线两端的结束方法):ctx.lineCap:butt(defaultvalue)|圆形|square在绘制闭合图形时，最后一行可以通过闭合路径的方式绘制ctx。关闭路径（）；//自动绘制图形的最后一条闭合线3.Gradientschemelineargradientvargrd=ctx.createLinearGradient(x0,y0,x1,y1);//x0-->渐变开始的x坐标//y0-->渐变开始的y坐标//x1-->渐变结束的x坐标//y1-->渐变结束的y坐标grd.addColorStop(0,"黑色");//设置渐变grd的起始颜色。addColorStop(0.5,"黄色");//设置渐变的中间色grd.addColorStop(1,"red");///设置渐变的结束颜色ctx.strokeStyle=grd;//将渐变方案赋值给color属性渐变在ctx.stroke()中的起始位置和结束位置；介于0-1之间，其中0代表开始，1代表结束。中间可以设置任意小数。径向渐变ctx.createradialGradient(x0,y0,r0,x1,y1,r1);//(x0,y0):渐变起始圆的x,y坐标//r0:起始圆的半径//(x1,y1):渐变结束圆的x,y坐标//r1：结束圆的半径4.填充效果ctx.fill();//设置填充效果ctx.fillstyle="value";//设置填充颜色5.非零包围原则当我们绘制一个“背”字形图案并为其填充颜色时，我们使用的是非零包围原则。非零缠绕原理的前提：1.画出的图是闭合图2.画图时，不同图的绘制顺序是顺时针和逆时针。非零缠绕原则：1.找到任意一点，越简单越好2.以这个点为圆心，画一条射线（交点越少越好）3.以该点为轴顺时针旋转射线，如果画相交边的方向和旋转的方向一致，则+1，否则-1，最后将a区域内每条边的值相加，如果等于0，则不被填满。如果它不为0，它将被填充。6、绘制虚线的原理：设置虚线其实就是设置实线和空白部分的直线距离，用数组来描述关系vararr=[10,10];ctx.moveTo(100,100);ctx.lineTo(300,100);ctx.setLineDash(arr);ctx.stroke();数组表示：[10,5]实线10px，空白5px[10,5,20]实线10px，空白5px，实线20px，空白10px实线5px，空白20px。..注意：如果要将虚线改为实线，只需将数组改为空数组即可。七、绘制动画原理：1、绘制描边矩形：ctx.strokeRect(x,y,width,height)2、绘制填充矩形：ctx.fillRect(x,y,width,height)3、清除：ctx。clearRect(x,y,width,height)实现动画效果的步骤：1.先清屏2.绘制图形3.处理变量8.绘制文字并填充文字content.fillText(textcontent,x,y);绘制空心文字content.strokeText(textcontent,x,y);设置文字大小content.font="20px微软雅黑";注意：该属性设置文字大小，文字水平对齐方式必须根据cssfont属性设置default)"文字阴影效果ctx.shadowColor="red";//设置文字阴影的颜色ctx.ShadowOffsetX=值；//设置文字阴影的水平偏移量ctx.shadowOffsetY=value;//设置文字阴影的垂直偏移量ctx.shadowBlur=value;//设置文字阴影的模糊度，值越大越模糊9.第一种绘制图片的方法varimg=document.createElement("img");img.src="1.png";//或者获取页面中的img标签//注意：绘制的方法一定要放在图片中。onload方法中//绘制图片到canvas指定位置content.drawImage(pictureobject,x,y);第二个content.drawImage(img,x,y,width,height);将图片的指定区域绘制到指定的矩形区域content.drawImage(img,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);//sx,sy指的是哪个区域开始绘制的图片，width,sheight指的是截取的图片区域的大小//dx,dy指的是矩形区域字段、dwidth、dheight的位置为取值矩形区域的大小——解决按原比例绘图将图片绘制到一定区域的问题：绘图宽度：绘图高度=原始宽度：原始高度#####10.绘制圆弧内容.arc(x,y,radius,startradian,endradian[,direct]);-参数含义：圆心的x,y坐标radiusradiusstartradian起始弧度，弧度制，一般从0endradian结束弧度开始，一般到2*Math.PI直接方向（默认clockwisefalse）true表示逆时针——0度角在哪里？1、以圆心为圆心向右0角度，顺时针为正，逆时针为负。2.0度位于3点钟位置。-备注:180angle=Math.PI角度与弧度的关系：angle:radian=180:pi-特殊值0度=0弧度30度=π/6（180度的六分之一）45度=π/460度=π/390度=π/2180度=π360度=2π-圆上任意点画法：x=ox+r*cos(弧度);y=oy+r*sin（弧度）；//ox：圆心横坐标//oy：圆心纵坐标//r：圆半径Chestnut:varx=300+100*Math.cos(Math.PI/3);vary=200+100*Math.sin(Math.PI/3);//得到一个点x,yctx.arc(x,y,10,0,Math.PI*2);#####11.平移（坐标系原点的平移）这里的平移指的是坐标系原点的平移。ctx.translate(x,y);-特点：该方法可以重新设置原点的位置。-注意:1.translate(x,y)不能设置值2.与moveTo(x,y)的区别：2-1.moveTo(x,y)是指改变落笔点的位置画笔的，坐标系中的原点位置没有改变2-2.translate(x,y)是改变坐标系中的原点位置#####12.旋转（坐标原点的旋转system)ctx.rotate(radian);//弧度计算方法见弧度绘制#####13.缩放ctx.scale(x,y);可以设置一个值，即x轴和y轴同时按相同比例缩放，也可以设置两个值，即x轴和y轴按对应比例缩放.#六、到这里就写完了。HTML5真的很有用。可以大大提高开发效率，增加代码的可读性。当然，前提是处理好兼容性问题。文章只是初步介绍，帮助没用过的朋友快速了解H5，后面会详细讲解几点。