HTML5之一——新标簽

語義化标簽

頁眉

<header>我是頁眉</header>
           

hgroup标簽用于頁面上的标題組合

<hgroup> 
   <h1>前端世界</h1>
   <h2>一個令人着迷的領域</h2>
  </hgroup>
           

導航欄

<nav>導航欄</nav>
           

頁面上獨立完整的一個主體

<article>
   <section>内容區域（用來劃分區域）</section>
    <aside>側邊欄（和主體相關的附屬資訊）</aside>
   </article>
           

圖檔說明

<figure>
  <figcaption>黃浦江上的的盧浦大橋（圖檔說明）</figcaption>
 <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
 </figure>
           

time

<p> 我們在每天早上<time>9:00</time>開始營業。 </p>
  <p> 我在<time datetime="2008-02-14">情人節</time>有個約會。</p>
           

頁腳

<footer>我是頁腳</footer> 
           

功能性标簽

datalist: 選項清單與input配合使用；輸入時有下拉清單，比對輸入。 （IE10以下不支援 相容選用select）

<input type="text" list="ValList">
<datalist id="ValList">
<option>HTML</option>
<option>CSS</option>
<option>javascript</option>
</datalist>
           

details 描述細節，與summary配合使用

<details>
<summary>點我顯示内容</summary>
<p>我是内容</p>
</details> 
           

progress: 定義進度條

<progress max="100" value="76"></progress> 
           

adress: 标簽定義文檔或文章的作者/擁有者的聯系資訊。

如果address元素位于body元素内，則它表示文檔聯系資訊。

如果address元素位于article元素内，則它表示文章的聯系資訊。

address元素中的文本通常呈現為斜體。大多數浏覽器會在 address 元素前後添加折行

<address>58同城版權所有@copyright</address>
           

mark: 黃色高亮内容

<mark>高亮内容</mark>
           

新型表單類型

mail: 與普通輸入框無差別，輸入非郵箱格式會有提示

<form>
<input type="email" />
<input type="submit" />
</form>
           

tel: 與普通輸入框無差別，移動端會直接切換到數字鍵盤

<form>
 <input type="tel" />
<input type="submit" />
</form>
           

url: 與普通輸入框無差別，輸入非網址會提示

<form>
<input type="url" />
<input type="submit" />
</form>
           

search: chrome下輸入内容後會出現”x”

<form>
  <input type="search" />
  <input type="submit" />
</form>
           

range: 特定範圍内的數值選擇器 屬性有min; max; step

<form>
  <input type="range"  step="2" min="0" max="100"/>
</form>
           

number: 隻能包含數字，chrome下輸入框會出現上三角與下三角按鈕 ie不支援

<form>
  <input type="number" />
  <input type="submit" />
</form>
           

color: chrome下輸顔色拾取框 ie不支援

<form>
  <input type="color" />
  <input type="submit" />
</form>
           

datetime: 僅chrome支援

<form>
  <input type="datetime-local"/>
  <input type="submit" />
</form>
           

time: 不含時區/僅chrome支援,還包括：date(顯示日期);month(顯示月份);week(顯示第幾周);

<form>
  <input type="time"/>
  <input type="submit" />
</form>
           

表單新屬性

提示屬性placeholder

<form> <!-- chrome/firefox/IE10以上支援-->
  <input type="text" placeholder="請輸入4-16個字元"/>
  <input type="submit" />
</form>
           

自動填充屬性autocomplete

<form> <!-- chrome/firefox/IE10以上支援 ,記錄使用者輸入記錄，輸入相近時提示-->
  <input type="text" name="user" autocomplete="on"/>
  <input type="submit" />
</form>
           

送出到其他位址formaction:

<form action="http://www.baidu.com">
  <input type="text" placeholder="請輸入4-16個字元" name="user" autocomplete="on" />
  <input type="submit" value="送出" />
  <input type="submit" value="儲存至草稿箱" formaction="http://www.qq.com" />
</form>
           

其他屬性:pattern(正則驗證)/required(必填字段)

[放在前端很不安全]

<form >
  <input type="text" placeholder="請輸入4-16個字元" name="user" autocomplete="on" />
  <input type="password" autocomplete="off" pattern="\d{1,5}"  required="required"/>
  <input type="submit" value="送出" />
</form>