网页三剑客，html/css/javascript

最新推荐文章于 2024-09-23 09:45:00 发布

_淡若清风づ

最新推荐文章于 2024-09-23 09:45:00 发布

阅读量567

点赞数

分类专栏： JAVA第二阶段文章标签： html javascript css

本文链接：https://blog.csdn.net/QQ1043051018/article/details/112346309

版权

JAVA第二阶段专栏收录该内容

30 篇文章 4 订阅

订阅专栏

1、网页三剑客，html/css/javascript

引入到更高主流技术，进展比较快；
不是为学习这个知识，小于10%，高薪进入企业，新技术

我们的目标是让大家做项目时，出现这些html标签，css样式，js语法，都不陌生。

2、javascript 从静态网站升级到动态网站技术，网站动态化

表单，就可以和后台程序交互（java,ssm,nginx,redis,rabbitmq…docker,k8）

js脚本语句，java eclipse/idea调试错误，js出错，调试很弱
chrome谷歌浏览器兴起，在操作系统之上来浏览器平台
性能超过市面上所有浏览器IE，形成chrome引擎，nodejs webserver
js扩展前端也行，后端也行，js开始规范：es6，由弱语言变成强语言 let，const
箭头函数，typescript真正的强语言。

vue3.0 使用typescript进行了重构

3、javascript

1）DOM，用的多，document抽象，把整个页面变成document，api升级jQuery，在升级vue框架
2）BOM 浏览器api，用的少

4、dom.html

document.getElementsByTagName("h1")
$("h1")

不同的标签有不同的方法
<h1> 文本innerText，HTML innerHTML
<a href="">内容</a>   innerText，href

5、css升级bootstrap，再升级elmentui（饿了吗）替代

企业中必然学习新的知识，新知识学习方式
开发方式，拿来主义，java，api；html，css，javascript
阿里：redis,nginx，docker+k8

1、javascript，登录表单

javascript输入用户名密码，展示在页面：登录成功
用bootstrap美化页面
a.下载bootstrap.min.css文件
b.引用外部样式表文件

autofocus 自动聚焦，打开页面光标自动停在这个文本框中

按钮标签 onclick事件，点击是才触发
οnclick=“doSubmit()” 点击后去执行doSubmit()函数（方法）

获取页面元素两种方式：
1）document.getElementsByName(“username”)[0];
数组
2）document.getElementById(“username”)
id获取一个值

document.getElementById(“username”).value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			body{
			width: 300px;
			margin:20px;
		}
		button{
			margin-top: 5px;
			margin-right: 20px;
			margin-left: 20px;
		}
		</style>
	</head>
	<body>
		<div>
			<h2 class = "msg">登录</h2>
			<!--输入框-->
			<div class="form-group">
				<label>用户名:</label>
				<input type="text" class="form-control" name="username" id="username" autocomplete="off" autofocus="autofocus"
				 placeholder="请输入用户名..." ; />
			</div>
			<div class="form-group">
				<label>密码:</label>
				<input type="password" class="form-control" name="password" id="password" placeholder="请输入密码..." />
			</div>
			<!--button按钮-->
			<div class="form-group" align="center">
				<button class="btn btn-primary" onclick="doSubmit()">提交</button>
				<button class="btn btn-danger">取消</button>
				<!--button按钮-->
			</div>
		</div>
	</body>
	<script>
		//按钮标签onclick事件，单击才是触发
		//οnclick="doSubmit()" 点击后去执行doSubmit()函数 (方法)
		//点击提交按钮出发事件 doSubmit()，自定义一个函数
		function doSubmit() {
			//获取页面的用户名，获取数组的第一个元素
			var username = document.getElementsByName("username")[0]; //获取这个对象的值
			//获取唯一，html规范，标签的id属性，在页面声明时,必须唯一
			var username = document.getElementById("username");
			console.log(username.value); //这个对象他的值
			
			//<div class = "msg">登录成功</div>
			//标签的class属性进行访问 msg dic
			var msg = document.getElementsByClassName("msg")[0];
			console.log(msg.innerText);
			
			//msg.innerText="登录成功，欢迎" + username.value();
			msg.innerHTML="<font color='red'>登录成功，欢迎"+username.value+"</font>";
		}
	</script>
</html>