自动完成HTML结构的快捷键

Question

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

例如，当我输入

html

并按几个键时，应该出现以下结构：

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

  </body>
</html>

注意：我使用的是 MAC

Answer 1

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

Answer 2

也许您应该研究一下 IDE 的模板，例如在 Sublime Text 中，您有 snippets，我建议您研究一下。

但是，您可以使用Emmet 等工具包来使用另一种工作流程。您在 Emmet 中特别想要的功能称为“扩展缩写”。本质上，您输入“类似 CSS”的字符串，将脱字符号放在字符串末尾，然后按 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 的备忘单了解更多细节。

Answer 3

在 TextMate 中，这些称为片段，可以轻松地为它们分配选项卡完成快捷方式；

在 TextMate 2 菜单中选择

Bundles

»

Edit Bundles

…。

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

注意：我在您的正文标签之间添加了“$0”。这是一个制表位，您的光标将出现在 $0 处。您可以在此处阅读有关高级片段功能的更多信息。

以我的拙见；

html

尚未完成制表符，因为没有好的方法来预测您在 html 模板中想要的内容。

当然，Emmet（正如 @bitten 在他的回答中建议的那样）给了你 一些东西 ，但是

html:5

做得太多了； HTML5 不强制要求使用

html

、

head

或

body

标签。请参阅此堆栈帖子，了解 HTML5 的可选标签。请参阅 bitten 的评论，了解对此方法的一些合理担忧。

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

至于在 TextMate 中插入 HTML5 的文档类型，只需键入

doctype

和 Tab。

Answer 4

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

Answer 5

在 PyCharm 中的 index.html 中，我输入感叹号“！”，然后按 TAB 键并插入 HTML 样板代码块。