Question

我正在寻找用于自动完成HTML结构的快捷键。

例如，当我输入html并按几个键时，应显示以下结构：

<!DOCTYPE html>
<html>
  <head>
    <title> </title>
  </head>
  <body>

  </body>
</html>

注意：我使用的是MAC

Answer 1

也许您应该查看IDE的模板，例如在Sublime Text中我有snippets我建议您查看。

但是，您可以使用Emmet等工具包使用另一个工作流程。您在Emmet中特别需要的功能称为＆＃34; Expand Abbreviation＆＃34;。从本质上讲，你输入＆＃34; CSS喜欢＆＃34;字符串，将您的插入符号放在字符串的末尾并按Tab键，Emmet会将其解析为HTML。例如，以下字符串：

!doctype>html>(head>title)+(body)

将编译为上面的（尾部结束标记为</!doctype>，这有点尴尬。然而 Emmet非常聪明，我们可以更进一步..所以扩展：

html:5

实际上会给你

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

这几乎就是你要找的东西！如果你想进一步采取措施，Emmet还支持扩展!，这是html:5的别名。只有一个角色。

查看Emmet's cheat sheet了解更多信息。

Answer 2

在TextMate中，这些称为片段，可以很容易地为它们分配制表符完成快捷方式;

在TextMate 2菜单中选择Bundles»Edit Bundles ....

选择要添加代码段的捆绑包，例如HTML。按Cmd-N创建新的捆绑项目，然后选择Snippet。
选择菜单操作
按Command + N创建新项目，选择代码段。
在文本区域中复制并粘贴模板。
在抽屉上有一个“Tab Trigger”字段，在那里输入“html”。

保存。

现在，当您输入“html”并按Tab键时，将插入您的代码段。

More info about creating a snippet.

注意：我在你的身体标签之间添加了“$ 0”。这是制表位，光标将显示在$ 0。您可以阅读有关advanced Snippet features here的更多信息。

在我的拙见中;

html没有标签已经完成，因为没有好的方法来预测你的html模板中你想要的东西。

当然，Emmet（正如@bitten在他的回答中建议的那样）给你某些东西，但html:5做得太多了; HTML5不强制要求html，head或body标记。见this Stack post about HTML5's optional tags。有关这种方法的一些保证担忧，请参阅bitten的评论。

那就是说，我确实使用Emmet，值得研究。

至于在TextMate中插入HTML5的doctype，只需输入doctype和Tab。

Answer 3

单击！在选项卡之后，您将获得结构。

Answer 4

”！键入后，按键盘上的“ TAB”键。

自动完成HTML结构的快捷键

4 个答案: