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

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

news 2026/2/11 3:36:34
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

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2026/2/11 0:21:49

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/2/7 17:29:24

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2026/1/31 22:59:12

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2026/2/10 3:34:25

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2026/1/26 5:44:16

加密通信 + 行为分析：运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...

编程新知 2025/9/9 18:03:51

向量几何的二元性：叉乘模长与内积投影的深层联系

在数学与物理的空间世界中&#xff0c;向量运算构成了理解几何结构的基石。叉乘&#xff08;外积&#xff09;与点积&#xff08;内积&#xff09;作为向量代数的两大支柱&#xff0c;表面上呈现出截然不同的几何意义与代数形式&#xff0c;却在深层次上揭示了向量间相互作用的…...

编程新知 2026/2/2 7:32:54