表格存在的作用:
1.表格主要用于顯示曾雕、展示數(shù)據(jù)见芹,因?yàn)樗梢宰寯?shù)據(jù)顯示的非常的規(guī)整钉嘹,可讀性非常好鸯乃。特別是后臺展示數(shù)據(jù)的時候,能夠熟練運(yùn)用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理
2.表格不是用來布局頁面的,而是用來展示數(shù)據(jù)的缨睡。
表格的使用格式:
表格屬性:
合并單元格:
合并單元格方式:
跨行合并:rowspan="合并單元格的個數(shù)"? ?
最上側(cè)單元格為目標(biāo)單元格, 寫合并代碼
跨列合并:colspan="合并單元格的個數(shù)"
最左側(cè)單元格為目標(biāo)單元格, 寫合并代碼
合并單元格三步曲:
先確定是跨行還是跨列合并鸟悴。
找到目標(biāo)單元格. 寫上合并方式 = 合并的單元格數(shù)量。
比如:<td colspan="2"></td>奖年。刪除多余的單元格细诸。
表格總結(jié)
表格學(xué)習(xí)整體可以分為三大部分:
表格的相關(guān)標(biāo)簽
table? thead? body? tr? th? td
表格的相關(guān)屬性
cellspacing? ? cellpadding? ? width? height? border
合并單元格
? rowspan? colspan
列表的作用:
表格是用來顯示數(shù)據(jù)的,那么列表就是用來布局的陋守。
列表最大的特點(diǎn)就是整齊震贵、整潔、有序水评,它作為布局會更加自由和方便猩系。
根據(jù)使用情景不同,列表可以分為三大類:無序列表中燥、有序列表和自定義列表寇甸。
<ul> 標(biāo)簽表示 HTML 頁面中項(xiàng)目的無序列表,一般會以項(xiàng)目符號呈現(xiàn)列表項(xiàng)疗涉,而列表項(xiàng)使用 <li> 標(biāo)簽定義拿霉。
<ol> 標(biāo)簽用于定義有序列表,列表排序以數(shù)字來顯示咱扣,并且使用 <li> 標(biāo)簽來定義列表項(xiàng)绽淘。
<dl> 標(biāo)簽用于定義描述列表(或定義列表),該標(biāo)簽會與 <dt>(定義項(xiàng)目/名字)和 <dd>(描述每一個項(xiàng)目/名字)一起使用闹伪。
表單的作用:
1.使用表單目的是為了收集用戶信息收恢。
2.在我們網(wǎng)頁中, 我們也需要跟用戶進(jìn)行交互祭往,收集用戶資料,此時就需要表單火窒。
表單的組成:
在 HTML 中硼补,一個完整的表單通常由表單域、表單控件(也稱為表單元素)和 提示信息3個部分構(gòu)成熏矿。
表單域:
表單域是一個包含表單元素的區(qū)域已骇。
在 HTML 標(biāo)簽中, <form> 標(biāo)簽用于定義表單域票编,以實(shí)現(xiàn)用戶信息的收集和傳遞褪储。
<form> 會把它范圍內(nèi)的表單元素信息提交給服務(wù)器.
實(shí)現(xiàn)代碼:
<form action=“url地址” method=“提交方式” name=“表單域名稱">各種表單元素控件</form>
表單控件(表單元素)
<input> 表單元素
<input type="屬性值" />
type 屬性的屬性值及其描述如下:
除 type 屬性外,<input>標(biāo)簽還有其他很多屬性慧域,其常用屬性如下:
<label> 標(biāo)簽
<label> 標(biāo)簽為 input 元素定義標(biāo)注(標(biāo)簽)鲤竹。<label> 標(biāo)簽用于綁定一個表單元素, 當(dāng)點(diǎn)擊<label> 標(biāo)簽內(nèi)的文本時,瀏覽器就會自動將焦點(diǎn)(光標(biāo))轉(zhuǎn)到或者選擇對應(yīng)的表單元素上,用來增加用戶體驗(yàn).
語法:
<label for="sex">男</label>
?<input type="radio" name="sex" id="sex" />
?核心: <label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同昔榴。
<textarea> 表單元素
1.使用場景: 當(dāng)用戶輸入內(nèi)容較多的情況下辛藻,我們就不能使用文本框表單了碘橘,此時我們可以使用 <textarea> 標(biāo)簽。
2.在表單元素中吱肌,<textarea> 標(biāo)簽是用于定義多行文本輸入的控件痘拆。
3.使用多行文本輸入控件,可以輸入更多的文字氮墨,該控件常見于留言板纺蛆,評論。
語法:
<textarea rows="3" cols="20">? 文本內(nèi)容 </textarea>
通過 <textarea> 標(biāo)簽可以輕松地創(chuàng)建多行文本輸入框规揪。cols=“每行中的字符數(shù)” 桥氏,rows=“顯示的行數(shù)”,