cgb2107-第二阶段-day07-html and css

最新推荐文章于 2021-09-13 19:15:44 发布

qq_40151384

最新推荐文章于 2021-09-13 19:15:44 发布

阅读量97

点赞数

分类专栏：学习经历文章标签： css html html5

本文链接：https://blog.csdn.net/qq_40151384/article/details/120069565

版权

学习经历专栏收录该内容

44 篇文章 0 订阅

订阅专栏

一表单签名

最大的作用就是可以提交数据
把表格里想要收集的数据可以提交给服务器

注册表单

在这里插入图片描述

-1 测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 表单标签</title>
	</head>
	<body>
		<!-- 1. 表单标签form:用来提交数据,默认数据是在地址栏中拼接的
			提交的数据有两种方式: get post
			区别: 
			get方式提交数据是在地址栏,默认方式,安全性低,长度受限
			http://127.0.0.1:8848/hbuilderx/cgb2107/test4.html?
			user=1&pwd=2&repwd=2&nick=3&mail=4@.com&sex=on&hobby=on&hobby=on&hobby=on
		
			post方式提交数据不在地址栏,安全性高,没有上限
			method属性用来设置数据的提交方式,默认是get
			action属性用来指定数据即将提交给哪个程序去处理
		-->
		<form method="post" action="#">
			<h2>注册表单</h2>
			<table border="1px" bgcolor="#A9A9A9" 
				width="500px" cellspacing="0">
				<tr>
					<td>用户名:</td>
					<td>
						<input type="text" name="user"/>
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="pwd"/>
					</td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td>
						<input type="password" name="repwd"/>
					</td>
				</tr>
				<tr>
					<td>昵称:</td>
					<td>
						<input type="text" name="nick"/>
					</td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td>
						<input type="email" name="mail"/>
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="1"/>男
						<input type="radio" name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="hobby" value="1"/>篮球
						<input type="checkbox" name="hobby" value="2"/>足球
						<input type="checkbox" name="hobby" value="3"/>乒乓球
					</td>
				</tr>
				<tr>
					<td>城市:</td>
					<td>
						<!-- 下拉框 -->
						<select name="city">
							<option value="">-请选择-</option>
							<option value="bj">北京市</option>
							<option value="sh">上海市</option>
							<option value="gd">广东省</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td>
						<!-- 上传文件 -->
						<input type="file" />
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text"/>
						<img src="a.png"/>
						<button>点我换一张</button>
					</td>
				</tr>
				<tr>
					<td>自我描述:</td>
					<td>
						<textarea>在这儿输入...</textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<button type="submit">提交</button>
						<button type="reset">重置</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

-2 总结

form 标签用来把页面填写的数据提交给后台的java程序
table 标签用来向页面中添加表格
tr 标签用来表示表格里的一行
td 标签表示行里的列元素
input 标签用来实现输入框(text password email radio checkbox)
select 标签用来定义一个下拉框,option标签用来定义选项
textarea标签用来表示一个大的文本框(文本域)
img 标签用来向网页中加入图片
button标签用来表示一个按钮
src 属性用来指定图片的位置,type属性用来指定输入框的类型
width 属性用来指定宽度,height属性用来指定高度
bgcolor用来设置背景颜色
cellspacing 属性用来设置单元格的间距

-3提交数据

必须用form标签
必须有提交submit按钮
必须设置name属性
提交的数据都在? 之后,多个值用&相连
每个值用=连接, user和pwd是页面上name属性的值,1和2是用户在浏览器输入的数据 http://127.0.0.1:8848/hbuilderx/cgb2107/test4.html?user=1&pwd=2
遇到的问题
-性别可以多选: 让性别的输入框name属性的值相同
-单选框和多选框提交的数据是on: 设置value属性

4练习学生管理系统

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册学生信息</title>
	</head>
	<body>

		<!-- 添加音频 controls使用控制组件-->
		<audio controls="controls">
			<!-- 指定资源的位置 -->
			<source src="jay.mp3"></source>
		</audio>
		<!-- 添加视频 controls使用控制组件-->
		<video controls="controls" loop="loop">
			<source src="b.mp4"></source>
		</video>
	
		<!-- form标签用来提交数据,
			method属性用来指定提交数据的方式,
			action属性用来指定提交到哪里
		-->
		<form method="post" action="#">
			<table>
				<tr>
					<td>
						<h2>学生信息管理系统MIS</h2>
					</td>
				</tr>
				<tr>
					<td>姓名:</td>
				</tr>
				<tr>
					<td>
						<input type="text" name="user" placeholder="在这里输入姓名"/>
					</td>
				</tr>
				<tr>
					<td>年龄:</td>
				</tr>
				<tr>
					<td>
						<input type="number" name="age" placeholder="在这里输入年龄"/>
					</td>
				</tr>
				<tr>
					<td>
						性别:(单选框)
						<input type="radio" name="sex" value="1" checked="checked"/>男
						<input type="radio" name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>
						爱好:(多选)
						<input type="checkbox" name="hobby" value="1" checked="checked"/>乒乓球
						<input type="checkbox" name="hobby" value="2"/>爬山
						<input type="checkbox" name="hobby" value="3"/>唱歌
					</td>
				</tr>
				<tr>
					<td>
						学历:(下拉框)
						<select name="xueli">
							<option value="1">本科</option>
							<option value="2">研究生</option>
							<option value="3">硕士</option>
							<option value="4">专科</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						入学日期:
						<input type="date" name="day"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="保存"/>
						<input type="reset" value="取消"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

四css

-1, 概述

css全称是caskading stylesheet 层叠式样式表,用来修饰html
css语法: 元素的选择器{属性名: 属性值;属性名: 属性值;属性名:属性值}
css使用的位置:

行内css(给标签加了一个style属性)
内部css(使用html提供的style标签,把css代码包起来)
外部css(在网页里,引入一个外部的css文件)

-2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 css的入门案例</title>
		<!-- 2. 内部CSS,使用HTML提供的style标签 -->
		<style>
			/* 语法:选择器{ css的效果 } */
			h1{ /* 设置h1的文字居中 */
				text-align:center;
			}
		</style>
	</head>
	<body>
		<!-- 1. 行内CSS,设置style属性,尽量不用 -->
		<div style="text-align:center;">我是div1</div>
		<div style="text-align:center;">我是div2</div>
		<h1>我是h1</h1>
		<h1>我是h2</h1>
		<h1>我是h3</h1>
	</body>
</html>

-3 选择器

css提高的一种方式,可以方便的选中网页中的各种元素
常见的选择器: 简单选择器 (标签名,ID ,类) 分组选择器属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试  css选择器</title>
		<!-- 内部CSS -->
		<style>
			/* 1. 标签名选择器:选中了网页中,所有标签名字叫div的元素 */
				div{ /* 选中所有div的 */
					color:red; /* 文字设置成红色 */
					border-style:dashed; /* 设置虚线边框 */
					border-radius:15px; /* 圆角边框 */
					border-color: green; /* 边框的颜色*/
				}
				h1{ /* 选中所有h1 */
					background-color:Tomato; /* 背景颜色 */
					color:white; /* 文字颜色 */
				}
			/* 2. */	
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		<div>我是div4</div>
		<span>我是span1</span>
		<span>我是span2</span>
		<span>我是span3</span>
		<h1>我是h1</h1>
		<h1>我是h2</h1>
		<h1>我是h3</h1>
	</body>
</html>

qq_40151384

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cgb2107-第二阶段-day07-html and css

一表单签名最大的作用就是可以提交数据把表格里想要收集的数据可以提交给服务器注册表单-1 测试<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>测试表单标签</title> </head> <body> <!-- 1. 表单标签form:用来提交数据,默认数据是在地址栏中拼接的提交的数据有两种方式:
复制链接

扫一扫