H5基礎知識（一）

1、概述

   HTML5  是html4.0 升級版

       結構 Html5 、樣式 css3 、行爲: API  都有所加強

       HTML5並不單單只是作爲HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，成爲第一個將Web作爲應用開發平臺的HTML語言。

 

      HTML5定義了一系列新元素，如新語義標籤、智能表單、多媒體標籤等，能夠幫助開發者建立富互聯網應用，還提供了一些Javascript API，如地理定位、重力感應、硬件訪問等，能夠在瀏覽器內實現類原生應用，甚至結合Canvas咱們可開發網頁版遊戲。

 

廣義概念：HTML5表明瀏覽器端技術的一個發展階段。在這個階段，瀏覽器呈現技術獲得了一個飛躍發展和普遍支持，它包括：HTML5，CSS3，Javascript，API在內的一套技術組合。

   傳統的作法咱們或許經過增長類名如class="header"、class="footer"，使HTML頁面具備語義性，可是不具備通用性。

 

     HTML5則是經過新增語義標籤的形式來解決這個問題，例如<header></header>、<footer></footer>等，這樣就能夠使其具備通用性。

H5 經典網頁佈局:

<!-- 頭部 -->
     <header>
       <ul class="nav"></ul>
   </header>
<!-- 主體部分 -->
<div class="main">
   <!-- 文章 -->
   <article></article>
   <!-- 側邊欄 -->
   <aside></aside>
</div>
<!-- 底部 -->
<footer></footer>

 經常使用新語義標籤

<nav> 表示導航

<header> 表示頁眉

<footer> 表示頁腳

<section> 表示區塊

<article> 表示文章 如文章、評論、帖子、博客

<aside> 表示側邊欄 如文章的側欄

<figure> 表示媒介內容分組 與 ul > li 作個比較

<mark> 表示標記 (帶用「UI」，不怎麼用)

<progress> 表示進度 (帶用「UI」，不怎麼用)

<time> 表示日期

本質上新語義標籤與<div>、<span>沒有區別，只是其具備表意性，使用時除了在HTML結構上須要注意外，其它和普通標籤的使用無任何差異，能夠理解成<div class="nav"> 至關於 <nav>。不要好奇，它只是一個標籤！

儘可能避免全局使用header、footer、aside等語義標籤。

 

兼容處理

 

(咱們在測試ie 的兼容的時候，有一個叫作ietest 的軟件，這個軟件能夠模擬ie6-ie11)

 

     在不支持HTML5新標籤的瀏覽器裏，會將這些新的標籤解析成行內元素(inline)對待，因此咱們只須要將其轉換成塊元素(block)便可使用，可是在IE9版本如下，並不能正常解析這些新標籤，可是卻能夠識別經過document.createElement('tagName')建立的自定義標籤，因而咱們的解決方案就是將HTML5的新標籤所有經過document.createElement('tagName')來建立一遍，這樣IE低版本也能正常解析HTML5新標籤了，在實際開發中咱們更多采用的是經過檢測IE瀏覽器的版原本加載三方的一個JS庫來解決兼容問題。

 

 

 輸入類型  (表單類型，表單元素，表單屬性,表單事件.)

email 輸入email格式

tel 手機號碼  

url 只能輸入url格式

number 只能輸入數字

search 搜索框

range 範圍 滑動條

color 拾色器

time 時間

date 日期 不是絕對的

--datetime 時間日期

month 月份

week 星期

部分類型是針對移動設備生效的，且具備必定的兼容性，在實際應用當中可選擇性的使用。

表單元素（標籤）

  <datalist> 數據列表

  與input 配合使用

  <input type=」text」 list=」data」>

 <datalist id=」data」>

 <option>男</option>

 <option>女</option>

 <option>不詳</option>

</datalist>

<keygen>  生成加密字符串

  keygen 元素  

      keygen 元素的做用是提供一種驗證用戶的可靠方法。
      keygen 元素是密鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵，    一個是私鑰，一個公鑰。

    私鑰（private key）存儲於客戶端，公鑰（public key）則被髮送到服務器。公鑰可用於以後驗證用戶的客戶端證書（client certificate）。

<output>   不可當作數據提交？

<meter>   表示度量器，不建議用做進度條

<progress></progress>    進度條

   <meter  value="81"    min="0" max="100"  low="60"  high="80" />

 

Max-width   

Min-width

 

 表單屬性

placeholder 佔位符

autofocus 獲取焦點

multiple 文件上傳多選或多個郵箱地址  

autocomplete 自動完成，用於表單元素，也可用於表單自身(on/off)

form 指定表單項屬於哪一個form，處理複雜表單時會須要

novalidate 關閉驗證，可用於<form>標籤

required 必填項

pattern 正則表達式 驗證表單

 手機號:<input type="tel" name="tel" required="required"       pattern="^(\+86)?1[3,5,8](\d{9})$">

    表單重寫沒有說起，自行驗證，共包含

應用於提交按鈕上，如：<input type="submit" formaction="xxx.php">

 表單事件

oninput 用戶輸入內容時觸發，可用於移動端輸入字數統計

oninvalid 驗證不經過時觸發

 

 多媒體

 　　H5裏面提供了視頻和音頻標籤

一、音頻      <audio>  <audio>

autoplay: 自動播放
controls:控制條
loop：循環

<!--<audio src="music/yinyue.mp3" autoplay controls> </audio>-->

<!--推薦的兼容寫法：-->
<audio controls loop>
<source src="music/yinyue.mp3"/>
<source src="music/yinyue.ogg"/>
<source src="music/yinyue.wav"/>
抱歉，你的瀏覽器不支持音頻標籤！
</audio>

2.視頻

<!--<video src="video/movie.mp4" controls autoplay ></video>-->
<!-- 行內塊 display:inline-block -->

<!--推薦的兼容寫法：--> <video controls autoplay> <source src="video/movie.mp4"/> <source src="video/movie.ogg"/> <source src="video/movie.webm"/> 抱歉，瀏覽器要換了！ </video>