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

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

news 2025/9/26 13:24:44

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接着输入打开配置文件，已经配置好主机点击远程资源管理器可以找到右键链接输入密码 …...

编程日记 2025/2/20 9:37:58

【deepseek-r1模型】linux部署deepseek

1、快速安装 Ollama 下载：Download Ollama on macOS Ollama 官方主页：https://ollama.com Ollama 官方 GitHub 源代码仓库：https://github.com/ollama/ollama/ 官网提供了一条命令行快速安装的方法。 （1）下载Olla…...

编程日记 2025/2/20 9:35:56

【Github每日推荐】-- 2024 年项目汇总

1、AI 技术项目简述OmniParser一款基于纯视觉的 GUI 智能体，能够准确识别界面上可交互图标以及理解截图中各元素语义，实现自动化界面交互场景，如自动化测试、自动化操作等。ChatTTS一款专门为对话场景设计的语音生成模型，主要用…...

编程日记 2025/2/20 9:34:54

C++中的.*运算符

看运算符重载的时候，看到这一句 .* :: sizeof ?: . 注意以上5个运算符不能重载。 :: sizeof ?: . 这四个好理解，毕竟都学过，但.*是什么？ 于是自己整理了一下 .* 是一种 C 中的运算符，称为指针到成…...

编程日记 2025/2/20 9:30:50

深度学习笔记——LSTM

大家好，这里是好评笔记，公主号：Goodnote，专栏文章私信限时Free。本文详细介绍面试过程中可能遇到的LSTM知识点。文章目录 LSTM（Long Short-Term Memory）LSTM 的核心部件LSTM 的公式和工作原理(1) 遗忘门&a…...

编程日记 2025/2/20 9:28:47

spring boot知识点2

1.spring boot 要开启一些特性，可通过什么方式开启 a.通过Enable注解，可启动定时服务 b.通过application.properties可设置端口号等地址信息 2.什么是热部署，以及spring boot通过什么方式进行热部署热部署这个概念，我知道。就…...

编程日记 2025/2/20 9:27:45

【机器学习】CNN与Transformer的表面区别与本质区别

仅供参考表面区别 1. 结构和原理： CNN：主要通过卷积层来提取特征，这些层通过滑动窗口（卷积核）捕捉局部特征，并通过池化层（如最大池化）来降低特征的空间维度。CNN非常适合处理具有网格状拓扑结构的数据，如图像。Transformer：基于自注意力（Self-Attention）机制，能…...

编程日记 2025/2/20 9:26:44

框架篇 - Hearth ArcGIS 框架扩展（DryIoC、Options、Nlog...）

框架篇 - Hearth ArcGISPro Addin 框架扩展（DryIoC、Options、Nlog…）文章目录框架篇 - Hearth ArcGISPro Addin 框架扩展（DryIoC、Options、Nlog...）1 使用IoC、DI1.1 服务注册1.1.1 `ServiceAttribute`服务特性1.2 依赖注入1.2.1 SDK底层创建实例类型依赖注入1.2.2 `In…...

编程日记 2025/2/20 9:20:37

JUC并发—7.AQS源码分析三

大纲 1.等待多线程完成的CountDownLatch介绍 2.CountDownLatch.await()方法源码 3.CountDownLatch.coutDown()方法源码 4.CountDownLatch总结 5.控制并发线程数的Semaphore介绍 6.Semaphore的令牌获取过程 7.Semaphore的令牌释放过程 8.同步屏障CyclicBarrier介绍 9.C…...

编程日记 2025/2/20 9:18:35

windows系统本地部署DeepSeek-R1全流程指南：Ollama+Docker+OpenWebUI

本文将手把手教您使用OllamaDockerOpenWebUI三件套在本地部署DeepSeek-R1大语言模型，实现私有化AI服务搭建。一、环境准备 1.1 硬件要求 CPU：推荐Intel i7及以上（需支持AVX2指令集） 内存：最低16GB，推荐…...

编程日记 2025/2/20 9:15:32

当C#邂逅Deepseek, 或.net界面集成deepseek

最近，我开发了一个C#界面，并集成了Deepseek的接口功能，实现了本地化部署和流模式读取。过程充满了挑战和乐趣，也让我深刻体会到Deepseek的强大之处。今天，我想和大家分享这段经历，希望能激发你对Deepseek的…...

编程日记 2025/2/20 9:13:29

Cursor实战：Web版背单词应用开发演示

Cursor实战：Web版背单词应用开发演示需求分析自行编写需求文档借助Cursor生成需求文档前端UI设计后端开发项目结构环境参数数据库设计安装Python依赖运行应用前端代码修改测试前端界面测试数据生成功能测试Bug修复总结在上一篇《Cursor AI编程助手不完全指南》…...

编程日记 2025/2/20 9:11:26

Kotlin Lambda

Kotlin Lambda 在探索Kotlin Lambda之前，我们先回顾下Java中的Lambda表达式，Java 的 Lambda 表达式是 Java 8 引入的一项强大的功能，它使得函数式编程风格的代码更加简洁和易于理解。Lambda 表达式允许你以一种更简洁的方式表示实现接口&…...

编程日记 2025/2/20 9:10:25

V4L2驱动之UVC

以下是关于V4L2摄像头驱动框架与UVC协议的关联分析，从内核驱动到用户空间的完整视角： 1. V4L2驱动框架核心架构关键组件： 核心层 (V4L2 Core) v4l2_device：设备的总入口，管理所有子组件video_device：对应…...

编程日记 2025/2/20 9:08:22

numpy(01 入门)

前面内容：pandas(01 入门) 目录一、numpy 简介 1.1 Numpy 应用场景 1.2 Numpy 优点 1.3 Numpy 缺点 1.4 相关链接二、Numpy环境安装配置 2.1 Python自带包 2.2 Numpy 安装三、NumPy.Ndarray 3.1 ndarray特点： 3.2 ndarray()参数&…...

编程日记 2025/2/20 9:07:21

Chatgpt论文润色指令整理

1. 内容润色这个来自文章《three ways ChatGPT helps me in my academic writing》。在输入你要润色的内容前，先输入以下内容来驯化chatgpt的身份： I’m writing a paper on [话题] for a leading [学科/杂志] academic journal. What I tried to s…...

编程日记 2025/2/20 9:06:19

vscode复制到下一行

linux中默认快捷键是ctrl shift alt down/up 但是在vscode中无法使用，应该是被其他的东西绑定了，经测试，可以使用windows下的快捷键shift alt down/up { “key”: “shiftaltdown”, “command”: “editor.action.copyLinesDownAction”…...

编程日记 2025/2/20 9:04:17

Python天梯赛刷题-五分题（上）

蓝桥杯题刷的好累，感觉零帧起手、以题带学真的会很吃力，打算重新刷一点天梯的题目巩固一下，我本人在算法非常不精通的情况下，自认为天梯的L1的题是会相对容易一些的，可能有一些没有脑子光靠力气的“硬推”hhhh。从头…...

编程日记 2025/2/20 9:03:15

【优先级队列】任务分配

任务分配问题，有n个任务，每个任务有个达到时间。将这些任务分配给m个处理器，进行处理。每个处理器的处理时间不一样。处理器的任务列表有最大任务数限制。分配任务的策略是：当前待分配的任务的处理时刻最小。如果处理时刻相同&am…...

编程日记 2025/2/20 9:02:14

设计模式之适配模式是什么？以及在Spring AOP中的拦截器链的使用源码解析。

前言本文涉及到适配模式的基本用法，以及在Spring AOP中如何使用，首先需要了解适配模式的工作原理，然后结合Spring AOP的具体实现来详细详细解析源码。首先，适配模式，也就是Adapter Pattern，属于结构型设计…...

编程日记 2025/2/20 8:58:09

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

工程地质软件市场：发展现状、趋势与策略建议

一、引言在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/9/9 8:26:07

如何为服务器生成TLS证书

TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/9/11 5:41:27

Linux云原生安全：零信任架构与机密计算

Linux云原生安全：零信任架构与机密计算构建坚不可摧的云原生防御体系引言：云原生安全的范式革命随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析：CodeRider、GitHub Copilot及其他随着人工智能技术的快速发展，AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者，分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/7/6 18:33:10

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN）曾被视为…...

编程新知 2025/9/26 11:41:58

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...

编程新知 2025/9/22 17:44:20

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载四、智能指针…...

编程新知 2025/9/23 0:15:48

vscode链接服务器

编写html

编写css

编写JS

相关文章：