A Set of HTML Snippets for Sublime Text 2

最新推荐文章于 2025-08-11 22:30:00 发布

原创最新推荐文章于 2025-08-11 22:30:00 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #application #stylesheet #library #windows

web前端专栏收录该内容

144 篇文章

订阅专栏

本文分享了一系列Sublime Text中常用的HTML片段，这些片段能够帮助开发者快速构建HTML文档结构，提高编码效率。文章还提供了安装指导及如何避免与Emmet冲突的设置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

A Set of HTML Snippets for Sublime Text 2

DOWNLOAD

Considering how popular my CSS snippets for Sublime Text have been, I thought I’d better collate and release some of the HTML snippets I use regularly. Put simply, they allow you to turn this:

doctype

Into this:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="$1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>$2</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        $3
        <script src="js/main.js"></script>
    </body>
</html>

Note: the dollar signs indicate tab markers.

Further details can be found on the GitHub repository. If you have any suggestions, send a pull request, or let me know in the comments below.

Installation instructions

The easiest way to install these snippets is through Package Control; simply search for ‘HTML snippets’. If you don’t use Package Control (you really should, it’s awesome) then you can copy the set into the Sublime Text packages folder. On a Mac this can be found in:

Library > Application Support > Sublime Text 2 > Packages

For Windows, it can be found in:

C: > Users > {username} > AppData > Roaming > Sublime Text 2 > Packages.

Stay tuned for a more in-depth article on Sublime Text, including why I use it, a few hidden tricks, some of my favourite packages, and other work flow enhancements!

Update

If you are also using Emmet then you need to add the following to Emmet’s user settings file to avoid conflicts:

"disabled_single_snippets": "fig meta nav ol script style ul"

TWEET THIS

A Set of HTML Snippets for Sublime Text 2

Installation instruc­tions

Update

Installation instructions