前言:
这是属于我的总结，如果哪里有说错，还请各位大佬指点，详细的可以自行去菜鸟教程自学。这一期有点特殊，因为HTML5内容很多，所以分成多次总结，以免过长小伙伴没兴趣看下去。
什么是Canvas
HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
标签只是图形容器，您必须使用脚本来绘制图形。 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
简单的说就是可以实现浏览器画画，这个是一个很重要的标签，在各大官网都会有利用，配合JS能实现很炫酷的效果。
来实现一个简单的效果
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
先创建好一个画布，什么内容都没有，通过JS去添加
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
这样我们就画出一个简单红色的矩形
能实现的东西很多，具体想深究可以前往菜鸟教程学习
什么是SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用
XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准
可以简单理解成矢量图
也是可以话的，只是路径这个东西很复杂
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
五角星
出自菜鸟教程
SVG 与 Canvas两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
HTML5 MathML
这个功能可以说是完善了一下之前的不足，之前是没办法表现数学中平方的计算的，不是说不可以计算，而是写不出来
源码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
</body>
</html>
每个浏览器不同，显示效果也不太一样，大概就是a的平方加b的平方等于c的平方，平方稍微可能还是有点大了。
好，关于新增的标签就说到这里，下一篇将讲述关于HTML5最令我震撼的地方，比如用户的位置信息。。。