day03学习总结

白昼乌龙茶

已于 2022-08-19 20:51:42 修改

阅读量292

点赞数

分类专栏：学习总结二文章标签：学习 html javascript

于 2022-08-19 20:27:09 首次发布

本文链接：https://blog.csdn.net/qq_53884348/article/details/126418793

版权

学习总结二专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、盒子模型

组成：内容(content)+内边距(padding)+边框(border)+外边距(margin)

注意点：

两个盒子纵向排列同时给两个盒子设置margin值取的两个盒子margin中较大的值

两个盒子横向排列同时给两个盒子设置margin值取的是两个盒子margin值之和

两个嵌套的盒子给子容器设置外边距的时候父容器会随着子容器往下进行移动此为父容器塌陷，解决方法：给父容器设置一个属性:overflow: hidden;

单盒

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: solid 1px blueviolet;
				margin-left: 40%;
				padding:50px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

嵌套盒

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#no1{
				width: 600px;
				height: 700px;
				border: solid 1px rebeccapurple;
				overflow: hidden;
				
			}
			#no2{
				width: 300px;
				height: 350px;
				border: solid 1px blue;
				margin-top: 40px;
			
			}
		</style>
	</head>
	<body>
		<div id="no1"><div id="no2"></div></div>
		
	</body>
</html>

二、元素转换

HTML标签可以分为三类：

块元素：

不跟据内容进行填充，独占一行例如：<p> <div> <h1>等

行元素：

根据内容进行填充，不是独占一行例如： <a> <em> <b> <span>等

行块元素：

既有块元素特征，又有行元素特征，不是独占一行，可以设置其宽高例如: <img>等

元素类型之间的转换：

disable： inline 行元素

disable：block 块元素

disable：inline-block 行块元素

disable：none 隐藏元素

案例：

需求：

分析：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul li{
				display: inline-block;
				list-style-type: none;
			}
			.c1{
				color: burlywood;
				font-size: 14px;
			}
			.c2{
				color: darksalmon;
				font-size: 14px;
			}
			.c3{
				color: blue;
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<h3>热播</h3>
		<ul>
			<li>
				<img src="img/img1.png"/>
				<p class="c1">神武赵子龙</p>
				<p class="c2">怒，林更新不抱网红抱女神</p>
				<p class="c3">点击次数：242445次</p>
			</li>
			<li>
				<img src="img/img2.png"/>
				<p class="c1">旋风十一人</p>
				<p class="c2">胡歌变教练在撩前女友</p>
				<p class="c3">点击次数：242445次</p>
				
			</li>
			<li>
				<img src="img/img3.png"/>
				<p class="c1">太阳的后裔</p>
				<p class="c2">宋慧乔吃嫩草</p>
				<p class="c3">点击次数：242445次</p>
			</li>
			<li>
				<img src="img/img4.png"/>
				<p class="c1">山海经之赤影传说</p>
				<p class="c2">娜扎张翰再度联手</p>
				<p class="c3">点击次数：242445次</p>
			</li>
		</ul>
	</body>
</html>

三、浮动

概念：在网页中元素要么是从左到右进行排列要么是从上到下进行排列如果需要改变这种排列的规则就可以使用浮动让元素飘起来(脱离标准文档流)

设置方法：

float ： left 或者 right

清除浮动：

clear :left 或者 right 或者两个都清除 both

注意点：

A.遇到其它元素的边界的时候就会停止浮动

B.遇到浏览器的窗口的时候也会停止浮动

C.浮动元素会对不浮动的元素产生影响

案例：

需求：

分析：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				list-style-type: none;
			}
			#box{
				width: 100%;
				height: 45px;
				background-color: #4d4d4d;
			}
			#box_left{
				float: left;
			}
			#box_left a:link{
				color: white;
				font-size: 14px;
				line-height: 45px;
				margin-left: 100px;
				text-decoration: none;
			}
			#box_left a:hover{
				color: orange;
			}
			#box_right{
				float: right;
			}
			#box_right li{
				float: left;
			}
			#box_right a:link{
				color: white;
				font-size: 14px;
				line-height: 45px;
				padding-right: 10px;
				text-decoration: none;
			}
			#box_right a:hover{
				color: orange;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="box_left">
				<a href="#">小米商城</a>
			</div>
			<div id="box_right">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">注册</a></li>
					<li><a href="#">消息通知</a></li>
					<li><a href="#">购物车(0)</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

四、相对定位

五、JS

简介：

组成部分：

A.ECMAScript，描述了该语言的语法和基本对象提供了一些基础语言变量选择结构循环结构

B.文档对象模型（DOM），描述处理网页内容的方法和接口主要用于操作节点对象(标签)

C.浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。主要用于与浏览器来进行交互

作用：

A.嵌入动态文本于HTML页面。

B.对浏览器事件做出响应。

C.读写HTML元素。

D.在数据被提交到服务器之前验证数据。

E.检测访客的浏览器信息。控制cookies，包括创建和修改等。

F.基于Node.js技术进行服务器端编程。

六、JS基础语言

变量：

1.概念：在程序运行期间其值会发生改变的量就是变量

2.java定义变量 :数据类型变量名= 变量值

3.js定义变量: var 变量名= 变量值例如 var num =10;

4.说明：

A.var 是js定义变量的关键字 js定义变量在赋值的时候确定其数据类型

B.定义的变量名不要与js中关键字重名

基本数据类型：

1.java基本数据类型:四类八种整数类型小数类型布尔类型字符类型

2.js中基本数据类型:数值类型(number) 布尔类型(boolen) 字符串类型(string) 未定义类型(unidefine) null类型

3.获取变量数类型方法： typeof()

引用数据类型：

1.java中引用数据类型:字符类枚举数组对象集合注解 .......

2.在js中对象、date，在js中一般json就是对象 {}==>对象， []==>数组

3.定义json对象 {uid:12,"uname":"张三","uage":20}==>表示是对象

4.定义json数组:[{uid:12,"uname":"张三","uage":20},{uid:12,"uname":"张三","uage":20}]==>表示数组

算术运算符：

逻辑运算符：

关系运算符：

赋值运算符：

三元运算符：

1.语法：表达式1 ? 表达式2 : 表达式3

2.说明：

A.表达式1的返回值类型必须是boolean类型

B.表达式2与表达式3的数据类型可以不相同可以是任意的数据类型

选择结构：

1.多分支if选择结构：

if(表达式1) {

执行操作1

}else if(表达式2){

执行操作2

}else if(表达式3){

执行操作3

....

}else { }

2.switch选择结构：

switch(表达式) {

case 常量1：

执行操作1

break

case 常量2:

执行操作2

break;

....

default:

执行操作n

break; }

循环结构：

1.for循环：

for(初始化语句;循环条件判断;循环变量改变) {

循环操作

}

2.while循环：

初始化语句

while(循环条件判断) {

循环操作循环变量改变

}

3.do while循环：

初始化语句

do{

循环操作

循环变量改变

}whie(循环条件判断);

函数(方法)：

1.java函数语法：

访问修饰符返回值类型方法名称(参数列表) {

方法体;

retrun 返回值;

}

2.js函数语法：

function 方法名称(参数列表) {

方法体;

return 返回值;

}

3.说明：

A.function 是js中定义函数的关键字

B.在js中定义方法的时候不需要编写参数的数据类型直接编写变量名

七、JS中三种弹框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
	</head>
	<body>
		<script>
			//警告型弹框
			// alert("班长洗脚");
			
			
			//判断是弹框
			// var flag=confirm("是否返回");
			// if(flag){
			// 	alert("返回成功");
			// }else{
			// 	alert("返回失败");
			// }
			
			
			//输入性弹框
			// var s = prompt("请输入年龄","21");
			// alert(s);
		</script>
	</body>
</html>

八、JS中的事件

其中主要的为：

1. onfocus 获取焦点

2.onblur 失去焦点

3.onchange 更改条目项

4.onclick 单击事件

5.ondbclick 双击事件

6.onload 页面加载完成

7.onmouseover 鼠标移入

8.onmouseout 鼠标移出

9.onsubmit 提交事件

测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function showInfo1(){
				console.log("获取焦点");
			}
			function showInfo2(){
				console.log("失去焦点");
			}
			function showInfo3(){
				alert("免费足浴");
			}
			function showInfo4(){
				alert("VIP按摩");
			}
			window.onload=function(){
				alert("页面加载完成");
			}
			function showInfo5(){
				console.log("移入");
			}
			function showInfo6(){
				console.log("移出");
			}
			function showInfo7(){
				document.getElementById("dd").submit();
			}
		</script>
		<p>请输入班长洗脚地点：<input type="text" onfocus="showInfo1()" onblur="showInfo2()" /></p>
		<select onchange="alert(this.value)">
			<option value="中式">中式</option>
			<option value="泰式">泰式</option>
			<option value="VIP">VIP</option>
		</select>
		<h3 onclick="showInfo3()">单击获得免费洗脚一次</h3>
		<h2 ondblclick="showInfo4()">双击获得VIP级按摩一次</h2>
		<h4 onmouseover="showInfo5()" onmouseout="showInfo6()">班长喜欢VIP级按摩</h4>
		<form id="dd" action="index.html" method="GET">
			<input type="button" value="提交" onclick="showInfo7()"/>
		</form>
	</body>
</html>

九、DOM

简介：

1.文档对象模型，是w3c组织推荐的处理可拓展标记语言（HTML或者xml）的标准-文档：一个页面就是一个文档，DOM中使用document表示

2.-元素：页面中所有的标签都是元素，DOM中使用element表示

3.-节点：网页中所有的内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 DOM把以上内容都看做是对象

4.浏览器都会将HTML加载成一个DOM树

获取节点对象的方法：

测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input id="ww" type="text"/>
		<input class="cc" type="checkbox" value="抽烟"/>抽烟
		<input class="cc" type="checkbox" value="喝酒"/>喝酒
		<input class="cc" type="checkbox" value="烫头"/>烫头
		<input type="radio" name="sex" value="男"/>男
		<input type="radio" name="sex" value="女"/>女
		<p></p>
		<input type="button" onclick="showInfo1()" value="根据id获取"/>
		<input type="button" onclick="showInfo2()" value="根据类获取"/>
		<input type="button" onclick="showInfo3()" value="根据name获取"/>
		<input type="button" onclick="showInfo4()" value="根据标签名获取"/>
		<script>
			function showInfo1(){
				var a = document.getElementById("ww");
				alert(a.value);
			}
			function showInfo2(){
				var array = document.getElementsByClassName("cc");
				for(var i=0;i<array.length;i++){
					alert(array[i].value);
				}
			}
			function showInfo3(){
				var array = document.getElementsByName("sex")
				for(var i=0;i<array.length;i++){
					alert(array[i].value);
				}
			}
			function showInfo4(){
				var array = document.getElementsByTagName("input")
				for(var i=0;i<array.length;i++){
					alert(array[i].value);
				}
			}
		</script>
	</body>
</html>