列表与表格的使用(新手入门基础学习)
2017-07-10 21:02
429 查看
1.文件选择器
Type:file 提供文件选择的格式
Accept指定可选择的文件类型,也可以直接输入格式的后缀名,例如.doc
“image/*”代表支持所有格式。
选择你的头像: <input type="file" accept="image/gif" >
选择你的头像: <input type="file" accept="image/gif" >
上传文件需指定对应表单的属性。
Enctype属性指定表单属性。
2.下拉列表
使用下拉列表的好处:节省页面空间,使得页面更加简洁,方便规范输入。
<select>标签的name属性定义了提交的参数名。
<option>标签的内容定义了该选项显示的文本,value属性定义了选择该选项时所传递的参数值。
比如选择“江西”并提交
多选可通过设置multiple属性来实现,ctrl+单击选择多个
Size属性:设置在下拉列表框页面中显示出来的选项的个数,当小于实际选项个数时,会自动增加一个滚动条
可以使用optgrop进行分组,label属性定义分组显示的文字,disabled设置该分组不能选择。例如:
3.Textarea属性:定义一个文本框,主要是方便用户输入较多文字信息,rows属性指定编辑区域的行数。
Cols:定义文本内可见的列数(对于字母而言)
Rows:定义文本内可见的行数(对于字母而言)
Readonly:只读属性。(h5新增)
Disable:规定禁用文本区域。(h5新增)
文本框内支持空格移动。
4.Fieldset属性:
当信息较多时,可以考虑按照信息内容进行分组,达到表达清晰的目的。Fieldset标签提供将信息分组的一种方式,分组后每组信息默认有一个边框,同时可以使用legend标签。
<fieldset> 标签可以将表单内的相关元素分组。
<fieldset> 标签会在相关表单元素周围绘制边框。
<legend> 标签为 <fieldset> 元素定义标题。
5.表格的使用方法
表格的一些常用标签如下:
<table>定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<border> 定义表格之间
<cellspacing>表格与表格之间的间隙
<cellpadding>设置单元格的大小
总结:通过对表格的理解,对表格的理解又更深刻了一层,从表单到表格,变得更简单化了,功能也多样多化了,还有多文本输入,解决了我们堆积在一行中的文本不美化的问题,还有下拉列表为页面节约了很多空间,也更加美化和多样化
4000
Type:file 提供文件选择的格式
Accept指定可选择的文件类型,也可以直接输入格式的后缀名,例如.doc
“image/*”代表支持所有格式。
选择你的头像: <input type="file" accept="image/gif" >
选择你的头像: <input type="file" accept="image/gif" >
上传文件需指定对应表单的属性。
Enctype属性指定表单属性。
2.下拉列表
使用下拉列表的好处:节省页面空间,使得页面更加简洁,方便规范输入。
<select>标签的name属性定义了提交的参数名。
<option>标签的内容定义了该选项显示的文本,value属性定义了选择该选项时所传递的参数值。
比如选择“江西”并提交
多选可通过设置multiple属性来实现,ctrl+单击选择多个
Size属性:设置在下拉列表框页面中显示出来的选项的个数,当小于实际选项个数时,会自动增加一个滚动条
可以使用optgrop进行分组,label属性定义分组显示的文字,disabled设置该分组不能选择。例如:
3.Textarea属性:定义一个文本框,主要是方便用户输入较多文字信息,rows属性指定编辑区域的行数。
Cols:定义文本内可见的列数(对于字母而言)
Rows:定义文本内可见的行数(对于字母而言)
Readonly:只读属性。(h5新增)
Disable:规定禁用文本区域。(h5新增)
文本框内支持空格移动。
4.Fieldset属性:
当信息较多时,可以考虑按照信息内容进行分组,达到表达清晰的目的。Fieldset标签提供将信息分组的一种方式,分组后每组信息默认有一个边框,同时可以使用legend标签。
<fieldset> 标签可以将表单内的相关元素分组。
<fieldset> 标签会在相关表单元素周围绘制边框。
<legend> 标签为 <fieldset> 元素定义标题。
5.表格的使用方法
表格的一些常用标签如下:
<table>定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<border> 定义表格之间
<cellspacing>表格与表格之间的间隙
<cellpadding>设置单元格的大小
总结:通过对表格的理解,对表格的理解又更深刻了一层,从表单到表格,变得更简单化了,功能也多样多化了,还有多文本输入,解决了我们堆积在一行中的文本不美化的问题,还有下拉列表为页面节约了很多空间,也更加美化和多样化
4000
相关文章推荐
- 表单的使用(新手入门基础学习)
- 使用BIOS进行键盘输入和磁盘读写01 - 零基础入门学习汇编语言75
- Html基础学习四:列表,超链接,表格,层,框架,表单
- OpenGL入门学习之八——使用显示列表
- mysql的入门基本使用(适合新手学习)
- JAVA基础学习之IP简述使用、反射、正则表达式操作、网络爬虫、可变参数、了解和入门注解的应用、使用Eclipse的Debug功能(7)
- 使用BIOS进行键盘输入和磁盘读写02 - 零基础入门学习汇编语言76
- 列表:一个打了激素的数组3 - 零基础入门学习Python012
- [cocos2d-x学习笔记][入门基础]使用loardingbar创建怪物hp条
- 使用生成器返回fibs列表 分类: python Module python基础学习 2013-10-28 18:19 283人阅读 评论(0) 收藏
- Python学习 - 使用BeautifulSoup来解析网页一:基础入门
- 使用BIOS进行键盘输入和磁盘读写03 - 零基础入门学习汇编语言77(完)
- ACCP学习旅程之----- 使用HTML语言开发商业站点( 第二章 表格基础)
- [cocos2d-x学习笔记][入门基础]Box-2d物理引擎的使用01
- XHTML入门学习教程:列表标签的使用
- 使用BIOS进行键盘输入和磁盘读写03 - 零基础入门学习汇编语言77(完)
- 使用set()求出列表交集 分类: python基础学习 2013-06-16 17:00 241人阅读 评论(0) 收藏
- Python学习入门基础教程(learning Python)--1.2.1 Python输出语句print基本使用 .
- linux系统学习:基础篇(系统介绍以及命令行的使用)快速入门linux系统
- [cocos2d-x学习笔记][入门基础]Box-2d物理引擎的使用02制作一个简易的愤怒小鸟Demo