HTML学习记录(二):表格、列表标签 ｜ 青训营笔记

化尘成影
120 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第二天

写在前面

以下是我学习HTML过程中的一些HTML的标签的学习笔记记录,主要目的是用于巩固基础知识
内容包含HTML基本标签里面的表格、列表标签

表格标签

  • 基本概述

    • 作用：顾名思义，就像一个表格一样，它把页面分成行与列，内容在单元格内展示，使排版更加整齐

    • 相关语法举例：

      <body>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
        <tr>
            <th>姓名</th><th>性别</th><th>年龄</th>
        </tr>
        <tr>
            <td>张三</td><td>男</td><td>25</td>
        </tr>
        <tr>
            <td>李四</td><td>女</td><td>23</td>
        </tr>
        <tr>
            <td>王五</td><td>男</td><td>26</td>
        </tr>
    </table>
</body>

    • 相关属性：

      属性名属性值描述
      alignleft,right,center用来规定表格内元素的对齐方式
      border1/""用来规定表格单元格是否有边框，""表示没有(默认)，1表示有
      cellpaddingpx用来规定单元格边距与其内容之间的空白，默认为1px
      cellspacingpx用来规定单元格之间的空白，默认为2px
      widthpx/%用来规定表格的宽度
  • 语义化标签
    • 表头单元格标签
      • 语法格式：<th> 内容 </th>
      • 作用：表示表格的头部单元格，字体会居中且加粗显示
    • 表格结构标签
      • 头部区域：<thead> 内容 </thead>
      • 主体区域：<tbody> 内容 </tbody>
      • 作用：对表格的头部区域和主体内容区域的一种划分
  • 合并单元格

    • 跨行合并：rowspan="合并单元格的个数"

      • 以最上侧单元格为目标单元格

    • 跨列合并：colspan="合并单元格的个数"

      • 以最左侧单元格为目标单元格

    • 代码举例：

      <table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
    <tr>
        <th></th><th colspan="2"></th>
    </tr>
    <tr>
        <td rowspan="2"></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
</table>

    • 结果截图

      image.png

表格标签

  • 概述：在开发中，我们想要内容有规整的自上而下的展示效果，或者想表示内容的主从的关系，我们可以用到列表标签

  • 无序列表

    • 内容展示没有先后顺序要求，不分排名，可用与侧边栏选项的布局
    • 语法格式 
      <ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   ...
</ul>

  • 有序列表

    • 内容有明显的先后顺序要求，可用于展示排名
    • 语法格式 
      <ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

  • 自定义列表

    • 内容具有明显的主从关系
    • 语法格式 
      <dl>
    <dt>主题
    <dd>主题内容1</dd>
    <dd>主题内容2</dd>
</dl>

写在最后

以上便是我的一些学习笔记，若有不足，欢迎指出

avatar
文章
阅读
粉丝