HTML学习笔记五列表标签+表格标签

最新推荐文章于 2024-01-27 20:24:26 发布

新进菜鸟

最新推荐文章于 2024-01-27 20:24:26 发布

阅读量507

点赞数

分类专栏：学习笔记文章标签： html5

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

写在前面

特此声明，本系列学习笔记内容来源于网络，为加深记忆所做的笔记，内容相当于转载自他处，转载来源为极客江南的博客

列表标签

给一系列数据定义列表语义，HTML中有三种标签，分别是

无序列表（unordered list）
有序列表（ordered list）
定义列表（definfition list）

无序列表

顾名思义，给一堆数据添加列表语义，且数据无先后顺序之分
格式：

<ul>
    <li>
        "内容"
    </li>
</ul>

注：ul标签和li都是一起出现的，不会单独出现其中一个，都是结合起来出现的。另外，ul标签中一般只出现li标签而不出现其他标签，而在企业级开发中，可以在li标签内添加其它标签来丰富语义
应用场景：
- 新闻界面
- 商品列表
- 导航条

有序列表

与无序列表相对应，给一堆数据添加列表语义，且数据有先后顺序之分
格式：

<ol>
    <li>
        "内容"
    </li>
</ol>

用法/应用场景和ul差不多，但是有序列表用的在三种列表标签最少，因为用有序列表能做的，无序列表都能做

定义标签

格式：

<dl>
    <dt>title</dt>
    <dd>This is my description</dd>

    <dt></dt>
    <dd></dd>
</dl>

解释：dt 意思是 definition title，用来定义标签标题；dedinition description，用来定义标题对应的描述。
应用：图文混排

表格标签

用来给一堆数据添加表格语义，表格方式在数据量很大时，是一种很有效、很清晰的表达方式
过去表格标签用得非常多，绝大多数网站都是用表格标签来制作的（如今被div+css所取代）
格式：

<table>
    <caption>
        <!--用于设置表格标题的标签-->
        <h2>这是表格标题</h2>
    </caption>
    <tr>
        <td></td>
    </tr>
</table>

格式解析：tr表示一行，td表示一行中的一个单元格
表格标签有一个边框（border）属性，其决定边框宽度，这个属性值默认为0，故默认看不到边框
th标签，专门存储每一列的标题的标签，其内文字自动加粗、居中
相关属性
- width和height属性，设置宽高，可同时给table和td标签使用
- align属性，水平对齐方式，可同时给table和tr和td标签使用
- valign属性，垂直对齐方式，只能给tr和td标签使用
- 还有其他修改样式的属性，但由于企业级开发修改主要用css来实现，故此不再赘述
细线表格的实现（了解）

<!--cellspacing表示内边距，默认值为2px-->
<table bgcolor="black" cellspacing="1px">
    <tr bgcolor="white">
        <td>一一</td>
        <td>一二</td>
    </tr>
    <tr bgcolor="white">
        <td>二一</td>
        <td>二二</td>
    </tr>
</table>