微信小程序实训day01-网页基础知识(html,css,js)

最新推荐文章于 2022-11-15 17:32:22 发布

_lijian_

最新推荐文章于 2022-11-15 17:32:22 发布

阅读量466

点赞数

分类专栏：作业

本文链接：https://blog.csdn.net/ljlj8888/article/details/92740533

版权

作业专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一、HTML

1、html为超文本标记语言
2、html文档的结构
<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8">
   <title></title>
   
   <style type="text/css"></style>
</head>

<body>

       
       <script type="text/javascript"></script>
   </body>
</html>

3、标签需要符合开闭原则：开标签+闭标签

4、块级元素、行内块元素、行内元素

块级元素：可以直接设置宽高、默认占一整行
行内块元素：可以直接设置宽高、但是不占一整行
行内元素：不可以直接设置宽高、也不占一整行

5、一些常用的元素

span 是一个没有任何样式的段落标签

pre 是一个有带格式的p标签,可以保留缩进、换行（用于展示代码）

div是没有任何样式的块级元素用来包裹内容和分割内容

iframe 这是一个框架元素，用来显示其他内容

label 本身不会有任何的视觉效果，但是优化了鼠标用户的用户体验

6、css选择器有5种

.class 类名选择器
#id id选择器
tagName 元素名选择器
* 通配符选择器
html,body,.box 分组选择器

7、必须加上<meta charset="utf-8">，否则中文乱码

二、CSS

1、css样式分为

内联样式：写到元素内部的
<div style="width: 200px;">这是一个div</div>
内部样式：写到head里面的style标签
外部样式：独立的css文件，必须引入css文件
<link rel="stylesheet" type="text/css" href="index.css">

2、边距属性
margin: 外边距
padding:内边距

**margin简写属性**
margin:0;
上下左右全部为0;

margin:10px 20px;
上下为10 左右为20

margin：10px 20px 30px
上为10px 左右为20px 下为30px

margin：10px 20px 30px 40px;
上右下左

3、圆角属性
border-radius: 5px;

4、浮动属性
float:right;
float:left;

5、相对定位

position: relative;
相对于自身的静态位置定位

left 相对于原先的静态位置的left走，偏移了多少距离
right相对于原先的静态位置的right走，偏移了多少距离
top相对于原先的静态位置的top走，偏移了多少距离
bottom相对于原先的静态位置的bottom走，偏移了多少距离

6、字体属性

字体左右居中
text-align: center;
行高等于高度时，字体上下居中
line-height:字体行高
color:字体颜色

三、Javascript

1、声明使用js：<script></script>

2、确保在页面加载完成后才执行js：window.οnlοad=function(){}

3、js 事件的语法：ele.action() = function(){ }

4、使用var关键字声明变量

5、变量提升

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

console.log(a);var a = 1;

上面代码首先使用console.log方法，在控制台（console）显示变量a的值。这时变量a还没有声明和赋值，所以这是一种错误的做法，但是实际上不会报错。因为存在变量提升，真正运行的是下面的代码。

var a;console.log(a);a = 1;

最后的结果是显示undefined，表示变量a已声明，但还未赋值。

6、常量的声明方式：const a = 1;

7、getElementById() 返回带有指定 ID 的元素。

8、getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

9、getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

10、getElementsByName() 返回包含指定name的属性值的元素列表

11、querySelector(“#id”) “.p” 、”h1,h2” 方法返回匹配指定 CSS 选择器元素的第一个子元素

12、querySelectorAll() 返回所有匹配元素

13、设置节点属性

(1)getAttribute() 返回指定的属性值。

(2)setAttribute() 把指定属性设置或修改为指定的值。

(3)attributes 返回包含当前元素所有属性节点对象

(4)attributes[i / “class”] 返回一个属性节点

(5)attributes[i / “class”].value 返回一个属性节点值

(6)removeAttribute() 移除指定属性节点

(7)hasAttribute() 判断是否含有指定的属性

(8)dataset.i

14、事件

window.onload //页面加载完成事件
onclick //点击事件
onmouseover //鼠标悬浮时事件
onmouseout //鼠标离开时事件
onmousemove //鼠标移动时事件
onchange //用户改变域的内容时事件
onfocus //获取焦点时事件
onblur //失去焦点时事件
onkeydown //键盘某个键被按下时事件
onkeypress //键盘某个键被按下或者按住时事件
ondblclick //双击事件
onresize //浏览器窗口大小被调整时事件
onscroll //滚动条滚动时事件

15、定时器
setTimeout(function (){console.log(2)},1000);
setInterval()
setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。

四、作业
通过js获取输入框中的vlaue值
点击某个元素，更改该元素的样式
互换变量值
乘法口诀

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="index1.css">
</head>
<body>
	<script type="text/javascript">
		window.onload=function(){
			var a=8;
			var b=2;
			console.log('a=',a)
			console.log('b=',b)
			// a=a-b
			// b=a+b
			// a=b-a
			a^=b
			b^=a
			a^=b
			console.log('a=',a)
			console.log('b=',b)
			var str=''
			for (var i = 1; i<= 9; i++) {
				for (var j = 1; j <=i; j++) {
					var k=i*j;
					str+=j+'*'+i+'='+k+' '
				}
				str+='\n'
			}
			console.log(str)

		}
		function getinput(){
				var e=document.getElementById('input1').value
				console.log(e)
			}
		function omo(){
			console.log('鼠标悬浮')
		}
		function getchange(){
			var c=document.getElementsByClassName('div1')
			c[0].style.backgroundColor='red'
		}
	</script>
	<div class="div1">
		<input type="text" name="input" id='input1'>
		<button onclick="getinput()" onmouseover="omo()">获取</button>
		<button onclick="getchange()" >换红色</button>
	</div>
</body>
</html>