HTML5—— 你肯定會用到的新知識

標籤：source   ogre   沒有   上下左右   度量   span   color   擷取   自動擷取   

HTML5 簡介

語義化標籤

新增結構標籤

表單

多媒體

HTML5 簡介

XML是更加嚴格的語言 是HTML和XHTML的結合 

語義化標籤

  新增的語義化標籤 header nav section aside footer

新增結構標籤

<details>關於文檔的細節

<details>

<summary>我的標題我做主</summary>

<p>搞笑</p>

</details>

 

Figure

獨立的文檔流內容，與主題無關 可以盛放標籤和圖片等 與托尼蓋的div不一樣的是他與其他部分上下左右均有距離

<figure>

  <figcaption>黃浦江上的的盧浦大橋</figcaption>

  <img src="shanghai_lupu_bridge.jpg" width="350" eight="234" />

</figure>

Time標籤 使時間變得有意義但是不熬變其形式

Section 定義文檔中的流

<section>

  <h1>PRC</h1>

  <p>The People‘s Republic of China was born in 1949...</p>

</section>

Progress

用來顯示進度

<progress value="22" max="100">

進度條

</progress>

如果認則顯示進度條 不認就顯示字型

Meter 度量衡

<p>

       Christmas is in

       <meter value ="30" min="1" max="366" title="days">

       30 days!

</p>

Title 是滑鼠上去顯示title的值

表單

表單屬性新增

Autofocus自動擷取焦點 適用於所有的input 就是一開啟就能看到框框裡有閃動的游標

User name: <input type="text" name="user_name"  autofocus="autofocus" />

Placeholder 提示期待值

Required 必須輸入東西在提交前不能不輸入

Name: <input type="text" name="usr_name" required="required" />

新增input類型

E-mail: 

E-mail: <input type="email" name="user_email" />

URL網址

Homepage: <input type="url" name="user_url" />

輸入的時候必須是http開頭的網址

Number數字域

必須是可以接受的範圍

<input type="number" name="points" min="1" max="10" />

具有最大值 max 最小值min 和步長 step

Range滑動條

<input type="range" name="points" min="1" max="10" />

同樣具有最大值最小值和步長

Date - pickers{日期選擇）

date - 選取日、月、年

month - 選取月、年

week - 選取周和年

time - 選取時間（小時和分鐘）

datetime - 選取時間、日、月、年（UTC 時間）

datetime-local - 選取時間、日、月、年（本地時間）

Date: <input type="date" name="user_date" />

Search 搜尋域

<input type=”search”>

當value值為16進位的時候預設顏色

<input type =”color” value=”ff0000”/>

預設為黑色 改變顏色的時候需要改變value的值

  Tel 電話框

<input type=”tel” value=””/> 沒有變化只是提供一個框

Regex

<input type=”tel” value=”” name=” tellphone” pattern=”\d{11}”/> 

多媒體

音頻

<audio src=”song.mp3” controls=controls>

音頻相容

<audio controls="controls">

  <source src="song.ogg" type="audio/ogg">

  <source src="song.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>

HTML5—— 你肯定會用到的新知識