JavaEE进阶：前端基础快速入门

原创于 2026-10-29 21:43:43 发布 · 332 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

JavaEE进阶

本文面向JavaEE后端开发者，精讲HTML表单、CSS盒子模型（content/padding/border/margin）及jQuery核心操作：元素选择、内容/属性/CSS获取与设置、增删元素等。涵盖form提交机制、radio/checkbox值传递规范、JQuery事件绑定（如click/mouseover）、DOM操作方法（append/remove/empty）及两个实战案例——猜数字游戏与留言板，强调前后端分离背景下后端人员需掌握的最小可行前端知识。

前言❤️❤️

hello hello💕，这里是洋不写bug~😄，欢迎大家点赞👍👍，关注😍😍，收藏🌹🌹
这篇博客是JavaEE进阶专栏的第一篇博客，在前面的JavaEE初阶专栏中，解析了进程、线程、文件IO、网络通信等知识，其实从官方严格定义来说，这些部分也是属于JavaSE的，但是在职场语境中，“JavaEE开发”也会泛指整个Java后端的技术栈，也就是前面JavaEE初阶部分的那些内容
如果严格按照官方定义的来划分的话，那前面的JavaEE初阶专栏中应该称为JavaSE进阶专栏，从这个专栏开始才进入到JavaEE的解析

JavaEE跟项目是深度绑定的，JavaEE是后端工程师要学习的核心内容，但是后续要自己完成一些项目，还是要简单的掌握一些前端的知识，铁汁们稍微了解下即可，不必花费过多的时间在前端上，前端想要学精是要下大力气的，那是前端工程师要做的事情

🎆个人主页：洋不写bug的博客
🎆所属专栏：JavaEE进阶专栏
🎆铁汁们对于JavaEE进阶的各种常用核心语法，都可以在上面的JavaEE进阶专栏学习，专栏正在持续更新中🏀，有问题可以写在评论区或者私信我哦~

1，JavaEE简介

官方对于JavaSE和JavaEE的定义：

JavaSE：语法、面向对象、集合、多线程、进程、IO 流、NIO、异常、泛型等
JavaEE：建立在 Java SE 之上的一套企业开发规范集合，由一组 API、服务、协议组成，专门用于开发多层架构、Web 型企业后端应用

官方在2018年就已经改名了，把JavaEE改为Jakarta EE，但是在大学和职场中，大家还是习惯老叫法JavaEE

PC端的应用开发是分为C/S结构和B/S结构，C/S就是Client/Server（客户端/服务器），B/S就是Browser/Server（浏览器/服务器）

在JavaEE进阶中，一些词的含义就发生了变化，比如前面JavaEE入门专栏中解析网络通信时，访问服务器的都叫做客户端
但在B/S和C/S结构中，B/S就是不用下载软件，直接在浏览器上访问网页；C/S就是在计算机上安装程序（软件），例如网页版微信就是用B/S结构，在计算机上下载微信，就是C/S结构

C/S架构

优点：响应速度快；能充分利用本地计算机的资源；对信息的安全控制更强；个性化定制能力；
缺点：在升级时，有很多用户可能选择不升级，那就要同时支持老版本和新版本，如果强制升级，就会流失一些用户（游戏软件除外🐵）

B/S架构

优点：只需要维护服务器即可，维护成本低；业务扩展非常方便，比如想新增加一个功能，直接改服务器的代码即可，不需要考虑客户端（C/S架构还需要让用户去更新软件，一些用户可能不想更新）
缺点：浏览器只负责展示页面，运算、数据库查询、业务逻辑全都在服务器（C/S可以利用本地计算机的算力），就会加大服务器的压力；还有浏览器的兼容性问题，不同版本的浏览器支持的标准不一样，可能在这个版本的浏览器显示正常，在另一个浏览器就是乱码，因此在开发时就要写兼容代码

在初学JavaEE时，完成的项目基本上都是B/S结构，也就是写一下服务器的业务程序，然后在浏览器上访问服务器

写服务器的业务程序属于是后端的内容，而网页上的显示就属于是前端的内容，想要做出来精美的浏览器网页，需要有很扎实的前端知识，前端需要经过很长时间的学习的，互联网大厂绝大多数业务都是前后端分离，也就是前端工程师负责编写网页的显示，后端负责编写服务器的业务代码

我们想要搞一些项目，只掌握后端知识是不行的，还需要掌握一些简单的前端知识，可以把项目浏览器页面做的简单一些（不要那么多的装饰）
前端分为HTML、CSS、JavaScript三部分

这篇博客就会先简单解析下前端知识，这样后续的项目浏览器上的前端代码就能大概看懂一些

2，HTML

HTML和CSS的知识并不多，博主之前写了个前端基础专栏，总结HTML和CSS的知识，铁汁们可以在这个专栏中复习相关知识（链接如下）
前端专栏链接

如下图，HTML和CSS共有六篇

在这里插入图片描述

前端专栏中还有Visual Studio Code的下载教程，建议铁汁们下载下，在这上边写前端代码会比较方便，同时Visual Studio Code也可以作为一个文本编辑器，用它来打开代码，可以语法高亮显示（比如注释的颜色和正常代码的颜色不一样，看着很清楚）

这里就不重新解析HTML的基础知识了（在前端基础专栏中已经详细解析了），补充一些表单标签和网络通信相关的内容

让用户输入用户名和密码，下面有个提交按钮，form标签中设置下action属性，将内容提交给deepseek服务器（deepseek服务器会忽略这个数据）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单控件补充</title>
</head>
<body>
    <form action="https://www.deepseek.com" method="get">
    姓名：<input type="text" name="userName1" id=""><br>
    密码：<input type="password" name="password1" id=""><br>
    <input type="submit">
    </form>
</body>
</html>

form标签的method属性有get和post，就对应着网络通信中的get和post请求，这里写成get（deepseek服务器会拒绝Post请求）

在这里插入图片描述

输入用户名和密码提交后，就会跳转到deepseek的官网，通过看url，这里是通过查询字符串的形式来传递信息的，userName1=111&password1=111，userName1和password1就是在input标签中定义的name属性

在这里插入图片描述

submit按钮提交的是当前所在的form标签中的所有数据，并不是只提交其前面的数据，在submit按钮后写个性别的选择，因为在同一个form标签中，点击submit后，性别相关的信息也会被提交上去，代码如下

<body>
    <form action="https://www.deepseek.com" method="get">
    姓名：<input type="text" name="userName1" id=""><br>
    密码：<input type="password" name="password1" id=""><br>
    <input type="submit"><br>
    性别：<input type="radio" name="gender" id="man">
    <label for="man">男</label>
    <input type="radio" name="gender" id="woman">
    <label for="woman">女</label>
    </form>
</body>

但是这里就有个问题，无论选择男还是女，查询字符串的gender的值都是on

在这里插入图片描述

radio、checkbox 这类选择型 input，就要在里面加个value，提交信息时提交的就是value的值，value值一般用的都是数字，比如前后端约定好，返回0就表示女，返回1就表示男，如下所示

    性别：<input type="radio" name="gender" id="man" value="1">
    <label for="man">男</label>
    <input type="radio" name="gender" id="woman" value="0">
    <label for="woman">女</label>

在这里插入图片描述

在实际开发中，一般value的值是不会直接设置为汉字的，因为汉字还有编码问题，有乱码的风险，value会设置为数字和短英文
例如checkbox多选框，代码如下

    爱好：
   <input type="checkbox" value="1">玩三角州
   <input type="checkbox" value="2">玩和平精英
   <input type="checkbox" value="3">玩王者荣耀
   <input type="checkbox" value="4">玩战地5

3，CSS盒子模型

在浏览器中，会大量使用div标签，div是独占一行的，可以设置 width、height、margin、padding，非常适合拿来做布局盒子

这里就搞三个盒子，设置下盒子的width和height，border就是边框，这里设置边跨的颜色为绿色，边框的粗细为1px，边框为实线solid（也可以设置虚线，圆点线）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒子模型</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            border: green 1px solid;
        }
    </style>
</head>
<body>
     <div id="one">111</div>
     <div id="two">222</div>
     <div id="three">333</div>
</body>
</html>

接着右键界面，点击检查，打开浏览器的开发者工具（不同浏览器的开发者界面布局可能不太一样，但功能都差不多）

在这里插入图片描述

在开发者工具中选中第一个div盒子，在下面的样式中看，CSS 盒子模型一共四层，从内向外依次是：content（内容区） → padding（内边距） → border（边框） → margin（外边距）

content（内容区）：中间蓝色框，200×100，放文字、图片、子元素，width / height 设置的就是它
padding（内边距）：内容和边框之间的区域，属于盒子内部
border（边框）：包裹 padding 的边线
margin（外边距）：盒子外面的空白，用来隔开别的盒子，透明，不会有背景

这里铁汁们会发现这里设置的border是1px，但是下面的图中却显示的是0.667px，这是因为现在的笔记本电脑或外接显示器，屏幕分辨率通常很高（比如 2K、4K）。如果 Windows 系统按 100% 显示，字和图标会小得根本看不清。因此，系统默认会推荐你把缩放设置为 125%、150% 或 200%，这个了解下即可

在这里插入图片描述

margin就是外边距，分隔这个盒子和其他盒子之间的距离时使用，可以设置顶部、底部、左边、右边的外边距，在style中对第一个div盒子设置下，如下所示

    <style>
        div {
            width: 200px;
            height: 100px;
            border: green 1px solid;
        }

        #one {
            margin-top: 10px;
            margin-bottom: 20px;
            margin-left: 10px;
            margin-right: 30px;
        }
    </style>

在这里插入图片描述

另外，div盒子设置的margin是不能叠加的，如果把第一个div盒子的margin-bottom设置为20px，第二个div盒子的margin-top设置为10px，那第一个盒子跟第二个盒子的垂直距离不是30px，而是20px，可以理解为取margin最大值，两者单算，之间距离取margin最大值就够用了，如下图：

    <style>
        div {
            width: 200px;
            height: 100px;
            border: green 1px solid;
        }

        #one {
            margin-top: 10px;
            margin-bottom: 20px;
            margin-left: 10px;
            margin-right: 30px;
        }

        #two {
            margin-top: 10px;
        }
    </style>

在这里插入图片描述

也可以直接一行代码设置4个margin，代码如下，就是按照上左下右的顺序

    <style>
        div {
            width: 200px;
            height: 100px;
            border: green 1px solid;
        }

        #one {
            margin: 10px 20px 30px 40px;
        }
    </style>

在这里插入图片描述

padding就是content到边框的距离，这里把上下左右的padding都设置为10px，如下图：

    <style>
        div {
            width: 200px;
            height: 100px;
            border: green 1px solid;
        }

        #one {
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-top: 10px;
        }
    </style>

在这里插入图片描述

4，JQuery

JavaScript（JS）核心定位就是负责网页的交互与业务逻辑，用户不同的操作（点击、输入）可能对应着不同的效果

在博主的前端基础专栏中有三篇JS解析博客，解析的是JS的基础语法，包括变量、数据类型、循环语句、数组、函数、类、对象、浏览器开发者工具等等

专栏链接
在这里插入图片描述

1，框架导入

JQuery是JavaScript的一个框架，通过JQuery可以轻松地选择和操作HTML元素，提升开发效率，JQuery是老一代的JS工具库，现在主流使用的是Vue框架，一些老项目还是使用的JQuery，JQuery大概了解下，能大概读懂老代码即可

使用JQuery时需要先引入对应的库，官网下载链接如下，选JQuery4.x 的script → minified（红圈圈出）

moudle版本在做工程化项目时使用，现在学习下载script版本的即可，里面又细分为4个小版本，uncompressed和minified是完整版本，slim和slim minified是精简版本，缩减了一些功能
minified和slim是经过压缩的，就选择完整压缩版minified即可

官网下载链接
在这里插入图片描述

点开后复制这个网址，在浏览器中打开，再点击右键，点击另存为

在这里插入图片描述

创建一个js目录，把这个JQuey存储到这个js目录中

在这里插入图片描述

接着在这个js目录中创建个demo01.html文件，在html文件用script标签的src属性导入JQuery框架

在这里插入图片描述

也可以直接把这个复制到html文件中进行导入，这样每次打开网页会请求CDN服务器，在线引入框架，速度是没有本地导入快的

在这里插入图片描述

2，JQuery语法

JQuery使用的是$(selector).action()，selector是选择器，用来查找匹配到响应的html元素，action表示对元素执行的操作
现在完成一个简单的交互，网页上显示一个普通按钮，这个按钮点击后就会消失，代码如下：

buttton标签的type属性设置为button，表示这是个普通的按钮（提交按钮的type属性是submit，重置按钮的属性就是reset）
document就表示整个文档对象，$(document).ready()就是页面的结构加载完再运行ready中的逻辑（JS如果写到了button的前面，浏览器是从上往下加载的，读到$(‘button’)的时候，页面还没有这个 button，jQuery 找不到元素，绑定点击事件就失效）
接着用匿名函数的写法，在函数中用$(‘button’)选择到button标签，click就表示点击事件，点击这个按钮后就触发点击事件，执行click里面的逻辑
click里面也搞个匿名函数，$(this)就表示拿到事件源，也就是触发事件的元素，这里就是这个button标签，接着调用hide方法让这个button消失掉

<body>
    <script src="./jquery-4.0.0.min.js"></script>
    <button type="button">点我消失</button>

    <script>
        $(document).ready(function(){
        $('button').click(function(){
            $(this).hide();
        })
    })
    </script>
</body>

可以结合CSS中的类选择器、id选择器、标签选择器、伪类选择器来精准匹配html元素，如下图：

在这里插入图片描述

网页上经常会有鼠标悬停在一个区域或者点击，触发一些事件（例如B站，鼠标悬停在视频上，视频就会自动播放），这个就可以通过JQuery来实现，相关方法如下图：

在这里插入图片描述

3，获取/设置元素内容

有三个简单获取元素内容、设置元素内容的方法，如下图：

在这里插入图片描述

用text()可以获取文本内容，用html()可以获取元素内容（包括标签），val就是获取文本框中的内容，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./jquery-4.0.0.min.js"></script>
    <div class="demo"><span>我是一个文本</span></div>
    <input type="text" name="" id="demo" value="我是一个input">
    <script>
       let a = $(".demo").text();
       let b = $(".demo").html();
       console.log(a);
       console.log(b);
       let c = $("#demo").val();
       console.log(c);
    </script>
</body>
</html>

在这里插入图片描述

如下图，打开开发者工具，打开控制台（如果没有就点击+号，选择控制台），就在控制台上显示了文本信息和包括标签的元素信息，以及文本框中的内容

在这里插入图片描述

接下来用mouseover做出鼠标放在文本上面就修改，鼠标离开就恢复的效果，用的是text方法，参数就是修改后的文本，是字符串类型，代码如下：

<body>
    <script src="./jquery-4.0.0.min.js"></script>
    <div class="demo"><span>我是一个文本</span></div>
    <script>
        $(".demo").mouseover(function(){
            $(this).text("哈哈哈，我修改了！");
        })

        $(".demo").mouseleave(function(){
            $(this).text("我是一个文本");
        })
    </script>
</body>

也可以在mouseover里面用html和val方法，更改文字样式和文本框中的内容，代码如下，鼠标放在文本上时，文本内容加粗，文本框中的内容改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./jquery-4.0.0.min.js"></script>
    <div class="demo"><span>我是一个文本</span></div>
    <input type="text" name="" id="demo" value="我是一个input">
    <script>
       $(".demo").mouseover(function(){
        $(this).html("<b>我是一个文本<b>");
        $("#demo").val("我也被修改了");
       })
    </script>
</body>
</html>

4，获取/设置元素属性

attr方法就是获取到元素的属性，在attr传入两个参数，就是设置元素的属性，就可以通过attr实现一个好玩的功能，两张图片，在网页中只显示一张，鼠标点击切换另一张，再点击再切换回去

这里在网上下载两张雷军的图片，放到js目录中，代码如下，鼠标点击就能切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./jquery-4.0.0.min.js"></script>
    <img src="./R-C (1).jpg" alt="" id="pic">
    <script>
       $("#pic").click(function(){
        let pic = $("#pic").attr("src");
        if (pic == "./R-C (1).jpg"){
            $(this).attr("src","./R-C.jpg")
        }else{
            $(this).attr("src","./R-C (1).jpg")
        } 
       })
    </script>
</body>
</html>

在这里插入图片描述

5，获取/设置元素的CSS属性

获取/设置元素的css属性用的是css方法，可以获取元素的颜色、字体、长宽等各种css属性，传入两个参数就是对相应的css属性进行修改

代码如下，css中传入单个参数"color"，相应元素的color属性，再用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>
</head>
<body>
    <script src="./jquery-4.0.0.min.js"></script>
    <div style="color: red;" id="demo">点击我变色</div>
    <script>
        console.log($("#demo").css("color"));
        
        $("#demo").click(function(){
            $(this).css("color","green");
        })
    </script>
</body>
</html>

在这里插入图片描述

6，添加元素

append ()：在被选元素的结尾插入内容
prepend ()：在被选元素的开头插入内容
after ()：在被选元素之后插入内容
before ()：在被选元素之前插入内容

append / prepend是插到元素里面；after / before：是插到元素外面
就拿prepend和before在无序列表中插入元素，看一下区别，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <script src="./jquery-4.0.0.min.js"></script>
    <script>
       $("ul").prepend("pretend");
       $("ul").before("before");
    </script>
</body>
</html>

在这里插入图片描述

在开发者工具中看下插入后的代码，就会更清楚一些，pretend是插在了ul标签内，before是插在了ul标签外，如下图：

在这里插入图片描述

7，删除元素

删除元素有两个方法：

remove()：删除被选元素及其子元素
empty()：删除被选元素的子元素

写代码试一下，如果用empty，ul标签的子元素都会被删除，ul标签不会被删除

<body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <script src="./jquery-4.0.0.min.js"></script>
    <script>
       $("ul").empty();
    </script>
</body>

在这里插入图片描述

如果用remove，那ul标签和其子元素都会被删除

<body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <script src="./jquery-4.0.0.min.js"></script>
    <script>
       $("ul").remove();
    </script>
</body>

在这里插入图片描述

5，猜数字游戏

用JS简单的写个网页版的猜数字游戏，用户在文本框中输入猜的数字，输入完成后点击“猜”这个按钮，下面显示猜大了/猜小了/猜对了，统计这一轮猜了多少次，再搞一个“重新开始一局游戏”的按钮，用户可以点击这个按钮重新开始一轮游戏

html框架如下图，文字或者变量用span标签包裹一下，这样方便精准选中进行单独修改

<body>
    <button id="reset">重新开始一局游戏</button><br>
    <span>请输入要猜的数字（范围为1-100的整数）：</span><input type="number" name="" id="userGuess"><button id="guess">猜</button><br>
    <span>已经猜的次数：</span><span id="count">0</span><br>
    <span>结果：</span><span id="result"></span><br>
    <script src="./jquery-4.0.0.min.js"></script>
</body>

加上js逻辑，代码如下，大部分JS代码已经在前面的JQuery部分解析过了，再解析下之前没提到的：

随机数的生成，就使用Math.random()方法，生成的是[0,1)的小数，乘以100，范围就是[0,100)，但是可能是小数，还要通过Math.floor()进行向下取整，取整后范围就是[0,99)的整数，再加上1，就是[1,100]的整数了
生成完数字后，在控制台上打印一下，后续可以提前知道生成的数，接着进行输入，测试结果部分的提示是否正确
当点击"猜"这个按钮时触发if判断，判断三种情况，猜大了和猜小了的字体颜色都是红色，猜对的字体颜色就是绿色
点击“重新开一局游戏”按钮时，要把count归零，结果的显示部分清空，同时要把输入框里内容也给清空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
</head>
<body>
    <button id="reset">重新开始一局游戏</button><br>
    <span>请输入要猜的数字（范围为1-100的整数）：</span><input type="number" name="" id="userGuess"><button id="guess">猜</button><br>
    <span>已经猜的次数：</span><span id="count">0</span><br>
    <span>结果：</span><span id="result"></span><br>
    <script src="./jquery-4.0.0.min.js"></script>
    <script>
        let number = Math.floor(Math.random() * 100) + 1;
        console.log(number);
        
        let count = 0;
        $("#guess").click(function(){
            let userGuessNum = $("#userGuess").val();
            count++;
            $("#count").text(count);
            if(userGuessNum > number){
                $("#result").text("猜大了");
                $("#result").css("color","red");
            }else if(userGuessNum < number){
                $("#result").text("猜小了");
                $("#result").css("color","red");
            }else{
                $("#result").text("猜对了");
                $("#result").css("color","green");
            }
        })

        $("#reset").click(function(){
            number = Math.floor(Math.random() * 100) + 1;
            count = 0;
            $("#count").text(count);
            $("#result").text("");
            $("#userGuess").val("");
        })
    </script>
</body>
</html>

6，留言板

网页版的留言板，上面有三个输入框，点击提交后，下面就会添加信息内容，如下图

在这里插入图片描述

代码如下所示，这里铁汁们大概看下JS的使用即可，没必要深究前端代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;   /*居中 */
            /* border: 1px black solid; */
            text-align: center;
        }

        .grey {
            color: grey;
        }

        .container .row {
            width: 350px;
            height: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .row input {
            width: 260px;
            height: 30px;
        }

        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>留言板</h1>
        <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
        <div class="row">
            <span>谁:</span> <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <input type="button" value="提交" id="submit" onclick="submit()">
        <!-- <div>A 对 B 说: hello</div> -->
    </div>

    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        function submit(){
            let from = $("#from").val();
            let to = $("#to").val();
            let say = $("#say").val();
            //TODO 自行定义
            if(from=="" || to =="" || say==""){
                return;
            }

            let html = "<div>"+from+" 对 "+to+" 说: "+say+"</div>"
            $(".container").append(html);
            $(":input").val("");
            // $("#from").val("");
        }
        
    </script>
</body>

</html>