HTML5

浏览器支持

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。 为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

header, section, footer, aside, nav, main, article, figure {
    display: block;
}

Internet Explorer 8 及更早IE版本的浏览器不支持以上的方式，
幸运的是， Sjoerd Visscher 创建了 "HTML5 Enabling JavaScript", " shiv":

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Google 资源库在国内不稳定：

<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

HTML5 新元素

canvas新元素

标签	描述
canvas	标签定义图形，比如图表和其它图像。改标签基于JavaScript的绘图API.

新多媒体元素

标签	描述
audio	定义音频内容
video	定义视频（video 或者 movie）
source	定义多媒体资源
embed	定义嵌入的内容，比如插件。
track	为诸如

新的表单元素：

标签	描述
datalist	定义选项列表。请与input元素配合使用该元素。
keygen	规定用于表单的密钥对生成器字段
output	定义不同类型的输出，比如脚本的输出

新的语义和结构元素：

标签	描述
article	定义页面独立的内容区域
aside	定义页面的侧边栏内容
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置。
command	定义命令按钮，比如单选按钮、复选框或按钮
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	标签包含details元素的标签
figure	规定独立的流内容(图像、图表、照片、代码等等)
figcaption	定义figure元素的标题
footer	定义section或document的页脚
header	定义了文档的头部区域
mark	定义带有记号的文本
meter	定义度量衡。仅用于已知最大和最小值的度量
nav	定义运行中的进度(进程)
progress	定义任何类型的任务的进度。
ruby	定义ruby注释(中文注音或字符)
rt	定义字符(中文注音或字符)的解释或发音
rp	在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容
section	定义文档中的节(section\区段)
time	定义日期或时间
wbr	规定在文本中的何处适合添加换行符

HTML5 Canvas

canvas 标签定义图形，比如图表和其他图像，须使用脚本(javascript)来绘制图形。

创建一个画布：

<canvas id="myCanvas" width="200" height="100"></canvas>

使用 JavaScript 来绘制图像:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");  // 创建context对象
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

Canvas - 路径

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");  // 创建context对象
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();  // 执行

Canvas - 圆
方法：arc(x,y,r,start,stop,direction);
参数：圆点x坐标，圆点y坐标，半径，开始弧度，结束弧度，方向(true：顺时针；false:逆时针)

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");  // 创建context对象
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.strole();

Canvas - 文本
font - 定义字体
fillText(text,x,y,maxWidth) - 在canvas上绘制实心的文本,文本/开始x坐标/开始y坐标/最大宽度(可选)
strokeText(text,x,y,maxWidth) - 在canvas上绘制空心的文本

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");  // 创建context对象;
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); // 实心
ctx.strokeText("Hello World",10,50); // 空心

SVG

SVG 意为可缩放矢量图形(Scalable Vector Graphics)
SVG 使用 XML 格式定义图像

SVG 圆形

    <svg xmls="#" version="1.1">
        <circle cx="100" cy="50" r="40" stroke="black" stoke-width="2" fill="red"></circle>
    </svg>
    <!--参数：cx:圆点x坐标；cy:圆点y坐标；r:半径；stroke:圆border；fill:填充颜色。-->

SVG 矩形

    <svg xmls="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
        <rect x="50" y="50" height="200" width="200" style="fill:rgb(0,0,255);stroke-width: 1;stroke:rgb(0,0,0); fill-opacity:0.3;       stroke-opacity:0.1; "  ></rect>
    </svg>
    <!-- 圆角矩形 -->
    <svg xmls="#" version="1.1" width="200" height="200">
        <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"></rect>
    </svg>

SVG 椭圆

    <svg xmlns="#" version="1.0" height="500" width="500">
        <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow; stroke:purple; stroke-width:2"></ellipse>
    </svg>
    <!--参数：cx:圆心x坐标；cy:圆心y坐标；rx:水平半径；ry:垂直半径。 -->
    <!--三个垒叠而上的椭圆-->
    <svg xmlns="#" version="1.0" height="500" width="500">
        <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"></ellipse>
        <ellipse cx="240" cy="70" rx="190" ry="20" style="fill:lime"></ellipse>
        <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"></ellipse>
    </svg>
    <!-- 两个椭圆 -->
    <svg xmlns="#" version="1.0" height="500" width="500">
        <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"></ellipse>
        <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"></ellipse>
    </svg>

SVG 直线

    <!--SVG 直线-->
    <svg xmlns="#" version="1.0">
        <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"></line>
    </svg>
    <!--参数：x1:属性x轴开始；y1:属性y轴开始；x2:属性x轴结束；y2:属性y轴结束-->

SVG

SVG