HTML-koodin kirjoittaminen nopeammin

Oct 1, 2023

Miten tehdään

(Kuva luotto: tulevaisuus)

Nykyaikaiset verkkosivustot vaativat paljon HTML-koodia. Monimutkaiset ulkoasut, joissa on useita erilaisia näkymiä ja valtioita, voi olla vaikea luoda vain yksinkertaisella tekstieditorilla. Onneksi on olemassa joukko HTML-sukupolven työkaluja siellä työskennellä. Täällä otimme nopeasti kaksi suosittuja työkaluja, emmet ja mopsi.

Sinun on kuitenkin vielä tunnettava HTML käyttää molempia näistä tehokkaista aika-säästämistyökaluista. Joten ennen sukeltamista Varmista, että käytät suosittua semanttista HTML-tunnisteet oikea tapa. Katso myös opas käyttämään a HTML-kaatuta .

Haluatko kääntää koodin? Kokeile näitä Verkkosivuston rakentajat . Tai ylimääräistä apua matkan varrella, valitse a sivujen ylläpito Palvelu teknisellä tuella.

Luo html lennossa

Kun kirjoitat suuria määriä HTML: tä yhdellä kertaa, kirjoittamalla jokainen merkki käsin voi tulla hyvin tylsiä, hyvin nopeasti. Esimerkiksi, kun kirjoitat linkkien luettelon, meidän on varmistettava, että & lt; ul & gt;, & lt; li & gt; ja & lt; a & gt; Tunnisteet kaikki avoimet ja sulje oikea paikka. Muussa tapauksessa linkit eivät välttämättä toimi ja koko sivun asettelu menee täysin haywireen.

Kuinka käyttää Emmet

Varmistaaksesi, että vähennät tämän tapahtuman mahdollisuuksia, voit käyttää kykyjä Emmet . Tämä on työkalu, joka säästää paljon kirjoittamista ja parantaa suuresti HTML & amp; CSS-työnkulku. EMMETin avulla voit luoda elementtejä kirjoittamalla CSS-kaltaisen valitsimen. Se sitten jäsentää ja laajentaa tätä elementtiä tavalliseen html. Alla on EMMET: ssä luotu alkuperäinen elementti.

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

Emmet havaitsee tämän elementin, jäsentää sen ja muuntaa elementin standardiksi HTML: ksi alla olevan kuvan mukaisesti. Nopea tarkastus Emmen elementti ehdottaa sitä & lt; li & gt; kerrotaan ( * 3 ) ja kukin & lt; li & gt; Esimerkiksi kutsutaan luku, jota seuraa sopiva numero (enintään 3).

Huomaa, kuinka monta merkkiä EMMET Elementti sisältää ja kuinka monta standardi HTML sisältää. Jopa tämä pieni koodinpätkä osoittaa, kuinka paljon aikaa voidaan tallentaa käyttämällä EMMET-lyhyt.

 & lt; nav & gt;
  & lt; ul & gt;
    & lt; li & gt; & lt; a href = "" class = "luku" & gt; luku 1
 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "" class = "luku" & gt; luku 2
 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "" class = "luku" & gt; luku 3
 3 & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt;

Emmet on myös tietoinen kontekstista. Jos esimerkiksi muokkaamme a & lt; pöytä & gt; On todennäköistä, että haluamme joitakin & lt; tr & gt; (Nämä ovat rivejä) elementtejä sen täyttämiseksi. Meidän on vain määriteltävä, kuinka monta tarvitsemme.

Tämä on vain nopea esimerkki siitä, mitä Emmet voi tehdä, mutta käytettävissä on paljon enemmän määritysvaihtoehtoja. Näihin kuuluvat CSS-muokkaus, BEM (Block Elementin modifiointi) luokan luominen ja jopa lorem ipsum generaattori.

On myös syytä huomata, että useimpien koodin toimittajien on joko EMMET rakennettu tai tukevat sitä laajennuksilla. Saatat lisätietoja tästä EMMET-dokumentointi sivu.

Käytä mopia dynaamista sisältöä varten

Vaikka Emmet on ihanteellinen staattiselle sisällölle, mitä tapahtuu, jos sisältöä on oltava dynaamisempi? Esimerkiksi voimme ehkä tuottaa henkilökohtaisia kotisivuja, monimutkaisia tilauspöytiä tai toistaa HTML: n yhteisiä lohkoja. Tämä on mahdollista JavaScriptissa, mutta tämän sisällön esijännitettä voi saada lisätyn nopeuden lisäämättä käyttäjän selaimeen. Muista, jos sinulla on media-raskas sivu, sinun kannattaa palauttaa sen luotettavasti pilvivarasto .

Askel eteenpäin mopsi. Tämä on HTML: n mallityökalu. Voit kirjoittaa sivuja ".pug" -formaatissa ja mopsi lukee kyseisen tiedoston, injektoidaan joitakin dynaamisia tietoja siihen ja palauttaa standardi HTML. Alla oleva esimerkki on, miten kirjoitat koodin mopsille, jotta voit luoda saman HTML: n EMMET-esimerkkinä (yllä).

 ul
  Jokainen Val in [1, 2, 3]
    liittää
      a (href = "", luokka = "luku") luku
# {val} 3

Pug-tiedosto käyttää sisennystä yksin osoittamaan pesintä.Se voi toistaa arvoja suuria määriä HTML: tä yhdellä passilla.Nämä ".pug" -tiedostot on suunniteltu uudelleen monta kertaa projektin yli.

Pug on asennettu asennukseen Package Managerista npm .Mutta jos haluat lisätietoja siitä, miten pääset alkuun mopilla, maksa vierailu verkkosivusto .

Tämä sisältö ilmestyi alun perin Web Designer -lehdestä.

Lue lisää:

10 parasta CSS-kehykset
CSS-animaatio Esimerkkejä uudelleen
8 HTML-tunnisteita sinun on käytettävä (ja 5 välttää)

HTML-koodin kirjoittaminen nopeammin

Luo html lennossa

Kuinka käyttää Emmet

Käytä mopia dynaamista sisältöä varten

Miten tehdään - Suosituimmat artikkelit

Linnun piirtäminen

Käytä Frameer X: tä interaktiivisten prototyyppien rakentamiseksi

Miten animoida Mo.js-kirjasto

Luo perspektiivi Adobe Illustratorissa

Affinity Designer: Verkkojen käyttö

Luo wobbly tekstivaikutus JavaScriptin kanssa

Maalaa karvainen lemmikkieläinten muotokuva

Kuinka maalata kaareva lasi avaruuskypärä

Luokat