会涉及关于表格、表单、列表的讲解
表格:显示数据
表单:获取用户数据
列表:控制布局
一、表格
主要用于数据展示
1.1 创建表格
我是单元格1 | 我是单元格2 |
table、tr、td,他们是创建表格的最基本标签,具体地解释:
table用于定义一个表格。
tr 定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。
td 定义表格中的单元格,必须嵌套在
标签中,一对 中包含几对,就表示该行中有多少列(或多少个单元格)。注意:
中只能嵌套 类的单元格标签,他就像一个容器,可以容纳所有的元素1.2常用属性
属性名称
含义
值
border
表格边框
像素
cellspacing
单元格之间的间隔
像素
cellpadding
单元格边框与内容的间隔
像素
width
表格宽度
像素
height
表格高度
像素
align
表格的水平居中方式
left、center、right
rowspan
跨行合并
单元格数量
colspan
跨列合并
单元格数量
1.3所有标签
定义表格单元。 |
1.4单元格合并
1. 确定目标单元格位置
目标单元格的位置,原则为上边的单元格优先级大于下边的单元格优先级,左边的单元格优先级大于右边的优先级。
2. 确定合并方式
根据合并方向,在目标单元格确定合并方式为跨行或者跨列。
3. 删除多余的单元个
删除数量=合并数量-1
1.5 表格注意
表格一般用于数据展示,布局不是一个好的方案。
表格中没有列元素,列的数量取决于单元格的数量。
二、列表
主要用于页面布局,与表格类似但更加灵活,自由度更高。
2.1 无序列表ul
语法:
- 列表项1
- 列表项2
- 列表项3
注意:
与之间相当于一个容器,可以容纳所有元素2.2 有序列表ol
语法:
- 列表项1
- 列表项2
- 列表项3
......
2.3自定义列表
语法:
-
联系我
- 手机
- 电话
三、表单
HTML 表单用于搜集不同类型的用户输入。
3.1 表单的构成
表单一般由三部分构成:表单控件(input)、表单域(form)、提示信息。
3.2 表单控件
常用的表單控件包括4種,input系列、laber、textarea、select。
1)input系列控件
input标签中通过type属性实现不同的控件。
控件如下:
type属性值
描述
text
单行文本框
password
密码输入框
radio
单选按钮
checkbox
复选框
button
普通按钮
submit
提交按钮
reset
重置按钮
image
图片按钮
file
文件域
注意:
如果想实现单选框效果,必须要设置名称且相同。
2)textarea控件
用于留言的多行文本输入。
语法:
文本内容
3)laber控件
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
表现为:在一些输入如:单选框、文本框等,点击控件前的文本就可以获得焦点。
用法一:全局使用
male
用法二:分开绑定
Male
4)select控件
多个选项让用户选择,为了节约空间,可以使用select控件定义下拉菜单.
选项1
选项2
选项3
选择默认属性:
...
选项1
...
3.3表单属性
属性名称
属性值
属性描述
type
上表所示
选择控件类型
name
自定义
控件名称
value
自定义
默认文本值
size
正整数
控件的显示宽度
checked
checked
控件的默认选中项目
maxlength
正整数
控件允许输入的最大字数
1)type属性
用户名:
密 码:
3)name属性
用户名:
男
女
4)checked属性
性 别:
男
女
3.4 表单域
在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。
各种表单控件
常用属性
action:用于指定接收并处理表单数据的服务器程序的url地址。
method:用于设置表单数据的提交方式,其取值为get或post。
name:用于指定表单的名称,以区分同一个页面中的多个表单。
四、资料