cgb2108-day08-CSDN博客

本文链接：https://blog.csdn.net/u012932876/article/details/120696190

文章目录

一,表单提交数据

–1,代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 表单标签</title>
	</head>
	<body>

	<!-- 添加音频 -->
		<audio controls="controls"> 
			<source src="jay.mp3"></source>
		</audio>
		<!-- 添加视频 -->
		<video controls="controls">
			<source src="b.mp4"></source>
		</video>
		
		<div>大家好</div>
		<div>大家好</div>
		<div>大家好</div>
		
		<p>大家好2</p>
		<p>大家好2</p>
		<p>大家好2</p>
		
		<span>大家好3</span>
		<span>大家好3</span>
		<span>大家好3</span>

	<!--1.表单:本质就是表格,只有表单才能提交数据(把浏览器输入的数据交给java程序处理)
		form标签专门用来提交数据:必须使用form标签 + 必须有submit按钮 + 必须配置name属性
		地址栏: http://127.0.0.1:8848/cgb2108/test3.html?user=jack
		?用来拼接用户输入的数据,user=jack,其中user是给标签配置的name属性的值,jack是用户从浏览器上输入数据
		
		面试题:提价数据的两种方式: get方式 和  post方式
		get方式:被拼接在地址栏,方便看,坏处是不安全,长度受限--不推荐
		post方式:不方便看,好处是安全--推荐!!!
		method属性用来指定数据的提交方式,默认是get
		action属性用来指定数据将要交给哪个程序处理
	-->
		<form method="post" action="#">
			<h1>注册表单</h1>
			<table bgcolor="lightgray" border="1px" 
				bordercolor="green" cellspacing="0"
				width="500px">
				<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> <!-- 问题1:提交的数据都是on,加value属性,区分提交的数据-->
						<input type="radio" name="sex" value="1"/>男
						<input type="radio" name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td><!-- 问题1:提交的数据都是on,加value属性,区分提交的数据-->
						<input type="checkbox" name="hobby" value="lq"/>篮球
						<input type="checkbox" name="hobby" value="zq"/>足球
						<input type="checkbox" name="hobby" value="pqq"/>乒乓球
					</td>
				</tr>
				<tr>
					<td>城市:</td>
					<td>
						<select name="city"> <!-- 定义下拉框-->
							<option value="0">-请选择-</option> <!-- 定义下拉选项-->
							<option value="1">北京</option>
							<option value="2">广东</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td>
						<input type="file" name="touxiang"/>
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text" />
						<img src="a.png" />
						<input type="button" value="点我换一张"/>
					</td>
				</tr>
				<tr>
					<td>自我描述:</td>
					<td>
						<textarea></textarea> <!-- 文本域-->
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" />
						<input type="reset" value="重置"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

二,CSS

–1,概述

全称是层叠样式表 stylesheet ,作用是用来修饰HTML网页.
语法: 选择器{ 属性名:属性值 ; 属性名:属性值 ; 样式3…}
学习重点: 选择器 + 各种属性
位置:
1, 行内CSS:只作用在当前行, 给当前元素使用style属性来修饰样式
html <h1 style="text-align:center;">我是h1</h1>
2, 内部CSS: 在HTML代码里使用style标签,包裹着CSS代码.提高了CSS代码的复用性
3, 外部CSS: 把HTML代码和CSS代码分离,在HTML中引入CSS文件

–2,入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 css</title>
		<!-- style标签是HTML提供的,写css代码 -->
		<style>
			/* CSS语法:选择器{样式} */
			div{/* 选中div */
				text-align: center;/* 文字居中 */
			} 
		</style>
	</head>
	<body>
		<!--style属性用来设置样式  属性名:属性值; -->
		<h1 style="text-align:center;">我是h1</h1><!-- 设置文本居中 -->
		
		<div>我是div1</div>
		<div>我是div2</div>
	</body>
</html>

–3,基础选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 css</title>
		<!-- 用HTML提供的style标签包裹css代码 -->
		<style>
			/* 1.标签名选择器:根据标签的名字选中 */
				div{/* 练习1:修饰div的样式 */
					color: red;/* 字的颜色 */
					background-color: darkgray;/* 背景色 */
					border-style:dashed;/* 边框的样式,虚线 */
					border-color:blue;/* 边框的颜色 */
				}
				span{/* 练习2:修饰span的样式 */
					font-size: 30px;/* 字号 字体 */
					font-family: "黑体";/* 字体 */
				}
			/* 2.class选择器:根据class属性的值选中元素,class的值能相同
				步骤:给元素加class属性+通过.获取元素 
			*/
				.a{/* 练习3:修饰div1的样式*/
					font-size: 25px;/* 字号 */
				}
				.b{/* 练习4:修饰span1的样式 */
					opacity:0.4 ;/* 透明度 0.0~1.0,数值越小越透明 */
				}
			/* 3.id选择器:根据id属性的值选中元素,要求id的值不能相同 
				步骤:给元素添加id属性 + 通过#获取值
			*/
				#c{/* 练习5:修饰a2的样式 */
					border-style: solid; /* 边框的样式:实线*/
					border-radius: 25px; /* 圆角 */
				}
		</style>
	</head>
	<body>
		<div class="a">我是div1</div>
		<div>我是div2</div>
		<span class="b">我是span1</span>
		<span>我是span2</span>
		<a class="a b">我是a1</a> <!--同时拥有a b两种样式的修饰-->
		<a id="c">我是a2</a>
	</body>
</html>

–4,高级选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 CSS高级选择器</title>
		<style>
			/* 1.分组选择器:把多种选择器的结果,组成一组进行修饰,逗号隔开 */
				a , input{ /* 利用标签名选择器,选中一组元素,修饰样式 */
					/* 边框: 宽度 样式 颜色; */
					border:1px dashed red;
				}
				/* 利用基本选择器,选中一组元素,修饰样式 */
				.x , #y , input{
					font-size: 20px;
				}
			/* 2.属性选择器:按照标签的属性来选择元素,标签名[属性名]*/
				a[href]{ /* 选中拥有href属性的a标签*/
					font-size: 50px;
				}
				input[type='text']{/* 选中type="text"的input设置背景色 */
					background-color: green;
				}
		</style>
	</head>
	<body>
		<a class="x">我是a1</a>
		<a href="#" class="x">我是a2</a>
		<a href="#" id="y">我是a3</a>
		<input type="text" />
		<input type="password" placeholder="请您输入密码..."/>
		<input type="text" />
	</body>
</html>

三,盒子模型

–1,概述

CSS认为HTML里的每个元素都是一个盒子.
外边距margin: 盒子间的距离,可以设置左边距,右,上,下
边框border: 盒子的边框,可以设置宽度/颜色/样式
内边距padding: 盒子里的内容和盒子的边框的距离,可以设置左边距,右,上,下
内容: 可以设置 width 和 height

–2,练习

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 外边距: 单选框是一个盒子    男也是一个盒子   两个盒子的距离margin -->
		<input type="radio" style="margin: 20px;"/>男 
		
		<!-- 内边距: 一个盒子里, 内容到边框的距离padding -->
		<input type="text" placeholder="你好" style="padding: 20px;"/>
		
	</body>
</html>

四,HTML CSS的综合案例

–1,制作小票

在这里插入图片描述

创建CSS文件,存放css代码

body{/* 统一网页风格*/
	width: 400px;/* 宽度 */
	font-size: 15px;/* 字号 */
}
/* 修改字号 */
.a{/* class选择器,选中网页中class=a的元素 */
	font-size: 30px;
}
/* 修饰文字居中 */
.b{
	/* text-align: center; */
	padding-left: 100px;/* 内边距 */
}
/* 修饰水平线 */
hr{
	border:1px dashed green; /* 宽度 虚线 绿色*/
}
/* 修饰文本缩进/首行缩进 */
#note{
	text-indent:30px;
}
/* 修饰图片居中 */
img{
	padding-left: 80px;
}

创建html文件,引入css文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 小票</title>
		<!-- 1.松耦合,分离了HTML和css代码,在网页里引入css文件 -->
		<link rel="stylesheet" href="1.css"/>
		
	</head>
	<body>
		<div>顾客联</div>
		<div class="a">请您留意取餐账单号</div>
		<div class="b">自取顾客联</div>
		<div>永和大王(北二环西路店)</div>
		<div>010-6211313</div>
		<div class="b">--结账单--</div>
		<div class="a">账单号:P000009</div>
		<div>账单类型：堂食</div>
		<div>人数：1</div>
		<div>收银员：张静</div>
		<div>开单时间：2018-04-17 07:24:29</div>
		<div>结账时间：2018-04-17 07:24:38</div>
		<hr />
		<table>
			<tr>
				<th>数量</th>
				<th>品项</th>
				<th>金额</th>
			</tr>
			<tr>
				<td>1</td>
				<td>油条豆浆套餐<br /> 1X--油条<br />1X--现磨豆浆(热/甜)   </td>
				<td>7.00</td>
			</tr>
		</table>
		<hr />
		<table>
			<tr>
				<td width="180px">支付宝花呗一元早餐</td>
				<td>3.00</td>
			</tr>
			<tr>
				<td>合计</td>
				<td>4.00</td>
			</tr>
			<tr>
				<td>支付宝</td>
				<td>1.00</td>
			</tr>
			<tr>
				<td>支付宝补贴</td>
				<td>3.00</td>
			</tr>
		</table>
		<hr />
		<div>打印时间：2018-04-17 07:24:38</div>
		<hr />
		<div id="note">根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
		<img src="2.png"/>
		<div>官网：www.yonghe.com.cn</div>
		<div>加盟热线：86-21-60769397 或 86-21-60769002</div>
		
	</body>
</html>