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

JavaSE学习（前端初体验）

article 2026/1/18 16:59:07

文章目录

  • 前言
  • 一、准备环境
  • 二、创建站点（创建一个文件夹）
  • 三、将站点部署到编写器中
  • 四、VScode实用小设置
  • 五、案例展示

前言

首先了解前端三件套：HTML、CSS、JS

HTML：超文本标记语言、框架层、描述数据的；
CSS：层叠样式表、表现层，美化修饰数据的；
JS：动作层、实现交互、加工处理数据的。

一、准备环境

1、下载一个编写器:
vscode，常见的还有hbuilder、sumlim；
2、安装一个解释执行器：
任何浏览器都可以，但推荐使用firefox火狐浏览器，因为它可以在做CSS时一边做一边立即就可以看到效果。

可以下载一个腾讯电脑管家，在里面寻找你需要的应用软件，非常方便！

二、创建站点（创建一个文件夹）

1、在任意磁盘位置创建一个文件夹，这里以在桌面创建为例：
在这里插入图片描述

2、在里面再创建两个文件夹，用于放图片或视频等的素材：
在这里插入图片描述

三、将站点部署到编写器中

1、打开vscode，点击文件—>打开文件夹…选中刚才创建好的文件夹

在这里插入图片描述

2、创建css、html文件

在这里插入图片描述

3、打出一个感叹号！或者doc敲回车，自动搭建好框架

4、将html文件与css文件连接起来
在这里插入图片描述

我们可以打开浏览器检查是否连接上：
在这里插入图片描述

找到我们创建的站点—>右键打开—>在浏览器中右键点击查看源代码—>点击show.css，如果连接成功会自动跳转，反之会显示找不到文件。
在这里插入图片描述

四、VScode实用小设置

1、关于字体：
文件—>首选项—>设置—>文本编辑器—>字体；
如果希望按住鼠标滚轴和ctrl进行调节：找到
在这里插入图片描述
点击settings.json进去再最后一句加上:

"editor.mouseWheelZoom": true

2、主题颜色：
依然是在设置里面，有个工作台—>外观—>color theme；
在这里插入图片描述

3、软件的汉化：
点击扩展—>搜索chinese—>选择简体中文下载。
在这里插入图片描述

五、案例展示

1、在HTML中编写结构层：
思想：写盒子、搭框架。
例如下面这样一个案例：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的前端页面</title><link rel="stylesheet" href="show.css">
</head>
<body><div class="top">1</div><div class="middle"><div class="left">3</div><div class="right">4</div></div><div class="bottom">5</div>
</body>
</html>

2、在CSS中编写表现层：
我们可以在vscode中写代码，但是更推荐在火狐浏览器的样式编辑器中写，因为可以看到即使效果
在这里插入图片描述
点击这里，找到样式编辑器。
每次更改切记保存！

*{margin:0;padding:0;
}
body{background: aliceblue;
}
.top{width: 900px;height:100px;border:solid 3px cadetblue;margin-top:20px;margin-left:auto;margin-right:auto;background:lightcyan;
}
.middle{width: 900px;height:450px;border:solid 3px lightsteelblue;margin-top:20px;margin-left:auto;margin-right:auto;background:lightgoldenrodyellow;
}
.left{width: 400px;height:400px;border:solid 3px lightsteelblue;margin-top:20px;margin-left:20px;margin-right:20px;background:lightgrey;float:left;
}
.right{width: 400px;height:400px;border:solid 3px lightsteelblue;margin-top:20px;margin-left:20px;margin-right:20px;background:lightgrey;float:right;
}
.bottom{width: 900px;height:100px;border:solid 3px yellow;margin:20px auto;background:pink;
}

说明几点：
1、关于居中可以用margin:20px auto;（上下边距20，水平居中）去代替
margin-top:20px;
margin-left:auto;
margin-right:auto;
2、margin：外边距；padding：内边距。
3、float：每个盒子独占一行，如果希望放在同一行就需要浮动一下。

相关文章：

JavaSE学习（前端初体验）

文章目录 前言一、准备环境二、创建站点&#xff08;创建一个文件夹&#xff09;三、将站点部署到编写器中四、VScode实用小设置五、案例展示 前言 首先了解前端三件套&#xff1a;HTML、CSS、JS HTML&#xff1a;超文本标记语言、框架层、描述数据的&#xff1b; CSS&#xf…...

编程日记 2026/1/14 10:36:43

AlmaLinux 9.2 安装 snmp 后 sshd 服务无法启动

问题 AlmaLinux 9.2 安装 net-snmp 后导致 sshd 无法启动&#xff0c;SSH 无法正常连接。并且在日志中发现OpenSSL version mismatch. Built against 30000010, you have 30200020错误。 问题排查 AlmaLinux 9.2 初始安装 openssl 的版本为 3.0.7。软件包为openssl-3.0.7-6。…...

编程日记 2026/1/10 6:49:55

前端渲染pdf文件解决方案

一、前言 在当今数字化信息传播的时代&#xff0c;PDF文档作为一种常见的文件格式扮演着重要的角色。对于前端开发者而言&#xff0c;实现在网页上渲染和展示PDF文件是一项常见但也具有挑战性的任务。幸运的是&#xff0c;现在有一个强大的工具——react-pdf-viewer&#xff0c…...

编程日记 2026/1/8 19:43:35

Kubernetes（K8S）内部功能总结

Kubernetes&#xff08;K8S&#xff09;是云技术的最核心的部分&#xff0c;也是构建是云原生的基石 K8S K8S&#xff0c;是Kubernetes的缩写&#xff0c;是Google开发的容器编排平台&#xff0c;现在由云原生计算基金会&#xff08;CNCF&#xff09;进行维护。 K8S&#xff…...

编程日记 2025/12/21 10:56:13

蓝桥杯日期的题型

做题思路 一般分为3个步骤,首先要定义一个结构体来存储月份的天数,第一循环日期,第二判断日期是否为闰年,第三就是题目求什么 结构体 static int[] ds{0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31}; 判断是否闰年的函数 public static void f(int m,int d){//被4整…...

编程日记 2025/12/5 14:38:54

【计算机网络】3数据链路层①

这篇笔记专门讲数据链路层的功能。 2.功能 数据链路层的主要任务是让帧在一段链路上或一个网络中传输。 2.1.封装成帧（组帧） 解决的问题：①帧定界②帧同步③透明传输 实现组帧的方法通常有以下种。 2.1.1.字符计数法 原理：在每个帧开头，用一个定长计数字段来记录该…...

编程日记 2025/12/20 23:10:38

Mysql--基础知识点--93--两阶段提交

1 两阶段提交 以update语句的具体执行过程为例&#xff1a; 具体更新一条记录 UPDATE t_user SET name ‘xiaolin’ WHERE id 1;的流程如下&#xff1a; 1.执行器负责具体执行&#xff0c;会调用存储引擎的接口&#xff0c;通过主键索引树搜索获取 id 1 这一行记录&#…...

编程日记 2025/12/1 4:20:22

Nginx底层架构（非常清晰）

目录 前言&#xff1a; 场景带入&#xff1a; HTTP服务器是什么&#xff1f; 反向代理是什么&#xff1f; 模块化网关能力&#xff1a; 1.配置能力&#xff1a; 2.单线程&#xff1a; 3.多worker进程 4.共享内存&#xff1a; 5.proxy cache 6.master进程 最后&…...

编程日记 2025/12/26 11:20:18

期货数据API对接实战指南

一、期货数据接口概述 StockTV提供全球主要期货市场的实时行情与历史数据接口&#xff0c;覆盖以下品种&#xff1a; 商品期货&#xff1a;原油、黄金、白银、铜、天然气、农产品等金融期货&#xff1a;股指期货、国债期货特色品种&#xff1a;马棕油、铁矿石等区域特色期货 …...

编程日记 2026/1/13 18:09:26

网页图像优化：现代格式与响应式技巧

网页图像优化&#xff1a;现代格式与响应式技巧 网页图像如果处理不好&#xff0c;很容易拖慢加载速度&#xff0c;影响用户体验。这篇文章聊聊怎么用现代图像格式和响应式技巧&#xff0c;让你的网站图片加载更快、效果更好。 推荐的图像格式 选对图像格式&#xff0c;能在保…...

编程日记 2025/12/4 17:36:38

Docker 设置镜像源后仍无法拉取镜像问题排查

#记录工作 Windows系统 在使用 Docker 的过程中&#xff0c;许多用户会碰到设置了国内镜像源后&#xff0c;依旧无法拉取镜像的情况。接下来&#xff0c;记录了操作要点以及问题排查方法&#xff0c;帮助我们顺利解决这类问题。 Microsoft Windows [Version 10.0.27823.1000…...

编程日记 2025/12/24 5:43:15

设计模式实践：模板方法、观察者与策略模式详解

目录 1 模板方法1.1 模板方法基本概念1.2 实验1.2.1 未使用模板方法实现代码1.2.2 使用模板方法的代码 2 观察者模式2.1 观察者模式基本概念2.2 实验 3 策略模式3.1 策略模式基本概念3.2 实验 1 模板方法 1.1 模板方法基本概念 定义&#xff1a;一个操作中的算法的骨架 &…...

编程日记 2025/12/2 0:24:38

Rockchip 显示架构

对于 Rockchip 平台，主要有以下几种显示架构可供选择： Qt + WaylandQt + EGLFSEGL program + X11WaylandNone多窗口的功能需求，选择： X11Wayland桌面的功能需求，选择： X114K 视频播放 + 全屏：Qt + WaylandQt + EGLFSX11Wayland4K 视频播放 + 多窗口： X11Qt + WaylandWa…...

编程日记 2026/1/8 23:26:35

Edge 浏览器推出 Copilot Vision：免费实时解析屏幕内容；Aqua Voice：极速 AI 语音输入工具丨日报

开发者朋友们大家好 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的 技术 」、「有亮点的 产品 」、「有思考的 文章 」、「有态度的 观点 」、「有看…...

编程日记 2026/1/11 3:44:36

async-profiler火焰图找出耗CPU方法

事情起于开发应用对依赖的三方包&#xff08;apache等等&#xff09;进行了升级后&#xff08;主要是升级spring&#xff09;&#xff0c;CPU的使用率较原来大幅提升&#xff0c;几个应用提升50%-100%。 查找半天&#xff0c;对比每次版本的cpu火焰图&#xff0c;看不出有什么…...

编程日记 2026/1/10 13:19:42

@Autowird 注解与存在多个相同类型对象的解方案

现有一个 Student 类&#xff0c;里面有两个属性&#xff0c;分别为 name 和 id&#xff1b;有一个 StuService 类&#xff0c;里面有两个方法&#xff0c;返回值均为类型为 Student 的对象&#xff1b;还有一个 StuController 类&#xff0c;里面有一个 Student 类型的属性&am…...

编程日记 2026/1/8 10:03:44

WordPiece 详解与示例

WordPiece详解 1. 定义与背景 WordPiece 是一种子词分词算法，由谷歌于2012年提出，最初用于语音搜索系统，后广泛应用于机器翻译和BERT等预训练模型。其核心思想是将单词拆分为更小的子词单元（如词根、前缀/后缀），从而解决传统分词方法面临的词汇表过大和未知词（OOV）处…...

编程日记 2026/1/15 5:25:20

PVE+CEPH+HA部署搭建测试

一、基本概念介绍 Proxmox VE ‌Proxmox Virtual Environment (Proxmox VE)‌ 是一款开源的虚拟化管理平台&#xff0c;基于 Debian Linux 开发&#xff0c;支持虚拟机和容器的混合部署。它提供基于 Web 的集中管理界面&#xff0c;简化了计算、存储和网络资源的配置与监控。P…...

编程日记 2026/1/13 8:42:46

【Leetcode 每日一题 - 补卡】1534. 统计好三元组

问题背景 给你一个整数数组 a r r arr arr&#xff0c;以及 a 、 b 、 c a、b 、c a、b、c 三个整数。请你统计其中好三元组的数量。 如果三元组 ( a r r [ i ] , a r r [ j ] , a r r [ k ] ) (arr[i], arr[j], arr[k]) (arr[i],arr[j],arr[k]) 满足下列全部条件&#xff…...

编程日记 2025/12/2 14:29:41

ROS ROS2 机器人深度相机激光雷达多传感器标定工具箱

系列文章目录 目录 系列文章目录 前言 三、标定目标 3.1 使用自定义标定目标 四、数据处理 4.1 相机数据中的标定目标检测 4.2 激光雷达数据中的标定目标检测 输入过滤器&#xff1a; 正常估算&#xff1a; 区域增长&#xff1a; 尺寸过滤器&#xff1a; RANSAC&a…...

编程日记 2025/12/27 7:38:54

android rtsp 拉流h264 h265，解码nv12转码nv21耗时卡顿问题及ffmpeg优化

一、 背景介绍及问题概述 项目需求需要在rk3568开发板上面&#xff0c;通过rtsp协议拉流的形式获取摄像头预览&#xff0c;然后进行人脸识别 姿态识别等后续其它操作。由于rtsp协议一般使用h.264 h265视频编码格式&#xff08;也叫 AVC 和 HEVC&#xff09;是不能直接用于后续处…...

编程日记 2026/1/12 0:51:57

熊海cms代码审计

目录 sql注入 1. admin/files/login.php 2. admin/files/columnlist.php 3. admin/files/editcolumn.php 4. admin/files/editlink.php 5. admin/files/editsoft.php 6. admin/files/editwz.php 7. admin/files/linklist.php 8. files/software.php 9. files…...

编程日记 2026/1/8 8:57:21

滑动窗口209. 长度最小的子数组

1.题目 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 1&#xff1a; 输入&…...

编程日记 2025/12/2 5:12:59

SQL（8）：INSERT INTO SELECT与SELECT INTO，选数据出来，放到另一个表中

INSERT INTO SELECT 语句从一个表复制数据&#xff0c;然后把数据插入到一个已存在的表中&#xff1b; SELECT INTO 语句从一个表复制数据&#xff0c;然后把数据插入到另一个新表中 想象一下你有两个本子&#xff08;数据库里的表&#xff09;&#xff1a; 本子A (源头)&…...

编程日记 2026/1/4 22:31:07

DeepSeek 与开源：肥沃土壤孕育 AI 硕果

当 DeepSeek 以低成本推理、多模态能力惊艳全球时&#xff0c;人们惊叹于国产AI技术的「爆发力」&#xff0c;却鲜少有人追问&#xff1a;这份爆发力的根基何在&#xff1f; 答案&#xff0c;藏在中国开源生态二十余年的积淀中。 从倪光南院士呼吁「以开源打破垄断」&#xf…...

编程日记 2026/1/8 19:43:32

2025高频面试算法总结篇【动态规划】

文章目录 直接刷题链接直达编辑距离最长回文子串完全平方数最长递增子序列正则表达式匹配零钱兑换鸡蛋掉落单词拆分 直接刷题链接直达 动态规划&#xff08;Dynamic Programming, DP&#xff09;是一种通过拆解子问题并利用子问题的最优解来构建整体问题的最优解的方法&#x…...

编程日记 2025/12/2 8:43:39

Maven中clean、compil等操作介绍和Pom.xml中各个标签介绍

文章目录 前言Maven常用命令1.clean2.vaildate3.compile4.test5.package6.verify7.install8.site9.deploy pom.xml标签详解格式<?xml version"1.0" encoding"UTF-8"?>(xml版本和编码)modelVersion&#xff08;xml版本&#xff09;groupId&#xff…...

编程日记 2026/1/8 6:28:58

力扣刷题-热题100题-第35题（c++、python）

146. LRU 缓存 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/lru-cache/?envTypestudy-plan-v2&envIdtop-100-liked 双向链表哈希表 内置函数 对于c有list可以充当双向链表&#xff0c;unordered_map充当哈希表&#xff1b;python有OrderedDic…...

编程日记 2026/1/1 4:35:49

Nautilus 正式发布：为 Sui 带来可验证的链下隐私计算

作为 Sui 安全工具包中的强大新成员&#xff0c;Nautilus 现已上线 Sui 测试网。它专为 Web3 开发者打造&#xff0c;支持保密且可验证的链下计算。Nautilus 应用运行于开发者自主管理的可信执行环境&#xff08;Trusted Execution Environment&#xff0c;TEE&#xff09;中&a…...

编程日记 2025/12/21 7:13:02

云服务器CVM标准型S5实例性能测评——2025腾讯云

腾讯云服务器CVM标准型S5实例具有稳定的计算性能&#xff0c;CPU采用采用 Intel Xeon Cascade Lake 或者 Intel Xeon Cooper Lake 处理器&#xff0c;主频2.5GHz&#xff0c;睿频3.1GHz&#xff0c;CPU内存配置2核2G、2核4G、4核8G、8核16G等配置&#xff0c;公网带宽可选1M、3…...

编程日记 2026/1/8 18:13:52