HTML5新增语义化标签、元素

介绍

• HTML5 是 HTML 最新的修订版本，2014-10 由万维网 (W3C) 完成标准规定
• 新增了一下属性、元素、video和audio、2D和3D 制图等

1. 新增元素

语义化标签：
	块元素
    <acticle> 定义页面独立的内容区域
    <aside> 定义页面的侧边栏内容
    <figure> 规定独立的流内容(图表、图像、照片、代码等)
    <footer> 定义section 或 document 页脚
    <header> 定义文档的头部区域
    <nav> 定义导航链接部分
    <section> 定义文档中的区域段
    <details> 描述文档或文档某个地方的细节
    <summary> 标签包含details 元素的标题
     行内元素
 	<mark> 带有记号的文本
    <time> 定义日期或时间
    <wbr> 规定在文本中的何处适合添加换行符

  	<video> 视频 通过 src 引入指定的视频源
  	<audio> 音频 同样通过 src 引入指定音频
        它们身上存在一些属性可以控制播放、暂停

2. 表单元素

type 类型新增
	email 定义一个输入电子邮件地址
	url  定义一个输入url字段
	search 定义一个搜索字段(类似百度)
	tel 定义输入电话好字段
	number 定义当前文本只允许输入数字
	range 定义一个滑动块 
	color 打开可是颜色选择器
	date  定义一个日期选择器
	datetime 定义一个日期和时间控制器
	time 定义可输入时间控制器

3. canvas

• 用于定义图形，比如图表和其他图像

<canvas id="main" style="height:200px;width:200px;"></canvas>
创建 canvas 必须设置宽高 它本身是没有画图能力的，需要放在JavaScript内部去操作(后面JavaScript中详解)

4. SVG

• HTML5 内置了SVG，SVG 指可伸缩矢量图形
• 通过xml格式来定义图形，同是也是万维网联盟的标准
• 于其他图像(jpeg、gif)相比，SVG的优势是：
  • 可通过文本编辑器来创建和修改
  • 可被搜索、索引、脚本化或压缩
  • 可伸缩的
  • 可在任何的分辨率下被打印
  • 可在图像清晰图不变的情况下放大

SVG 和 canvas 的区别

• svg 不能绘制图片，而 canvas 可以
• svg 不依赖分辨率，而canvas依赖
• svg 支持事件处理因为创建出来都是独立的dom节点，而canvas 输出的是一副画布
• SVG 适合大型渲染区域的应用程序，而canvas适合图像密集型的场景，因为其中许多对象会被频繁重绘，列如游戏。