HTML总结（四）之表格、列表标签

最新推荐文章于 2024-04-02 21:15:51 发布

♚ Painting

最新推荐文章于 2024-04-02 21:15:51 发布

阅读量403

点赞数 2

分类专栏： HTML+CSS 文章标签： html

本文链接：https://blog.csdn.net/qq_46071321/article/details/106504544

版权

HTML+CSS 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一、表格标签

表格是实际开发中非常常用的标签
1.作用：表格主要用于显示、展示数据。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。
2.表格的基本语法

<table>
<tr>
<td>单元格内的文字<td>
      ......
      </tr>
      .......
      </table>

注：（1）<table></table>是用于定义表格的标签
（2）<tr></tr>标签用于定义表格中的行
（3）<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
3.表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。<th>标签表示HTML表格的表头部分。
在这里插入图片描述
4.表格属性
表格标签这部分属性在实际开发中不常用，后面通过css设置
5.表格结构标签
（1）<thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签，一般位于第一行
(2)<tbody></tbody>:用于定义表格的主体，主要用于放数据本体
（3）以上标签都是放在<table></table>标签中
6.合并单元格

合并单元格方式
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan:“合并单元格的个数”
目标单元格（写合并代码）
最上侧单元格为目标单元格，写合并代码
最左侧单元格为目标单元格，写合并代码

<body>
    <table width="300" height="200" cellspacing="0" border="1">
        <tr>
            <td colspan="3">/*跨列合并三个单元格，目标单元格在第一行第一列，即在最左侧*/
            </td>
        </tr>
        <tr>
            <td rowspan="2">/*跨行合并两个单元格,因为是合并第二行和第三行，所以目标单元格在第二行，又因为在第一列，所以选择目标单元格在第二行第一列的位置，即在最上侧*/
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </table>
</body>

显示结果：
在这里插入图片描述

合并单元格三部曲
（1）先确定跨行还是跨列
（2）找到目标单元格 <td colspan="2"></td>
（3）删除多余单元格

二、列表标签

表格是用来显示数据的，那么列表就是用来布局的
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便
根据使用场景不同，列表可以分为三大类：无序列表、有序列表和自定义列表
1.无序列表（重点）
无序列表的基本语法格式如下：

 <ul>
<li>列表项1</li>
<li>列表项2</li>
  ......
  </ul>

注：（1）无序列表的各个列表项之间没有顺序级别之分，是并列的
（2）<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或文字的做法是不被允许的
（3）<li></li>之间相当于一个容器，可以容纳所有元素
（4）无序列表会带有自己的样式属性，但在实际使用中，我们会使用css来设置
2、有序列表(理解）
有序列表的基本语法格式如下：

<ol>
<li>列表项1</li>
<li>列表项2</li>
......
</ol>

这里需要注意的和有序列表一样，在这里就不再重复了。
3.自定义列表（重点）
在HTML标签中，<dl>标签用于定义描述列表（或自定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述一个项目/名字）一起使用
基本语法格式：

<dl>
<dt>名词1</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>

注意：（1）<dl></dl>里面只能包含<dt>和<dd>
（2）<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
这里介绍完了表格、列表标签。表单标签内容较多，我们在下一篇博客中再单独介绍。

♚ Painting

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML总结（四）之表格、列表标签

一、表格标签表格是实际开发中非常常用的标签1.作用：表格主要用于显示、展示数据。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。2.表格的基本语法<table><tr><td>单元格内的文字<td> ...... </tr> ....... </table>注：（1）<table></table>是用于定义表格的标签（2）<tr&gt
复制链接

扫一扫