ICode9

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

2021-05-11

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

标签: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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

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

ICode9版权所有