HTML5 + CSS3

Web技术大致的时间轴

1993

超文本标记语言（第一版）

1995

HTML 2

1996

CSS 1

JavaScript

1997

HTML 4

1998

CSS 2

2000

XHTML 1

2002

使用DIV+CSS进行网页布局

2005

AJAX

2008

HTML 5工作草案（http://dev.w3.org/html5/spec/）

2022

……

CSS3

CSS

各浏览器私有属性

区别各浏览器的hack写法：

background:blue;        // Firefox 
background:red\9;       // IE
background:red\0;       // IE8+IE9
background:red\9\0;     // IE9
*background:black;      // IE7+IE6
+background:black;      // IE7+IE6
_background:orange;     // IE6

html:root #element { color:blue; }     //CSS3
:root #element { color:pink \0; }      //IE9

私有属性：

使用 -前缀- 来实现各引擎的私有属性

-o-：以Presto为渲染引擎的Opera的私有属性
-moz-：以Gecko为渲染引擎的Firefox的私有属性
-webkit-：以Webkit为渲染引擎的Safari、Chrome的私有属性
-ms-：以Trident为渲染引擎的IE系列，从IE8开始，引入-ms-区分私有属性

CSS

CSS 选择器

奇/偶选择

匹配父元素中的第n个子元素
.row:nth-child(even) {
  background: #dde;
}
.row:nth-child(odd) {
  background: white;
}

Row 1

Row 2

Row 3

Row 4

通过属性选择

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

反选

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

以及一些其它的选择方法

h2:first-child { ... }

div.text > div { ... } 

h2 + header { ... }

元素显示

将对象呈递为内联对象，但是对象的内容作为
块对象呈递。旁边的内联对象会被呈递在同一
行内，允许空格。使用它就可以再使用
text-align来将元素内容居中

div {
  display: inline-block;
}

CSS

显示本地没有的字体

  font-family：设置文本的字体名称。
  font-style：设置文本样式。
  font-variant：设置文本是否大小写。
  font-weight：设置文本的粗细。
  font-stretch：设置文本是否横向的拉伸变形。
  font-size：设置文本字体大小。
  src：设置自定义字体的相对路径或者绝对路径。

@font-face { 
  font-family: 'LeagueGothic'; 
  src: url(LeagueGothic.otf); 
}

header {
  font-family: 'LeagueGothic';
}

字体文件三种格式
.TTF或.OTF，适用于Firefox 3.5、Safari、Opera 
.EOT，适用于Internet Explorer 4.0+ 
.SVG，适用于Chrome、iPhone

  http://www.fontsquirrel.com
     （特点：上传字体文件，生成多种字体格式及CSS代码）
	 
  http://www.google.com/webfonts
     （特点：直接调用google服务器地址）
	 
  http://new.myfonts.com/WhatTheFont
    （特点：上传图片，自动识别字体）

CSS

文本溢出处理

div {
  text-overflow: ellipsis;
}

只设置overflow: hidden

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.

只设置overflow: hidden 及 white-space: nowrap

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.

只设置overflow: hidden 及 white-space: nowrap 和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.

拖动滑动条试试！

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;  
   
  color:yellow;

}

文本描边示例

CSS

透明效果

	
RGBA:Red（红色） Green（绿色） Blue（蓝色）和 Alpha（透明度）
		
color: rgba(255, 0, 0, 0.75);  

background: rgba(0, 0, 255, 0.75);

透明效果

CSS

HSLA(色相/饱和度/亮度/透明度)

color: hsla(

  128,  

  75%,  

  33%,  

  1.00);

HSL example

CSS

圆角效果

  border-radius: 0px; 

  borde-top-left-radius: 0px;  
  
  borde-top-right-radius: 0px;

圆角

CSS

阴影效果

text-shadow: 

  rgba(64, 64, 64, 0.5)   //色值

  0px   //X轴

  0px   //Y轴

  0px;   //模糊

  
box-shadow: 

  rgba(0, 0, 128, 0.25) 

  0px  

  0px  

  0px;

阴影效果示例

CSS

渐变效果

background: 
  -webkit-gradient(
	linear,   //渐变的类型（线性、径向等）
	left top, //渐变开始的X Y 轴坐标
	left bottom, //渐变结束的X Y 轴坐标/
	from(#00abeb),  //开始的颜色
	to(white),  //结束的颜色
	color-stop(0.5, white), //中途改变颜色
	color-stop(0.5, #66cc00)//中途改变颜色
	)
	
  -moz-linear-gradient(  //类型放到了属性前缀中
	top,  //开始的位置（默认为top）
	#00abeb,  //开始的颜色
	white 50%,  //结束的颜色及位置
	##66cc00 0%,  //继续开始的颜色
	white  //颜色
	)

CSS

更强大的背景

背景的尺寸

#logo {
  background: url(logo.gif) center center no-repeat;
  background-size: 50px 50px;  //设置背景的大小
  background-size: contain; //contain表示按比例缩放占据最大高度或者宽度的背景
  background-size: cover;  //表示铺满整个背景
  background-size: 
    ;
}

多个背景

div {
  background: url(src/bg1.png) 10px center no-repeat, 
              url(src/bg2.png) 10px center repeat-x, 
              url(src/bg3.png) 10px center repeat-x;
}

CSS

变换（过渡） - Transitions

利用CSS伪类 :link :visited :hover :active :focus

<ul class="menu"> 
  <li>About Us
    <ul class="drop"> 
      <li><a href="#">Our Team</a></li> 
      <li><a href="#">News</a></li> 
      <li><a href="#">Contact</a></li> 
    </ul> 
  </li> 
</ul> 
ul.menu ul li:hover {
   background-color: rgb(234,234,234);  //hover时的背景色
   -webkit-transition: background-color .5s ease .1s; //变化的属性 持续时间 速率 延时
}
ul.menu:hover .drop {
   height: 140px;
   opacity: 1;
   -webkit-transition: opacity .25s linear 0s,
                       height .25s linear 0s;  //linear匀速 ease渐慢 ease-in淡入

CSS

变换（变形） - Transforms

鼠标悬停在下面红色区域:

-webkit-transform: rotate(-5deg);     //传递一个度数值（degree）转动一个对象       
-webkit-transform: scale(.5);     //传递一个正数、负数或小数来缩放或者反转一个对象
……

div{ -webkit-transition: -webkit-transform 2s ease-in-out;}
div:hover{ -webkit-transform: rotate(-5deg);}

div{ -webkit-transition: -webkit-transform 2s ease-in-out;}      
div:hover{-webkit-transform: scale(.5);}

div{ -webkit-transition: -webkit-transform 2s ease-in-out;}      
div:hover{-webkit-transform:rotate(-5deg) scale(.5);}

按下 3 键!

CSS

动画效果

/* 定义要调用的动画 */
@-webkit-keyframes jump {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
   padding-left:500px;
 }
}
div {
  -webkit-animation-name: jump;  //动画的名称。
  -webkit-animation-duration: 2s; //定义动画播放一次需要的时间
  -webkit-animation-iteration-count: infinite; //定义循环数，infinite为无限次。默认1次
  -webkit-animation-timing-function: ease-in-out;//定义动画播放的方式
  -webkit-animation-direction: alternate;
              //动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。
                      另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。
}

跳动!

CSS

CSS选择器
@font-face服务器字体
文本溢出处理
分栏显示
文本描边
颜色效果-透明度、色相、饱和度、亮度（RGBA/HSLA）
圆角效果
渐变效果
阴影效果
更强大的背景
变换和动画

HTML

新的语义标签

<body>
  <header> //定义 section 或 page 的页眉。
    <hgroup> //定义文档中 section 的信息。
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>
  
  <nav> //定义导航链接。
   <ul>
     Navigation...
   </ul>
  </nav>

  <section>//定义 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>
  
  <aside> //定义页面正文之外（侧栏）的内容。
   Top links...
  </aside>
  
  <footer>//定义 section 或 page 的页脚。
   Copyright © 2009.
  </footer>
</body>

HTML

新的表单元素类型

增强已有元素

输入类型：（UI方面）
              
<input type='range' min='0' max='50' value='0' /> 
//range类型用于应该包含一定范围内数字值的输入域。（显示为滑动条）
<input results='10' type='search' /> 
//search类型用于搜索域，比如站点搜索或 Google 搜索。（显示为常规的文本域）
<input type='month' /> <input type='week' /> 
<input type='time' /> <input type='date' /> 
//Date Pickers（时间数据检出器）
<input type='text' placeholder='输入您的用户名' /> 
//placeholder属性提供一种提示，占位字符。（输入域为空时显示出现，会在输入域获得焦点时消失

输入检查:(不符合条件的将显示红色背景)

<style> :invalid（无效）{background-color:red;} </style>
<input type='color' /> 
<input type='url' /> 
<input type='number' /> 
<input type='email' /> 
<input type='tel' />

HTML

音频 + 视频 - Audio + Video

<audio src="sound.mp3" controls></audio> //ogg、mp3、wav（Chrome Safari）
document.getElementById("audio").muted=false;

<video width="320" controls="controls" autoplay="autoplay" loop="loop">
  <source src="movie.ogg" type="video/ogg" /> //Firefox、Opera、Chrome
  <source src="movie.mp4" type="video/mp4" /> //IE9、Safari、Chrome
  <source src="movie.webm" type="video/webm" /> //Firefox、Opera、Chrome
  您的浏览器不支持video标签
</video>
document.getElementById("video").play();//pause()   muted=false

HTML

微数据 - Microdata （微数据、微格式和 RDFa）

豆瓣使用RDFa提供给Google抓取
<span property="v:summary">1988是另一种1984</span>
<span property="v:reviewer">王彻</span>
<span property="v:dtreviewed" content="2011-02-04">2011-02-04 02:35:31</span>
<span property="v:itemreviewed">1988：我想和这个世界谈谈</span>
<span property="v:rating">5</span>
<span property="v:description">现实里，我们总是有办法在1984的世界里……</span>

<div itemscope itemtype="http://example.org/band"> //规范集People、Products、Events

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

富文本摘要的测试工具 http://www.google.com/webmasters/tools/richsnippets

扩展学习：http://www.uxfan.com/tag/microdata/

HTML5

图形绘制 - Canvas

<canvas id="canvas" width="300" height="150"></canvas>
<script>
  var canvasContext = document.getElementById("canvas").getContext("2d");
  //canvas只支持一种基本形状——矩形，所以其它形状都是有一个或多个路径组合而成
  canvasContext.fillRect(25,25,100,100);   //绘制矩形区域
  canvasContext.clearRect(45,45,60,60);    //清除矩形区域
  canvasContext.strokeRect(50,50,50,50);   //绘制矩形边框
  //绘制路径
  canvasContext.beginPath();    //beginPath()开始绘制  closePath()结束绘制
  canvasContext.moveTo(300,50);
  canvasContext.lineTo(250,100);
  canvasContext.lineTo(350,100);
  canvasContext.fill();    //fill()实心 stroke()边框 fillStyle=‘orange’实心填充
  
  canvasContext.beginPath();  
  arc(290,170,40,1,3,true);//圆心横坐标、纵坐标、半径、起始弧度、末端弧度（x轴为基准）、顺时针 
  canvasContext.stroke(); 
</script>

arc方法里用到的角度是以弧度为单位而不是度。
度和弧度直接的转换可以用这个表达式：var radians = (Math.PI/180)*degrees;。1弧度约为57.3°

HTML

应用图像 - Canvas

引入图像需要两步：
		
1、来源图片（不是简单的URL路径，但可以是一个JS的image对象引用，或者其它的canvas元素。）
  ● 利用document.getElementById等方法引用页面内的图片
  
  ● 利用document.getElementsByTagName等方法引用其它canvas元素
  
  ● 用脚本加载一个新的image对象，img.src = 'myImage.png';
  
  ● 通过data:url方式嵌入图像，var img_src = 'data:image/gif;base64,R3pn/ZEAAAE';
  
2、用drawImage方法将图像插入到canvas中。
  ● 普通：drawImage(image, x, y)  
	//image是image或者canvas对象，x和y是其在目标canvas里的起始坐标。
	
  ● 缩放：drawImage(image, x, y, width, height)
	//width和 heigh分别是图像在canvas中显示大小。
	
  ● 切片：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
	//后8个中，前4个是定义图像源的切片位置和大小，后4个是定义切片的目标显示位置和大小。

HTML

应用图像 - Canvas

<canvas id="canvas2" width="838" height="200" style="margin:0;"></canvas>
<script>
  var canvasContext  = document.getElementById('canvas2').getContext('2d');
  var img = new Image();
  img.src = 'images/wall.jpg'
  document.getElementById('canvas2_btn1').onclick = function(){
  	canvasContext .drawImage(img,100,13);
  }			
  document.getElementById('canvas2_btn2').onclick = function(){
	canvasContext .drawImage(img,350,13,100,80);
  }
  document.getElementById('canvas2_btn3').onclick = function(){
	canvasContext .drawImage(img,0,70,90,90,350,110,90,80);
  }
</script>

HTML

新语义标签 (header、nav、section、article、…… )
Web 表单 2.0 (Input 元素)
多媒体 (Audio 标签, Video 标签)
微数据（Microdata）
图形绘制 (Canvas)

HTML5两大特点:: 1、强化Web网页的表现性能。; 2、新增本地数据库等Web应用功能。

HTML5≈HTML + CSS + JS APIs

JS APIs

·新的选择器
document.getElementsByClassName("section"); document.querySelectorAll("ul li:nth-child(odd)");
·本地储存
window.localStorage['value']
·本地数据库
var db = window.openDatabase("Database Name", "Database Version");
·文件缓存
<html manifest="cache-manifest"> window.applicationCache.addEventListener('checking', updateCacheStatus, false);
·让程序在后台运行
var worker = new Worker(‘extra_work.js');
worker.onmessage = function (event) { alert(event.data); };

·双向信息传输
允许Web服务器实时、主动的向浏览器发送信息。
·桌面提醒
基于浏览器的，向前台推送消息。
·拖放操作
1、页面内拖放；
2、从桌面拖动文件到页面
·地理位置

HTML5优势：

在于能够实现跨平台的技术支持，无需下载插件便可运行，无需为各种设备开发不同的版本。（iPhone, Android, Window Phone 7, WebOS, Backberry 6.0, Nokia's Symbian和 Meego 等移动设备都支持HTML5。）

HTML5是新一代的网络开发技术。他要做的不是修补HTML4中的不足，而是下一代（特别是移动互联网）网络通信、交互应用的基础。

谢谢 & 讨论

参考

原稿
http://directguo.com/html5/
《我的web之路和HTML5展望》讲稿
http://hi.baidu.com/jcifox/blog/item/5b889fdd15675d255982dd85.html
HTML的发展历程
http://www.deerol.com/novice/201101171353236716.shtml
各主流浏览器对HTML5的支持情况对比
http://www.mhtml5.com/2010/05/551.html
丰富网页摘要（微数据、微格式和 RDFa）
http://www.uxfan.com/tag/microdata/
富文本摘要的测试工具
http://www.google.com/webmasters/tools/richsnippets
<canvas>元素教程
https://developer.mozilla.org/cn/Canvas_tutorial%3aBasic_usage

参考

各浏览器的私有属性
http://blog.csdn.net/wxkingstar/article/details/5474559
http://www.unicac.cn/?p=379
12款有助于简化CSS3开发的工具
http://www.css3-html5.com/CSS3-News/20110714710.html
CSS3 渐变效果生成器
http://skylover.org/buzz/file/toy/css3-gradient/index.html
生成多种字体格式及CSS代码
http://www.fontsquirrel.com
Google字体API
http://www.google.com/webfonts
Google字体API使用
http://www.zhangxinxu.com/wordpress/?p=1803示例
自动识别字体
http://new.myfonts.com/WhatTheFont