小白學前端------------------HTM列表,表格,表單,音視訊標籤及屬性
阿新 • • 發佈：2018-12-17
頁面中的組成部分
一.列表,表格,表單,音視訊
1.列表標籤
-
有序列表
<ol><ul></ul></ol>屬性 start 規定有序列表的起始值。 type 規定在列表中使用的標記型別。(1 a A i I) reversed H5新新增 降序 -
無序列表
<ul><li></li></ul> -
定義列表
<dl> <dt></dt> <dd></dd> </dl><li></li>代表HTML列表專案，每個列表項使用一對<li></li>標記<dl></dl>定義了定義列表（definition list）<dt></dt>標籤定義了定義列表中的專案（即術語部分）<dd></dd>在定義列表中定義條目的定義部分。
2.表格標籤
<table></table><caption></caption>定義表格標題<thead></thead><tfoot></tfoot><tbody></tbody><tr></tr>行<th></th>表頭單元格<td></td>單元格
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr> 3.表單標籤
-
<form></from>定義一個 HTML 表單，用於使用者輸入。屬性 action method get post enctype multipart/form-data(有檔案表單時候，必須使用這個) application/x-www-form-urlencoded target -
<input>定義一個輸入控制元件
屬性
name 必須有，否則資料無法傳遞
type ==> text、password、radio、hidden、checkbox、submit、image、file、reset、button、submit、email、number、color等
-
<button></button>定義按鈕屬性 type ==> submit(提交)、reset(重置)、button(普通按鈕) name -
<select></select>定義選擇列表（下拉列表）屬性 disabled 禁用 name 必須有 multiple 多選,預設會顯示所有,名字要使用陣列like[] size 顯示幾個下拉 -
<option></option>定義選擇列表中的選項。屬性 value 提交的值，若沒有，則提交內容 selected 定義選中項 disabled 選項禁用 -
<optgroup></optgroup>把相關的選項組合在一起屬性 disabled 規定禁用該選項組。 label 為選項組規定描述。 -
<textarea></textarea>屬性 cols 可見寬度 rows 可見行數 readonly 文字區只讀 name 必須有 disabled 禁用 -
<label>定義 fieldset 元素的標題。 -
<fieldset></fidldset>定義圍繞表單中元素的邊框 -
<legend></legend>定義 fieldset 元素的標題。
3.1表單的組成(控制元件)
文字輸入框
name一定要寫,影響向伺服器提交資料,以key:value的形式向服務端提交資料,name就是key,沒有name伺服器就找不到對應的值.
placeholder表示灰色的提示資訊
value表示預設輸入的文字
size表示輸入框的大小,一般不設定
maxlength表示最大輸入字元
------------------------------------------------------------------------------------------------
<input type="text" name="username">
<input type="text" name="username" placeholder="請輸入使用者名稱">
<input type="text" name="username" value="你好">
<input type="text" name="username" placeholder="請輸入使用者名稱" size="10" maxlength="15">
密碼框
<input type="password" name="pwd">
<input type="password" name="pwd" placeholder="請輸入密碼">
<input type="password" name="pwd" placeholder="請輸入密碼" maxlength="12">
也有value 一般不寫
單選按鈕
<input type="radio" name="sex" value="male" checked>男 checked預設選擇
<input type="radio" name="sex" value="female">女
複選框
<input type="checkbox" name="hobby" value="basketball"> 籃球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球
<input type="checkbox" name="hobby" value="baseball"> 棒球
檔案選擇框
<input type="file" name="pic">
<input type="file" name="pics" multiple> <!--選擇多個檔案-->
規定型別的文字輸入框(H5新增)
<!--郵箱-->
<input type="email" name="email" placeholder="請輸入郵箱">
<!--url-->
<input type="url" name="url" placeholder="請輸入網址">
<!--數字-->
<input type="number" name="num">
<input type="number" name="num" min='10' max='100' step='10'>
<!--搜尋框-->
<input type="search" name="kw" placeholder="搜尋">
<!--電話號碼 同於text 但是用移動裝置，會直接彈出數字鍵盤-->
<input type="tel" name="tel_num" placeholder="請輸入電話號碼">
範圍選擇框(H5新增)
<input type="range" name="range">
<input type="range" name="range" value="80">
<input type="range" name="range" value="80" max="100" min="0" step="1">
顏色選擇框(H5新增)
<input type="color" name="color">
時間選擇框(H5新增)
<input type="date" name="date">
<input type="month" name="month">
<input type="week" name="week">
<input type="time" name="time">
<input type="datetime" name="datetime">
<input type="datetime-local" name="datetime">
下拉選項
<select name="major">
<option value="computer">計算機</option>
<option value="archaeology">考古學</option>
<option value="medicine" selected>醫學</option>
<option value="Architecture">建築學</option>
<option value="Biology">生物學</option>
</select>
多選:multiple 一般不用
多行文字輸入
<textarea name="content"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>
按鈕
<!--提交按鈕-->
<input type="submit" value="提交">
<button>提交</button>
<button type="submit">提交</button>
<!--重置按鈕-->
<input type="reset" value="重置">
<button type="reset">重置</button>
<!--普通按鈕-->
<input type="button" value="按鈕">
<button type="button">按鈕</button>
表單中其他標籤
field/legend
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" >
weight: <input type="text" >
</fieldset>
</form>
datalist(新增)
<form action="http://www.baidu.com" target="_blank">
<input id="myCar" list="cars">
<datalist id="cars">
<option value="BMW"></option>
<option value="Ford"></option>
<option value="Volvo"></option>
</datalist>
<button>搜尋</button>
</form>
表單驗證(H5新增)
必填
required
指定型別
Input:email 、input:url、input:number 會自動驗證型別
pattern 正則(所有可輸入的都可以用)
<input type="text" pattern="\w{4,6}">
<input type="text" pattern="\d{4,6}" title="必須是4~6位數字">
pattern與title連用,用於提示
表單控制元件的通用屬性
- disabled 表示不可用 用於所有的表單控制元件
- enabled 表示可用 用於所有的表單控制元件
- readable 表示只讀 用於可輸入的表單控制元件 (input/textarea)
- autofocus 自動獲取焦點 所有表單控制元件
- autocomplete 值on/off 用於可輸入的控制元件 是否自動填充內容
- pattern 正則驗證 可輸入的控制元件
- required 必填
4.視訊/音訊
<video></video> 定義視訊===>mp4/ogg/webm
| 屬性 | 值 | 描述
| -------- | ------------------ | ------------------------------------------------------
| autoplay | autoplay | 如果出現該屬性，則視訊在就緒後馬上播放。
| controls | controls | 如果出現該屬性，則向用戶顯示控制元件，比如播放按鈕。
| height | pixels | 設定視訊播放器的高度。
| loop | loop | 如果出現該屬性，則當媒介檔案完成播放後再次開始播放。
| muted | muted | 如果出現該屬性，視訊的音訊輸出為靜音。
| poster | URL | 規定視訊正在下載時顯示的影象，直到使用者點選播放按鈕。
| preload | auto metadata none | 如果出現該屬性，則視訊在頁面載入時進行載入，並預備播放。如果使用 "autoplay"，則忽略該屬性。
| src | URL | 要播放的視訊的 URL。
| width | pixels | 設定視訊播放器的寬度。
<audio></audio> 定義音訊===>mp3/wav/ogg
| 屬性 | 值 | 描述
| -------- | ------------------ | ----------------------------------------------------------
| autoplay | autoplay | 如果出現該屬性，則音訊在就緒後馬上播放。
| controls | controls | 如果出現該屬性，則向用戶顯示音訊控制元件（比如播放/暫停按鈕）。
| loop | loop | 如果出現該屬性，則每當音訊結束時重新開始播放。
| muted | muted | 如果出現該屬性，則音訊輸出為靜音。
| preload | auto metadata none | 規定當網頁載入時，音訊是否預設被載入以及如何被載入。
| src | URL* | 規定音訊檔案的 URL。
<source></source>為媒體元素（比如和）定義媒體資源
<video>
<source src="" type="video/mp4">
</video>
| 屬性 | 值 | 描述
| ----- | ------------- | ------------------------------------------
| media | media_query | 規定媒體資源的型別，供瀏覽器決定是否下載。
| src | URL | 規定媒體檔案的 URL。
| type | MIME_type | 規定媒體資源的 MIME 型別。