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

自己开发一个接口文档页面html

news 2026/3/27 9:57:33

 演示效果

 

具体代码如下 

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>框架框架文档页面</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f2f2f2;}.container {display: flex;}.menu {width: 20%;background-color: #f2f2f2;padding: 20px;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);}.menu ul {list-style: none;padding: 0;margin: 0;}.menu li {margin-bottom: 10px;}.menu li a {display: block;text-decoration: none;color: #333;}.menu .submenu {padding-left: 20px;}.content {width: 80%;padding: 20px;margin: 20px;background-color: #fff;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);}.search {margin-bottom: 20px;}</style>
</head>
<body>
<div class="container"><div class="menu"><h3>菜单</h3><div class="search"><input type="text" id="searchInput" placeholder="搜索..."><button onclick="searchMenu()">搜索</button></div><ul id="menuList"><li><a href="#introduction">介绍</a></li><li><a href="#getting-started">入门</a></li><li><a href="#">数据库</a><ul class="submenu"><li><a href="#">介绍</a><ul class="submenu"><li><a href="#database-intro">概述</a></li><li><a href="#database-usage">用法</a></li></ul></li><li><a href="#database-setup">设置</a></li></ul></li><li><a href="#">路由</a><ul class="submenu"><li><a href="#routing-intro">介绍</a></li><li><a href="#routing-configuration">配置</a></li></ul></li><li><a href="#controllers">控制器</a></li><li><a href="#views">视图</a></li></ul></div><div class="content"><h2 id="introduction">介绍</h2><p>这是框架框架的文档页面。</p><h2 id="getting-started">入门</h2><p>要开始使用框架，您需要按照以下步骤进行操作：</p><ol><li>安装框架框架</li><li>创建一个新项目</li><li>配置数据库连接</li><li>开始编码！</li></ol><h2 id="database-intro">数据库介绍</h2><p>框架提供了一个强大的数据库抽象层，可以轻松地与数据库进行交互。</p><h2 id="database-usage">数据库用法</h2><p>要在框架中使用数据库，您需要掌握数据库的基本用法。</p><h2 id="database-setup">数据库设置</h2><p>要在框架中设置数据库，您需要在配置文件中配置数据库连接。</p><h2 id="routing-intro">路由介绍</h2><p>框架中的路由功能允许您定义URL如何映射到控制器和操作。</p><h2 id="routing-configuration">路由配置</h2><p>您可以在路由配置文件中配置路由规则。</p><h2 id="controllers">控制器</h2><p>框架中的控制器负责处理请求并返回响应。</p><h2 id="views">视图</h2><p>框架中的视图用于渲染HTML模板并向用户显示数据。</p></div>
</div>
<script>function searchMenu() {var input = document.getElementById("searchInput").value.toLowerCase();var menuItems = document.getElementById("menuList").getElementsByTagName("a");for (var i = 0; i < menuItems.length; i++) {var menuItem = menuItems[i];var menuItemText = menuItem.textContent.toLowerCase();if (menuItemText.includes(input)) {menuItem.style.display = "block";menuItem.parentNode.parentNode.style.display = "block"; // 显示父级子菜单menuItem.parentNode.parentNode.parentNode.style.display = "block"; // 显示父级父级菜单} else {menuItem.style.display = "none";}}}
</script>
</body>
</html>

相关文章：

自己开发一个接口文档页面html

演示效果 具体代码如下 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>框架框架文档页面</…...

编程日记 2023/9/12 14:22:38

信息化发展28

区块链概述 区块链技术具有多中心化存储、隐私保护、防篡改等特点&#xff0c; 提供了开放、分散和容错的事务机制&#xff0c; 成为新一代匿名在线支付、汇款和数字资产交易的核心&#xff0c; 被广泛应用于各大交易平台&#xff0c; 为金融、监管机构、科技创新、农业以及政…...

编程日记 2023/9/12 14:21:36

React 入门实例教程

目录 一、HTML 模板 二、ReactDOM.render() 三、JSX 语法 四、组件 五、this.props.children 六、PropTypes 七、获取真实的DOM节点 八、this.state 九、表单 十、组件的生命周期 constructor() componentWillMount() render() componentDidMount() 组件生命周期…...

编程日记 2023/9/12 14:20:35

Window安装Node.js npm appium Appium Desktop

Window安装Node.js npm appium appium Desktop 1.安装nodejs 参考链接&#xff1a; https://blog.csdn.net/weixin_42064877/article/details/131610918 1)打开浏览器&#xff0c;并前往 Node.js 官网 https://nodejs.org/ ↗。 2)在首页中&#xff0c;您可以看到当前 Node.…...

编程日记 2023/9/12 14:19:34

Pytorch intermediate(三) RNN分类

使用RNN对MNIST手写数字进行分类。RNN和LSTM模型结构 pytorch中的LSTM的使用让人有点头晕&#xff0c;这里讲述的是LSTM的模型参数的意义。 1、加载数据集 import torch import torchvision import torch.nn as nn import torchvision.transforms as transforms import torc…...

编程日记 2023/9/12 14:18:33

vue2+webpack升级vue3+vite，修改插件兼容性bug

同学们可以私信我加入学习群&#xff01; 前言 在前面使用electronvue3的过程中&#xff0c;已经验证了历史vue2代码vue3混合开发的模式。 本次旧项目vue框架整体升级中&#xff0c;同事已经完成了vue3、pinia、router等基础框架工具的升级。所以我此次记录的主要是vite打包工…...

编程日记 2023/9/12 14:17:32

案例实战-Spring boot Web

准备工作 需求&环境搭建 需求&#xff1a; 部门管理&#xff1a; 查询部门列表 删除部门 新增部门 修改部门 员工管理 查询员工列表&#xff08;分页、条件&#xff09; 删除员工 新增员工 修改员工 环境搭建 准备数据库表&#xff08;dept、emp&#xff09; -- 部门管理…...

编程日记 2023/9/12 14:16:31

Spring6.1之RestClient分析

文章目录 1 RestClient1.1 介绍1.2 准备项目1.2.1 pom.xml1.2.2 创建全局 RestClient1.2.3 Get接收数据 retrieve1.2.4 结果转换 Bean1.2.5 Post发布数据1.2.6 Delete删除数据1.2.7 处理错误1.2.8 Exchange 方法 1 RestClient 1.1 介绍 Spring 框架一直提供了两种不同的客户端…...

编程日记 2023/9/12 14:15:29

冒泡排序、选择排序、插入排序、希尔排序

冒泡排序 基本思想 代码实现 # 冒泡排序 def bubble_sort(arr):length len(arr) - 1for i in range(length):flag Truefor j in range(length - i):if arr[j] > arr[j 1]:temp arr[j]arr[j] arr[j 1]arr[j 1] tempflag Falseprint(f第{i 1}趟的排序结果为&#…...

编程日记 2023/9/12 14:14:27

OpenCV（二十三）：中值滤波

1.中值滤波的原理 中值滤波&#xff08;Median Filter&#xff09;是一种常用的非线性图像滤波方法&#xff0c;用于去除图像中的椒盐噪声等离群点。它的原理是基于邻域像素值的排序&#xff0c;并将中间值作为当前像素的新值。 2.中值滤波函数 medianBlur() void cv::medianBl…...

编程日记 2023/9/12 14:13:27

Prompt Tuning训练过程

目录 0. 入门 0.1. NLP发展的四个阶段&#xff1a; Prompt工程如此强大&#xff0c;我们还需要模型训练吗&#xff1f; - 知乎 Prompt learning系列之prompt engineering(二) 离散型prompt自动构建 Prompt learning系列之训练策略篇 - 知乎 ptuning v2 的 chatglm垂直领域训练记…...

编程日记 2023/9/12 14:12:25

装备制造企业是否要转型智能装备后服务型公司？

一、从制造到服务&#xff1a;装备制造企业的转型之路 装备制造企业作为国家经济发展的重要支柱&#xff0c;面临着日益激烈的市场竞争。在这样的背景下&#xff0c;越来越多的装备制造企业开始意识到&#xff0c;通过转型为智能装备后服务型公司&#xff0c;可以更好地满足客…...

编程日记 2023/9/12 14:11:25

day-49 代码随想录算法训练营（19） 动态规划 part 10

121.买卖股票的最佳时机 思路一&#xff1a;贪心 不断更新最小买入值不断更新当前值和最小买入值的差值最大值 思路二&#xff1a;动态规划&#xff08;今天自己写出来了哈哈哈哈哈哈哈&#xff09; 1.dp存储&#xff1a;dp[i][0] 表示当前持有 dp[i][1]表示当前不持有2.状…...

编程日记 2023/9/12 14:10:24

检查文件名是否含不可打印字符的C++代码源码

本篇文章属于《518抽奖软件开发日志》系列文章的一部分。 我在开发《518抽奖软件》&#xff08;www.518cj.net&#xff09;的时候&#xff0c;有时候需要检查输入的是否是合法的文件名&#xff0c;文件名是否含不可打印字符等。代码如下&#xff1a; //----------------------…...

编程日记 2023/9/12 14:09:23

学习笔记-正则表达式

https://www.runoob.com/regexp/regexp-tutorial.html 正则表达式re(Regular Expression)是一种文本模式&#xff0c;包括普通字符&#xff08;例如&#xff0c;a 到 z 之间的字母&#xff09;和特殊字符&#xff08;称为"元字符"&#xff09;&#xff0c;可以用来描…...

编程日记 2023/9/12 14:08:22

Wireshark TS | 网络路径不一致传输丢包问题

问题背景 网络路径不一致&#xff0c;或者说是网络路径来回不一致&#xff0c;再专业点可以说是网络路径不对称&#xff0c;以上种种说法&#xff0c;做网络方向的工程师肯定会更清楚些&#xff0c;用简单的描述就是&#xff1a; A 与 B 通讯场景&#xff0c;C 和 D 代表中间…...

编程日记 2023/9/12 14:07:21

CMake高级用法实例分析（学习paddle官方的CMakeLists）

cmake基础学习教程 https://juejin.cn/post/6844903557183832078 官方完整CMakeLists cmake_minimum_required(VERSION 3.0) project(PaddleObjectDetector CXX C)option(WITH_MKL "Compile demo with MKL/OpenBlas support,defaultuseMKL." ON) o…...

编程日记 2023/9/12 14:06:20

数据采集: selenium 自动翻页接口调用时的验证码处理

写在前面 工作中遇到&#xff0c;简单整理理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在心中坚守其一生&#xff0c;全心全意&#xff0c;永不停息。所有其它的路都是不完整的&#xff0c;是人的逃避方式&#xff0c;是对大…...

编程日记 2023/9/12 14:05:19

IDEA安装翻译插件

IDEA安装翻译插件 File->Settings->Plugins 在Marketplace中&#xff0c;找到Translation&#xff0c;点击Install 更换翻译引擎 勾选自动翻译文档 翻译 鼠标右击->点击Translate...

编程日记 2023/9/12 14:04:16

DBeaver使用

一、导出表结构 二、导出数据CSV 导出数据时DBeaver并没有导出表结构&#xff0c;所以表结构需要额外保存&#xff1b; 导入数据CSV 导入数据时会因外键、字段长度导致失败&#xff1b;...

编程日记 2023/9/12 14:03:15

Redis管理效率革命：AnotherRedisDesktopManager实战指南

Redis管理效率革命&#xff1a;AnotherRedisDesktopManager实战指南 【免费下载链接】AnotherRedisDesktopManager qishibo/AnotherRedisDesktopManager: Another Redis Desktop Manager 是一款跨平台的Redis桌面管理工具&#xff0c;提供图形用户界面&#xff0c;支持连接到Re…...

编程新知 2026/3/27 9:39:05

实战教学应用：基于快马平台开发生物繁殖课互动学习与测评系统

作为一名生物老师&#xff0c;我一直在寻找能够让学生更直观理解繁殖知识的教学工具。最近尝试用InsCode(快马)平台开发了一个互动学习系统&#xff0c;效果出乎意料的好。这个平台最棒的地方是&#xff0c;不需要复杂的服务器配置&#xff0c;就能把想法快速变成可实际使用的教…...

编程新知 2026/3/27 9:37:05

别再死记硬背了！用Python手把手教你实现数据库闭包自动计算器

用Python实现数据库闭包计算器&#xff1a;从理论到实战的自动化工具 闭包计算是数据库原理中的核心算法&#xff0c;但传统教材往往停留在抽象描述和手工演算阶段。作为曾经被各种箭头符号和递归推导折磨过的开发者&#xff0c;我决定用Python打造一个能自动计算闭包并可视化步…...

编程新知 2026/3/27 9:25:02

统计建模大赛的评分标准

2026年统计建模大赛正在进行中&#xff0c;相关文章&#xff1a; 统计建模大赛去哪找数据&#xff1f; 2026年统计建模大赛AI工具使用规范 2026年统计建模大赛选题思路——数字经济统计监测体系研究 我在公开课以及以前的文章中经常强调&#xff0c;数模竞赛不是考试&#…...

编程新知 2026/3/27 8:56:46

ABYSSAL VISION（Flux.1-Dev）风格化研究：模拟Typora等工具的极简文档配图

ABYSSAL VISION&#xff08;Flux.1-Dev&#xff09;风格化研究&#xff1a;模拟Typora等工具的极简文档配图 不知道你有没有过这样的体验&#xff1a;写技术文档或者博客的时候&#xff0c;文字部分洋洋洒洒&#xff0c;逻辑清晰&#xff0c;但一到需要配图说明的地方就卡壳了…...

编程新知 2026/3/27 8:48:42

SDMatte惊艳效果展示：高清透明PNG在海报/PPT/详情页真实复用案例

SDMatte惊艳效果展示&#xff1a;高清透明PNG在海报/PPT/详情页真实复用案例 1. 为什么你需要关注SDMatte 在日常设计工作中&#xff0c;抠图可能是最耗时但又必不可少的环节。无论是制作电商详情页、设计海报还是准备PPT素材&#xff0c;一个高质量的透明背景图片往往能大幅…...

编程新知 2026/3/27 8:40:38

零基础WordPress建站：可视化编辑器推荐（2026版-含下载）

&#x1f645;‍♀️ 零基础学WP建站&#xff0c;怕代码&#xff1f;怕复杂&#xff1f;怕翻车&#xff1f; 2026最新可视化编辑器实测合集来啦✨ 纯干货无链接&#xff0c;全程拖拽操作、所见即所得&#xff0c;小白也能轻松搭出专业网站&#xff0c;告别技术焦虑&#xff0c;…...

编程新知 2026/3/27 8:34:33

信创实践：Nacos 2.4.1 与人大金仓 Kingbase 的深度适配与性能调优

1. 为什么需要从MySQL迁移到人大金仓Kingbase&#xff1f; 最近几年&#xff0c;国产数据库的发展速度确实让人惊喜。作为一线开发者&#xff0c;我亲身体验了从MySQL迁移到人大金仓Kingbase的全过程。说实话&#xff0c;刚开始心里也没底&#xff0c;毕竟MySQL用得太顺手了。但…...

编程新知 2026/3/27 6:47:22

StructBERT-Large中文相似度工具一文详解：三级匹配等级判定逻辑与业务适配建议

StructBERT-Large中文相似度工具一文详解&#xff1a;三级匹配等级判定逻辑与业务适配建议 本文深度解析StructBERT-Large中文相似度工具的核心匹配逻辑&#xff0c;提供实际业务场景中的适配建议和优化方案 1. 工具核心价值与适用场景 StructBERT-Large中文相似度工具是一个基…...

编程新知 2026/3/27 4:54:16

测试用例设计-XMind

&#x1f680; 一、XMind 用例设计核心思路&#x1f449; 和传统Excel不同&#xff0c;XMind强调&#xff1a;以“功能模块”为主干 以“用户场景”为分支 以“测试点”为叶子节点&#x1f449; 本质结构&#xff1a;模块 → 场景 → 用例点 → 具体测试数据/预期&#x1f4cc;…...

编程新知 2026/3/27 4:38:01