概述
HTML5 并不僅僅只是html標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，成為第一個將web作為應用開發平臺的HTML語言。
HTML5定義了一系列新元素，如新語義標簽、智能表單、多媒體標簽等，可以幫助開發者創建富互聯網應用，還提供了一些Javascript API，如地理定位、重力感應、硬件訪問等，可以在瀏覽器內實現類原生應用，甚至結合Canvas我們可以開發網頁版游戲。
一、語義標簽 新增標簽以及語義標簽（部分）
- 語義標簽：
在段落標簽<p>無/有序列表<ul>/<ol>、<h1>~<h6>一些列標題標簽的基礎上,HTML5增加了大量更有意義的語義標簽，更有利于搜索引擎去檢索或輔助設備來理解HTML頁面內容。
<nav> |
導航 |
|---|---|
<header> |
頁眉 |
<footer> |
頁腳 |
<section> |
區塊 |
<article> |
文章 |
<aside> |
側邊欄 |
<progress> |
進度條 |
- 新增標簽：
幾個顛覆性的標簽：<video>、<audio>、<canvs>
以上兩點都只是簡單舉例，具體屬性介紹與用法自己去熟悉H5的官方文檔
二、html5的新特性（js部分）
案例：瀏覽器換膚
這需要在用戶客戶端存儲一些數據，之前是使用cookie。
Html5 里面新增了兩個對象，讓我們去保存數據。
sessionStorage和localStorage
以后數據可以直接保存在這個里面。
這兩個對象的區別：
localStorage里的數據是永久保存。（比如記錄瀏覽器用戶搜索歷史）
sessionStorage里的數據是緩存在瀏覽器內存里的。
詳細代碼：
html部分：
<div style="float: right;margin-right:30px;">
<select id="changeId">
<option value="">換膚</option>
<option value="pink">粉色</option>
<option value="yellow">黃色</option>
<option value="blue">藍色</option>
<option value="#E92322">京東紅</option>
</select>
</div>
js部分：
<script>
document.querySelector("#changeId").onchange = function(){
var color = this.value;
document.body.style.backgroundColor = color;
//把數據保存到localStorage里面。
//以鍵值對的方式去保存
window.localStorage.setItem("bgcolor","color")
};
//頁面一打開時，將localStorage里的數據拿出來，設置到document.body.style.backgroundColor上。
var color = window.localStorage.getItem("bdcolor");
if(color){
document.body.style.backgroundColor = color;
}
</script>
三、HTML5的定位以及調用百度地圖的步驟
使用js 提供的api，讓我們可以獲取到用戶的經緯度。然后調用第三方接口（百度地圖/高德地圖），做一些基于lbs（Location base service）的服務，比如微信、外賣、陌陌等。
//首先獲取經緯度，調用百度地圖api
//查看H5文檔里地理定位的api 在pc端模擬一個經緯度（獲取衛星定位 pc沒有硬件支持 ）。
<script>
//用來獲取用戶的當前位置。
function showPosition(position){
//獲取到經緯度
var p1 = position.coords.latitude;
var p2 = position.coords.longitude;
//開發時在這里去調用第三方接口
//在移動端這段代碼絕對沒問題，但pc端在這里只能模擬一個經緯度。
}
//這是一個回調函數（將一個函數作為參數傳遞的函數）
//成功獲取用戶位置時被調用
window.navigator.geolocation.getCurrentPosition(showPosition);
</script>
//獲取經緯度，引入百度的js庫（需先申請密鑰），調用百度地圖。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
#panorama {
height: 500px;
width:5oopx;
overflow: hidden;
}
</style>
<body>
//頁面要渲染街景（非實時）地圖的位置
<div id = "panorama"></div>
</body>
<script>
//假如已經獲取到（魯東大學北區逸夫實驗樓）經緯度
var jd = "121.361273";
var wd = "37.526138";
var panorama = new BMap.Panorama('panorama');
//將要顯示的區域坐標傳入，根據經緯度坐標展示全景圖
panorama.setPosition(new BMap.Point(jd,wd));
</script>