• HTML4.0 :

  MIME:text/html 结构松散，标签不严谨

• XHTML1.0 :

  MIME:application/xhtml+xml标签,语法严格

• XHTML1.1 :

  MIME:application/xhtml+xml,全部,xml 所以很多用户开始以text/html做声明，XHTML写文件

• XHTML2.0 :Never finished

• Backward compatibility, clear migration path
• Well-defined error handling
• Users should not be exposed to authoring errors
• Practical use
• Scripting is here to stay
• Device-specific profiling should be avoided
• Open process

Features:

• Web Forms 2.0
• Web Applications 1.0

• 1991 HTML
• 1997 HTML4
• 1999 HTML4.01
• XHTML1.0+CSS 假XML
• XHTML1.1 XML
• 06/2004 WHATWG 诞生
• 08/2006 W3C和WHATWG合作 将Web Applications 1.0改名为HTML 5
• 2005 AJAX
• 08/2009 W3C关闭XHTML2工作组
• 2009 HTML5
• 2010/4 Apple block Flash

作用：Canvas使用JS在网页上绘图，画布为矩形，多种绘制方法

绘制实色图形

<canvas id="myCanvas1" width="200" height="100"></canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas1");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000"
    cxt.fillRect(0,0,150,75)
</script>

放置图片

<canvas id="myCanvas2" width="200" height="100"></canvas>

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    var img=new Image()
    img.src="flower.png"
    cxt.drawImage(img,0,0);
</script>

作用：视频，摆脱第三方插件如Flash

3种视频格式：

• Ogg: Theora 视频编码和 Vorbis 音频编码
• MPEG4: H.264 视频编码和 AAC 音频编码
• WebM: VP8 视频编码和 Vorbis 音频编码

例子

<video src="./movie/big_buck_bunny.webm" controls="controls" >
</video>

作用：音频

3种音频格式：

• MP3
• Ogg
• WAV

例子

<audio src="./movie/audacity_tremolo.ogg" controls="controls">
</audio>

localStorage

特点：没有时间限制

<script type="text/javascript">
    localStorage.lastname="Smith";
    document.write(localStorage.lastname);
</script>

sessionStorage

特点：真对一个session进行数据存储，窗口关闭后数据删除

<script type="text/javascript">
    sessionStorage.lastname="Smith";
    document.write(sessionStorage.lastname);
</script>

新增的类型

• email
• url
• number
• range
• Date pickers(date, month, week, time, datetime, datetime-local)
• search
• color

email

E-mail:<input type="email" name="user_email"/>

作用:识别地理位置,进一步可以分享

例子

<script type="text/javascript">
function loadDemo() {
    if(navigator.geolocation) {//检测浏览器是否支持Geolocation
        navigator.geolocation.getCurrentPosition(updateLocation);
    }
}
function updateLocation(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    if (!latitude || !longitude) {
        return;
    }
    document.getElementById("latitude").innerHTML = latitude;
    document.getElementById("longitude").innerHTML = longitude;
}
</script>

拖拽文件

document.querySelector('#dropzone').addEventListener('drop', function(e) {
  var reader = new FileReader();
  reader.onload = function(evt) {
    document.querySelector('img').src = evt.target.result;
  };

  reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);

Rounded Corners

div
{
    border:2px solid;
    border-radius:25px;
    -moz-border-radius:25px;
}

Box Shadow

div
{
    box-shadow: 10px 10px 5px #888888;
}

Border image

div
{
    border-image:url(border.png) 30 30 round;
    -moz-border-image:url(border.png) 30 30 round;
    -webkit-border-image:url(border.png) 30 30 round;
    -o-border-image:url(border.png) 30 30 round;
}

Text Shadow

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

Word Wrapping

p{word-warp:break-word;}

• translate
• rotate
• scale
• skew
• matrix

translate

div
{
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px);
    -webkit-transform: translate(50px,100px);
    -o-transform: translate(50px,100px);
    -moz-transform: translate(50px,100px);
}

模拟动画

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    -moz-animation-name: myfirst;
    -moz-animation-duration: 5s;
    -moz-animation-timing-function: linear;
    -moz-animation-delay: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-play-state: running;
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

• Planet
• CSScat
• Google_guitar
• Pac
• Canvas-grad
• BallPoll
• liquid-particles
• 3D
• Firefox

reStructured ^Text WYTIWYG

目的

1. 建立一套标准语法来使用纯文本内容来表达内容的结构
2. 将这类文档转换为有效的结构化数据模式

优点

• 易于阅读，纯文本标记语法和解析系统
• 易于使用,优秀扩展性
• 足够强大的语法来产生结构化文档
• 可处理各种自然语言
• MultiOutput:HTML,XML,LaTex,PDF,s5,man,odt,xml.xetex
• Python官方文档

landslide

Github https://github.com/adamzap/landslide

• html5slides A Google HTML5 slide template

• HTML5ROCKS

• HTML5DashBoard

• Dive Into HTML5

• HTML5test test your browser's support for html5

• W3Cschool

• Tutorial

• Another Tutorial

• 开源中最好的Web开发的资源