跟着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. 通过