1. 程式人生 > >h5新增屬性和方法

h5新增屬性和方法

1.header
header 標籤定義文件或者文件的一部分割槽域的頁首。一般作為介紹內容或者導航連結欄的容器。
在一個文件中,可以定義多個 <header> 元素。
注:<header> 標籤不能被放在 <footer>、<address> 或者另一個 <header> 元素內部。

2.nav
nav定義頁面中導航連結部分(傳統導航條、騰訊新聞、側邊欄導航、內頁導航、百度百科、翻頁操作)注:並不一定是視覺上的導航,只要是多連結區域,都可以使用

3.article
<article> 標籤定義獨立的內容。內容本身必須是有意義的且必須是獨立於文件的其餘部分。如:論壇帖子、部落格文章、新聞故事、評論

4.aside
<aside> 標籤定義 <article> 標籤外的內容。應該與附近的內容相關。

5.section
<section> 標籤定義了文件的某個區域。比如章節、頭部、底部或者文件的其他區域。標示文件的結構

6.footer
<footer> 標籤定義文件或者文件的一部分割槽域的頁尾。如:文件創作者的姓名、文件的版權資訊、使用條款的連結、聯絡資訊等等。在一個文件中,您可以定義多個 <footer> 元素。

7.figure
定義一段獨立的流內容,一般是文件主體流內容中的一個獨立單元。使用figcaption元素為figure元素新增標題。
figure是一種元素的組合,帶有可選標題。用來表示網頁上一塊獨立內容。
figcaption表示figure的標題。從屬於figure,並且,figure中只能放置一個figcaption
注:有預設的邊距或填充值

8.hgroup
表示定義檔案中一個區塊的相關資訊,一般用作放置標題標籤的容器。

9.dialog
<dialog> 標籤定義一個對話方塊、確認框或視窗
注:目前,只有 Chrome 和 Safari 6 支援 <dialog> 標籤。

新增多媒體元素
(1)video元素
 --在HTML5中專門用來播放網路上的視訊或者電影。
(2)audio元素
 --在HTML5中專門用來播放網路上的音訊。
3)canvas

表示圖形,比如圖示和其他影象。這個元素本身沒有行為,僅提供一塊畫布,但它把一個繪圖API展現給客戶端js,以使指令碼能夠把想繪製的東西繪製到這塊畫布上

<canvas id=“myCanvas” width=“200” height=“200”> </canvas>

新增的表單元素
1.Datalist
datalist提供一個事先定義好的列表,通過id與input關聯,當在input內輸入時就會有自動完成的功能,使用者將會看見一個下拉列表供其選擇。
2.output
表示不同型別的輸出,比如指令碼的輸出
注:表單中有應用

新增的input型別
1.email:專門用來輸入email地址的文字框,如果該文字框中內容不是email地址格式的,則不允許提交。但它不檢查email地址是否存在。提交時可以為空,除非加上了required屬性。
具有multiple屬性,它允許在該文字框中輸入一串以逗號分隔的email地址。
2.url:專門用來輸入URL地址的文字框。如果該文字框中內容不是URL地址格式的,則不允許提交。
例:<input name=‘url1’ type=‘url’ value=‘’http://www.baidu.com”>;

  1. number 和 range
    number 型別是專門用來輸入數字的,並且在提交時會檢驗是否為數字。number 型別有 max、min 和 step 屬性。max 是允許的最大值,min 是允許的最小值,step 是間隔。設定了這些屬性後,如果手動填入的數字不符合這些屬性條件,將不能提交。 range 型別是一個數字滑動條。它與 number 型別功能類似,也有 max、min 和 step 屬性,在 Opera 中,可以用左右方向鍵控制。range 型別自身沒有一個明顯的“數值”表示當前值,但可以使用 output 輸出當前值。
  2. datetime 和 datetime-local
    datetime 型別是用來輸入 UTC 日期和時間的文字框,而 datetime-local 型別是用來輸入本地日期和時間的。它們與 date 型別的區別是後面多了一個時間框和“UTC”。
  3. month 和 week month 型別是月份選擇器,它的值為:年-月,如:2012-01;week 型別是周選擇器,它的值為:年-W週數,如:2011-W02。
  4. search
    search 型別的是用來輸入搜尋關鍵詞的文字框,它與 text 型別在功能都沒有太大區別,只在外觀上有細微的區別。在 Chrome 10 和 Safari 5 中,當用戶輸入內容時,輸入框右側會有一個“×”按鈕,單擊該按鈕,將清空輸入框內的內容,使用非常方便。
    7.color
    color 型別用來選取顏色,它提供了一個顏色選取器,值為 16 進位制符號,如:#ff0000。目前只在 Opera 和 Blackberry 瀏覽器中支援。
    8.output元素: 定義不同型別的輸出,如計算結果的輸出,或指令碼的輸出。
    注:必須從屬於某個表單。即,必須將它書寫在表單內部,或對它新增form屬性。

HTML 5 不但新增加了表單元素、表單型別,還增加了一些表單屬性,同時使用的話,能更好的提高率開發者的工作效率,同時也提高了使用者的操作體驗。

1、自動驗證

1)、required
可以應用在大多數輸入元素上,在提交時如果元素內容為空白,則不允許提交,同時顯示提示文字。

2)、
將屬性值pattern設為某個格式的正則表示式,在提交時會檢查其內容是否符合給定格式。

例:<input  type=“text” pattern = “[0-9][A-Z]{3}”placeholder=‘輸入內容:一個數與三個大寫字母’>

3)placeholder屬性:文字框處於未輸入狀態時文字框中顯示的輸入提示。

4)autofocus屬性:給文字框、選擇框、或者按鈕控制元件加上該屬性,當開啟頁面時,該控制元件自動獲得滑鼠焦點,一個頁面只能有一個。

5)autocomplete 屬性規定輸入欄位是否應該啟用自動完成功能。屬性值=on/off
自動完成允許瀏覽器預測對欄位的輸入。當用戶在欄位開始鍵入時,瀏覽器基於之前鍵入過的值,應該顯示出在欄位中填寫的選項。使用時表單元素必須有name屬性;(歷史記錄功能)
註釋:autocomplete 屬性適用於 <form>,以及下面的 <input> 型別:text, search, url, telephone, email, password, datepickers, range 以及 color。
提示:在某些瀏覽器中,您可能需要手動啟用自動完成功能。
6)、 min、max、step:為包含數字或日期的 input 型別規定限定(約束)
max: 最大值
min: 最小值
step: 數字間隔

例:<input type="number“ min="0" max="10" step="3" />
7)取消驗證
可以對form表單新增novalidate屬性,即使form表單中的input添加了required,也將不進行驗證
8)Multiple:可以輸入一個或多個值,每個值之間用逗號分開;如果要獲取其中的值在用split獲取;
例:<input type=“email” multiple/>
還可以應用於file