小男孩儿长大了
小男孩儿长大了

第三节

一、表格元素

1、table元素的基础元素组成

一个可选的 元素

一个可选的 元素

下列任意一个:

零个或多个

零个或多个

零个或多个

零个或多个

一个可选的 元素

2、table的基础使用

table是表格的最外层

caption：  展示一个表格的标题， 它常常作为

的第一个子元素出现，同时显示在表格内容的最前面

tr就是表格的每一行

th表示表头单元格 默认居中和加粗

td表示普通单元格

   

    table

   

       

       

           

           

           

       

       

           

           

           

       

       

           

           

           

       

       

           

           

           

       

       

           

           

           

       

   

1206班就业表
姓名 就业薪资 备注
小王 15
老王 14
王中王 14
大王 18

效果：

一个简单表格：

语文 数学 外语
100 100 100
100 100 100

3、table的常用属性

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table

border：（废弃）

使用像素，定义了表格边框的大小如果设置为1，表示表格具有1px大小的边框。

cellpadding ：（废弃）

这个属性定义了表格单元的内容和边框之间的空间。如果它是一个像素长度单位，这个像素将被应用到所有的四个侧边

cellspacing ：（废弃）

这个属性（使用百分比或像素）定义了两个单元格之间空间的大小（从水平和垂直方向上）

width ：（废弃）

该属性定义了表格的宽度。宽度可能是一个像素或者是一个百分比值，宽度的百分比值将被定义为表格容器的宽度。

   

    table

   

       

       

           

           

           

       

       

           

           

           

       

       

           

           

           

       

       

           

           

           

       

       

           

           

           

       

   

1206班就业表
姓名 就业薪资 备注
小王 12
老王 13
王中王 14
大王 15

效果：

4、合并单元格

colspan:设置跨列，谁合并，给谁设置

rowspan：设置跨行,谁合并，给谁设置

 

  table

 

   

   

     

     

     

   

   

     

     

     

   

   

     

     

     

   

   

     

     

     

   

   

     

     

     

   

 

1206班就业表
姓名 就业薪资 备注
小王 12
老王 13
王中王
大王 15

5、table样式

合并边框线：border-collapse:collapse

宽度平均分布：table-layout：fixed （前提：table 要写宽度）

 

  table

 

 

   

   

     

     

     

   

   

     

     

     

   

   

     

     

     

   

   

     

     

     

   

   

     

     

     

   

 

1206班就业表
姓名 就业薪资 备注
小王 12
老王 13
王中王 14
大王 15

效果：

二、表单元素

表单在网页中就是将本地数据提交给远程的服务器

使用form标签来创建一个表单：

1、form元素

为用户创建html表单

表单可以向服务器发送数据

form标签中可以包含很多表单元素

action属性：

表单提交的地址

2、表单的提交

表单提交需要在表单中书写提交按钮。

提交按钮可以是 或

提交按钮只会提交当前按钮所在的form表单中的内容 如果没有form标签，表单提交失效

3、html表单的类型

input：type类型的值不一样，呈现的状态也是不一样的

text：单行文本输入框没有长度和内容限制，只能输入一行，明文显示

password：密码输入框 默认把输入的内容呈现出小黑点

radio：单选框 书写name属性后，相同name的可视为一组，即可实现单选功能，应该书value                 值，是向后台提供的数据。

checkbox：多选框

button:  单纯的按钮，没有任何作用和功能，只是长了按钮的样子。

reset:  重置按钮 当重置按钮被点击，就会重置当前reset所在的表单，变成默认的状态

submit：提交按钮 input标签的type类型是submit代表提交， value是按钮显示的内容 。提交按                    钮只会提交当前按钮所在的form表单中的内容 如果没有form标签，表单提交失效。

   

    form标签


   

        请输入用户名：

       

       


        请输入密码：

       

       

        请选择性别：

        男：

        女：

        未知：

       


        选择你最喜欢的语言：

        PHP：

        JAVA：

        JS：

        HTML：

       

        请上传你的照片：

       

       

       

       

       

       


       

   

4、input属性

属性：placeholder 提示文字

属性：autofocus 自动获取焦点

属性：required 校验（非空）

属性：checked （input的默认选中）

属性：autocomplete：on/off 开启/关闭自动补全（如果要关闭所有的则写在form上即可）

属性：readonly  只读 提交数据

属性：disabled  禁用 不提交数据

5、其他表单元素