网站首页 > 技术文章 正文
今天我们主要是来了解一下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基础必备-表格标记,前端小白一看就会
猜你喜欢
- 2025-06-08 前端开发:可重用与灵活性平衡策略
- 2025-06-08 为何强烈推荐 voici.js 在终端展示酷炫表格?
- 2025-06-08 antd 的table分析(antd table fixed)
- 2025-06-08 element-ui实现动态表头的表格问题汇总
- 2025-06-08 【办公神器】ChatExcel:Excel小白的救星,AI聊天自动搞定表格!
- 2025-06-08 「前端干货」别再羡慕别人的页面啦,教你点击直接打开侧边栏
- 2025-06-08 在线表格再添一员猛将excelize,支持 wasm!
- 2025-06-08 前端表格想要极度的丝滑,只有一条路可行!
- 2024-09-29 HTML之CSS表格 html table css
- 2024-09-29 SpreadJS 纯前端表格控件新特性 – 语言包
你 发表评论:
欢迎- 580℃几个Oracle空值处理函数 oracle处理null值的函数
- 575℃Oracle分析函数之Lag和Lead()使用
- 561℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 560℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 556℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 545℃【数据统计分析】详解Oracle分组函数之CUBE
- 533℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 529℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)