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...

23,551 Responses

  1. Albertbiave表示:

    https://usacanadapharm.com/# usa canada pharm

  2. Jasontep表示:

    Water and life
    stargate finance
    Lightning is a dramatic display of electrical power, but it is also sporadic and unpredictable. Even on a volatile Earth billions of years ago, lightning may have been too infrequent to produce amino acids in quantities sufficient for life — a fact that has cast doubt on such theories in the past, Zare said.

    Water spray, however, would have been more common than lightning. A more likely scenario is that mist-generated microlightning constantly zapped amino acids into existence from pools and puddles, where the molecules could accumulate and form more complex molecules, eventually leading to the evolution of life.

    “Microdischarges between obviously charged water microdroplets make all the organic molecules observed previously in the Miller-Urey experiment,” Zare said. “We propose that this is a new mechanism for the prebiotic synthesis of molecules that constitute the building blocks of life.”

    However, even with the new findings about microlightning, questions remain about life’s origins, he added. While some scientists support the notion of electrically charged beginnings for life’s earliest building blocks, an alternative abiogenesis hypothesis proposes that Earth’s first amino acids were cooked up around hydrothermal vents on the seafloor, produced by a combination of seawater, hydrogen-rich fluids and extreme pressure.

    Researchers identified salt minerals in the Bennu samples that were deposited as a result of brine evaporation from the asteroid’s parent body. In particular, they found a number of sodium salts, such as the needles of hydrated sodium carbonate highlighted in purple in this false-colored image – salts that could easily have been compromised if the samples had been exposed to water in Earth’s atmosphere.

    Related article
    Yet another hypothesis suggests that organic molecules didn’t originate on Earth at all. Rather, they formed in space and were carried here by comets or fragments of asteroids, a process known as panspermia.

    “We still don’t know the answer to this question,” Zare said. “But I think we’re closer to understanding something more about what could have happened.”

    Though the details of life’s origins on Earth may never be fully explained, “this study provides another avenue for the formation of molecules crucial to the origin of life,” Williams said. “Water is a ubiquitous aspect of our world, giving rise to the moniker ‘Blue Marble’ to describe the Earth from space. Perhaps the falling of water, the most crucial element that sustains us, also played a greater role in the origin of life on Earth than we previously recognized.”

  3. Nvrlgs表示:

    buy propranolol without prescription – methotrexate canada order methotrexate 10mg generic

  4. Sazrrvz表示:

    Приобрести диплом вы имеете возможность используя официальный портал компании. electrospeed.teamforum.ru/viewtopic.phpf=3&t=4860

  5. Sazrwvo表示:

    Приобрести диплом под заказ в Москве вы можете через сайт компании. zxz.listbb.ru/viewtopic.phpf=7&t=10969

  6. Iarioruoo表示:

    Заказать диплом ВУЗа по доступной стоимости возможно, обращаясь к надежной специализированной фирме. Приобрести документ ВУЗа вы сможете в нашей компании в столице. diplomnie.com/kupite-diplom-s-reestrom-bistro-i-bez-zabot

  7. Eanrwsd表示:

    Для максимально быстрого продвижения по карьерной лестнице потребуется наличие диплома университета. Заказать диплом института у надежной фирмы: diplom-top.ru/kupit-attestati-za-11-klass-s-zaneseniem-v-reestr-8/

  8. melbet_cgei表示:

    melbet кыргызстан https://www.melbet1001.ru .

  9. Eanrqij表示:

    Для успешного продвижения вверх по карьере потребуется наличие официального диплома университета. Заказать диплом о высшем образовании у надежной компании: damdiplomisa.com/kupit-diplom-v-rostove-s-zaneseniem-v-reestr/

  10. Albertbiave表示:

    https://usacanadapharm.shop/# pharmacy canadian

  11. Dwightkak表示:

    USACanadaPharm: medication canadian pharmacy – online canadian drugstore

  12. Samuelcuh表示:

    usa canada pharm: canadian pharmacy service – usa canada pharm

  13. KennethTwisa表示:

    Challenging our perceptions of ‘perfection’
    traderjoexyz exchange
    With health influencers raising the bar for success, the wellness space now often feels like a performative space where people strive to showcase peak physical and mental strength.

    While seeing others’ achievements can be motivating, it can also be discouraging if your progress doesn’t match theirs.

    Each person is chasing the perfect version of themselves — whether it’s a body or a lifestyle — which is dangerous because this is typically an impossible or dangerous version to achieve, Curran said. He added that this type of comparison creates a dangerous cycle in which people constantly feel dissatisfied with their own progress.

    “It’s a fantasy in many ways, and once you start chasing after it, you constantly find yourself embroiled in a sense of doubt and deficit,” he said.

    Curran also noted that wellness challenges can be particularly damaging for women who struggle with perfectionism, as they tend to be bombarded with impossible beauty standards and societal expectations.

    Renee McGregor, a UK-based dietitian who specializes in eating disorders and athlete performance, encourages people to approach wellness trends with curiosity and skepticism. That’s because some influencers and celebrities could be promoting products because there’s a financial benefit for them.

    “The thing to ask yourself about the person you’re taking advice from is what do they gain from it?” McGregor said. “If they are going to gain financially, then you know that they (could be willing) to sell you a lie.”
    Whether you want to try a new challenge or product that promises amazing results, McGregor suggests doing your research and seeking diverse perspectives, including consulting with doctors when possible.

  14. EdwardGraby表示:

    New design revealed for Airbus hydrogen plane
    beefy finance
    In travel news this week: Bhutan’s spectacular new airport, the world’s first 3D-printed train station has been built in Japan, plus new designs for Airbus’ zero-emission aircraft and France’s next-generation high-speed trains.

    Grand designs
    European aerospace giant Airbus has revealed a new design for its upcoming fully electric, hydrogen-powered ZEROe aircraft. powered by hydrogen fuel cells.

    The single-aisle plane now has four engines, rather than six, each powered by their own fuel cell stack.

    The reworked design comes after the news that the ZEROe will be in our skies later than Airbus hoped.

    The plan was to launch a zero-emission aircraft by 2035, but now the next-generation single-aisle aircraft is slated to enter service in the second half of the 2030s.

    Over in Asia, the Himalayan country of Bhutan is building a gloriously Zen-like new airport befitting a nation with its very own happiness index.

    Gelephu International is designed to serve a brand new “mindfulness city,” planned for southern Bhutan, near its border with India.

    In rail travel, Japan has just built the world’s first 3D-printed train station, which took just two and a half hours to construct, according to The Japan Times. That’s even shorter than the whizzy six hours it was projected to take.

    France’s high-speed TGV rail service has revealed its next generation of trains, which will be capable of reaching speeds of up to 320 kilometers an hour (nearly 200 mph).

    The stylish interiors have been causing a stir online, as has the double-decker dining car.

    Finally, work is underway in London on turning a mile-long series of secret World War II tunnels under a tube station into a major new tourist attraction. CNN took a look inside.

  15. FreddieGoatt表示:

    Some scientists believe that fatty acids such as decanoic acid and dodecanoic acid formed the membranes of the first simple cell-like structures on Earth, Pearce said.
    connext bridge
    “(This is) the closest we’ve come to detecting a major biomolecule-related signal — something potentially tied to membrane structure, which is a key feature of life,” Pearce said via email. “Organics on their own are intriguing, but not evidence of life. In contrast, biomolecules like membranes, amino acids, nucleotides, and sugars are central components of biology as we know it, and finding any of them would be groundbreaking (we haven’t yet).”
    Returning samples from Mars
    The European Space Agency plans to launch its ExoMars Rosalind Franklin rover to the red planet in 2028, and the robotic explorer will carry a complementary instrument to SAM. The rover LS6 will have the capability to drill up to 6.5 feet (2 meters) beneath the Martian surface — and perhaps find larger and better-preserved organic molecules.

    While Curiosity’s samples can’t be studied on Earth, the Perseverance rover has actively been collecting samples from Jezero Crater, the site of an ancient lake and river delta, all with the intention of returning them to Earth in the 2030s via a complicated symphony of missions called Mars Sample Return.
    Both rovers have detected a variety of organic carbon molecules in different regions on Mars, suggesting that organic carbon is common on the red planet, Williams said.

    While Curiosity and Perseverance have proven they can detect organic matter, their instruments can’t definitively determine all the answers about their origins, said Dr. Ashley Murphy, postdoctoral research scientist at the Planetary Science Institute. Murphy, who along with Williams previously studied organics identified by Perseverance, was not involved in the new research.

    “To appropriately probe the biosignature question, these samples require high-resolution and high-sensitivity analyses in terrestrial labs, which can be facilitated by the return of these samples to Earth,” Murphy said.

  16. StephenCer表示:

    USACanadaPharm: USACanadaPharm – USACanadaPharm

  17. 1win_bsSt表示:

    1win скачать kg http://1win7017.ru .

  18. Samuelcuh表示:

    reddit canadian pharmacy: usa canada pharm – safe online pharmacies in canada

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

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