一、表格的标签及属性
1.table属性
Width、height 宽高(单位是像素或百分比)
align 对齐
border 外边框
bgcolor 背景色
background 背景图片
Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0
Cellpadding 单元格边距(表格边框与内容的距离) 一般情况写0
1.tr属性:
Align 水平对齐
left/center/ right
valign 垂直对齐
Top(上)/middle(中)/bottom(下)
bgcolor 背景色
2.td的基本属性
Width、height 宽高(单位是像素或%)
align valign 水平对齐、垂直对齐
bgcolor 背景色
background 指定背景图片
Colspan 水平合并 合并多列
rowspan 垂直合并 合并多行
3.表头th标签
是特殊的单元格,文字会自动加粗、居中。它的用法是取代的位置即可餐饮类型 | 主要菜系 | 价格 |
---|---|---|
中餐厅 | 生猛海鲜 | 1000元 |
2.密码框 密码框:主要用于输入一些保密信息,代码格式如下: 代码格式如下: 密码: 效果如下:
分组:
用户登录
3.单选框
单选框主要是让网页浏览者在一组选项里选择一个。
Name属性定义单选框的名称,单选框都是以组为单位使用的,在同一组中的选项必须使用同一名称【name=“gender”】。
代码格式如下:
性别:男
女
效果如下:
性别:男
4.复选框
复选框主要是让网页浏览者在一组选项里同时选择多个选项。
选中checked代码格式如下:【disabled="disabled"足球】
爱好:读书
听歌
阅读
效果如下:
兴趣爱好:足球
篮球球
音乐
扩展:隐藏域:
图像域:
5.文件域
文件域主要是让网页浏览者上传文件。
代码格式如下:
上传文件:
效果如下:
6.提交按钮
提交按钮用来将输入的信息提交到服务器。Value属性定义按钮的显示文字。
代码格式如下:
效果如下:
7.重置按钮
重置按钮用来重置表单中输入的信息。代码格式如下:
<input type="reset"value=“重置”/>
效果如下:
input重置按钮:
input提交按钮:
input普通按钮:
提交按钮
重置按钮
普通按钮
8.图片域
图像域标记
代码格式如下:
9.下拉列表
下拉菜单主要用于在有限的空间里设置多个选项。
下拉菜单选中状态给option添加 selected
代码格式如下:
注:Select标记的multiple属性和size属性不要求掌握。
列表框(提供多选ctrl+多选):
苹果
橙子
香蕉
西瓜
柠檬
香梨
10.文本域标记及属性
文本域主要用于输入较长的文本信息。
代码格式如下:
默认文字
效果:
Cols属性:定义文本域的宽度 (列)
rows属性:定义文本域的高度 (行)
四、HTML5新增表单控件
1.HTML5文本框及placeholder属性
当文本框处于未输入状态并且未获取光标焦点时,模糊显示输入提示文字。
代码格式如下:
效果如下:
2.HTML5文本框类型tel
提供专门用于输入电话号码的文本框。它并不限定只输入数字,因为很多的电话号码
还包括其他字符(如+ 、-、(、)等),如86-0536-8888888
代码格式如下: pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式 -->
电话号码:
电话号码:
效果如下:
3.HTML5 文本框类型 url 网址
url类型的input 元素提供用于输入url地址这类特殊文本的文本框.当提交表单时,如果所输入的内容是url地址格式的文本,则会提交数据到服务器,如果不是url地址格式的文本,则不允许提交.
代码如下:
效果如下:
4.HTML Email邮件
Email类型的input元素是一种专门用于输入e-mail地址在文本输入框,在提交表单时,会自动验证输入框的值.如果不是一个有效的e-mail地址,则该输入框不允许提交该表单.
代码如下:
<input type="email"/>
效果如下: 5.HTML5文本框类型number 数字 max最大值 min最小值 step步长 Number类型的input 元素提供用于输入数值的文本框.我们还可以设定对所接受数字的限制,包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内,则会出现错误提示。 代码如下: step(步长)属性值倍数 max最大值 min最小值 效果如下: 6.HTML5文本框类型date Date类型的日期检出器用于选取日、月、年,即选择一个具体的日期,如2016年3月4日,选择后会以2016-03-04的形式显示 代码如下: 效果如下: 7.视频和音频 您的浏览器不支持Video标签。 8. Your browser does not support this audio format.