HTML5—— 你肯定會用到的新知識
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=””/> 沒有變化只是提供一個框
正則表達式
<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—— 你肯定會用到的新知識