HTML 表格表单组合+div+span

最新推荐文章于 2023-05-30 15:35:52 发布

MW0309

最新推荐文章于 2023-05-30 15:35:52 发布

阅读量1k

点赞数 2

分类专栏： HTML 文章标签： html css

本文链接：https://blog.csdn.net/qq_42222342/article/details/104144157

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

表格表单之间可以互相组合形成数据展示效果

小练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body>
		<table border="1" cellpadding="30">
			<tr align="center">
				<td rowspan="4">总体信息</td>
				<td colspan="2">用户注册</td>
			</tr>
			<tr align="right">
				<td>用户名：</td>
				<td><input type="text" placeholder="请输入用户名"></td>
			</tr>
			<tr align="right">
				<td>密码：</td>
				<td><input type="password" placeholder="请输入密码"></td>
			</tr>
			<tr align="center">
				<td colspan="2"><input type="submit"> <input type="reset" ></td>
			</tr>
		</table>
	</body>
</html>

效果图

在这里插入图片描述

`<div>`与`<span>`

div（块）：

div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

span（内联）：

用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。

小练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body>
		<!--<div>这是一个块</div>
		<span>这是一个内联</span>-->
		<div style="border：1px #gray solid；">
			<h2><a href="#">【千锋教育】<span style="color：red">html5</span>-中国数万程序员的选择-官方首页</a></hz>
				<a href="#"><img src="https://ss3.baidu.com/-rVxeDTa2gU2pMbgoY3K/it/u=2492331056，4193866086&fm=202&
		mola=new&crop=V1"
					 alt=""></a>
				<p>优势：三师护航就业薪资：10K-2K培训方式：全程面授培训类型：IT培训
					干锋-致力于互联网应用研发培训，中国程序员认可的培训机构；干锋开设web大前端，java，UI设计，PHP，VR，1inux，大数据，pyhton，物联..</p>
				<a href="#>www.mobiletrain.org 2019-04-评价广告</a>
		</div>
		<div>
		<h2><a href=" #"><span>html5</span>_零基础如何学<span>Html5</span>从小白到大神进阶</a></hz>
				<a href="#"><img src="https://ss3.baidu.com/-rVxeDTa2gu2pMbgoY3K/it/u=2922130382，676357541&fm=202&
		mola=new&crop=v1"
					 alt=""></a>
				<p>培训类型：Web前端特色：包吃包住价格；12期免息城市：319个分校
					html5，中公优就业上市企业，免费试学5天，不合适全额退款，先就业后付款，过万家合作名企，学员与保险公司签订就业保障协议，毕业..</p>
				<a href="#">www.ujiuye.cn 2019-04-评价广告</a>
		</div>
	</body>
</html>

效果图

在这里插入图片描述

MW0309

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML 表格表单组合+div+span

表格表单之间可以互相组合形成数据展示效果小练习<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <table border="1" cellpadding...
复制链接

扫一扫