HTML5学习笔记一

1、HTML5 中的一些新特性：
• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，比如 article、footer、header、nav、section

• 新的表单控件，比如 calendar、date、time、email、url、search

2、为 HTML 添加新元素，写在head标签里
<script>
document.createElement("myHero")
</script>
<style>
myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; }
</style>

3、<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像），它只是图形容器，必须使用脚本来绘制图形。

var c=document.getElementById("myCanvas"); //找到 <canvas> 元素:
var ctx=c.getContext("2d"); //对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
//下面的两行代码绘制一个红色的矩形
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

4、在Canvas上画线，使用以下两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

绘制线条必须使用到 "ink" 的方法，就像stroke().
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

5、在canvas中绘制圆形, 使用以下方法:

      arc(x,y,r,start,stop)

6、Canvas - 文本
使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

7、HTML5 内联 SVG
什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

8、HTML5 MathML
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。
MathML 是数学标记语言，是一种基于XML的标准，用来在互联网上书写数学符号和公式的置标语言。

9、HTML5 Video(视频)
<video> 元素提供了 播放、暂停和音量控件来控制视频在video标签中加入controls属性即可。同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。

10、HTML5 新的 Input 类型
color 类型用在input字段主要用于选取颜色
Input 类型: date，date 类型允许你从一个日期选择器选择一个日期。
Input 类型: datetime-local，datetime-local 类型允许你选择一个日期和时间 (无时区).
Input 类型: email，email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值是否合法有效
Input 类型: month，month 类型允许你选择一个月份。
Input 类型: number，number 类型用于应该包含数值的输入域。
Input 类型: range，range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。请使用下面的属性来规定对数字类型的限定：max - 规定允许的最大值，min - 规定允许的最小值，step - 规定合法的数字间隔，value - 规定默认值
Input 类型: search，search 类型用于搜索域，比如站点搜索或 Google 搜索。
实例
定义一个搜索字段 (类似站点搜索或者Google搜索):
Search Google: <input type="search" name="googlesearch">
Input 类型: tel
实例
定义输入电话号码字段:
电话号码: <input type="tel" name="usrtel">
Input 类型: time，time 类型允许你选择一个时间。
Input 类型: url，url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。

Input 类型: week，week 类型允许你选择周和年。