ctrl+shift+p filters: :st2 :st3 :win :osx :linux

更新时间:2020-09-21 19:47:21

Browse

HTML Snippets

by joshnh ALL Top 100

A set of custom HTML snippets for Sublime Text

Labels snippets

Details

  • 2015.10.27.22.15.59
  • github.​com
  • github.​com
  • 5 years ago
  • 1 hour ago
  • 8 years ago

Installs

  • Total 201K
  • Win 135K
  • Mac 38K
  • Linux 28K
Sep 21 Sep 20 Sep 19 Sep 18 Sep 17 Sep 16 Sep 15 Sep 14 Sep 13 Sep 12 Sep 11 Sep 10 Sep 9 Sep 8 Sep 7 Sep 6 Sep 5 Sep 4 Sep 3 Sep 2 Sep 1 Aug 31 Aug 30 Aug 29 Aug 28 Aug 27 Aug 26 Aug 25 Aug 24 Aug 23 Aug 22 Aug 21 Aug 20 Aug 19 Aug 18 Aug 17 Aug 16 Aug 15 Aug 14 Aug 13 Aug 12 Aug 11 Aug 10 Aug 9 Aug 8 Aug 7
Windows 27 29 27 33 28 30 42 42 23 28 39 29 37 34 29 29 18 23 25 42 26 45 41 23 46 31 37 38 37 28 30 35 31 35 26 31 23 24 29 33 31 40 30 20 22 22
Mac 2 2 2 3 5 3 3 5 3 2 1 3 3 2 5 2 0 2 3 3 5 3 4 0 4 7 2 6 7 0 1 5 3 4 7 4 3 1 4 3 3 3 5 5 0 4
Linux 2 4 6 6 6 5 4 6 7 8 7 7 7 7 8 1 4 4 3 9 8 8 3 3 3 8 3 3 6 2 8 7 7 7 5 7 13 3 9 3 5 2 2 10 11 5

Readme

Source
raw.​githubusercontent.​com

Sublime Text HTML Snippets

A work in progress.

Type the snippet shortcode and then press Tab to complete the snippet.

The snippets are listed below in alphabetical order. The '$1' indicates the position of the caret/s. Some snippets have been set up so that pressing Tab jumps the caret/s to the next predefined spot. It's a little hard to explain, but any snippet that has a $1/$2/$3/etc. uses this technique.

Feel free to play with, alter, expand, or ruin these snippets as you please. I only ask that if you come up with an incredibly handy snippet, or simply one that I have missed, that you let me know (via email, Twitter or GitHub) so that I can improve these for everybody. Thanks!

IMPORTANT: If you are also using Emmet, add the following to Emmet's user settings file:

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


a

<a href="$1">$2</a>

comm

cond

doctype

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="$1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>${2:Untitled}</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="author" href="humans.txt">
    </head>
    <body>
        $3
        <script src="js/main.js"></script>
    </body>
</html>

dummy

One morning, when Gregor Samsa woke from troubled dreams, he found himself
transformed in his bed into a horrible vermin. He lay on his armour-like back,
and if he lifted his head a little he could see his brown belly, slightly domed
and divided by arches into stiff sections. The bedding was hardly able to cover
it and seemed ready to slide off any moment. His many legs, pitifully thin
compared with the size of the rest of him, waved about helplessly as he looked.
"What's happened to me? " he thought.

fig

<figure>
    <img src="$1" alt="$2">
    <figcaption>$3</figcaption>
</figure>

ga

<script>
    var _gaq = [['_setAccount', '${1:UA-XXXXX-X}'], ['_trackPageview']];
    (function(d, t) {
        var g = d.createElement(t),
            s = d.getElementsByTagName(t)[0];
        g.src = '//www.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g, s);
    }(document, 'script'));
</script>

ga2

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', '${1:UA-XXXX-X}');
    ga('send', 'pageview');
</script>

img

<img src="$1" alt="$2">

jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

meta

<meta charset=utf-8>
<meta name=description content="$1">
<meta name=viewport content="width=device-width, initial-scale=1">

nav

For when using inline-block.

<nav class="$1">
    <ul>
        <li><a href="#">$2</a></li><li><a href="#">$3</a></li><li><a href="#">$4</a></li><li><a href="#">$5</a></li>
    </ul>
</nav>

nav2

<nav class="$1">
    <ul>
        <li><a href="#">$2</a></li>
        <li><a href="#">$3</a></li>
        <li><a href="#">$4</a></li>
        <li><a href="#">$5</a></li>
    </ul>
</nav>

ol

<ol>
    <li>$1</li>
    <li>$2</li>
    <li>$3</li>
    <li>$4</li>
</ol>

script

<script src="$1"></script>

shiv

style

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

ul

<ul>
    <li>$1</li>
    <li>$2</li>
    <li>$3</li>
    <li>$4</li>
</ul>

inp:text

<input type="text">

inp:tel

<input type="tel">

inp:radio

<input type="radio">

inp:check

<input type="checkbox">

inp:email

<input type="email">

inp:pass

<input type="password">

inp:submit

<input type="submit">
<style type="text/css">$1</style>