第二天的学习！

最新推荐文章于 2022-11-15 18:41:11 发布

张张的宝藏

最新推荐文章于 2022-11-15 18:41:11 发布

阅读量95

点赞数 10

本文链接：https://blog.csdn.net/m0_56426996/article/details/117448234

版权

今天实训第二天，小张和她的小伙伴们一起学习了HTML中的表格和列表（我做的好慢!!!!）。

一、HTML中的列表

HTML 支持有序、无序和定义列表

（一）无序列表

无序列表是一个项目的列表，此列项目默认无标注时使用粗体圆点（典型的小黑圆圈）进行标记。

（无序列表始于 <ul> 标签。每个列表项始于 <li>。）列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<ul>

<li>一个张张</li>

<li>两个张张</li>

<li>三个张张</li>

</ul>

（二）有序列表

有序列表也是一列项目，列表项目使用数字进行标记。

（有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。）列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<body>
    <ol>
        <li>一个张张</li>
        <li>两个张张</li>
        <li>三个张张</li>
    </ol>
</body>

使用type对前面的序号进行样式改变

 <ul type="disc">
        <li>一个张张</li>
        <li>两个张张</li>
        <li>三个张张</li>
        <li>四个张张</li>
       </ul>  
       
       <ul type="circle">
        <li>一个张张</li>
        <li>两个张张</li>
        <li>三个张张</li>
        <li>四个张张</li>
       </ul>  
       
       <ul type="square">
        <li>一个张张</li>
        <li>两个张张</li>
        <li>三个张张</li>
        <li>四个张张</li>
       </ul>

（三）定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

 <dl>
        <dt>张张</dt>
        <dd>张张张张</dd>
        <dd>张张张张</dd>
        <dd>张张张张</dd>
        <dt>呀呀呀呀呀呀呀</dt>
        <dd>呀呀呀呀呀呀</dd>
        <dd>呀呀呀呀呀呀</dd>
        <dd>呀呀呀呀呀呀</dd>
     </dl>

附：嵌套

  <ul>
        <li>苹果</li>
          <ul>
          <li>苹果核</li>
          <li>苹果肉</li>
          </ul>
          <li>香蕉</li>
          <ul>
          <li>香蕉皮</li>
          <li>香蕉肉</li>
          </ul>
          </ul>

总结：

<ol>	定义有序列表。
<ul>	定义无序列表。
<li>	定义列表项。
<dl>	定义定义列表。
<dt>	定义定义项目。
<dd>	定义定义的描述。

二、HTML中的表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

 <table border="1">
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
            <td>3</td>
            <td>2</td>
            <td>1</td>
          </tr>
        </table>

表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

 <table border="1" cellspacing="0" >
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
        </tr>
        <tr>
            <td>3</td>
            <td>2</td>
            <td>1</td>
          </tr>
        </table>

在使用过程中有查询和联系到这些东西。

使用 Cell spacing 增加单元格之间的距离。

使用 Cell padding 来创建单元格内容与其边框之间的空白。

可以使用colspan和rowspan进行列合并和行合并。

张张的宝藏

关注

10
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二天的学习！

今天实训第二天，小张和她的小伙伴们一起学习了HTML中的表格和列表（肩膀真的好痛，眼睛也痛，我做的好慢！）。一、HTML中的列表HTML 支持有序、无序和定义列表无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标..
复制链接

扫一扫