HTML5是WEB应用将发展到一个水平必要的技术.

下面是WEB发展的时间轴:

　　1991 - HTML

　　1994 - HTML2

　　1996 - CSS1 + JAVASCRIPT

　　1997 - HTML4

　　1998 - CSS2

　　2000 - XHTML1

　　2002 - Tableless Web Design

　　2005 - Ajax

　　2009 - HTML5

下面我用一个公式来说明HTML5:

　　HTML5 ~= HTML + CSS +JAVASCRIPT(APIs)

JAVASCRIPT APIs ??

　　1.新的选择器

　　　　var el = document.getElementById('section1');

　　　　el.focus();

　　　　var els = document.getElementsByTagName('div');

　　　　els[0].focus();

　　　　var els = document.getElementsByClassName('section');

　　　　els[0].focus();

　　2.通过CSS的语法来查找元素

　　　　var els = document.querySelectorAll("ul li:nth-child(odd)");

　　　　var els = document.querySelectorAll("table.test > tr > td");

　　3.网络存储(Web Storage)

　　　　// use localStorage for persistent storage

　　　　// use sessionStorage for per tab storage

　　　　textarea.addEventListener('keyup', function () {

　　　　　　window.localStorage['value'] = area.value;

　　　　　　window.localStorage['timestamp'] = (new Date()).getTime();

　　　　}, false);

　　　　textarea.value = window.localStorage['value'];

　　　　用途示例：保存邮件时，草稿在客户端，可以避免有时候崩溃导致内容丢失重写.

　　4.Web SQL数据库

　　　　var db = window.openDatabase("Database Name", "Database Version");

　　　　db.transaction(function(tx) {

　　　　　　tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);

　　　　});

　　5.应用程序缓存API

　　　　<html manifest="cache-manifest">

　　　　window.applicationCache.addEventListener('checking', updateCacheStatus, false);

　　6.Web Workers

　　　　main.js :

　　　　　　var worker = new Worker(‘extra_work.js');

　　　　　　worker.onmessage = function (event) { alert(event.data); };

　　　　extra_work.js :

　　　　　　// do some work; when done post message.

　　　　　　postMessage(some_data);

　　7.Web Sockets

　　　　var socket = new WebSocket(location);

　　　　socket.onopen = function(event) {

　　　　　　socket.postMessage(“Hello, WebSocket”);

　　　　}

　　　　socket.onmessage = function(event) { alert(event.data); }

　　　　socket.onclose = function(event) { alert(“closed”); }

　　8. Notifications

　　　　if (window.webkitNotifications.checkPermission() == 0) {

　　　　　　// you can pass any url as a parameter

　　　　　　window.webkitNotifications.createNotification(tweet.picture, tweet.title,tweet.text).show();

　　　　} else {

　　　　　　window.webkitNotifications.requestPermission();

　　　　}

　　9.Drag and drop

　　　　document.addEventListener('dragstart', function(event) {

　　　　　　event.dataTransfer.setData('text', 'Customized text');

　　　　　　event.dataTransfer.effectAllowed = 'copy';

　　　　}, false);

　　10.Geolocation

　　　　if (navigator.geolocation) {

　　　　　　navigator.geolocation.getCurrentPosition(function(position) {

　　　　　　　　var lat = position.coords.latitude;

　　　　　　　　var lng = position.coords.longitude;

　　　　　　　　map.setCenter(new GLatLng(lat, lng), 13);

　　　　　　　　map.addOverlay(new GMarker(new GLatLng(lat, lng)));

　　　　　　});

　　　　}

HTML ??

　1.新的语义标签

<body>

  <header>

    <hgroup>

      <h1>Page title</h1>

      <h2>Page subtitle</h2>

    </hgroup>

  </header>

  <nav>

   <ul>

     Navigation...

   </ul>

  </nav>

  <section>

   <article>

     <header>

       <h1>Title</h1>

     </header>

     <section>

       Content...

     </section>

   </article>

   <article>

     <header>

       <h1>Title</h1>

     </header>

     <section>

       Content...

     </section>

   </article>

   <article>

     <header>

       <h1>Title</h1>

     </header>

     <section>

       Content...

     </section>

   </article>

  </section>

2.新的链接关系
<link rel='alternate' type="application/rss+xml" href="http://myblog.com/feed" />

<link rel='icon' href="/favicon.ico" />

<link rel='pingback' href="http://myblog.com/xmlrpc.php">

<link rel='prefetch' href="http://myblog.com/main.php">

...

<a rel='archives' href="http://myblog.com/archives">old posts</a>

<a rel='external' href="http://notmysite.com">tutorial</a>

<a rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license</a>

<a rel='nofollow' href="http://notmysite.com/sample">wannabe</a>

<a rel='tag' href="http://myblog.com/category/games">games posts</a>

...
3.微数据 Microdata
<div itemscope itemtype="http://example.org/band">

 <p>My name is <span itemprop='name'>Neil</span>.</p>

 <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p>

 <p>I am <span itemprop='nationality'>British</span>.</p>

</div>
4.ARIA attributes
<ul id="tree1"

      role="tree" 

      tabindex="0" 

      aria-labelledby="label_1"

      > 

  <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> 

  <li role="group"> 

    <ul> 

      <li role="treeitem" tabindex="-1">Oranges</li> 

      <li role="treeitem" tabindex="-1">Pineapples</li>

      ...

    </ul>

  </li>

  </ul>
5.New form field types
<input type='range' min='0' max='50' value='0'>
<input autofocus type='search'>
<input type='text' placeholder='Search inside'>

6.Audio + Video
<audio src="sound.mp3" controls></audio>

document.getElementById("audio").muted=false;

<video src='movie.mp4' autoplay controls ></video>

document.getElementById("video").play();

7.Canvas
<canvas id="canvas" width="838" height="220"></canvas>

<script>

  var canvasContext = document.getElementById("canvas").getContext("2d");

  canvasContext.fillRect(250, 25, 150, 100);

  canvasContext.beginPath();

  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);

  canvasContext.lineWidth = 15;

  canvasContext.lineCap = 'round';

  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';

  canvasContext.stroke();

</script>

8.Canvas 3D (WebGL)
<canvas id="canvas" width="838" height="220"></canvas>

<script>

  var gl = document.getElementById("canvas").getContext("experimental-webgl");

  gl.viewport(0, 0, canvas.width, canvas.height);

  ...

</script>

9.SVG in HTML5
<html>

  <svg>

    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" 

        fill="url(#myGradient)"

        onmousedown="alert('hello');"/>

  </svg>

</html>

CSS??
1.CSS Selectors
2.New font support
3.Text wrapping
4.Columns
5.Text stroke
6.Opacity
7.Hue/saturation/luminance color model
8.Rounded corners
9.Gradients
10.Shadows
11.Instant Web 2.0 (just add sliders)
12.Background enhancements
13.Transitions
14.Transforms
15.Animations

HTML5 = 下一代WEB应用的技术

以上是HTML5概述大部分特性，所以我学习HTML5的旅程从这里开始了！！
 

Hello,HTML 到 HTML5的更多相关文章

  1. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  2. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  3. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  4. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  5. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  6. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  9. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  10. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

随机推荐

  1. linux网卡设置详解

    centos7安装之后是需要在网卡配置文件中开始网络连接 onboot =yes 刚开始时网卡获取IP模式是dhcp 你会发现ifconfig不能用,猜测是废弃了,你要yum install net- ...

  2. C3P0连接池问题，APPARENT DEADLOCK!!! Creating emergency..... [问题点数：20分，结帖人lovekong]

    采用c3p0连接池,每次调试程序,第一次访问时(Tomcat服务器重启后再访问)都会出现以下错误,然后连接库需要很长时间,最终是可以连上的,之后再访问就没问题了,请高手们会诊一下,希望能帮小弟解决此问 ...

  3. [ZZ] [siggraph10]color enhancement and rendering in film and game productio

    原文link:<color enhancement and rendering in film and game production> 是siggraph 2010,“Color Enh ...

  4. UIButton 长按点击 背景改变效果

    1.添加按钮的点击事件和按下事件 [btn setImage:[UIImage imageNamed:@"NorMal.png"] forState:UIControlStateN ...

  5. 【Xamarin Doc】 Introduction to Storyboards 笔记

    http://developer.xamarin.com/guides/ios/user_interface/introduction_to_storyboards/ Segues There are ...

  6. Android 的上下文菜单: Context Menu,registerForContextMenu(getListView())

    概述: Android 的上下文菜单类似于 PC 上的右键菜单.当为一个视图注册了上下文菜单之后,长按(2 秒左右)这个视图对象就会弹出一个浮动菜单,即上下文菜单.任何视图都可以注册上下文菜单,不过, ...

  7. 数据库CRUD操作：C：create创建（添加）、R：read读取、U：update：修改、D：delete删除；高级查询

    1.注释语法:--,#2.后缀是.sql的文件是数据库查询文件3.保存查询4.在数据库里面 列有个名字叫字段   行有个名字叫记录5.一条数据即为表的一行 CRUD操作:create 创建(添加)re ...

  8. 切记CMYK图片格式在IE中将无法显示

    目前为止微软的Internet Explorer 浏览器IE6,IE7,IE8都不支持CMYK颜色模式图像 ,除IE外其他浏览器均能支持!所以大家要注意了 要选择RGB颜色模式,就可以了.

  9. windbg sos版本不匹配问题解决

    dumpheap 时提示: 0:105> !dumpheap -stat The garbage collector data structures are not in a valid sta ...

  10. nodejs express测试

    1.页面请求 app.get('/list_user', function (req, res) { console.log("/list_user GET 请求"); //res ...