HTML学习日记（三）——表格、表单

最新推荐文章于 2023-07-22 21:47:03 发布
最新推荐文章于 2023-07-22 21:47:03 发布
阅读量369 收藏 1
点赞数
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43937101/article/details/105583453
版权

一、表格

表格由＜table＞标签来定义。每个表格的若干行由＜tr＞（table row）标签来定义，每行中所拥有的表格数据或是有几列由＜td＞（table data）标签来定义，＜td＞中可以包含的内容有：文本、图片、列表、段落、表单、水平线、表格等。

  1. table的常用属性：
    • border：边框
    • width：宽度
    • height：高度
    • cellspacing：单元格之间的距离
    • cellpadding：单元格中文本与边框的距离
    • bgcolor：背景颜色
    • background：背景图
    • align：表格相对于网页的水平对齐
  2. tr的常用属性：
    • bgcolor：背景颜色
    • align：水平对齐
    • valign：垂直对齐
    • height：高度
  3. td的常用属性：
    • bgcolor：背景颜色
    • background：背景图
    • align：水平对齐
    • valign：垂直对齐
    • width：宽度
    • colspan：横向合并单元格
    • rowspan：纵向合并单元格
  4. 常用的表格标签：
    • ＜caption＞：定义表格标题
    • ＜th＞：定义表格的表头
    • ＜thead＞：定义表格的页眉
    • ＜tfoot＞：定义表格的页脚
    • ＜tbody＞：定义表格的主体
  5. 其余：
    • 空单元格：用&nbsp；来表示没有内容的单元格
    • align属性：align只是水平对齐而已，而align=“center”则表示（内容）水平居中对齐。

示例代码如下：

  <!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8">  <!--表明使用UTF-8来编码-->
  	<title>
  		表格的练习  <!--表示网页的标题-->
  	</title>
  </head>
  <body>
  	<table border="1px" width="800px" height="600px"
  		cellspacing="0px" cellpadding="20px" bgcolor="aqua"
  		background="" align="center">
  		<tr bgcolor="#A9A9A9" align="center" height="50px">
  			<th>表头1</th>
  			<th>表头2</th>
  			<th>表头3</th>
  			<th>表头4</th>
  		</tr>
  		<tr align="right" valign="bottom" height="200px">
  			<td width="100px">21</td>
  			<td	bgcolor="red" background="" align="left" valign="top"
  				width="300px" style="color: blue;">
  				22 
  				<!--背景颜色为红色，无背景图片，内容相对于网页水平向左对齐
  					内容相对于表格顶端垂直对齐，宽度为300像素，字体颜色为蓝色
  				-->
  			</td>
  			<td width="100px">23</td>
  			<td rowspan="2">34</td> <!-->纵向合并单元格  
  							从当前单元格开始向下两个单元格合并</!-->
  		</tr>
  		<tr height="350px">
  			<td colspan="3">31</td>
  			<!-->横向合并单元格
  				从当前单元格开始向右3个单元格合并
  			</!-->
  		</tr>
  	</table>
  	<!--   描述：border 表格的边框
      		cellspacing  单元格与单元格之间的距离
      		cellpadding  单元格内部填充的距离
      		align="center" 表示表格水平居中对齐 不是内容居中操作   align 表示水平对齐方式
      		valign 表示垂直对齐方式
      		更改单元格的宽度--会更改整列的单元格宽度
      		单元格合并时 是 从左到右合并  从上到下合并
      		colspan 横向合并单元格
      		rowspan 纵向合并单元格
      -->
  </body>
</html>

效果如下：
在这里插入图片描述

二、表单

HTML表单由＜form＞标签来定义，HTML表单用于收集用户的输入。
HTML表单包含表单元素，所谓的表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等。

＜input＞元素：是最重要的表单元素，它随着type属性有很多不同的形态。

  • type=“text”：指在表单中加入一个单行文本框
  • type=“password”：指在表单中加入一个密码文本框
  • type=“radio”：指在表单中加入单选按钮
  • type=“checkbox”：复选框
  • type=“submit”：提交按钮，向服务器端发送当前表单中的数据（name、id、value）
  • type=“reset”：重置按钮，将表单中的控件全部设为默认值
  • type=“button”：普通 按钮，本身没有任何作用，但可配合脚本语言实现任何效果

＜form＞标签的属性

  1. name：表单的名字
  2. action：用于处理数据的程序路径，当提交表单时会执行此程序。如果省略该属性，则action会设置为当前页面
  3. method：规定在提交表单时所用的HTTP方法（指get或post）
    • get：（默认方法）获取。适合于少量数据的提交。get方法的弊端是表单数据在页面地址栏是可见的，不安全。它是先将数据发送到url中，再提交到后台服务器中，安全性低下。
      （URL：Uniform Resource Locator----统一资源定位）
    • post：提交。适合数据量大的提交。当表单在更新数据或包含敏感信息时（密码），安全系数高。它是先将数据转化成标准数据流，再提交到服务器，安全性高。

＜input＞标签的常用属性

  • name：控件名
  • value：文本框内默认值、内置值
  • width：文本框宽度
  • maxlength：允许输入的最多字符数
  • placehold：占位符（提示语）
  • size：文本框大小
  • type：类型
  • checked：设置为默认选中
    注：若为一组单选按钮，则一组单选按钮的name值要保持一致。

＜form＞标签的其他元素

  1. 多行文本框
    多行文本框用＜textarea＞＜/textarea＞标签来表示。
    它的常用属性有：

    • name：控件名
    • rows：文本框的行数
    • cols：文本框的宽度
    • wrap：文字换行方式，默认为文字到末尾自动换行；如果设置为off，则不会自动换行。
    • resize：重置大小（通常是在css中设置的）

  2. 列表框控件
    用＜select＞＜/select＞来表示一个列表框，且用＜option＞＜/option＞来表示一个列表中的选项。
    ①select属性：

    • name：控件名
    • size：显示行数
    • multiple：允许多选

    ②option属性：

    • value：内置值
    • selected：默认选中

示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">  <!--表明使用UTF-8来编码-->
		<title>
			表单的练习  <!--表示网页的标题-->
		</title>
	</head>
	<body>
		<form name="regist" action="" method="post">
			账号：<input type="text" name="userna" id="username" value=""
				placeholder="请输入账号" maxlength="10" size="25"/>
				<br /><br />
			密码：<input type="password" name="password" id="password" value=""
				placeholder="请输入密码" maxlength="6" size="25" />
				<br /><br />
			性别：<input type="radio" name="gender" id="gender" value="man" /> 男
				<input type="radio" name="gender" id="girl" value="girl" checked="checked"/>女
				<br /><br /><!--这里的value值会被默认存入后台数据库中-->
			爱好：<input type="checkbox" name="hobby" id="smoking" value="smoking"/> 抽烟
				<input type="checkbox" name="hobby" id="drinking" value="drinking"/> 喝酒
				<input type="checkbox" name="hobby" id="perming" value="perming"
					checked="checked"/> 烫头
				<br /><br />
			简介：	<textarea name="express" rows="5" cols="25"></textarea>
			<br /><br />
			游戏：<select name="game" id="game" size="7" multiple="multiple">
				<!--size:表示显示的行数；multiple：表示可以多选-->
				<option value="LOL">LOL</option>
				<option value="BBQ">BBQ</option>
				<option value="CF">CF</option>
				<option value="DOTA">DOTA</option>
				<option value="CSGO">CSGO</option>
				<option value="DBDN">DBDN</option>
				<option value="DL" selected="selected">DL</option>
				<!--selected表示默认选中-->
			</select>
			<br /><br />
			<input type="submit" name="smit" id="smit" value="注册" />
			<input type="reset" name="smit" id="smit" value="恢复默认值" />
		</form>
	</body>
</html>

效果如下：
在这里插入图片描述

It‘s so simple
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习日志—HTML表单
m379373142的博客
04-10 251
1 表单的工作原理 2 表单基本语法 语法如下： <form> 表单元素 </form> 表单元素如下： 标签 描述 <input> 表单输入标签 <select> 菜单和列表标签 <option> 菜单和列表的项目标签 <textarea> 文字域标签 ...
HTML学习日记-第二篇
qq_45864468的博客
06-22 537
上节课我们粗略的介绍了一下html的基本标签，接下来我们开始进入表格标签。 表格标签：作用：用来给一堆数据添加表格语义 其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式 格式： <table> <tr> <td> </td> </tr> </table> 表格标签中的table代表整个表格，也
HTML学习日志一
Lnd_Niu的博客
07-26 968
大家好！今天开始写我自己的博客了，希望能记录自己每天的成长记录。现在的我还是个小白，可能会有很多的错误，但是还是要写的。希望我的好习惯能够养成。 今天学习到的主要内容是HTML的基本语句以及表格制作。 HTML可以在文本文档中进行编写，同时需要将文本文档的格式更改为.HTML后缀。但是为了更好的编辑体验（省劲）(￣▽￣)”推荐使用HBuilder等编辑软件编写。 总的来说HTML有一个大...
前端开发日记之表单提交
jiang_mingyi的博客
06-27 370
$("#orderForm").serialize()，提交的是表单里控件的name属性，而不是ID。而控件的disabled属性一旦为设为了true，$("#orderForm").serialize()将不会提交此控件的value值。本次遇见的问题是：有一个单选radio，在订单预定其它时间段时，需要将除时间段的其它所有input设为只读。而我们将radio的readyonly的属性设为TRU
菜鸟的学习日记总结（八）From表单数据的提交
weixin_44541247的博客
05-08 573
From表单数据的提交目前学了两种方法，一种方法是使用插件来提交，另一种则是将数据一个个的进行提交。使用插件提交from表单数据的方法很简单，首先引入提交from表单数据的方法的插件 在将插件引进来后，再给from标签一个ID 插件提交from表单数据就是通过from表单的ID来确定from表单从而获取到其中的数据。在获取到其中的数据后就可以对其进行提交。 ajaxSubmit(obj)方法...
HTML表格标签详解
实泽有之，无泽虚之
03-26 8973
本文对HTML表格标签进行详解，大体分为三部分： 第一部分，主要讲解以下标签：table、tr、td、th、caption、colgroup、col、thead、tfoot、tbody；第二部分，主要讲解以下属性：border、rowspan、colspan、cellpadding、cellspacing、width、summary；第三部分，通过HTML样例代码和运行结果进行展示。
小白前端学习日记（三）HTML基础语法与标签2
weixin_44237608的博客
03-27 2119
小白前端学习日记系列 小白前端学习日记（一）认识前端 小白前端学习日记（二）HTML基础语法与标签1 HTML基础语法与标签小白前端学习日记系列HTML基础语法与标签一、列表标签1.无序列表2.有序列表3.定义列表二、多媒体标签1.图片标签2.音频视频标签音频插入标签视频插入标签source标签3.超级链接总结 HTML基础语法与标签 这次的内容主要是列表标签，多媒体标签。这些标签在网页制作中也是不可或缺的重要知识。 一、列表标签 1.无序列表 <ul> <li>列表项1&
HTML5+CSS大作业——简单的程序员个人博客(7页) 大学个人博客网页制作教程 表格布局网页模板
12-02 2911
HTML5+CSS大作业——简单的程序员个人博客(7页) 大学个人博客网页制作教程 表格布局网页模板 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注
HTML5期末大作业：书店商城系统网站设计——响应式图书电商HTML 网上书店模板 (25页) HTML+CSS+JavaScript
qq_365392777
09-27 6131
HTML5期末大作业：商城书店网站设计——响应式图书电商HTML 网上书店模板 (25页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计
HTML知识点总结——个人笔记（仅供参考`v`）
m0_50785976的博客
04-11 1364
HTML知识点总结【干货合集，速度上车！！！】 HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。 HTML的作用？ HTML是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。 HTML网页代码的基本格式及解析： <!--网页的基本结构--> <!--文档声明，声明当前网页的版本 --> <!doctype html> <!-- html的根标签（元素
html——day2
最新发布
2301_77787086的博客
07-22 1204
前端小白
HTML_03_常用标签元素（二）
MCotoneaster的博客
05-29 278
一、表格 （1）标签： table用于定义一个表格标签。 tr标签 用于定义表格中的行，必须嵌套在 table标签中。 td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。 字母 td 指表格数据（table data），即数据单元格的内容。 （2）属性： （3）图解： （4）表头单元格标签<th></th> th 也是一个单元格 只不过和普通的 td单元格不一样，它会让自己里面的文字居中且
html&css的简单了解
m0_50496669的博客
09-07 1282
html&css html： 常用的标签： div、p、ul li、ol li、h1-h6、a、span、b、u、i、input（属性text、number、password、radio、checkbox、submit、reset）、form、select>option、textarea h5(新标签）：header、nav、footer、main、section、video、audio、input（color、range、week、date） 标签的分类： 单双标签：单标签没有与之对
css五大布局方式详解
热门推荐
lin1072368472的博客
10-09 1万+
css布局方式 table布局 float布局 flex布局 响应式布局 Grid布局 table布局 table布局在如今已经很少使用，原因是：table布局比其它html标记占更多的字节，会阻挡浏览器渲染引擎的渲染顺序，会影响其内部的某些布局属性的生效。 使用table布局有两种方式 table标签 display：table 标签与js的对应 table { display: table } tr { display: table-row } thead { displ
html 在td中加css,把div固定在td中_html/css_WEB-ITnose
weixin_33315387的博客
05-31 528
这是代码片段style="position: relative; width: 340px">onchange="document.getElementById('textfieldContentImg').value=this.value" />就是在td中加个div，火狐和和IE7以上的都能正常显示，但是IE6,7,360浏览器无法正常使用，div无法固定在td中，主要表现在滑动滚...
html中代码td是什么,html元素td标签的使用方法及作用
weixin_36003021的博客
06-07 8412
html元素td标签的使用方法及作用详解如下：标签的定义标签是"table data cell"的缩写，是定义HTML表格中的标准单元格的；HTML 表格有两种单元格类型：表头单元格➜由标签创建的表头信息，其文本默认为居中的粗体文本；标准单元格➜由标签创建的数据信息，其文本默认为左对齐的普通文本；标签是成对出现的，以为开始，以为结束；浏览器支持情况标签已被所有主流浏览器都支持 。标签的用法如果需要...
关于th,td,tr的一些相关标签
anrudou0809的博客
08-24 332
tr表示行,td表示列，th其实也是表示列但是在这个标签中的文字会以粗体出现 <th>为表格标题，属性summar为摘要， <caption>标签为首部说明， <thead>标签为表格头部， <tbody>标签为表格主体内容， <tfoot>标签为表格尾部。 转载于:https://www.cnblogs.co...
HTML中th和td区别
sherry2017的博客
11-27 5929
在HTML中和标签都是用于单元格内容显示的，那么有什么区别呢? 和标签都是用于表格单元格显示的。不同的是在单元格中加粗显示。 ：定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗体。 请注意：在 HTML 4.01 中，th元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 属性是不被赞成使用的。
HTML表格与表单入门教程
这篇资料详细阐述了HTML中表格与表单的使用，适合初学者学习。HTML（HyperText Markup Language）是网页制作的基础，它通过一系列标签来组织和呈现网页内容。 首先，资料回顾了HTML的基本文档结构，包括文档头部（`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值