列表和表格table

最新推荐文章于 2023-07-27 19:56:42 发布

helloses

最新推荐文章于 2023-07-27 19:56:42 发布

阅读量285

点赞数

分类专栏：前端 html 文章标签： html5 intellij-idea

本文链接：https://blog.csdn.net/lm12032015/article/details/123599644

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

列表

li可以放在所有地方,默认效果是:实心黑心列表
放在列表中就成为了列表子标签
列表分为有序列表ol,无序列表ul和自定义列表dl
dl专属列表子标签dd(没有前置符),和dt(title,可以做列表头,会将内容向前提前一个tab位置)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

  <li>默认效果是实心黑心列表</li>
<!-- ======================================== -->
<hr>

  <ol>
    有序列表
    <dt>dt</dt>

    <li>li</li>
    <li>li</li>
  </ol>

<hr>
<!-- ======================================== -->
  <ul>
    无序列表
    <li>li默认是实心黑心点</li>
    <li>2</li>

    <dl>dl</dl>

  </ul>

<hr>
<!-- ======================================== -->
  <dl>
    自定义列表

    <dt>标题</dt>

    <li>li</li>

    <dd>dd</dd>
    <dd>dd</dd>

  </dl>
<!-- ======================================== -->
</body>
</html>

运行结果

表格table

th标题,自动加粗
tr(row)行,td(列,d是data的意思)
rowspan和colspan用来合并行或列
设置border后可以看到表格框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    
  <table border="1px">
    <th colspan="2">标题,会自动加粗</th>
    <tr>
      <td>1</td>
      <td rowspan="2">合并两行</td>
    </tr>
      
<!-- ===================================== -->
    
    <tr>
      <td>1</td>
    </tr>
      
<!-- ===================================== -->
 
      
    <tr>
      <td colspan="2">合并两列</td>
    </tr>

  </table>

</body>
</html>

table

helloses

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
列表和表格table

1. li可以放在所有地方,默认效果是:实心黑心列表2. 放在列表中就成为了列表子标签3. 列表分为有序列表ol,无序列表ul和自定义列表dl4. dl专属列表子标签dd(没有前置符),和dt(title,可以做列表头,会将内容向前提前一个tab位置)
复制链接

扫一扫