html5学习笔记---01.HTML5介绍,02.HTML5的新特性

2013/6/10
01.HTML5介绍
a.创梦技术qq交流群：CreDream：251572072
--------------------
a.创梦技术qq交流群：CreDream：251572072
  HTML 是Hyper Text Markup Language的简称，它是一种用于描述网页文档的标记语言，
  而HTML5则是这种标记语言的新标准。
-----------------------------------------
b.自1993 年6 月HTML 的第一版草案发布，到1999 年12 月24 日HTML 4.01 的发布，
  HTML 一直在不断更新。但是HTML4并没有给HTML 带来太大的突破，随着网络的迅
  速发展，它渐渐满足不了网络应用的需求了。2000年1 月26日，可扩展超文本置标语
  言（eXtensible  Hyper Text  Markup  Language），即 XHTML 出现了。XHTML 的表现方式与
  HTML 类似，不过语法上更加严格。因为XHTML 更加注重页面规范和可用性，所以W3C
  执意发展XHTML。但是因为种种原因XHTML 的进展非常缓慢，最主要是因为XHTML2
  不兼容以往任何一个版本的HTML 。在这种情况下，HTML5出现了。
-----------------------------------------------
c.HTML5草案的前身名为 Web Applications  1.0 ，于2004年由WHATWG  提出，2007年
  W3C 接纳了这种标准，并成立了新的HTML 工作团队。HTML5的第一份正式草案于2008
  年1 月22日公布。HTML5是W3C与WHATWG合作的结果，它成为  HTML、XHTML  以
  及 HTML DOM  的新标准。
----------------------------------------
2013/6/10
a.创梦技术qq交流群：CreDream：251572072
02.HTML5的新特性
------------------------
a.HTML5有很多令人心动的特性和新功能，比如，强化了Web 网页的表现性能，增加了 　
  本地数据库等 Web  应用的功能，以及图像操作等。
b.HTML5在图像上引入了Canvas 标签，通过Canvas ，用户可以动态生成各种图形图像、
  图表以及动画，而不再依赖于Flash、silverlight 等插件了。
c.另外，HTML5在地理位置操作上引入了Geolocation API ，其特点在于：
  本身不去获取用户的位置，而是通过第三方接口来获取，例如IP 、GPS 、WIFI等方式。   ❑
  用户可以随时开启和关闭，在被程序调用时也会首先征得用户同意，保证了用户的   ❑
  隐私。
d.同时，HTML5还在数据储存上增加了本地数据库，可以使用WebSQL 来储存数据，并
  且引入了web  storage API 实现了离线缓存功能，以此替代了cookies，使得数据保存空间更
  大、更安全。
e.举几个例子，来说明一下HTML5的优越之处
----------------------------------------------
1. 使用video 标签播放动画
<video width="640" height="360" preload="auto" poster="hoge.png" controls autoplay>
<!-- 针对播放webm 格式动画的浏览器 -->
<source src="hoge.webm" type='video/webm; codecs="vp8, vorbis"'>
<!-- 针对播放ogv 格式动画的浏览器 ->
<source src="hoge.ogv" type='video/ogg; codecs="theora, vorbis"'>
<!-- 针对播放mp4 格式动画的浏览器 -->
<source src="hoge.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- 当浏览器无法使用video标签的时候 -->
<p> 无法播放动画。<a href="hoge.html"> 推荐环境请看这里。</a></p>
</video>
-----------------------------------------------------------------
2. 使用audio 标签播放音频
<audio controls loop>
<!-- 针对播放ogg 格式音频的浏览器 -->
<source src="hoge.ogg">
<!-- 针对播放wav 格式音频的浏览器 -->
<source src="hoge.wav">
<!-- 针对播放mp3 格式音频的浏览器 -->
<source src="hoge.mp3">
<!-- 当浏览器无法使用audio标签的时候 -->
<p> 无法播放音频。<a href="hoge.html">推荐环境请看这里。</a></p>
</audio>
--------------------------------------------------------
3. 使用Canvas标签绘制图形
<canvas id="canvas" width="640" height="360"></canvas>
<script>
//获取context对象
var canvas = document.getElementById('canvas'); 
if(canvas.getContext){ 
var context = canvas.getContext('2d'); 
  // 设置颜色
context.fillStyle = 'rgb(255,0,0)'; 
  // 从坐标(20,30)开始，画一个64×36大小的矩形
context.fillRect(20,30,64,36); 
} 
</script>
--------------------------------------------------
4. 轻松取得当前的位置
<script>
window.addEventListener('load'. function () { 
//判断可否使用geolocation
if(navigator.geolocation){ 
//定期获取所在地
navigator.geolocation.watchPosition(update); 
} 
}, false); 
//取得位置并表示
function update(position){ 
//纬度
var lat = position.coords.latitude; 
//经度
var lng = position.coords.longitude; 
//把纬度和经度显示出来
document.write(' 纬度：'+lat+'，经度：'+lng); 
}
</script>
---------------------------------------------
5. 将大量的数据保存在客户端
<script>　
//用localStorage来保存数据
localStorage.key = '想要保存的值';
//将localStorage中的值取出来
var hoge = localStorage.key;
//“想要保存的值”在页面上显示
document.write(hoge); 
</script>
-----------------------------------
6.form的强化
<!-- 验证用户输入格式是否正确，只需要改变type 的类型即可 -->
<input name="email" type="email">
<!-- 对于必须输入的项目，只需给input标签加上require属性即可 -->
<input name="text" type="text" require>
<!-- 当失去焦点的时候给出相应的提示，只需给input标签加上placeholder 属性即可 -->
<input name="text" type="text" placeholder=" 例：姓名">
-------------------------------------------------------------
7. 全新的标签属性
在HTML5中取消了一些过时的HTML4标记，其中包括纯粹显示效果的标记，如
<font> 和<center> ，它们已经被CSS 取代了。HTML5 吸取了针对XHTML2的一些建议，加
强了一些用来改善文档结构的功能，如引入新的HTML 标签  header、footer 、dialog 、aside、
fi gure 等，使开发者能够更加容易地创建文档，以前开发者在实现这些功能时一般都是使用
div。另外，它还取消了一部分旧标签，如字体设置font 、居中设置center 等。一小部分标签
的含义也有所改变，如粗体样式b  和斜体样式i 标签虽然仍然保留，但它们的意义已经和以
前有所不同，现在这些标签的意义只是为了将一段文字标识出来。
以上就是HTML5的一些新特性。需要注意的是，虽然HTML5已被W3C接纳，但现在
还只是草案，在正式版发布之前，它的样式仍可能会有所变更。
---------------------------------------------------------