前端神器Emmet插件使用技巧

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- meta:utf  快捷鍵-->
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <!-- <meta charset="UTF-8"> -->
  <!-- meta:vp  快捷鍵-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <!-- meta:compat  快捷鍵-->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->

  <!-- link (快捷鍵), 然后tab  css腳本-->
  <!-- 或  link:css -->
  <link rel="stylesheet" href="bootstrap.css">
  <!-- <link rel="stylesheet" href=""> -->

  <!-- script:src -->
  <script src="bootstrap.js"></script>

  <title>Document</title>
</head>
<body>
  <!-- html:5  或者 ! 可以生成html5文檔結(jié)構(gòu) -->

  <!-- link:css,  script:src -->

  <p>1. 生成帶類樣式的標(biāo)簽</p>
  <!-- p.info -->
  <p class="info"></p>
  <!-- div.red -->
  <div class="red"></div>

  <p>2. 生成帶ID的標(biāo)簽</p>
  <!-- h2#header -->
  <h2 id="header"></h2>
  <!-- div#header -->
  <div id="header"></div>
  <!-- #header -->
  <div id="header"></div>

  <p>3. a標(biāo)簽</p>
  <!-- a:link  生成鏈接地址-->
  <a href="http://"></a>
  <!-- a:mail  生成郵箱地址-->
  <a href="mailto:"></a>



  <p>4 根據(jù)標(biāo)簽之間的位置關(guān)系來(lái)生成標(biāo)簽</p>

  <!-- 生成同級(jí),兄弟標(biāo)簽   h2.header+p.info -->
  <!-- h2.header+p.info -->
  <h2 class="header"></h2>
  <p class="info"></p>

  <!-- 后代標(biāo)簽,也叫下線標(biāo)簽: ul>li  ul>li*3-->
  <!-- ul>li -->
  <ul>
    <li></li>
  </ul>

  <!-- ul>li*3 -->
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <!-- 生成當(dāng)前標(biāo)簽的父級(jí),也叫上級(jí)標(biāo)簽 h2>span^p.info-->
  <!-- h2>span^p.info -->
  <h2><span></span></h2>
  <p class="info"></p>


  <p>5  你也可以有在生成的標(biāo)準(zhǔn)的時(shí)候,同時(shí)創(chuàng)建內(nèi)部的文本</p>
  <!-- {} -->
  <!-- a{PHP中文網(wǎng)} -->
  <a href="">PHP中文網(wǎng)</a>

  <!-- p[title="這是一段說(shuō)明文字"] -->
  <p title="這是一段說(shuō)明文字"></p>

  <!-- a[]{PHP中文網(wǎng)} -->
  <a >PHP中文網(wǎng)</a>


  <p>6 重復(fù)生成功能: * </p>
  <!-- ul>li*5 -->

  <!-- 快速生成一個(gè)有8個(gè)列表項(xiàng)的導(dǎo)航 -->
  <!-- ul.list>li.item*8>a{導(dǎo)航} -->
  <ul class="list">
    <li class="item"><a href="">導(dǎo)航</a></li>
    <li class="item"><a href="">導(dǎo)航</a></li>
    <li class="item"><a href="">導(dǎo)航</a></li>
    <li class="item"><a href="">導(dǎo)航</a></li>
    <li class="item"><a href="">導(dǎo)航</a></li>
    <li class="item"><a href="">導(dǎo)航</a></li>
    <li class="item"><a href="">導(dǎo)航</a></li>
    <li class="item"><a href="">導(dǎo)航</a></li>
  </ul>


  <p>給標(biāo)簽自動(dòng)添加編號(hào)或排序: $, @</p>
  <!-- ul.list>li.item*8>a{導(dǎo)航$} -->
  <ul class="list">
    <li class="item"><a href="">導(dǎo)航1</a></li>
    <li class="item"><a href="">導(dǎo)航2</a></li>
    <li class="item"><a href="">導(dǎo)航3</a></li>
    <li class="item"><a href="">導(dǎo)航4</a></li>
    <li class="item"><a href="">導(dǎo)航5</a></li>
    <li class="item"><a href="">導(dǎo)航6</a></li>
    <li class="item"><a href="">導(dǎo)航7</a></li>
    <li class="item"><a href="">導(dǎo)航8</a></li>
  </ul>

  <!-- ul.list>li.item*8>a{導(dǎo)航$$} -->
  <ul class="list">
    <li class="item"><a href="">導(dǎo)航01</a></li>
    <li class="item"><a href="">導(dǎo)航02</a></li>
    <li class="item"><a href="">導(dǎo)航03</a></li>
    <li class="item"><a href="">導(dǎo)航04</a></li>
    <li class="item"><a href="">導(dǎo)航05</a></li>
    <li class="item"><a href="">導(dǎo)航06</a></li>
    <li class="item"><a href="">導(dǎo)航07</a></li>
    <li class="item"><a href="">導(dǎo)航08</a></li>
  </ul>

  <!-- ul.list>li.item*8>a{導(dǎo)航$$@-} -->
  <ul class="list">
    <li class="item"><a href="">導(dǎo)航08</a></li>
    <li class="item"><a href="">導(dǎo)航07</a></li>
    <li class="item"><a href="">導(dǎo)航06</a></li>
    <li class="item"><a href="">導(dǎo)航05</a></li>
    <li class="item"><a href="">導(dǎo)航04</a></li>
    <li class="item"><a href="">導(dǎo)航03</a></li>
    <li class="item"><a href="">導(dǎo)航02</a></li>
    <li class="item"><a href="">導(dǎo)航01</a></li>
  </ul>


  <!-- ul.list>li.item*8>a{導(dǎo)航$$@100} -->
  <ul class="list">
    <li class="item"><a href="">導(dǎo)航100</a></li>
    <li class="item"><a href="">導(dǎo)航101</a></li>
    <li class="item"><a href="">導(dǎo)航102</a></li>
    <li class="item"><a href="">導(dǎo)航103</a></li>
    <li class="item"><a href="">導(dǎo)航104</a></li>
    <li class="item"><a href="">導(dǎo)航105</a></li>
    <li class="item"><a href="">導(dǎo)航106</a></li>
    <li class="item"><a href="">導(dǎo)航107</a></li>
  </ul>






</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末庆猫，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子瞻凤，更是在濱河造成了極大的恐慌猿诸，老刑警劉巖翁逞，帶你破解...
    沈念sama閱讀 211,290評(píng)論 6贊 491
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡特石，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門鳖链，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)姆蘸，“玉大人墩莫，你說(shuō)我怎么就攤上這事〕逊螅” “怎么了狂秦？”我有些...
    開(kāi)封第一講書人閱讀 156,872評(píng)論 0贊 347
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)推捐。 經(jīng)常有香客問(wèn)我裂问，道長(zhǎng)，這世上最難降的妖魔是什么牛柒？ 我笑而不...
    開(kāi)封第一講書人閱讀 56,415評(píng)論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任堪簿，我火速辦了婚禮，結(jié)果婚禮上皮壁，老公的妹妹穿的比我還像新娘椭更。我一直安慰自己，他們只是感情好蛾魄，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6贊 385
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布虑瀑。 她就那樣靜靜地躺著，像睡著了一般畏腕。 火紅的嫁衣襯著肌膚如雪缴川。 梳的紋絲不亂的頭發(fā)上，一...
    開(kāi)封第一講書人閱讀 49,784評(píng)論 1贊 290
  • 城市分裂傳說(shuō)
    那天描馅，我揣著相機(jī)與錄音把夸，去河邊找鬼。 笑死铭污，一個(gè)胖子當(dāng)著我的面吹牛恋日，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播嘹狞，決...
    沈念sama閱讀 38,927評(píng)論 3贊 406
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼岂膳，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了磅网？” 一聲冷哼從身側(cè)響起谈截，我...
    開(kāi)封第一講書人閱讀 37,691評(píng)論 0贊 266
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎涧偷，沒(méi)想到半個(gè)月后簸喂，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡燎潮，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2贊 326
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年喻鳄，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片确封。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1贊 340
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡除呵，死狀恐怖再菊，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情颜曾，我是刑警寧澤纠拔，帶...
    沈念sama閱讀 34,289評(píng)論 4贊 329
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站泛啸，受9級(jí)特大地震影響绿语，放射性物質(zhì)發(fā)生泄漏秃症。R本人自食惡果不足惜候址，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3贊 312
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望种柑。 院中可真熱鬧岗仑，春花似錦、人聲如沸聚请。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,741評(píng)論 0贊 21
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)驶赏。三九已至炸卑，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間煤傍，已是汗流浹背盖文。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,977評(píng)論 1贊 265
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蚯姆，地道東北人五续。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2贊 360
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像龄恋，于是被迫代替她去往敵國(guó)和親疙驾。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2贊 348

推薦閱讀更多精彩內(nèi)容