浅学-前端小知识----＞1

最新推荐文章于 2024-11-17 17:08:10 发布

m0_67214602

最新推荐文章于 2024-11-17 17:08:10 发布

阅读量176

点赞数

文章标签：前端蓝桥杯 webview

本文链接：https://blog.csdn.net/m0_67214602/article/details/124788709

版权

一、常用标签

1、<center>居中</center>
2、换行<br />换行
3、 <h1>一级标题</h1>
       <h2>二级标题</h2>
       <h3>三级标题</h3>
       <h4>四级标题</h4>
       <h5>五级标题</h5>
       <h6>六级标题</h6>

4、画横线

<hr />

<hr width="50%"/><!--宽度为一半-->

5、图片标签

<img src="img/1.jpg" alt="图片" width="20%" title="图图图" />

快捷键alt+？->直接输出img/1.jpg
alt表示说明
title表示这里输入的信息会在鼠标移到元素上时显示一段工具提示文本

6、超链接

<a href="http://www.baidu.com">baidu</a>

7、<p>段落</p>
<p>段落之间有间隔</p>

8、表格

table表格{

            tr表示行
           td表示列
           colspan表示列占据几格
           rowspan表示行占据几格
           cellpadding表示格子内边距
           cellspacing表示格子之间的距离

}

<table width="500px" border="1" cellpadding="5px" cellspacing="10px">
			<tr height="30px" >
				<th width="20%">第一列标题</th>
				<th>第二列标题</th>
				<th>第三列标题</th>
			</tr>
			
			<tr>
				<td>1</td>
				<td colspan="2">2</td> <!--相当于2占据两列，把3挤掉了-->
                <!--<td>3</td> -->
			</tr>
			
			<tr>
				<td>4</td>
				<td rowspan="2">5</td> <!--相当于5占据两行，把8挤掉了-->
				<td>6</td>
			</tr>
			
			<tr>
				<td>7</td>
				<!--<td>8</td>-->
				<td>9</td></tr>
			
		</table>

9、表单

            radio表示单选
           checkbox表示多选
           required表示必填
           checked表示选定/默认
           selec-option表示下拉框
           textarea表示文本框
           number表示只能输入数字
           file表示添加文件
           email表示邮箱
           color表示颜色
           date表示时间

<form action="" method="post">
			<!--required表示必填-->
			<input type="text" name="username" required/><br />
			<input type="password" name="password"  /><br />
			<input type="radio" name="gender" value="m" />男<br />
			<!--checked表示选定/默认-->
			<input type="radio" name="gender" value="f" checked="checked"/>女<br />
			<input type="checkbox" name="habit" id="habit" value="bb" />篮球<br />
			<input type="checkbox" name="habit" id="habit" value="fb" />足球<br />
			<textarea rows="10" cols="50">这是大的文本框</textarea><br />
			<!--下拉框-->
			<select name="province">
				<option value="fujian">福建</option>
				<option value="guangdong"> 广东</option>
				<option value="guangxi">广西</option>
			</select><br />
			<input type="number" name="mobile"  /><br />
			<input type="file" name="picture" /><br />
			<input type="color" name="color"  /><br />
			<input type="email" name="email"  /><br />
			<input type="submit" value="保存" /><br />
			<input type="date" />
		</form>

10、样式

（1）越靠近元素的权限越高
（2）写在越下面的权限越高，会覆盖上面同含义的东西，比如color
（3）style可以写在上面，也可以写在下面
（4）导入css样式用link..

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			/*选择器{样式:样式值；。。。}*/
			p{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<!--
        	作者：offline
        	时间：2022-05-15
        	描述：靠近元素越近的权限越高，最终red应用上去
        -->
		<p style="color: red;text-align: center;">一二三十五</p>
		
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<style type="text/css">
			/*选择器{样式，}*/
			p{
				color: green;
			}
		</style>
	</body>
</html>

11、选择器

em表示em位置的文本变化同时变成斜体,后代选择器
strong表示加粗
span
p>em，p后面跟着em马上改变（颜色）

<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
              <!--
              	<style type="text/css">
			p{
				color: red;/*标签选择器，不常用*/
			}
			#p2{
				color: pink;/*id选择器，id唯一,前面要加#*/
			}
			.pclass{
				color: black;/*类选择器，可多个类，最好用,类和类之间用空格隔开，前面加.*/
			}
			.center{
				text-align: center;
			}
		</style>
              写在main.css文件下-->
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>
	<body>
		<p>一二三四五</p>
		<p id="p2">上山打老虎</p>
		<p class="pclass center">老虎打不着</p><!--类和类之间用空格隔开-->
		<p>空间小松鼠</p>
		
		
		<p>一给<strong>我里<em>giao</em></strong></p>
		<p>黑<span class="importcontent">火</span>凤凰</p>
		<p>好的<em>你好</em></p>
		<em>oknice</em>
		
		
	</body>
</html>

12、main.css文件

p{
	color: red;/*标签选择器，不常用*/
}

#p2{
	color: pink;/*id选择器，id唯一,前面要加#*/
}

.pclass{
	color: black;/*类选择器，可多个类，最好用,类和类之间用空格隔开，前面加.*/
}

.center{
	text-align: center;
}


*{
	font-size: 14px;
}
/** *表示所有 **/

p em{
	color: yellow;
}
/** em表示em位置的文本变黄斜体,后代选择器**/

.importcontent{
	color: paleturquoise;
}
/** 表示em位置的文本变黄,孩子选择器**/

p>em{
	color:purple ;
}
/**p>后面跟着em马上改变颜色**/

13、伪类

    伪类顺序不能调换，但元素可以少
   a:link表示还没点过
   a:visited表示已经点过了
   a:hover表示鼠标移到上面显示啥
   a:active表示点了还没释放鼠标
   cursor: pointer表示鼠标移上去变成一只手
   h1+p跟在h1后面的会变,相邻的
   属性选择器[type="text"]{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类</title>
		<style type="text/css">
			a:link{/*还没点过,no*/
				color: chartreuse;
			}
			a:visited{/*点过了*/
				color: red;
			}
			a:hover{/*鼠标移到上面*/
				color: gold;
			}
			a:active{
				/*点了还没释放鼠标*/
				color: brown;
			}
			
			h1+p{
				/*跟在h1后面的p会变,相邻的*/
				color: red;
			}
			/*属性选择器*/
			[type="text"]{
				max-width: 60px;
			}
		</style>
	</head>
	<body>
		<a href="index.html">yoyo</a>
		
		<h1>一给我里giao</h1>
		<p>一给</p>
		<p>窝里giao</p>
		<!--text的长度变化，password不变,用属性选择器-->
		<input type="text" />
		<input type="password" />
	</body>
</html>

14、伪元素

<html>
	<head>
		<meta charset="UTF-8">
		<title>伪元素</title>
		<style type="text/css">
			body:first-line{
				/*body第一行变成红色*/
				color: red;
			}
		</style>
	</head>
	<body>
		<p>小鸟伏特加</p>
		<p>一给我里giao</p>
		<p>奥利给真好</p>
		<p>yoyo</p>
	</body>
</html>

15、div和span

<div>div占据一整行</div>大家好
<span>span不会占据一整行</span>大家好

16、与字体有关的样式

<html>
	<head>
		<meta charset="UTF-8">
		<title>与字体有关的样式</title>
		<style type="text/css">
			p{
				font-family: "微软雅黑";/*字体类型*/
				font-size: 30px;/*字体大小*/
				font-style: italic;/*字体是否倾斜*/
				font-weight: 900;/*加粗*/
				
				/*font:italic "gill sans ultra bold condensed"6px "楷体"*//*一次性写*/
			}
		</style>
	</head>
	<body>
		<p>Helloween</p>
		
	</body>
</html>

17、与文本有关的样式

<html>
	<head>
		<meta charset="UTF-8">
		<title>与文本有关的</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<p style="text-align: left;">一二三四五</p>
		<p style="text-align: center;">七八九十勾</p>
		<p style="text-align: right;">12345</p>
		<p style="text-align: justify; text-indent: 2em;line-height: 1.5em;color: pink;">目前无论是整个人工智能的发展，还是安防智能化的发展，其水平仍然存在起步的阶段，人工智能是安防领域的未来，在通往未来的道路上，还有许许多多障碍和困难需要跨越和克服，但总体趋势是乐观的，只有具备自主、个性化、不断进化完善的人工智能大脑，才能解决安防领域日益增加的需求，成为广大用户的专家和助手，提升整个安防领域的智能化水平，推动安防产业的升级换代。</p>
<!--style="text-align: justify;"两端对齐,2em---2个字的大小（相对的单位）line-height: 1.5em行高，text-indent: 2em;表示空两个单位-->
		<a href="www.baidu.com" style="text-decoration: none; cursor: text;">baidu</a><!--style="text-decoration: none去下划线，line-though从中间穿一条线 ,cursor: wait;鼠标样式-->
		
	</body>
</html>

18、与背景有关的样式

图片大小width和height
   width: 878px;
   height: 863px;
   background-size:100% 100% ;
   <div>
           <h1 style="color: white;text-align: center;">一二三四五六千</h1>
       </div>
   可以在图片上写字

<html>
	<head>
		<meta charset="UTF-8">
		<title>与背景有关的样式</title>
		<style type="text/css">
			div{
				width: 1000px;
				height: 863px;
				background-color: springgreen;/*背景颜色*/
				background-image: url(img/1.jpg);/*背景图片*/
				background-repeat:no-repeat;/*repeat-x--x轴重复覆盖，no-repeat不重复*/
				background-position: right;/*从右边开始填充*/
				/*background-size:100% 100% ; 背景图片的size*/
				margin-top: 20px;/*外边距*/
			}
		</style>
	</head>
	<body>
		<div>&nbsp;
                   <!--
                   	作者：offline
                   	时间：2022-05-15
                   	描述：为啥--加个&nbsp--》表示div里有东西，标题不和divtop一个起点，要让文字下来一点margin-top: 20px;
                   -->
			<h1 style="color: white;text-align: center;">一二三四五六千</h1>
		</div>
	</body>
</html>

19、与列表有关的样式

<html>
	<head>
		<meta charset="UTF-8">
		<title>与列表有关的样式</title>
		<style type="text/css">
			ul{
				list-style: circle;/*列表样式*/
				/*list-style-image: url(img/1.jpg);
				list-style-position: inside;图片要小小的*/
			}
		</style>
	</head>
	<body>
		<ul>
			<li>111</li>
			<li>222</li>
			<li>333</li>
			<li>cool</li>
		</ul>
	</body>
</html>

20、盒子模型

div里文字与div的内边距会把盒子模型撑大
   padding-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 10px;-----220x220
   padding内边距
   margin外边距
   border边框

<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型（框模型）</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: palegoldenrod;
				padding-top: 10px;
				padding-left: 10px;
				padding-right: 10px;
				padding-bottom: 10px;
				/*顺时针 padding:10px 20px 30px 40px*/
				/*padding:10px 20px上下10px,左右px*/
				/*padding：10px,20px,30px上10，下20，左右30*/
				border-color: red;/*边框颜色*/
				border-width: 1px;
				border-style: solid;/*所有边框*/
				border-bottom:dashed blue 2px ;
				margin-top: 50px;
				margin-left: 100px;
				margin-bottom: 200px;
				/*顺时针 margin:10px 20px 30px 40px*/
			}
		</style>
	</head>
	<body>
		<div>哈哈哈哈哈</div>
		<span style="width:100px ;height: 30px; border-bottom: solid 2px black; padding-bottom: 4px;">hello</span>
		<span style="width: 200px;height: 60px;font-size: 36px;border-left: solid 4px darkgoldenrod;padding-left: 10px;">123</span>
	</body>
</html>

21、外边距的合并

上下外边距都有的只会取其中一个最大的
外边距合并（顶端）：因为div和div之间没有东西，有共同起始，所以会一起下滑，加个空格可以解决

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外边距的合并</title>
	</head>
	<body>
		<div style="width: 100px;height: 100px;background-color: red;margin-bottom: 10px;"></div>
		<div style="width: 100px;height: 100px;background-color: pink;margin-top: 30px;"></div>
		<hr />
              <!--
              	加条横线
              -->
		<div style="width: 300px;height: 300px;background-color: red;">
			&nbsp;
			<div style="width: 100px;height: 100px;background-color: yellow;margin-top: 50px;">
				hello
			</div>
		</div>
	</body>
</html>

22、浮动

<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div style="background-color: red;float: right;" >1</div>
                                                                 <!--
                                                                 	作者：offline
                                                                 	时间：2022-05-15
                                                                 	描述：float: right;让1向右浮动，2上面没有东西，所以2，3往上
                                                                 -->
		<div style="background-color: green;float: left;" >2</div>
		<div style="background-color: palegoldenrod;" >3</div><!-- 3藏在2下面，因为2是浮动的  -->
	</body>
</html>