Emmet 網頁開發界的超跑

在這個速度的時代,網頁也擁有非常多加速開發的工具,例如今天要介紹的這個外掛「Emmet」,他支援的開發軟體也相當多,也就是不管腳踏車、機車還是房車,都可以裝上這個超跑的引擎,廢話不多說,先讓大家知道他如何節省網頁開發的時間,如果我們在網頁上要輸入以下的HTML結構:

<div>
    <ul>
       <li><a href="#">選項1</a></li>
       <li><a href="#">選項2</a></li>
       <li><a href="#">選項3</a></li>
       <li><a href="#">選項4</a></li>
       <li><a href="#">選項5</a></li>
       <li><a href="#">選項6</a></li>
    </ul>
</div>

在我們安裝好Emmet之後,僅需輸入以下的縮寫,再按下Tab鍵,即可以產生如上述般的HTML結構:

div>ul>li*6>a[#]{選項$}

仔細看看應該不難發現HTML標籤名稱的部分都在縮寫裡面,只是利用>來區隔每一層,如果要多個同樣的標籤可以用*後來輸入個數,標籤內的屬性值是利用[ ]來包住,{ }是標籤內的值。

是不是很神奇呀?趕快到Emmet的官方網頁下載或直接利用你的網頁編輯器來安裝這個外掛吧!

Emmet 官方網站截圖
Emmet 官方網站截圖

官方網站提到Emmet的特色有六點,分別是:

  • HTML from CSS:如果你已經對CSS的選取器有概念,那就已經知道Emmet該如何去縮寫你的HTML代碼。
  • Dynamic snippets:在使用縮寫的時候,只要稍微更動一些名稱,就可以得到截然不同的結果。
  • Ultra-fast coding:快速的編寫模式,可以快速選取標籤、移動游標、產生上一層或下一層結構。
  • Customizable:可以透過編輯JSON檔案來客製化一些程式碼。
  • Platform for new tools:透過編輯開放的程式碼,可以產生新的使用模式。
  • Highly portable:高度輕便可攜。

Emmet支援的網頁編輯器也非常多,如下圖所示:

Emmet 支援的網頁編輯器

Emmet 支援的網頁編輯器

快速鍵:

(快速鍵的部分有可能跟原先的編輯器或電腦的一些應用程式有衝突而無法使用)

  • Tab:展開縮寫
  • Ctrl+Alt+→:將游標移動到下一個可以輸入屬性或值的地方。
  • Ctrl+Alt+←:將游標移動到上一個可以輸入屬性或值的地方。
  • Ctrl+D:選取一整個標籤(包含標籤的起始與結束)。
  • Shift+Ctrl+.:選取下一個標籤或屬性。
  • Shift+Ctrl+,:選取上一個標籤或屬性。
  • Ctrl+/:將選取的部分變成註解。

使用的部分功能相當多,可以參考官方網頁中的文件介紹,或是繼續閱讀馬老師針對Emmet的後續介紹。

You may also like...

17,602 Responses

  1. Sazrboi表示:

    Купить диплом под заказ можно используя сайт компании. almet.listbb.ru/viewtopic.phpf=12&t=1727

  2. Sazrfal表示:

    Заказать диплом можно через сайт компании. 56.si/read-blog/75_kupit-diplom-vuza-s-zaneseniem-v-reestr.html

  3. 1win_vuOa表示:

    1win официальный http://1win7003.ru .

  4. RichardPaulp表示:

    подробнее https://xn—-jtbjfcbdfr0afji4m.xn--p1ai

  5. Jamestof表示:

    Узнать больше https://falcoware.com/rus/match3_games.php

  6. Gabrielnoind表示:

    Axolotl problems
    As Mexico City grew and became more industrialized, the need for water brought pumps and pipes to the lake, and eventually, “it was like a bad, smelly pond with rotten water,” Zambrano said. “All of our aquatic animals suffer with bad water quality, but amphibians suffer more because they have to breathe with the skin.”
    анальный секс можно
    To add to the axolotls’ problems, invasive fish species such as carp and tilapia were introduced to the lake, where they feed on axolotl eggs. And a 1985 earthquake in Mexico City displaced thousands of people, who found new homes in the area around the lake, further contributing to the destruction of the axolotls’ habitat.

    These combined threats have devastated axolotl populations. According to the International Union for Conservation of Nature, there are fewer than 100 adult axolotls left in the wild. The species is considered critically endangered.
    While the wild axolotls of Lake Xochimilco have dwindled to near-extinction, countless axolotls have been bred for scientific laboratories and the pet trade. “The axolotl essentially helped establish the field of experimental zoology,” Voss said.

    In 1864, a French army officer brought live axolotls back to Europe, where scientists were surprised to learn that the seemingly juvenile aquatic salamanders were capable of reproduction. Since then, scientists around the world have studied axolotls and their DNA to learn about the salamanders’ unusual metamorphosis (or lack thereof) as well as their ability to regrow injured body parts.
    In addition to their role in labs, axolotls have become popular in the exotic pet trade (though they are illegal to own in California, Maine, New Jersey and Washington, DC). However, the axolotls you might find at a pet shop are different from their wild relatives in Lake Xochimilco. Most wild axolotls are a dark grayish brown. The famous pink axolotls, as well as other color variants such as white, blue, yellow and black, are genetic anomalies that are rare in the wild but selectively bred for in the pet trade.

    What’s more, “most of the animals in the pet trade have a very small genetic variance,” Zambrano said. Pet axolotls tend to be inbred and lack the wide flow of different genes that makes up a healthy population in the wild. That means that the axolotl extinction crisis can’t simply be solved by dumping pet axolotls into Lake Xochimilco. (Plus, the pet axolotls likely wouldn’t fare well with the poor habitat conditions in the lake.)

    Fame and misfortune
    The difficulties that axolotls face in the wild are almost diametrically opposed to the fame they’ve found in recent years. Axolotls have captured the human imagination for centuries, as evidenced by their roles in Aztec religion and stories, but the early 21st century seems to be a high point for them. An axolotl graces the 50 peso bill. There are axolotl-inspired Pokemon, and Reddit commenters have noted that the character Toothless from the “How to Train Your Dragon” movie series is distinctly axolotl-like.

    The introduction of axolotls to Minecraft in 2021 neatly mapped onto an uptick in Google searches for the animals, and social media makes it easy for people to gain access to photos and videos of the salamanders, particularly the photogenic pink ones often kept as pets.

    The axolotl pet trade probably doesn’t directly harm the wild populations since wild salamanders aren’t being poached or taken from Lake Xochimilco. However, Zambrano said, axolotls’ ubiquity in pop culture and pet stores might make people assume that because axolotls “live in all the tanks around the world, they are not in danger.”

  7. Allanbup表示:

    Why axolotls seem to be everywhere — except in the one lake they call home
    смотреть порно жесток

    Scientist Dr. Randal Voss gets the occasional reminder that he’s working with a kind of superstar. When he does outreach events with his laboratory, he encounters people who are keen to meet his research subjects: aquatic salamanders called axolotls.

    The amphibians’ fans tell Voss that they know the animals from the internet, or from caricatures or stuffed animals, exclaiming, “‘They’re so adorable, we love them,’” said Voss, a professor of neuroscience at the University of Kentucky College of Medicine. “People are drawn to them.”

    Take one look at an axolotl, and it’s easy to see why it’s so popular. With their wide eyes, upturned mouths and pastel pink coloring, axolotls look cheerful and vaguely Muppet-like.

    They’ve skyrocketed in pop culture fame, in part thanks to the addition of axolotls to the video game Minecraft in 2021. These unusual salamanders are now found everywhere from Girl Scout patches to hot water bottles. But there’s more to axolotls than meets the eye: Their story is one of scientific discovery, exploitation of the natural world, and the work to rebuild humans’ connection with nature.

    A scientific mystery
    Axolotl is a word from Nahuatl, the Indigenous Mexican language spoken by the Aztecs and an estimated 1.5 million people today. The animals are named for the Aztec god Xolotl, who was said to transform into a salamander. The original Nahuatl pronunciation is “AH-show-LOAT”; in English, “ACK-suh-LAHT-uhl” is commonly used.
    Axolotls are members of a class of animals called amphibians, which also includes frogs. Amphibians lay their jelly-like eggs in water, and the eggs hatch into water-dwelling larval states. (In frogs, these larvae are called tadpoles.)

    Most amphibians, once they reach adulthood, are able to move to land. Since they breathe, in part, by absorbing oxygen through their moist skin, they tend to stay near water.

    Axolotls, however, never complete the metamorphosis to a land-dwelling adult form and spend their whole lives in the water.

    “They maintain their juvenile look throughout the course of their life,” Voss said. “They’re teenagers, at least in appearance, until they die.”

  8. Brianjap表示:

    узнать больше Здесь https://falcoware.com/rus/match3_games.php

  9. Brianjap表示:

    опубликовано здесь https://xn—–6kcacs9ajdmhcwdcbwwcnbgd13a.xn--p1ai/

  10. LarryHut表示:

    нажмите, чтобы подробнее https://xn—–6kcacs9ajdmhcwdcbwwcnbgd13a.xn--p1ai/

  11. Brianjap表示:

    посмотреть на этом сайте https://falcoware.com/rus/match3_games.php

  12. LarryHut表示:

    посетить веб-сайт https://xn—–6kcacs9ajdmhcwdcbwwcnbgd13a.xn--p1ai/

  13. Sazresd表示:

    Заказать диплом института !
    Покупка диплома университета РФ в нашей компании является надежным делом, потому что документ заносится в реестр. Выгодно приобрести диплом университета diplom-ryssia.com/kupit-diplom-o-srednem-obrazovanii-bistro-i-nadezhno-10

  14. LarryHut表示:

    опубликовано здесь https://xn—–6kcacs9ajdmhcwdcbwwcnbgd13a.xn--p1ai

發佈回覆給「Gabrielnoind」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。