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

11.编写前端内容|vscode链接Linux|html|css|js(C++)

article 2026/4/14 17:08:24

vscode链接服务器

安装VScode插件

Chinese (Simplified) (简体中⽂) Language Pack for Visual Studio Code
Open in Browser
Remote SSH

在命令行输入
![[Pasted image 20250218184331.png]]

remote-ssh

接着输入
![[Pasted image 20250218184354.png]]

打开配置文件，已经配置好主机
![[Pasted image 20250218184255.png]]

点击远程资源管理器可以找到
![[Pasted image 20250218184426.png]]

右键链接
![[Pasted image 20250218184522.png]]

输入密码
![[Pasted image 20250218184727.png]]

左下角显示链接
打开文件夹
![[Pasted image 20250218184821.png]]

选择wwwroot，输入密码
![[Pasted image 20250218185025.png]]

成功打开文件
![[Pasted image 20250218185120.png]]

也可以通过终端控制

编写html

html: 是⽹⻚的⻣骼 -- 负责⽹⻚结构  
css：⽹⻚的⽪⾁ -- 负责⽹⻚美观的  
js（javascript）：⽹⻚的灵魂---负责动态效果，和前后端交互教程： https://www.w3school.com.cn/

直接在vscode上编写
![[Pasted image 20250218190047.png]]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>boost 搜索引擎</title>
</head>
<body><h1>hello, 欢迎来到我的搜索引擎</h1>
</body>
</html>

![[Pasted image 20250218190035.png]]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>boost 搜索引擎</title>
</head>
<body><div class="container"><div class="search"><input type="text" value="输入搜索关键字"><button>搜索一下</button></div></div>
</body>
</html>

![[Pasted image 20250218191633.png]]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>boost 搜索引擎</title>
</head>
<body><div class="container"><div class="search"><input type="text" value="输入搜索关键字..."><button>搜索一下</button></div><div class="result"><div class="item"><a href="#">这是标题</a><p>这是摘要是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要</p><i>htps://www.boost.org/doc/libs/1_78_0/doc/html/boost_dll/dependencies.html</i></div><div class="item"><a href="#">这是标题</a><p>这是摘要是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要</p><i>htps://www.boost.org/doc/libs/1_78_0/doc/html/boost_dll/dependencies.html</i></div><div class="item"><a href="#">这是标题</a><p>这是摘要是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要</p><i>htps://www.boost.org/doc/libs/1_78_0/doc/html/boost_dll/dependencies.html</i></div><div class="item"><a href="#">这是标题</a><p>这是摘要是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要</p><i>htps://www.boost.org/doc/libs/1_78_0/doc/html/boost_dll/dependencies.html</i></div></div></div>
</body>
</html>

![[Pasted image 20250218192320.png]]

编写css

设置样式的本质：找到要设置的标签，设置它的属性  
1. 选择特定的标签：类选择器，标签选择器，复合选择器  
2. 设置指定标签的属性：⻅代码

将内外边距设为0

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>boost 搜索引擎</title><style>/* 去掉网页中的所有的默认内外边距 */* {/*设置外边距 */margin: 0;/*设置内边距*/padding: 0;  }/*将body的内容100%和html的呈现是吻合的*/html,body {height: 100%;}/*类选择器*/.container {/*设置div的宽度*/width: 800px;/* 通过设置外边距达到居中对齐的目的 */margin: 0px auto;/* 设置外边距的上边距，保持元素和网页的上部距离 */margin-top: 15px;}/* 复合选择器，选中container下的search */.container .search {/* 宽度与父标签保持一致 */width: 100%;/* 高度设置为52像素点 */height: 52px;}/* 先选中input标签，直接设置标签的属性，先要选中，input：标签选择器 *//* input在进行高度设置的时候，没有考虑边框的问题 */.container .search input {/* 设置left浮动 */float: left;width: 600px;height: 50px;/* 设置边框属性：边框的宽度，样式，颜色 */border: 1px solid black;/* 去掉input输入框的右边框 */border-right: none;/* 设置内边距，默认文字不要紧贴左侧边框 */padding-left: 10px;/* 设置input内部的字体的颜色和样式 */color: #ccc;font-size: 20px;}.container .search button {/* 设置left浮动 */float: left;width: 150px;height: 52px;/* 设置button的背景颜色100,148,288 */background-color: #4e6ef2;/* 设置button中的字体颜色 */color: #FFF;/* 设置字体的大小 */font-size: 20px;font-family: Georgia, 'Times New Roman', Times, serif;}.container .result {width: 100%;}.container .result .item {margin-top: 15px;}.container .result .item a{/* 设置a为块级元素，单独占一行 */display: block;/* a标签的下划线去掉 */text-decoration: none;/* 设置a标签中的文字的字体大小 */font-size: 22px;/* 设置a标签中文字的颜色 */color: #4e6ef2;}.container .result .item a:hover {text-decoration: underline;}.container .result .item p {margin-top: 5px;font-size: 18px;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}.container .result .item i {/* 设置a为块级元素，单独占一行 */display: block;/* 取消斜体风格 */font-style: normal;color: green;}</style>
</head>

![[Pasted image 20250218214234.png]]

编写JS

如果直接使⽤原⽣的js成本会⽐较⾼（xmlhttprequest），我们推荐使⽤JQuery.

<head><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head><script>function Search(){// 是浏览器的一个弹出框// alert("hello js!");// 1. 提取数据, $可以理解成就是JQuery的别称let query = $(".container .search input").val();conole.log("query = " + query); //console是浏览器的对话框，可以用来进行查看js数据//2. 发起http请求,ajax: 属于一个和后端进行数据交互的函数，JQuery中的$.ajax({type: "GET",url: "/s?word=" + query,success: function(data){console.log(data);BuildHtml(data);}});}function BuildHtml(data){// 获取html中的result标签let result_lable = $(".container .result");// 清空历史搜索结果result_lable.empty();for( let elem of data){// console.log(elem.title);// console.log(elem.url);let a_lable = $("<a>", {text: elem.title,href: elem.url,// 跳转到新的页面target: "_blank"});let p_lable = $("<p>", {text: elem.desc});let i_lable = $("<i>", {text: elem.url});let div_lable = $("<div>", {class: "item"});a_lable.appendTo(div_lable);p_lable.appendTo(div_lable);i_lable.appendTo(div_lable);div_lable.appendTo(result_lable);}}</script>

![[Pasted image 20250219000002.png]]

11.编写前端内容|vscode链接Linux|html|css|js(C++)

vscode链接服务器安装VScode插件 Chinese (Simplified) (简体中⽂) Language Pack for Visual Studio CodeOpen in BrowserRemote SSH 在命令行输入 remote-ssh接着输入打开配置文件，已经配置好主机点击远程资源管理器可以找到右键链接输入密码 …...

编程日记 2026/4/8 20:03:42

Unity3D 基于 GPU 动画和 Compute Shader 的大批量动画渲染详解

引言在现代游戏开发中，渲染大量动画角色是一个常见的需求，尤其是在大规模战斗场景、开放世界游戏或 VR/AR 应用中。传统的 CPU 动画计算和渲染方式在面对大批量角色时，往往会遇到性能瓶颈。为了优化性能，开发者可以利用 GPU 的强…...

编程日记 2025/6/18 16:13:27

网工项目实践2.6 广域网需求分析及方案制定

本专栏持续更新，整一个专栏为一个大型复杂网络工程项目。阅读本文章之前务必先看《本专栏必读》。全网拓扑展示一.广域网互联方式 1.专线优点稳定独享。绝对安全。可靠性高，带宽高，完全取决于终端接口。缺点: 费用高。建设时间长。难…...

编程日记 2026/4/13 12:23:50

大模型相关学习

知识科普为什么不直接使用网页版 DeepSeek? 我们的需求：绝对的隐私保护和个性化知识库构建。场景：若希望大模型能根据企业规章制度来回答问题，一般需上传企业规章制度的附件，但仍可能面临问题。数据隐私问题：联网使…...

编程日记 2026/4/6 7:24:37

vue2自定义useVModel函数

父组件： <template> <div>父组件数据名字：<input v-model"person.name">父组件数据年龄：<input v-model"person.age"><son v-model"person"></son> </div> </t…...

编程日记 2025/11/17 2:43:01

基于Java（JSP）+MySQL设计与实现的 MVC 鲜花订购系统

基于MVC的鲜花订购系统的设计与实现摘要摘要：鲜花订购系统与网络相结合，给用户提供更加周到和人性化的服务。网站模式为MVC模式，基于MySql数据库,采用Jsp，Session绘画跟踪、JavaScript等技术,实现了普通用户可以浏览、查看鲜…...

编程日记 2026/4/13 18:56:28

YOLOv11-ultralytics-8.3.67部分代码阅读笔记-dataset.py

dataset.py ultralytics\data\dataset.py 目录 dataset.py 1.所需的库和模块 2.class YOLODataset(BaseDataset): 3.class YOLOMultiModalDataset(YOLODataset): 4.class GroundingDataset(YOLODataset): 5.class YOLOConcatDataset(ConcatDataset): 6.class Sema…...

编程日记 2026/4/13 23:12:59

网络原理-

文章目录协议应用层传输层网络层数据链路层协议在网络通信中,协议是非常重要的概念.协议就是一种约定. 在网络通信过程中,对协议进行了分层接下来就按照顺序向大家介绍每一种核心的协议. 应用层应用层是咱们程序员打交道最多的一层协议.应用层里有很多现成的协议,但…...

编程日记 2026/4/14 8:39:55

解码 NLP：从萌芽到蓬勃的技术蜕变之旅

内容概况： 主要讲述NLP专栏的内容和NLP的发展及其在现代生活中的广泛应用。课程强调实践为主、理论为辅的学习方法，并通过多个生活场景展示了NLP技术的实际应用，如对话机器人、搜索引擎、翻译软件、电商推荐和智能客服等。这边我就不多做自我…...

编程日记 2026/4/7 21:05:02

Word中的文档信息域

Word中的文档信息域 DocProperty包含文档信息的多个属性, 也可以自定义属性. 查看文档预定义的自定义属性【文件】→【信息】→【属性】→【高级属性】参考链接 WORD中文档属性域DocProperty的应用-CSDN博客第06套 Word_哔哩哔哩_bilibili...

编程日记 2026/4/8 22:21:41

.NET周刊【2月第2期 2025-02-09】

国内文章开箱即用的.NET MAUI组件库 V-Control 发布了! https://www.cnblogs.com/jevonsflash/p/18701494 文章介绍了V-Control，一个适用于.NET MAUI的组件库。作者计划将其开源，强调.NET MAUI是生产力强的跨平台移动开发工具。V-Control提供多种组件…...

编程日记 2025/6/12 23:02:37

MySQL六大日志的功能介绍。

前言首先，MySQL的日志应该包括二进制日志（Binary Log）、错误日志（Error Log）、查询日志（General Query Log）、慢查询日志（Slow Query Log）、重做日志（Redo …...

编程日记 2025/11/6 9:44:03

java机器学习计算指标动态阈值

java机器学习计算指标动态阈值最近听到有的人说要做机器学习就一定要学Python，我想他们掌握的知道还不够系统全面。本文作者以动态阈值需求场景给大家介绍几种常用Java实现的机器学习库，包括使用开源库如Weka或Deeplearning4j（DL4J&#xf…...

编程日记 2026/4/6 3:06:17

Note25021902_TIA Portal V18 WinCC BCA Ed 需要.NET 3.5 SP1

TIA Portal V18 WinCC BCA Ed 需要.NET 3.5 SP1 在安装TIA Portal V18时，遇到TIA Portal V18 WinCC BCA Ed 需要.NET 3.5 SP1. 请在此PC上中启用.NET 3.5 SP1； 检索： 电脑上如何启用 .NET 3.5 SP1 参考资料1： https://baijiahao.…...

编程日记 2026/4/7 21:57:20

CHARMM-GUI EnzyDocker: 一个基于网络的用于酶中多个反应状态的蛋白质 - 配体对接的计算平台

❝ "CHARMM-GUI EnzyDocker for Protein−Ligand Docking of Multiple Reactive States along a Reaction Coordinate in Enzymes"介绍了 CHARMM-GUI EnzyDocker，这是一个基于网络的计算平台，旨在简化和加速 EnzyDock 对接模拟的设置过程&…...

编程日记 2026/4/6 2:56:09

阅读论文笔记《Translating Embeddings for Modeling Multi-relational Data》

目录一、模型核心原理剖析二、实验设计与数据集选择三、实验结果深度解读（一）链接预测实验（二）关系分类实验（三）链接预测示例（四）泛化实验四、模型优缺点总结（一&#…...

编程日记 2026/4/10 14:24:39

实在智能与宇树科技、云深科技一同获评浙江省“人工智能服务商”、 “数智优品”等荣誉

近日，浙江省经信厅正式公布《2024 年浙江省人工智能应用场景、应用标杆企业、人工智能服务商及 “数智优品” 名单》。实在智能获评浙江省“人工智能服务商”，核心产品 “实在 Agent 智能体” 入选 “数智优品”。一同获此殊荣的还有宇树科技、云深处科…...

编程日记 2026/4/14 17:06:22

跳表（Skip List）详解

一、什么是跳表？ 跳表是一种基于有序链表的高效数据结构，通过建立多级索引实现快速查询。它在平均情况下支持O(log n)时间复杂度的搜索、插入和删除操作，性能接近平衡树，但实现更为简单。二、核心原理 1. 层级结构底层为完整…...

编程日记 2026/4/8 6:44:57

图片粘贴上传实现

图片上传 html demo 直接粘贴本地运行查看效果即可，有看不懂的直接喂给 deepseek 会解释的很清晰 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"…...

编程日记 2026/2/18 21:48:00

【Linux常用命令-不断更新】

在 Linux 系统中，查看总剩余内存常用方法。方法 1：使用 free 命令 free 是一个常用的命令，用于显示系统的总内存、已用内存、空闲内存和交换内存。 free -h-h 参数表示以易读的格式（如 GB、MB）显示内存信息。输出示…...

编程日记 2026/2/17 3:51:58

轻松搭建本地大语言模型（一）Ollama安装与使用

Ollama 是一款开源的本地大语言模型运行框架，支持在 Windows、macOS 和 Linux 系统上运行，能够帮助用户轻松下载和使用各种大语言模型（例如deepseek、llama、qwen）。本文将详细介绍 Ollama 的安装步骤，帮助你快速搭建本…...

编程日记 2026/4/12 7:29:58

Conda 常用命令全解析

在 Windows 系统中，Conda 是一款功能强大的包管理和环境管理工具，尤其对于数据分析、科学计算等场景有着重要的作用。本文将详细介绍 Conda 在 Windows 系统中的常用命令，帮助你高效地管理虚拟环境和软件包。一、环境管理命令 1.1 查看 Co…...

编程日记 2026/4/12 17:56:21

【核心算法篇十五】《深度解析DeepSeek遗传算法：让超参数调优从“玄学”变“科学”的终极指南》

引言：超参数调优的“炼丹困局”与破局之路在机器学习的世界里，调参工程师常被戏称为"炼丹师"——面对动辄几十个超参数的复杂模型，我们就像古代术士守着炼丹炉，不断尝试各种参数组合，期待偶然炼出"仙丹"。传统网格搜索（Grid Search）需要遍历所有可…...

编程日记 2025/8/5 6:20:24

kafka消费能力压测：使用官方工具

背景在之前的业务场景中，我们发现Kafka的实际消费能力远低于预期。尽管我们使用了kafka-go组件并进行了相关测试，测试情况见《kafka-go:性能测试》这篇文章。但并未能准确找出消费能力低下的原因。我们曾怀疑这可能是由我的电脑网络带宽问题或Kafka部…...

编程日记 2026/4/6 23:48:20

[STM32 - 野火] - - - 固件库学习笔记 - - - 十六.在SRAM中调试代码

一、简介在RAM中调试代码是一种常见的嵌入式开发技术，尤其适用于STM32等微控制器。它的核心思想是将程序代码和数据加载到微控制器的内部RAM（SRAM）中运行，而不是运行在Flash存储器中。这种方法在开发过程中具有显著的优势&#…...

编程日记 2026/4/8 15:10:30

雷军推荐：WPS 与 Pastemate 联用，效率飞升新高度

在当今快节奏的工作与学习环境中，效率提升成为了每个人都在追求的目标。而雷军，这位科技界的领军人物，凭借其敏锐的洞察力，为我们推荐了一组强大的工具组合 ——WPS 与 Pastemate，它们携手合作，能够为我们的…...

编程日记 2026/4/12 13:34:38

css主题色修改后会多出一个css吗？css怎么定义变量？

在 CSS 中修改主题色时，通常不会直接生成一个新的 CSS 文件，而是通过 CSS 变量（Custom Properties） 或预处理器变量（如 Sass、Less） 来动态修改样式。以下是详细说明： 1. CSS 变量（…...

编程日记 2025/8/9 3:04:21

ubuntu22.4搭建单节点es8.1

下载对应的包 elasticsearch-8.1.1-linux-x86_64.tar.gz 创建es租户 groupadd elasticsearc useradd elasticsearch -g elasticsearch -p elasticsearch chmod uw /etc/sudoers chmod -R elasticsearch:elasticsearch elasticsearch 修改配置文件 vim /etc/sysctl.conf vm…...

编程日记 2025/12/28 6:40:25

轴承故障特征—SHAP 模型 3D 可视化

往期精彩内容： Python-凯斯西储大学（CWRU）轴承数据解读与分类处理基于FFT CNN - BiGRU-Attention 时域、频域特征注意力融合的轴承故障识别模型-CSDN博客基于FFT CNN - Transformer 时域、频域特征融合的轴承故障识别模型-CSDN博客 P…...

编程日记 2026/4/11 19:33:34

斐波那契数列模型：在动态规划的丝绸之路上追寻斐波那契的足迹（上）

文章目录引言递归与动态规划的对比递归解法的初探动态规划的优雅与高效自顶向下的记忆化搜索自底向上的迭代法性能分析与比较小结引言斐波那契数列，这一数列如同一条无形的丝线，穿越千年时光，悄然延续其魅力。其定义简单而优美&#xff…...

编程日记 2026/4/14 6:00:18

vscode链接服务器

编写html

编写css

编写JS

相关文章：