网页开发中，表格和表单是构建交互界面的基础。今天我们把表格标签、表单标签以及CSS选择器这几个核心知识点串起来，通过实际代码示例，看看它们到底怎么用、怎么配合。下面直接进入正题。

一，表格标签

向网页中加入表格，其实就是在HTML里用table标签定义结构，再用tr和td填充行和列。来看一个3行3列的表格示例，顺便演示一下合并单元格的用法。

–1，概述

 
11
 
13
21
22
23
  
31
32

–2，总结

表格相关的核心属性都在这了：

• table 标签用来表示表格
• tr 标签表示表里的一行
• td 标签表示行里的列
• border 设置边框
• cellspacing 设置单元格的间距
• bgcolor 设置背景色
• width 设置宽度
• height 设置高度
• colp 合并列
• rowp 合并行

二，表单标签

表单标签的核心作用就是提交数据。本质上，表单是在表格外面套一层form标签，通过input、select、textarea等控件收集用户输入，然后提交到服务器。先看一个完整的注册表单示例：

–1，测试

注册表单
用户名：
密码：
确认密码：
昵称：
邮箱：
性别：
男女
爱好：
篮球足球乒球
城市：
北京上海山东东北
头像：
验证码：
自我描述：
请输入自我描述~~

–2，总结

表单涉及的标签和属性整理如下：

• form标签用来提交表单里的数据
• table标签用来实现表格
• tr标签用来表示表格里的行
• td标签表示行里的列
• img标签表示插入图片
• select标签表示下拉框，option是下拉选项
• textarea标签是文本域
• input表示输入框，类型很丰富
• text类型是普通的文本输入框
• password是密码输入框
• email是邮箱的输入框
• file是上传文件
• radio是单选框
• checkbox是多选框
• button是普通的按钮
• submit是提交按钮，比button多了数据提交的功能
• align属性用来设置元素的位置center是居中
• bordercolor设置边框的颜色

–3，form提交数据

表单提交有几个关键点必须记住：

• 提交按钮必须是submit类型，否则数据不会提交。
• 需要提交的字段必须配置name属性，否则数据不会被发送。
• 提交的数据会出现在地址栏中，例如 http://127.0.0.1:8848/cgb2105/html4.html?username=1314，其中username是name属性值，1314是用户输入的值。

默认情况下表单以GET方式提交，数据会拼接在URL后面。GET方式的好处是信息直观，但缺点也明显：不安全、URL长度有限。POST方式则更安全，且对数据大小没有限制，但提交内容不会显示在地址栏。下面是一个完整的POST提交示例：

注册表单
用户名：
密码：
确认密码：
昵称：
邮箱：
性别：
男女
爱好：
篮球足球乒乒球
城市：
北京上海山东东北
头像：
验证码：
自我描述：
请输入自我描述~~

三，form表单的练习

光看不练很难掌握，下面是一个学生信息管理系统的表单练习，把刚才的要点都用上了：

学生信息管理系统MIS
姓名：
年龄：
性别：(单选框) 男女
爱好：(多选) 乒乓球爬山 唱歌
学历：(下拉框) 本科专科高中小学
入学日期： 

四，CSS

-1，概述

CSS（层叠样式表）用来修饰网页，让页面变得更美观。

-2，语法

基本语法：td{ text-align : center; }，即 选择器{ 属性名 : 属性值 ; }。

-3，入门案例

我是div1
我是div2
 
我是div3
我是div4
我是div5

五，选择器

CSS选择器是样式的“瞄准器”，常见的有三种：标签名选择器、class选择器、id选择器。下面这个例子一次性演示了三种选择器的用法：

我是div1
我是div2
我是div3
我是p1
我是p2
我是p

总结

本篇文章就到这里，希望能给你带来帮助。