201711671137 校内综合实训DAY1：HTML、CSS、JS

最新推荐文章于 2022-08-06 08:09:28 发布

Lumbapp

最新推荐文章于 2022-08-06 08:09:28 发布

阅读量141

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/Lumberpond/article/details/92746884

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

课堂笔记

SUBLIME

新建"day01 h5"文件夹，拉到sublime里

在sublime里新建"index.html"(带后缀)

在文件中输入html 按tab键可以补齐代码

alt+shift+1~5 分隔工作区

ctrl+/ 快速注释

HTML

html 超文本标记语言

html标签需要符合开闭原则：<div></div>开标签+闭标签

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>

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

<span>：是一个没有任何样式的段落标签，包裹或分割内容
<pre>：是一个有带格式的p标签，可以保留缩进和换行
<div>：是没有任何样式的块级元素，包裹或分割内容
<iframe>：是一个框架元素，用来显示其他
<label>：本身不会有任何的视觉效果，但优化了鼠标用户体验

CSS

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

css样式分为
内联样式：写到元素内部的
内部样式：写到head里面的style标签
外部样式：独立的css文件

margin：外边距
margin:0;
上下左右全部为0（除了0都要带px像素值）
margin:10px 20px;
上下为10，左右为20
margin:10px 20px 30px;
上10 左右20 下30
margin:10px 20px 30px 40px;
上10 右20 下30 左40
margin:0 auto;
上下为0 左右居中

padding
padding:40px;
内边距40

border-raidur: 5px;
圆角属性

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

position: relative;
相对定位：相对于自身的静态位置定位
left:10px;
相对于原先的静态位置left走一定距离
right
top
bottom

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

JS

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

课后作业

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

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>201711671137_DAY1</title>

	<link rel="stylesheet" type="text/css" href="index.css">

	<script type="text/javascript">

		function a(){
			var i = document.getElementById("text").value;
			console.log(i);
		}

		function b(obj){
			obj.style.background = 'pink';
		}

		window.onload = function(){
			var a=2,b=3;
			console.log("a=",a);
			console.log("b=",b);
			a = a + b;
			b = a - b;
			a = a - b;
			console.log("a=",a);
			console.log("b=",b);
			for(var i=1;i<=9;i++){
				str = "";
				for(var j=1;j<=i;j++){
					var sum = i * j;
					str+=j+"x"+i+"="+sum+"	";
				}
				console.log(str);
			}
		}

	</script>

</head>

<body>

	<div style="background-color: skyblue" onclick="b(this)">
		<label>
			输入内容：
			<input type="text" name="" id="text">
		</label>
		<input type="button" value="获取到console" onclick="a()">
	</div>
	
<!-- 	<div style="background-color: skyblue" onclick="b(this)">
		<script type="text/javascript">
			var i,j;
			document.write("九九乘法表");
			for(i=1;i<=9;i++){
				document.write("<br>");
				for(j=1;j<=i;j++){
					sum = i * j;
					document.write(j,"x",i,"=",sum,"	");
				}
			}
		</script> -->	
	</div>

	<div>

</body>

</html>

互换变量值和乘法口诀

通过js获取输入框中的value值

点击某个元素，更改该元素的样式（点div换背景颜色）

Lumbapp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
201711671137 校内综合实训DAY1：HTML、CSS、JS

课堂笔记SUBLIME新建"day01 h5"文件夹，拉到sublime里在sublime里新建"index.html"(带后缀)在文件中输入html 按tab键可以补齐代码alt+shift+1~5 分隔工作区ctrl+/ 快速注释HTMLhtml 超文本标记语言html标签需要符合开闭原则：<div></div>开标签+闭标签ht...
复制链接

扫一扫