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

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

news 2026/2/10 19:02:25
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接着输入 打开配置文件&#xff0c;已经配置好主机 点击远程资源管理器可以找到 右键链接 输入密码 …...

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

【deepseek-r1模型】linux部署deepseek

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

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

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

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

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

C++中的.*运算符

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

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

深度学习笔记——LSTM

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

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

spring boot知识点2

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

编程日记 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大语言模型&#xff0c;实现私有化AI服务搭建。 一、环境准备 1.1 硬件要求 CPU&#xff1a;推荐Intel i7及以上&#xff08;需支持AVX2指令集&#xff09; 内存&#xff1a;最低16GB&#xff0c;推荐…...

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

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

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

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

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

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

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

Kotlin Lambda

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

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

V4L2驱动之UVC

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

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

numpy(01 入门)

前面内容&#xff1a;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特点&#xff1a; 3.2 ndarray()参数&…...

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

Chatgpt论文润色指令整理

1. 内容润色 这个来自文章《three ways ChatGPT helps me in my academic writing》。 在输入你要润色的内容前&#xff0c;先输入以下内容来驯化chatgpt的身份&#xff1a; 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中无法使用&#xff0c;应该是被其他的东西绑定了&#xff0c;经测试&#xff0c;可以使用windows下的快捷键shift alt down/up { “key”: “shiftaltdown”, “command”: “editor.action.copyLinesDownAction”…...

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

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

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

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

【优先级队列】任务分配

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

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

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

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

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

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/2/7 5:16:28

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2026/2/8 20:41:56

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/29 21:20:51

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2026/1/31 17:02:38

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2026/1/17 14:57:41