HTML基础(part6)--常用标签之列表
生活随笔
收集整理的這篇文章主要介紹了
HTML基础(part6)--常用标签之列表
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
鄙人的學習筆記。
列表標簽
無序列表標簽<ul>
<ul><li>元素1</li><li>元素2</li><li>元素n</li> </ul>有序列表<ol>
<ol><li>元素1</li><li>元素2</li><li>元素n</li> </ol>自定義列表<dl>
<dl><dt>表標題A</dt><dd>元素A1</dd><dd>元素A2</dd><dd>元素An</dd><dt>表標題B</dt><dd>元素B1</dd><dd>元素B2</dd><dd>元素Bn</dd> </dl>備注：<dt>為自定義列表的標題，<dd>為自定義列表的列表項
舉個例子
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>小黃之家</title> </head> <body><ul><li>小黃</li><li>大白</li><li>小黑</li></ul><ol><li>黃兄</li><li>白兄</li><li>黑兄</li></ol><dl><dt>小黃指南</dt><dd>吃飯</dd><dd>睡覺</dd><dd>和鏟屎的玩</dd><dt>大白指南</dt><dd>跳來跳去</dd><dd>咬衣服</dd><dd>和主人玩</dd></dl> </body> </html>頁面：
表格標簽<table>
語法
<table border="1"><!-- border = "1"為加邊框 --><thead><tr><th>列名1</th><th>列名2</th><th>列名3</th></tr></thead><tbody><tr><td>A1</td><td>A2</td><td>A3</td></tr><tr><td>B1</td><td>B2</td><td>B3</td></tr></tbody> </table>備注：<table>包裹一個表格，<thead>標簽包裹表格頭部，<th>標簽包裹一個列名單元，<tbody>標簽包裹表格的內容，<tr>標簽包裹一行，<td>標簽包裹一個單元格。
舉個例子
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>小黃之家</title> </head> <body><table border="1"><!-- border = "1"為加邊框 --><thead><tr><th>列名1</th><th>列名2</th><th>列名3</th></tr></thead><tbody><tr><td>A1</td><td>A2</td><td>A3</td></tr><tr><td>B1</td><td>B2</td><td>B3</td></tr></tbody></table> </body> </html>頁面：
單元格合并
<td>標簽的rowspan屬性
<td rowspan="2">A1</td> <!--表示A1單元格占2行 -->舉個例子
代碼：
頁面：
<td>標簽的colspan屬性
<td colspan="2">A2</td> <!--表示A2單元格占2列 -->舉個例子
代碼：
頁面：
總結
以上是生活随笔為你收集整理的HTML基础(part6)--常用标签之列表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 喜大普奔！曝半幅式方向盘车辆不被允许上工
- 下一篇： 6 年来首亏，夏普 2022 财年净亏损