前端基础:HTML表格标签、无序列表、自定义列表

目录 

1. 表格标签

1.2 基本语法

 1.2 表头单元格标签

1.2.1 表头单元格语法

1.3 表格属性

 1.3 表格结构标签

 1.4 合并单元格

1.4.1  合并单元格的方式

1.4.2 目标单元格

1.4.3 合并单元格三步骤

 2. 列表标签

2.1 无序列表(重点)

2.1.1 基本语法

2.2 有序列表(了解)

2.3 自定义列表(重点)

 2.3.1 自定义标签语法


1. 表格标签

表格主要是用来显示、展示数据的,一个好的表格可以把繁杂的数据整理的有条理。

1.2 基本语法

        

                

                        …

        

        …

表格里的文字

标签 描述
和表格主体两大部分,使结构清晰化。在实际开发中会经常使用。

前端基础:HTML表格标签、无序列表、自定义列表_第3张图片

 1.4 合并单元格

1.4.1  合并单元格的方式

  • 跨行合并:rowspan=“合并单元格个数”
  • 跨列合并:colspan=“合并单元格个数”

前端基础:HTML表格标签、无序列表、自定义列表_第4张图片

1.4.2 目标单元格

  • 跨行:最上方单元格为目标单元格,写合并单元格
  • 跨列:最左侧单元格为目标单元格,写合并单元格

1.4.3 合并单元格三步骤

  1. 确定合并方式(跨行还是跨列)
  2. 找目标单元格,写合并单元格数量。例如:
  • 删除多余单元格
  • 以上面的表格为例,我们先要合并第一行的二三个单元格

    
    
    
    
        
        
        
        Document
    
    
    
        
    定义表格的标签
    表格中的行,必须放在里里
    单元格的内容,必须放在

     1.2 表头单元格标签

    标签(table head缩写)表示表格的表头部分。它一般位于表格的第一行第一列,单元格里的内容加粗居中显示,达到突出显示的作用。

    1.2.1 表头单元格语法

            

                    

                            …

            

            …

    姓名

    1.3 表格属性

    在实际开发中不常用,后面用css设置,但是要记住这些属性,在后期的css学习中会使用。

    属性名 属性值 描述
    align left、center、right 表格对齐方式
    border 1或者 “ ” 是否有边框,默认值为无边框
    cellpadding 像素值 单元格边缘与内容之间的空白,默认1像素
    cellspacing 像素值 单元格之间的空白,默认2像素
    width 像素值或者百分比 表格的宽度

     前端基础:HTML表格标签、无序列表、自定义列表_第1张图片

    注意:这些属性要写到table标签里面

    
    
    
    
        
        
        
        Document
    
    
    
        
    姓名 班级 学号
    小米 1班 0122

    前端基础:HTML表格标签、无序列表、自定义列表_第2张图片

     1.3 表格结构标签

    因为表格会比较多,可以把表格分为表格头部

    姓名 班级
    小米 1班 0122

    前端基础:HTML表格标签、无序列表、自定义列表_第5张图片

     2. 列表标签

    列表主要是用来布局的,它最大的特点是整齐、整洁、有序。

    列表主要分为三大类:无序列表、有序列表、自定义列表

    2.1 无序列表(重点)

    2.1.1 基本语法

     

             

    • 列表项
    •        

    • 列表项
    •        

    • 列表项
    •    

    
    
    
    
        
        
        
        Document
    
    
    
        

    你喜欢吃什么食物?

    • 奶茶
    • 冰淇淋
    • 炸鸡

    前端基础:HTML表格标签、无序列表、自定义列表_第6张图片

     注意:

    1. 列表项之间无等级之分,它们是并列的;
    2. ul只能嵌套li,ul里面不能放其他标签或者文字;
    3. li相当一个容器,可以容纳所有元素
    4. 无序列表都有自己的属性,在实际开发中用css设置

    2.2 有序列表(了解)

     

             

    1. 列表项
    2.        

    3. 列表项
    4.        

    5. 列表项
    6.    

     前端基础:HTML表格标签、无序列表、自定义列表_第7张图片

     注意:

    1. ol只能嵌套li,ol里面不能放其他标签或者文字;
    2. li相当一个容器,可以容纳所有元素
    3. 有序列表都有自己的属性,在实际开发中用css设置

    2.3 自定义列表(重点)

    用于对术语或者名词解释或者描述,如下下效果的实现需要用到自定义列表。

    前端基础:HTML表格标签、无序列表、自定义列表_第8张图片

     2.3.1 自定义标签语法

       

           

    名词

           

    解释名词1

           

    解释名词2

       

    注意:

    1. 里面只包含
    2. 没有限制,经常是一个
      对应多个

    你可能感兴趣的:(HTML,html,前端,vscode,visual,studio,code)