HTML學(xué)習(xí)總結(jié)02-列表標(biāo)簽以及表格標(biāo)簽

列表標(biāo)簽

列表是容器級標(biāo)簽珊随，最大特點(diǎn)是清晰整潔，列表是為了給內(nèi)容增加列表語義的

無序列表

無序列表的語法如下川梅，

<ul>
  <li>列表項(xiàng)1</li>
  <li>列表項(xiàng)2</li>
  <li>列表項(xiàng)3</li>
  ......
</ul>

無序列表的各個(gè)列表項(xiàng)之前是沒有先后順序的堂淡，他們在語義上是并列關(guān)系，ul中只能是li,并且li只能存在ul中逊谋，但我們說li是容器級別的擂达，li里可以放任何標(biāo)簽，甚至可以嵌套另外一個(gè)列表胶滋，如板鬓，

<ul>
  <li>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
  </li>
  <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
   </li>
</ul>

ul有type的屬性，屬性值： disc(實(shí)心原點(diǎn)究恤，默認(rèn))俭令，square(實(shí)心方點(diǎn))，circle(空心圓)部宿〕唬可以通過type來設(shè)置無序列表的樣式瓢湃。我們也可以給li設(shè)置type。

有序列表

有序列表即為有排列順序的列表赫蛇，跟ul無序列表的語義是不同的绵患，但使用方法是一致的，有序列表的基本語法格式如下：

<ol>
  <li>列表項(xiàng)1</li>
  <li>列表項(xiàng)2</li>
  <li>列表項(xiàng)3</li>
  ......
</ol>

自定義列表

定義列表常用于對術(shù)語或名詞進(jìn)行解釋和描述悟耘，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號落蝙。其基本語法如下：

<dl>
  <dt>名詞1</dt>
  <dd>名詞1解釋1</dd>
  <dd>名詞1解釋2</dd>
  ...
  <dt>名詞2</dt>
  <dd>名詞2解釋1</dd>
  <dd>名詞2解釋2</dd>
  ...
</dl>

dl沒有屬性，同樣的dl中的元素只能是dt和dd暂幼；dt從語義上講筏勒，指的是列表的標(biāo)題，dd指的是列表的選項(xiàng)旺嬉。dd是用來描述說明dt的管行；自定義列表中必須有dt，dd是可選的邪媳。
dl使用非常靈活病瞳，我們可以讓一個(gè)dl包裹多個(gè)dt，還可以讓一個(gè)dl只包含一個(gè)dt悲酷，使用多個(gè)dl來完成相同功能的自定義列表，如小米官網(wǎng)：

小米底部客戶幫助模塊兒.png

表格標(biāo)簽

表格是一種常用的一種標(biāo)簽亲善，用來處理设易、顯示表格式數(shù)據(jù)。之前也使用表格做布局蛹头，但由于表格布局比較死板顿肺，現(xiàn)在已經(jīng)不使用表格布局了

<table></table>、<tr></tr>渣蜗、<td></td>屠尊，他們是創(chuàng)建表格的基本標(biāo)簽；table用于定義一個(gè)表格耕拷。tr 用于定義表格中的一行讼昆，必須嵌套在 table標(biāo)簽中，在 table中包含幾對 tr骚烧，就有幾行表格浸赫。用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中赃绊，一對 <tr> </tr>中包含幾對<td></td>既峡，就表示該行中有多少單元格。創(chuàng)建表格的語法如下碧查，

<table>
  <tr>
    <td>單元格內(nèi)的文字</td>
    ...
  </tr>
  ...
</table>

tr標(biāo)簽只能包裹td运敢，td我們可以看做是一個(gè)容器，里邊兒可以放任何標(biāo)簽。

總計(jì)一下table的屬性：

border：設(shè)置表格的邊框传惠，默認(rèn)border=“0”迄沫，單位是像素。
width：寬度涉枫。像素為單位邢滑。
height：高度。像素為單位愿汰。
bordercolor：表格的邊框顏色困后。
align：表格的水平對齊方式。屬性值可以填：left right
center衬廷。注意：這里不是設(shè)置表格里內(nèi)容的對齊方式摇予，如果想設(shè)置內(nèi)容的對齊方式，要對單元格標(biāo)簽<td>進(jìn)行設(shè)置）
cellpadding：單元格內(nèi)容到邊的距離吗跋，像素為單位侧戴。默認(rèn)情況下，文字是緊挨著左邊那條線的跌宛，即默認(rèn)情況下的值為1像素酗宋。
cellspacing：單元格和單元格邊框之間的空白間距（外邊距），像素為單位疆拘。默認(rèn)情況下的值為2像素
bgcolor: 表格的背景顏色蜕猫。
background: 背景圖片。背景圖片的優(yōu)先級大于背景顏色哎迄。
一般我們設(shè)置表格樣式回右，是吧三參設(shè)置為0，即border cellpadding cellspacing 為 0px漱挚；

總結(jié)一下tr的常用屬性

bgcolor：設(shè)置這一行的單元格的背景色翔烁。
height：一行的高度
align：單元格內(nèi)容水平對齊方式，取值：left旨涝、center蹬屹、right
valign：一行的內(nèi)容垂直對齊方式，取值：top颊糜、middle哩治、bottom

總結(jié)一下td的常用屬性

align：內(nèi)容的橫向?qū)R方式。屬性值可以填：left right
width：絕對值或者相對值(%)
height：單元格的高度
bgcolor：設(shè)置這個(gè)單元格的背景色衬鱼。

表頭標(biāo)簽

表頭單元格一般位于表格的第一行或第一列业筏，使用表頭標(biāo)簽可以使其具有語義，并且其文本加粗居中鸟赫，設(shè)置表頭非常簡單蒜胖，只需用表頭標(biāo)簽<th></th>替代相應(yīng)的單元格標(biāo)簽<td></td>即可消别。

語法格式如下，

<table>
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>小豬</td>
        <td>女</td>
        <td>27</td>
    </tr>
    <tr>
        <td>小楊</td>
        <td>男</td>
        <td>27</td>
    </tr>

</table>

簡單說一下表格布局

在使用表格進(jìn)行布局時(shí)台谢，可以將表格劃分為頭部寻狂、主體和頁腳

<thead></thead>：用于定義表格的頭部。
必須位于<table></table> 標(biāo)簽中朋沮，一般包含網(wǎng)頁的logo和導(dǎo)航等頭部信息蛇券。
<tbody></tbody>：用于定義表格的主體。
位于<table></table>標(biāo)簽中樊拓，一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容纠亚。
注意，如果用使用這幾個(gè)標(biāo)簽筋夏，瀏覽器顯示的時(shí)候會按照thead蒂胞、tbody、tfoot的順序依次來顯示內(nèi)容条篷。如果沒有這幾個(gè)標(biāo)簽骗随，thead、tbody赴叹、tfoot鸿染，那么瀏覽器解析并顯示表格內(nèi)容的時(shí)候是從按照代碼的從上到下的順序來顯示。

表格標(biāo)題
caption 元素定義表格標(biāo)題乞巧。并且這個(gè)標(biāo)簽必須緊隨 table 標(biāo)簽之后牡昆。

<table>
   <caption>我是表格標(biāo)題</caption>
</table>

合并單元格

合并單元格屬性：

colspan：橫向合并
rowspan：縱向合并。

合并單元格的基本思路：
?將多個(gè)內(nèi)容合并的時(shí)候摊欠，把合并之后多余的東西刪除。如把 3個(gè) td 合并成一個(gè)柱宦，那就多余了2個(gè)些椒，需要?jiǎng)h除。

合并的順序：

先確定是跨行還是跨列合并
根據(jù) 先上后下先左后右的原則找到目標(biāo)單元格
刪除多余單元格