VSCode 中使用 Jupyter：详尽教程

JavaScript

需积分: 50 129 浏览量更新于2024-08-06 收藏 45.5MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"元</td>-如何在vscode下使用jupyter的教程详解" 这篇教程主要聚焦于在Visual Studio Code (VSCode)环境下使用Jupyter Notebook的详细步骤和技巧。Jupyter Notebook是一款强大的交互式计算环境，常用于数据分析、机器学习和教学。VSCode作为一个全能的代码编辑器，支持多种编程语言，包括JavaScript，同时也提供了对Jupyter Notebook的集成，使得开发者可以在熟悉的VSCode界面中编写和运行Jupyter Notebooks。首先，你需要确保已经安装了VSCode。接下来，需要安装Jupyter Notebook的相关扩展。VSCode Marketplace中有名为"Jupyter"的官方扩展，点击安装后，VSCode将具备运行和编辑Jupyter Notebook的功能。 1. **配置VSCode for Jupyter Notebook** - 打开VSCode，点击左侧的扩展图标，搜索并安装"Jupyter"扩展。 - 安装完成后，重启VSCode，然后可以通过文件菜单选择"打开文件夹"，导入包含`.ipynb`文件的项目。 - 选择一个`.ipynb`文件，VSCode会自动识别并以Jupyter Notebook的形式呈现。 2. **运行和编辑Notebook** - 在VSCode中，可以直接在代码单元格内输入Python代码，按`Shift+Enter`运行单元格。 - 通过上下文菜单或使用键盘快捷键，可以添加、删除、移动单元格，以及切换代码和markdown单元格。 - 对于JavaScript相关的代码，虽然Jupyter Notebook原生支持Python，但通过VSCode的插件，也可以支持其他语言，包括JavaScript。 3. **利用HTML、CSS和JavaScript** - Jupyter Notebook不仅限于Python，你还可以在Markdown单元格中插入HTML、CSS和JavaScript代码，创建丰富的交互式文档。 - HTML用于结构化内容，CSS用于美化，而JavaScript可以增加动态交互性，如响应式元素、动画效果等。 - 要在Notebook中执行JavaScript，可以使用`<script>`标签，并在其中编写代码。 4. **网页制作基础** - 想要深入了解网页制作，基础的HTML、CSS和JavaScript是必备知识。 - HTML用于构建网页结构，CSS用于样式设计，JavaScript则赋予网页交互功能。 - 学习这些基础知识可以帮助你在Notebook中创建更复杂的交互式展示。 5. **实例实践与技巧** - 书中提到的实例，如"背景变换的导航菜单效果"、"跟随鼠标指针移动的图像"等，都可以在Jupyter Notebook中实现。 - 通过实例学习，理解并掌握相关技术，然后运用到实际项目中。 - 每章末尾的习题和练习有助于巩固所学，提高解决问题的能力。 6. **使用CSS和JavaScript增强Notebook** - 利用CSS可以定制Notebook的样式，比如设置背景颜色、字体大小、边框样式等。 - JavaScript可以用来添加动态效果，如定时关闭网页、鼠标经过图像时的变化、设置网页停留时间等。这篇教程教你如何在VSCode的环境中充分利用Jupyter Notebook，结合HTML、CSS和JavaScript，创建具有丰富交互性的文档或教学材料。无论是学习网页制作的基础，还是进阶的编程技巧，都能在VSCode的Jupyter Notebook中得到实践和提升。

<!doctype html> <html> <head> <meta charset="UTF-8"> <style> #bills{ width: 400px; } </style> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function() { 空缺处 }); </script> </head> <body> </tr

编号分类名称价格(元)

01 食品农夫山泉矿泉水 2.00
02 日用品洗发水 25.00

03 娱乐休闲暑假旅游 5000.00

</body>将食品替换成图片显示

编号	分类	名称	价格(元)
01	食品	农夫山泉矿泉水	2.00
02	日用品	洗发水	25.00
03	娱乐休闲	暑假旅游	5000.00

<th>价格(元)</th> </tr> <tr> <td>01</td> <td>食品</td> <td>农夫山泉矿泉水</td> <td>2.00</td> </tr> <tr> <td>02</td> <td>日用品</td> <td>洗发水</td> <td>25.00</td> </tr> <tr> <td>03</td...

<label>Mode</label> - <label>Clock Offset</label> - <label>Quartz Voltage</label> - <label>Temp</label> -

给Mode Clock Offset Quartz Voltage Temp 加上背景颜色

<td><label><strong>Mode</strong></label></td> <td><span id="mode">-</span></td> <td><label><strong>Clock Offset</strong></label></td> <td><span id="offset">-</span></td> <td><label><strong>Quartz...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签的基本使用</title> </head> <body>

1 2 3

8 2 23

</body> </html>合并单元格

要合并单元格，可以使用 colspan 和 rowspan 属性。例如，如果要将第一行的第一列和第二列... <td colspan="2">1</td> <td>3</td> </tr> <tr> <td>8</td> <td>23</td> </tr> </table> </body> </center> </html>

关系姓名备注

父亲李乾即李敬[24]

母亲婴敷益寿氏[24]

儿子李宗为魏将，封于段干[25]

孙子李注 [25]

曾孙李宫 [25]

设置css样式

关系	姓名	备注
父亲	李乾	即李敬[24]
母亲	婴敷	益寿氏[24]
儿子	李宗	为魏将，封于段干[25]
孙子	李注	[25]
曾孙	李宫	[25]

<td>为魏将，封于段干[25]</td> </tr> <tr> <td>孙子</td> <td>李注</td> <td>[25]</td> </tr> <tr> <td>曾孙</td> <td>李宫</td> <td>[25]</td> </tr> </tbody> </table> ``` 效果如下： <style> ...

改进这段代码让它有鼠标移入图片改变的效果<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> table{ margin: 100px auto; } td{ text-align: center; } </style> </head> <body>

女靴女包

雪地靴男包

冬裙登山鞋

呢大衣皮带

毛衣围巾

棉服皮衣

女裤男毛衣

羽绒服男棉服

牛仔裤男靴

<script src="../jquery-3.7.0.js"></script> <script type="text/javascript"> $(function(){ $("tr td")mouseenter(function(){ $("img").prop("src","../ima/女靴.jpg") }) }) </script> </body> </html>

你可以在 `$("tr td")mouseenter()` 方法中，使用 `$(this)` 获取当前鼠标移入的单元格，然后再使用 `$(this).next()` 获取该单元格后面的图片元素，最后改变图片的 `src` 属性即可实现鼠标移入图片改变的效果，示例...

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>酒店管理系统</title> <link rel="stylesheet" href="style.css"> </head> <body>

酒店管理系统

<main>

酒店客房管理

ID	类型	价格	编辑
1	单人房	¥200	<button class="edit-btn">编辑</button>
2	双人房	¥300	<button class="edit-btn">编辑</button>
3	豪华房	¥500	<button class="edit-btn">编辑</button>

添加客房

<form>

</main> <script src="script.js"></script> </body> </html>给代码逐行加上注释

<td><button class="edit-btn">编辑</button></td>  </tr> <tr> <td>2</td> <td>双人房</td> <td>¥300</td> <td><button class="edit-btn">编辑</button></td> </tr>...

用以下表格，人工构建一个html文件，文件的body标签里只有一个table标签：

歌名作者时间

白月光与朱砂痣大籽 2021

晴天周杰伦 2003

Love Story Taylor Swift 2009

梦幻丽莎发廊五条人 2016

<td>歌名</td> <td>作者</td> <td>时间</td> </tr> <tr> <td>白月光与朱砂痣</td> <td>大籽</td> <td>2021</td> </tr> <tr> <td>晴天</td> <td>周杰伦</td> <td>2003</td> </...

完善

商品名称单价数量总价操作

健身水杯 100 <input type="number" value="1" min="1"> 100 <button class="btn btn-danger">删除</button>

商品2 200 <input type="number" value="1" min="1"> 200 <button class="btn btn-danger">删除</button>

商品3 300 <input type="number" value="1" min="1"> 300 <button class="btn btn-danger">删除</button>

总价： 600

这个代码让他美观

商品名称	单价	数量	总价	操作
健身水杯	100	<input type="number" value="1" min="1">	100	<button class="btn btn-danger">删除</button>
商品2	200	<input type="number" value="1" min="1">	200	<button class="btn btn-danger">删除</button>
商品3	300	<input type="number" value="1" min="1">	300	<button class="btn btn-danger">删除</button>
总价：	600

<td><img src="img/t_recommen/cup.jpg" width="200" height="150"><br>健身水杯</td> <td>100</td> <td><input type="number" value="1" min="1"></td> <td>100</td> <td><button class="btn btn-danger">删除...

Header 1 Header 2 Header 3
Fixed Data 1 Data 2
Fixed Data 3 Data 4
Header 1
Fixed
Fixed
实现拖动父级滚动条超出100像素固定表格下所有的第一列td 实例

Header 1	Header 2	Header 3
Fixed	Data 1	Data 2
Fixed	Data 3	Data 4

Header 1
Fixed
Fixed

<td class="fixed-column">Fixed</td> <td>Data 1</td> <td>Data 2</td> </tr> <tr> <td class="fixed-column">Fixed</td> <td>Data 3</td> <td>Data 4</td> </tr> </tbody> </table> <table> <thead> ...

2023057 02 05 10 17 24 32 + 03 √ × × × √ × √ × × × 3 2023058 16 31 16 15 06 15 15 05 25 15 在以上代码用apache正则表达式提取以开头结束里面的数字

<td>2023058</td> <td></td> <td>16</td> <td>31</td> <td>16</td> <td>15</td> <td>06</td> <td>15</td> <td>15</td> <td>05</td> <td>25</td> <td>15</td> <td></td> </tr> <tr>...</tr> ''' pattern = re....

优化代码<uni-tr v-for="item in Now" :key="item.id" v-if="item.calltime>timenow && item.part === 0"> <uni-td align="center">{{ item.num }} {{ item.name }}</uni-td> <uni-td align="center">小部位-激光脱毛</uni-td> <uni-td align="center">{{ item.room }}号诊室</uni-td> <uni-td align="center">已叫号</uni-td> </uni-tr> <uni-tr v-for="item in Now" :key="item.id" v-if="item.calltime==null && item.part === 0"> <uni-td align="center">{{ item.num }} {{ item.name }}</uni-td> <uni-td align="center">小部位-激光脱毛</uni-td> <uni-td align="center">---</uni-td> <uni-td align="center">等待中</uni-td> </uni-tr> <uni-tr v-for="item in smallNull" :key="item"> <uni-td align="center">---</uni-td> <uni-td align="center">---</uni-td> <uni-td align="center">---</uni-td> <uni-td align="center">---</uni-td> </uni-tr>

可以将三个 <uni-tr> 合并成一个，使用 v-if 判断不同情况下的显示内容，可以减少重复代码。像这样： ``` <uni-tr v-for="item in Now" :key="item.id" v-if="item.part === 0"> <uni-td align="center">{{ item....

温度传感器: {{ temperature }}

湿度传感器: {{ humidity }}

防爆开关: {{ explosion_status }}

<i-button type="primary" size="large" @click="refreshData">刷新数据</i-button>
如何让这部分代码做出的网页效果展现在网页的最右边

<td>温度传感器:</td> <td>{{ temperature }}</td> </tr> <tr> <td>湿度传感器:</td> <td>{{ humidity }}</td> </tr> <tr> <td>防爆开关:</td> <td>{{ explosion_status }}</td> </tr> </table> <i-...

bootstrap

序号工单条码型号资源设备编号工序工序中文描述建档日期结果不良代码不良代码明细备注 {{item.filedName}} 建档人

{{$index + 1}} {{item.gd}} {{item.sfc}} {{item.xh}} {{item.resourceId}} {{item.machineNo}} {{item.opeationId}} {{item.operationName}} {{item.czDate}} {{item.flag}} {{item.ngCode}} {{item.ncDesc}} {{item.demo}} {{item[field.tableField]}} {{item.czUser}}

这个代码怎么固定表头做内容滚动

序号	工单	条码	型号	资源	设备编号	工序	工序中文描述	建档日期	结果	不良代码	不良代码明细	备注	{{item.filedName}}	建档人
{{$index + 1}}	{{item.gd}}	{{item.sfc}}	{{item.xh}}	{{item.resourceId}}	{{item.machineNo}}	{{item.opeationId}}	{{item.operationName}}	{{item.czDate}}	{{item.flag}}	{{item.ngCode}}	{{item.ncDesc}}	{{item.demo}}	{{item[field.tableField]}}	{{item.czUser}}

<td ng-repeat="field in fields"> {{item[field.tableField]}} </td> <td>{{item.czUser}}</td> </tr> </tbody> </table> </div> ``` 其中，`position: sticky; top: 0;`样式可以让表头固定在页面顶部，`...

<c:forEach items="${list.list }" var="student" varStatus="status"> 美化一下
<td><img alt="" src="${pageContext.request.contextPath}/images/StudentPhoto/${student.stuPhoto}" width="100px" height="100px"></td> <td>${student.classes.className}</td> <td>操作按钮</td> </tr> ...

<i-table max-height="300">

</i-table>
<i-button type="primary" size="large" @click="refreshData">刷新数据</i-button>
怎么用vue模板改写这段代码
另外，我们使用 `slot` 和 `<template>` 标签来定义一个表格模板，然后在表格组件中使用这个模板来渲染表格内容。最后，我们使用 `@click` 指令绑定一个点击事件处理函数 `refreshData` 到按钮组件上。

<input type="checkbox" id="selectAll"> 学生编号学生学号学生姓名学生性别学生出生日期学生地址学生电话学生照片学生班级操作
<input type="checkbox" name="idCheckbox" value="${student.stuId }"> ${student.stuId } ${student.stuNo} ${student.stuName } ${student.stuSex } ${student.stuBirth } ${student.stuAddress } ${student.stuPhone } ${student.classes.className } 温度传感器: {{ temperature }} 湿度传感器: {{ humidity }} 防爆开关: {{ explosion_status }}
①接收转发过来的数据，绑定名为user

ID 用户名密码邮箱电话操作
( 1 ) . 根据以上材料，在①位置补充代码，将request对象中绑定名为user的数据显示到表格中。

好的，根据以上材料，在①位置补充代码，将request对象中绑定名为user的数据显示到表格中，可以使用JSTL标签库中的<c:forEach>标签遍历用户列表，并将用户信息显示到表格中。以下是示例代码： ```java <table class...

女靴		女包
雪地靴		男包
冬裙		登山鞋
呢大衣		皮带
毛衣		围巾
棉服		皮衣
女裤		男毛衣
羽绒服		男棉服
牛仔裤		男靴

歌名	作者	时间
白月光与朱砂痣	大籽	2021
晴天	周杰伦	2003
Love Story	Taylor Swift	2009
梦幻丽莎发廊	五条人	2016

VSCode 中使用 Jupyter：详尽教程

如何在VSCode下使用Jupyter的教程详解

实现将Jupyter笔记本作为Markdown文档，Julia，Python或R脚本-python

rustdef：Jupyter扩展防锈

<label>Mode</label> - <label>Clock Offset</label> - <label>Quartz Voltage</label> - <label>Temp</label> - 给Mode Clock Offset Quartz Voltage Temp 加上背景颜色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签的基本使用</title> </head> <body> 1 2 3 8 2 23 </body> </html>合并单元格

关系 姓名 备注 父亲 李乾 即李敬[24] 母亲 婴敷 益寿氏[24] 儿子 李宗 为魏将，封于段干[25] 孙子 李注 [25] 曾孙 李宫 [25] 设置css样式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>酒店管理系统</title> <link rel="stylesheet" href="style.css"> </head> <body> 酒店管理系统 <main>

酒店客房管理

添加客房

用以下表格，人工构建一个html文件，文件的body标签里只有一个table标签： 歌名作者时间 白月光与朱砂痣大籽2021 晴天周杰伦2003 Love StoryTaylor Swift2009 梦幻丽莎发廊五条人2016

Header 1Header 2Header 3FixedData 1Data 2FixedData 3Data 4Header 1FixedFixed 实现拖动父级滚动条超出100像素固定表格下所有的第一列td 实例

2023057 02 05 10 17 24 32 + 03 √ × × × √ × √ × × × 3 2023058 16 31 16 15 06 15 15 05 25 15 在以上代码 用apache正则表达式提取以 开头 结束 里面的数字

温度传感器: {{ temperature }} 湿度传感器: {{ humidity }} 防爆开关: {{ explosion_status }} <i-button type="primary" size="large" @click="refreshData">刷新数据</i-button> 如何让这部分代码做出的网页效果展现在网页的最右边

<i-table max-height="300">

最新资源