html5学习笔记（系列1）
1，什么是XHTML
可扩展超文本标记语言。HTML是一种基本的WEB网页设计语言，XHTML是一个基于可扩展标记语言的标记语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的可扩展标记语言（XML），所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。
2000年底，国际W3C组织（万维网联盟）组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,XHTML 是更严谨更纯净的 HTML 版本。它的可扩展性和灵活性将适应未来网络应用更多的需求。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的基于HTML语言设计的网站，直接采用XML还为时过早。因此，在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。所以，建立XHTML的目的就是实现HTML向XML的过渡。国际上在网站设计中推崇的WEB标准就是基于XHTML的应用（即通常所说的CSS+DIV）
1.1 特征
* XHTML是EXtensible HyperText Markup Language的英文缩写,即可扩展的超文本标记语言.
* XHTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行.
* XHTML是用来代替HTML的, 是2000年w3c公布发行的.
* XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求.
* XHTML是基于XML的应用.
* XHTML更简洁更严谨.
* XHTML也可以说就是HTML一个升级版本.(w3c描述它为'HTML 4.01')
* 除此之外XHTML和HTML基本相同.
* XHTML是大小写敏感的,XHTML与xhtml是不一样的.标准的XHTML标签应该使用小写.
2，什么是HTML5
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
3，新特性
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
4，开发工具
目前找到的html5开发工具有netbeans，WebStorm，aptana studio，其中netbeans可以免费使用，
WebStorm和aptana studio是收费的，不过可以网上可以找到破解版的。
由于网络上下载netbeans失败，所以只下载了WebStorm，安装之后发现界面和idea差不太多，对于html,css,javascript等都有自动完成功能。
netbeans相关链接参考：
http://www.oschina.net/news/45091/netbeans-7-4-final
https://netbeans.org/community/releases/80/
界面截图如下：
5，标签
5.1 video标签
<video> 标签的属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
目前支持3中视频格式
| 格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件，例如
<video >
<source >
<source >
</video>
video标签有如下属性和方法
| 方法 | 属性 | 事件 |
|---|---|---|
| play() | currentSrc | play |
| pause() | currentTime | pause |
| load() | videoWidth | progress |
| canPlayType | videoHeight | error |
| duration | timeupdate | |
| ended | ended | |
| error | abort | |
| paused | empty | |
| muted | emptied | |
| seeking | waiting | |
| volume | loadedmetadata | |
| height | ||
| width |
使用方式：videoobj.play()等
示例：
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="doplaypause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeNormal()">原始尺寸</button>
<button onclick="makeSmall()">缩小</button>
<br />
<video src="test2-2.mp4" id="video1" width="480" style="margin-top:15px">
你的浏览器不支持video标签
</video>
</div>
<script type="text/javascript">
var videoobj = document.getElementById("video1")
function doplaypause()
{
if(videoobj.paused)
videoobj.play();
else
videoobj.pause();
}
function makeBig()
{
videoobj.width+=10;
if(videoobj.width>1920)
videoobj.width=1920
}
function makeNormal()
{
videoobj.width=480;
}
function makeSmall()
{
videoobj.width-=10;
if(videoobj.width < 100)
videoobj.width=100
}
</script>
</body>
</html>
运行结果：
参考链接：
xhtml
html简介