您现在的位置是:首页 > 正文

html基础之表格表单

2024-02-29 16:24:08阅读 0

一、表格:统计数据、展示数据

1.

表格标签:table->tr

      行标签:tr->td

      单元格:td

2.

表格的特点:

          1、默认是没有边框的

          2、添加边框属性后,有默认的边框与边框之间的距离

3.

表格的属性:

          1、border:边框

          2、cellspacing:边框与边框之间的距离

          3、cellpadding:内容与边框之间的距离

          4、align:水平位置   left/right/center

          5、width:宽

          6、height:高

4.

表格的结构:

          表格标题 caption

          表头:thead    将td换成th : 有自动加粗居中的效果

          表格主体:tbody

          表尾:tfoot (由于浏览器的兼容性,后期再说)

    表格的注意事项

          table标签中只能包含caption/thead/tbody/tfood/tr

       5.

合并单元格的步骤

          1、先确定是跨行合并还是跨列合并

          2、跨行合并用rowspan,跨列合并用colspan属性

          3、将合并属性写在要合并的第一个单元格上

          4、属性值就是合并的单元格个数

          5、将多余的单元格注释掉

二、表单:用来验证数据、提交数据

1.

表单的组成部分

          1、表单标签  form

              action:表单提交的地址

              method:表单提交的方式

              name:没有特殊含义,给表单起个名字

          2、表单域

              a、普通输入框: <input type="text">

              b、密码框:<input type="password">

              c、单选框:<input type="radio">

              d、多选框:<input type="checkbox">

              e、选择框:<select><option>

              f、多行文本框:<textarea>

              g、重置按钮:<input type="reset">

              h、普通按钮:<input type="button">

          3、提交按钮

              <input type="submit">

2.

表单域中的属性

            type:类型,当input控件的type的属性值不同时,显示不一样的效果

            value:输入框或者按钮的默认的值

            name:名字

            checked:单选框、多选框的默认选中

              checked

            selected:选择框的默认选中

              selected

            cols:宽度

            rows:高度

            disabled:按钮禁用属性

              disabled

三、H5新增的结构化语义化元素

头部区域标签<header> </header>

导航标签<nav> </nav>

侧导航标签<section> </section>

文章标签<article> </article>

区间标签<section> </section>

进度条progress

底部区域标签<footer> </footer>

四、H5新增的表单属性

1.

<fieldset> 标签可以将表单内的相关元素分组。

<fieldset> 标签会在相关表单元素周围绘制边框。

<legend>标签中文本会在边框的左上角显示。

2.

新增的属性:

        1、placeholder 占位符  提示信息

        2、autofocus    页面加载完成后,自动的获取某个输入框的焦点 (只写属性即可)

        3、required:验证条件,必填项(只写属性即可)在提交表单的时候验证

        4、novalidate :关闭表单域中所有的验证,用于表单元素

        5、maxlenth:最大长度

        6、minlenth:最小长度

网站文章

  • java中北大学ppt总结+课后习题第四章(小宇特详解)

    java中北大学ppt总结+课后习题第四章(小宇特详解)

    java中北大学ppt总结+课后习题第四章(小宇特详解) 继承 子类与父类 继承是根据现有类创建新的类的机制,由继承而得到的新类称为子类(subclass)或派生类(derived class),被继...

    2024-02-29 16:23:39
  • 194. Spring Boot 数据库迁移:Flyway 热门推荐

    194. Spring Boot 数据库迁移:Flyway 热门推荐

    【视频&amp;交流平台】à SpringBoot视频:http://t.cn/R3QepWGà SpringCloud视频:http://t.cn/R3QeRZcà Spring Boot源码:ht...

    2024-02-29 16:23:30
  • 7.外观模式C++用法示例

    7.外观模式C++用法示例

    外观模式中定义一个外观类,它封装了子系统的复杂性,并提供了一个简单的接口,以方便客户端访问子系统;外观模式(Facade Pattern)是一种结构型设计模式,它提供了一个简单的接口,隐藏了一个或多个...

    2024-02-29 16:23:23
  • 【fabric】测上链与查询时间

    【fabric】测上链与查询时间

    今天又不行了所以又百度了一下https://blog.csdn.net/lakersssss24/article/details/118369300用这个博主的方法,解决“Error: error g...

    2024-02-29 16:22:55
  • JAVA多线程的初级认识2-线程安全性

    JAVA多线程的初级认识2-线程安全性

    线程安全性是一个麻烦的难题~从而造成了多线程代码的难写的重要原因。那就从物理和JMM两个层面去了解安全性是如何出现问题的。 物理层面 由于计算机设备的计算能力不均,大致可分为,IO设备 < 内存 < CPU,由于计算能力相差太大。导致很多的地方需要用到缓存,大致的缓存模型如下:一级缓存L1:包含数据缓存和指令缓存二级缓存L2: 各个CPU私有三级缓存L3:...

    2024-02-29 16:22:47
  • C语言(十七)链表

    一、算法        通俗定义:            解题的方法和步骤        狭义定义:            对存储数据的操作            对不同的存储结构,要完成某一个功能所执行的操作时不一样的            比如:               要输出数组中所有的元素的操作和               要输出数组中所有元...

    2024-02-29 16:22:32
  • AI 时代,程序员无需焦虑

    AI 时代,程序员无需焦虑

    当一个问题被明确并拆解到软件项目维度的时候,面对确定的任务、清晰的目标、合理的架构,可以解决问题的人就非常多了,AI 自然也才有用武之地。大型软件系统,本身往往具有较高的复杂度。如果把你放到陌生的小区...

    2024-02-29 16:22:24
  • windows10文件服务器,windows10文件服务器

    windows10文件服务器,windows10文件服务器

    windows10文件服务器 内容精选换一换华为云帮助中心,为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档,帮助您快速上手使用华为云服务。本文以云...

    2024-02-29 16:21:56
  • Linux常用150个命令

    常用Linux操作做指令

    2024-02-29 16:21:48
  • python的__name__属性详解

    python的__name__属性详解

    有关文件导入: 一个独立的python文件就是一个模块 在导入文件时,文件中 所有没有任何缩进的代码都会被执行一遍 在实际开发中,开发人员通常会在模块下方增加一些测试代码,测试代码是仅在模块内使用,而被导入到其他文件中不需要执行 这里就需要知__name__属性 __name__属性可以做到,测试模块的代码只在测试情况下被运行,而在被导入时不会被执行 __name__时python的一个内置...

    2024-02-29 16:21:41