Hello, 2018
一、語法元素標籤
1.<!DOCTYPE html> //表示該文件為html5型別文件
<html lang="zh-CN">//宣告語言為中文
<meta charset="utf-8">//字元
<input type="checkbox" checked />//boolean值 屬性值單引號 屬性值省略引號
標籤省略閉合、標籤不區分大小寫
2.新增標籤
結構標籤：
section 內容區塊，如章節、頁首、頁尾或頁面其他部分
article 頁面中與上下文不相關的獨立內容，如一篇文章
aside 表示article文章之外的與article標籤內容相關的輔助資訊
header 頁面中一個內容區塊或整個頁面的標題
hgroup 對整個頁面或頁面中一個內容區塊的標題進行組合
footer 整個頁面或頁面中一個區塊的腳註，一般包含作者姓名、創作日期以及作者聯絡資訊
nav 頁面中導航連結的部分
figure 一段獨立的流內容，一般表示文件主體流內容中的一個獨立單元，使用figcaption標籤為figure標籤組新增標題
媒體標籤：
<video src="video.ogg" controls="controls"> video標籤</video>
<audio src="audio.mav">audio標籤</audio>
<embed src="flash.swf" />嵌入各種媒體內容Midi Wav FIFF AU MP3 flash等
表單控制元件標籤：
url
number
range
Date Pickers
有多個可供選取日期和時間的新輸入型別:
date 選年月日
month 選取年月
week 選取年周
time選取時間 小時和分鐘
datetime選取時間 日月年(UTC時間)
datetime-local 選取時間 日月年(本地時間)
search 用於搜尋、域顯示為常規文字域
color
3.新增其他標籤
<mark></mark>用於視覺上突出顯示或高亮顯示文字，典型應用：搜尋結果中高亮顯示關鍵字
<progress>表示執行程序，可用於progress標籤顯示js中耗時時間函式的程序，如載入，下載進度等
<time datatime="2018-1-1T23:56Z" pubdate>23:56<time> //pubdate表示datetime值是該文章的釋出時間
<ruby> <rt></rt> <rp>(</rp> <rp>)</rp></ruby>//ruby對某個字註釋,rt註釋內容，rp瀏覽器不支援顯示的內容
<wbr></wbr>當頁面寬度不夠執行軟換行<p>你的快遞<wbr></wbr>到了</p>
<canvas name="myCvs"></canval>畫布標籤
<script>
var cvs = document.getElementsByName("myCvs");
var ctx = cvs.getContext("2d");
ctx.fillStyle="#b4b4b4";
ctx.fillRect(0,0,100,80);//從(0,0)點開始畫長0(y軸方向)10，寬(x軸方向)80的矩形
</script>
<command onclick="alert('Hi 2018')" label="click"></command>//命令選單
<details>//展開詳細資訊
<summary>概要資訊</summary>
<ol start="10" reversed>//從10開始，倒敘顯示：10.a 9.b 8.c
<li>a</li> <li>b</li><li>c</li></ol>
</details>
<datalist></datalist> //為input框新增選項
<input list="myList" />
<datalist id="myList">
<option val="a"></option>
<option val="b"></option>
<option val="c"></option>
</datalist>
<keygen>標籤規定用於表單的金鑰對生成器欄位，當提交表單時，私鑰儲存在本地，金鑰傳送到伺服器
<output></output>結果計算輸出值
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50" />
<input type="number" id="b" value="50"/>
<output name="x" for="a b"></output>
</form>
<menu>//選單
<ul>
<li><input type="checkbox" />Apple</li>
<li><input type="checkbox" />Banana</li>
<ul>
</menu>
3.被刪除的標籤
big center font s strike tt u
frameset framen frames 不支援frame框架
4.新增屬性
input type=text、select、textarea、button新增autofocus屬性
input type=text、textarea 增加placeholder屬性
input output select textarea button fididset指定form屬性，表明屬於哪個表單，該元素可放在頁面的任何位置
input type=text、textarea指定require屬性，使用者提交時檢查該元素內必填內容
input 新增autocomplete\min\max\multiple\pattern\step\list(與datalist標籤配合使用)。datalist與autocomplete屬性配合使用，multiple屬性允許上傳時一次上傳多個檔案，pattern屬性用於驗證輸入欄位的模式，step屬性規定輸入欄位的合法數字間隔可與max min配合使用
input button標籤新增formaction formenctype formmethod formnovalidate formtarget屬性，使用者重置form標籤的action enctype method novalidate target屬性，fieldset標籤新增disabled屬性，可以把他的子標籤設為disabled狀態
input button form 增加novalidate屬性，取消提交時有關驗證
連結相關屬性：
a area 增加media(media=handhelp/tv/iPhone)0 列出媒介、裝置
area 增加hreflang規定在被連線文件中的文字語言，只有設定了href屬性才能使用該屬性，rel屬性規定當前文件與被連結文件、資源之間的關係，只有當使用href屬性才能會用rel屬性
link 增加size屬性，規定被連結資源尺寸，只有被連結資源是圖示時（rel=icon），才能使用該屬性
base 增加target屬性，保持與a標籤一致性
其他屬性：
ol reversed，列表倒敘顯示
meta 增加charset屬性
menu 增加type label屬性，label定義一個標註，type定義可以menu以上下選單、工具條、與列表三種形式出現
style增加scoped屬性，允許為文件定義部分樣式，只應用到style標籤的父標籤及其字標籤
script增加async是否非同步，指令碼相當於頁面其他部分非同步執行 defer指令碼在頁面完成解析時執行
html 增加manifest，開發離線快取web應用程式時與API結合使用，定義一個URL,在這個URL上描述文件的快取資訊
iframe 增加sandbox seamiess srcdoc提高頁面安全性，防止不信任的web頁面執行某些操作
seamless 框架沒有邊框 沒有邊距；
srcdoc>src srcdoc標籤出現，顯示srcdoc標籤內容忽略src裡面的內容。
- <iframe srcdoc="<h1>hi</h1>" doc="http://www.baidu.com"></ifame> 內容顯示< h1>hi</h1> 而不是百度首頁
sandbox 內嵌框架安全級別，表示受到嚴格安全限制。禁止提交表單、執行javascript、表示該檔案與所在頁面不同源
- <iframe sandbox src="http://www.baidu.com"></iframe> 不能夠提交內容正常搜尋
-sandbox=allow-forms允許提交表單allow-same-origin允許相同的源 allow-script允許執行指令碼 allos-top-navigation允許跳轉
4.全域性屬性
新增自己的屬性<input data-aaa="bbb"/> aaa為你自定義的全域性屬性
隱藏 hidden
語法糾錯 spellcheck="true”
tab鍵切換順序 tabindex=“”3“”
內容可編輯 contenteditable="true"
頁面所有元素可編輯window.document.designnode="on/off"
二、H5喚起APP
1.<a href="weixin://"> //開啟微信
QQ： mqq://
騰訊微博： TencentWeibo://
淘寶： taobao://
支付寶： alipay://
微博： sinaweibo://
2.navigator.userAgent判斷安卓/iOS/微信內建瀏覽器
var u= navigator.userAgent；
app = navigator.appVersion;
var isInWeChat = /(micromessenger|webbrowser)/.test(u.toLocaleLowerCase());
trident: u.indexOf('Trident') > -1, //IE
presto: u.indexOf('Presto') > -1, //opera
webKit: u.indexOf('AppleWebKit') > -1, //webkit
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //firefox
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //mobile
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android or uc
iPhone: u.indexOf('iPhone') > -1 , //iPhone QQHD
iPad: u.indexOf('iPad') > -1, //iPad
webApp: u.indexOf('Safari') == -1