HTLL5简介、新元素、离线存储

参考

HTML5 = Next Generation Features for Modern Web Development

HTML5 ~= HTML + CSS + JS

  • 1991 | HTML
  • 1994 | HTML 2
  • 1996 |CSS 1 + JavaScript
  • 1997 |HTML 4
  • 1998 |CSS 2
  • 2000 |XHTML 1
  • 2002 |Tableless Web Design
  • 2005 |AJAX
  • 2009 |HTML 5

html5新元素

新语义元素

HTML5 新增的 HTML 语义(semantic) 元素如下。所有这些元素都是 块级 元素。包括:

参考

  • header: 元素应该作为介绍内容或者导航链接栏的容器
  • section: 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
  • footer:在典型情况下,该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
  • aside:标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关
  • nav:定义导航链接的部分
  • main:main表示document中body的主要内容,但不能在一个document中有多个main,不能在article,aside,footer,header或者nav中包含main。
  • article: 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。如帖子、博客、小新闻、评论
  • figure:标签规定独立的流内容(图像、图表、照片、代码等等)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>new tag</title>
</head>
<body>
    <header>My page</header>
    <nav>
        [url=#]Home[/url]
    </nav>
    <main>
        <article>
            <h1>My article</h1>
            Content
        </article>
        <aside>
            More information
        </aside>
    </main>
    <footer>Copyright 2013</footer>
</body>
</html>

其他新标签

新表单类型

<input type="text" required />

<input type="email" value="some@email.com" />

<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>

<input type="range" min="0" max="50" value="10" />

<input type="search" results="10" placeholder="Search..." />

<input type="tel"  placeholder="(555) 555-5555"
         pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />

<input type="color" placeholder="e.g. #bbbbbb" />

<input type="number" step="1" min="-5" max="10" value="0" />
<style>
  [required] {
    border-color: #88a;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
  }
  :invalid {
    border-color: #e88;
    -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
  }
</style>

Audio + Video

<video width="320" height="240" controls>
  <source src="http://slides.html5rocks.com/src/chrome_japan.mp4" type="video/mp4">
  <source src="http://slides.html5rocks.com/src/chrome_japan.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>
<audio id="audio" src="http://slides.html5rocks.com/src/rushus-modal_blues.mp3" controls></audio>

离线存储

  • cookie: 4KB
  • localStorage: 5MB

localStorage

用于存储大量数据在浏览器本地,审查元素->resource->localStorage查看。存储的内容永不失效。刷新,关闭浏览器数据一直在。直到清空。

//添加属性-值
localStorage.name = 'xiaoming';
localStorage.setItem('age', 18);
localStorage['sex'] = '男';

//修改值
localStorage.name = '小灰';
localStorage.setItem('age', 2);
localStorage['sex'] = '公';

//删除属性
localStorage.removeItem('name');

//数据的存储和读取
var people = {
  name: 'kevin',
  age: 18
};
localStorage['people'] = JSON.stringify(people);

var p = JSON.parse(localStorage.people);
console.log(p);

sessionStorage

使用方式同localStorage, 区别仅一次会话有效。 如果关闭浏览器再打开就失效了。

其他

  • websql
  • indexdb
  • application cache

定位

使用 getCurrentPosition() 方法来获得用户的位置

navigator.geolocation.getCurrentPosition(function(poi){
    console.log(poi);
});
  • coords.latitude 十进制数的纬度
  • coords.longitude 十进制数的经度
  • coords.accuracy 位置精度
  • coords.altitude 海拔,海平面以上以米计
  • coords.altitudeAccuracy 位置的海拔精度
  • coords.heading 方向,从正北开始以度计
  • coords.speed 速度,以米/每秒计
  • timestamp 响应的日期/时间

watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置

navigator.geolocation.getCurrentPosition(function(poi){
    console.log(poi);
});

拖放

web workers