Java EE进阶2：前端 HTML+CSS+JavaScript

洛_尘

已于 2025-07-15 10:28:43 修改

阅读量613

点赞数 14

CC 4.0 BY-SA版权

分类专栏： 5Java EE进阶文章标签： java-ee 前端 java

于 2025-07-15 10:27:02 首次发布

本文链接：https://blog.csdn.net/2301_81743879/article/details/148065604

5Java EE进阶专栏收录该内容

3 篇文章

订阅专栏

1.HTML

1.1 基础

1.1.1 概念

1.1.2 认识HTML标签

1.1.3 基本结构

1.2 快速入门

Visual Studio Code - Code Editing. RedefinedVisual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.https://code.visualstudio.com/

1.3 常见标签

1.3.1 标题 h1-h6

1.3.2 段落 p

1.3.3 换行 br （单标签）

HTML特殊字符转义对照表 - 在线工具栏提供HTML特殊字符转义对照表，HTML特殊字符转义参考，欢迎大家使用。https://www.usetoolbar.com/table/html_escape_char.html

（段落间距比换行更大；若想打出多个空格，要对应上表）

1.3.4 图片 img

(网络上的图片记得精确到图片地址）

1.3.5 超链接 a

【当把 href 后面的地址改成一个压缩包的地址时在网页中点击后就会下载此压缩包】

1.4 表格标签

1.5 表单标签

1.5.1 form

1.5.2 input

【name：参数名】

1.5.3 select

1.5.4 textarea

1.6 无语义标签 div&span （网页布局）

1.7 综合练习--用户注册

2.CSS

2.1 基础

2.1.1 概念

2.1.2 基本语法规范

2.1.3 引入方式

2.1.4 规范

2.2 CSS选择器

2.2.1 标签选择器

将选中某个标签的所有内容一起改变

2.2.2 类选择器

将选中某个类的所有内容一起改变前面记得加 “点.” 号（类更近）

2.2.3 id选择器

2.2.4 通配符选择器

可以设置设置页面所有元素的属性

2.2.5 复合选择器

【当发现不是自己想要的颜色的话可以F12 网页进行调试但只是暂时的不影响源代码】先点箭头再点具体内容

2.3 常用CSS

2.3.1 color 颜色

2.3.2 font-size 字体大小

2.3.3 border 边框

CSS：层叠样式表 | MDN层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。https://developer.mozilla.org/zh-CN/docs/Web/CSS

2.3.4 width/height 宽度高度

2.3.5 padding 内边距

内边距,设置内容和边框之间的距离.

2.3.6 margin 外边距

外边距,设置元素和元素之间的距离.

3. JavaScript

3.1 初识

JavaScript(简称JS),是⼀个脚本语言,解释型或即时编译型的编程语言. 虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。

3.2 基础语法

3.2.1 变量

3.2.2 数据类型

3.2.3 运算符

3.3 JavaScript对象

3.3.1 数组

3.3.2 函数

3.3.3 对象

在JS中字符串、数值、数组、函数都是对象。每个对象中包含若干的属性和方法。 •属性:事物的特征。 • 方法:事物的行为。

3.4 JQuery

3.4.1 引入依赖

jQuery CDNWorldwide distribution of jQuery releases.https://releases.jquery.com/

3.4.2 JQuery语法

3.4.3 JQuery选择器

3.4.4 JQuery事件

jQuery 事件 | 菜鸟教程jQuery 事件 jQuery 是为事件处理特别设计的。什么是事件？页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。实例：在元素上移动鼠标。选取单选按钮点击元素在事件中经常使用术语“触发”（或“激发”）例如： “当您按下按键时触发 keypress 事件”。常见 DOM 事件：鼠标事件键盘事件表单事件文档/窗口事件 click keypres..https://www.runoob.com/jquery/jquery-events.html

3.4.5 操作元素

3.5 综合案例

3.5.1 猜数字

3.5.2 表白墙

代码实现

1. 提前准备如下HTML和CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 .container {
 width: 400px;
 margin: 0 auto;
 }
 h1 {
 text-align: center;
 padding: 20px 0;
 }
 p {
 color: #666;
 text-align: center;
 font-size: 14px;
 padding: 10px 0;
 }
 .row {
 height: 40px;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 span {
 width: 100px;
 line-height: 40px;
 }
 .edit {
 width: 200px;
 height: 30px;
 }
.submit {
 width: 304px;
 height: 40px;
 color: white;
 background-color: orange;
 border: none;
 }
 </style>
</head>
<body>
 <div class="container">
 <h1>表⽩墙</h1>
 <p>输⼊后点击提交, 会将信息显⽰在表格中</p>
 <div class="row">
 <span>谁: </span>
 <input class="edit" type="text">
 </div>
 <div class="row">
 <span>对谁: </span>
 <input class="edit" type="text">
 </div>
 <div class="row">
 <span>说什么: </span>
 <input class="edit" type="text">
 </div>
 <div class="row">
 <input type="button" value="提交" class="submit">
 </div>
 </div>
</body>
</html>

2. 实现提交