当前位置：首页 > news >正文

javaweb(AI)-----前端

news 2025/9/7 17:47:04

前端代码通过浏览器对代码渲染（浏览器内核）转化成网页

HTML

<h1> </h1>
<h1 style="color:red;"> </h1>

CSS

引入方式：1.行内； 2.内部； 3.外部；

get与post请求

<!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="/save" method="get">姓名：<input type="text" name="name">年龄：<input type="text" name="age"><input type="submit" value="提交"></form>
</body>
</html>

get 方法会把表单数据附加在 URL 后面，这在提交敏感信息时存在安全风险，因为 URL 可能会被记录在浏览器历史记录、服务器日志里。
action = “提交的url地址”

<!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="/save" method="post">姓名：<input type="text" name="name">年龄：<input type="text" name="age"><input type="submit" value="提交"></form>
</body>
</html>

表单提交

注意：表单必须有name属性才能提交
name属性
数据提交：name 属性主要用于在表单提交时标识表单元素，以键值对的形式将表单数据发送到服务器。例如，在一个登录表单中有用户名和密码输入框，<input type="text" name="username"> 和 <input type="password" name="password"> ，当用户提交表单时，服务器接收到的数据会类似于 username=JohnDoe&password=secret123，通过 name 来区分不同的数据项。
表单元素分组：在 radio（单选框）和 checkbox（复选框）元素中，具有相同 name 值的元素会被归为一组，例如，<input type="radio" name="gender" value="male"> 和 <input type="radio" name="gender" value="female">，用户只能从这一组中选择一个选项。
id属性
唯一标识：id 属性用于在整个 HTML 文档中唯一标识一个元素，就像每个人的身份证号一样，同一个页面中的 id 不能重复。它常被用于 CSS 选择器和 JavaScript 中定位特定的元素。例如，使用 CSS 为特定元素设置样式 #myForm { border: 1px solid black; } ，或者在 JavaScript 中获取元素并进行操作，document.getElementById('myForm'); 。
建立关联：可以通过 id 来建立表单元素和其他元素（如 <label> 标签）之间的关联。例如，<label for="username">用户名:</label> <input type="text" id="username"> ，当用户点击 label 文本时，浏览器会自动将焦点切换到 id 为 username 的输入框上，提升用户体验。

表单

<body><!--只有用form围起来的内容才能提交，交到action指定位置--><form action="http://" method="get">用户名：<input type="text" name="username"placeholder="请输入用户名·" value="admin"><br><br><!--    value表示单选或多选时，表单选项提交的值-->密码：<input type="password" name="pwd"placeholder=""><br><br>性别：<input type="radio" value="f" name="sex">女<input type="radio" value="m" name="sex">男<br><br>爱好：<input type="checkbox" value="ball" name="hobby">篮球<input type="checkbox" value="swim" name="hobby">游泳<input type="checkbox" value="draw" name="hobby">画画<input type="checkbox" value="sing" name="hobby">唱歌<br><br>学校：<select><!--        value是提交到后台的值--><option value="1">学校a</option><option value="2">学校b</option><option value="3" selected>学校c</option><option value="4">学校d</option></select><br><br><textarea >文本域</textarea><br><br><input type="button" value="普通按钮" onclick="alert('hello')"><input type="submit" value="提交按钮"><input type="reset" value="重置按钮"></form></body>

value表示单选或多选时，表单选项提交的值

type = "button" 是普通按钮，需要搭配js实现交互效果
type = "submit" 可以直接提交

label 元素能提高表单的可访问性，用户点击 label 文本时，对应的输入框会获得焦点。
用label标签进行包裹，可以提高用户体验

        <label for="name">姓名：</label><input type="text" id="name" name="name">

label 要与 id = name 的表单进行绑定
点击一下“姓名”，光标就会聚焦于姓名输入框

HTML CSS 总结

JavaScript

js是一门脚本语言（不用编译直接运行），控制网页行为
组成： ECMAScript; BOM; DOM

核心语法

1.引入

自定义对象

    <script>// 1.自定义对象let user = {name : '张三',age : 18,sex : '男',sing(){console.log('我会唱歌');}}// 2.调用对象属性console.log(user.name);console.log(user.age);console.log(user.sex);user.sing();</script>

注意在箭头函数中，this指向当前对象的父级（Window）
所以在js中自定义函数时不要使用箭头函数

JSON

js对象标记法。即js对象标记书写法的文本。
作为数据载体，文本字符串格式。
前端给服务器发送请求，服务器给前端响应结果。

json和自定义对象的区别：所有的key都用“”
注意：仅仅是看起来像，本质不一样

如果是用自定义对象，alert结果如下图：

要想显示字符，就用 alert(JSON.stringify(person));

若要 json字符串-> js对象:

let personJson = '{"name":"zero", "age":18}';

alert(JSON.parse(personJson).age);

DOM

<body><h1 id="title1">11111</h1><h1>22222</h1><h1>33333</h1><script>// 1.修改第一个h1// 1.1 获取DOM对象let h1 = document.querySelector('#title1');// 1.2 调用方法h1.innerHTML = '修改后的内容，不再是111';</script>
</body>

事件监听

<body><input type="button" id="btn1" value="点我一下1"><input type="button" id="btn2" value="点我一下22"><input type="button" id="btn3" value="点我一下3"><script>//绑定 事件监听document.querySelector('#btn1').addEventListener('click',function() {console.log('是啦');});document.querySelector('#btn2').addEventListener('click',() => {console.log('是啦lalala');});document.querySelector('#btn3').onclick = () => {console.log('3333333333');}</script>
</body>

addEventListener 可以多次绑定同一事件
onclick 后面的会被覆盖

  // 1.获取所有数据行let trs = document.querySelectorAll('tbody tr');// 2.循环遍历数据行for (let i = 0; i < trs.length; i++) {// 为当前数据行添加鼠标进入事件监听trs[i].addEventListener('mouseenter',function() {// 鼠标进入后，当前数据行背景色变为淡蓝色this.style.backgroundColor = '#ADD8E6';});// 为当前数据行添加鼠标离开事件监听trs[i].addEventListener('mouseleave',function() {// 鼠标离开后，当前数据行背景色恢复为白色this.style.backgroundColor = '#f0f0f0';});}

优化JS:
1. 模块化
2. import
3. export

JQuery

是JS库，为提供Ajax交互
下载jquery-min.js，在项目中引入

基础用法

 $('#d').css('background','blue');$(function () {alert($("#d").html())});function change() {$("#d").html("<span style='color: #e54d4d'>这是span</span>")}

    <script>$(function (){$('#btn').click(function (){$("*").css("color","red");$("#e").css({"background-color":"pink","font-size":"20px"})$("p").hide()})})</script><div id="d">  div1 </div><div id="e">  div2 </div><div id="f">  div3 </div><p>这是标签</p><span>这是span</span><button id="btn">点击</button>

表单元素

 $(function (){$("#btn").click(function (){console.log($("#username").val());})})

最外层function是在解析文档
里面层在给id=btn的按钮绑定点击事件
$(item).val()：将item用$()先包裹成JQuery对象，再用.val()获取值

Vue3

用于构建用户界面的渐进式的JavaScript框架
构建用户界面：将Json格式转化为用户可见形式（数据渲染）
渐进式：Vue核心包，功能组件，形成生态
框架

 <div id="app"><h1>{{message}}</h1></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data(){return {message: 'Hello Vue'}}}).mount('#app')</script>