11.编写前端内容|vscode链接Linux|html|css|js(C++)
vscode链接服务器
安装VScode插件
- Chinese (Simplified) (简体中⽂) Language Pack for Visual Studio Code
- Open in Browser
- Remote SSH
在命令行输入
remote-ssh
接着输入
打开配置文件,已经配置好主机
点击远程资源管理器可以找到
右键链接
输入密码
左下角显示链接
打开文件夹
选择wwwroot,输入密码
成功打开文件
也可以通过终端控制
编写html
html: 是⽹⻚的⻣骼 -- 负责⽹⻚结构
css:⽹⻚的⽪⾁ -- 负责⽹⻚美观的
js(javascript):⽹⻚的灵魂---负责动态效果,和前后端交互教程: https://www.w3school.com.cn/
直接在vscode上编写
<!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>
<!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>
<!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>
编写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>
编写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>
相关文章:
11.编写前端内容|vscode链接Linux|html|css|js(C++)
vscode链接服务器 安装VScode插件 Chinese (Simplified) (简体中⽂) Language Pack for Visual Studio CodeOpen in BrowserRemote SSH 在命令行输入 remote-ssh接着输入 打开配置文件,已经配置好主机 点击远程资源管理器可以找到 右键链接 输入密码 …...
GITHUB的若干操作
GITHUB的若干操作 github又名代码仓库,是git的远程和线上延申,Git是一个分布式版本控制系统,用于跟踪文件的更改和协助多人合作开发。它由Linus Torvalds为更好地管理Linux内核开发而设计。git最原始是为Linux系统设计而生,不过后…...
网页制作04-html,css,javascript初认识のhtml如何使用列表
Html列表共有三种类型: 1.一种是无序列表,项目符号有几个符号组成; 2.一种是有序列表,项目符号由字母或数字进行排序; 3.一种是定义列表,它用作产生条件和描述的双重列表,可以对列表进行灵活定义 一、有序列表 1.有序列表ol 1)一般格式: <ol>…...
Linux:进程间通信(一.初识进程间通信、匿名管道与命名管道、共享内存)
目录 1.认识进程间通信 2.管道 2.1匿名管道 2.2pipe()函数 —创建匿名管道 2.3匿名管道的四种情况 2.4管道的特征 3.基于管道的进程池设计 4.命名管道 4.1引入与性质 4.2命令行创建 4.3程序中创建命名管道 写个小项目 项目规划 PipeClient.cpp PipeServe.cpp 5.…...
深度解析:使用 Headless 模式 ChromeDriver 进行无界面浏览器操作
一、问题背景(传统爬虫的痛点) 数据采集是现代网络爬虫技术的核心任务之一。然而,传统爬虫面临多重挑战,主要包括: 反爬机制:许多网站通过检测请求头、IP地址、Cookie等信息识别爬虫,进而限制…...
Spring Boot中使用Flyway进行数据库迁移
文章目录 概要Spring Boot 集成 FlywayFlyway 其他用法bug错误Flyway版本不兼容数据库存在表了Flyway 的校验和(Checksum)不匹配 概要 在 Spring Boot 项目开发中,数据库的变更不可避免。手动执行 SQL 脚本不仅容易出错,也难以维…...
Conda 常用命令全解析
在 Windows 系统中,Conda 是一款功能强大的包管理和环境管理工具,尤其对于数据分析、科学计算等场景有着重要的作用。本文将详细介绍 Conda 在 Windows 系统中的常用命令,帮助你高效地管理虚拟环境和软件包。 一、环境管理命令 1.1 查看 Co…...
【Vue教程】使用Vite快速搭建前端工程化项目 Vue3 Vite Node.js
??大家好!我是毛毛张! ??个人首页: ??今天毛毛张分享的是关于如何快速??♂搭建一个前端工程化的项目的环境搭建以及流程?? 文章目录 1.前端工程化环境搭建?? 1.1 什么是前端工程化1.2 nodejs的简介和安装 1.2.1 什么是Nodejs1.2.2 如何安装…...
基于51单片机的定时器实现LED闪烁控制(CT107D)
引言 在嵌入式开发中,定时器是一个非常重要的外设,它可以用于实现精确的时间控制。本文将介绍如何在CT107D单片机综合训练平台上,利用51单片机的定时器T0实现LED灯的定时闪烁控制。具体功能如下: L1指示灯:每隔1秒闪烁…...
一键部署开源DeepSeek并集成到钉钉
一键部署开源DeepSeek并集成到钉钉 简介: DeepSeek发布了两款先进AI模型V3和R1,分别适用于对话AI、内容生成及推理任务。由于官方API流量限制,阿里云推出了私有化部署方案,无需编写代码即可完成部署,并通过计算巢AppF…...
Web后端 Tomcat服务器
一 Tomcat Web 服务器 介绍: Tomcat是一个开源的Java Servlet容器和Web服务器,由Apache软件基金会开发。它实现了Java Servlet和JavaServer Pages (JSP) 技术,用于运行Java Web应用程序。Tomcat轻量、易于配置,常作为开发和部署…...
java多线程及线程池
线程 一、什么是多线程?二、线程的生命周期三、简单地创建一个线程1、实现Runnable接口2、继承Thread类3、使用Callable和FutureTask4、三种实现方式的对比 四、线程同步和锁1、为什么需要线程同步?2、线程同步的实现方式3、synchronized和ReentrantLock…...
Unreal5从入门到精通之如何在 C++ 中创建 UserWidget
文章目录 前言UUserWidget 子类示例创建我们的 C++ 类的新蓝图子类更改现有蓝图的父类现在我们有了 C++ 基类,下一步做什么?蓝图还是 C++?结论前言 在之前的教程中,我展示了如何在编辑器中创建 UserWidget 蓝图, 在本教程中,我们将创建一个新的基于 C++ 的子类UUserWid…...
Elasticsearch:探索 CLIP 替代方案
作者:来自 Elastic Jeffrey Rengifo 及 Toms Mura 分析图像到图像和文本到图像搜索的 CLIP 模型的替代方案。 在本文中,我们将通过一个模拟房地产网站的实际示例介绍 CLIP 多模态模型,探索替代方案,并分析它们的优缺点,…...
天翼云910B部署DeepSeek蒸馏70B LLaMA模型实践总结
一、项目背景与目标 本文记录在天翼云昇腾910B服务器上部署DeepSeek 70B模型的全过程。该模型是基于LLaMA架构的知识蒸馏版本,模型大小约132GB。 1.1 硬件环境 - 服务器配置:天翼云910B服务器 - NPU:8昇腾910B (每卡64GB显存) - 系统内存&…...
Mac 清理缓存,提高内存空间
步骤 1.打开【访达】 2.菜单栏第五个功能【前往】,点击【个人】 3.【command shift J】显示所有文件,打开【资源库】 4.删除【Containers】和【Caches】文件 Containers 文件夹:用于存储每个应用程序的沙盒数据,确保应用程序…...
bash+crontab充当半个守护进程的歪招
两个cpolar下的不同程序,都需要定时监测,以免程序没有再运行。有点类似半个守护进程吧。但是守护进程不会写,咋搞?就用这个办法临时当下守门员。这里主要为了备忘xpgrep -各类参数的用法。 #!/bin/bashif pgrep -fl "check_…...
Android JNI的理解与使用。
写在前面:Java相对于C/C来说是更高级的语言,隐藏了指针,可读性更高,更容易学习,但是无法直接操作硬件、运行速度较慢也是不可回避的硬伤。JNI就是Java官方定义的一套标准“接口”,用于Java和C/C之间互相调用…...
解决DeepSeek服务器繁忙的有效方法
全球42%的企业遭遇过AI工具服务器过载导致内容生产中断(数据来源:Gartner 2025)。当竞品在凌晨3点自动发布「智能家居安装指南」时,你的团队可能正因DeepSeek服务器繁忙错失「净水器保养教程」的流量黄金期⏳。147SEO智能调度系统…...
PyInstaller全平台打包深度解析:资源打包与路径兼容终极方案
一、典型问题场景分析 案例现象:PyQt5开发的GUI程序本地运行正常,但打包后出现以下问题: 程序图标丢失CSS样式表失效图片资源无法加载配置文件读取失败 问题本质:PyInstaller默认不会打包非代码资源文件,且打包后程…...
FreeSwitch的mod_spandsp模块
FreeSWITCH 的 mod_spandsp 模块是一个基于 Spandsp 库 的核心模块,主要用于实现 传真(Fax)、DTMF 信号处理 以及 语音编解码转换 等功能。它通过集成 SpandSP 的数字信号处理能力,使 FreeSWITCH 能够与传统通信系统(如…...
【c++】【Linux】【进程】线程终止/崩溃 会导致进程终止/崩溃 吗?
【c】【Linux】【进程】线程终止/崩溃 会导致进程终止/崩溃 吗? 1.线程终止会导致进程终止吗? 在操作系统中,线程是进程的基本执行单元,一个进程可以包含一个或多个线程。 当一个子线程终止时,进程并不会因此自动终…...
Deepseek 怼CHATGPT实况
提示词: 用犀利的语言批评ChatGPT 深度思考(R1) 嗯,用户让我用犀利的语言批评ChatGPT。首先,我需要理解他们的动机。可能他们遇到了ChatGPT的某些问题,比如回答不准确或者缺乏深度,所以想表达不满。也有…...
内核数据结构用法(2)list
list 在 Linux 内核中,链表操作是通过一组宏和函数来实现的,这些操作通常用来管理和遍历链表。以下是一些常用的链表函数和宏的具体用法。 1. 定义链表节点 首先,你需要定义一个包含 struct list_head 的结构体: #include <…...
量化自学 - 金融理论与python - Net Present Value 净现值
净现值(Net Present Value,NPV)是金融理论中用于评估投资项目价值的指标。其核心思想是将未来现金流按一定贴现率折算为当前价值,并减去初始投资成本。若NPV为正,表明项目预期收益高于成本,具有投资价值&am…...
Java Web开发实战与项目——用户认证与授权模块开发
Web应用中,用户认证与授权是至关重要的功能,确保只有合法用户才能访问受保护的资源。Spring Security作为一个强大的安全框架,支持多种认证与授权方式。在本章节中,我们将深入探讨三种常见的用户认证与授权方案:基于To…...
蓝桥杯篇---IAP15F2K61S2中断
文章目录 前言简介中断源1.外部中断2.定时器中断3.串口中断4.ADC中断5.PCA中断6.SPI中断7.PWM中断 中断优先级中断相关寄存器1.IE2.IP3.TCON4.SCON 中断使用步骤1.配置中断源2.使能中断3.设置优先级4.编写中断服务程序5.清除中断标志 示例代码:外部中断使用示例代码…...
django连接mysql数据库
1.下载mysqlclient第三方库 2.在settings.py里连接数据库(提前建好) DATABASES {default: {ENGINE: django.db.backends.mysql,NAME: 学生信息,USER: root,PASSWORD: 999123457,HOST: localhost,POST: 3306,} } 3.在models.py里创建一个类࿰…...
Python爬虫TLS
TLS指纹校验原理和绕过 浏览器可以正常访问,但是用requests发送请求失败。 后端是如何监测得呢?为什么浏览器可以返回结果,而requests模块不行呢? https://cn.investing.com/equities/amazon-com-inc-historical-data 1.指纹校…...
Docker 部署 MySQL 8 详细图文教程
🚀 作者主页: 有来技术 🔥 开源项目: youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template 🌺 仓库主页: GitCode︱ Gitee ︱ Github 💖 欢迎点赞 👍 收藏 ⭐评论 …...
基于Python的Diango旅游数据分析推荐系统设计与实现+毕业论文(15000字)
基于Python的Diango旅游数据分析推荐系系统设计与实现毕业论文指导搭建视频,带爬虫 配套论文1w5字 可定制到某个省份,加40 基于用户的协同过滤算法 有后台管理 2w多数据集 可配套指导搭建视频,加20 旅游数据分析推荐系统采用了Python语…...
网络安全java练习平台 js网络安全
🍅 点击文末小卡片 ,免费获取网络安全全套资料,资料在手,涨薪更快 网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升…...
在做题中学习(90):螺旋矩阵II
解法:模拟 思路:创建相同大小的一个二维数组(矩阵),用变量标记原矩阵的行数和列数,每次遍历完一行或一列,相应行/列数--,进行对应位置的赋值即可。此题是正方形矩阵,因此…...
Educational Codeforces Round 174 (Rated for Div. 2)(ABCD)
A. Was there an Array? 翻译: 对于整数数组 ,我们将其相等特征定义为数组 ,其中,如果数组 a 的第 i 个元素等于其两个相邻元素,则 ;如果数组 a 的第 i 个元素不等于其至少一个相邻元素,则 …...
qemu启动aarch64 linux+ buildroot + 应用程序
1、Linux内核网址 https://www.kernel.org/ 2、安装依赖 sudo apt update sudo apt install -y build-essential qemu qemu-system gcc make bc flex bison libssl-dev libncurses5-dev libelf-dev 3、拉取kernel代码和编译kernel git clone --depth 1 https://git.ker…...
Sponge VS Spring:新兴力量与行业标准的碰撞
框架特性对比 特性SpongeSpring编程语言Go (Golang)Java设计范式低代码, 代码生成, 模块化IoC (控制反转), DI (依赖注入), AOP (面向切面编程)性能高性能, 执行速度快, 并发性好成熟的性能, 需要 JVM 调优, 启动时间可能较长成熟度与稳定性较新, 快速发展中非常成熟, 行业标准…...
推荐几款较好的开源成熟框架
一. 若依: 1. 官方网站:https://doc.ruoyi.vip/ruoyi/ 2. 若依SpringBootVueElement 的后台管理系统:https://gitee.com/y_project/RuoYi-Vue 3. 若依SpringBootVueElement 的后台管理系统:https://gitee.com/y_project/RuoYi-Cl…...
【分布式】Hadoop完全分布式的搭建(零基础)
Hadoop完全分布式的搭建 环境准备: (1)VMware Workstation Pro17(其他也可) (2)Centos7 (3)FinalShell (一)模型机配置 0****)安…...
JavaScript 异步编程:Promise 与 await 的关联与使用
在 JavaScript 中,异步编程是处理耗时操作(如网络请求、文件读写等)的核心机制。Promise 和 await 是两种常用的异步编程工具,它们密切相关,但又有各自的特点和适用场景。本文将深入探讨它们的关联、区别以及如何在实际…...
体验用ai做了个python小游戏
体验用ai做了个python小游戏 写在前面使用的工具2.增加功能1.要求增加视频作为背景。2.我让增加了一个欢迎页面。3.我发现中文显示有问题。4.我提出了背景修改意见,欢迎页面和结束页面背景是视频,游戏页面背景是静态图片。5.提出增加更多游戏元素。 总结…...
golang常用库之-swaggo/swag根据注释生成接口文档
文章目录 golang常用库之-swaggo/swag库根据注释生成接口文档什么是swaggo/swag golang常用库之-swaggo/swag库根据注释生成接口文档 什么是swaggo/swag github:https://github.com/swaggo/swag 参考文档:https://golang.halfiisland.com/community/pk…...
【可实战】Linux 常用统计命令:排序sort、去重uniq、统计wc
在 Linux 系统中,有一些常用的命令可以用来收集和统计数据。 一、常用统计命令的使用场景 日志分析和监控:通过使用 Linux 统计命令,可以实时监控和分析系统日志文件,了解系统的运行状况和性能指标。例如,使用 tail 命…...
【设计模式】【创建型模式】建造者模式(Builder)
👋hi,我不是一名外包公司的员工,也不会偷吃茶水间的零食,我的梦想是能写高端CRUD 🔥 2025本人正在沉淀中… 博客更新速度 👍 欢迎点赞、收藏、关注,跟上我的更新节奏 🎵 当你的天空突…...
UE5.3 C++ 通过Spline样条实现三维连线,自己UV贴图。
一.制作了基于USplineComponent的画线插件,就是我们常说的样条线。 直接看怎么用,关于插件实现细节,后续会更新,看思路就行。通过ID,管理每一条线。移除删掉上一帧的线条Mesh。第一个点,是本身直接放过去。第二个点是…...
每日学习Java之一万个为什么
9.Class <?> class1 Myclass.class 为什么要有通配符?传给谁用的? 首先,这里的class特指某个对象在JVM中的元数据集合。 有普通、接口、数组、基本类型、 void 类型、局部类、匿名类、枚举、注解 1.类型安全:通配符允许…...
4、IP查找工具-Angry IP Scanner
在前序文章中,提到了多种IP查找方法,可能回存在不同场景需要使用不同的查找命令,有些不容易记忆,本文将介绍一个比较优秀的IP查找工具,可以应用在连接树莓派或查找IP的其他场景中。供大家参考。 Angry IP Scanner下载…...
华为昇腾920b服务器部署DeepSeek翻车现场
最近到祸一台HUAWEI Kunpeng 920 5250,先看看配置。之前是部署的讯飞大模型,发现资源利用率太低了。把5台减少到3台,就出了他 硬件配置信息 基本硬件信息 按照惯例先来看看配置。一共3块盘,500G的系统盘, 2块3T固态…...
一周学会Flask3 Python Web开发-http响应状态码
锋哥原创的Flask3 Python Web开发 Flask3视频教程: 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 在Flask程序中,客户端发出的请求触发相应的视图函数,获取返回值会作为响应的主体,最后生成…...
Javascript网页设计实例:通过JS实现上传Markdown转化为脑图并下载脑图
功能预览 深度与密度测试 对于测试部分,分别对深度和密度进行了测试: 注意!!!!!!!只实现了识别Markdown中的#代表的层级,所以不能使用其余标识符࿰…...
【Spring生命周期】Bean元信息配置阶段
引言 本系列将详细讲解Spring生命周期的13个阶段,从源码角度帮助我们更好的理解Spring框架和bean生命周期全流程 Bean信息定义4种方式 API的方式Xml文件方式properties文件的方式注解的方式 在 Spring 框架中,Bean 元信息配置阶段是整个 Bean 生命周…...