本演示文档是一个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);
    2. 选择文本并拖动 (文本将原封不动复制到目标区域)
    3. 选择文本并拖动 (文本将被调整后复制到目标区域)
    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
    • 语义 (New tags, Link Relations, Microdata)
    • 易用性 (ARIA roles)
    • Web 表单 2.0 (Input 元素)
    • 多媒体 (Audio 标签, Video 标签)
    • 2D and 3D 图形绘制 (Canvas, WebGL, SVG)

    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
    • 布局排版
    • 视觉效果
    • 变换和动画 - Transitions, transforms and animations
    HTML5 ~= HTML + CSS + JS APIs

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