首頁 > web前端 > H5教程 > 主體

HTML5標籤有哪些屬性? HTML5標籤的具體用法(附實例)

寻∝梦
發布: 2018-08-16 14:09:26
原創
7090 人瀏覽過

HTML5標籤有哪些屬性? HTML5標籤的具體用法了解。這篇文章主要講解了HTML5標籤的具體用法和作用,還有HTML5標籤的一部分屬性介紹

HTML5標籤的定義和用法:

標籤定義選項清單。請與 input 元素搭配使用該元素,來定義 input 可能的值。

datalist 及其選項不會被顯示出來,它只是合法的輸入值清單。

請使用 input 元素的 list 屬性來綁定 datalist。

HTML5標籤屬性與說明:

#AlternatingItemStyle取得 DataList 控制項中交替項目的樣式屬性。

AlternatingItemTemplate取得或設定 DataList 中交替項目的範本Attributes取得web控制項的所有屬性值.

BackColor取得或設定 Web 伺服器控制項的背景色。

BorderColor取得或設定 Web 控制項的邊框顏色。

BorderStyle取得或設定 Web 伺服器控制項的邊框樣式。

BorderWidth取得或設定 Web 伺服器控制項的邊框寬度。

CellPadding取得或設定儲存格的內容和儲存格的邊框之間的空間量。

CellSpacing取得或設定單元格間的空間量。

Controls清單控制項中的子控制項的集合.

DataKeyField取得或設定由 DataSource 屬性指定的資料來源中的鍵欄位。

DataKeys儲存資料清單控制項中每個記錄的鍵值(顯示為一行)。

DataMember取得或設定多成員資料來源中要綁定到資料清單控制項的特定資料成員。

DataSource取得或設定來源,該來源包含用於填入控制項中的項目的值清單。

EditItemIndex取得或設定 DataList 控制項中要編輯的選定項目的索引號碼。

EditItemStyle取得 DataList 控制項中為進行編輯而選取的項目的樣式屬性。

EditItemTemplate取得或設定 DataList 控制項中為進行編輯而選定的項目的範本。

Enable取得或設定一個值,該值指示是否啟用 Web 伺服器控制項。

HeaderTemplate取得或設定 DataList 控制項的標題部分的範本。

Height取得或設定

HTML 標籤實例:

下面是一個input 元素,datalist 中描述了其可能的值:

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>
登入後複製

我發現HTML5標籤的兩點具體用處,分享給大家:

最近做東西需要郵箱補全,接觸到datalist,覺得蠻好用的。 datalist是需要與input標籤搭配使用,可以用在輸入推薦,郵箱補全等場合。下面將簡單記錄相關用法。

1.HTML5標籤用在輸入推薦上:

<p>请输入您最喜欢的科目:</p>
<input type="text" list="mylist1">
<datalist id="mylist1">
<option value="电路原理">
<option value="数字电路">
<option value="模拟电路">
<option value="计算机原理">
</datalist>
</br>
登入後複製

datalist的id需要與input的list屬性一致,當準備輸出時input下方會自動出現option的選項,datalist具有模糊查詢的作用,例如在文字方塊中輸入“路”,則建議的內容為電路原理,數位電路以及類比電路。

2.HTML5標籤用在郵件匣補全上:

html程式碼:

<p>请输入您的邮箱:</p>
<input id="emailInput" oninput="suggestEmail()" type="text" list="mylist2">
<datalist id="mylist2"></datalist>
登入後複製

js程式碼:

function suggestEmail(){
var email = $("#emailInput").val();
$("#mylist2").empty();
if(email.indexOf("@")>-1){
return false;
}else{
$("#mylist2").append("<option value=&#39;"+ email +"@qq.com&#39;>"+
"<option value=&#39;"+ email +"@126.com&#39;>"+
"<option value=&#39;"+ email +"@foxmail.com&#39;>"+
"<option value=&#39;"+ email +"@163.com&#39;>"+
"<option value=&#39;"+ email +"@gmail.com&#39;>")
}
}
登入後複製

input標籤的oninput屬性可以偵測到input內容的變化,當輸入框內容變化,出發js在datalist中追加option。如果使用者手動輸入了@,就不需要提示了。

HTML 4.01 與 HTML 5 之間的差異:

標籤是 HTML 5 中的新標籤。

瀏覽器支援:

所有主流瀏覽器都支援 標籤,除了 Internet Explorer 和 Safari。

【相關推薦】

HTML5新增的結構元素有哪些? HTML5新增的結構元素的用法(建議)

HTML5中的article標籤是什麼? HTML5的article元素用在什麼地方?

#

以上是HTML5標籤有哪些屬性? HTML5標籤的具體用法(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!