网页三剑客,html/css/javascript

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")

不同的标签有不同的方法

文本innerText,HTML innerHTML 内容 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


<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> <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> <div class="form-group" align="center"> <button class="btn btn-primary" onclick="doSubmit()">提交button> <button class="btn btn-danger">取消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); //这个对象他的值 //
登录成功
//标签的class属性进行访问 msg dic var msg = document.getElementsByClassName("msg")[0]; console.log(msg.innerText); //msg.innerText="登录成功,欢迎" + username.value(); msg.innerHTML="登录成功,欢迎"+username.value+""
; }
script> html>

网页效果:
网页三剑客,html/css/javascript_第1张图片


后面继续改进 请点链接跳转,继续学习

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

你可能感兴趣的:(JAVA第二阶段,html,javascript,css)