標籤：

html常用標籤（二）

02-06

input / button

區別：是否為「空標籤」

<input> 元素用於為基於Web的表單創建互動式控制項，以便接受來自用戶的數據。這是一個空元素，必須有開始標籤但不必有結束標籤。

type要呈現的控制項類型。

在form中<input>的工作方式因其類型屬性的值而有很大差異，不同的類型會在各自的參考頁中進行介紹。如果未指定此屬性，則採用的默認類型為

可用的值包括：

  • button：無預設行為按鈕。

<input type="button" value="提交按鈕">
<!--點擊按鈕並無反應-->

  • checkbox： 複選框。必須使用 value 屬性定義此控制項被提交時的值。使用 checked 屬性指示控制項是否被選擇。也可以使用 indeterminate 指示複選框在一種不確定狀態（大多數平台上，顯示為一條穿過複選框的水平線）。

<label for="textInput">紅色</label>
<input id="textInput" type="checkbox" name="red">
<!--label也可把input嵌入其中，省略for，id屬性，同時點擊文字即可表示選中-->

  • color：HTML5 用於指定顏色的控制項。
  • date：HTML5 用於輸入日期的控制項（年，月，日，不包括時間）。
  • datetime：HTML5 基於 UTC 時區的日期時間輸入控制項（時，分，秒及幾分之一秒）。
  • datetime-local：HTML5 用於輸入日期時間控制項，不包含時區。
  • email：HTML5 用於編輯 e-mail 的欄位。 合適的時候可以使用 :valid 和 :invalid CSS 偽類。
  • file：此控制項可以讓用戶選擇文件。使用 accept 屬性可以定義控制項可以選擇的文件類型。
  • hidden：不顯示在頁面上的控制項，但它的值會被提交到伺服器。
  • image：圖片提交按鈕。必須使用 src 屬性定義圖片的來源及使用 alt 定義替代文本。還可以使用 height 和 width 屬性以像素為單位定義圖片的大小。
  • month：HTML5 用於輸入年月的控制項，不帶時區。
  • number: HTML5 用於輸入浮點數的控制項。
  • password：一個值被遮蓋的單行文本欄位。使用 maxlength 指定可以輸入的值的最大長度 。
  • radio：單選按鈕。必須使用 value 屬性定義此控制項被提交時的值。使用checked 必須指示控制項是否預設被選擇。在同一個」單選按鈕組「中，所有單選按鈕的 name 屬性使用同一個值； 一個單選按鈕組中是，同一時間只有一個單選按鈕可以被選擇。
  • range：HTML5 用於輸入不精確值控制項。如果未指定相應的屬性，控制項使用如下預設值：
    • min：0
    • max：100
    • value：min + (max-min)/2，或當 max 小於 min 時使用 min
    • step：1
  • reset：用於將表單所內容設置為預設值的按鈕。
  • search：HTML5用於輸入搜索字元串的單行文本欄位。換行會被從輸入的值中自動移除。
  • submit：用於提交表單的按鈕。
  • tel：HTML5 用於輸入電話號碼的控制項；換行會被自動從輸入的值中移除A，但不會執行其他語法。可以使用屬性，比如 pattern 和 maxlength 來約束控制項輸入的值。恰當的時候，可以應用 :valid 和 :invalid CSS 偽類。
  • text：單行欄位；換行會將自動從輸入的值中移除。
  • time：HTML5 用於輸入不含時區的時間控制項。
  • url：HTML5 用於編輯URL的欄位。 The user may enter a blank or invalid address. 換行會被自動從輸入值中移隊。可以使用如：pattern 和 maxlength 樣的屬性來約束輸入的值。 恰當的時候使可以應用 :valid 和 :invalid CSS 偽類。
  • week：HTML5 用於輸入一個由星期-年組成的日期，日期不包括時區。

accept如果該元素的type屬性的值是file,則該屬性表明了伺服器端可接受的文件類型；否則它將被忽略。該屬性的值必須為一個逗號分割的列表,包含了多個唯一的內容類型聲明：

  • 以 STOP 字元 (U+002E) 開始的文件擴展名。（例如：".jpg,.png,.doc"）
  • 一個有效的 MIME 類型，但沒有擴展名
  • audio/* 表示音頻文件 HTML5
  • video/* 表示視頻文件 HTML5
  • image/* 表示圖片文件 HTML5

autocomplete這個屬性表示這個控制項的值是否可被瀏覽器自動填充。如果type屬性的值是hidden、checkbox、radio、file，或為按鈕類型（button、submit、reset、image），則本屬性被忽略。可用的值是:

  • off: 用戶必須手動填值，或者該頁面提供了自己的自動補全方法。瀏覽器不對此欄位自動填充。
  • on: 瀏覽器可以根據用戶先前的填表情況對此欄位自動填值。
  • name: 完整的姓名
  • honorific-prefix: Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle")
  • given-name ：名
  • additional-name
  • family-name：姓
  • honorific-suffix: Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II")
  • nickname
  • email
  • username
  • new-password: 新密碼（如創建帳號或更改密碼時使用）

checked如果該元素的type屬性的值為radio或者checkbox,則該布爾屬性的存在與否表明了該控制項是否是默認選擇狀態.

disabled這個布爾屬性表示此表單控制項不可用。 特別是在禁用的控制項中，click事件將不會被分發。 並且，禁用的控制項的值在提交表單時也不會被提交。如果type屬性為 hidden，此屬性將被忽略。

name控制項的名稱，與表單數據一起提交。

src如果type屬性的值是image, 這個屬性指定了按鈕圖片的路徑; 否則它被忽視.

value控制項的初始值. 此屬性是可選的，除非type 屬性是radio或checkbox。

<button> 元素表示一個可點擊的按鈕，可以用在表單或文檔其它需要使用簡單標準按鈕的地方。 默認情況下，HTML按鈕的顯示樣式接近於 user agent 所在的宿主系統平台（用戶操作系統）的按鈕， 但你可以使用 CSS 來改變按鈕的樣貌。開始標籤和結束標籤都不能省略。 允許的父元素任意可容納 phrasing content 的元素。

autofocusHTML5一個布爾屬性，用於指定當頁面載入時按鈕必須有輸入焦點，除非用戶重寫，例如通過不同控制項鍵入。只有一個表單關聯元素可以指定該屬性。

disabled此布爾屬性表示用戶不能與button交互。如果屬性值未指定，button繼承包含元素，例如<fieldset>；如果沒有設置disabled屬性的包含元素，button將可交互。

formHTML5表示button元素關聯的form元素（它的表單擁有者）。此屬性值必須為同一文檔中的一個<form>元素的id屬性。如果此屬性未指定，<button>元素必須是form元素的後代。利用此屬性，你可以將<button>元素放置在文檔內的任何位置，而不僅僅是作為他們form元素的後代。formactionHTML5表示程序處理button提交信息的URI。如果指定了，將重寫button表單擁有者的action屬性。formenctypeHTML5如果button是submit類型，此屬性值指定提交表單到伺服器的內容類型。可選值：

  • application/x-www-form-urlencoded: 未指定時的默認值。
  • multipart/form-data: 如果使用type屬性的<input>元素設置文件，使用此值。
  • text/plain

如果指定此屬性，它將重寫button的表單擁有者的enctype屬性。

formmethodHTML5如果button是submit類型，此屬性指定瀏覽器提交表單使用的HTTP方法。可選值:

  • post: 來自表單的數據被包含在表單內容中，被發送到伺服器。
  • get: 來自表單的數據以?作為分隔符被附加到form的URI屬性中，得到的URI被發送到伺服器。當表單沒有副作用，且僅包含ASCII字元時使用這種方法。

如果指定了，此屬性會重寫button擁有者的method屬性。

formnovalidateHTML5如果button是submit類型，此布爾屬性指定當表單被提交時不需要驗證。如果指定了，它會重寫button擁有者的novalidate屬性。formtargetHTML5如果button是submit類型，此屬性指定一個名稱或關鍵字，表示接收提交的表單後在哪裡顯示響應。這是一個瀏覽上下文（例如tab，window或內聯框架）的名稱或關鍵字。如果指定了，它會重寫button擁有者的target屬性。關鍵字如下：

  • _self: 在同一個瀏覽上下文中載入響應作為當前的。未指定時此值為默認值。
  • _blank: 在一個新的不知名瀏覽上下文中載入響應。
  • _parent: 在當前瀏覽上下文父級中載入響應。如果沒有父級的，此選項將按_self執行。
  • _top: 在頂級瀏覽上下文（即當前瀏覽上下文的祖先，且沒有父級）中架載入響應。如果沒有頂級的，此選項將按_self執行。

namebutton的名稱，與表單數據一起提交。

typebutton的類型。如果沒有選定值，則默認升級為submit，可選值：

  • submit: 此按鈕將表單數據提交給伺服器。如果未指定屬性，或者屬性動態更改為空值或無效值，則此值為默認值。
  • reset: 此按鈕重置所有組件為初始值。
  • button: 此按鈕沒有默認行為。它可以有與元素事件相關的客戶端腳本，當事件出現時可觸發。
  • menu: 此按鈕打開一個由指定<menu>元素進行定義的彈出菜單。

valuebutton的初始值。它定義的值與表單數據的提交按鈕相關聯。當表單中的數據被提交時，這個值便以參數的形式被遞送至伺服器。

注意

<button> 元素比 <input> 元素更容易使用樣式。你可以在元素內添加HTML內容（像 <em>、<strong> 甚至 <img>），以及 ::after 和 ::before 偽元素來實現複雜的效果，而 <input> 只支持文本內容。

select

<select>元素是一種表單控制項，可創建選項菜單。菜單內的選項為<option> , 可以由 <optgroup> 元素分組。選項可以被用戶預先選擇。無論開始標記和結束標記都是強制的許可的父元素接受段落式內容的任意元素

autofocusHTML5這個屬性能夠讓一個對象在頁面載入的時候獲得焦點. 在一個頁面上下文中, 只有一個對象可以有這個屬性，並且是布爾值(true 或者 false).

disabled這個布爾值的屬性表明一個用戶是否可以操控該表單對象. 如果這個屬性沒有被明確定義, 則從它的父元素繼承, 例如 fieldset; 如果沒有父元素設置 disabled屬性, 那麼默認該表單對象 enabled.

formHTML5select所關聯的form表單 (它的"表單擁有者"). 如果這個屬性被明確定義, 那麼它的值一定是在同一個document中表單ID. 這樣能夠讓你把select標籤放在任何的位置, 不僅限於作為form表單的後代元素.

multiple這個布爾值的屬性標記select是否可以多選. 默認是單選.

name控制項名稱

requiredHTML5規定select的值不能為空(布爾值).

size如果控制項顯示為滾動列表框，則此屬性表示為控制項中同時可見的行數。瀏覽器不需要將選擇元素呈現為滾動列表框。默認值為0

<!-- value2中的selected表示默認選擇 value中的disabled表示不可選-->
<select name="select">
<option value="value1" disabled>Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>

table

table元素表示表格數據 — 即通過二維數據表表示的信息。標籤省略不允許，開始標籤和結束標籤都不能省略。

允許的內容

按照這個順序：

  • 一個可選的 <caption> 元素
  • 零個或多個的 <colgroup> 元素
  • 一個可選的 <thead> 元素
  • 一個可選的 <tfoot> 元素（tfoot元素出現在tbody或tr元素前後都可以。在HTML4中，它只能出現在這些元素之前）
  • 零個或多個 <tbody> 元素
  • 一個或多個 <tr> 元素

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>from標籤</title>
</head>
<body>
<table>
<thead>
<th>姓名</th>
<th>性別</th>
</thead>
<tbody>
<tr>
<td>Jane</td>
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>lucy</td>
<td>女</td>
</tr>
</tfoot>
<!--其中th表示標題，tr表示列，td表示行，thead、tbody、tfoot均可省略-->
</table>
</body>
</html>

其中的大部分屬性都已廢棄，可用css實現，具體屬性見：<table>

其他html標籤及其屬性均可在此網站查詢

推薦閱讀：

TAG:HTML |