知方号

知方号

table表格及属性<表格table的属性>

table表格及属性

一、 表格的标签及属性

table属性 Width、height 宽高(单位是像素或百分比) align 对齐 border 外边框 bgcolor 背景色 background 背景图片 Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0 Cellpadding 单元格边距(表格边框与内容的距离) 一般情况写0

tr属性: Align 水平对齐 left/center/ right valign 垂直对齐 Top(上)/middle(中)/bottom(下) bgcolor 背景色

td的基本属性 Width、height 宽高(单位是像素或%) align valign 水平对齐、垂直对齐 bgcolor 背景色 background 指定背景图片 Colspan 水平合并 合并多列 rowspan 垂直合并 合并多行

表头th标签

是特殊的单元格,文字会自动加粗、居中。它的用法是取代的位置即可 餐饮类型主要菜系价格中餐厅生猛海鲜1000元 表格主体tbody标签 T head 表格页眉(头部)只能出现一次 T body 表格主体可以出现多次 T foot 表格页脚(结尾)只能出现一次 以上三个标签结合使用,可将表格中的一行或几行合成一组 ….….…. 二、 表单属性 1. 表单的概念 表单在网页中主要负责数据采集功能,表单的标记是: 2. 表单的属性 1. action属性:设置表单的提交地址(表单提交的url)指定表单提交后由服务器上的哪个处理程序进行处理 2 method属性:设置表单的提交方法, 属性值为get、post提交方式 3 name属性:设置表单的名称 4 target属性:设置表单的打开方式, 属性值可以是_blank、_self。_self在原窗口中打开,为默认值。_blank 在新窗口打开 3. enctype:默认编码 或者指定二进制流 【附件的提交形式】 4. method的值为get:它是通过URL来传递表单数据的,表单元素的数据在地址栏可见,而且有大小限制,传数据量小一般不大于2KB method的值为post:它是通过请求正文传递表单数据的,URL不可见表单元素数据,比较安全,而且没有大小限制,但往往服务器会控制 3. 输入标记 表单元素中输入标签是,常用属性有type(类型)、name(名称)、value(值)、checked(默认选中) 三、 HTML常用表单控件 1. 文本框 文本框:主要用于输入单行文本内容。代码如下: 代码格式如下: 姓名: 效果如下: 账号: 2. 密码框 密码框:主要用于输入一些保密信息,代码格式如下: 代码格式如下: 密码: 效果如下:

分组: 用户登录 3. 单选框 单选框主要是让网页浏览者在一组选项里选择一个。 Name属性定义单选框的名称,单选框都是以组为单位使用的,在同一组中的选项必须使用同一名称【name=“gender”】。 代码格式如下: 性别:男 女 效果如下:

性别:男

复选框 复选框主要是让网页浏览者在一组选项里同时选择多个选项。 选中checked代码格式如下:【disabled="disabled"足球】 爱好:读书 听歌 阅读 效果如下: 兴趣爱好:足球 篮球球 音乐 扩展:隐藏域: 图像域:文件域 文件域主要是让网页浏览者上传文件。 代码格式如下: 上传文件: 效果如下: 提交按钮 提交按钮用来将输入的信息提交到服务器。Value属性定义按钮的显示文字。 代码格式如下: 效果如下:重置按钮 重置按钮用来重置表单中输入的信息。代码格式如下: 效果如下: input重置按钮: input提交按钮: input普通按钮: 提交按钮 重置按钮 普通按钮 图片域 图像域标记 代码格式如下: 下拉列表 下拉菜单主要用于在有限的空间里设置多个选项。 下拉菜单选中状态给option添加 selected 代码格式如下: … 居住城市(下拉菜单): 北京 上海 深圳 厦门 注:Select标记的multiple属性和size属性不要求掌握。

列表框(提供多选ctrl+多选): 苹果 橙子 香蕉 西瓜 柠檬 香梨 10. 文本域标记及属性 文本域主要用于输入较长的文本信息。 代码格式如下: 默认文字 效果: Cols属性:定义文本域的宽度 (列) rows属性:定义文本域的高度 (行) 四、 HTML5新增表单控件

HTML5文本框及placeholder属性 当文本框处于未输入状态并且未获取光标焦点时,模糊显示输入提示文字。 代码格式如下: 效果如下:HTML5文本框类型tel 提供专门用于输入电话号码的文本框。它并不限定只输入数字,因为很多的电话号码 还包括其他字符(如+ 、-、(、)等),如86-0536-8888888 代码格式如下: pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式 --> 电话号码: 电话号码: 效果如下:HTML5 文本框类型 url 网址 url类型的input 元素提供用于输入url地址这类特殊文本的文本框.当提交表单时,如果所输入的内容是url地址格式的文本,则会提交数据到服务器,如果不是url地址格式的文本,则不允许提交.

代码如下: 效果如下: 4. HTML Email邮件 Email类型的input元素是一种专门用于输入e-mail地址在文本输入框,在提交表单时,会自动验证输入框的值.如果不是一个有效的e-mail地址,则该输入框不允许提交该表单. 代码如下:

效果如下: 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.

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。