javaSE学习（前端基础知识）

文章目录

  • 前言
  • 一、HTML
    • 1、< th >、< tr > 和 < td >标签：
    • 2、< button > 标签：
    • 3、< input type="text" >：
    • 4、< br >：
  • 二、CSS
    • 1、选择器
    • 2、声明块
    • 3、常用属性及值
  • 三、JS
    • 1、Vue 实例对象：
    • 2、@click 指令：
    • 3、v-for 指令：
    • 4、:key 绑定：
    • 5、v-model 指令：
    • 6、axios.请求（）.then（以axios.get为例）：
    • 7、data的理解：
    • 8、箭头函数：
  • 四、完整代码展示
  • 结语

前言

HTML、CSS 和 JavaScript 是网页开发的三大核心技术，它们之间存在着紧密的关系，各自有着不同的职责和用途。HTML 负责构建网页的基本结构和内容框架，CSS 用于设定网页的样式和布局以美化页面外观，JavaScript 为网页添加动态效果和交互行为使其更加灵活和生动。

一、HTML

1、< th >、< tr > 和 < td >标签：

在 HTML 里，< th >、< tr > 和 < td >都是用于构建表格的标签：

< tr > 是 “table row” 的缩写，代表表格的行。一个 < tr > 标签就对应表格中的一行数据。在 < table > 标签内部使用 < tr > 标签来创建表格的行结构；
< th > 是 “table header” 的缩写，用于定义表格的表头单元格。在 < tr > 标签内部使用 < th > 标签来创建表头单元格；
< td > 是 “table data” 的缩写，用来定义表格中的单元格，也就是表格里实际显示数据的地方。通常要放在 < tr > 标签内部，每一个 < td > 标签对应表格中的一个单元格。

2、< button > 标签：

< button > 是 HTML 中的标准标签，用于创建一个按钮元素。

3、< input type=“text” >：

< input > 是 HTML 里用于创建表单输入元素的标签。

type=“text” 明确了输入框的类型为文本输入框，用户能够在其中输入任意文本内容。
text写成password就会以掩码形式（星星或圆点）出现。

4、< br >：

换行标签。

二、CSS

CSS可以通过三种方式引入到 HTML 页面中：

1、内联样式，直接在 HTML 元素的 style 属性中编写 CSS 样式；
2、内部样式表，在 HTML 页面的 < head > 标签内使用 < style > 标签定义 CSS 样式；
3、外部样式表，将 CSS 代码写在独立的 .css 文件中，然后在 HTML 页面的 < head > 标签内使用 < link > 标签引入该文件。

CSS常用语法如下：

1、选择器

选择器用于指定 CSS 样式要应用到的 HTML 元素，以下是几种常见选择器：

  • 元素选择器：通过元素名称选择 HTML 元素。
p {color: blue;
}//将所有 <p> 标签内的文本颜色设置为蓝色。
  • 类选择器：使用 . 开头
.highlight {background-color: yellow;
}//HTML 中使用 class="highlight" 的元素背景颜色会变为黄色。
  • ID 选择器：使用 # 开头
#header {font-size: 24px;
}//id="header" 的元素字体大小会被设为 24px。
  • 属性选择器：根据元素的属性及其值来选择元素。
input[type="text"] {border: 1px solid gray;
}//给所有 type 属性为 text 的 <input> 元素添加灰色边框。

2、声明块

由一对花括号 { } 包裹，包含一个或多个声明，每个声明由属性和值组成，用冒号 : 分隔，声明之间用分号 ; 分隔。

p {color: red;font-size: 16px;
}

3、常用属性及值

  • 文本相关
    color：设置文本颜色。
    font-size：设置字体大小。常用单位:像素px
  • 盒模型相关
    width 和 height：设置元素的宽度和高度。
    margin：设置元素的外边距，即元素与其他元素之间的距离。
    padding：设置元素的内边距，即元素内容与边框之间的距离。
    border：设置元素的边框
  • 背景相关
    background-color：设置元素的背景颜色。
    background-image：设置元素的背景图像。
div {background-image: url('image.jpg');
}

三、JS

1、Vue 实例对象：

Vue 实例对象本质上是 JavaScript 对象，Vue.js 基于JavaScript 编写的一个前端框架。new Vue() 会创建一个新的 Vue 实例，传入配置对象：el、data、methods 等属性。

el： 用于指定 Vue 实例的挂载点；
data： 用于定义实例的数据，初始化数据；
methods： 用于定义实例的方法。

格式示例如下：

new Vue({el: '#app',data: {message: 'Hello, Vue!',count: 0},methods: {greet() {alert(this.message);},increment() {this.count++;}}
});

2、@click 指令：

@click 是 Vue.js 中的事件绑定指令，它是 v-on:click 的缩写形式。v-on 指令用于监听 DOM 事件，而 @click 则专门用于监听鼠标点击事件。当用户点击这个按钮时，就会执行 @click 后面指定的表达式或方法。

3、v-for 指令：

v-for 是 Vue.js 提供的一个用于循环渲染的指令，可以动态生成表格行；

语法格式： item in items；
items： 是一个数组或对象（通常是Vue 实例 data 选项中的一个数组，通过 axios 从后端获取数据后赋值给 depts）：
item： 是当前循环到的数组元素或对象属性。

4、:key 绑定：

:key 是一个特殊的属性，用于给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素。保证了渲染效率和准确性。

5、v-model 指令：

v-model 是 Vue.js 提供的一个非常实用的指令，它实现了表单输入元素和 Vue 实例数据之间的双向绑定。

<div id="user"><input type="text" v-model="newDept.name"><br><button @click="addDept">添加</button>
</div>

v-model=“newDept.name” 表明输入框的内容和 newDept.name 属性绑定。newDept 是 Vue 实例 data 选项里定义的一个对象，name 是该对象的一个属性。

6、axios.请求（）.then（以axios.get为例）：

loadDepts(){axios.get('http://localhost:8080/selectAll').then(response=>{this.depts=response.data.data;//Javascript不加;也是可以的})
}

axios.get 方法： 返回一个 Promise 对象,是用于处理异步操作的对象，它有三种状态：进行中pending、已成功fulfilled和已失败rejected
then ： 是 Promise 对象的一个方法，用于处理 Promise 成功的情况，它接受一个回调函数作为参数。

7、data的理解：

服务器返回的data字段： 在使用 axios 发送请求并获取服务器响应时，服务器返回的数据通常会包含在响应对象response的 data 字段中。
Vue实例中的data： 在 Vue 中，data 是一个选项，用于定义 Vue 实例的数据对象。
response.data.data中： 第一个 data 是 axios 响应对象的属性，用于获取服务器返回的整体数据；第二个 data 是服务器返回数据中的一个字段，用于获取具体需要的数据。

8、箭头函数：

response => { this.depts = response.data.data; 
}

语法形式：(参数列表) => { 函数体 }；
使用时机: 当 axios.get 发起的请求成功完成，服务器返回响应后，Promise 对象的状态会从 pending 变为 fulfilled。此时，then 方法中传入的回调函数就会被调用；
优点: 语法简洁。

传统函数定义方式：

function(response) {this.depts = response.data.data;//将服务器返回的数据中的data字段赋值给this.depts
}

四、完整代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>部门信息列表</title>
<!--    vue的核心库vue2.0 渲染数据-->
<!--    <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>--><script src="js/vue2.js"></script>     <!--保存到本地加载比较快-->
<!--    axios库-->
<!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>--><script src="js/axios.js"></script><style>#app table{//这是一个组合选择器，它表示选择 id 为 app 的元素内部的所有 <table> 元素border:solid 1px red;margin:0 auto;width:700px;font-size:20px;border-collapse:collapse;}tr,td{border:solid 1px red;}</style>
</head>
<body>
<div id="app"><div id="user"><input type="text" v-model="newDept.name"><br>
<!--        br换行--><button @click="addDept">添加</button></div><table><tr><th>ID</th><th>部门名称</th><th>创建时间</th><th>更新时间</th><th>操作</th></tr><tr v-for="dept in depts":key="dept.id"><td>{{dept.id}}</td><td>{{dept.name}}</td><td>{{dept.createTime}}</td><td>{{dept.updateTime}}</td><td><button @click="deleteDept(dept.id)">删除</button><button @click="updateDept(dept.id)">更新</button></td>
<!--            td是单元格--></tr></table>
</div>
<!--上面是css，下面是js-->
<script>new Vue({el:"#app",//这里的 '#app' 是一个 ID 选择器，表示 Vue 实例会挂载到 HTML 文档中 id 为 app 的元素上。data:{newDept:{name:""},depts:[]//渲染的数据},mounted(){//生命周期钩子，当前页面完整加载之后执行this.loadDepts();},methods:{//1.加载部门列表loadDepts(){axios.get('http://localhost:8080/selectAll').then(response=>{this.depts=response.data.data;//Javascript不加分号也是可以的})},//2.删除方法，请求后端删除的apideleteDept(id){if(confirm("确认删除该条记录吗?")){axios.delete(`http://localhost:8080/dept/${id}`).then(()=>this.loadDepts()//重新加载)}},//3.请求后端的添加数据接口addDept(){if(this.newDept.name==''){alert("未添加数据");return;}axios.post("http://localhost:8080/insertInfo",this.newDept).then(//箭头函数、回调函数()=>{this.newDept.name="";this.loadDepts();})},//4.修改数据接口updateDept(id){axios.get(`http://localhost:8080/getOne/${id}`).then(response=>{let a=response.data.data;console.log(a);//把数据打印到浏览器控制台let newName=prompt("请输入部门新名称",a.name);//输入框//构造新的对象let updateDept={id:a.id,name:newName,createTime:a.createTime,updateTime:new Date().toISOString()//前端获取时间的方式}//发送请求axios.put("http://localhost:8080/updateDept",updateDept).then(()=>{this.loadDepts();//刷新页面})})}}})
</script>
</body>
</html>

结语

通过对 HTML、CSS、JS 相关知识的梳理，从标签到指令，希望能帮大家了解前端基础。前端技术发展迅速，学习之路漫漫，如果有错误之处期待与大家在评论区交流，一起进步！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/76443.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

c# 数据结构 链表篇 有关单链表的一切

c# 数据结构 链表篇 有关单链表的一切

本人能力有限,本文仅作学习交流与参考,如有不足还请斧正 目录 0.单链表好处 0.5.单链表分类 1.无虚拟头节点情况 图示: 代码: 头插/尾插 删除 搜索 遍历全部 测试代码: 全部代码 2.有尾指针情况 尾插 全部代码 3.有虚拟头节点情况 全部代码 4.循环单链表 几个…
阅读更多...
蓝桥杯C++组算法知识点整理 · 考前突击（上）【小白适用】

蓝桥杯C++组算法知识点整理 · 考前突击（上）【小白适用】

【背景说明】本文的作者是一名算法竞赛小白&#xff0c;在第一次参加蓝桥杯之前希望整理一下自己会了哪些算法&#xff0c;于是有了本文的诞生。分享在这里也希望与众多学子共勉。如果时间允许的话&#xff0c;这一系列会分为上中下三部分和大家见面&#xff0c;祝大家竞赛顺利…
阅读更多...
pipe匿名管道实操（Linux）

pipe匿名管道实操（Linux）

管道相关函数 1 pipe 是 Unix/Linux 系统中的一个系统调用&#xff0c;用于创建一个匿名管道 #include <unistd.h> int pipe(int pipefd[2]); 参数说明&#xff1a; pipefd[2]&#xff1a;一个包含两个整数的数组&#xff0c;用于存储管道的文件描述符&#xff1a; pi…
阅读更多...
centos-stream-9上安装nvidia驱动和cuda-toolkit

centos-stream-9上安装nvidia驱动和cuda-toolkit

这里写目录标题 驱动安装1. 更新系统2. NVIDIA GPU安装检查系统是否安装了 NVIDIA GPU2.1 首先&#xff0c;使用以下命令更新 DNF 软件包存储库缓存&#xff1a;2.2 安装编译 NVIDIA 内核模块所需的依赖项和构建工具2.3 在 CentOS Stream 9 上添加官方 NVIDIA CUDA 软件包存储库…
阅读更多...
LDAP高效数据同步：Syncrepl复制模式实战指南

LDAP高效数据同步：Syncrepl复制模式实战指南

#作者&#xff1a;朱雷 文章目录 一、Syncrepl 复制简介1.1. 什么是复制模式1.2. 什么是 syncrepl同步复制 二、Ldap环境部署三、配置复制类型3.1. 提供者端配置3.2. 消费者端配置3.3.启动服务3.4.测试同步是否生效 四、总结 一、Syncrepl 复制简介 1.1. 什么是复制模式 Ope…
阅读更多...
Linux 内核网络协议栈中的 struct packet_type：以 ip_packet_type 为例

Linux 内核网络协议栈中的 struct packet_type：以 ip_packet_type 为例

在 Linux 内核的网络协议栈中，struct packet_type 是一个核心数据结构，用于注册特定协议类型的数据包处理逻辑。它定义了如何处理特定协议的数据包，并通过协议类型匹配机制实现协议分发。本文将通过分析 ip_packet_type 的定义和作用，深入探讨其在网络协议栈中的重要性。 …
阅读更多...
QT Sqlite数据库-教程001 创建数据库和表-下

QT Sqlite数据库-教程001 创建数据库和表-下

【1】创建带名称的数据库 #include <QtSql/QSqlDatabase> #include <QtSql/QSqlQuery> #include <QtSql/QSqlRecord> QString path QDir::currentPath(); QApplication::addLibraryPath(pathQString("/release/plugins")); QPluginLoader loader…
阅读更多...
Cannot find module ‘vue‘ or its corresponding type declarations

Cannot find module ‘vue‘ or its corresponding type declarations

在使用vue3vite创建新的工程时&#xff0c;在新增.vue文件时会出现Cannot find module vue这个错误。 只需要我们在项目中的.d.ts文件中添加以下代码即可 declare module *.vue {import { defineComponent } from vue;const component: ReturnType<typeof defineComponent&…
阅读更多...
SSRF打靶总结

SSRF打靶总结

文章目录 一. PortSwigger1、本地服务器的基本SSRF2、基本的目标不是漏洞机3、Referer标头的外带SSRF4、简单黑名单的SSRF黑名单绕过思路&#xff1a; 5、重定向的SSRF6. 简单的白名单SSRF白名单绕过思路&#xff1a; 二、BWAPP1. SSRF 文件包含漏洞 | 内网探测2. XXE -> S…
阅读更多...
STL-函数对象

STL-函数对象

1.函数对象 1.1 概念 重载函数调用操作符的类&#xff0c;其对象被称为函数对象 函数对象使用重载的&#xff08;&#xff09;时&#xff0c;行为类似函数调用&#xff0c;也成为仿函数 本质&#xff1a;函数对象&#xff08;仿函数&#xff09;是一个类&#xff0c;不是一…
阅读更多...
多线程（Java）

多线程（Java）

注&#xff1a;本文为本人学习过程中的笔记 1.导入 1.进程和线程 我们希望我们的程序可以并发执行以提升效率&#xff0c;此时引入了多进程编程。可是创建进程等操作开销太大&#xff0c;于是就将进程进一步拆分成线程&#xff0c;减少开销。进程与进程之间所涉及到的资源是…
阅读更多...
在 Dev-C++中编译运行GUI 程序介绍（三）有趣示例一组

在 Dev-C++中编译运行GUI 程序介绍（三）有趣示例一组

在 Dev-C中编译运行GUI程序介绍&#xff08;三&#xff09;有趣示例一组 前期见 在 Dev-C中编译运行GUI 程序介绍&#xff08;一&#xff09;基础 https://blog.csdn.net/cnds123/article/details/147019078 在 Dev-C中编译运行GUI 程序介绍&#xff08;二&#xff09;示例&a…
阅读更多...
【高校主办】2025年第四届信息与通信工程国际会议(JCICE 2025)

【高校主办】2025年第四届信息与通信工程国际会议(JCICE 2025)

重要信息 会议网址&#xff1a;www.jcice.org 会议时间&#xff1a;2025年7月25-27日 召开地点&#xff1a;哈尔滨 截稿时间&#xff1a;2025年6月15日 录用通知&#xff1a;投稿后2周内 收录检索&#xff1a;EI,Scopus 会议简介 JCICE 2022、JCICE 2023、JCICE 2…
阅读更多...
【Linux】Linux 操作系统 - 03 ,初步指令结尾 + shell 理解

【Linux】Linux 操作系统 - 03 ,初步指令结尾 + shell 理解

文章目录 前言一、打包和压缩二、有关体系结构 (考)面试题 三、重要的热键四、shell 命令及运行原理初步理解五、本节命令总结总结 前言 本篇文章 , 笔者记录的笔记内容包含 : 基础指令 、重要热键 、shell 初步理解 、权限用户的部分问题 。 内容皆是重要知识点 , 需要认真理…
阅读更多...
Python: sqlite3.OperationalError: no such table: ***解析

Python: sqlite3.OperationalError: no such table: ***解析

出现该错误说明数据库中没有成功创建 reviews 表。以下是完整的解决方案： 步骤 1：创建数据库表 在插入数据前，必须先执行建表语句。请通过以下任一方式创建表： 方式一：使用 SQLite 命令行 bash 复制 # 进入 SQLite 命令行 sqlite3 reviews.db# 执行建表语句 CREATE T…
阅读更多...
VSCode CLine 插件自定义配置使用 Claude 3.7 模型进行 AI 开发

VSCode CLine 插件自定义配置使用 Claude 3.7 模型进行 AI 开发

一个互联网技术玩家&#xff0c;一个爱聊技术的家伙。在工作和学习中不断思考&#xff0c;把这些思考总结出来&#xff0c;并分享&#xff0c;和大家一起交流进步。 本文介绍如何在 Visual Studio Code (VSCode) 中安装和自定义配置 CLine 插件&#xff0c;并使用 Claude 3.7 模…
阅读更多...
【VSCode配置】运行springboot项目和vue项目

【VSCode配置】运行springboot项目和vue项目

目录 安装VSCode安装软件安装插件VSCode配置user的全局设置setting.jsonworkshop的项目自定义设置setting.jsonworkshop的项目启动配置launch.json 安装VSCode 官网下载 安装软件 git安装1.1.12版本&#xff0c;1.2.X高版本无法安装node14以下版本 nvm安装&#xff08;github…
阅读更多...
linux shell编程之条件语句（二）

linux shell编程之条件语句（二）

目录 一. 条件测试操作 1. 文件测试 2. 整数值比较 3. 字符串比较 4. 逻辑测试 二. if 条件语句 1. if 语句的结构 (1) 单分支 if 语句 (2) 双分支 if 语句 (3) 多分支 if 语句 2. if 语句应用示例 (1) 单分支 if 语句应用 (2) 双分支 if 语句应用 (3) 多分支 …
阅读更多...
榕壹云在线商城系统：基于THinkPHP+ Mysql+UniApp全端适配、高效部署的电商解决方案

榕壹云在线商城系统：基于THinkPHP+ Mysql+UniApp全端适配、高效部署的电商解决方案

项目背景&#xff1a;解决多端电商开发的痛点 随着移动互联网的普及和用户购物习惯的碎片化&#xff0c;传统电商系统面临以下挑战&#xff1a; 1. 多平台适配成本高&#xff1a;需要同时开发App、小程序、H5等多端应用&#xff0c;重复开发导致资源浪费。 2. 技术依赖第三方…
阅读更多...
神经动力学系统与计算及AI拓展

神经动力学系统与计算及AI拓展

大脑&#xff0c;一个蕴藏在我们颅骨之内的宇宙&#xff0c;以活动脉动&#xff0c;如同由电信号和化学信号编织而成的交响乐&#xff0c;精巧地协调着思想、情感和行为。但是&#xff0c;这种复杂的神经元舞蹈是如何产生我们丰富多彩的精神生活的呢&#xff1f;这正是神经动力…
阅读更多...
最新文章

Copyright @ 2022~2023