CGB2111Html学习第三天

最新推荐文章于 2024-08-31 21:49:18 发布

蒄鱼

最新推荐文章于 2024-08-31 21:49:18 发布

阅读量481

点赞数

分类专栏： Html 文章标签： css php css3

本文链接：https://blog.csdn.net/qq_43129111/article/details/122358774

版权

Html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了HTML、CSS和JavaScript的基础知识，包括引入外部CSS文件、页面元素样式定义、用户交互事件处理。通过示例展示了如何创建静态网页，并利用JavaScript增强网页的动态效果，如点击、双击、鼠标悬停等事件响应。此外，还探讨了JavaScript的数据类型、运算符和流程控制语句，为网页动态化和用户交互提供了基础。

摘要由CSDN通过智能技术生成

引入外部的css的文件

<link rel="stylesheet" href="1.css"/>

创建css文件

.a{
				width: 350px;
				height: 30px;
			}
			#btni{
				background-color: #0000FF;
				color: white;
				border-color: #0000FF;
				width: 80px;
				height: 30px;
			}
			#btni2{
				background-color: #ff55ff;
				color: white;
				border-color: #ff55ff;
				width: 80px;
				height: 30px;
			}

练习

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		<link rel="stylesheet" type="text/css" href="2.css"/>
	</head>
	<body>
		<div class="a">用户注册</div>
		<div><input class="b" type="text" name="user" id="" placeholder="用户名" /></div>
		<div class="c">支持中文、字母、数字、“-”、“_”的组合,4-20个字符</div>
		<div><input class="b" type="password" name="pwd" placeholder="设置密码"/></div>
		<div class="c">建议使用数字、字母和符号两种以上的组合，6-20字符</div>
		<div><input class="b" type="password" name="pwd2" placeholder="确认密码"/></div>
		<div class="c">两次密码输入不一致</div>
		<div><input class="b" type="number" name="number" placeholder="验证手机" />或<a id="d" href="#">验证邮箱</a></div>
		<div class="e"><input class="f" type="checkbox" name="yes" />我已经阅读并同意<a href="#">《京淘用户注册协议》</<></a></div>
		<div class="h">
			<button type="submit">立即注册</button>
		</div>
	</body>
</html>

CSS

		.a{
				padding-block: 15px;
				font-size: 30px;
				width: 400px;
				height: 50px;
				text-align: center;
				font-weight: 500;
			}
			.b{
				font-size: 20px;
				height: 50px;
				width: 350px;
				margin: 20px;
				padding-left: 10px;
			}
			.c{
				opacity: 50%;
				padding-left: 40px;
				font-size: 5px;
			}
			#d{
				padding-left: 15px;
				
			}
			.e{
					
				padding-left: 40px;
				padding-top: 10px;
				width: 400px;
				height: 50px;
				font-size: 5px;
				padding-right: 5px;
			}
			.f{
				width: 30px;
			}
			button{
				width: 360px;/* 宽度 */
				height: 40px;/* 高度 */
				background-color: red;/* 背景色 */
				border-color: red;/* 边框颜色 */
				color: white;/* 文字颜色 */
				font-size: 20px;/* 文字字号 */
			}
			.h{
				width: 50px;
				padding-left: 10px;
				opacity: 75%;
			}

静态网页的动态网页

动态网页

顾名思义就是让网站动起来

JavaScript的概念

什么是JS

HTML定义网页的内容H5
CSS规定网页的布局CSS3
JavaScript瑟吉欧下面挖没孩子的交互ES6

全称JavaScript，是一种弱类型语言，同其他语言一样，有它自身的语法，数据类型，表达式，算术运算符等。

JS是一门基于对象和事件驱动的脚本语言，通常用来提高网页与用户的交互性。

JS的特点

1,js是一门直译式的语言,不需要像java一样的编译过程.
2.js是弱类型的语言,底层会自动类型转换.
3.增强了用户的交互性,跨平台.
4.js代码出现的位置:行内JS,内部JS,外部JS

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试js</title>
	</head>
	<body>
		<div onclick="alert('欢迎来到div')">我是div</div>
		<span ondblclick="alert('欢迎来到span')">我是span</span>
		
		<div onmouseenter="alert('欢迎加入div2')">我是div2</div>
		<div onmouseleave="alert('你离开了div3')">我是div3</div>
	</body>
</html>

onclick//单击时弹窗
ondblclick//双击时弹窗
onmouseenter//鼠标移到指定位置时弹窗
onmouseleave//鼠标移开指定位置时弹窗

JS语法

1.数据类型&变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js语法</title>
		<script>
			var x = 1;
			var y = 2;
			var t = y;
			var y = x;
			var x = t;
			alert(x+","+y)
			
			
			var a = 1;
			a = 1.8;
			alert(a);//number
			a = true;
			a = "你好";
			
			
			
			alert('你好');//string
			alert('hello')//string
			alert(2.4+3.6);//6,number
			alert(false);
			alert()
		</script>
	</head>
	<body>
	</body>
</html>

JS的变量定义,JS是弱类型的语言,通过var定义变量

JS的数据类型: 基础(number/string/boolean/null/undefined) + 复杂

2.运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js语法</title>
		<script>
			//三元运算符
			var c =10;
			var d = 5;
			var e =  c > d ? c : d;
			alert(e)
			alert(1 == 1);//true
			alert(1 != 1);//false
			alert(1 == '1');//true 只比值
			alert(1 === '1');//false 比较类型和值
			
			var b = 2;
			b *= 2;//b=b+2
			alert(b);
			
			//算数运算符: / % ++ --
			var a = 12;
			alert(a / 5); //2.4
			alert(a % 5); //余2
			
			// alert(a++);//12
			// alert(++a);//14
			
			a = a++;
			alert(a);//12
			
			a = a+++a; //a+ ++a; 12+13=25
			alert(a);
		</script>
	</head>
	<body>
	</body>
</html>

JS语句

1.分支机构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS语句</title>
		<script type="text/javascript">
			//分支机构sw
			day = 1;
		switch(day){//在java里,switch参数的数据类型只能有
			//byte int char short String
				case 1 : alert('星期一');break;
				case 2 : alert('星期二');break;
				case 3 : alert('星期三');break;
				case 4 : alert('星期四');break;
				case 5 : alert('星期五');break;
				case 6 : alert('星期六');break;
				case 7 : alert('星期日');break;
			}
				//分支结构 if...else
			if (!true) {
				alert(100);
			}
			var scores = 98;
			if (scores => 80 && scores <= 100) {
				alert('优秀')
			} else if (scores => 60 && scores < 80) {
				alert('中等')
			} else if (scores => 0 && scores < 60) {
				alert('不及格')
			} else {
				alert('输入有误')
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.循环结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Js语句</title>
		<script>
			//while循环结构
			//while(true){//死循环
			
			}
			let a = 1;
			let days = 0;
			let money = 100000000;
			while(money>1){
				days++;
				money=money/2;
			}
			console.log(days);
			while(a<11){
				a++;
				console.log(a+"~~~~");
				a++;
			}
			
			for(let i = 1;i<=100;i++){
				if(i % 2 == 0 ){
					console.log(i);
				}
			}
			//bug:for循环里定义的变量,竟然在循环外也能用!!!
			//原因:定义的变量没有作用域的概念,使用let定义变量!!!
			//var没有作用域,let严格的规定了作用域
			//console.log(i+"=====");

			for(var i = 1;i<11;i++){
				//alert(i);
				console.log(i);
			}
		</script>
	</head>
	<body>
	</body>
</html>

蒄鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CGB2111Html学习第三天

引入外部的css的文件<link rel="stylesheet" href="1.css"/>创建css文件.a{ width: 350px; height: 30px; } #btni{ background-color: #0000FF; color: white; border-color: #0000FF; width: 80px; height: 30px; } #btni2{ backg
复制链接

扫一扫

专栏目录