HTML的表格，表单，列表

最新推荐文章于 2024-03-20 22:32:05 发布
最新推荐文章于 2024-03-20 22:32:05 发布
阅读量204 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49344258/article/details/108123105
版权

 

目录

一 表格

二 列表 

三 表单

一 表格

1.表格元素 <table>

表格中的行 <tr>

表格中的列 <td>

表格中的表头 <th>--居中，加粗

<table>标记的边框 <border>

<table>标记的边框的宽度 <width>

<table>标记的边框的高度 <height>

<table>标记的水平对齐方式 <align>

<table>标记的表格背景色 <bgcolor>

<table>标记的表格边框色 <bordercolor>

<table>标记的表格中的内容与边框之间的距离 <cellpadding>

<table>标记的表格中的边框与边框之间的距离 <cellspacing>-默认是1px

<tr>标记的<align>属性--设置当前行的水平对齐方式

<tr>标记的<bgcolor>属性--设置当前行的背景色

<tr>标记的<valign>属性--设置当前行的垂直对齐方式<top/middle/bottom>

<td>标记的<align>属性--设置当前列的水平对齐方式

<td>标记的<bgcolor>属性--设置当前列的背景色

<td>标记的<valign>属性--设置当前列的垂直对齐方式<top/middle/bottom>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<table border="1px" width="500px" height="300px"
			  align="center" bgcolor="rosybrown"  bordercolor="blue" 
			  cellpadding="0px" cellspacing="0px">
			<tr>
				<th>编号</th>
				<th align="right" bgcolor="yellow" valign="top">姓名</th>
				<th>年龄</th>
				<th>地址</th>
			</tr>
			<tr align="center" bgcolor="green" valign="bottom">
				<td>编号</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>地址</td>
			</tr>
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>年龄</td>
				<td align="right" bgcolor="yellow" valign="top"><b>地址</b></td>
			</tr>
		</table>
	</body>
</html>

如何合并单元格

水平方向合并单元格--跨列 <colspan>

垂直方向合并单元格--跨行 <rowspan>

注：若进行合并，需要删除多余的单元格


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器的控制面板</title>
	</head>
	<body>
		<table border="1px" align="center" width="300px" height="400px"
			cellspacing="10px" bgcolor="lightblue">
			<tr height="70px" >
				<td colspan="5" align="right"><font size="7">0</font></td>
			</tr>
			<tr align="center" valign="middle">
				<td>MC</td>
				<td>MR</td>
				<td>MS</td>
				<td>M+</td>
				<td>M-</td>
			</tr>
			<tr align="center" valign="middle">
				<td>&lt;-</td>
				<td>CE</td>
				<td>C</td>
				<td>+/-</td>
				<td>√</td>
			</tr>
			<tr align="center" valign="middle">
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td>/</td>
				<td>%</td>
			</tr>
			<tr align="center" valign="middle">
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>*</td>
				<td>1/x</td>
			</tr>
			<tr align="center" valign="middle">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>-</td>
				<td rowspan="2">=</td>
			</tr>
			<tr align="center" valign="middle">
				<td colspan="2">0</td>
				<td>.</td>
				<td>+</td>
			</tr>
		</table>
	</body>
</html>

如上图所示，红框内的单元格均已合并，多余单元格已被删除。

二 列表

1.有序列表<ol>

<ol>有序列表

<li>是列表里的每一项的条目

默认的标志是有顺序的数字

我们可以通过ol的type属性来修改标志

1--有顺序的数字

a--有顺序的小写字母

A--有顺序的大写字母   

i--有顺序的小写罗马数字

I--有顺序的大写罗马数字

<start>属性设置书顺序的开始值

<ol type="a" start="3">
			<li ><a href="#">编号:1001</a></li>
			<li ><a href="#">姓名:张三</a></li>
			<li ><a href="#">年龄:23</a></li>
			<li ><a href="#">地址:西安</a></li>
		</ol>

2.无序列表<ul>

<ul> 无序列表

<li>无序列表中的每一项条目

默认的标志是实心点

我们可以通过<ul>的<type>属性来修改标志

<circle> 圆形 "。"

<disc> 实心点为[默认]

<square> 正方形

<none> 没有标志

 

<ul type="none" >
			<li ><a href="#"><h2>编号:1001</h2></a></li>
			<li ><a href="#"><h2>姓名:张三</h2></a></li>
			<li ><a href="#"><h2>年龄:23</h2></a></li>
			<li ><a href="#"><h2>地址:西安</h2></a></li>
		</ul>

3.自定义列表<dl>

自定义列表<dl>

自定义列表表头<dt>

子项目<dd>

	<dl>
					<font size="6"><dt>小型数码</dt></font>
						<a href="#"><dd>手机</dd></a>
						<a href="#"><dd>数码相机</dd></a>
						<a href="#"><dd>剃须刀</dd></a>
					<font size="6"><dt>家用电器</dt></font>
						<a href="#"><dd>电视机</dd></a>
						<a href="#"><dd>空调</dd></a>
						<a href="#"><dd>洗衣机</dd></a>
				</dl>

 

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		<ul type="none" >
			<li ><a href="#"><h2>编号:1001</h2></a></li>
			<li ><a href="#"><h2>姓名:张三</h2></a></li>
			<li ><a href="#"><h2>年龄:23</h2></a></li>
			<li ><a href="#"><h2>地址:西安</h2></a></li>
		</ul>
		<br>
		<br>
		<ol type="a" start="3">
			<li ><a href="#">编号:1001</a></li>
			<li ><a href="#">姓名:张三</a></li>
			<li ><a href="#">年龄:23</a></li>
			<li ><a href="#">地址:西安</a></li>
		</ol>
		<br>
		<br>
		<dl>
			<font size="6"><dt>小型数码</dt></font>
				<a href="#"><dd>手机</dd></a>
				<a href="#"><dd>数码相机</dd></a>
				<a href="#"><dd>剃须刀</dd></a>
			<font size="6"><dt>家用电器</dt></font>
				<a href="#"><dd>电视机</dd></a>
				<a href="#"><dd>空调</dd></a>
				<a href="#"><dd>洗衣机</dd></a>
		</dl>
		<br>
		<br>
		<ul type="none" >
			<li ><a href="#"><h2>编号:1001</h2></a></li>
			<li ><a href="#"><h2>姓名:张三</h2></a></li>
			<li ><a href="#"><h2>年龄:23</h2></a></li>
			<li ><a href="#"><h2>地址:西安</h2></a></li>
			<ol type="a" start="3">
				<li ><a href="#">编号:1001</a></li>
				<li ><a href="#">姓名:张三</a></li>
				<li ><a href="#">年龄:23</a></li>
				<li ><a href="#">地址:西安</a></li>
				<dl>
					<font size="6"><dt>小型数码</dt></font>
						<a href="#"><dd>手机</dd></a>
						<a href="#"><dd>数码相机</dd></a>
						<a href="#"><dd>剃须刀</dd></a>
					<font size="6"><dt>家用电器</dt></font>
						<a href="#"><dd>电视机</dd></a>
						<a href="#"><dd>空调</dd></a>
						<a href="#"><dd>洗衣机</dd></a>
				</dl>
			</ol>
		</ul>
	</body>
</html>

三 表单<form>

表单元素:

<input>  文本框/密码框/单选按钮/复选框......

<seletc>下拉列表

<textarea> 文本域---富文本编辑器

<form> 主要负责采集信息的，可以将采集的信息提交。

表单元素 <form> 属性：

<action> 指定表单数据的后端处理程序

<method> 指定表单数据的提交方式【get[默认]/post】

<enctype> 属性规定在将表单数据发送到服务器之前如何对其进行编码。

application/x-www-form-urlencoded

在发送前对所有字符进行编码（默认）。

multipart/form-data

不对字符编码。当使用有文件上传控件的表单时，

该值是必需的。

text/plain

将空格转换为 "+" 符号，但不编码特殊字符。

 

 

 

 

 

<get>与<post>的区别：

<get>提交数据会将被处理的数据跟随在请求地址之后

被提交的数据不能超过255个字符 如下例：

https://www.baidu.com/s?&wd=html

<post>提交数据会将被处理的数据封装到http协议的头 ，提交数据无限制，通常情况下提交文件只能用post。如下例：

https://www.baidu.com/s

270年前
关注
HTML列表、表格和表单
qq_64067728的博客
04-26 98
1、列表 1.1、无序列表 <ul type="circle"> <li>选择项1</li> <li>选择项2</li> <li>选择项3</li> </ul> ul 块级标签 双标签 不要去嵌套其他的元素 嵌套li ul属性type： disc：默认值 实心圆 square：方形 circle：空心圆 li： 每一项 项目 可以嵌套任意的元
HTML基础-表格、列表、表单
weixin_41715485的博客
07-03 848
HTML进阶 哔哩哔哩视频链接：https://www.bilibili.com/video/BV14J4114768?p=30&share_source=copy_web 1.表格标签 1.1表格的基本使用 表格主要用于显示、 展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。 一个清爽简约的表格能够把繁杂的数据表现得很有条理。 pink老师：表格不是用来布局页面的，而是用来展示数据的。 [外链图片转存失败,源站可能有防盗链机
HTML表格（HTML 表格的使用，收藏这一篇就够了）
热门推荐
weixin_47139649的博客
10-15 6万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
HTML基础知识（表格，列表，表单）
matrix_xiaobai的博客
08-14 691
html基础知识
零基础前端笔记（2）html，表格，列表，标签，文本域，表单域
小飞的博客
03-08 382
XHTML可扩展超文本标记语言（2）（1）创建表格（2）表格属性表头单元格标签th表格标题caption小说排行榜（3）合并单元格（4）划分表格结构（5）列表标签无序列表有序列表自定义列表（6）表单标签name属性（7）lable标签概念作用绑定元素（8）textarea控件（文本域）作用（9）select下拉列表（10）from表单域常用属性 （1）创建表格 <table> <tr> <td>单元格内的文字</td>
HTML 表单 表格 列表
YOUEZ的博客
11-30 1574
HTML 表格 表单 列表 HTML 表单用于搜集不同类型的用户输入，简而言之，就是用来搜集用户数据的。 HTML表单都是存在于<form ></form>标签里面的。 表单元素。 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。 这些东西都具有一个交互性的特点。
HTML标签（下）（表格+列表+表单）
07-12
HTML表格还有一些其他的属性，例如border、cellpadding、cellspacing等，这些属性可以用来控制表格的边框、单元格的间距等外观。 列表标签 HTML中有三种类型的列表：有序列表、无序列表和定义列表。有序列表使用...
el-table树形表格表单验证(列表生成序号)
10-15
在本文中，我们将深入探讨如何在使用Element Plus的`el-table`组件实现树形表格时进行表单验证以及如何生成序号。`el-table`是一个强大的数据展示组件...结合这两个方面，可以构建出高效且健壮的树形表格表单验证系统。
HTML 表格标签、列表标签、表单标签（案例： 注册页面）
酷爱前端的小陈博客
04-16 2350
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2.表格的基本语法 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 总结: 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 1. <table> </table> 是用于定义表格的标签。 2. &...
实验三-HTML表格与HTML表单.doc
07-15
HTML 表格与 HTML 表单 HTML 表格是 HTML 中的一种基本结构元素，用于组织和显示数据。HTML 表格由多个表格单元格组成，每个单元格可以包含文本、图像、表单元素等内容。HTML 表格的基本结构由 `<table>` 标记定义...
html表格头部固定 相应单元格宽度自适应内容区域单元格
05-30
简单的表格头部固定示例，头部单元格会随着内容单元格宽度的变化而变化，完美决解上下单元格对不齐的问题。
富文本编辑器以及表格操作，可拉伸单元格宽度、增加行、增加列、合并单元格
04-21
带富文本编辑器以及支持表格操作，可拉伸单元格宽度、增加行、增加列、合并单元格
HTML表格
Ghosind
04-11 444
介绍HTML的表格的使用。
html表格
two_orion的博客
01-26 718
在html基础中，表格算比较重要的部分，学好表格对于之后css美化页面和js都非常有帮助，那么今天就将我学到的总结在这里。也是让自己对于这标签更加的熟悉。 1.表格的主要作用 表格主要是为了显示，展示数据，因为他可以把数据显示的非常规整，可读性非常好，特别是后台展示数据（并非用来布局页面）。 2.基本语法 <table>//定义表格标签 <tr>//定义表格中的行 <th>（表头单元格）,经常位于表格第一行加粗显示
HTML—表格
Ywyyy231128的博客
11-14 4790
此外，thead、tbody和tfoot标签除了可以使代码更具有语义，还有另外一个重要作用 ：方便分块来控制表格的CSS样式。在HTML中，单元格其实有两种：一种是“表头单元格”，使用的是th标签；另一种是“表行单元格”，使用的是td标签。***一个表格只能有一个标题，也就是只能有一个caption标签。***分析：在默认情况下，表格是没有边框的。***说明：th和td在本质上都是单元格，但是并不代表两者可以互换，它们具有以下区别。***说明：在表格中，有多少组“",就表示有多少行。
html-表格
最新发布
2301_78251908的博客
03-20 1372
一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关属性。border="1",用来设置表格的边框，没有这个属性，边框不显示。一个完整的表格包含三个部分：表格标题，表格表头，表格主体。thead：定义表格的头部，内部嵌套tr>th。tbody：定义表格的主体,内部嵌套td>td。td：table dock：定义表格的单元格。table：表格，作用是定义一个表格的结构。tr： table rows：定义表格的行。th可以设置表头，可以使用tr>th设置。关系：table > tr >td。
HTML基础——表格
Leo的博客
04-01 230
表格：用来展示数据的，让数据显示整齐规范，展示数据 表单：用来收集用户信息的 列表：用来布局，使页面布局整齐规范 表格： 一个完整的表格有表格标签table，行标签tr，单元格标签td（都是双标签）。 tr中只能嵌套td类的单元格，td标签就像一个容器，可以容纳所有的元素。 将td变成th就可以将字体加粗。 表格标题标签caption，（居中且在表格之上），caption标签必须是在table标签之上，且只能写在table标签的内部。 表格示例1——个人信息表： <table bord.
html中表格及表单
weixin_45725020的博客
10-11 619
HTML中的表格及表单 目录 HTML中的表格及表单 table标签: form表单： table标签: table标签用来定义HTML表格 使用场合：有规律的数据（大量数据显示/查询，不推荐使用） 简单的表格由table元素及多个或者一个tr、td、th元素组成。 其中tr定义其中表格的行，td定义表格的列，th定义表格的表头（一般文本加粗显示）。 table一些的属性...
HTML:表格和框架
m0_73886399的博客
03-24 1164
、之间没有内容），因此在页面中显示空白单元格式时，需要在单元格标签内加入一个空白实体引用“ ”(即 ),以确保浏览器能正确显示该单元格。相对宽度是百分比的一种替代方式，例如，rows="1*,3*,1*"表示第一行占窗口的1/5,第二行占窗口的3/5，第三行占窗口的1/5。”cols="列宽度所占窗口的像素或比例，.”>在嵌套表格时，内部表格应该位于外层表格的
HTML表格与表单入门教程
"HTML表格与表单.ppt" 这篇资料详细阐述了HTML中表格与表单的使用，适合初学者学习。HTML（HyperText Markup Language）是网页制作的基础，它通过一系列标签来组织和呈现网页内容。 首先，资料回顾了HTML的基本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值