ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

2021-05-11

2021-05-11 19:02:09  阅读:20  来源: 互联网

标签:11 网页 05 -- 元素 color 2021 选择器 属性


一,表单标签
–1,代码




表单标签



































注册表单
用户名:


密码:

确认密码:

昵称:

邮箱:

性别:



爱好:

篮球
足球
羽毛球

					<!-- TODO 自己完成 剩下的行 -->
					<tr>
						<td>城市:</td>
						<td>
							<select  name="city"><!-- 下拉框 -->
	<!-- 选项,配置value属性,来减少给服务器输出的数据大小,就提交了bj而不是北京 -->
								<option value="bj">北京</option>
								<option value="cx">朝鲜</option>
								<option value="xa">西安</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>头像:</td>
						<td>
							<input type="file" name="tou" /> <!-- 上传文件-->
						</td>
					</tr>
					<tr>
						<td>验证码:</td>
						<td>
							<input type="text" />   <!-- 普通输入框-->
							<img src="images/a.png" /><!-- 验证码图片 -->
							<input type="button" value="点我换一张" />
						</td>
					</tr>
					<tr>
						<td>自我描述:</td>
						<td>
							<textarea>请在这儿输入....</textarea>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center"> <!-- 列合并-->
							<!-- 只有form表单的提交,提交的按钮,用来把数据提交到服务器 -->
							<input type="submit"  value="提交"/>
							<!-- reset按钮用来重置网页 -->
							<input type="reset"  value="重置"/>
						</td>
					</tr>
				</table>
			</form>
		</body>
	</html>
--2,小票
	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>永和大王小票</title>
		</head>
		<body>
				<!-- 自带换行的效果 div  p  br -->
					<div>顾客联</div>
					<div>请您留意取餐账单号</div>
			       <div>自取顾客联</div>
			       <div>永和大王(北三环西路店)</div>
			       <div>010-62112313</div>
			       <div>--结账单--</div>
			       <div>账单号:P000009</div>
			       <div>账单类型:食堂</div>
			       <div>人数:1</div>
			       <div>收银员:张静</div>
			       <div>开单时间:2018-04-17 07:24:11</div>
			       <div>结账时间:2018-04-17 07:24:22</div>
				   
				   <hr />
				   <table>
					   <tr>
						   <td>数量</td>
						   <td>品项</td>
						   <td>金额</td>
					   </tr>
					   <tr>
					   		<td>1</td>
					   		<td>
								油条豆浆套餐<br />
								1 X --非矾油条<br />
								1 X --现磨豆浆
							</td>
					   		<td>7.0</td>			   
					   </tr>
				   </table>
				   	<hr />
					 <table>
						 <tr>
							 <td>支付宝花呗一元早餐 &nbsp;&nbsp; 1</td>
							 <td>-3.0</td>
						 </tr>
						 <tr>
							 <td>合计</td>
							 <td>4.0</td>
						 </tr> <tr>
							 <td>支付宝</td>
							 <td>1.0</td>
						 </tr> 
						 <tr>
							 <td>支付宝补贴</td>
							 <td>3.0</td>
						 </tr>
					 </table>  
					   
					<!-- h5特效 -->
					<!-- 向网页中加入音频文件
						controls属性可以使用控件
					 -->
					<audio controls="controls">
						<source src="jay.mp3"></source>
					</audio>
					 <!-- 向网页中加入视频频文件
					 	controls属性可以使用控件
						loop属性用来循环播放
					  -->
					 <video controls="controls" loop="loop">
					 	<source src="b.mp4"></source>
					 </video>
		
		</body>
	</html>

--3,标签
	--html:表示这是一个网页文件,必须遵循HTML语法
	--head:设置网页的基本信息
		--title:设置网页的标题
		--meta:设置网页的编码
	--body:网页的主体
	--div:块元素,自带换行
	--p:块元素,自带换行
	--h1~h6:标题标签
	--span:不换行
	--hr:水平线
	--ol(有序) li / ul(无序) li :定义列表
	--form:表单,用来向服务器提交数据
	--table:表格
		--tr:表里的行元素
		--th:表头,自带加粗
		--td:行里的列元素
	--input:输入框
		--type:text/number/password/week/email/submit/button/file
	--br:换行
	--img:图片标签,用来往网页里加入图片

二,CSS
–1,概述
专门用来修饰HTML网页文件的样式
怎么定位元素位置 + 使用属性修饰
–2,测试




css入门

			<!-- 向html中引入css代码,使用style标签 -->
			<style>
				body{/* 把body里的所有元素居中 */
					text-align: center;   /* 文字居中 */
					background-color: bisque;   /* 背景色 */
					font-size: 20px;  /* 字号 */
				}
			</style>
			
		</head>
		<body>
			<!-- 需求:文字居中 -->
			<div align="center">hello css</div>   <!-- 换行-->
			<p style="text-align: center;">hello css</p>     <!-- 换行-->
			
			<span> 你好 </span> <!-- 不换行-->
		</body>
	</html>


--3,语法
		选择器{
			属性名=属性值;
			color=red;
			属性名=属性值;
			font-size:10px;
		}
--4,基本选择器
	--标签名选择器
		span{color:red;} /*选中网页中所有的span,设置字体颜色是红色*/
	--类选择器
		--给指定元素加class属性
			<p class="hi"> 你好 </p>
		--通过.获取class属性的位置
			.hi{ color:red; } /* 选中网页中所有class=hi的元素,修饰样式*/
	--id选择器
		--给指定元素加id属性,并且要保证id的值是唯一的
			<input id="hello" />
		--通过#获取id属性的位置
			#hello{ color:red; } /*选中网页中所有id=hello的元素*/
--5,改造小票
		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>css选择器</title>
				
				<!-- 	内部CSS -->
				<style> 
					body{/* 用来统一网页的风格 */
						width: 300px; /* 设置网页的宽度*/
						font-size: 10px; /* 统一字号 */
						color: black;/* 统一字的颜色 */
						/* background-image: url("a.png"); 背景图片 */
					}
					/* 语法:选择器{样式1;样式2;样式3} */
					/* 第一种选择器:::  标签名选择器 */
					div{
						color: red; /*红色的字,覆盖掉了body原来的效果*/
					}
					/* 第二种选择器:::  类选择器(给元素加class属性+通过.获取class的值) */
					.me{/* 获取网页中所有class=me的元素 */
						font-size: 20px; /* 字号加大 */
						text-indent: 15px;/* 首行缩进 */
					}
					/* 第三种选择器:::id选择器(给元素加id属性+通过#获取id的值) */
					#please{
						text-align: center;/* 居中 */
					}
					/* 第四种选择器:::分组选择器(统一给多个选择器的元素设置) */
					.me,#please{
						border: 2px dashed red;
						/* 设置边框 2px宽度 虚线  线的颜色*/
						border-radius: 5px;/* 边框的圆角 */
					}
					/* 第五种选择器:::属性选择器 */
					input[type='text']{ /* 按照属性的值过滤input*/
						background-color: aqua;/* 设置背景色 */
					}
				</style>
			</head>
			<body>
					<input type="text" />
					<input type="password" />
					<input type="week" />
					<input type="text" />
				
					<!-- 需求:把第一行变成红色的字 -->
					<!--行内CSS -->
					<div style="color: red;">顾客联</div> 
					<div class="me">请您留意取餐账单号</div>
				   <div id="please">自取顾客联</div>
				   <div class="me">永和大王(北三环西路店)</div>
				   <div>010-62112313</div>
				   <div id="please">--结账单--</div>
				   <div>账单号:P000009</div>
				   <div>账单类型:食堂</div>
				   <div>人数:1</div>
				   <div>收银员:张静</div>
				   <div>开单时间:2018-04-17 07:24:11</div>
				   <div>结账时间:2018-04-17 07:24:22</div>
			   
				   <hr />
				   <table>
					   <tr>
						   <td>数量</td>
						   <td>品项</td>
						   <td>金额</td>
					   </tr>
					   <tr>
							<td>1</td>
							<td>
								油条豆浆套餐<br />
								1 X --非矾油条<br />
								1 X --现磨豆浆
							</td>
							<td>7.0</td>			   
					   </tr>
				   </table>
			
			</body>
		</html>

扩展:
–把HTML和CSS的综合案例敲5遍(test3.html)
–把form综合案例敲5遍(昨天的test4.html)
–http协议
–作用:用来处理 客户端要给服务器 发送的数据 的格式
用来处理 服务器要给客户端 响应的数据 的格式
–发送数据的方式:get/post…
–请求Request:从客户端到服务器的连接过程
–请求头确定访问哪个服务器的哪个程序
–请求方式:是用了get还是post,如果是是get方式地址栏中就可以看到数据
如果是post方式,数据安全,浏览器无法看到数据
–HTTP状态码:一般是3位数,有不同意义.
常见的有:200成功,404是客户端访问了不存在的资源,5XX是服务器代码的 问题
–响应Response:从服务器到客户端的连接过程
–状态行:要遵循的协议和版本号 HTTP/1.1 404 not found
–响应报头:统计响应数据的大小
通知浏览器用什么编码打开
要展示的数据类型
–HTTP状态码:一般是3位数,有不同意义.
常见的有:200成功,404是客户端访问了不存在的资源,5XX是服务器代码的 问题
–get提交和post提交的区别
–get提交:不安全,数据都会在地址栏做拼接,数据不能太长
http://127.0.0.1/test.html ? name=123 & age=12 & addr=abc
–post提交:安全,不在地址栏中展示,只能编写java代码解析数据

标签:11,网页,05,--,元素,color,2021,选择器,属性
来源: https://blog.csdn.net/weixin_56747126/article/details/116664935

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有