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

前端Web开发HTML5+CSS3+移动web视频教程 Day1

链接

HTML 介绍

在这里插入图片描述

在这里插入图片描述

写代码的位置:VSCode

看效果的位置:谷歌浏览器

安装插件 open in browser

在这里插入图片描述

接下来要保证每次用 open in browser 打开的是谷歌浏览器。只需要将谷歌浏览器变为默认的浏览器就可以了。

首先进入控制面板,找到默认程序:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

VSCode Ctrl + b 折叠侧边栏。

在这里插入图片描述

效果:

在这里插入图片描述

修改代码,加上标签:

在这里插入图片描述

点击刷新按钮,刷新网页,查看效果:

在这里插入图片描述

在这里插入图片描述

需要包裹内容时,使用双标签,不需要则使用单标签。

HTML 中绝大多数都是双标签,只有极个别是单标签。

HTML 基本骨架就是网页模板,所有网页都要基于这个模板来编写代码。这个模板由几个固定的标签组成,用这几个标签来表示 HTML 的不同位置。写代码时可以根据位置的不同来对号入座。

最外层是一对 html 标签,html 标签表示整个网页。

HTML 基本骨架

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

用快捷键生成模板的效果:

在这里插入图片描述

在浏览器中打开时是一个空白的白板,没有任何内容:

在这里插入图片描述

如果想要展示一些文字,需要将文字写在 body 标签内部。

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>想要展示的文字。
</body>
</html>

效果:

在这里插入图片描述

注意这里代码里的网页标题是 Document,浏览器网页的标题同样也是 Document,是保持对应的。

标签的关系

标签之间有两种关系:

  1. 父子(嵌套)
  2. 兄弟(并列)
<html><head></head><body></body>
</html>

注释

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>这是文字,能看见吗?<br><!-- 这是注释,浏览器不显示。 --><!-- 可以给代码加注释 --><strong>111. 这是加粗的内容。</strong><!-- <strong>222. 这是加粗的内容。</strong> -->
</body>
</html>

效果:

在这里插入图片描述

标题标签

在这里插入图片描述

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>

效果:

在这里插入图片描述

在这里插入图片描述

段落标签

在这里插入图片描述

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>有些亲贵却不在乎前车之鉴,多尔衮一垮台,便纷纷来永平府设立王庄、田庄。这两年山川秀美的所在,不时出现楼阁亭台点缀的花园、歇山顶的高大堂屋、卷棚式的青砖住房,一派华美富丽,乡下人都看得目瞪口呆了。</p><p>虹桥镇的东岳庙前和通向四乡的大路口,早已布棚林立,摊贩如云了。火势旺盛的炉边,热气腾腾,铜勺敲着锅边当当响,卖的是油炸果子、油豆腐、豆浆、豆腐脑、杂碎汤;提篮挎筐的小贩声声吆喝,叫卖着酱鸡、卤蛋、夹肉火烧、点红馒头;茶棚、酒棚随处可见;落花生、炒栗子、金黄柿子、山里红,更摆得一堆一堆的。小地摊最多,在兜售用麦草、箔纸编制的各种玩具:身上写着“富贵有余”字样的红鱼,手捧大元宝笑嘻嘻的“招财童子”,盛满银锭、金光闪闪的“聚宝盆”,象征福气的红绒蝙蝠,等等。摊贩的主顾主要倒不是赛神队伍,而是这些来自方圆百里内的游人看客。这里既有身着直领衫、交领衫、毡帽布鞋,被满洲人称为“蛮子”的汉人,又有长袍短褂、皮帽皮靴,被汉人叫做“鞑子”的满洲人、蒙古人;既有缠腰带、背褡裢、一脸风霜的庄户人,又有长衫翩翩、满面书卷气的文人。不管是哪种人,都将在这纷纷攘攘的庙会上吃饱喝足看够,然后买点小玩艺儿带回家:买个“聚宝盆”,叫做“求财如意”;买只绒蝙蝠,叫做“戴福还家”。只这吉兆,就够叫人舒心快意的了。这就难怪太阳才上一竿,镇上已经万头攒动,一片嘈杂了。</p>
</body>
</html>

效果:

在这里插入图片描述

换行与水平线标签

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>第一行内容。还是第一行内容。<br>第二行内容。<br>第三行内容。<!-- 可以添加多个换行,从而产生空行 --><br><br><br>新的一行。<hr>
</body>
</html>

效果:

在这里插入图片描述

文本格式化标签

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><strong>strong 加粗</strong><br><b>b 加粗</b><br><em>em 倾斜</em><br><i>i 倾斜</i><br><ins>ins 下划线</ins><br><u>u 下划线</u><br><del>del 删除线</del><br><s>s 删除线</s><br>嵌套写法:<br><strong><em>加粗斜体</em></strong>
</body>
</html>

效果:

在这里插入图片描述

图像标签

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="./1.jpg"><img src="./2.jpg">
</body>
</html>

两张图片不会换行,除非一张图片太大了,导致放不下,下一张图片会看起来放在了下一行,其实还是在同一行。或者下一张图片比较大,在上一张图片后面放不下,就会单独放到一行中。

在实际工作当中,设置图片的高度和宽度,都是通过 CSS 来设置的,对 HTML 的高度和宽度两个属性,只需要了解即可。

在这里插入图片描述

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 网速较慢时,图片加载不出来,有了替换文本,不用猜也能知道图片是什么内容。 --><img src="./11.jpg" alt="周依然"><img src="./2.jpg" title="还是周依然">
</body>
</html>

效果:

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 单独指定图片的高度或者宽度时,图片会按比例放大或缩小,同时指定图片的高和宽时,图片尺寸将会变为指定的值 --><img src="./1.jpg" alt="" width="600"><img src="./1.jpg" alt="" width="900" height="200">
</body>
</html>

效果:

在这里插入图片描述

路径

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="E:\杂\2.jpg" alt=""><img src="E:/杂/2.jpg" alt="">
</body>
</html>

不希望下载图片,而是使用网络图片:

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- https://www.itheima.com/images/logo.png --><img src="https://www.itheima.com/images/logo.png">
</body>
</html>

超链接

在这里插入图片描述

超链接标签是双标签 a,中间包裹内容。

程序示例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="https://www.baidu.com/">跳转到百度</a> <!-- 好使 --><br><a href="www.baidu.com/">跳转到百度</a> <!-- 不好使 --><br><!-- 可以跳转本地文件 --><a href="./01-标签的写法.html">跳转到01-标签的写法</a>
</body></html>

对于超链接,按住 Ctrl 键就能在新窗口中打开。

在这里插入图片描述

或者再加一个属性,也能实现新窗口打开:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="https://www.baidu.com/" target="_blank">跳转到百度</a> <!-- 好使 --><br><a href="www.baidu.com/">跳转到百度</a> <!-- 不好使 --><br><!-- 可以跳转本地文件 --><a href="./01-标签的写法.html">跳转到01-标签的写法</a>
</body></html>

开发初期,不确定跳转地址,则 href 属性值写为 #,表示空链接,页面不会跳转,在当前页面刷新一次。

程序示例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#">空链接</a>
</body></html>

音频标签

音频标签在网页中插入声音。

在这里插入图片描述

音频标签是 audio 双标签,src 属性是必须要有的属性。

程序示例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><audio src="./media/music.mp3"></audio>
</body></html>

此时打开浏览器是没有声音的,因为浏览器把自动播放的功能都是禁用的。而且也看不出来有没有添加成功,因为没有任何提示信息,打开浏览器就是一个空白的白板。如图:

在这里插入图片描述

可以使用 controls 属性显示音频控制面板,面板能看到就说明声音插入成功了。

程序示例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><audio src="./media/music.mp3" controls></audio>
</body></html>

效果:

在这里插入图片描述

controls 属性的完整写法为 controls = "controls",但是在书写 HTML5 属性时,如果属性名和属性值相同,可以简写为一个单词。因此 controls = "controls" 可以简写为 controls

添加 loop 属性可以让音频自动循环播放,一次播放完了后自动开始从头播放。

添加 autoplay 属性将不会起任何作用,因为浏览器是禁用自动播放的。

程序示例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><audio src="./media/music.mp3" controls loop autoplay></audio>
</body></html>

视频标签

在这里插入图片描述

视频标签在网页中插入一个视频。

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="./media/vue.mp4"></video>
</body>
</html>

效果:

在这里插入图片描述

看不出来是不是一个视频,下面添加控制面板:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="./media/vue.mp4" controls></video>
</body>
</html>

效果:

在这里插入图片描述

点击播放按钮就可以开始播放视频了。

添加 muted 属性时,打开浏览器时默认声音是关闭的,可以手动打开。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="./media/vue.mp4" controls loop muted></video>
</body>
</html>

效果:

在这里插入图片描述

有了 muted 属性之后再添加 autoplay 属性时,当打开浏览器时,视频将自动播放且静音播放。如果没有 muted 属性却有 autoplay 属性,当打开浏览器时视频将不会播放。

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="./media/vue.mp4" controls loop muted autoplay></video>
</body>
</html>

综合案例一 个人简介

VSCode 自动换行:alt + z

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简介</title>
</head>
<body><h1>尤雨溪</h1><hr><p>尤雨溪,前端框架<a href="#">Vue.js</a>的作者,<a href="#">HTML5</a>版Clear的打造人,独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目<a href="#">JavaScript</a>,最后自己也走上了开源之路,现全职开发和维护<a href="#">Vue.js</a></p><img src="./photo.jpg" alt="尤雨溪的照片" title="尤雨溪"><h2>学习经历</h2><p>尤雨溪毕业于上海复旦附中,在美国完成大学学业,本科毕业于Colgate University,后在Parsons设计学院获得Design & Technology艺术硕士学位,任职于纽约Google Creative Lab。</p><h2>主要成就</h2><p>尤雨溪<strong>大学专业并非是计算机专业</strong>,在大学期间他学习专业是室内艺术和艺术史,后来读了美术设计和技术的硕士,<ins>正是在读硕士期间,他偶然接触到了JavaScript ,从此被这门编程语言深深吸引,开启了自己的前端生涯</ins></p><p>2014年2月,开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架,是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p><h2>社会任职</h2><p>2016年9月3日,在南京的JSConf上,Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队,尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合,目标是让大家能用 Vue 的语法跨三端。</p>
</body>
</html>

效果:

在这里插入图片描述

综合案例二 Vue 简介

程序:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 简介</title>
</head>
<body><h1>Vue.js</h1><p>Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。</p><p>其作者为<a href="./个人简介.html" target="_blank">尤雨溪</a> </p><h2>主要功能</h2><p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p><p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 [2] ,Vue.js 也能驱动复杂的单页应用。</p><video src="./media/vue.mp4" controls></video>
</body>
</html>

相关文章:

前端Web开发HTML5+CSS3+移动web视频教程 Day1

链接 HTML 介绍 写代码的位置&#xff1a;VSCode 看效果的位置&#xff1a;谷歌浏览器 安装插件 open in browser&#xff1a; 接下来要保证每次用 open in browser 打开的是谷歌浏览器。只需要将谷歌浏览器变为默认的浏览器就可以了。 首先进入控制面板&#xff0c;找到默…...

中医实训室:在传统针灸教学中的应用与创新

中医实训室是中医教育体系中的重要组成部分&#xff0c;尤其在传统针灸教学中&#xff0c;它扮演着无可替代的角色。这里是理论与实践的交汇点&#xff0c;是传统技艺与现代教育理念的碰撞之地。本文将探讨中医实训室在传统针灸教学中的应用与创新实践。 首先&#xff0c;实训室…...

React Hooks 小记(七)_useReducer

useReducer usereducer 相当于 复杂的 useState 当状态更新逻辑较复杂时可以考虑使用 useReducer。useReducer 可以同时更新多个状态&#xff0c;而且能把对状态的修改从组件中独立出来。 相比于 useState&#xff0c;useReducer 可以更好的描述“如何更新状态”。例如&#…...

甲子光年专访天润融通CEO吴强:客户经营如何穿越低速周期?

作者&#xff5c;陈杨、编辑&#xff5c;栗子 社会的发展从来都是从交流和联络开始的。 从结绳记事到飞马传信&#xff0c;从电话电报到互联网&#xff0c;人类的联络方式一直都在随着时代的发展不断进步。只是传统社会通信受限于技术导致效率低下&#xff0c;对经济社会产生影…...

还不到6个月,GPTs黄了

相比起来&#xff0c;人们还不如使用一个足够强大、灵活且通用的AI助手来满足各类复杂需求。更严重的是一些独立GPTs显露出的安全隐患。除此之外&#xff0c;最大的问题在于OpenAI模糊不清的货币化政策。 文章正文 上周&#xff0c;不少人发现微软官网忽然更新了一条“GPT Bu…...

IOS Swift 从入门到精通:BlurEffect BlendMode stroke

文章目录 UIBlurEffectBlendModestroke基本用法:描边样式:与strokeBorder的区别:组合使用:自定义形状:UIBlurEffect 在Swift中,实现模糊效果通常是通过UIKit框架中的UIBlurEffect类来完成的,这通常被称作毛玻璃效果。 **创建UIBlurEffect实例:**选择一个模糊效果的样…...

西木科技Westwood-Robotics人型机器人Bruce配置和真机配置

西木科技Westwood-Robotics人型机器人Bruce配置和真机配置 本文内容机器人介绍Bruce机器人Gazebo中仿真代码部署Bruce真机代码部署 本文内容 人形机器人Brcue相关介绍docker中安装Gazebo并使用Bruce机器人控制器更换环境配置 机器人介绍 公司&#xff1a;西木科技Westwood-R…...

【招聘贴】JAVA后端·唯品会·BASE新加坡

作者|老夏&#xff08;题图&#xff1a;公司业务介绍页&#xff09; “ 请注意&#xff0c;这两个岗是BASE新加坡的&#xff0c;欢迎推荐给身边需要的朋友&#xff08;特别是在新加坡的&#xff09;。” VIP海外业务-产品技术团队&#xff0c;这两个岗位属于后端工程组的岗&…...

CVPR2024|vivo提出使用对抗微调获得泛化性更强的SAM,分割性能直接登顶 SOTA!

在计算机视觉不断发展的领域中&#xff0c;基础模型已成为一种关键工具&#xff0c;显示出对多种任务的出色适应性。其中&#xff0c;由 Meta AI 开发的 Segment Anything Model&#xff08;SAM&#xff09;在图像分割任务中表现杰出。然而&#xff0c;和其他类似模型一样&…...

程序员必备的ChatGPT技巧:从代码调试到项目管理

近年来&#xff0c;随着人工智能技术的迅猛发展&#xff0c;ChatGPT作为一种强大的对话式AI工具&#xff0c;已经广泛应用于各个领域。而对于程序员来说&#xff0c;ChatGPT不仅可以帮助他们解决编程中的各种问题&#xff0c;还能在项目管理中发挥重要作用。本篇博客将详细介绍…...

JAVA开发的一套医院绩效考核系统源码:KPI关键绩效指标的清晰归纳

KPI是关键绩效指标&#xff08;Key Performance Indicators&#xff09;的缩写&#xff0c;它是一种用于衡量员工或组织绩效的量化指标。这些指标通常与组织的目标和战略相关&#xff0c;并帮助管理层评估员工和组织的实际表现。KPI还可以为员工提供清晰的方向&#xff0c;使他…...

面向对象编程——python

目录 一、面向对象编程 1.1 类和对象 1.2 继承 1.3 封装 1.4 多态 1.5 Python中的面向对象编程 二、类、对象和变量 2.1 类&#xff08;Class&#xff09; 2.2.1 类的属性&#xff08;Class Attributes&#xff09; 2.2.2 类的方法&#xff08;Class Methods…...

【LeetCode】每日一题:合并K个升序链表

给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 解题思路 分治加两个链表合并&#xff0c;或者用根堆&#xff0c;根堆的初始化方法很值得背诵&#xff0c;还涉及lambda的用法 AC代码 # Defini…...

从零开始学docker(四)-安装mysql及主从配置(一)

mysql MySQL是一个关系型数据库管理系统&#xff0c;由瑞典MySQL AB 公司开发&#xff0c;属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一&#xff0c;在 WEB 应用方面&#xff0c;MySQL是最好的 RDBMS (Relational Database Management System&#xff0c;关…...

【目标检测】Yolov8 完整教程 | 检测 | 计算机视觉

学习资源&#xff1a;https://www.youtube.com/watch?vZ-65nqxUdl4 努力的小巴掌 记录计算机视觉学习道路上的所思所得。 1、准备图片images 收集数据网站&#xff1a;OPEN IMAGES 2、准备标签labels 网站&#xff1a;CVAT 有点是&#xff1a;支持直接导出yolo格式的标…...

新能源汽车 LabCar 测试系统方案(-)

什么是LabCar测试 LabCar测试目标是进行整车黄板台架功能测试&#xff0c;用于整车开发和测试阶段&#xff0c;满足设计人员和测试人员的试验需求&#xff0c;以验证整车性能&#xff0c;减少开发工作量。系统主要用于测试静态及动态工况下的纯电动汽车的各项功能实现情况。 …...

机器学习辅助的乙醇浓度检测(毕设节选)

目录 1.为什么要机器学习 2. 神经网络一般组成 3.BP神经网络工作过程 4.评价指标 5.实操代码 1.为什么要用机器学习 人工分析大量的谐振模式&#xff0c;建立各种WGM的响应与未知目标之间的关系&#xff0c;是一个很大的挑战。机器学习(ML)能够自行识别全谱的全部特征。作为…...

YOLO系列改进

yolo核心思想&#xff1a;把目标检测转变成一个回归问题。将整个图像作为网络的输入&#xff0c;仅仅经过一个神经网络&#xff0c;得到边界框的位置及其所属的类别。 YOLOv1 CVPR2016 输出7730的张量表示2个框的5个参数和20个种类。leaky ReLU&#xff0c;leaky并不会让负数…...

cuda与cudnn下载(tensorflow-gpu)

目录 前言 正文 前言 &#xff01;&#xff01;&#xff01;tensorflow-gpu的版本要与cuda与cudnn想对应。这点十分重要&#xff01;推荐下载较新的。即tensorflow-gpu2.60及以上&#xff0c;cuda11.x及以上&#xff0c;cudnn8.x及以上。 所以&#xff0c;下载之前先检查好…...

git 多分支实现上传文件但避免冲突检测

文章目录 背景实现步骤 背景 对于某些通过命令生成的配置文件&#xff08;如 TypeScript 类型文件等&#xff09; 实现步骤 1...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

Python爬虫(一):爬虫伪装

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

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...