HTML5的基本内容

Html5是下一代Html的标准.
Html5新元素
语义元素 为元素的意义.
一个语义元素能够清楚的描述其意义给浏览器和开发者.
语义元素实例: < form>, < table>, and < img> 等清楚的定义了它的内容.

• < canvas > 标签定义图形，比如图表和其他图像.该标签基于 JavaScript 的绘图 API
• < audio > 新媒体元素 定义音频内容
• < video > 新媒体元素 定义视频
• < source > 新媒体元素 定义多媒体资源
• < embed > 新媒体元素 定义嵌入的内容
• < datalist > 新表单元素 定义选项列表 与 input 元素配合使用该元素，来定义 input 可能的值.
• < keygen > 新表单元素 定义规定用于表单的密钥对生成器字段
• < article > 新的语义和结构元素 定义页面的侧边栏内容
• < details > 新的语义和结构元素 定义描述文档或文档某个部分的细节
• < command > 新的语义和结构元素 定义命令按钮，比如单选按钮、复选框或按钮
• < header > 新的语义和结构元素 定义文档的头部区域
• < footer > 新的语义和结构元素 定义 section 或 document 的页脚
• < mark > 新的语义和结构元素 定义带有记号的文本
• < nav > 新的语义和结构元素 定义运行中的进度(进程)
• < progress> 新的语义和结构元素 定义任何类型的任务的进度
• < time > 新的语义和结构元素 定义日期或时间

Html5 canvas
< canvas > 标签只是图形容器，必须使用脚本来绘制图形,可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像.

• 创建画布

一个画布在网页中是一个矩形框，通过canvas> 元素来绘制.
注意: 默认情况下 元素没有边框和内容
注意：标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小
< canvas >简单实例如下:

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

使用 style 属性来添加边框:

< canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000;">
</ canvas> 

• 用 JavaScript 来绘制图像*

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成.

Html5内联 SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
SVG 与 Canvas两者间的区别

1.SVG 是一种使用 XML 描述 2D 图形的语言.
2.Canvas 通过 JavaScript 来绘制 2D 图形.
Html5 video(视频)

< video width="300" height="230" controls>
  < source src="movie.mp4" type="video/mp4">
  < source src="movie.ogg" type="video/ogg">
  </ video>

格式	type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

Html5 autio(音频)

< audio controls>
  < source src="horse.ogg" type="audio/ogg">
  < source src="horse.mp3" type="audio/mpeg">
</ audio>

格式	type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

Html5 新的 Input 类型

< input type="" name="">

• color
  从拾色器中选择一个颜色
• date
  定义一个时间控制器:
• datetime
  定义一个日期和时间控制器（本地时间）
• datetime-local
  定义一个日期和时间 (无时区）
• email
  在提交表单时，会自动验证 email 域的值是否合法有效
• month
  定义月与年 (无时区）
• number
  定义一个数值输入域(限定)
• range
  定义一个不需要非常精确的数值(类似于滑块控制)
• search
  定义一个搜索字段 (类似站点搜索或者Google搜索)
• tel
  定义输入电话号码字段
• time
  定义可输入时间控制器（无时区)
• url
  定义输入URL字段
• week
  定义周和年 (无时区):