本演示文档是一个HTML5的站点

键 进入下一页

放大/缩小: Ctrl + +/-

请使用Google Chrome浏览。阅读 免责声明

HTML5*

Web 开发进入新时代

*包括另外一些新一代网络开发技术

Web技术大致的时间轴
    1991 HTML
    1994 HTML 2
    1996 CSS 1 + JavaScript
    1997 HTML 4
    1998 CSS 2
    2000 XHTML 1
    2002 使用DIV+CSS进行网页布局
    2005 AJAX
    2009 HTML 5
HTML5 ~= HTML + CSS + JS APIs

JS APIs

JS APIs

新的选择器

通过 class 定位元素 (DOM API)

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

var els = document.getElementsByTagName('div');
els[0].focus();

var els = document.getElementsByClassName('section');
els[0].focus();

通过类似 css 选择器的语法定位元素 (Selectors API)

var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");
JS APIs

本地储存 - 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'];

例子: 在客户端保存Email草稿 ,即使浏览器崩溃了数据也不会丢失。

JS APIs

本地数据库 - Web SQL Database

var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

    Chrome中查看生成的数据库: 开发人员 > 开发人员工具 > Storage

    JS APIs

    文件缓存 - Application Cache API

    manifest="cache-manifest">
    window.applicationCache.addEventListener('checking', updateCacheStatus, false);
    
    CACHE MANIFEST
    
    # version 1
    
    CACHE:
    /html5/src/refresh.png
    /html5/src/logic.js
    /html5/src/style.css
    /html5/src/background.png
    

    试试断开你的网络连接,然后刷新!

    JS APIs

    让程序在后台运行 - 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);
    

    试着在计算航线时拖动地图 (只有在使用Worker计算时,浏览器不会假死)

    JS APIs

    双向信息传输 - 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”); }
    
    

    允许Web服务器实时、主动的向浏览器发送信息(COMET)

    JS APIs

    桌面提醒 - 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();
    }
    

    提示: 如果你想 重置 许可,也可以点击上面的按钮


    输入一个 twitter 用户名,即可通过桌面提醒看到此用户发布最新一条信息(国内用户请爬墙看此DEMO)

    JS APIs

    拖放操作 - Drag and drop

    document.addEventListener('dragstart', function(event) {
       event.dataTransfer.setData('text', 'Customized text');
       event.dataTransfer.effectAllowed = 'copy';
    }, false);
    
    1. 选择文本并拖动 (文本将原封不动复制到目标区域)
    2. 选择文本并拖动 (文本将被调整后复制到目标区域)
    Source Data
    释放区域

    即将支持: 从桌面拖动文件到页面。

    JS

    地理位置 - 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)));    
      });
    }         
    
    JS APIs
    • 客户端储存 (Web SQL Database, App Cache, Web Storage)
    • 通信 (Web Sockets, Web Workers)
    • 用户体验 (Notifications, Drag and Drop API)
    • 地理位置 Geolocation

    HTML

    HTML

    新的语义标签

    
      <header>
        <hgroup>
          

    Page title

    Page subtitle

    <nav>
      Navigation...
    <section> <article> <header>

    Title

    Content...

    Title

    Content...

    Title

    Content...
    <aside> Top links... <footer> Copyright ? 2009.
    HTML

    新的链接关系

    rel='icon' href="/favicon.ico" />
    rel='pingback' href="http://myblog.com/xmlrpc.php">
    rel='prefetch' href="http://myblog.com/main.php">
    ...
    
    rel='archives' href="http://myblog.com/archives">old posts
    rel='external' href="http://notmysite.com">tutorial
    rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license
    rel='nofollow' href="http://notmysite.com/sample">wannabe
    rel='tag' href="http://myblog.com/category/games">games posts
    ...
    
    HTML

    微数据 - Microdata

    itemscope itemtype="http://example.org/band">

    My name is itemprop='name'>Neil.

    My band is called itemprop='band'>Four Parts Water.

    I am itemprop='nationality'>British.

    HTML

    无障碍富互联网应用程序属性 - ARIA attributes

      role="tree" tabindex="0" aria-labelledby="label_1" >
    • role="treeitem" tabindex="-1" aria-expanded="true">Fruits
    • role="group">
      • role="treeitem" tabindex="-1">Oranges
      • role="treeitem" tabindex="-1">Pineapples ...
      HTML

      新的表单元素类型

      增强已有元素

      UI方面:
                    
       
       
      placeholder='Search inside' /> 
      
      输入检查:(不符合条件的将显示红色背景)
      
      
       
       
       
       
      etc...
      

      新增的元素

      <meter>
      <progress>
      <output>
      etc...
      
      HTML

      音频 + 视频 - Audio + Video

      <audio src="sound.mp3" controls>
      document.getElementById("audio").muted=false;
      
      <video src='movie.mp4' autoplay controls >
      document.getElementById("video").play();
      
      HTML

      图形绘制 - Canvas

      
      
      
                  
      HTML

      Canvas 例子

      HTML

      HTML5中的SVG

      
        
          
        
      
      HTML

      CSS

      CSS

      CSS 选择器

      奇/偶选择

      .row:nth-child(even) {
        background: #dde;
      }
      .row:nth-child(odd) {
        background: white;
      }
      
      Row 1
      Row 2
      Row 3
      Row 4

      Image-like display

      div {
        display: inline-block;
      }
      

      通过属性选择

      input[type="text"] {
        background: #eee;
      }

      反选

      :not(.box) {
        color: #00c; 
      }            
      :not(span) {
        display: block; 
      }  
      

      以及一些其它的选择方法

      h2:first-child { ... }
      
      div.text > div { ... } 
      h2 + header { ... } 
      
      CSS

      显示本地没有的字体

      @font-face { 
        font-family: 'Junction'; 
        src: url(Junction02.otf); 
      }
      @font-face { 
        font-family: 'LeagueGothic'; 
        src: url(LeagueGothic.otf); 
      }
      @font-face { 
        font-family: 'GG250'; 
        src: url(General250.otf); 
      }
      
      header {
        font-family: 'LeagueGothic';
      }
      不使用图片显示本地没有的字体。如:LeagueGothic font
      CSS

      文本溢出处理

      div {
        text-overflow: ellipsis;
      }
      A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
      拖动滑动条试试!
      CSS

      分栏显示

      -webkit-column-count: 2;  
      -webkit-column-rule: 1px solid #bbb;
      -webkit-column-gap: 2em;

      In March 1936, an unusual confluence of forces occurred in Santa Clara County.

      A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

      Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet.

      Then came the wind.

      It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. A tidal bore of warm air, it tore along the columns of trees, ripped the blossoms apart and carried them off in a fluttering flood of petals like foam rolling up a beach.

      This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on...

      CSS

      文本描边

      div {
        -webkit-text-fill-color: black;
        -webkit-text-stroke-color: red;
        -webkit-text-stroke-width: 0.00px;  
      }        
      文本描边示例
      CSS

      透明效果

        color: rgba(255, 0, 0, 0.75);  
        background: rgba(0, 0, 255, 0.75);  
      
      透明效果
      CSS

      HSL(色相/饱和度/亮度)色彩模式

      color: hsla(
        128,  
        75%,  
        33%,  
        1.00);  
              
      HSL example
      CSS

      圆角效果

        border-radius: 0px;  
      
      请注意背景框体边角
      CSS

      渐变效果

      background: -webkit-gradient(linear, left top, left bottom, 
                                   from(#00abeb), to(white), 
                                   color-stop(0.5, white), color-stop(0.5, #66cc00))            
      

      background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))  
                                                               
      
      CSS

      阴影效果

      text-shadow: 
        rgba(64, 64, 64, 0.5) 
        0px  
        0px  
        0px;      
      box-shadow: 
        rgba(0, 0, 128, 0.25) 
        0px  
        0px  
        0px; 
                  
      阴影效果示例
      CSS

      制作一个LOGO,只需拖动滑动条

      text-shadow: rgba(0, 0, 0, 0.5) 0 0px 0px;  
      
      background: 
        -webkit-gradient(linear, left top, left bottom,  
                         from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0))); 
      
      border-radius: 0px;  
      
      -webkit-box-reflect: below 10px
        -webkit-gradient(linear, left top, left bottom,  
                         from(transparent), to(rgba(255, 255, 255, 0)));          
      
      Web 2.0 Logo
      CSS

      更强大的背景

      背景的尺寸

      #logo {
        background: url(logo.gif) center center no-repeat;
        background-size: 
          ;
      }
      
      改变大小试试 ?

      多个背景

      div {
        background: url(src/zippy-plus.png) 10px center no-repeat, 
                    url(src/gray_lines_bg.png) 10px center repeat-x;
      }
                  
      测试
      CSS

      变换 - Transitions

      #box.left {
        margin-left: 0;
      }
      #box.right {
        margin-left: 1000px;
      }
      
      document.getElementById('box').className = 'left'; 
      document.getElementById('box').className = 'right'; 
      
      #box {
        -webkit-transition: margin-left 1s ease-in-out;
      }  
      
      document.getElementById('box').className = 'left'; 
      document.getElementById('box').className = 'right'; 
      
      CSS

      变换 - Transforms

      鼠标悬停在下面红色区域:
      -webkit-transform: rotateY(45deg);            
      -webkit-transform: scaleX(25deg);            
      -webkit-transform: translate3d(0, 0, 90deg);            
      -webkit-transform: perspective(500px) 
      
      #threed-example {
        -webkit-transform: rotateZ(5deg);
      
        -webkit-transition: -webkit-transform 2s ease-in-out;
      }
      #threed-example:hover {
        -webkit-transform: rotateZ(-5deg);
      }
      
      按下 3 键!
      CSS

      动画效果

      @-webkit-keyframes pulse {
       from {
         opacity: 0.0;
         font-size: 100%;
       }
       to {
         opacity: 1.0;
         font-size: 200%;
       }
      }
      
      div {
        -webkit-animation-name: pulse;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: alternate;
      }
      
      跳动!
      CSS
      HTML5 ~= HTML + CSS + JS APIs

      HTML5 =下一代Web开发的新特征