Html5推出了一段時間,現在大部分浏覽器還不支持,不過IE9和google Chrome支持部分特性。
那麼Html5到底有哪些新特性呢? 我就用幾個簡單明了的字說明下:
1、新表單
2、新媒介
3、新繪畫
4、新元素
5、離線存
下面我們就來一個一個的來解釋這些新特性。
新表單
a、Email
<input type="email" name="myemail"/> 提交表單時會自動驗證輸入的格式是否是正確的email格式
b、Url
<input type="url" name="myurl"/> 提交表單時會自動驗證輸入的格式是否是正確的Url格式
c、number
<input type="number" name="mynumber"/> 提交表單時會自動驗證輸入的格式是否是正確的數字格式
你還可以增加其他屬性
<input type="number" name="mynumber" step="2" min="2" value="4" max="10"/>
其中Value就是我們以前用的默認值;min最小數字,max最大數字;step就是每個輸入的數字之間的差值,比如我們輸入的是2,下一次輸入的就是4。(這裡我們定義了最小值是2,如果定義了最小值是0 。那麼我們可以輸入0,2,4,6,8,10)
d、range
<input type="range" name="myrange" step="2" min="2" value="4" max="10"/> 通過圖形界面的形式來展示輸入域,不像表單的文本那樣輸入數字,而是滾動條的展示。如下圖:
e、date pickers
<input type="date" name="mypickers"/> 我們稱為的日期數據輸入框,也就是我們以前使用的日期控件,現在通過這種方式可以直接展示了。
<input type="date" name="mypickers"/> 選擇日、月、年
<input type="month " name="mypickers"/> 選擇月、年
<input type="week" name="mypickers"/> 選擇月、年
<input type="time " name="mypickers"/> 選擇時間 小時和分鐘
<input type="datetime" name="mypickers"/> 選擇時間 日、月、年(Utc標准)
<input type="datetime-local" name="mypickers"/>選擇時間 日、月、年(本地)
<input type="search" results="10" />