Web前端笔记 -- HTML③

网友投稿 248 2022-11-30

Web前端笔记 -- HTML③

文章目录

​​表格标签​​

​​表格的主要作用​​​​表格的基本语法​​​​表头单元格标签​​​​表格属性​​​​表格结构标签​​​​合并单元格​​

​​列表标签​​

​​无序列表​​​​有序列表​​​​自定义列表​​​​列表总结​​

​​表单标签​​

​​为什么需要表单​​​​表单的组成​​​​表单域​​​​表单控件​​

​​< input> 表单元素​​​​< label> 标签​​​​< select> 表单元素​​​​< textarea> 表单元素​​

​​表单元素几个总结点​​

表格标签

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

表格的主要作用表格的基本语法表头单元格标签表格属性表格结构标签合并单元格

表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

表格不是用来布局页面的,而是用来展示数据的

表格的基本语法

... ...
单元格内的文字

是用于定义表格的标签。 标签用于定义表格中的行，必须嵌套在
标签中。 用于定义表格中的单元格，必须嵌套在标签中。字母 td 指表格数据（table data），即数据单元格的内容。

表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示. 标签表示 HTML 表格的​​​表头部分​​(table head 的缩写)

... ...
姓名

例如：

表头单元格也是单元格, 常用于表格第一行, 突出重要性, 表头单元格里面的文字会加粗居中显示.

表格属性

表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置. 目的有2个:

记住这些英语单词,后面 CSS 会使用.直观感受表格的外观形态

表格结构标签

使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分.

在表格标签中，分别用：标签 表格的头部区域、标签 表格的主体区域. 这样可以更好的分清表格结构。

例如：

注意：

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

标签中。

注意：只是为了更好的表示表格的语义，没有实际的变化

合并单元格

特殊情况下,可以把多个单元格合并为一个单元格，此处介绍一个最简单的方法

合并单元格方式：

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

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

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

合并单元格三步曲：

先确定是跨行还是跨列合并。找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：。删除多余的单元格。

列表标签

表格是用来显示数据的，那么列表就是用来布局的。 列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。 根据使用情景不同，列表可以分为三大类：

无序列表有序列表自定义列表

无序列表

    标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用
  • 标签定义。 无序列表的基本语法格式如下：

    • 列表项1
    • 列表项2
    • 列表项3
      • ...

    注意：

    无序列表的各个列表项之间没有顺序级别之分，是并列的。

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

        有序列表

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

          标签用于定义有序列表，列表排序以数字来显示，并且使用
        1. 标签来定义列表项。 有序列表的基本语法格式如下：

          1. 列表项1
          2. 列表项2
          3. 列表项3
            4. ...

          注意：

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

              自定义列表

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

              例如：

              在 HTML 标签中，

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

              其基本语法如下：

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

              注意：

              里面只能包含
              和
              。
              和
              个数没有限制，经常是一个
              对应多个
              。

              列表总结

              表单标签

              现实中的表单，我们去银行办理信用卡填写的单子。

              网页中的表单展示：

              为什么需要表单

              使用表单目的是为了收集用户信息。 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

              表单的组成

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

              表单域

              表单域是一个包含表单元素的区域。 在 HTML 标签中，

              标签用于定义表单域，以实现用户信息的收集和传递。 会把它范围内的表单元素信息提交给服务器

              各种表单元素控件

              常用属性：

              表单控件

              在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。 接下来我们讲解:

              input输入表单元素select下拉表单元素textarea 文本域元素

              < input> 表单元素

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

              注意：

              标签为单标签type 属性设置不同的属性值用来指定不同的控件类型

              type 属性的属性值及其描述如下：

              除 type 属性外，标签还有其他很多属性，其常用属性如下：

              注意：

              name 和value 是每个表单元素都有的属性值,主要给后台人员使用.name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

              相关问题： ①有些表单元素想刚打开页面就默认显示几个文字怎么做? 答: 可以给这些表单元素设置 value 属性=“值”

              用户名:

              ②页面中的表单元素很多，如何区别不同的表单元素？ 答: name 属性：当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单。页面中的表单很多，name 的主要作用就是用于区别不同的表单。

              用户名:

              name 属性后面的值，是自定义的 radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字

              男女

              ③如果页面一打开就让某个单选按钮或者复选框是选中状态? 答: checked 属性：表示默认选中状态。用于单选按钮和复选按钮

              性 别:男女

              ④如何让input表单元素展示不同的形态? 比如单选按钮或者文本框 答: type属性：type属性可以让input表单元素设置不同的形态.

              男

              < label> 标签

              核心：

              < select> 表单元素

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

              注意：

              注意：

              通过

              有三个名字非常相似的标签:(1) 表单域 form 使用场景: 提交区域内表单元素给后台服务器(2) 文件域 file 是input type 属性值 使用场景: 上传文件(3) 文本域 textarea 使用场景: 可以输入多行文字, 比如留言板 网站介绍等…

              版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

          标签：文字 输入 属性 文件 数据
          上一篇:java 算法 6种排序小结
          下一篇:Web前端笔记 -- CSS③
          相关文章

           发表评论

          暂时没有评论，来抢沙发吧~