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,694 Responses

  1. Allanref表示:

    A tiny rainforest country is growing into a petrostate. A US oil company could reap the biggest rewards
    kyberswap
    Guyana’s destiny changed in 2015. US fossil fuel giant Exxon discovered nearly 11 billion barrels of oil in the deep water off the coast of this tiny, rainforested country.

    It was one of the most spectacular oil discoveries of recent decades. By 2019, Exxon and its partners, US oil company Hess and China-headquartered CNOOC, had started producing the fossil fuel.? They now pump around 650,000 barrels of oil a day, with plans to more than double this to 1.3 million by 2027.

    Guyana now has the world’s highest expected oil production growth through 2035.

    This country — sandwiched between Brazil, Venezuela and Suriname — has been hailed as a climate champion for the lush, well-preserved forests that carpet nearly 90% of its land. It is on the path to becoming a petrostate at the same time as the impacts of the fossil fuel-driven climate crisis escalate.

    While the government says environmental protection and an oil industry can go hand-in-hand, and low-income countries must be allowed to exploit their own resources, critics say it’s a dangerous path in a warming world, and the benefits may ultimately skew toward Exxon — not Guyana.
    Since Exxon’s transformative discovery, Guyana’s government has tightly embraced oil as a route to prosperity. In December 2019, then-President David Granger said in a speech, “petroleum resources will be utilized to provide the good life for all … Every Guyanese will benefit.”

    It’s a narrative that has continued under current President Mohamed Irfaan Ali, who says new oil wealth will allow Guyana to develop better infrastructure, healthcare and climate adaptation.

  2. Albertbiave表示:

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

  3. 1win_oiot表示:

    1win moldova download 1win moldova download .

  4. StephenCer表示:

    usa canada pharm: canadian pharmacy online reviews – usa canada pharm

  5. mostbet_ifEn表示:

    скачать мостбет https://mostbet6033.ru/ .

  6. Dwightkak表示:

    pharmacies in canada that ship to the us: canadian pharmacies comparison – USACanadaPharm

  7. mostbet_fyEn表示:

    mostbet kg скачать на андроид http://mostbet6033.ru .

  8. CurtisRix表示:

    Текст

    Купить ПОД системы (вейпы) , в которых содержится жидкость с концентратом ТГК. Приобретайте отчищенный дистиллят каннабиса, содержащий от 70 до 90% ТГК. Он изготавливается из соцветий конопли и ее пыльцы. Никакой химии, только натуральный продукт, произведенный в США.

    Buy DONUTS vapes containing liquid with THC concentrate. Buy purified cannabis distillate containing 70 to 90% THC. It is made from hemp flowers and pollen. No chemicals, only a natural product made in the USA.
    https://secretvape.shop/

  9. Pingidiof表示:

    darknet market lists darknet links

  10. 1win_dhEr表示:

    скачат мостбет скачат мостбет .

  11. 1win_hjEr表示:

    мостбет официальный сайт мостбет официальный сайт .

  12. 1win_vwkr表示:

    1 win официальный сайт https://1win7018.ru/ .

  13. mostbet_xoEn表示:

    мостбет скачать андроид http://mostbet6033.ru .

  14. dragon money casino войти dragon-money36.com .

  15. 1win_azkr表示:

    1win прямой эфир https://1win7018.ru .

  16. 1win_izSa表示:

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

  17. Billynot表示:

    Mist and microlightning
    solflare
    To recreate a scenario that may have produced Earth’s first organic molecules, researchers built upon experiments from 1953 when American chemists Stanley Miller and Harold Urey concocted a gas mixture mimicking the atmosphere of ancient Earth. Miller and Urey combined ammonia (NH3), methane (CH4), hydrogen (H2) and water, enclosed their “atmosphere” inside a glass sphere and jolted it with electricity, producing simple amino acids containing carbon and nitrogen. The Miller-Urey experiment, as it is now known, supported the scientific theory of abiogenesis: that life could emerge from nonliving molecules.
    For the new study, scientists revisited the 1953 experiments but directed their attention toward electrical activity on a smaller scale, said senior study author Dr. Richard Zare, the Marguerite Blake Wilbur Professor of Natural Science and professor of chemistry at Stanford University in California. Zare and his colleagues looked at electricity exchange between charged water droplets measuring between 1 micron and 20 microns in diameter. (The width of a human hair is 100 microns.)

    “The big droplets are positively charged. The little droplets are negatively charged,” Zare told CNN. “When droplets that have opposite charges are close together, electrons can jump from the negatively charged droplet to the positively charged droplet.”
    The researchers mixed ammonia, carbon dioxide, methane and nitrogen in a glass bulb, then sprayed the gases with water mist, using a high-speed camera to capture faint flashes of microlightning in the vapor. When they examined the bulb’s contents, they found organic molecules with carbon-nitrogen bonds. These included the amino acid glycine and uracil, a nucleotide base in RNA.

    “We discovered no new chemistry; we have actually reproduced all the chemistry that Miller and Urey did in 1953,” Zare said. Nor did the team discover new physics, he added — the experiments were based on known principles of electrostatics.

    “What we have done, for the first time, is we have seen that little droplets, when they’re formed from water, actually emit light and get this spark,” Zare said. “That’s new. And that spark causes all types of chemical transformations.”

  18. 1win_tgEr表示:

    мостбет вход http://1win5028.ru .

發佈留言

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