0
点赞
收藏
分享

微信扫一扫

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

做个橙梦 2022-03-30 阅读 29
htmlhtml5ide

2013/6/10

01.HTML5介绍

  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

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接纳,但现在

还只是草案,在正式版发布之前,它的样式仍可能会有所变更。

---------------------------------------------------------

举报

相关推荐

0 条评论