blog-25-4-25

# vscode # 前端 #记录​

2025-4-25：

- 困，但学习（奶奶滴，为什么这么困：正确做法是有条件就暂时爬下来闭目养神一会儿）

- 儿童放学归来早，忙趁东风放纸鸢。‍

---

工具：

- 写代码的：vscode

- 使得代码能被PC看懂的：浏览器（所以它其实是一个开发工具哦）

- HTML、CSS已经知道了一大半，尝试学习node.js（JS的运行环境，居然前后端都能写，它也是图灵完备语言呢；当初node.js下载配环境倒是麻烦，但理解了环境变量的意义和node.js瞎下载包的管理策略，就好多了）

- 总是忘记，企业开发中不会这样从头开始，而是使用框架(vue之类的），相当于平地起高楼的快速搭建工具了。

技能get:

- vscode快捷键：由此可分为vscode本身的快捷键、vscode插件的快捷键（每次更新，每安装一个插件快捷键都会不同啦）“但键不在多，够用则行，又不是吉尼斯世界纪录，脑子是索引而不是死板的存储库”

- HTML插件：Open in Browser/Live Server，差不多效果，但后者更加高级（简单概括：使用的前端协议不同，一个file协议，一个http协议）

记录：

shift+！	快速HTML骨架（vscode针对HTML文件的)
CTRL+/	快速对行注释（vscode快捷键，不是插件的，所以通用）
alt+b	快速在浏览器中打开文件，看渲染效果

与网络的交互：

HTML/CSS/JS都可以引入本地/在线资源。

- 要是企业的，一般是本地的，毕竟网络资源没了会影响到自己网站的显示啊（这里指的是不属于自己控制的第三方资源，要是自己管理的，可以）。个人的化，直接偷个懒倒是很方便

- 可以引用的资源多种多样，html\css\js代码、图片、音乐、图标以及API等等好多内容

- 这些内容又不是代码执行的，究其本质是告诉浏览器该做什么，给浏览器投入一堆输入（代码），然后浏览器执行（http请求在线资源、渲染…）后输出结果（所看到的页面），所以，前端代码本质上是描述给浏览器网页内容浏览器程序知道后在CPU上跑，最后得出结果给用户。（所以，硬件，永远的神）

HTML	引入本地/在线CSS/JS、引入其他资源
CSS	引入其他本地/在线CSS、引入其他资源
JS	引入其他本地/在线JS、引入其他资源

本地/在线引入代码	方法总结： - HTML引入CSS/JS：外链式、嵌入式 、行内式 - CSS引入CSS:@import、CSS原生变量 - JS 引入JS: import/export、动态加载JS	本地引入： 都支持
		在线引入： HTML只能外链式引入，行内和嵌入不行 CSS支持@import JS支持动态加载、模块
其他资源	图片/视频/音频、字体/图标、JSON/数据文件、Web Worker/Service Worker….

骨架研究：

- 算得上是浏览器用来定位网页内容的大纲，所以才叫骨架嘛。

- 骨架承担的功能也多，除了给浏览器提供定位，也配置了相关初始设置，比如HTML版本、支持语言、编码模式…

---

正链:

​​​​​​专栏 · 源码解释

专栏 · 源码