1. 程式人生 > >HTML知識點梳理(二)

HTML知識點梳理(二)

http 像素 gin 倒數 合並單元格 應該 瀏覽器 width action

一:列表標簽

列表標簽總共有三種:【無序列表】、【有序列表】、【定義列表】


無序列表:無序列表是用來表示一種沒有先後順序之分的列表項!

語法:

<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

跨列合並單元格

實現合並單元格:

  1. 一定要明白我們是跨列合並還是跨行合並
  2. 要明確的知道在哪一個單元格中書寫合並單元格的屬性
  3. 要明確的知道要合並多少個單元格 合並多少個單元格 那麽就是多少
  4. 合並後要刪除對應的單元格 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知識點梳理(二)