sublime如何设定自动补全html头部信息

Sublime如何设定自动补全HTML头部信息

无论是开发网站还是学习编程,HTML都是必不可少的一部分。在编写HTML文档时,每一个页面都需要一个head标签,用来放置网页的一些元数据和资源文件链接等信息。这些头部信息的编写十分繁琐,使用Sublime Text中的自动补全功能可以帮助我们快速完成。本文将介绍如何在Sublime Text中设定自动补全HTML头部信息。

1.打开Sublime Text

首先我们需要打开Sublime Text编辑器。

2.进入菜单栏

在窗口上方的菜单栏中,选择"Tools" > "Developer" > "New Snippet"。你也可以通过按下"ctrl+shift+p",在输入框中搜索"New Snippet"来打开该页面。

3.创建新的代码片段

点击打开的页面右下角的"+"号按钮,或者通过菜单栏中的"File" > "New Snippet",来创建一个新的代码片段。

4.编辑代码片段

在文本框中输入以下代码:

${1:Title}

${0}

]]>

html5

text.html

]]>

这段代码是一个HTML5的头部信息,其中包含了基础的doctype、html、head、meta、title、link等元素。你也可以根据需要修改这个模板,添加或删除元素。

注:该代码是XML格式,需要将其根据需要复制到XML配置文档。 右键点击将文本框中的内容复制到剪贴板,然后打开一个新的窗口,将代码粘贴到其中。然后保存文件并将文件命名为"html5.sublime-snippet"。该文件会被保存到Sublime Text的User文件夹中。

5.保存新的代码模板

保存文件之后,该代码模板就可以在Sublime Text中使用了。打开一个新的HTML文件,在页面的开头输入"html5",然后按下Tab键。Sublime Text就会自动的将代码模板插入到当前光标位置。

例如,在新建的HTML文件中,你可以输入以下代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My New Page</title>

<link rel="stylesheet" href="">

</head>

<body>

</body>

</html>

然后按下Tab键,Sublime Text就会自动的将模板中的内容填充到当前光标位置,然后你就可以开始编辑你的HTML文件了。

6.自定义代码模板

如果你想要使用其他的HTML模板,可以自己定义一个新的代码模板。只需要修改上面提到的代码模板中的元素和属性,就可以根据需要创建自己的头部信息代码模板。

总结

Sublime Text是一个功能强大的文本编辑器,自动补全是其中一个十分有用的功能。在编写HTML文档时,使用代码模板可以帮助我们快速地完成头部信息的编写工作。通过设定自动补全功能,可以极大地提高我们的工作效率。