Hello,HTML 到 HTML5-白红宇

Hello,HTML 到 HTML5

阅读量：7019 次

发布时间：2019-06-28

本文共 4062 字，大约阅读时间需要 13 分钟。

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.新的语义标签

  
        
           
      Page title
      
      Page subtitle
    
       
    
  
       
     
           Navigation...   
     
  
    
  
       
          
             
       Title
     
      
     
      
              Content...     
      
   
     
   
          
             
       Title
     
      
     
      
              Content...     
      
   
     
   
          
             
       Title
     
      
     
      
              Content...     
      
   
     
  
    
 2.新的链接关系


    
    
    
    ...old poststutoriallicensewannabegames posts... 3.微数据 Microdata


     
     My name is Neil.
 
     My band is called Four Parts Water.
 
     I am British.
    
 4.ARIA attributes


       
     Fruits
   
          
             
       Oranges
       
       Pineapples
      ...    
      
  
  
    
 5.New form field types

 6.Audio + Video


    document.getElementById("audio").muted=false;
    document.getElementById("video").play(); 7.Canvas


     8.Canvas 3D (WebGL)


     9.SVG in HTML5

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的旅程从这里开始了！！

转载地址：http://sdzxl.baihongyu.com/

你可能感兴趣的文章

Default value for parameters with a class type hin