Hello,HTML 到 HTML5

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

　　　　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的更多相关文章

使用HTML5开发Kinect体感游戏
一.简介我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
读书笔记：《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
nw.js桌面软件开发系列第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
HTML5 语义元素(一)页面结构
本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...
HTML5 input元素新的特性
在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

随机推荐

JBoss错误
jboss进程在启动时碰到Address already in use: JVM_Bind /0.0.0.0:8080错误. 这个错误的含义是8080端口被占用了. 解决方法: 方法1: 开始--运行 ...
lambda表达式对比
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
ICON文件保存
这两天想做一下windows系统下图标的修改,让程序有更新的时候能够更新图标的外观,达到提醒的作用,360,QQ经常采用这种方式进行更新的提示,也有采用弹框的方式来提示,用新版QVOD的同事可能见到过 ...
放到u-boot/arch/arm/inlcude下面解压A20固件库制作笔记
运行 build_dragonboard.sh,完成一次编译,首次编译需要消耗 20 分钟以上的时间.这里包括编译bootloader.kernel.rootfs. 修改 Linux 内核配置$ cd ...
PHP学习(五)----jQuery和JSON数据
对于jQuery: jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程.
shell执行mysql操作
http://ully.iteye.com/blog/1226494 http://www.jb51.net/article/55207.htm shell执行mysql操作 mysql -hhos ...
8.PHP内核探索：再次探讨SAPI
在PHP的生命周期的各个阶段,一些与服务相关的操作都是通过SAPI接口实现. 这些内置实现的物理位置在PHP源码的SAPI目录.这个目录存放了PHP对各个服务器抽象层的代码, 例如命令行程序的实现,A ...
纸牌project
用range[0,8)的列表表示牌,这些数字要出现两次.我们建议你通过连接两个range[0,8)的列表来创建这个list.利用Docs来安排列表串联操作写一个draw handler啥样的draw ...
ubuntu 工作区中拖动一个窗体到另一个工作区就卡住回不到桌面了
ubuntu 工作区中拖动一个窗体到另一个工作区就卡住回不到桌面了解决方法: 按 alt + 回车键直接就返回去了
WGZX:javaScript 学习心得--1
标签: javascriptiframedreamweaver浏览器htmltable 2008-09-11 10:50 1071人阅读评论(0) 收藏举报分类: UI(21) 1,docu ...

Hello,HTML 到 HTML5

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

随机推荐

热门专题