10分钟了解HTML5
你须要知道的
何为HTML5
HTML5属于上一代HTML的新迭代语言，设计HTML5主要的目的也是为了让多媒体在移动端上获得更好的支持！css
如：video、audio、及canvas等
H5优缺点
H5的优势明显，就是跨平台，如开发了一款H5的游戏，咱们能够很轻易的移植到其余开放平台，甚至也能够经过封装的技术打包成app，因此跨平台性很强大，这也是H5获得开发者承认的主要缘由。
可是缺点也有，就是pc端浏览器支持不太友好，若是项目须要运行在ie8及如下版本或者其余低版本浏览器就要作兼容。html
H5新增特性
1.加入了表单元素
2.取消了过期的显示效果标记 font、center等
3.加入了语义标签
4.增长本地存储
5.加入了一些API
6.canvas标签前端
下面会对这些新特性作大概的介绍↓↓↓html5
1、新表单元素及属性
智能表单控件
以前在写text标签的时候，若是要检验用户输入合法性，就须要写相应的正则表达式，可是在H5中为咱们新增了智能表单控件，省去不少步骤，使用方式以下：git
<input type="email"> //email: 输入合法的邮箱地址 //url： 输入合法的url //number： 只能输入数字 //range： 滑块 //color： 拾色器 //date： 显示日期 //month： 显示月份 //week ： 显示第几周 //time： 显示时间
表单属性
- form属性：
autocomplete=on // 显示表单元素的历史记录，默认开启on，关闭为off novalidate=off // 是否关闭检验，默认不关闭false，关闭为true
- input属性：
// autofocus : 自动获取焦点
// form : 表单外部的标签也能够随着表单提交，只须要在标签是添加属性form="formid"
// list : 在text标签上加入list属性并指定一个id，便可将下拉框与输入框相结合，以下：
<input type="text" list="abc"/>
<datalist id="abc">
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
</datalist>
// multiple： 实现多选效果
// placeholder ： 占位符 （提示信息）
// required： 将该项做为必填项
上面写到的一些标签，在表单提交的时候，若是不符合会弹出提示信息，咱们如何修改这个提示信息呢?正则表达式
1. 表单验证是触发oninvalid事件
2. 经过setCustomValidity方式设置修改内容
2、新语义标签
网页布局结构标签（兼容处理）
首先咱们看下H5中经常使用的语义标签有哪些，以下：canvas
<header></header>
<footer></footer>
<article></article>
<aside></aside>
<nav></nav>
<section></section>
// ……
那咱们在使用这些语义标签的时候须要注意些什么呢？
新的语义标签和咱们以前使用的普通标签，在使用上没有任何区别，api
<nav></nav> = <div class="nav"></div>
能够看到语义标签就像是一个普通标签加上了一个class，这时这个标签就有必定的语义性，增长代码可读性，优化了网站seo。可是咱们以前说过H5有必定的兼容问题，语义标签在ie8中就会出问题——不会被识别。这时浏览器会把语义标签当作是【自定义】标签，而且当作是一个行内元素。
那咱们如何处理兼容问题呢？数组
- 既然上面说了，浏览器把语义标签当作是自定义标签，那咱们就去建立这个【自定义】标签，document.createElement('nav'); 以后别忘了一点，语义标签还会被当成是行内元素，那再根据须要设置下display:block;就行啦。若是标签使用多了这种方式有点麻烦，别急往下看↓↓↓。
- 经过js插件，html5shiv.js，在页面内引入，就能够支持语义标签了。那在想下，若是是自己就能够支持的浏览器就会多请求一个脚本，形成资源浪费，因此再往下看↓↓↓↓。
- 完美解决方案，将脚本引用放到下面的代码块中
<!--[if lte IE 8]>
// 这里的含义是，当当前浏览器版本小于等于8时，就会走到这个if语句中，因此在这里写脚本的请求就将问题解决了。
<![endif]-->
3、H5中的API
H5中为了方便开发，新增了不少api，包括获取元素属性、文件读取、网络状态、地理位置、本地存储等。
1. 获取元素、类名、自定义属性
- 获取元素
传统的方式咱们习惯引入jq，而后去写$('')获取一个元素，可是H5提供了比jq还方便的获取方式。以下：
document.querySelector("选择器");
// 选择器： 能够是css中的任意一种选择器，经过该选择器只能选中第一个元素。
document.querySelectorAll("选择器");
// 与document.querySelector区别： querySelectorAll 能够选中全部符合选择器规则的元素，返回的是一个列表。querySelector返回的只是单独的一个元素。
- 获取类样式
方式，以下：
Dom.classList.add("类名"): // 给当前dom元素添加类样式
Dom.classList.remove("类名"); // 给当前dom元素移除类样式
Dom.classList.contains("类名"); // 检测是否包含类样式
Dom.classList.toggle("active"); // 切换类样式（有就删除，没有就添加）
- 自定义属性
自定义属性实际上是对原有自定义属性的升级，咱们原来写自定义属性的方式是这样的：
<input type="text" _name="123" id="text1">
var a = $('#text1').attr('_name');
H5中的自定义属性是这样的：
<input type="text" data-name="123" id="text1">
var a = document.querySelector('#text1').dataset.name;
var b = document.querySelector('#text1').dataset['name'];
是否是方便不少，直观不少。可是要注意的是：
若是数姓名为data-test-name，那么在获取的时候就要使用驼峰命名法获取
document.querySelector('#text1').dataset.testName;
document.querySelector('#text1').dataset['testName'];
固然自定义属性也能够进行添加和赋值
Dom.dataset.自定义属性名=值 或者 Dom.dataset[自定义属性名]=值；
2. 文件读取
直接上栗子：
<input type="file" id="file">
var input = document.querySelector("#file");
input.onchange = function(){
//获取文件
var file=this.files[0];
//开始读取 建立读取器
var reader=new FileReader();
//开始读取
reader.readAsText(file);
//获取读取结果
reader.onload = function(){
//文件读取完成后才能够获取文件内容
console.log(reader.result);
}
}
上面的代码很好理解，惟一须要注意的一点就是，获取文件内容必定要等文件读取结束后，就是触发onload事件的时候。
- FileReader对象属性，接口有3个用来读取文件方法返回结果在result中：
readAsBinaryString ---将文件读取为二进制编码
readAsText ---将文件读取为文本
readAsDataURL ---将文件读取为DataURL -
FileReader对象提供的事件：
onabort 中断时触发 onerror 出错时触发 onload 文件读取成功完成时触发 onloadend 读取完成触发，不管成功或失败 onloadstart 读取开始时触发 onprogress 读取中
3. 获取网络状态
-
获取当前网络状态
window.navigator.onLine 返回一个布尔值，true为联网，false为断网
-
网络状态事件
1. window.ononline 2. window.onoffline
4.获取地理位置
-
获取一次当前位置
window.navigator.geolocation.getCurrentPosition(success,error); 1.coords.latitude 维度 2.coords.longitude 经度
注：这个方法时不靠谱的，一些浏览器是获取不到的。
- 实时获取当前位置
window.navigator.geolocation.watchPosition(success,error);
function success(msg,position) {
}
5. 本地存储
前端技术飞速发展，业务也愈来愈复杂，常常会在本地存储大量的数据，传统方式的cookie，由于大小只有4k，而且解析复杂，已经不能知足开发需求。HTML5规范提出的新的解决方案，使用sessionStorage和localStorage存储数据。
- localStorage：
1.永久生效，能够手动清除
2.多窗口共享
3.容量为20M
api使用方式以下：
window.localStorage.setItem(key,value); // 设置存储内容 window.localStorage.getItem(key); // 获取内容 window.localStorage.removeItem(key); // 删除内容 window.localStorage.clear(); // 清空内容
- sessionStorage：
1.生命周期为关闭当前浏览器
2.只能在当前窗口下访问
3.数据大小为5M
api使用方式以下：
window.sessionStorage.setItem(key,value); // 用法和localStorage一致 window.sessionStorage.getItem(key); window.sessionStorage.removeItem(key); window.sessionStorage.clear();
4、多媒体标签
这里只作简单的介绍，由于详细的说内容不少，后续会更新专门介绍多媒体标签的文章。
<video></video> 视频
属性：controls 显示控制栏 属性：autoplay 自动播放 属性：loop 设置循环播放
<audio></audio> 音频
属性：同video标签
video，支持3种格式，ogg mp4 WebM，将三种格式文件放入source中，浏览器从上至下读取，支持哪一个就播放哪一个。
<video>
<source src="test/多媒体/111.mp4">
<source src="111.ogg">
<source src="111.WebM">
</video>
5、canvas标签
在这里只写一些基础的api使用，后续会专门更新canvas详细使用的文章
1. 开始绘图
canvas其实就是H5提供的一个标签，使用方式也很简单。
首先设置画布
<canvas width="600" height="500"></canvas>
这里须要注意的一点就是，设置画布大小必定要经过设置标签属性的方式，不能经过css方式改变，由于属性改变的才是画布实际大小，而css改变的只是标签大小，实际画布大小不会改变。
var canvas = document.querySelector("canvas");//获取canvas对象
var ctx = canvas.getContext("2d");//获取绘图上下文
2. 绘图方法
设置好了画布就开始绘图了，绘图分为3个步骤，落笔、连线、描边
- 落笔（找到起始点坐标）
ctx.moveTo(x,y);
- 连线
ctx.lineTo(x,y);
- 描边
ctx.stroke();//只有描边后才能看到图形
当画完一个图形后，须要开启新的图层，否则每次调用ctx.stroke()的时候都会将以前全部的图形再画一次，就会形成图形重叠、颜色变深。开启新图层方式以下：
ctx.benginPath();
- 其余属性设置
颜色： ctx.strokeStyle="red"
线宽： ctx.linewidth="30" 备注：不须要带单位
线链接方式： ctx.lineJoin: round | bevel | miter (默认)
线帽（线两端的结束方式）： ctx.lineCap: butt(默认值) | round | square
在画一个闭合图形是，最后一条线能够经过闭合路径的方式画出
ctx.closePath(); // 自动画出图形最后闭合的线
3. 渐变方案
- 线性渐变
var grd=ctx.createLinearGradient(x0,y0,x1,y1);
// x0-->渐变开始的x坐标
// y0-->渐变开始的y坐标
// x1-->渐变结束的x坐标
// y1-->渐变结束的y坐标
grd.addColorStop(0,"black"); // 设置渐变的开始颜色
grd.addColorStop(0.5,"yellow"); // 设置渐变的中间颜色
grd.addColorStop(1,"red"); /// 设置渐变的结束颜色
ctx.strokeStyle= grd; // 将渐变方案赋值给颜色属性
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="值"; // 设置填充颜色
5. 非零环绕原则
当咱们绘制一个“回”形图案时，进行颜色填充，就用到非零环绕原则。
- 非零环绕原则前提：
1.绘制的图形是闭合图形
2.绘制的时候，绘制不一样图形的顺序有顺时针和逆时针
- 非零环绕原则：
1.任意找一点，越简单越好
2.以这个点位圆心，绘制一条射线（相交点越少越好）
3.以点为轴将射线顺时针旋转，相交的边绘制的方向若是和旋转方向相同则+1，相反则-1，最后将一个区域内各边的值相加，等于0则不填充。非0则填充。
6. 绘制虚线
原理： 设置虚线其实就是设置实线与空白部分直接的距离,利用数组描述其中的关系
var arr = [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....
注意：若是要将虚线改成实线，只要将数组改成空数组便可。
7. 绘制动画效果
- 原理：
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(文本的内容,x,y);
- 绘制镂空文本
content.strokeText(文本的内容,x,y);
- 设置文字大小
content.font="20px 微软雅黑";
注： 该属性设置文字大小，必须按照cssfont属性的方式设置
- 文字水平对齐方式
content.textalign="left | right | center"
- 文字垂直对齐方式
content.textBaseline="top | middle | bottom | alphabetic(默认)"
- 文字阴影效果
ctx.shadowColor="red"; // 设置文字阴影的颜色 ctx.ShadowOffsetX=值; // 设置文字阴影的水平偏移量 ctx.shadowOffsetY=值; // 设置文字阴影的垂直偏移量 ctx.shadowBlur=值; // 设置文字阴影的模糊度，值越大越模糊
9. 绘制图片
-
第一种
var img = document.createElement("img"); img.src="1.png";//或者获取页面内的img标签 // 注：画的方法必定要放到img.onload方法内 //将图片绘制到画布的指定位置 content.drawImage(图片对象,x,y); 第二种
content.drawImage(img,x,y,width,height);
- 第三种
//将图片的指定区域绘制到指定矩形区域内
content.drawImage(img,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
// sx,sy 指的是要从图片哪块区域开始绘制，swidth，sheight 是指截取图片区域的大小
// dx,dy 是指矩形区域的位置，dwidth,dheight是值矩形区域的大小
- 解决图片绘制到某一个区域的按原比例缩放绘制:
绘制宽：绘制高 = 原始宽：原始高
##### 10. 绘制圆弧
content.arc(x,y,radius,startradian,endradian[,direct]);
- 参数含义：
x,y 圆心的坐标
radius 半径
startradian 开始弧度，弧度制，通常从0开始
endradian 结束弧度，通常到2*Math.PI
direct 方向（默认顺时针 false） true 表明逆时针
- 0度角在哪？
1.以圆心为中心向右为0角 顺时针为正，逆时针为负。
2.0度在3点钟放向。
- 备注：
180角度 = Math.PI
角度 和 弧度的关系： 角度:弧度= 180:pi
- 特殊值
0度 = 0弧度
30度 = π/6 (180度的六分之一)
45度 = π/4
60度 = π/3
90度 = π/2
180度 = π
360度 = 2π
- 绘制圆上任意点公式：
x=ox+r*cos( 弧度 );
y=oy+r*sin( 弧度 );
// ox: 圆心的横坐标
// oy: 圆心的纵坐标
// r： 圆的半径
栗子：
var x = 300 + 100 * Math.cos(Math.PI/3);
var y = 200 + 100 * Math.sin(Math.PI/3);
//获取到圆上一点x,y
ctx.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. 旋转（坐标系原点旋转）
ctx.rotate(弧度);
// 弧度计算方式见圆弧绘制
##### 13. 缩放
ctx.scale(x,y);
能够设置一个值，即x轴y轴同时缩放相同比例 也能够设置两个值，即x轴y轴按照相应的比例缩放 # 6、完结 就写到这吧，HTML5真是好处多多，能够大大的提高开发效率、增长代码可读性，固然前提是处理好兼容问题。文章只是作一个初步介绍，帮助没用过的朋友快速了解H5，后续会针对其中几个点作更详细的解释。
- 1. 10分钟了解ZooKeeper
- 2. 10分钟了解TiDB
- 3. 10分钟了解react引入的hooks
- 4. 10分钟了解什么是BFC
- 5. 10分钟了解Javascript-天码营
- 6. 10分钟了解 react 引入的 Hooks
- 7. 10分钟了解设计模式（C#）
- 8. 10分钟带你了解DevOps工具
- 9. 10 分钟了解 Actor 模型
- 10. 10分钟了解微信小程序
- 更多相关文章...
- • SVN分支 - SVN 教程
- • IP地址分配（静态分配+动态分配+零配置） - TCP/IP教程
- • Git五分钟教程
- • 三篇文章了解 TiDB 技术内幕——说存储
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 10分钟了解ZooKeeper
- 2. 10分钟了解TiDB
- 3. 10分钟了解react引入的hooks
- 4. 10分钟了解什么是BFC
- 5. 10分钟了解Javascript-天码营
- 6. 10分钟了解 react 引入的 Hooks
- 7. 10分钟了解设计模式（C#）
- 8. 10分钟带你了解DevOps工具
- 9. 10 分钟了解 Actor 模型
- 10. 10分钟了解微信小程序