HTML列表标签和表格标签

目录

        一、列表标签

        1.无序列表 ([Unordered list])(最常用)

        2.有序列表 ([Ordered list])

        3.定义列表 ([Definition lists])

二、表格标签 

1、基本语法

2、表格属性

3、表格结构标签

4、合并单元格

---

一、列表标签

HTML 中，用于创建列表的标签主要有三种：<ul>、<ol> 和 <dl>。

1.无序列表 (<ul>[Unordered list])(最常用)

无序列表的每一个列表项前都带有圆点或者其他形式的标记。无序列表由 <ul> 标签开始，每个列表项使用 <li> 标签定义。

    <ul>  
      <li>1</li>  
      <li>2</li>  
      <li>3</li>  
    </ul>

属性：ul和li中的type属性

        disc：实心的圆圈   (默认)

        square：实心的方块

        circle：空心的圆圈

<ul type="circle">
  <li>1</li>  
  <li type="square">2</li>  
  <li>3</li> 
</ul>

 

2.有序列表 (<ol>[Ordered list])

        有序列表的每一个列表项前都带有数字或者其他顺序的标记。有序列表由 <ol> 标签开始，每个列表项使用 <li> 标签定义

	<ol>  
	  <li>第一</li>  
	  <li>第二</li>  
	  <li>第三</li>  
	</ol>

         属性：           

    type="1"表示使用数字（默认），

    type="A"表示使用大写字母，

    type="a"表示使用小写字母，

    type="I"表示使用大写罗马数字，

    type="i"表示使用小写罗马数字。

    start属性可以用来指定有序列表中第一个项目的编号。

	<ol type="A">  
	  <li>第一</li>  
	  <li>第二</li>  
	  <li>第三</li>  
	</ol>

3.定义列表 (<dl>[Definition lists])

定义列表由 <dl> 标签开始，列表中的每个项目都由 <dt>[Definition term]（定义项目/名词）和 <dd>[Definition description]（描述每一个项目/定义）组成。

    <dl>  
      <dt>HTML</dt>  
      <dd>超文本标记语言，用于创建网页。</dd>  
      <dt>CSS</dt>  
      <dd>层叠样式表，用于描述HTML文档的样式。</dd>  
    </dl>

二、表格标签 

1、基本语法

        <table>:定义表格的标签

        <tr>[Table row]：定义表格中的单元格

        <td>[Table data]: 定义表格中的单元格内容

<table>
  <!-- 在 <table>表格标签中,可以使用表格标题标签 <caption> 为表格添加一个标题 ,被添加的表格标题会显示在表格上方 , 并且居中显示。-->
    <caption>标题</caption>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
            .
            .
            .
    </tr>
</table>

2、表格属性

        

 3、表格结构标签

<table width="300px">
    <caption>标题</caption>
    <thead>
      <tr>
        <th>头部1</th>
        <th>头部2</th>
        <th>头部3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>主体1</td>
        <td>主体2</td>
        <td>主体3</td>
      </tr>
      <tr>
        <td>主体4</td>
        <td>主体5</td>
        <td>主体6</td>
      </tr>    
    </tbody>
    <tfoot>
      <tr>
         <td>底部1</td>
         <td>底部2</td>
         <td>底部3</td>
      </tr>
    </tfoot>
</table>

 4、合并单元格

        跨行合并：rowspan = "合并单元格个数"

        跨列合并：colspan = "合并单元格个数"

  <table width="300px" height="100px">
    <caption>标题</caption>
    <tr>
      <td></td>
      <td colspan="2"></td>
      <!-- <td></td>  这里被跨列合并了 -->
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <!-- <td></td>  这里被跨行合并了-->
      <td></td>
      <td></td>
    </tr>
  </table>