1. Three Musketeers on the web, html/css/javascript

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

Our goal is to make everyone familiar with these html tags, css styles, and js grammars when working on projects.

2. javascript upgrade from static website to dynamic website technology, website dynamic

Form, you can interact with background programs (java, ssm, nginx, redis, rabbitmq...docker, k8)

js script statement, java eclipse/idea debugging error, js error, weak debugging
, the rise of chrome Google browser, the
performance of the browser platform on top of the operating system exceeds all browsers on the market IE, forming a chrome engine, nodejs webserver
js extension front end also Yes, the backend is also OK, js started to standardize: es6, from a weak language to a strong language let, const
arrow function, typescript really strong language.

vue3.0 is refactored using typescript

3、javascript

1) DOM, use more, document abstraction, turn the whole page into document, api upgrade jQuery, upgrade vue framework
2) BOM browser api, use less

4、dom.html

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

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

5. CSS upgrade bootstrap, then upgrade elmentui (are you hungry) instead

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

1. javascript, login form

Enter the user name and password in javascript, which will be displayed on the page: login is successful,
beautify the page with bootstrap
a. download the bootstrap.min.css file
b. reference the external style sheet file

autofocus automatically focus, open the page cursor automatically stops in this text box

Button label onclick event, click is triggered
οnclick="doSubmit()" Click to execute doSubmit() function (method)

There are two ways to get page elements:
1) document.getElementsByName("username")[0];
array
2) document.getElementById("username")
id to get a value

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>

Webpage effect:
Insert picture description here

To continue to improve later, please click the link to jump, continue to learn

https://blog.csdn.net/QQ1043051018/article/details/112348056

Three Musketeers on the web, html/css/javascript