什么是html5?
僅僅是狹義的概念。h5草案前身叫做web application 由WHATWG組織編寫，在2007年提交到了w3c，w3c起名叫做HTML5。
廣義上：新一代開發web富客戶端應用程序整體解決方案
富客戶端：很強交互和用戶體驗。
文檔結構--文檔樣式--文檔交互
html5=html+css+JavaScript 。
html5應用場景
1.極具表現力的網頁
2.網頁應用程序
pc端：icloud office365
app端：淘寶、京東、美團
wechat端：淘寶、京東、美團
3.開發本地應用
pc端：網易云音樂、有道詞典
這個應用只是一個殼子，里面嵌套的是html5代碼
4.簡單的游戲(canvas)
html5多了啥？
1.新增的語義化標簽
2.新增的樣式
3.新增的接口(功能)
這里來介紹新增的html
語義化標簽、屬性、智能表單、網頁多媒體、canvas 2d和3d繪圖、svg（矢量圖）
簡單介紹新增的css
選擇器 字體 文本 透明度 圓角 線性、徑向漸變 背景 邊框圖片 盒子模型 過渡 動畫
簡單介紹新增的JavaScript api
基礎的api：新的選擇器 Element.classList 訪問歷史api 全屏api
網頁存儲： Application Cache localStorage sessionStorage WebSQL indexedDB
設備信息訪問：網絡狀態 硬件訪問 設備方向 地理圍欄
拖放操作：網頁內拖放 桌面拖入 桌面拖出
文件:文件系統api FileReader
網絡訪問：XMLHttpReques fetch webSocaket
多線程
桌面通知
我這里講一下語義化標簽
頁面結構的劃分
h5標簽并不是要取代div，它只是有些部分增加了語義
<header></header> 頁眉
主要用于頁面的頭部的信息介紹，也可用于板塊頭部
<hgroup></hgroup> 頁面上的一個標題組合
一個標題和一個子標題，或者標語的組合
<hgroup>
<h1>妙味課堂</h1>
<h2>帶您進入富有人情味的IT培訓</h2>
</hgroup>
<nav></nav> 導航 （包含鏈接的的一個列表）
<nav><a href=“#”>鏈接</a><a href=“#”>鏈接</a></nav>
<nav>
<h2>妙味精品課程</h2>
<ul>
<li><a href=“#”>javascript</a></li>
<li><a href=“#”>html+css</a></li>
</ul>
</nav>
<nav>
<p><a href=“#”>妙味課堂</a></p>
<p><a href=“#”>妙味課堂</a></p>
</nav>
<footer></footer>頁腳 頁面的底部 或者 版塊底部
<section> <section> 頁面上的版塊
用于劃分頁面上的不同區域,或者劃分文章里不同的節
<article></ article > 用來在頁面中表示一套結構完整且獨立的內容部分
可以用來呈現論壇的一個帖子，雜志或報紙中的一篇文章，一篇博客，用戶提交的評論內容，可互動的頁面模塊掛件等。
<aside></ aside> 元素標簽可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其他類似的有別與主要內容的部分
aside 的內容應該與 article 的內容相關。
被包含在<article>中作為主要內容的附屬信息部分，其中的內容 以是與當前文章有關的引用、詞匯列表等
<figure> < figure > 用于對元素進行組合。一般用于圖片或視頻
<figcaption> <figcaption> figure的子元素 用于對figure的內容 進行說明
<figure>
<img src=“miaov.png”/>(注意沒有alt)
<figcaption> 妙味課堂 photo © 妙味趣學</figcaption>
</figure>
<time></time>用來表現時間或日期
<p> 我們在每天早上 <time>9:00</time> 開始營業。 </p>參數
<p> 我在 <time datetime="2008-02-14">情人節</time> 有個約會。 </p>
<datalist></datalist>選項列表。與 input 元素配合使用，來定義 input 可能的值。
<input type="text" list="valList" />
<datalist id="valList">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
<details></details>用于描述文檔或文檔某個部分的細節
該元素用于摘錄引用等 應該與頁面的主要內容區分開的其他內容
Open 屬性默認展開
<summary></summary> details 元素的標題
<details>
<summary>妙味課堂</summary>
<p>國內將知名的IT培訓機構</p>
</details>
<dialog></dialog>定義一段對話
<dialog>
<dt>老師</dt>
<dd>2+2 等于？</dd>
<dt>學生</dt>
<dd>4</dd>
<dt>老師</dt>
<dd>答對了！</dd>
</dialog>
<address></address> 定義文章 或頁面作者的詳細聯系信息
<mark></mark> 需要標記的詞或句子
<keygen>給表單添加一個公鑰
<form action="http://www.baidu.com" method="get">
用戶: <input type="text" name="usr_name" />
公鑰: <keygen name="security" />
<input type="submit" />
</form>
<progress><progress>定義進度條
<progress max="100" value="76">
<span>76</span>%
</progress>
Forms新增
number : 只能包含數字的輸入框
color : 顏色選擇器
datetime : 顯示完整日期
datetime-local : 顯示完整日期，不含時區
time : 顯示時間，不含時區
date : 顯示日期
week : 顯示周
month : 顯示月
新的表單特性和函數
placeholder : 輸入框提示信息
例子 : 微博的密碼框提示
autocomplete : 是否保存用戶輸入值
默認為on，關閉提示選擇off
autofocus : 指定表單獲取輸入焦點
required : 此項必填，不能為空
Pattern : 正則驗證 pattern="\d{1,5}“
Formaction 在submit里定義提交地址
引入js文件解決h5兼容問題
