网站首页 > 技术文章 正文
今天我们主要是来了解一下Web前端开发中所用到的一些表格,框架及表单的简单使用方法,如果有一些什么不对的地方,欢迎大家提出来一起讨论。
表格
熟悉表格的常用属性,制作表格
利用表格来容纳表格式数据
利用表格进行页面的排版布局
表格在网站应用中非常广泛,几乎所有的HTML页面中都会或多或少的采用表格来进行布局。表格可以方便灵活地实现对网页的排版,可以把相互关联的信息元素集中定位,使浏览者一目了然,赏心悦目。下面来看看一下基本的表格布局的页面:
上图的简单效果是使用表格布局进行的简单页面设计,下面我们来简单的了解一下表格布局的要素有哪些
结构
表格主要是分为4大结构,分别是:标题、表头、表体、表尾,一个简单的表格通常就是由这4大结构来构成的。
标题:标题主要是用来定义这张表所表示的含义,使人能够直白的理解这张表,就像上图 “学生基本信息”就是标题。
表头:表头所代表的就是所有的列,也就是这张表的属性
表体:表体就是这张表的内容部分,也是对这张表属性的表达
表尾:表尾是整张表最下面的一个部分,一般用来描述制表人,日期等
HTML语言规定了<thead>、<tbody>、<tfoot>3个标签分别对应于表格的表首、表主体和表尾,将一个表格分三个部分在网页上显示出来。
基本语法:
<thead>…</thead>
<tbody>…</tbody>
<tfoot>…</tfoot>
表格是网页布局中的重要元素,它有丰富的属性,可以对其进行相关设置
属性
设置表格的边框属性--border
设置边框的颜色--bordercolor
设置亮边框的颜色--bordercolorlight
设置暗边框的颜色– bordercolordark
设置背景颜色—bgcolor
设置背景图像—background
设置表格宽度与高度—width/heigh
表单
表单可以把来自用户的信息提交给服务器,是网站管理员与浏览者之间沟通的桥梁。表单通常用来做网上调查、注册登记、Web搜索、报名或在线订购等。
表单有几个重要组成部分:表单标记、表单域、表单按钮
表单的一些重要的属性:
name:给定表单名称,表单命名之后就可以用脚本语言(如JavaScript或VBScript)对它进行控制。
action:指定处理表单信息的服务器端应用程序。
method:用于指定表单处理表单数据方法,method的值(get、post,默认get)。
enctype:规定表单数据在发送到服务器之前进行编码
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,可以定义特殊的边界、3D 效果。
<input>标记主要有六个属性,type,name,size,value,maxlength,checked;
Name:属性的值是相应程序中的变量名。
Type:text、 password、 submit、reset、 button、checkbox、 radio、 image、hidden、file、等十种;
在不同的输入方式下,<input>标记的格式略有不同,其他五种属性因type类型的不同,其含义也不同。
- 上一篇: 软件测试和前端开发哪个更有前途?
- 下一篇: html基础必备-表格标记,前端小白一看就会
猜你喜欢
- 2024-09-29 HTML之CSS表格 html table css
- 2024-09-29 SpreadJS 纯前端表格控件新特性 – 语言包
- 2024-09-29 SpreadJS 纯前端表格控件应用场景:全面预算编制
- 2024-09-29 前端开发基础课分享9--网页数据展示利器,教你使用表格
- 2024-09-29 超高效 Vue pc端表格解决方案Vxe-Table
- 2024-09-29 Luckysheet 纯前端的excel表格 前端在线excel
- 2024-09-29 「续」2023年前端WebExcel表格4+热门方案!
- 2024-09-29 第5天 | 16天搞定前端,html布局,表格和大块头
- 2024-09-29 浅谈web前端中的表格布局与CSS盒子布局
- 2024-09-29 纯前端表格控件SpreadJS V14.0发布
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)