列表，表格與表單

有序列表

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

無序列表

//1.<ul>標簽定義無序列表，當(dāng)一組列表沒有按順序進行排序的時候，用無序列表 //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中的內(nèi)容是對dt中的內(nèi)容做一個解釋說明

表格

table屬性

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

表格的合并

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

表單的基本結(jié)構(gòu)

表單的元素

表單的作用

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。