每个人都有一个属于自己的星空

言及学习制作网站之道，古人有云：“工欲善其事，必先利其器。”因此，迈出学习网站制作的第一步，便是深入了解那些最为普遍使用的代码编辑器——text编辑器。

text3的官方下载地址

https://www..com/

下载成功后打开就是下面那样子。

首先来了解一下网站代码的基本布局。

实现代码快速生成的一种途径是：创建包含特定 id 和 class 属性的HTML标签。

E代表HTML标签

E#id 代表id属性

E.class 代表class属性

一个最基本的网站代码就实现了。

尝试在text中运用先前提及的快捷指令，然而并未产生预期的效果，这究竟是怎么回事呢？

因为你没有安装插件呀。

安装插件

插件可进行安装sublime text js 格式化，通常情况下，新安装的text并未配备相应组件；因此，该组件的安装流程具体如下：

启动控制台（使用快捷键Ctrl加反引号），接着输入相应代码，并按下回车键。

执行以下操作：首先，定义文件路径和文件名；其次，创建一个写入模式打开的文件；接着，读取指定URL的网页内容；最后，将读取到的内容写入到文件中。

接着，重新启动text程序，若在菜单->选项中观察到相应的标识，即表明安装已经顺利完成。

若在安装过程中遇到故障，您可将安装压缩包直接展开至指定文件夹内（操作路径：通过菜单进入，依次选择）。

那么刚才那个插件的是？

Emmet，曾以Zen命名，具备高效进行HTML与CSS代码编辑的功能。

插件下载地址：https://.com//emmet-

其他一些较常用的插件：

- ，用于格式化js文件。默认快捷键Ctrl+Alt+F。

插件下载地址：https://.com//

在CSS样式中，属性排序遵循一定的规则，即优先考虑外部样式sublime text js 格式化，其次是自身样式，最后是内部样式。其中，逗号符号被用于属性之间的排列。

插件下载地址：https://.com//-for-

的预览效果如下：

CSS，这一工具旨在实现CSS属性的展开与折叠功能，能够将CSS代码压缩成单行，亦或将其展开成多行以供查看。

在 Text 应用中，您可以通过内置的颜色选择器来挑选颜色。此功能的快捷操作是按下 Ctrl / Cmd 键加 Shift 键再加 C 键。

在左侧，您可以突出显示匹配的括号、引号和标签，例如括号、引号、花括号以及双引号和单引号，甚至包括自定义的标签。安装完成后，无需进行任何设置，插件便会自动启动并生效。

插件的相关介绍已结束，实际上，网络上还有大量插件可供选择，例如，您可以通过百度搜索“text插件”。

快捷键

除了安装插件之外， text的速写方法当然还要加上快捷键。

使用Ctrl+D组合键，可以实现选词功能（连续按下此快捷键，可以逐个选择并编辑连续出现的相同文本）。

Ctrl+J： 合并行（已选择需要合并的多行时）

Ctrl+L：选择整行（按住-继续选择下行）

Ctrl+M： 光标移动至括号内开始或结束的位置

Ctrl+K+U：改为大写

Ctrl+K+L：改为小写

Ctrl+Enter： 插入行后（快速换行）

Ctrl+/：注释当前行

Ctrl+Shift+/：当前位置插入注释

使用Ctrl+Alt+/组合键可以实现对代码的注释功能，同时该操作会使光标自动定位至注释文本的首行，便于编写注释说明。

Ctrl+Shift+A：选择当前标签前后，修改标签用的

Ctrl+U：还原，撤销光标位置

Ctrl+J：选择标签内容

Ctrl+F：查找内容

Ctrl+Shift+F：查找并替换

小番外

text 可以用来做什么？仅仅只是写网站代码的载体而已吗？

它还可以用来写其他代码，不只是网页哦。

就主要是用来写代码的工具对吧，它可以生成网页吗？

是的，但通常情况下，人们是用来编写网页的。你只需在那个编辑器中点击右键，选择在浏览器中打开，随后就会看到一个网页界面。

原来如此…

惊不惊喜！

你看懂了吗？是不是跃跃欲试，想去做一个属于自己的网页呢？

如有疑问或需进一步解释，欢迎在后台留言或于推文评论区提问。若你对技术领域感兴趣，想要结识技术界的小伙伴，同样可以通过留言的方式表达你的意愿。

小预告

敬请期待我们下次分享的技术精华，届时将为大家带来网页制作入门教程，讲解如何构建一个基础的静态网页。对此感兴趣的朋友们，可千万不要错过这个机会哦！

内容 / 前端胖知

音乐 /  A Story-

图片 / 前端胖知＆花瓣网

如有侵权请联系删除！