手拉手一起学HTML(下)——表格标签和列表标签,表单标签

个人主页:bit.. 

系列专栏:Linux(Ubuntu)入门必看   C语言刷题      数据结构与算法

目录

一.表格标签

1.1表格的主要作用

1.2表格的基本语法

 1.3表头单元格标签

1.4表格属性

1.5表格结构标签

1.6合并单元格(把多个单元格合并成一个单元格)

 二.列表标签

2.1无序列表

2.2有序列表

2.3自定义列表(重点)

三.表单标签

3.1为什么需要表单

3.2表单的组成

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

3.4表单控制(表单元素)

3.4.1  input 表单元素

 3.4.2 标签

3.4.3 select 下拉表单元素

3.4.4表单元素 


  

一.表格标签

表格是实际开发中非常常用的标签:

  • 表格的主要作用
  • 表格的基本语法

1.1表格的主要作用

        表格主要用于显示,展示数据,因为他们可以让数据显示的非常规整,可读性好。

1.2表格的基本语法


    ...
    
    ...
单元格内的文字。
  1.  
    用于定义表格的标签。
  2. 标签用于定义表格的行,必须嵌套在 
    标签中。
  3. 用于定义表格中的单元格,必须嵌套在 标签中
  4. 字母td指表格数据,级数据单元格的内容。

    ...
姓名 性别

 1.3表头单元格标签

一般表头单元格位于表的第一行或第一列,表头单元格里面的文本内容加粗居中显示。

标签表示HTML表格的表头部分(table head的缩写)


        ...
    
    ...
姓名

1.4表格属性

        表格标签这部分属性我们在实际开发中不常用,后面使用CSS来设置

属性名 属性值 描述
align left,center,right 规定表格周围元素的对齐方式
border 1或者" " 规定表格是否有边框,默认值为" ",表示无边框
cellpadding 像素值 规定单元格边沿与其内容的空白,默认为1像素
cellspacing 像素值 规定单元格之间的空白默认为两像素
width/height 像素值或百分比 规定表格的宽度

1.5表格结构标签

表格的头部区域

表格的主体区域

用于定义表格的头部,内部必须有标签,一般位于第一行。
  • 用于定义表格的主体,主要用于存放数据主体。
  • 以上标签都是放在
  • 标签中。

    1.6合并单元格(把多个单元格合并成一个单元格)

    合并单元格的方法:

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

    跨行合并:clospan="合并单元格的个数"

    目标单元格:(写合并代码)

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

    合并单元格三部曲:

    1. 先确实是跨行还是跨列合并。
    2. 找到目标单元格,写上合并方式等于合并单元格数量。比如:
    3. 删除多余的单元格。 

     二.列表标签

    表格是用来显示数据的,列表就是用来布局的。

    列表最大的特点:整体,整洁,有序,他的布局更加自由和方便。

    2.1无序列表

      标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用
    • 标签定义。

      格式:

      • 列表1
      • 列表2
      • ...
      1. 无序列表的各个列表之间没有顺序级别之分,是并列的
        中只能嵌套
      2. ,直接在
        标签中输入其他标签或者文字的做法是不被允许的。
      3. 之间相当于一个容器,可以容纳所有元素 
      4. 123

      5. 无序列表会自带有自己的样式层次,但在实际使用时,我们会使用css来设置。

      2.2有序列表

              有序列表:即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。在HTML标签中,

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

        1. 列表项1
        2. 列表项2
        3. 列表项3
        4. ·····
        1.  
          中只能嵌套
        2. 直接在
            标签中输入其他标签或者文字的做法是不被允许的。
          1. 之间相当于一个容器,可以容纳所有元素。
          2. 有序列表会带有自己样式属性,但在实际使用时,我们会用css来设置。

          2.3自定义列表(重点)

          自定义列表的使用场景:

                  自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号

          名词1
          名词1解释1
          名词1解释2

           注意:

          里面只能包含

          个数没有限制,经常一个
          对应多个
          .

          三.表单标签

          3.1为什么需要表单

                  需要表单是为了收集数据。

          3.2表单的组成

                  在HTML中,一个完整的表单通常由表单域表单控件(也称为表单元素)和提示信息三个部分。

          手拉手一起学HTML(下)——表格标签和列表标签,表单标签_第1张图片

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

                  在HTML标签中,

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

          会把他范围的表单元素信息交给服务器。

          各种表单元素控件

          属性 属性值 作用
          action url地址 用于指定接受表单数据的服务器程序url地址
          method get/post 用于设置表单元素的接交方式,其取值get/post
          name 名称 用于指定表单的名称,以区分同一个页面中的多个表单域
          xxx

          3.4表单控制(表单元素)

                  在表单元素中可以定义各种各样表单元素,这些表单元素是允许用在表单中输入或者选择的内容控件。

          input 输入表单元素

          select 下拉表单元素

          text area 文本域元素

          3.4.1表单元素

                  在英文单词中,input为输入的意思,而在表单元素中标签用于收集用户信息。在标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多中形式(可以是文本字段,复选框,掩码后的文本空间,单选按钮,按钮等)

          
          
          • 标签为单标签。
          • type属性设置不同的属性值用来指定不同控件类型。
          属性值 描述
          button 定义可点击按钮(参数情况下用JavaScript启动脚本
          checkbox 定义复选框
          file 定义输入字段和浏览按钮,供文件上传
          hidden 定义影藏的输入字段
          image 定义图像形式的提交按钮
          password 定义密码字段,该字段中的字符被掩码
          radio 定义单选按钮
          reset 定义重置按钮,重置按钮会清除表单中的所有数据
          submit 定义提交按钮,提交按钮会把表单元素数据发送到服务器
          text 定义单行的输入字段,用户可以在其中输入文本,默认宽度为20个字符

           上传后台:

           例如:密码的输入

          
              
              用户名:
              密码: 
          

          单选按钮: 

          性别: 男

          除了type 属性外,标签还有其他很多属性,其常用属性如下:

          属性 属性值 描述
          name 由用户自定义 定义input元素的名称
          value 由用户自定义 规定input元素的值
          checked checked 规定此input元素首次加载时应当被选中
          maxlength 正整数 规定输入字段中的字符的最大长度
          1. name和value是每个单元表单元素有的属性值,主要给后台人员使用
          2. name表单元素的名字,要求单选按钮和复选框有相同的name值
          3. checked属性当页面打开的时候就可以默认选中的这个按钮
          4. maxlength 文本框最多输入的字符长度
          
          
          
            文件上传

           3.4.2

          标签为input元素定义标注(标签)

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

          语法:

          
          

          核心:标签的for属性应当与相关属性的id属性相同。

          3.4.3 select 下拉表单元素

                  使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用 ······

          • 通过

      你可能感兴趣的:(html和css,html,前端)