表格表單視頻音頻

頁面的組成部分

列表

<ul> <li></li> 無序列表 </ul> <ol> <li></li> 有序列表 </ol> ol標籤的屬性有 start type='a/A/i/I/1' reversed反向 <dl> <dt></dt> t:title的首字母 <dd></dd> d:describe的首字母 </dl> 

列表的css屬性

llist-style-type(列表符號項):circle/square/none/disc
list-style-position:outside默認，框外/inside
list-style-image:url()
list-style(複合屬性,通常只填none):circle outside url()

---

表格標籤

<table> <caption><h2>表格名<h2></caption> <thead> 表頭 <tr> 行，table row的縮寫 <th>序號<th> <th>姓名<th> </tr> </thead> <tbody> <tr> <td>1<td> <td>egon<td> </tr> <tr> <td>2<td> <td>lxxn<td> </tr> </tbody> <tfoot> <tr> <td colspan='2'></td> </tr> </tfoot> </table> th,td的標籤屬性：colspan橫向合併表格 rowspan縱向合併表格 經常使用css通用屬性： td,th:padding,border table:width height通常只用width 經常使用表格專有css屬性： table-layout:fixed;固定每列等寬 border-collapse:collapse;合併單元格邊框 border-spacing:5px;單元格間隙，前提：沒有合併單元格 caption-side:top/bottom;標題在頂部或底部 

---

表單

<form action='提交的地址url' method='提交方式 get/post' enctype='multipart/form-data'> 用戶名:<input type='text' name='username'(用於傳輸給後端時使用key:value形式存儲) placeholder='請輸入用戶名'(框內的提示，輸入內容就消失) maxlenght='10'(最大輸入字符個數)> 密碼:<input type='password' name='password'> (輸入的爲密文) 多選一:<input type='radio' name='sex' value='male'(傳輸的值) checked(選中)>男 <input type='radio' name='sex' value='female'(傳輸的值)>女 多選多(與選一相同):<input type='checkbox' name='xxx'> 文件選擇框:<input type='file' name='file' multiple(多個，默認爲一個)> 郵箱:type='email' 網址:type='url' 數字:type='number' (可指定max min step默認爲1) 搜索:type='search' 電話:type='tel' (在手機端能彈出數字框) 範圍選擇:type='range' (可指定max min step默認爲1) 顏色選擇:type='color' 時間日期：日期 type='date' 月份 type='mouth' 第幾周 type='week' 時間 type='time' 年月日時分秒 type='datetime-local' 下拉框：<select name=''> <option value=''>xxx</opton> ... </select> 多行文本: <textarea name='' rows='行高，非最大行數' cols='框寬'></textarea> </form> 按鈕 提交：<input type='submit' value=''> <button>提交</button> 重置: <input type='reset' value=''> <button type='reset'></button> 普通：<input type='button' value=''> <button type='button'></button> 提交信息到指定地址：如直接提交信息進行百度 <form action='http://www.baidu.com'> <input type='text' name='wd' list='mylist'> <datalist id='mylist'> <option value=''></option> ... <datalist> <button>搜索</button> </form> 

---

表單空間通用屬性

• disabled 元素禁用
• enabled 可用
• readable 只讀用於可輸入框
• autofocus 自動獲取焦點 光標直接過去
• autocomplete='off'/'on' 自動保存，下次輸入會有提示
• pattern 正則
• required 必填

---

視頻音頻

視頻格式：mp4 ogg webm <video src='視頻地址' controls autoplay></video> 其他屬性:loop:循環 poster='播放視頻前顯示的圖片地址' preload 預加載 音頻格式：MP3 wav ogg <audio src='' controls autoplay></video> 分類選擇 <video> <source src='' type='video/mp4'> <source src='' type='video/ogg'> <source src='' type='video/webm'> </video>