HTML基础知识(表格、表单)
6、表格
l 概念:表格一定具有行和列
注:使用<thead><tbody><tfoot>,使浏览器能独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的表格被打印,表格的表头和页脚可被打印在包含表格数据的每张页面上。
<table>
<caption>表格的标题</caption>
<thead>
<th> ---<th>元素:表示表格中的表头
<td></td> ---<tr>元素:表示表格中的行
</th> ---<td>元素:表示表格中的单元格
</thead>
<tbody>
<tr> ---<thead>:包含<th>表头,显示在表格的最前面
<td></td> ---<tbody>:表格中的数据内容
</tr> ---<tfoot>:表格的表尾,显示在表格的最后
</tbody>
<tfoot>
<tr>
<td></td> ---<td colspan="数字"> 表示跨几列
</tr> ---<td rowspan =" "> 表示跨几行
</tfoot>
</table>
l 属性: <table 属性: <table border="设置表格的边框(双边框)" width="设置表格的宽度" >
l 页面布局
使用表格概念实现页面布局
7、表单
ü <form>元素 - 表单元素
作用:将表单内数据进行提交(服务器端)
属性:<form action="设置当前表单提交的地址(服务器端)">
<form method="设置当前表单提交的方式">
附:实现提交功能,需配合<input type="submit">
ü <input>元素 - 输入框
- 输入框:
文本输入框1:<input type="text" disabled>
文本输入框2:<input type="text" readonly>
文本输入框3:<input type="text">
密码输入框3:<input type="password"> 默认显示的效果就是实心的点
email输入框3:<input type="email"> email等类型是 HTML5 新增类型
- 单选或多选框:
<input type="radio" name="1" checked>abc checked属性 设置当前选项被选中
<input type="checkbox" name="2">abc
【设置相同的name属性值为一组,才可单选或多选, 否则单选框中任意选项均可选】
- 按钮:value属性-设置当前按钮的名称
<input type="button" value="登录按钮" > <button>普通按钮</button>
<input type="reset" value="重置按钮" >
<input type="submit" value="提交按钮" >
- 文件域:<input type="file" >
作用: 选择本地文件;在实际开发中,用于文件上传
注: 默认情况下,每次只能选择一个文件
设置当前的文件域同时选择多个文件: <input type="file" multiple="multiple">
实现文件上传功能:<form enctype="multipart/form-data">
- 隐藏域:<input type="hidden">
作用:存储一些不希望被用户看到的内容(数据);不会显示在浏览器页面中
- 图片: <input type="image" src="111.png"> --- HTML5新增类型
² 表单提交(服务器密码)
表单内元素必须定义name属性值;且必须配合提交按钮使用
method: 设置当前表单的提交方式
² get方式
格式:请求地址 ? 元素的name属性值 = 值 & 元素的name属性值 = 值
特点:数据传输不够安全,即明码(未加密);对数据内容的大小会限制
² post方式
方式优于 GET 方式; 在实际开发中,一般使用 POST 方式
² 下拉列表
注:<select>在form外,则无法发送到服务器
(1)单选列表
<select>
<option> </option> --- 一般默认第一个<option>内容选项
<option selected> </option> --- 属性selected 表示当前的选项被选中
</select>
(2)多选列表
<select multiple> ---默认显示效果,至少显示四个选项
<select multiple size="数字"> --- size属性 - 设置默认显示的个数
HTML基础知识(表格、表单)的更多相关文章
- [19/06/08-星期六] CSS基础_表格&表单
一.表格 如生活中的Excel表格,用途就是同来表示一些格式化的数据,如课程表.工资条.成绩单. 在网页中也可以创建出不同的表格,在HTML中使用table标签来创建一个表格.table是个块元素. ...
- Selenium基础知识(四)表单切换
在测试过程中,经常会碰到frame和iframe,嵌套等情况 这种情况下直接通过id,name等等是无法定位到的 好在selenium替我们想到了这个问题switch_to方法解决问题 switch_ ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
- HTML表格表单综合——用户注册表
今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- HTML--绝对路径, 表格,表单, 框架
URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...
- css表格表单和统筹
css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...
- Flask基础(16)-->WTForms表单创建和简单验证
Flask基础(16)-->WTForms表单创建和简单验证 前言:使用Flask_WTF需要配置参数SECRET_KEYCSRF_ENABLED是为了CSRF(跨站请求伪造)保护.SECRET ...
- bootstrap基础学习【表单含按钮】(二)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML基础:用表单写一个简易登录页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- SQLServer学习笔记<>.基础知识,一些基本命令,单表查询(null top用法,with ties附加属性,over开窗函数),排名函数
Sqlserver基础知识 (1)创建数据库 创建数据库有两种方式,手动创建和编写sql脚本创建,在这里我采用脚本的方式创建一个名称为TSQLFundamentals2008的数据库.脚本如下: ...
随机推荐
- Elasticsearch短语搜索——match_phrase
找出一个属性中的独立单词是没有问题的,但有时候想要精确匹配一系列单词或者短语 . 比如, 我们想执行这样一个查询,仅匹配同时包含 "rock" 和 "climbing&q ...
- python与redis交互
爬虫抓来的数据根据实际情况需要存入不同数据库,今天分享一下自己把数据存入redis数据库的经验,有需要的童鞋拿走不谢. 1.环境: Mac osx + python2. 2.需要安装的python包 ...
- android 分享一个处理BaseAdapter,getView()多次加载的方法
一:BaseAdapter介绍 BaseAdapter是listview,gridview等列表,使用的数据适配器,它的主要用途是将一组数据传到ListView.Spinner.Gallery及Gri ...
- Mybatis中的模糊查询
今天下午做的一个功能,要用到模糊查询,字段是description,刚开始我的写法用的是sql中的模糊查询语句, 但是这个有问题,只有将字段的全部值传入其中,才能查询,所以不是迷糊查询. 后来经过搜索 ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- AutoLayout的几种方法
1.XIB 2.Fram 3.屏幕比例适配(个人比较推荐) iOS屏幕适配(尺寸适配) 4.NSLayoutConstraint. 5.Masonry 概述 使用 Objective-C 纯代码编 ...
- XE10 clientDataset 访问 DataSnap 服务端报错问题,锲而不舍找方法,终于解决了
1. 开发环境说明:win 10 下安装了XE10.2和Delphi7 2.按照网上datasnap 三层与使用xe10 自带的samples 的例子,访问数据库都要报莫名的地址错误,这个太不人性化: ...
- ABP 用swagger UI测试API报401无权限访问问题
问题描述: 当我们用swagger UI对Web API 进行测试时报401错误 我们点开GET /api/services/app/Role/GetAll,输入参数 点击Try it out!按钮, ...
- python自动生成excel报表
1.将SQL语句查询的内容,直接写入到excel报表中,以下为全部脚本.要求:此版本必须运维在windows平台,并且安装了excel程序,excel版本不限. python版本为2.7 if b 判 ...
- 随手记一下,VS2015卡顿问题解决。
不知道什么开始,vs2015卡顿的很,启动时加载项目很慢,调试是启动慢,停止调试时直接卡死半分钟.其他都还能忍受,最不能忍受的是点击停止调试按钮后十几秒没反应! 网上有解决方案如下几个,我试了,都不行 ...