通易VScode配置直接修改代码

今天我们这期视频只讲一件事情，就是普通人如何使用，如何安装 cloud code 并接入国产大模型 deepsafe。 你 是不是也觉得 ai 编程那肯定要写代码吧？ cloud code 听起来好高级，跟普通人有关系吗？我的回答是当然有。 当我们接入 deepsafe 之后，可以利用它去写作，和 deepsafe 官网的模型是完全一样的，它不光能写文章，还能帮你去造工具，而且现在超火的 ai 技能插件 skill 最早就是可乐的 code， 玩明白的。安装好之后我们再安装 vs code， 那 它就可以实时操作，可以帮我们去开发网页开发工具，它的功能是非常强大的。 今天这期视频就是专门为你定制的，不用懂代码，不用找可用的支付方式去购买国外的大模型，只要你会复制粘贴，就能在十分钟之内装好可多的 code， 并成功接入国产大模型 deepsafe。 在 这里有一个前提就是网络环境 是处理好的，而且本期分享我会特意使用一台全新的没有安装过任何环境的 windows 十一系统来演示，会把所有遇到的问题给大家解决方法和步骤，让大家只需按照步骤操作就可以安装成功。实操环节，我会分享如何成功安装 cloud code， 第一次使用，如何起用可劳的 code， 如何接入 deepsafe 大 模型，然后如何利用编程应用制作一个个人主页。本期视频分享我们需要安装以下内容， 第一个就是 note 点 gs， 它是一个运行环境可拉的 code， 要靠它才能跑起来。第二个就是 g i t， 一个隐藏但比较重要的工具， windows 十一系统默认是没有安装的，如果没有可拉的 code 会无法使用。下一个就是 cc switch， 它可以一键轻松切换大模型，就像平时我们开关水龙头一样简单。第四个就是 vs code， 它是微软出的免费编辑器，长得就像记事本，但功能强大。以下就是本期分享我们需要安装的东西。 骚掩饰我会先分享 c l i 命令行界面。 altcode 本身是个命令行工具，英文叫 c l i， 意思是你可以在黑窗口里面打字指挥它，但大家别担心，我们装上 vs code 之后，使用插件百分之九十的操作都能用鼠标点出来， 不用死记命令。好了，下面我们直接开始实操，进入实操演示部分，第一步我们就需要安装 note g s， 在 这里我们不用命令安装，直接选择安装包，然后我们运行安装包，在这里我们就直接下一步，然后选择下一步，就直接下一步就可以。 好，这时候就安装成功了。安装好之后我们来验证一下是否安装成功，在这里我们按键盘上的，在这里我们按键盘上的 windows 图标加 r 键，这时候就会弹出运行窗口，在这里输入 cmd， 然后确定，这时候就会出现命令窗口，在这里我们输入 node 杠 v， 然后回车可以看一下，现在出了版本号就证明这个 node js 安装成功了。下一步我们就需要安装 cloud code， 安装 cloud code 我 们需要使用 powershell， 在 这里我们搜索一下， 搜索之后，然后右键选择以管理员身份运行，然后我们输入这条命令，直接回车。 好了，到这里就安装成功了，同样我们也是查看版本号的方法，查看是否安装成功，在这里我们输入一下命令，输入好之后我们回车可以看一下，现在已经出了版本号，二点一点三七，我们的 cloud code 就 安装成功了， 然后我们进入 cloud code， 直接输入 cloud， 然后回车可以看一下，现在进入出问题了，这时候我们就需要安装一下 g i t， 我 们来到 g i t 页面，然后选择保存，我这里保存到桌面上，然后我们开始安装，这里我们也是直接下一步， 下一步这些我们就全部的都是直接下一步 好了，这时候就安装成功了，然后我们再看一下，我们重新打开一个 powershell， 我 们重新打开一个 powershell 窗口，然后我们输入 cloud 可以 看一下。现在我们进入 cloud 是 可以运行了，但它又遇到一个问题，就是它有一个验证，在这里我们需要修改一个配置文件， 在这里我们来到我们的用户目录，我的用户名是 k， 我 这里直接输入，然后回车到这里就可以看到一个配置文件，就是 cloud 点 jason， 然后在这里我们打开编辑一下， 可以看一下，这里就是这个配置文件，在这里我们增加一个参数，增加之前这里我们需要有一个英文的逗号，像这个标点符号是经常会被大家忽略的，有好多朋友遇到问题就是增加配置，但大家增加好之后还是不能使用，就是因为这个标点符号的问题， 在这里我们添加添加这个配置项就可以了，然后我们再返回，然后我们在 c l o u d cloud， 然后回车可以看一下，现在就已经进入了，下一步我们再回车，这个提示就是是否在当前目录，然后我们回车 好了，这时候它就会让我们去登录 cloud 账号，因为 cloud 这个它国外的大模型最让人头痛的一个问题就是经常会被封号，所以在这里我们不使用它的大模型，我们要接入我们国产的 deepsafe， 在 这里我们 cloud 安装好了，然后下一步就是需要去接入 deepsafe 大 模型，在这里还用到一个工具，就是 cc switch， 现在我们再来安装一下， 我们来到 github， 然后我们去找安装包，在这里我们就直接往下拉，拉到底部，在这里我们找到适合我们系统使用的，在这里我选择三点幺零点三，如果是 windows 的 话，大家就选择这个就可以。好，现在保存好了，然后我们直接进入安装， 在这里我们也是直接下一步，下一步安装即可，这时候就安装好了，然后我们运行 下一步就需要我们配置 deepsafe 的 api， 在 这里我演示一下操作流程，在这里我们打开 deepsafe， 然后选择 api 开放平台，然后我们选择 api keys， 在 这里去创建，比如创建 api key c c 三，然后我们创建， 创建好之后我们复制一下这个 api key 的 这个密钥，然后复制，然后我们来到 c c switch 里面，在这里我们就选择右上角的加号，然后选择模型 zip， 然后往下滑，这里我们只需要填写一下这个 api， 然后添加， 这时候就添加好了，然后我们回到命令窗口，我们再进入 cloud， 可以看一下，现在已经不提示登录了，在这里我们输入斜杠 model m o d 可以 看一下，然后我们就选择第一个，在这里已经有了 deepsea v 三点二模型，现在我们去选择一下，就是第五个选项，让我们回车。好，这时候就选择好了， 选择好模型之后，在这里我们对话，我们问他一下你当前是什么模型，然后我们回车 可以看一下。在这里在此次绘画中，我作为 cloud code 实力实际使用的是 deepsafe v 三点二模型，到这里我们就成功地安装了 cloud code， 然后接入了 deepsafe 大 模型， 到这里我们就完成了 cloud code 命令行工具接入 deepsafe 大 模型，下面我来演示一下。我们在 vs code 里面使用 cloud code， 它的一个优势就是格式化操作，它的操作几乎都是用鼠标点击就可以， 然后我们下一步就需要安装 vs code， 在 这里我们选择宏框按钮，然后保存 好，现在保存成功了，然后我们安装在这里选择，我同意，然后我们直接下一步，这里就是选择一下安装目录，如果不选择默认安装到 c 盘，然后我们选择下一步，这里几乎也是全程下一步就可以，然后我们安装 好，这时候安装成功了，我们选择完成，在这里打开之后，它默认的是英文界面，看到英文不用担心，在这里我们需要安装一个插件就可以搞定，我们选择四个方块这里，然后我们输入简体， 我们就安装默认的第一个好，安装成功之后，右下角会有一个重启的一个提示，在这里我们选择重启。好，现在打开就是中文界面了，然后下一步我们就需要找到 colode code 插件，我们输入 colode code， 然后我们选择第一个安装， 在这里我们需要辨别一下官方版本，在这里我们安装，然后我们选择新任发布者和安装好了，这时候成功之后，在右上角就会多一个这样的一个图标，然后我们选择 可以看一下它，这里默认跳出的是一个登录提示，我们有了 c c switch 已经接入了模型，它这里就会跳过，然后在这里我们再输入你当前的模型是什么模型，然后我们发送， 可以看一下我当前运行的模型是 dipstick 为三点二，像这里也是这个 cc switch 在 这里起到的作用，像这里比如接入 glm 大 模型，或者是其他第三方中转的模型，用这个 都是可以搞定的，非常方便。好到这里就安装成功了，也成功接入了，下一步我们就让它帮我们生成一个个人主页，我们一起来看一下，在这里返回桌面，我先新建一个文件夹，然后回到 vs code， 然后文件打开文件夹， 我们选择桌面上的 myweb， 然后选择文件夹，这时候我们就用 cloud code 来对话，在这里我们输入提示词，就是我是一名专业的前端程序员，帮我生成一个自我介绍的个人主页，让大家可以快速的认识我，了解我，然后使用 html 格式，简约风格， 科技感配色，页面元素，要有自我介绍板块，联系方式，二维码区域，在这里就是我们给他的提示词，然后我们发送 好了，可以看一下，现在个人主页已经生成成功了，然后我们预览一下它给我们生成的一个个人主页，就是简历风格的，可以看一下，还是比较丰富的。在这里经过我的测试，就是我们使用可多扣的时候，不管是生成文章还是生成网页， 在这里我们要给他一个语言的提示，就是要生成中文内容，他有时候是默认的生成中文，有时候默认的生成英文，他这个是存在几率问题的。所以在大家生成内容的时候，强调一下生成中文内容， 这是目前想到的一个问题，分享给大家。这就是以插件模式使用的，在 vs code 里面还可以以命令行模式，在这里我们打开终端 使用方法是一样的，在这里我们输入 cloud 可以 看一下，就和我们在命令窗口使用的是一样的， 像这个一个优势，就是命令行模式加格式化窗口的模式可以直接使用，这就是我们所有的实操分享内容。在这里我也写了实操手册，比如安装好之后无法进入，或者是安装之后要验证，像这些遇到问题的解决办法，都有写到手册里面。 好了，到这里我们就完成了一整套从完全零基础到真正用起来的全过程。我们一开始什么都不懂，装好了克拉的 code， 配上了国产大模型 deepsafe， 在 vs code 的 里面，我们让 ai 帮我们生成了一个个人主页。其实克拉的 code 它有很多高阶的玩法， 你可能也听说过，比如 mcp、 gel， 但这些我也会慢慢讲，后面我会分享，但是这些都不着急，也不重要， 真正重要的只有一件事，就是现在先去试一试，先用起来，哪怕只做一件小事。 ai 时代最危险的不是不会用工具，而是以为自己用不了。 老的 code 不是 程序员的专利，它是每个普通人的效率工具。 ai 时代只要有思路就开始动手，就已经超过了百分之九十的人。 ai 时代，我们不用纠结新出了什么东西，哪个模型更厉害， 能帮自己提效的，自己用着习惯的，对自己来说就是完美的模型，完美的工具。好了，本期内容分享就到这里，我们下期再见。

接下来我们来看第八个 vs code 的常用插件 pear dear， 我们的格式化代码的插件，这个插件主要用于我们格式化美化代码，我们平时在写代码的时候， 呃，经常会出现一些比如代码缩进不一致啊，包括这个不符合规范的啊，有时候的话呢，会， 偶尔还会这个代码格式的话呢，比较凌乱，对吧？那为了保持统一的风格，我们一般情况下在企业里面的话呢，我们都会统一的标准的。那呃，这些第三方插件的话呢，就给了我们很多这样的 格式化的这个标准，所以的话呢，我们接下来带大家安装一下，我们来使用一下啊，感受一下，那这里面的话安装也是一样的。首先第一个我们在 visco 的的应用商店里面，搜索框输入 cuter， 然后点击安装就 ok 了，然后 我们载在我们的设置里面，把我们的保存时格式化文件这个地方的话勾选上啊，就是你 ctrl 加 s 的时候，他会自动帮你保存，那光添加这个还不够哈，我们还需要将我们的这个 pry 点这个 代码格式化的插件设置为默认选项啊，那这样的话呢，你在 ctrl s 他，他就使用是我们的 prader 的这个代码格式化工具。那么接下来的话呢，我们来啊测试一下哈。 那首先的话呢，我们先打开，那么这个时候我们可以看到我们是没有安装的，对吧？还没有安装这个插件，那么这个情况下的话呢，我们先来把这个代码搞乱一点啊，比如他的格式，哎，空行啊， 包括这里面啊，乱七八糟的，对吧？哎，这个明显的话呢，这个是写的，你看这个水平的不行，对不对？好，我们这个 呃，来啊，把这个地方也给他打乱一下啊，有多乱搞多乱，你看看着就 s 保存是不是没用啊？ 啊？没用就对了哈，那么接下来的话呢，我们就来安装一下我们的这个 preda 啊，咱们这个插件，好吧，那首先的话，第一个我们点开啊，你在这里搜索我们的 prade p r e t t i 一二， ok， 回撤。好，那么这样的话呢，我们把它来在这个地方，我们先点开看一下啊，就这个插件没错啊，然后点击安装 好，那么等他安装成功，安装成功了之后，你会发现这个时候你看不见 s 还是没有用，对吧？我们刚刚讲了哈，光把这个地方哎 安装上还是不够的，那么接下来我们需要做一件事，就是那你看啊，这个地方他有个设置，设置里面的话呢，我们这里搜索 s a v e i so， 那 so 之后的话你可以看到这还有个什么呢？ format on show 就什么意思呢？就是我们在编保存时格式化文件，对吧？那这里我们把它勾选上好，勾选上了之后，其实它是在我们的这个配置文件里面哈，在这个地方看右上角啊，这里打开配置文件，然后它这里面给我们加了一行代码，看到了吗？ additive format on show 等于处啊， 意思就是说我们在编辑编辑器里编辑的时候，我们这个呃代码格式化的这个插件的话呢，就抗拒 s 之后他会给我们开启了，就这个意思哈，其实 vs code 给我们 做了一很好的范例，就是未来我们在开发很多插件的时候，你看他只要用配置的形式，说白了就把你这个页面上保存的所有东西都给你写到配置文件里面，那么如果你想保持这个，你只需要把这个配置文件啊，比如说你的这个东西保存一下，对吧？当然 vs 客的给我们提供了一个账户端 登录，你在任意的电脑上打开他的这个，你以前的代码习惯都会给你保留下来啊，以一个文本的形式给你算算，这个就非常非常好了，对吧？ 好了，那么接下来的话呢，我们这弄好了， ctrl s 了，好，你还能不能行呢？还是不行，你发现没有，我现在 ctrl 加 s 还是不行，那怎么办呢？我们这个是要将 ctrl 加 s 的时候，保存时要格式化，那么我们要按照什么样的规范格式格式化呢？就按照我们刚刚刚安装的这个， 这个 preter 啊，这个插件我们要以它为标准，对吧？ ok， 这已经弄上了，对不对？那怎么办呢？来右键啊，注意看，这里有使用格式化文档来点开， 那点开之后的话呢，你看这里，这里的话呢，我们要选择默认，你看配置默认格，刷程序，点击他，哎，你看这是一个 pose， 点 code format， 对吧？你点到这个啊，点一下， ok， 你再来看啊，这个时候再来看，点开， 是不是他这设置个默认值，这个代表我们一定要点这个啊，点这个他会跳转到这里，然后再点他，就把他设置为默认值了， ok， 好，那么这个时候我们再来看一下啊， ctrl 加 s， 接下来就是见证奇迹的时刻，我们看能不能行啊，看能不能恢复啊，来，一二三走， 哎，可以了，对吧？好了，没问题啊，那这个时候的话，我们再再搞乱一点来看这 s， 看是不是出来了，哎，你把这个搞的再乱啊，随便打乱没问题，看这 s 他一样可以回来的吧？ 那当然，这个地方的话，那不一样啊，这是你的文本里面的东西啊，那你只要在标签，因为一般情况下我们都是由于标签这个，比如说，哎，有那么一个没对齐啊， 对吧？哎，没对齐啊，或者这个地方多了个空格啊，哎，这个地方可能也多了两个空格啊，这样子啊，好像他也不影响什么程序运行的，但是他对代码的美观性还是有影响，对吧？所以这个时候的话呢，我们 这样一写之后哇，就非常破费了，是吧？那包括你这页面上写的 gs 啊啊，所有的其他东西啊，都是可以起作用的好不好？那么这个插件的话呢，是非常好用的，而且的话呢，也是我们日常过程中经常会用到的哈， 那比如说这些地方的话呢，你看你随意哎，你比如说你这里啊，你这里打两个空格，其实这都不影响成运行啊，但是的话呢，从美观上来讲的话呢，这个东西肯定是看起来是这个非常 low 的，对吧？那么接下来我们看下 s， ok， 没错啊，那具体细节的话呢，我们这些东西的话呢，他都是可以抗皱 s， 他自动就帮我们按照我们代码的格式化的标准来给我们格式化了啊，这个的话呢，是非常好用的。 好了，那么这个插件我们就给他简单介绍这里啊，那么接下来我们就开始给大家去做一些呃这个 vs code 里面的一些相关设置啊，希望我们在 呃开发项目的时候，写代码的时候能体验能够变得更好啊，甚至你可能在温度上面能体验到在苹果上面的一些呃系统级的一些这个 ui 啊，非常非常的好看的吧，而且用户体验也非常的棒，那么接下来我们下节课再给大家详细的。

有多少人现在还对着黑乎乎的命令行敲 cloud code 评论区扣个一，我看看有多少老实人？别折腾那个小黑框了，官方其实早把核武器塞进 vs code 了。是不是觉得命令行里看代码改动特别累？ cloud code 的 最佳实践绝对是在 vs code 里体验过，你就会爱上这种上帝视角。 左边工程文件目录一目了然，中间代码变动实时预览，改到哪里一眼便知。 三十秒安装指南，点开左边的扩展商店，输入 cloud code， 认准这个下载量最高，按 serpik 官方出品的插件，然后你的工程里就会出现这个黄色的小按钮，点一下就能使用。 光说不练假把式给你们看。一个炸裂的在 vs code 里打开一个 remotion 项目，扔给他一篇文章素材，输入这行命令。 接下来发生了什么？它自动触发了头脑风暴技能，它自动构思场景，决定画面该展示什么。它自动加载 remote skill， 开始写代码，它自己测试运行。最后给我交付了一个完整的黑客风视频。

给大家介绍一款 vs 扣的非常好用的代码提示补全插件，它比 vs 扣的自带的代码补全提示功能强大很多。它的名字叫 type nine， 直接在 vs 扣的插件面板中就可以搜索安装，你看它这个名字带了 a i 两个字，就说明它不简单了。 他可以根据你的代码来预测你将要输入的代码，如果他预测的对，直接按太不见，预测的内容就会变成输入的内容。如果预测的不对，按下 esc 键取消预测的代码，或者不用管他，你继续输入你的， 等到发现后续代码是预测正确的时候再按太不见。这个插件支持绝大多数主流的编程语言，同时他还支持很多其他的代码编辑器。不仅仅是 vs code， 那这款插件呢？还有收费的模式，不过免费的版本对于很多人来说已经很好用了。

不知道为什么，辛辛苦苦配置好 carson 自定义模型端点之后，开开心心的发出你好这个测试话语之后， carson 竟然罢工了，各位知不知道是什么原因？知道的话欢迎评论告知哦！那么我们不妨换一个方案， fisko 加口的 x 来替代 carson。 大家都知道 calculator 也是套 wordgo 的， 所以使用 wordgo 加 codex 插件是绝对没有问题的。 codex 是 openai 用于软件开发的编码代理，它可以帮助你编辑代码，理解不熟悉的代码库、 审查代码、自动化开发任务等。同样也支持 mcpos 图文输入等。通过配置也支持贵族流兼容 open ideos 的 大模型，比如酷狗专门 i g p t dsp 等。 接下来我们就来配置置顶一模。我们先从点击样式之后从三二 a 里获取 a p i t， 复制出来填入再点击继续进入到 codex 编码窗口，打开 codex 的 配置文件 config， 托 某复制以下内容到配置文件里，保存之后重启 windows go， 你就可以看见当前 codex 使用了自己定义的模型，模型显示卡斯特 gpt 五 codex。 接下来我们给他一些简单的任务，看他能否正常地执行。 很明显已经在执行了， 正在规划执行步骤。到这里是不是跟 qq 写代码是一样的？这个时候返回三二 a 控制台，效果也消耗了需要配置资料的麻烦。动动小手，一键三连，私信 codecs。

一般安装哪些插件？说一下。我的插件安装不多，你要是咱们学员的话，你在群里边问一下，估计比我的插件多。我的插件不多啊，我的插件很少。这个是一个正则的啊，有的时候一些正则我不会写了，我就从这里面查一查。呃，这个是从一名标签的。 这个东西不管它啊，这是一个书签儿。这 c 加加不管它啊，这个 c 的 不管它。这个东西好用啊， code runner， 它是用来直接运行代码的啊，就在 vs code 里边直接运行代码。 呃，这是一个画图的工具，下边是一些 english link， 这也是个画图工具。这就是经常同学问那个 ai 工具啊，我用的是 compiles。 这是一个图片的预览啊，预览图的，在 vsco 里边可以预览图片的表格里写个一比九元素是吧？给他一个 s r c 地址，那么指着这个地址呢，就预览图片。这是类似的一个自动提示的插件，这是一个路径自动提示的 creator， 应该都知道吧。这个是 project manager， 这个是可以把你当前的工程啊，相当于是进行收藏啊，放到相当一个收藏夹。这个是一个正折的预览，这是可以在 vs code 的 里边远程打开这个 github 的 仓库的。这个呢，是当时我教同学们那个网络的时候用的一个插件啊，主要是 在 vs code 的 里边进行一些。呃，翻译的啊，比如 s code 里边进行一些翻译成 css 啊，主要是教学用的。这个东西生态环境开发的时候一般很少用。 呃，这是那个 vtes 啊，有一期搞的一个测试框架，没啥了，你看我就没了。这是样配置文件的，这是那个 c s 原子化的，原子化提示的没了。我都用的很少啊，我插件很少。

欢迎观看本期视频，本期视频是和计算机偏向软件方面的一些新手，本期视频介绍 windows 简单使用便携简单的网页以及 c s s g s h t r l 浏览器之间的关系是怎么样的？ 呃，首先来看一下 windows 下载。哎， windows 我 简单就简单介绍一下，它就是，呃快捷便捷写软件的一个， 呃，要写写代码的一个软件啊，可以到，要可以到官网这里下载啊，或者输入这个地址 栏就可以下载了啊。直接搜 b s code 或者输入这个地址栏就可以下载这款软件了。下载好后，安装好后，然后就打开，呃，打开的界面是不不一定都是一样的，然后这里我是创建了一个文件夹 啊，你可以随便创建一个文件夹，然后就拖进去放进去就好了，就变成这个样子啊。然后左下角这里可以的，这里有个主题，还有颜色，主题可以设置你喜欢的喜欢的一些背景啊啊一些主题颜色 啊，调成你喜欢的风格好。然后呢，写写网页之前来看一张图， 浏览器啊提供标签和语法，然后开发者遵循语法规则，使用这些标签实现各种各样的页面，然后编辑好后把这个 编编辑好的一个 stm 文件交给浏览器去运行，浏览器就会干嘛就会把你的页面加载出来，就是这个意思啊， 所以网页的呃编网页编辑的基本规律就是使用浏览器提供的标签与法规范进行各种各样的网页开发，就是大概的就是这个意思啊，大概就是这意思。好，现在来进行简单的网页编辑。嗯，这里 点击空白区，右键新建文件夹，然后输入你的名字啊，就输入 index 吧，这个名字开发中 的，实际开发中也经常用的，就是取这个名字啊，就是规范的，然后后缀名呢？文件的后缀名就是 stml。 好， 这就创建好了一个 stml 文件。这个这个后缀 啊，这这个后缀名就代表了它是一个 stml 文件嘛，然后浏览器就会识别这个后缀名，然后进行 stml 文件的解析。 然后，然后怎么写呢啊？先输入一个英文版的感叹号啊，英文英文的感叹号，然后按住 enter 回车啊，然后就输入啊，你看都是标签嘛 啊，只不过有一些是单标签，有的有些啊，有些是双标签，有些是双包签啊，怎么直叠呢？就是这里鼠标放在旁边，他有个直叠按钮，你就双标签就可以直叠了啊，都可以直叠的， 这里最重要的是什么呢？就是这个包底啊，这就是我们这这个这里就是啊，按住 ctrl 加 斜杠，就是 ctrn ctrl 那 个键，然后加入那个这个斜杠啊，斜杠问号，旁边那个斜就是斜杠啊，就是加个斜杠，应该叫做 就可以完成注视了啊，就是完成注视了，这个注视就是可以帮助你。呃，帮助你。就是写信息的而已啊，写信息的而已。嗯，就是给你看的，给你看的意思。 这里就是写啊，使用写 html 页面标签，这里就是写 s 啊，这里就是写 html 的 页面标签的啊，这样就可以看嘛，完成页面的。那搭建啊，就可以搭建啊，页面的基本啊，基本也叫做结构吧啊，结构，有的结构 好，然后我来解释一下这些标签是啥意思啊？解释一下标签这是啥意思？你看，就是就是这个样子嘛。啊？提供标签语法，然后遵循之前语法规则啊，遵循这些标签能实现各种各样的页面啊，就是理解这些标签就就意味着就实现了一些共同嘛，对吧？ 然后这里是这这这一行标签就是就实现了一些共同嘛，对吧？然后这里是这这这一行标签就是 g m 文件的啊，然后这个标签呢， 就是里面的内容都是 html 的 内容，然后这个标签就是写写写那个页面标签的，就是搭建网页内容的啊，搭建网页基本框架的基本结构的基本结构的啊。然后这个 head 标签是什么意思呢？这个 head 标签 啊，就是配置一些配置一些信息，就是高速浏览器这一行，就是高速浏览器使用制服级。这个这个先简单了解一下就好了啊，这个是制服级啊，就是我要使用 utf 杠八。 嗯，其实这个不好说，这个实际上有点复杂啊，这个是 unico 的 unico 的 编码啊，就是 unico 的 这幅极 u t f 杠八的编码。这这这个就先暂时了解一下就好了。这个这就是，反正就是编码，就是这幅极啊，这幅极的意思。 这个这个就是什么意思呢？这个就是告诉浏览器我要适配啊，就是这，这个就是网这个屏幕的适配，就是你你这个页面可能在手机端运行，也可能在电脑端运行。然后 这个就是做一些设置的啊，这是做一些设置的。如果你不要它啊，就是注视掉它，它就不会被加载了嘛， 他那么浏览器就会智能适配啊，智能适配调节你这个页面的大小啊，页面内容的大小，你还有页面的宽度，然后如果是做下去了啊，写下去了，那么这个意思就是说你这个页面 啊，这这个属这个配置的意思，就不说你这个页面随宽度适配的宽度的，就是跟适配的宽度一样的意思啊，适配的宽度一样的意思 啊，你手机端就手机端的宽度，电脑端就电多面，电脑这边的宽度就电电脑这边的宽度，然后这个这个呢，这个配置是啥意思？就是说 你页面的内容随不随页面的宽度的变化和变化，比如，比如说我一个字在电脑这么大，在手机端呢，也基本上就是这么大这个意思啊。这结束简单了解一下就好了，这不是重重点内容啊。 然后假如，呃，还还有一个关键点，就是下载 linux server， linux server， linux server 这个插件能够帮助你快速在 vs code 里啊使用。就是就是在 vs code 里把你的网页放在浏览器上运行啊，放在浏览器上运行，但这就是这个意思，大家就是这个意思。好， 然后我们现在可以这这个开头标签是啥意思啊？改一下，试一下就知道了，就可以改成你喜欢的名字啊，你喜欢的名称，你喜欢的名称，然后右键啊，就是在这个区域右键，然后找到这个，你下载好，要下载好这个 live server 才才有的，然后就 open with live server 啊，打开了啊，打开了，你看这就是你的页面，看见没有？你喜欢的名称，看你喜欢的名称 就是这个这个功能就是这个意思啊，然后 body 标签呢？ body 标签，哦，对， body 标签。这里是写 hm 页面标签的嘛。好，那哪里写 css 啊？但应该是在这里写，在这里写的 带 style 标签。你啊，带 style 依旧是注视啊，在 style 标签这里写啊，这里就是写 css 样式 啊，样式啊，其实就是修改页修改什么标签的，呃，属性的啊，就是就是修改标签的属性的， 哎，应该叫做样式属性啊，样式属性啊，然后这哪里写 c e s 呢？就是，就先在这里啊，先在这里。先在这里写啊，先在这里写，这里依旧是注视啊。这里就是写 e s 的 啊，写 g s 的。 我们现在先写一个 html 标签好吧。呃，首先就是， 哎，这个页面标签他有很多种，但是本身都是盒子啊，但是初步化的一些属性就一开始那个属性不一样，还有名称不一样啊，这主要是为了 辅助而已。先先写一个 s 一 标签啊，就输入一个 s 一 啊，然后 enter 回车啊，他就帮你输入了这个标签了。然后 hello word 啊，页面标签基本都是这种双双双标签的啊，就是有头有尾的意思。然后右键啊，应该不用右键啊，直接运行就好了。那个 hello word 好， 来修改一下这个 hello word 的 样式属性啊，就是用 css。 怎么选择呢？先先用几个简单点的啊， 蛋挞。先用一个简单点的，我选择 h 一 这个这个标签，然后注的一个括号，然后我修改它的 color 属性是红色啊修改它的 color 属性是红色，然后，哎，它就真变成红色了，是吧？它就真变成红色了 啊，它就真变成红色了，是吧。然后这里 g s 呢，我就可以，它可以调用浏览器的一些功能啊， g s 浏览器通过一些形式去调用一些功能之后欢迎收看，欢迎收看收看，然后打开。呃，这里 刷新一下啊，我好欢迎收看啊，就显示了。好，所以那我最后再介绍一下这个关系啊，就是怎么样关系呢？就是 c s g s h g m l 浏览器期间的关系啊，可以发现是 st a m l 搭建好标签了， css 修改标签的 样式属性吗？然后就修改它的形状啊，颜色等等啊等等，然后 g s 就是 提供为标签提供各种各样的功能，这些空啊，提供个人就是添加一些功能，然后以及实现网页的其他功能，比如说网络请求数据处理之前 就是 e s。 就是 说，呃，让页面可以在在页面中调用浏览器的一些功能啊，调用浏览器的一些功能，但页面可以通过一些形式啊，页面就是面向用户的嘛，用户通过页面， 然后页面再通过 e s 就 可以调用这些功能了啊，调用这些功能就是这个，大致的就是这个意思啊，一个 html 文件对应一个 浏览器的一个页面啊，就是 v s code 的 简单使用啊，并且简单的网页 css 和 g s html 文件，而 html 和浏览器之间的啊，之间的这个关系啊，就到这里啊，本期视频就结束了啊，欢迎您的收看。