Skip to content

wdsandeep/Emmet-Guide-for-Beginner

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
readme.md
readme.md
 
 

Repository files navigation

Emmet Guide for Beginner

!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

html:5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

doc

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

!!!

<!DOCTYPE html>

nav>ul>li

 <nav>
        <ul>
            <li></li>
        </ul>
    </nav>

div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

div+div>p>span>em^bq

<div></div>
<div>
    <p>
        <span><em></em></span>
        <blockquote></blockquote>
    </p>
</div>

div+div>p>span>em^^bq

<div></div>
<div>
    <p><span><em></em></span></p>
    <blockquote></blockquote>
</div>

div#header or #header

<div id="header"></div>

div.title or .title

<div class="title"></div>

form#search.width

<form action="" id="search" class="width"></form>

p.class1.class2.class3

<p class="class1 class2 class3"></p>

ul>li*6

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul>li.item$*6

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
</ul>

h$[title=item$]{This is a Header $}*4

    <h1 title="item1">This is a Header 1</h1>
    <h2 title="item2">This is a Header 2</h2>
    <h3 title="item3">This is a Header 3</h3>
    <h4 title="item4">This is a Header 4</h4>

ul>li.item$$*7

<ul>
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
    <li class="item04"></li>
    <li class="item05"></li>
    <li class="item06"></li>
    <li class="item07"></li>
</ul>

ul>li.item$@-*7

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

ul>li.item$@2*7

<ul>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
    <li class="item8"></li>
</ul>

p[title="Hello World"]

<p title="Hello World"></p>

td[rowspan=2 colspan=3 title="hello"]

<td rowspan="2" colspan="3" title="hello"></td>

[a='value1' b="value2"]

<div a="value1" b="value2"></div>

a{Click Me}

<a href="">Click Me</a>

p>{click me}+a{something}+{...}

<p>click me<a href="">something</a>...</p>

lorem

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa natus omnis cum reprehenderit, officia ea, atque excepturi nobis quasi molestias ad! Aliquam delectus alias quaerat, aliquid eaque repudiandae omnis quisquam.

p*8>lorem

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id pariatur vero odit earum. Nesciunt ut autem debitis incidunt necessitatibus magnam maxime ipsum repellat, recusandae facilis hic atque id ipsam quo.</p>
    <p>Ex praesentium porro reiciendis pariatur adipisci aliquid mollitia voluptatem minima! Doloremque delectus nihil hic, ipsam veniam dolorum commodi ullam quaerat alias fugit facere quibusdam earum? Quis in quos voluptate. Nobis?</p>
    <p>Iste aperiam fugit, doloribus voluptas excepturi ipsum facere. Quos voluptates eum error impedit accusantium beatae culpa quibusdam, quod vel delectus, illo possimus repellat repudiandae. Ratione distinctio quis ullam non iusto.</p>
    <p>Laudantium neque, consectetur ut id exercitationem ad accusamus corporis aliquid eum expedita maxime voluptate nesciunt illum necessitatibus cumque magnam quibusdam. Dolores a vero quibusdam animi, repudiandae fuga tenetur non distinctio?</p>
    <p>Consectetur animi tenetur minima nemo, ad hic in soluta, ullam molestias nam voluptatum voluptate quae commodi, mollitia suscipit reprehenderit cumque eveniet dolore facere. Amet praesentium sit repudiandae fugiat sequi porro.</p>
    <p>Ut odit quo animi optio nesciunt inventore vitae ipsa dolorum minus ullam illum possimus consequatur fugiat sed quos autem earum, numquam facilis officia dolore? Officiis nihil pariatur id consequatur quos?</p>
    <p>Saepe, nemo amet non commodi ipsa velit impedit ut labore. Ratione repellendus mollitia cupiditate veritatis at delectus cumque doloremque, distinctio nemo voluptatem, aliquid nostrum minima dolor atque suscipit, labore culpa?</p>
    <p>Aspernatur, placeat rem. Libero neque quidem rerum, totam id suscipit, aperiam assumenda quos animi vero in explicabo nostrum error minima debitis! Omnis, deserunt. Accusamus earum expedita exercitationem? Esse, quam nam!</p>

ul.generic-list>lorem10.item*5

    <ul class="generic-list">
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, sunt.</li>
        <li>Optio, magnam nostrum. Molestiae necessitatibus sit ipsum dolor rerum et.</li>
        <li>Nostrum laboriosam laborum consectetur sint non placeat ipsum ab temporibus?</li>
        <li>Obcaecati a ad ipsam iure facilis ea illum inventore modi.</li>
        <li>Dolore natus odio dicta vel atque excepturi fugiat deleniti non!</li>
    </ul>

em>.new

<em><span class="new"></span></em>

ul>li.new or ul>.new

<ul>
    <li class="new"></li>
</ul>

ul>.new*5

<ul>
    <li class="new"></li>
    <li class="new"></li>
    <li class="new"></li>
    <li class="new"></li>
    <li class="new"></li>
</ul>

table>.row>.new

<table>
    <tr class="row">
        <td class="new"></td>
    </tr>
</table>

div>(header>ul>li*3>a)+footer>h1

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <h1></h1>
    </footer>
</div>

div>(header>ul>li*3>a)+(footer>h1>p)

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <h1>
            <p></p>
        </h1>
    </footer>
</div>

em>.list

<em><span class="list"></span></em>

btn

<button></button>

hdr

<header></header>

ftr

<footer></footer>

Create a html 5 page with some div and classes

html:5>div.container>(nav.navbar.navbar-inverse>div.navbar-header>a.navbar-brand{Speedy}+ul.nav.navbar-nav>li*2>a.menu-${Menu Item $})+(div.jumbotron.text-center>h1{Speedy HTML}+p+a#go-button.btn.btn-danger{Learn More})+(div.row.text-center>(div.col-sm-4>div.info-box>span.glyphicon.glyphicon-fire+h2{Lions}+p)+(div.col-sm-8>div.info-box>span.glyphicon.glyphicon-send+h2{Emmmet}+p))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-inverse">
            <div class="navbar-header">
                <a href="" class="navbar-brand">Speedy</a>
                <ul class="nav navbar-nav">
                    <li><a href="" class="menu-1">Menu Item 1</a></li>
                    <li><a href="" class="menu-2">Menu Item 2</a></li>
                </ul>
            </div>
        </nav>
        <div class="jumbotron text-center">
            <h1>Speedy HTML</h1>
            <p></p>
            <a href="" id="go-button" class="btn btn-danger">Learn More</a>
        </div>
        <div class="row text-center">
            <div class="col-sm-4">
                <div class="info-box">
                    <span class="glyphicon glyphicon-fire"></span>
                    <h2>Lions</h2>
                    <p></p>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="info-box">
                    <span class="glyphicon glyphicon-send"></span>
                    <h2>Emmmet</h2>
                    <p></p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

a

<a href=""></a>

a:link

<a href="http://"></a>

a:mail

<a href="mailto:"></a>

##br

<br>

link

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

link:css

<link rel="stylesheet" href="style.css">

link:print

<link rel="stylesheet" href="print.css" media="print">

link:favicon

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

link:touch

<link rel="apple-touch-icon" href="favicon.png">

link:rss

<link rel="alternate" href="rss.xml" type="application/rss+xml" title="RSS">

script

<script></script>

script:src

<script src=""></script>

img

<img src="" alt="">

source:media

<source media="(min-width: )" srcset="">

source:media:sizes

<source media="(min-width: )" srcset="" sizes="">

ifr

<iframe src="" frameborder="0"></iframe>

area

<area shape="" coords="" href="" alt="">

area:c

<area shape="circle" coords="" href="" alt="">

area:d

<area shape="default" coords="" href="" alt="">

area:p

<area shape="poly" coords="" href="" alt="">

form

<form action=""></form>

form:get

<form action="" method="get"></form>

form:post

<form action="" method="post"></form>

label

<label for=""></label>

input

<input type="text">

input:b

<input type="button" value="">

input:search

<input type="search" name="" id="">

input:email

<input type="email" name="" id="">

input:url

<input type="url" name="" id="">

button:s or button:submit or button[type=submit]

<button type="submit"></button>

button[disabled=true]

<button disabled="true"></button>

link

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

link:css

<link rel="stylesheet" href="style.css">

link:favicon

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

link:print

<link rel="stylesheet" href="print.css" media="print">

link:touch

<link rel="apple-touch-icon" href="favicon.png">

link:rss

<link rel="alternate" href="rss.xml" type="application/rss+xml" title="RSS">

meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

meta:vp

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

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published