Java后端须知的前端知识

电脑硬件
2025-07-21 18:14:55

Java后端须知的前端知识 HTML （超文本标记语言） W3C标准结构：HTML表现：CSS行为：JavaScript 快速入门 <html> <head> <title></title> </head> <body> <font color="red"></font> </body> </html>  基础标签  <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>我是标题h1</h1> <h2>我是标题h2</h2> <h3>我是标题h3</h3> <h4>我是标题h4</h4> <h5>我是标题h5</h5> <h6>我是标题h6</h6> <hr> </body> </html>  HTML显示结果描述&lt ;<小于号或显示标记&gt ;>大于号或显示标记&amp ;&可用于显示其他特殊字符&quot ;"引号&reg ;@ （里面的a应该是R）已注册&copy ;@ （里面的a应该是C）版权&trade ;TM商标&nbsp ;不断行的空白图片、音频、视频标签

img:定义图片

src:规定显示图像的URL(统一资源定位符)height:定义图像的高度width:定义图像的宽度

audio:定义音频。支持的音频格式：MP3、WAV、OGG

src:规定音频的URLcontrols:显示播放控件

video:定义视频。支持的音频格式：MP4,WebM、OGG

src:规定视频的URL controls:显示播放控件 <DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>  <img src="a.jpg"width="300" height="400"> <audio src="b.mp3"controls></audio> <video src="c.mp4"controls width="500"height="300"></video> </body> 超链接标签

<a>: 定义超链接，用于链接到另一个资源

href:指定访问资源的URL

target:指定打开资源的方式

_se1f：默认值，在当前页面打开 _blank：在空白页面打开

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href=" .baidu " target="_blank">百度一下，你就知道</a> </body> </html> 列表标签标签描述<ol>定义有序列表（有序号）<ul>定义无序列表<li>定义列表项

可以添加格式，来换对应的样式，但一般在CSS中进行进一步的修改

表格标签标签描述<table>定义表格<tr>定义行<td>定义单元格<th>定义表头单元格

table:定义表格

border:规定表格边框的宽度width:规定表格的宽度cellspacing:规定单元格之间的空白

tr:定义行

align:定义表格行的内容对齐方式

td:定义单元格

rowspan:规定单元格可横跨的行数colspan:规定单元格可横跨的列数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <tr align="center"> <th>序号</th> <th>品牌Logo</th> <th>品牌名称</th> <th>企业名称</th> </tr> <tr align="center"> <td>010</td> <td><img src="../img/三只松鼠.png"width:="60"height="50"></td> <td colspan=2>三只松鼠</td> </tr> </table> </body> </html> 布局标签标签描述<div>定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页，块级标签，会自动换行；<span>用于组合行内元素。不会换行（行内）表单标签表单：在网页中主要负责数据采集功能，使用<fom>标签定义表单表单项（元素）：不同类型的iput元素、下拉列表、文本域等标签描述<form>定义表单<input>定义表单项，通过type属性控制输入形式<label>为表单项定义标注<select>定义下拉列表<option>定义下拉列表的列表项<textarea>定义文本域 form:定义表单 action: 规定当提交表单时向何处发送表单数据，URLmethod: 规定用于发送表单数据的方式 get: 浏览器会将数据直接附在表单的action URL之后。大小有限制（4KB），默认值post: 浏览器会将数据放到http请求消息体中。大小无限制 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="#" method="post"> <input type="text" name="username"> <input type="submit"> </form> </body> </html> input: 表单项，通过type属性控制输入形式 type取值描述text默认值。定义单行的输入字段password定义密码字段radio定义单选按钮checkbox定义复选框file定义文件上传按钮hidden定义隐藏的输入字段submit定义提交按钮，提交按钮会把表单数据发送到服务器reset定义重置按钮，重置按钮会清除表单中的所有数据button定义可点击按钮

select: 定义下拉列表，option定义列表项

textarea：文本域

label：可以提升用户体验：点击用户名，也可以选中文本框

单选框/复选框细节：单选框/复选框中value值必须加上，不然上传信息给后端的时候，不管选中哪一个，都只会上传一个"on"

<input type="radio" name="gender" value="1"> 男 <input type="radio" name="gender" value="2"> 女 CSS（层叠样式表） CSS导入方式

内联样式：在标签内部使用style属性，属性值是css属性键值对

<div style="color:red">Hello CSS~</div>

内部样式：定义

CSS选择器

概念：选择器是选取需设置样式的元素（标签）

div{ color: red; }

分类（三个选择器之间谁的范围小谁就生效，以下标签内容需要再style标签内抒写）

元素选择器

元素名称{color: red;} div{color: red;}

id选择器

#id属性值{color: red;} #name{color: red;} <div id="name"> hello css2</div>

类选择器

.class属性值{color:red;} .cls{color:red;} <div class="cls">hello css3</div> CSS属性

存在很多属性，每一个属性均为一个键值对，详情请参照：CSS 教程 (w3school )

JavaScript

一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互。JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。JavaScript(简称：JS)在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准。ECMAScript6(ES6)是最新的JavaScript版本（发布于2015年）。

JavaScript引入方式

内部脚本：将JS代码定义在HTML页面中

在HTML中，JavaScript代码必须位于script标签之间

注意：

在HTML文档中可以在任意地方，放置任意数量的script标签一般把脚本置于body元素的底部，可改善显示速度，因为脚本执行会拖慢显示

外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中外部文件：demo.js

alert("hello JS ~")

引入外部js文件

注意：

外部脚本不能包含script标签

script标签不能自闭合

JavaScript基础语法

书写语法

区分大小写：与ava一样，变量名、函数名以及其他一切东西都是区分大小写的

每行结尾的分号可有可无

注释：

单行注释：//注释内容

多行注释：/*注释内容*/

大括号表示代码块

if (count == 3){ alert(count); }

输出语句

window.alert("hello JS~"); //弹出警告框 document.write("hello JS~"); //写入HTML输出 console.log("hello JS~"); //写入控制台

变量

JavaScript中用var关键字(variable的缩写)来声明变量

/* var: 1.作用域：全局变量 2.变量可以重复定义 */ var test = 20 test = "张三" JavaScript是一门弱类型语言，变量可以存放不同类型的值变量名需要遵循如下规侧：

组成字符可以是任何字母、数字、下划线（_)或美元符号($) 数字不能开头建议使用驼峰命名

ECMAScript6新增了let关键字来定义变量。它的用法类似于var,但是所声明的变量，只在Iet关键字所在的代码块内有效，且不允许重复声明ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

数据类型

JavaScript中分为：原始类型和引用类型 5种原始类型：

number:数字（整数、小数、NaN(Not a Number)）string:字符、字符串，单双引皆可boolean:布尔。true,falsenull:对象为空undefined:当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型

alert(typeof age)

运算符

一元运算符：++，–算术运算符：+，-，*，/，%赋值运算符：=，+=，-=…关系运算符：>，<，>=，<=，！=,==,===…逻辑运算符：&&，||，！三元运算符：条件表达式？true_value : false_value /* == 1.判断类型是否一样，如果不一样，则进行类型转换 2.再去比较其值 ===:全等于 1.判断类型是否一样，如果不一样，直接返回false 2.再去比较其值类型转换：(主要用于判断) * 其他类型转为number: 1.string:按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。一般使用parseInt 2.boolean:true 转为1，fase转为0 * 其他类型转为boolean: 1.number:0和NaN转为false,其他的数字转为true 2.string:空字符串转为false,其他的字符串转为true 3.null:false 4.undefined:false */

流程控制语句

if:判断语句switch:判断语句for:与JAVA一致while:与JAVA一致do…while:与JAVA一致

函数

函数（方法）是被设计为执行特定任务的代码块

定义：JavaScript函数通过function关键词进行定义，语法为：

function functionName(参数1, 参数2..){ 要执行的代码 }

注意：

形式参数不需要类型。因为JavaScript是弱类型语言返回值也不需要定义类型，可以在函数内部直接使用returni返回即可

function add(a,b){ return a + b; } // 调用 let result = add(1,2); // 第二种定义方式： var functionName=function(参数列表)K 要执行的代码 } var add = function(a,b){ return a + b; } JavaScript常用对象

Array对象

JavaScript Array对象用于定义数组

定义

var 变量名 =new Array(元素列表); //方式一 var arr =new Array(1,2,3); var 变量名 =[元素列表]; //方式二 var arr=[1,2,3];

访问

arr[索引] = 值; arr[0] = 1; // 特点：JavaScript数组相当于Java中集合。变长变类型 // 变长： var arr3=[1,2,3]; arr3[10]=10; // 变类型： //变类型 arr3[5]="hello"; //之前的数据保留 alert(arr3); // 方法 push：添加元素 splice:删除元素 splice(0,1):从位置0开始删除，删除1个

String

定义

var变量名=new String(s); //方式一 var str =new String("hello"); var变量名 = s; /方式二 var str = "hello"; var str = 'hello'; //trim()：去除字符串前后的空白字符

自定义对象

格式

var对象名称={ 属性名称1: 属性值1, 属性名称2: 属性值2, ... 函数名称: function(形参列表){} ... }; var person = { name:"zhangsan", age:23, eat:function (){ alert("干饭~"); } }; BOM

Browser Object Model 浏览器对象模型

JavaScript将刘览器的各个组成部分封装为对象

组成：

Window: 浏览器窗口对象

获取：直接使用window，其中window.可以省略

window.alert("abc")

属性：获取其他BOM对象

属性描述history对History对象的只读引用。Navigator对Navigator对象的只读引用。Screen对Screen对象的只读引用。location用于窗口或框架的Location对象。

方法

方法描述alert()显示带有一段消息和一个确认按钮的警告框。confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。确认按钮（true）setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。在一定的时间间隔后执行一·个function,循环执行setTimeout()在指定的毫秒数后调用函数或计算表达式。在一定的时间间隔后执行一·个function,只执行一次

Navigator: 浏览器对象（浏览器的基本信息，用到的不多）

Screen: 屏幕对象（屏幕的基本信息，用到的不多）

History: 历史记录对象

方法描述back()加载history列表中的前一个URLforward（）加载history列表中的下一个URL

Location: 地址栏对象

属性描述href设置或返回完整的URL DOM （文档对象模型）将标记语言的各个组成部分封装为对象 Document：整个文档对象Element：元素对象Attribute：属性对象Text：文本对象Comment：注释对象

JavaScript通过DOM，就能够对HTML进行操作了改变HTML元素的内容改变HTML元素的样式(CSS)对HTML DOM事件作出反应添加和删除HTML元素 DOM是W3C(万维网联盟)的标准，其定义了访问HTML和ML文档的标准，W3C DOM标准被分为3个不同的部分：核心DOM:针对任何结构化文档的标准模型 Document:整个文档对象Element:元素对象Attribute:属性对象Text:文本对象Comment:注释对象 XML DOM:针对XML文档的标准模型HTML DOM:针对HTML文档的标准模型 Image：<img>Button ：<input type=‘button’> Element：元素对象获取Element对象 getElementByld:根据id属性值获取，返回一个Element对象getElementsByTagName:根据标签名称获取，返回Element对象数组getElementsByName:根据name属性值获取，返回Element对象数组getElementsByClassName:根据class属性值获取，返回Element对象数组事件监听事件：HTML事件是发生在HTML元素上的“事情”。比如：按钮被点击鼠标移动到元素之上按下键盘按键事件监听：JavaScript可以在事件被侦测到时执行代码

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

<input type="button" onclick='on()'> function on(){ alert(我被点了"); }

方式二：通过DOM元素属性绑定（推荐）

<input type="button"id="btn"> document.getElementByld("btn").onclick = function(){ alert(我被点了"); }

常见事件

onfocus：获得焦点onblur：失去焦点（可用来做数据验证）onclick：当用户点击某个对象时调用的事件句柄onsubmit：在表单中的确认按钮被点击时发生，返回true，则表单会被提交，返回false，则表单不提交案例：表单验证

当输入框失去焦点时，验证输入内容是否符合要求

获取表单输入框

var usernameInput = document.getElementById("username");

绑定onblur事件

usernameInput.onblur = function (){}

获取输入内容

var username = usernameInput.value.trim();

判断是否符合规则

var usernameReg = /^\w{6,12}$/; ∥正则表达式

如果不合符规则，则显示错误提示信息

当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交

获取表单对象

var regForm document.getElementById("reg-form");

为表单对象绑定onsubmit

regForm.onsubmit = function(){}

判断所有输入框是否都符合要求，如果符合，则返回true,如果有一项不符合，则返回false

<span id-"username_err" class="err_msg" style="display: none">用户名不太受欢迎</span> //1.1获取用户名的输入框 var usernameInput = document.getElementById("username"); //1.2绑定onblur事件失去焦点 usernameInput.onblur = checkUsername; function checkUsername(){ // 1.3获取用户输入的用户名 var username = usernameInput.value.trim(); // 1.4判断用户名是否符合规则：长度612 flag = username.length >= 6 && username.length <=12; if(flag){ //符合规则 document.getElementById("username_err").style.display = 'none'; }else{ // 不合符规则 document.getElementById("username_err").style.display =''; } return flag; } //1.获取表单对象 var regForm document.getElementById("reg-form"); //2.绑定onsubmit事件 regForm.onsubmit = function (){ //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false var flag = checkUsername() && checkPassword() && checkTel(); return flag; }

如果觉得有帮助，请帮我点个赞或者收藏，感谢~

标签：

Java后端须知的前端知识由讯客互联电脑硬件栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“Java后端须知的前端知识”

上一篇
ElasticSearch搜索与分析引擎-Linux离线环境

下一篇
MATLAB实现二阶模糊逻辑控制系统仿真