sublime如何快捷HTML代码片段

在编写HTML代码时，使用代码片段可以大大提高工作效率，作为一个优秀的文本编辑器，Sublime Text提供了强大的代码片段功能，可以帮助我们快速插入常用的HTML结构，下面，我将详细介绍如何在Sublime Text中创建和使用HTML代码片段。

一、安装Package Control

我们需要在Sublime Text中安装Package Control，以便后续安装和管理插件，打开Sublime Text，按下`Ctrl+``（反引号），在弹出的控制台中输入以下代码：

```python

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

```

按下Enter键，Package Control将自动安装，安装完成后，重新启动Sublime Text。

二、安装Emmet插件

Emmet是一款强大的前端开发工具，可以让我们使用简短的代码快速生成复杂的HTML结构，通过Package Control安装Emmet插件：

1.按下`Ctrl+Shift+P`，在弹出的命令面板中输入“Install Package”；

2.选择“Package Control: Install Package”，等待插件列表加载完成；

3.在插件列表中输入“Emmet”，然后选择“Emmet”进行安装。

三、创建HTML代码片段

1.打开Sublime Text，选择“工具”>“新建代码片段”；

2.在弹出的代码片段编辑窗口中，输入以下内容：

```html

html结构内容

]]>htmltext.html

```

3.将`html结构内容`替换为你需要插入的HTML代码；

4.设置`tabTrigger`，这是我们触发代码片段的快捷键，`html`表示按下`html`后跟Tab键即可触发该代码片段；

5.设置`scope`，用于指定代码片段在哪些文件类型中生效，这里设置为`text.html`，表示仅在HTML文件中生效。

四、使用HTML代码片段

1.在Sublime Text中新建一个HTML文件；

2.输入`html`，然后按下Tab键，即可看到刚刚创建的HTML代码片段被插入到文件中。

以下是几个常见HTML代码片段的示例：

1. 基本HTML结构：

```html

$2

]]>html5text.html

```

2. 带有id和class的div：

```html

$3