1. 程式人生 > 實用技巧 >HTML5新標籤

HTML5新標籤

HTML5

特點

新標籤

<header>...<header> 頭部標籤

<footer>...<footer> 尾部標籤

<section>...<section> 內容區塊

<article>...,article> 表示頁面中的獨立內容

<aside>...<aside> 標籤定義其所處內容之外的內容

<nav>...<nav> 導航

  • <nav>裡面可以直接寫<li></li>
    
  • <nav>
    	<li></li>
    </nav>
    
    

<figure>...<figure>表示一段獨立的流內容,一般表示文件主體流內容中的一個獨立單元。規定獨立的流內容(影象、
圖表、照片、程式碼等等)。使用figcaption元素為figure元素新增標題。
◆ figure 是一種元素的組合,帶有可選 標題。用來表示網頁上一塊獨立的內容。figure 元素的內容
應該與主內容相關,但如果被刪除,則不應對文件流產生影響

<embed>...<embed> embed標籤用於定義巢狀的內容,包括各種媒體

<mark>...<mark>高亮顯示

  • 可以改變其高亮顏色

<video>...<video>

<video src="song.mp3" controls="controls" autoplay=autoplay>
</video>

  • src是視訊路徑
  • autoplay 設定自動播放
  • controls (controls="controls")向用戶展示控制元件 ,例如播放按鈕
  • loop迴圈播放
  • preload 視訊在頁面載入時進行載入,並預備播放

<audio>...<audio> 音訊標籤

<audio src="song.mp4" controls="controls" autoplay=:autoplay>
</audio>

  • src是視訊路徑
  • autoplay 設定自動播放
  • controls (controls="controls")向用戶展示控制元件 ,例如播放按鈕

<datalist>...<datalist> 智慧列表 供其選擇

<p>
    /* list裡的id要和datalist裡的id一致 */
    <input type="text" nmae="a1" list="text">   
</p>

<datalist id="text">
    <option>大班</option>
    <option>班級</option>
    <option>班班</option>
</datalist>

<canvas>...<canvas>canvas可以完成動畫、遊戲、圖表、影象處理等原來需要Flash完成的一些功能

<hgroup>...<hgroup> 標籤被用來對標題元素進行分組。
當標題有多個層級(副標題)時,<hgroup> 元素被用來對一系列 <h1> - <h6> 元素進行分組。

表單元素

type=email 控制input輸入框中的型別 具有multiple屬性,它
允許在該文字框中輸入一串以逗號分隔的email地址

  • required="required"表示欄位的驗證內容不能為空

type=url 控制input輸入框內的型別為網址

type=number 控制input輸入框的型別為數字

  • value設定預設值
  • min設定最小值
  • max設定最大值
  • step設定遞增的值

type="range"滑塊

  • value設定預設值
  • min設定最小值,自己也算第一步
  • max設定最大值,自己也算第一步
  • step設定遞增的值,自己也算第一步

date pickers type=" "

  • datetime-local 本地時間

placeholder 文字框處於未輸入狀態時文字框中顯示的輸入提示

autofocus="autofocus" 自動聚焦功能
焦點,一個頁面只能有一個聚焦

autocomplete 輸入自動填充完成

maxlength最大長度

novalidate取消驗證