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 ...

随机推荐

学习SSH框架
1.SSH框架的认知在做相关的java的网页的开发制作时,良好的层次分解是十分有比要的,所以我们在云涌第三方的框架之下来简化还有名了我们相关的网站的开发. SSH框架实则为Struct + spri ...
ASP.NET MVC系列框架搭建（二）之仓储层的优化
大神勿喷,小神默默学. 会了就是不值一提的东西,不会就是绝对的高大上. 最后上传源码.希望能给读者带来一些新的认识及知识. 还没上过头条..各位大神,请点支持一下小弟. 陆续更新.更新到你会为止!! ...
Apache Spark源码走读之2 -- Job的提交与运行
欢迎转载,转载请注明出处,徽沪一郎. 概要本文以wordCount为例,详细说明spark创建和运行job的过程,重点是在进程及线程的创建. 实验环境搭建在进行后续操作前,确保下列条件已满足. 下 ...
SVN svnserve.conf: Option expected 的解决方法以及 Authorization failed 的解决方法
① 在 CentOS 6.5 上安装配置了 SVN,在本地 Checkout 的时候报错: 显示:/www/svnroot/webfile/conf/svnserve.conf:12: Option ...
xml追加节点
添加方法 public void XmlAppend(VisitM vm) { XmlDocument xmldoc = new XmlDocument(); string path = Server ...
ADO 事务
Ado.Net事务处理.在ADO.NET 中,可以使用Connection 和Transaction 对象来控制事务.若要执行事务,请执行下列操作:• 调用Connection 对象的BeginTra ...
love yy-kiss 医生出差二期
医生出差二期,做了一半撤出去做互联网医院了 http://confluence.haodf.net/pages/viewpage.action?pageId=15801359 医生出差二期没设置数 ...
spark之combineByKey
combineByKey def combineByKey[C](createCombiner: (V) => C, mergeValue: (C, V) => C, mergeCombi ...
Simple Web Example
eclipse3.7 运行一个简单的servlet,Target Platfrom 必要的jar为 0 ACTIVE org.eclipse.osgi_3.7.2.v20120110-141 ...
AGS API for JavaScript 图表上地图
原文:AGS API for JavaScript 图表上地图图1 图2 图3 -------------------------------------华丽丽的分割线--------------- ...

Hello,HTML 到 HTML5

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

随机推荐

热门专题