列表，表格與表單

有序列表

<ol> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ol> //1.ol應用場景：當一個列表是按順序排列的就用有序列表 //2.ol屬性：type：A（A~Z）// 1（按數字排序） //開發中最好不要用type

無序列表

//1.<ul>標簽定義無序列表，當一組列表沒有按順序進行排序的時候，用無序列表 //2.無序列表屬性：type： circle（空心圓點）//disc（實心圓點） //square（實心正方形） //ul、ol中只能放li標簽，不能放其他標簽

列表樣式

list-style-type:定義列表前符號
list-style:none;去掉li的默認樣式
List-style-image:url(…)在列表前插入自定義的圖標
List-style-position:定義圖標位置

自定義列表

<dl> <dt></dt> <dd></dd> </dl> //dl中只能嵌套dt、dd //dd中的內容是對dt中的內容做一個解釋說明

表格

table屬性

align=“center” 不建議使用 ，建議使用外部樣式
border=‘1’ 1px的邊框
width="…" 表格的寬度100px/100% 根據父級的寬度自適應
tr 行
th 標題單元格
td 內容單元格
單元格會根據內容去自適應寬度
border-collapse; 規定是否合并表格邊框

表格的合并

colspan:number 橫向合并單元格 跨列
rowspan：number 縱向合并單元格 跨行
合并完成后去掉多余的單元格

表單的基本結構

表單的元素

表單的作用

登錄、注冊、采集用戶信息表單的基本結構 form action="test.html" ——提交的地址 當前頁面數據提交的地址method="get" ——提交方式 get/post js的時候在講區別（安全）表單的基本類型 (表單元素都是行內塊元素)inputtype="text" 定義了當前input的類型text單行文本框value="" 默認值、存儲值name="username" 相當于class、id，后臺會根據name名稱獲取當前的輸入的值type="text" text單行文本框type="password"密碼框type="submit"提交按鈕type="checkbox"多選框type="radio"單選 *name名稱要一致*type="file"上傳type="image" 不常用 按鈕（插入圖片） src="圖片地址"type="reset" 不常用 按鈕（清空表單數據）type="button" 按鈕（沒有功能）type="submit" 按鈕（提交功能）input屬性maxlength="10" 規定了表單輸入的字符長度， 當前長度是10只能應用在類型是：text、passwordchecked="checked" 設置默認選中項 readonly="readonly" 只讀 不能寫disabled="disabled" 禁用type="hidden" 隱藏域 存儲的數據不想讓用戶看到------------------------------------------------select 下拉列表<select anme="name" size="行數" >size="行數" 規定下拉列表中可見選項的數目 *不常用*<option value="北京" >北京</option>.....</select><option selected="selected" value="廣州">杭州</option>selected="selected" 設置當前默認值-----------------------------------------------------textarea 文本域 /*了解不推薦使用*/cols="number" 規定文本區內的可見寬度。rows="number" 規定文本區內的可見行數。fieldset元素可將表單內的相關元素分組<legend> 標簽為 fieldset 元素定義標題。<label> 標簽為 input 元素定義標注（標記）。label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同

總結

以上是生活随笔為你收集整理的列表表格及表单美化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。