Як написати HTML-код швидше

Sep 10, 2025

Як

(Зображення кредиту: майбутнє)

Сучасні веб-сайти вимагають великої кількості HTML-коду. Комплексні макети з кількома різними переглядами та станами можуть бути складними для створення простого текстового редактора. На щастя, існує безліч інструментів HTML Generation, щоб працювати. Тут ми швидко подивіться на двох найпопулярніших інструментів, еммет і мопсів.

Однак, вам все ще потрібно знати свій HTML, щоб використовувати обидва ці потужні інструменти для економії часу. Отже, перш ніж зануритися, переконайтеся, що ви використовуєте популярну семантику Теги HTML правильний шлях. Також див Html boilplate .

Хочете відхилити код? Спробуйте це Будівельники веб-сайту . Або для додаткової допомоги по дорозі, виберіть a веб хостинг Сервіс з технічною підтримкою.

Створіть HTML на льоту

При написанні великих кількостей HTML в одному GO, написавши кожен тег вручну, може стати дуже нудним, дуже швидко. Наприклад, при написанні списку посилань, ми повинні переконатися, що & lt; uul & gt;, & lt; li & gt; і & lt; a & gt; теги всі відкриті і закриті в потрібному місці. В іншому випадку посилання можуть не працювати, а вся макет сторінки буде повністю HayWire.

Як використовувати emmet

Щоб переконатися, що ви зменшуєте шанси на це, яке ви можете використовувати таланти Емумет . Це інструмент, який заощадить вам багато набору і значно покращить ваш HTML & amp; Робочий процес CSS. Emmet дозволяє створювати елементи, набравши селектор, подібний до CSS. Потім він буде розібрати та розширювати цей елемент у звичайну HTML. Нижче наведено оригінальний елемент, створений у Emmet.

nav>ul>li*3>a.chapter{Chapter $ of 3}

Emmet буде виявляти цей елемент, розібрати його, а потім перетворити елемент у стандартний HTML, як показано нижче. Швидкий погляд на елемент Emmet показує, що & lt; li & gt; помножується на ( * 3 ) і кожен & lt; li & gt; Екземпляр буде називатися главою, після чого відповідне число (до 3).

Зауважте, скільки символів елемент EMMET містить і скільки стандартний HTML містить. Навіть цей невеликий фрагмент коду демонструє, скільки часу можна зберегти, використовуючи скорочення емітету.

 & lt; nav & gt;
  & lt; uul & gt;
    & lt; li & gt; & lt; href = "" class = "глава" & gt; глава 1
 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "" class = "глава" & gt; глава 2
 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "" class = "глава" & gt; глава 3
 3 & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt;

Еммет також усвідомлює контекст. Наприклад, якщо ми редагуємо & lt; таблиця & gt; Це, швидше за все, ми хочемо & lt; tr & gt; (Це рядки) елементи для заповнення. Все, що нам потрібно буде зробити, це вкажіть, скільки нам потрібно.

Це просто швидкий приклад того, що може зробити Emmet, але є багато додаткових параметрів конфігурації. До них відносяться редагування CSS, Bem (створення класу блокування елементів) та існує навіть генератор Lorem Ipsum.

Варто також відзначити, що більшість редакторів коду або мають emmet, вбудовані або підтримують його через плагіни. Ви можете дізнатись більше про це на Еммет документація сторінка.

Використовуйте мопс для динамічного вмісту

Хоча Emmet ідеально підходить для статичного контенту, що відбувається, якщо вміст повинен бути більш динамічним? Наприклад, нам, можливо, доведеться генерувати персоналізовані домашні сторінки, складні таблиці замовлення або повторити загальні блоки HTML. Це все можливе в JavaScript, але, попередньо надаючи цей вміст, ми можемо отримати додатковий швидкість, не покладаючись на браузер користувача. Пам'ятайте, якщо у вас є медіа-важка сторінка, ви хочете повернути його до надійного хмара зберігання .

Крок вперед мопс. Це шаблонний інструмент для HTML. Ви можете записати сторінки у форматі ".pug" та pug читатимуть цей файл, вводять деякі динамічні дані в нього та поверніть стандарт HTML. Наведений нижче приклад - це те, як ви пишете код у PUG, щоб створити той самий HTML, як приклад EMMET (вище).

 ul
  кожен Val в [1, 2, 3]
    літ
      a (href = "", class = "глава") Глава
# {val} з 3

Файл мопля використовує поглиблення поодинці, щоб вказати гніздування.Він може грати над значеннями для створення великих кількостей HTML в одному проході.Ці ".pug" файли призначені для повторного використання багато разів у проекті.

PUG доступний для встановлення з менеджера пакетів щер .Але, якщо ви хочете отримати більше інформації про те, як розпочати роботу з мопсом, відвідайте візит до веб-сайт .

Цей вміст спочатку з'явився у журналі веб-дизайнерів.

Читати далі:

10 найкраще Рамки CSS
Анімація CSS Приклади відтворити
8 тегів HTML, які потрібно використовувати (і 5, щоб уникнути)

Як написати HTML-код швидше

Створіть HTML на льоту

Як використовувати emmet

Використовуйте мопс для динамічного вмісту

Як - Найпопулярніші статті

Як додати енергію на ваші життєві малюнки

Робота розумно з вашим Zbrush UI

Як створити 3D траву

Як побудувати AR AP

5 Речі, які ви не знали, ви можете зробити з HTML

5 способів ефективно керувати готівкою

Об'єднати традиційні та цифрові навички для створення комічного покриття

Отримайте творчість з портретами та обличчям, усвідомлюючи

Категорії