HTML 表单和css选择器

最新推荐文章于 2023-07-21 17:33:34 发布

日暮途远丨

最新推荐文章于 2023-07-21 17:33:34 发布

阅读量120

点赞数

本文链接：https://blog.csdn.net/weixin_51721670/article/details/111184913

版权

1.8 表单form

表单通常用于让用户能够进行输入操作使用的，例如常见的登录、搜索、注册、图片上传等等，用户进行信息输入，将输入的数据提交到服务器上，服务器再根据提交的数据进行分析验证反馈结果

action：指定服务器地址
method：指定表单数据的提交方式有get和post两种方式

get：默认的提交方式，get方式提交的数据会在地址栏中显示出来，很不安全，所能提交的数据量比较小，效率高
post：效率低，安全，携带大量的数据，不会在地址栏中显示
在开发的过程中post方式使用的较多，考虑安全问题

注意：表单中的数据想要提交，一定要有name属性存在
表单中所有的内容都是通过以下三个标签组成的：1.input 2.textarea 3.select

<form action="#" method="">
		 	<!-- 单行文本输入框
		 		placeholder：设置输入框中的文本提示，该属性在IE8以下不生效
		 		id：作为该标签的唯一标识
		 		name和value是一对键值对
		 		注意：如果type类型中的值不是指定的值，那都默认为text类型
		 	 -->
			 <label for="username">用户名</label><input type="text" name="uname" id="username" placeholder="请输入手机号或邮箱" value="" /><br>
			 <label for="pwd">密&nbsp;&nbsp;&nbsp;码</label><input type="password" name="password" id="pwd" value="" /><br>
			 <input type="submit" value="登陆" />
			 
			 </form>

1.9 标签划分依据

1.块状元素：单独占整行（自带换行符），可以设置宽高属性的

2.行状元素：可以在同一行显示，设置宽高不生效

3.行内块元素：既可以设置宽高，也可以在同一行显示（img-本身自带了宽高属性，display属性控制）

1.10 标签嵌套规则

1.行元素之间可以互相嵌套，行元素中不能嵌套块元素（html中是可以的，但是理论上来讲是不允许的）
2.块元素中可以嵌套任意的行元素，块元素之间也可以互相嵌套，但是有两种标签需要注意
p标签中是不允许嵌套其他任意的块元素
h系列的标签是不能互相嵌套（因为每个h标签都有默认的字体大小）

<body>
		
		<!--
		 行元素之前可以相互嵌套 
		-->
		<span>赛博朋克价格：<strong style="color: red">299</strong> 元</span>
		
		<p>
			<a href="http://www.taobao.com">淘宝网</a>
			  <a href="http://www.aiqiyi.com">爱奇艺</a>
		</p>
	</body>

2.级联样式表CSS

css就是层叠样式表，含义是表现形式与页面内容分离

2.1样式的引入方式

1.行内样式

（将样式直接写在标签上），需要使用style属性

<p style="color:red;">字体的颜色变成了红色</p>

2.内联样式

：在当前的HTML页面中使用style标签统一管理样式

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style >
			div{
				color: cadetblue;
				font-size: 20px;
			}
			p{
				color: darkgreen;
			}
		</style>
	</head>
	<body>
		<p style="color: red;">该表字体颜色</p>
		<div>内联样式，统一管理样式</div>
		<div>内联样式，统一管理样式</div>
		<hr >
		<p>样式引入方式，选择性使用，不是一定要用某一种</p>
		<p>样式引入方式，选择性使用，不是一定要用某一种</p>
		<p>样式引入方式，选择性使用，不是一定要用某一种</p>
	</body>
</html>

3.外联样式

（单独存在的一个.css的文件）使用link外部链接

div{
	color:dodgerblue;
		font-size: 20px;
}
p{
	color: darkslateblue;
}

问题：行内样式、内联样式和外联样式该如何选择

1.如果是通用样式，就选择外联样式

2.当样式内容过多时，也会将样式单独抽离成一个.css文件，方便管理

3.当某个标签有特殊样式实现，且在页面中是不重复的，出现次数唯一的，就使用行内样式

4.除了上面的几种情况，通常使用的都是内联样式

2.2基本选择器

1.标签选择器

根据标签名进行选择

<body>
		<!-- 类选择器 语法：.类名{}    例如：.div-cls{color:red;} -->
		<div class="div-cls">国家公祭日</div>
		<div class="div-cls">保护我方乌合麒麟</div>
		<div class="div-cls">铭记历史</div>
		<p class="p-cls" >大爷半夜翘成人用品店</p>
		<h5 class="h5-cls" id="p-id">双12再创销售额新高</h5>
	</body>

语法：标签名{}

例如：div{color:red;font-size:20px;}

/*标签选择器是根据标签名来的，会选中当前页面中所有该标签*/
div{
color: #00BFFF;
}
p{
color: #483D8B;
}
h4{
color: #1E90FF;
}

2.类选择器

根据指定的类名进行选择

语法：.类名{}

例如：.div-cls{color:red;}

/*代码从上往下进行加载，针对选择器而言依然生效，前提是相同的选择器类型才生效*/
/*类选择器：在标签上添加了一个class属性，不论是什么标签，只要有class属性，对应的样式就可以生效*/
.div-cls{
color: red;
}
.p-cls{
color: green;
}
.h4-cls{
color: blue;
}

3.id选择器

根据指定的id名进行选择

语法：#id名{}

例如：#div-id{color:red;}

/*id选择器：在标签上添加了一个id属性，作为唯一标识，通常不允许重复*/
#p-id{
color: #0000FF;
}

知识点

优先级顺序为： id选择器>类选择器>标签选择器，所以如果再一个css文件里同时存在两个或多个选择器时，救护难找这个循序来执行

2.3扩展选择器

1.后代选择器

上下级选择器，通过用于标签之间存在包裹关系

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style>
		    div{
		      color: #0000FF;
		    }
		    span{
		      color: aqua;
		    }
		    /* 使用空格来标识为后代选择器，其实是缩小了选择器的查找范围而已 */
		    div span{
		      color: red;
		    }
		  </style>
	</head>
	<body>
		
		 <!-- 在包裹关系中，样式有继承关系 -->
		  <div>
		    div中的不带标签的内容
		    <span>后代选择器，注意很常用</span>  //红色
		  </div>
		  <!-- 所有的选择器默认是从body标签中进行查找元素的 -->
		  <p>
		    <span>p标签中的span标签</span>
		  </p>
		
	</body>
</html>

2.后代选择器2

在包裹关系中选择等级

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
		    /* 只想让第一级span标签生效 */
		    div>span{
		      color: #1E90FF;
		    }
			/*让第二级span标签生效*/
			p>span{
				color: #0000FF;
			}
			/*让最外层span标签生效*/
			body>span{
				color: blueviolet;
			}
		    ul>li{
		      color: #483D8B;
		    }
		  </style>
		
	</head>
	<body>
		
		 <div>
		    <span>第一级span标签</span>
		    <p>
		      <span>第二级span标签</span>
		    </p>
		    <span>第一级span标签</span>
		  </div>
		  <span>最外层的span标签</span>
		  <hr >
		  <!-- 列表标签比较特殊(只能写成包裹关系，但是包裹关系存在继承的情况) -->
		  <ul>
		    <li>
		      第一级li标签
		      <ol>
		        <li>第二级li标签</li>
		      </ol>
		    </li>
		  </ul>
		
	</body>
</html>

3.组合选择器

同等级选择器，通常用于不同的标签有相同的样式

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		 <style>
		   
		    /* 逗号就代表前后的元素是同等级的 */
		    div span,p span{
		      color: #00BFFF;
		    }
		  </style>
		
	</head>
	<body>
		
		 <div>
		    div中的不带标签的内容
		    <span>组合选择器，注意很常用</span>
		  </div>
		  <p>
		    <span>p标签中的span标签</span>
		  </p>
		
		  <h4>
		    <span>h4标签中的span标签</span>
		  </h4>
		
	</body>
</html>

4.伪类选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		 <style type="text/css">
		    /* 伪类选择器：nth-of-type(n) */
		    /*p :nth-of-type(2n+1){
		    color: #FF0000;
		    }
		    p :nth-of-type(2n){
		    color: darkcyan;
		    } */
		    span:nth-of-type(2n+1){
		      color: #483D8B;
		      font-size: 18px;
		    }
		    span:nth-of-type(2){
		      color: #FF0000;
		    }
		  </style>
	</head>
	<body>
		
		  <p>
		    <span>李逵</span>
		    <span>宋江</span>
		    <span>卢俊义</span>
		    <span>花荣</span>
		    <span>西门庆</span>
		  </p>
	</body>
</html>