2019/9/10Day3表格学习

最新推荐文章于 2024-07-25 22:24:14 发布
最新推荐文章于 2024-07-25 22:24:14 发布
阅读量122 收藏
点赞数
分类专栏： 学习日常 文章标签： 学习 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cheer_98_/article/details/100703534
版权

2019/9/10表格表单

上午学习内容

内容：

  1. 表格标签
  2. 表格标签
  3. 表单标签
  4. H5新增表单和表单属性

创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可

1.table 用于定义一个表格
2.tr 是定义表格中的一行，必须嵌套在table标签内，table中包含几对tr就有几行表格
3.td 就是单元格，必须嵌套在tr标签内，tr有几个td就表示有几个单元格(就是几列)

注意

tr 中只能嵌套 td
td下可以有任意元素

表格属性

​ border:边框 默认值为0 像素值(px)

​

border边框 默认值为0像素值(px)
cellspacing设置单元格和单元格之间的间距像素
cellpadding设置单元格内容和单元格的间距像素
width表格的宽度像素值
height表格的高度像素
align设置表格的水平对齐方式left，center，right

合并单元格(难点)

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

​ 将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

​ 公式： 删除的个数 = 合并的个数 - 1

合并的顺序 先上 先左

textarea控件(文本域)

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行的字符数" rows="显示的行数">
			
</textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

注意：

  1. <select></select>中至少应包含一对<option></option>。
  2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

action:  url地址
method:  提交方式
name :  表单的名称，区分同一界面的多个表单

每个表单都要由自己表单域

下午学习内容

做练习：

用表格实现网页

效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.header{
			width: 100%;
		}
		
		.logo{
			width: 100px;
		}
		.heade-1{
			width: 100%;
			height: 30px;
			background-color:#000; 
		}
		.heade-1 span{
			color: #fff;
		}
		.banner img{
			width: 100%;
		}
		.shangpin h3{
			float: left;
			margin: 0;
		}
		ul{
			padding:0;
		}
		ul li{
			list-style: none;
			margin-top: -60px;

		}
		.p1{
			padding-left: 35px; 
		}
		.p2{
			color: red;
			padding-left: 35px;
		}
		.zhongjian .img01{
			width: 100%;
		}
		.zhongjian .img02{
			width: 100%;
			height: 300px;
		}
		.kaitu img{
			width: 100%;
		}
		.footertu img{
			width: 100%;
		}
		#footer0{
			width: 300px;
		}
	</style>
</head>
<body>
	<table class="header">
		<tr>
			<td >
				<img class="logo" src="img/logo2.png">
			</td>
			<td  colspan="6" class="headetu"  align="center">
				<img src="img/header.png">
				
			</td>
			<td align="right">
				<a href="#">登录</a>
				<a href="#">注册</a> 
				<a href="#">购物车</a>
			</td>
		</tr>
	
		<tr class="heade-1">
			<td colspan="8">
				<span>首页</span>
				<span>手机数码</span>
				<span>电脑办公</span>
				<span>鞋靴箱包</span>
				<span>香烟酒水</span>
				
			</td>
		</tr>

		<tr class="banner">
			<td colspan="8">
				<img src="img/1.jpg" alt="">
			</td>
		</tr>

		<tr class="shangpin">
			<td colspan="8">
				<h3>最新商品</h3>
				<img src="img/title2.jpg" alt="">
			</td>
		</tr>

		<tr class="zhongjian">
			<td  rowspan="2" colspan="2">
				<img  class="img01" src="img/big01.jpg">
			</td>
			<td colspan="3">
				<img class="img02" src="img/middle01.jpg">
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			
		</tr>
		<tr>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			
		</tr>
		<tr class="kaitu">
			<td colspan="8">
				<img src="img/ad.jpg">
			</td>
		</tr>
		<tr class="shangpin">
			<td colspan="8">
				<h3>最新商品</h3>
				<img src="img/title2.jpg" alt="">
			</td>
		</tr>

		<tr class="zhongjian">
			<td  rowspan="2" colspan="2">
				<img  class="img01" src="img/big01.jpg">
			</td>
			<td colspan="3">
				<img class="img02" src="img/middle01.jpg">
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			
		</tr>
		<tr>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>
						<img src="img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
				</ul>
			</td>
			
		</tr>
		<tr class="footertu">
			<td colspan="8">
				<img src="img/footer.jpg">
			</td>
		</tr>

		<tr>
			<td colspan="1">
				
			</td>
			<td colspan="6" align="center">
				<a href="#">关于我们</a>
				<a href="#">联系我们</a>
				<a href="#">招贤纳士</a>
				<a href="#">法律声明</a>
				<a href="#">友情链接</a>
				<a href="#">支付方式</a>
				<a href="#">配送方式</a>
				<a href="#">服务声明</a>
				<a href="#">广告声明</a>
				
			</td>
			<td></td>
		</tr>

		<tr>
			<td></td>
			<td colspan="6" align="center">
				Copyrigth &nbsp 2005-2016宁财商城版权所有
			</td>
			<td></td>
		</tr>
	</table>
</body>
</html>
cheer_98
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用定位实现垂直与水平居中position
cheer_98_的博客
09-19 1467
元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分。 1、边偏移 边偏移属性 描述 top 顶端偏移量，定义元素相对于其父元素上边线的距离 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 left 左侧偏移量，定义元素相对于其父元素左边线的距离 right 右侧偏移量，定义元素相对于其父元素右边线的距离 也就说，以后定位要和这边偏移搭配使用了...
瀑布式图片排列
cheer_98_的博客
10-17 1113
瀑布式图片排列源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: ...
点餐-加入购物车后小球动画
cheer_98_的博客
11-18 287
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小球动画</title> <script src="js/vue-2.4.0.js"></script> <style> .ball{ ...
飞机大战小案例
cheer_98_的博客
10-17 262
飞机大战小案例 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
css盒子模型学习
cheer_98_的博客
09-16 260
2019/9/16css盒子模型css的三大特性css层叠性CSS继承性CSS优先级CSS特殊性（Specificity）盒子边框（border）盒子边框写法总结表表格的细线边框border-collapse:collapse; 表示边框合并在一起。圆角边框内边距（padding）外边距（margin）外边距实现盒子居中 css的三大特性 css层叠性 样式冲突，遵循的原则是就近原则。 那个样...
ajax的简单学习
cheer_98_的博客
10-29 236
初始ajax Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。局部刷新 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 ...
vue过滤器和动画效果
cheer_98_的博客
11-15 198
过滤器： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue-2.4.0.js"></script> </head> <bo...
获取页面元素js
cheer_98_的博客
09-27 193
ECMAScript - JavaScript的核心 es5 es6 定义了JavaScript 的语法规范 JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关 获取页面元素 为什么要获取页面元素 例如：我们要页面元素隐藏/显示，需要现获取对应的元素，才能进行后续操作 根据id获取元素 var div = docume...
简单的计算器案例vue
cheer_98_的博客
11-15 161
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <script src="vue-2.4.0.js"></script> </head> <b...
浮动float
cheer_98_的博客
09-19 160
float 在CSS中，通过float属性来定义浮动，其基本语法格式如下： 选择器{float:属性值;} 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值） 浮动的目的是，让多个块级元素同一行显示！ 标准流父级 1.子盒子浮动不会压住padding 2.浮动的元素会找最近的父级元素对齐，不会超出内边距的范围 float ...
2019/9/11Day4css样式学习
cheer_98_的博客
09-11 138
2019/9/11css样式学习上午学习内容CSS字体样式属性font-size:字号大小font-family:字体CSS Unicode字体font-weight:字体粗细font-style:字体风格font:综合设置字体样式 (重点)选择器（重点）基础选择器标签选择器（元素选择器）类选择器多类名选择器id选择器id选择器和类选择器区别通配符选择器伪类选择器链接伪类选择器 上午学习内容 内容...
mysql数据库的学习
cheer_98_的博客
10-23 135
mysql 1.SQL通用语法 1. SQL 语句可以单行或多行书写，以分号结尾。 js 可以写也可以不写分号 2. 可使用空格和缩进来增强语句的可读性。 3. MySQL 数据库的 SQL 语句不区分大小写，关键字建议使用大写。 4. 3 种注释 * 单行注释: -- 注释内容 或 # 注释内容(mysql 特有) * 多行注释: /* 注释 */ 2. SQL分类 1)...
js的初步学习
cheer_98_的博客
09-24 132
js的学习 JavaScript是一种运行在客户端的脚本语言 JavaScript和HTML、CSS的区别 1.html：提供网页结构。提供网页的内容 2.css：美化界面 3.js： 控制网页内容，给网页增加动态效果 JavaScript的组成 1.ECMAscript 2.DOM 3.BOM 如何使用变量 var声明变量 var age; 变量的赋值 var age; age = 1...
fullPage插件的使用
cheer_98_的博客
10-09 131
fullpage 全屏插件 鼠标滚轮事件，绑定页面宽高 fullPage.js 是一个基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。 github 官网 https://github.com/alvarotrigo/fullPage.js 中文演示地址 http://www.dowebok.com/demo/2014/77/ 主要功能有： 支持鼠标滚动 支持前进...
JQuery学习day01
cheer_98_的博客
10-09 126
JQuery JQuery的使用 1.首先引入JQ插件 JQuery中的选择器 让我们能够更加精确找到我们要操作的元素 基本选择器 ID选择器 : #ID的名称 类选择器: 以 . 开头 .类名 元素选择器: 标签的名称 通配符选择器: * 选择器,选择器: 选择器1,选择器2 ​ JQ中的层级选择器 子元素选择器: 选择器1 > 选择器2 后代选择器...
【C++进阶学习】第八弹——红黑树的原理与实现——探讨树形结构存储的最优解
2301_80220607的博客
07-22 2403
【C++进阶】+【高阶数据结构】——红黑树的原理与实现——超详解，适合小白学习了解！！！
AvaloniaUI的学习
最新发布
lishuangquan1987的博客
07-25 817
官方中文文档：https://docs.avaloniaui.net/zh-Hans/docs/welcome。
Python编程学习第一篇——Python零基础快速入门（六）（4）异常处理
urhero的专栏
07-25 301
我们已经了解了Python的基本数据类型、变量和基本的逻辑控制语句，基于这些基础知识可以编写一些小程序了，但是在写程序的时候我们会发现，有时候程序并不是按我们预期的方向执行，有的直接报错，有的没有报错，却并未得到我们预期的结果。在这个例子中，除数为0会引发ZeroDivisionError异常，我们将异常信息赋值给变量e，并输出"除数不能为0"和异常信息。在这个例子中，由于除数不为0，所以没有发生ZeroDivisionError异常，代码会执行else语句块，并输出结果2.0。
前端学习1——自学习梳理
qq_63125992的博客
07-24 320
【代码】前端学习1——自学习梳理。
HTML/CSS/JS/JQ入门教程：Web开发基石
3. 超链接`<a>`标签，表格`<table>`，以及表单元素如文本框、密码框、单选、多选、时间选择、文件上传、下拉菜单、文本域和隐藏域等都被详细讲解。 **CSS部分**（day03-05）： 1. CSS被引入以控制网页样式，学习了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值