axiu呀
axiu呀

跟着pink老师前端入门教程-day03

6. 表格标签

6.1 表格的主要作用

主要用于显示、展示数据，可以让数据显示的规整，可读性非常好，特别是后台展示数据时，能够熟练运用表格就显得很重要。

6.2 基本语法

    
    

        
        

            姓名
            性别
            年龄

6.3 表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示，突出重要性

标签标识HTML表格的表头部分（table head的缩写）

    

        
        

            姓名
            性别
            年龄

6.4 表格属性

表格属性要写到表格标签table里面

跟着pink老师前端入门教程-day03_第1张图片

跟着pink老师前端入门教程-day03_第2张图片

6.5 表格结构标签

表格过长时，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分，都存放在

：表格的头部，其内部必须要有标签，一般是位于第一行

：表格主体，主要用于放数据本体

跟着pink老师前端入门教程-day03_第3张图片

6.6 合并单元格

1. 合并单元格方式

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”

跟着pink老师前端入门教程-day03_第4张图片

2. 目标单元格（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码

跟着pink老师前端入门教程-day03_第5张图片

3. 合并单元格的步骤

确定跨行还是跨列

找到目标单元格：写合并方式=合并的单元格数量

删除多余的单元格

跟着pink老师前端入门教程-day03_第6张图片

7. 列表标签

表格是用来显示数据的，而列表是用来布局的，列表的最大特别：整齐整洁有秩序、作为布局会更加自由和方便

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表

7.1 无序列表（重点）

    标签标识HTML页面中项目的无序列表，一般会以项目符号成仙咧表现，而列表现使用
  • 标签定义
跟着pink老师前端入门教程-day03_第7张图片
注意：
1. 无序列表的各个列表项之间没有顺序级别之分，是并列的
2.
    中只能嵌套
  • ，直接在
      标签中输入其他标签或文字的做法是不被允许的
      3.
    • 之间相当于一个容器，可以容纳所有元素
      4. 无序列表会带有自己的样式属性，但在实际使用时是通过CSS来设置
      应用：侧边导航栏

      7.2 有序列表（理解）

      有序列表即为排列顺序的列表，其各个列表项会按照一定的顺序排列来定义

      在HTML标签中，

        标签用于定义有序列表，列表排序以数字来显示，并使用
      1. 标签来定义列表项

        跟着pink老师前端入门教程-day03_第8张图片

        注意：

        1.

          中只能嵌套
        1. ，直接在
            标签中输入其他标签或文字的做法是不被允许

            2.

          1. 之间相当于一个容器，可以容纳所有元素

            3. 有序列表会带有自己的样式属性，但在实际使用时是通过CSS来设置

            7.3 自定义列表（重点）

            使用场景：用于对术语或名词进行解释和描述，定义列表的列表前没有任何项目符号

            在HTML标签中，

            标签用于定义描述列表（或定义列表），该标签会与
            （定义项目/名字）和
            （描述每一个项目/名字）一起使用

            跟着pink老师前端入门教程-day03_第9张图片

            注意

            1.

            只能包含
            和

            2.

            和
            个数没有限制，经常是一个
            对应多个

            应用：底部导航栏

            7.4 列表总结

            跟着pink老师前端入门教程-day03_第10张图片

            注意

            1. 遇到上面是一个标题，下面有几个围绕该标题说明的，就用自定义列表

            2. 排列整齐，没有顺序，就用无序列表

            8. 表单标签

            使用表单目的是收集用户信息

            8.1 表单的组成

            在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

            跟着pink老师前端入门教程-day03_第11张图片

            8.2 表单域

            表单域是一个包含表单元素的区域

            在HTML标签中，

            标签用于定义表单域，以实现用户信息的收集和传递

            会把它范围内的表单元素信息提交给服务器

                
            表单域
            
    
        各种表单元素空间

            跟着pink老师前端入门教程-day03_第12张图片

            8.3 表单控件（表单元素）

            1. input输入表单元素

            在英文单词中，input是输入的意思，而在表单元素中标签用于收集用户信息

            在标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本、复选框、掩码后的文本控件、单选按钮、按钮等）

             type属性设置不同的属性值用来指定不同的控件类型：

            跟着pink老师前端入门教程-day03_第13张图片

            除type属性外，标签还有很多属性：

            跟着pink老师前端入门教程-day03_第14张图片

             1. name和value是每个表单元素都有的属性值，主要给后台人员使用

            2. name表单元素的名字，要求单选按钮和复选框要有相同的name值

            3. checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素

            4. maxlength是用户可以在表单元素输入的最大字符数，一般较少使用

                
            
        
        
        
        用户名：
            
        
        密码：
            

        
        
        
        性别：男  女 
        人妖
            
        

        爱好：吃饭  睡觉  打豆豆
            

        
        
        
            

        
        
        
            

        
        
        
            

        
        上传文件：

             注意：

            1、有些表单元素想刚打开页面就默认显示几个文字怎么做?

            答: 可以给这些表单元素设置 value 属性=“值” 
            用户名:

            2、页面中的表单元素很多，如何区别不同的表单元素?

            答: name 属性：当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单。页面中的表单很多，

            name 的主要作用就是用于区别不同的表单。 

            用户名:

            name 属性后面的值，是自定义的 

            radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字 

            男
女
            3、 如果页面一打开就让某个单选按钮或者复选框是选中状态?
            答: checked 属性：表示默认选中状态。用于单选按钮和复选按钮。 
            性 别:
男
女
            4、如何让input表单元素展示不同的形态? 比如单选按钮或者文本框
            答: type属性：type属性可以让input表单元素设置不同的形态. 
            男
            2. 标签

            标签为input元素定义标注（标签）

            标签用于绑定一个表单元素，当点击

            核心：

            3. select下拉表单元素

            使用场景：在页面中，有多个选项让用户选择，并且想要节约页面空间时，可以使用中至少包含一对

            在

            4. textarea文本域元素

            使用场景：当用户输入内容较多的情况下，可以使用

            跟着pink老师前端入门教程-day03_第16张图片

            注意

            1. 通过