HTML知識點梳理(二)
一:列表標簽
列表標簽總共有三種:【無序列表】、【有序列表】、【定義列表】
無序列表:無序列表是用來表示一種沒有先後順序之分的列表項!
語法:
<ul>
<li></li> </ul>
該標簽為組標簽類,組標簽要麽就不寫,要麽就要寫一組。
無序列表樣式:前面默認會有一個實心的小圓點。
ul或者li標簽屬性:
type:表示列表前面的符號的類型
取值:disc(默認值 實心的小圓點)、circle(空心圓周)、square(實心小方塊)
<ul type="square"> <li>1</li> <li>2</li> </ul>
註:列表中還可以嵌套列表!
有序列表:有序列表是用表示一種有順序之分的列表項
語法:
<ol> <li></li> <li></li> </ol>
ol或者li標簽屬性:
type:用來設置列表前面的序號
取值:1(默認值)、a、A、i(小羅馬)、I(大羅馬)
start:用於表示序號從哪裏開始 取值:數值
reversed:是倒數的意思
定義列表: 定義列表是一個組標簽,不過比較復雜,因為它出現了三對標簽!
語法:
<dl> <!--dl表示定義列表--> <dt>書籍</dt> <!--dt表示定義標題--> <dd>西遊記</dd> <!--dd表示對定義標題的描述--> <dd>水滸傳</dd> </dl>
二:表格標簽
表格也是組標簽。表格的基本語法:
<table> <tr> <!--表示表格中的行標簽 一個表格中有多少行就應該書寫多少對tr標簽--> <th></th> <!--表示標題單元格 這個單元格裏面的文本會加粗顯示並且會居中--> <td></td> <!--表示表格中的單元格標簽 一行中有多少個單元格就應該書寫多少對td標簽--> </tr> </table>
table標簽的常用屬性:
屬性名 |
功能 |
border |
給表格設置邊框 單位是像素 取值:0~n |
width |
給表格設置寬度 取值:固定值和百分比 |
height |
給表格設置高度 一般不用 因為表格的高度一般是由其內容來決定的 |
background |
給表格設置背景圖片 可以使用相對路徑和絕對路徑 |
bgcolor |
給表格設置背景顏色 |
align |
給表格設置水平方向的對齊方式 取值:left(居左對齊 默認值) center 居中對齊 right 居右對齊 |
cellpadding |
表格中單元格中的內容到邊框的距離 內填充 |
cellspacing |
表格中單元格與單元格之間的距離 外邊距 |
tr標簽的屬性:
屬性名 |
功能 |
align |
用來設置行裏面的內容水平方向對齊方式 取值:left 默認值 居左對齊 center 居中對齊 right 居右對齊 |
valign |
用來設置行裏面的內容垂直對齊方式 取值:top 頂部對齊 middle 居中對齊 默認值 bottom 底部對齊 |
bgcolor |
給行設置背景顏色 |
height |
給行設置高度 |
td標簽的屬性:
屬性名 |
功能 |
align |
用來設置單元格裏面的內容水平方向對齊方式 取值:left 默認值 居左對齊 center 居中對齊 right 居右對齊 |
valign |
用來設置單元格裏面的內容垂直對齊方式 取值:top 頂部對齊 middle 居中對齊 默認值 bottom 底部對齊 |
bgcolor |
給單元格設置背景顏色 |
height |
給單元格設置高度 |
width |
給單元格設置寬度 |
rowspan |
跨行合並單元格 |
colspan |
跨列合並單元格 |
實現合並單元格:
- 一定要明白我們是跨列合並還是跨行合並
- 要明確的知道在哪一個單元格中書寫合並單元格的屬性
- 要明確的知道要合並多少個單元格 合並多少個單元格 那麽就是多少
- 合並後要刪除對應的單元格 n-1
三:表單
表單它主要是用來收集用戶輸入的相關數據!
<form action=""> <p>用戶名:<input type="text" name="username"></p> <p>密碼:<input type="password" name="password"></p>
<input type="submit" value="登錄">
</form>
一個完整的表單,是由“form標簽”和“表單控件標簽”組成!
form標簽的屬性
- action:將表單中收集的用戶數據提交給“表單的處理程序”進行相關的處理!這個屬性可以不寫 如果不寫表示將表單的數據提交給當前頁面進行處理!
- method:指表單數據的提交方式 取值:get|post
get:如果說method屬性沒有書寫 則默認表示表單數據以“get”方式進行提交 以get方式進行提交的數據會顯示在瀏覽器的地址欄中
顯示格式:表單處理程序?name的屬性值=用戶輸入的數據& name的屬性值=用戶輸入的數據
如果使用的是post進行提交的方式 不會將表單數據顯示在瀏覽器的地址欄中,直接發送給表單的處理程序進行處理
get方式與post方式之間的優缺點:
1、以get方式提交的表單數據 不安全
2、get方式只能提交少量的數據
3、post方式提交的數據相對安全
4、post方式可以提交大量的數據!
HTML知識點梳理(二)