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

3,374 Responses

  1. Your publish was a fantastic reminder that there’s always a lot more to know. Thanks for inspiring me to maintain rising and Discovering. https://dazzling-can-9d5.notion.site/Mastering-Adobe-Illustrator-for-Custom-Logo-Design-in-Bundaberg-4b70eb126d8b47db8307705a725cfe8a?pvs=4

  2. Whenever I check out your blog site, I depart emotion enlightened. https://penzu.com/p/71170177c073319f

  3. I like the way you addressed frequent misconceptions in this publish. It is vital to established the history straight on these issues. https://thegameoflife-de.mn.co/posts/60811021?utm_source=manual

  4. Your content has this magical capability to make me experience smarter soon after studying. https://matters.town/a/6dhvz1mp1ii3

  5. Hayallerinizdeki kumarhane Sweet bonanza

  6. Your posts undoubtedly are a goldmine of sensible assistance and actionable guidelines. https://justpaste.me/EtoL1

  7. Toԁay, I went to the beachfront ᴡith myy kids.
    I found a sеа shell andd ցave іt t᧐ my 4 year olld daughter ɑnd ssid
    “You can hear the ocean if you put this to your ear.” Shе ρlaced
    thhe shell to hеr ear and screamed. Тhere was a hermit crab insiԁe and
    it pinched һеr ear. Տhе never wants tο goo baϲk!
    LoL I know this is entiгely ߋff topic Ьut I had to tell someone!

    mү webpage – Gopek178 Petir

  8. Ganhe muito no melhor cassino Blaze

  9. Josephton表示:

    The world’s most liveable cities for 2024
    большой анальный секс

    It’s considered among the most beautiful cities in the world to visit, and it seems that Vienna may also be an unbeatable place to live.

    The Austrian city has been crowned the most liveable city in the world yet again in the annual list from the Economist Intelligence Unit (EIU), which was released today.

    The EIU, a sister organization to The Economist, ranked 173 cities across the globe on a number of significant factors, including health care, culture and environment, stability, infrastructure and education.

    Vienna topped the list for the third consecutive year, receiving “perfect” scores in four out of five of the categories — the city was marked lower for culture and environment due to an apparent lack of significant sporting events.
    Just behind the Austrian capital, Denmark’s Copenhagen retained its second place position, while Switzerland’s Zurich moved up from sixth place to third on the list.

    Australia’s Melbourne fell from third to fourth place, while Canadian city Calgary tied for fifth place with Swiss city Geneva.

    Canada’s Vancouver and Australia’s Sydney were in joint seventh place, and Japan’s Osaka and New Zealand’s Auckland rounded out the top 10 in joint ninth place.

  10. Experimente a sorte no cassino mais famoso Blaze

  11. Yufqug表示:

    order norpace – buy lamictal without prescription thorazine 100mg us

  12. Отличный сайт! Всем рекомендую!Тут Вы можете заказатьШары на день рождения

  13. As melhores slots estao aqui Blaze

  14. Your blog post was exactly what I needed to read right now. It’s amazing how you always seem to know just what to say.

  15. Отличный сайт! Всем рекомендую!Воздушные шары

  16. Топ-5 материалов для перетяжки мебели, стильных
    Преображаем вашу мебель с помощью перетяжки, мебель, которая будет радовать вас долгие годы
    Как перетяжка мебели может изменить атмосферу в вашем доме, закажите услугу профессионалов
    Вдохновляющие идеи для перетяжки мебели, подчеркнут вашу индивидуальность
    Как не ошибиться с выбором ткани для перетяжки мебели, применить в деле
    мастерская “КакСвоим”.

  17. timesmag.xyz表示:

    This submit exceeded my expectations. You went higher than and over and above to deliver important details and insights.

  18. Nkaifp表示:

    cost depakote 250mg – amiodarone 100mg us topamax 100mg price

  19. Your posts gas my mental curiosity like no other. Thank you!

  20. You have a talent for conveying issues in a method that is straightforward to comprehend. I am hunting ahead to reading additional from you.

  21. Your posts are a goldmine of realistic advice and actionable tips.

  22. timesmag.xyz表示:

    I am impressed by the level of study you put into this put up. It truly is crystal clear that you’re committed to giving valuable info.

  23. Your dedication for your craft is really inspiring. Retain increasing the bar!

  24. RalphLop表示:

    “Дело “Лайф-из-Гуд” — “Гермес” — “Бест Вей”: свидетель обвинения объявила себя потерпевшей от следствия
    Уголовное дело компании Гермес
    6 и 13 июня Приморский районный суд города Санкт-Петербурга, рассматривающий по существу уголовное дело № 1-504/24, связываемое с компаниями “Лайф-из-Гуд”, “Гермес” и кооперативом “Бест Вей”, провел очередные, шестое и седьмое по счету, заседания, посвященные допросу свидетелей обвинения и лиц, признанных следствием потерпевшими в рамках судебного следствия по делу
    “К кооперативу претензий не было, следователь предложил подать заявление”
    Признанный следствием потерпевший Болян подсудимых не знает. Был клиентом “Гермеса”, а также пайщиком кооператива — но до 2019 года. В 2019-м он вышел из кооператива и из “Гермеса”, ему были возвращены паевые взносы, и никаких претензий к кооперативу у него не было — что он письменно подтвердил, расторгая договоры с этими организациями.

    Однако, как Болян отметил на суде, следователь убедил его в том, что он — потерпевший и должен подать заявление на возврат членских взносов. Заявление в МВД писать не хотел, на него вышли сотрудники, сначала претензий к кооперативу не было. Полиция ему объяснила, что можно получить деньги.

    Стал клиентом “Гермеса” и пайщиком кооператива через своего консультанта Алексея Виноградова. Виноградов — грамотный маркетолог, он ему верил, тот не работал в кооперативе. Что было предметом договора в “Гермесе”, не помнит. В “Гермес” внес 100 и 700 евро, а в кооператив каждый месяц вносил по 12 тыс. в течение семи месяцев.

    Вышел и из кооператива, и из “Гермеса” в 2019 году. Зачем вступал? “Наверное, квартиру купить хотел”. Кооператив вернул ему 70 тыс. паевых взносов, “Гермес” вернул со счета “Виста” 140 тыс. рублей.

    В кооперативе деньги вернули почти сразу, удержав вступительный и членские взносы; в “Гермесе” вернули позже через “внутрянку”, но удержали комиссию.

    Утверждает, что ему говорили, что можно со счета “Виста” вносить деньги в кооператив. Объясняли, что деньги передаются в доверительное управление трейдерам и брокерам, которые играют на бирже. В кооперативе, как он утверждает, можно было купить место в очереди. По его словам, “Гермес” и кооператив — по сути, одна организация. Требует взыскать с кооператива более 148 тыс. рублей — вступительный и членские взносы, и более 60 тыс. рублей с “Гермеса” — комиссию при выводе средств.

    Договор с кооперативом не читал, но ему объяснили, что есть невозвратная часть денег — ее и не вернули, “но хочу попытаться вернуть”. Претензий к кооперативу “как бы и нет, но если вернут взносы, то будет хорошо”.

    К Виноградову претензий не предъявлял. “Может, меня и не обманули в кооперативе”, -резюмировал свое выступление в суде Болян.
    “Требую выплатить с учетом роста цен на недвижимость”
    Признанная следствием потерпевшей Комова была как клиентом “Гермеса”, так и пайщиком кооператива. Подсудимых не знает. Требует более 8800 тыс. с кооператива и более 2700 тыс. с “Гермеса”. При этом из кооператива она не вышла и заявление о выходе не подавала. Сумма требований к кооперативу включает как паевые и членские взносы, так и оценку роста цен на недвижимость, которая не была приобретена.

    Утверждает, что можно переводить деньги со счета “Виста” напрямую в кооператив — в подтверждение приводит скрины переписки с консультантами в смартфоне. Суд разъясняет, что доказательство может быть приобщено позднее при надлежащем оформлении.

    “Информацию воспринял скептически, но вступил”
    Признанный следствием потерпевшим Киреев был только клиентом “Гермеса”. Подсудимых не знает лично — Измайлова видел в видеоролике “Лайф-из-Гуд”. Узнал о “Гермесе” от консультантов Татьяны и Андрея Клейменовых, с которыми знаком с конца 1990-х годов. Вступил в “Гермес” в 2020 году, деньги сразу отобразились на счете. Вносил средства на счет “Виста” небольшими частями, снимал средства со счета для личных нужд. Заявляет требования на более чем 2 млн 300 тыс. рублей.

    Когда подписывал договор, в офисе была табличка кооператива, но в офисе находился представитель фирмы “Гермес”, ему сказали, что это два продукта компании “Лайф-из-Гуд”.

    В 2022 году начались проблемы с выводом средств. И руководство фирмы пугало блокировкой счета в случае подачи заявления в правоохранительные органы. В хейтерском чате узнал телефон следователя Сапетовой, позвонил и подал заявление.

    В чате клиентов компании “Гермес” была информация о том, что счет будет заблокирован в случае подачи заявления в правоохранительные органы. Эта информация была за подписью “администрация”. Он спросил у консультантов: “Кто это — администрация?”, написал вопрос в чате, и его забанили. Других попыток вступать в диалог с “Гермесом” не предпринимал.

    Признанный следствием потерпевшим Чернышенко был также только клиентом только компании “Гермес”. Подсудимых не знает. Познакомился с консультантами “Гермеса” во время совместной работы в “Макдоналдсе”. Информацию о “Гермесе” воспринял скептически — “это какой-то обман”, но консультанты его в конце концов уговорили. Они поставили условие, что продадут ему земельный участок, чтобы он вступил в “Гермес”.

    “Я хотел их обмануть, — пояснил свидетель, — думал: пусть они продадут, а я в “Гермес” не вступлю. Но они начали уговаривать, и я вступил в апреле 2020 года. Один из консультантов дал расписку на внесение денег на счет в “Гермесе”, я внес через него 230 тыс. И еще раз из жадности 140 тыс. 140 тыс. я вывел, плюс каждый месяц выводил по 5000–7000 руб. С какого-то момента проценты стали падать. В конце я захотел выйти — но не успел. У меня в “Гермесе” осталось 270 тыс., которые я требую вернуть”.

    В январе 2023 года Чернышенко подал заявление в полицию, так как прекратился доступ к счету. “Мне предложили 70 тыс. вернуть, чтобы я не ходил в полицию, ссылаясь на то, что помогли мне продать участок за меньшую сумму по документам, чем я его продал на самом деле, но я отказался, сказал, что мне надо 270 тыс.”.

    “Я хочу стать потерпевшей. Но Василенко многие благодарны за квартиры”
    Свидетель обвинения Галашенкова была только клиентом “Гермеса”. Из подсудимых знает Виктора Ивановича Василенко. Она сидела в зале при допросе двух потерпевших (что запрещено), но заявила, что плохо слышит. Ранее была знакома с Верой Исаевой из компании “Лайф-из-Гуд”.

    Вера узнала, что у нее есть офис, и познакомила с Романом Василенко, который снял у нее офис, когда “Лайф-из-Гуд” только начинала раскручиваться. Он снимал офис только за коммунальные платежи. “Я попросила расплатиться за четыре месяца, а он предложил мне вместо денег вступить в “Бест Вей”, но я отказалась, так как квартира не была нужна”. Зато стала клиентом “Гермеса”: “Внесла 15 тыс. евро, но через три месяца на счете оказалось 3400 евро!” Исаева, по словам Галашенковой, оказалась мошенницей.

    По словам Галашенковой, она внесла на счет “Виста” более 3 млн рублей. “Когда сказали, что все счета заблокировали, то собрали с нас еще денег, чтобы счета разблокировать, потом пришло сообщение, что открывается новая фирма, но это все оказалось обманом — счета не разблокированы”.

    “Я не считала себя потерпевшей, так как не знала, что это можно сделать, — заявила Галашенкова. — Сейчас желаю заявить, что я хочу стать потерпевшей. Считаю, что должна взыскать с “Гермеса” как прямой ущерб, так и упущенную выгоду, так как эта фирма закрылась”.

    При этом заявила, что “Василенко молодец, потому что я видела людей, которые купили квартиры, они были ему очень благодарны”.

  25. Divirta-se no cassino mais confiavel Blaze

  26. timesmag.xyz表示:

    You’ve cultivated a Local community of curious minds desperate to find out with each other.

  27. Your blog is actually a testomony to the strength of effectively-crafted, meaningful articles.

發佈留言

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