03.HTML基础-列表标签&表格标签

一、列表标签

一、无序列表

    - 作用：添加无序列语义
    - 格式：

     <ul>
        <li>姚远</li>
        <li>姚近</li>
        <li>姚诚展</li>
        <li>姚万里</li>
    </ul>

• ul是一个组标签，与li一起出现

二、有序列表

• 作用：添加有序语义，有先后之分；
• 格式：

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

三、定义列表

• 作用：添加列表语义
• 通过dt（definition title)罗列列表条目，再通过dd(definition description)给条目进行相应的描述

<dl>
        <dt>姚远</dt>
        <dd>她是中国一朵美丽的花朵</dd>
        <dd>也一位帅气的男孩吖~</dd>
        <dt>你</dt>
        <dd>一坨臭粑粑~</dd>
    </dl>

• dl是一个组标签，dt和dd不能单独出现，必须包裹在dl里面

二、表格标签

• 作用：以表格形式将数据展示出来

• 格式：
  - table定义一个表格
  - tr定义一行
  - td定义一个单元格、

• 先定义一个表格, 然后通过tr告诉浏览器这个表格中一共有多少行, 然后再通过td告诉浏览器这一行中一共有多少个元素(一共有多少列)

<table>
    <tr>
        <td>第一行第一个</td>
        <td>第二行第二个</td>
    </tr>
    <tr>
        <td>第二行第一个</td>
        <td>第二行第二个</td>
    </tr>
</table>

-属性：

属性	作用
border	默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度
width	默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度
height	默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度
cellspacing	外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙
align:	规定表格相对周围元素的对齐方式, 它的取值有center、left、right
valign	规定表格相对周围元素的对齐方式, 它的取值有top/middle/bottom
bgcolor	规定表格的背景颜色

啊这个表格成功了，就在我编辑表格标签的时候，我突然想到，我所用的CSDN本身也是一个网页，或许他也是HTML出身呢，我就试着用表格标签来编辑我的“表格标签”哈哈哈哈哈，真成了！！！！ 但是属性不管用，咱也不知道为啥，一会儿写完了去百度问问/呲牙/😁

表格中的其他标签

-表单中有两种类型的单元格, 一种是标准单元格td, 一种是表头单元格th
-  th标签: 给每一列设置标题, 单元格中的内容会自动加粗，居中
-  caption 标签:给整个表格设置标题（一定要嵌套在table标签中才有效）

表格的结构

- thead 标签:用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小
- tbody 标签:一般用来存放页面中的主体数据, 如果不写会自动加上
- tfoot 标签:用来存放表格的页脚（脚注或表注), 如果没有加css页面默认将表头中的高度设置变小,