Emmet, kas agrāk bija pazīstams kā Zen Coding, ir viens no labākajiem instrumentiem, kas jums jāpalielina produktivitātei, kodējot HTML vai CSS. Tas darbojas tāpat kā kodu pabeigšana, bet tas ir spēcīgāks un pārsteidzošāks. Tā spēj automatizēt HTML / CSS no vienkāršas formas uz sarežģītu.
Emmet piedāvā labu atbalstu teksta redaktoram vai IDE (Integrated Development Environment), piemēram, Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm un daudziem citiem. Tā atbalsta arī tiešsaistes rediģēšanas rīku, piemēram, JSFiddle, JSBin, CodePen, IceCoder un Codio .
Emmeta darbs ir, ievadot cilnes tastatūras taustiņu, kad esat pabeidzis sintakses rakstīšanu. Šādi ir visbiežāk izmantotie Emmet simboli. Lai redzētu tos darbībā, lūdzu, turpiniet lasīt.
Emmet - HTML labākie triki
Jūs būsiet pārsteigti, rakstot HTML ar Emmet, tāpat kā es. Kā minēts iepriekš, Emmet spēj saīsināt vienkāršu HTML ar ļoti sarežģītu. Un tie ir rakstīti tikai vienā koda rindā. Pēc noklusējuma, ja saīsināsiet nezināmu tagu nosaukumu, Emmet automātiski rakstīs rakstīto tagu. Lai viegli saprastu, skatiet tālāk redzamo animāciju.
1. Ligzdošana
Lai ligzdotu dažus elementus, jums ir nepieciešams pievienot lielāku zīmi > pēc katras izmantotās atzīmes. Piemēram, ja es vēlos, lai header ar nav, div, ul un li iekšpusē, man vajag rakstīt header>nav>div>ul>li un hit tab taustiņu.
2. Sibling
Ja nevēlaties ievietot savus elementus, varat vienkārši izmantot plus + zīmi, kam seko tagi, kurus vēlaties pievienot. Piemēram, header+section+article+footer sniegs citu vietu header, section, article un footer .
3. Uzkāpt
Kad atrodaties bērna elementā un vēlaties, lai ārpus šī bērna būtu vēl viens elements, jūs varat viegli uzkāpt vienā elementā ar ^ zīmi. Ja ierakstāt to divreiz, tad jūs uzkāpt dubultā elementā un tā tālāk. Piemēram, ja ievadāt header>div>h1>nav navigācijas elementa, jums joprojām būs h1 elements. Lai to izņemtu, vienkārši nomainiet pēdējo > zīmi ar ^ .
4. Pievienot klasi
Emmet arī var iekļaut jūsu vēlamo klases nosaukumu tagā. Jūsu izmantotais apzīmējums ir tāds pats kā klases selektors CSS, kas ir punkts . zīme. Piemēram, ja es gribu, lai div ar .container klasi, h1 ar .title un nav ar .fixed, tad man vienkārši ir jāraksta div.container>header>h1.title+nav.fixed .
Ja vēlaties, lai tajā būtu vairāk nekā viena klase, tad ievadiet pirmo klasi pēc pirmās klases kopā ar punktu . zīme. Piemērs: div.container.center .
5. Pievienojiet ID
Bez klases jūs varat pievienot ID arī tagā ar # zīmi. Lietošana ir tāda pati kā klases pievienošana, bet jūs nevarat ievadīt dubultā ID. Ja jūs mēģināt to darīt, Emmet lasīs tikai pēdējo ievadīto ID.
6. Pievienojiet tekstu
Emmet nav tikai vienkāršs, jo tikai saīsina dažus tagus, jūs pat varat pievienot teksta rindu. Lai pievienotu tekstu, jums vienkārši ir jāievelk teksts ar cirtainu kronšteinu {} . Jums nav nepieciešams pievienot lielāku > zīmi, jo teksts tiks automātiski pievienots tagam.
7. Pievienojiet atribūtu
Ja vēlaties pievienot citu atribūtu, izņemot klasi un ID, tikai vietu atribūtu, kuru vēlaties pievienot iekšpusē [] zīmei. Piemēram, es vēlos, lai attēlā būtu logo.png avots ar logotipu alt, tāpēc es vienkārši img[src="logo.png"] .
8. Grupēšana
Ja vēlaties, lai iekšpusē būtu vairāki ligzdoti elementi, tad grupējot tos ar () zīmi, tas būs viegli sasniedzams. Piemēram, es vēlos, lai konteiners, kuram ir virsraksts ar h1 un nav iekšpusē, un citu sadaļu ārpus galvenes, es vienkārši rakstīšu: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Reizināšana
Šī funkcija var kļūt par vienu no Emmet iecienītākajām. Tāpat kā ar reizināšanu, mēs varam reizināt jebkuru elementu tik daudz, cik mēs vēlamies. Lai to izmantotu, vienkārši pievienojiet zvaigžņu * zīmi pēc elementa, kuru vēlaties reizināt, un pievienojiet elementa numuru. Piemēram, es vēlos rakstīt piecus li elementus ul, tad pareizā sintakse ir ul>li*5 .
10. Automātiska numerācija
Automātiskā numerācija palīdzēs jums viegli uzrakstīt citu nosaukumu ar arvien lielāku skaitu. Šīs funkcijas pareizā sintakse ir dolāra $ zīme. Automātisko numerāciju vislabāk izmantot ar reizināšanu. Piemērs, es vēlos pievienot savu iepriekšējo vienumu ar klasi no item5 līdz item5 . Tātad, man tikai jāpievieno papildu klases nosaukums ar dolāra zīmi: ul>li.item$*5 .
11. Lorem
Ja esat pierakstījuši kādu lelles tekstu, atverot lipsum ģeneratoru, piemēram, lipsum.com, ar Emmet jums vairs nav jādara. Emmet atbalsta arī manekena teksta ģeneratoru ar lorem vai lipsum sintaksi. Varat arī norādīt, cik ilgi jūsu teksts kļūs. Piemēram, es vēlos saņemt tekstu ar 10 vārdiem, tad es ierakstīšu lorem10 .
12. Automātiskais dokuments
Sākot jaunu projektu, tā vietā, lai rakstītu html struktūru manuāli vai kopētu ielīmēšanu no citiem resursiem, Emmet to var izdarīt labāk. Viss, kas jums jādara, ir rakstīt izsaukumu ! zīme, hit tab un burvju notikt. Tas jums radīs HTML5 dokumenta struktūru, ja vēlaties izmantot HTML4, tad vienkārši ierakstiet html:4t .
13. Saite
Ja jums ir favicon, rss vai ārējais CSS fails, kuru vēlaties pievienot savam dokumentam, varat izmantot saiknes trikus, lai tos rakstītu ātrāk. Lai iekļautu favicon, ierakstiet link:favicon tad tas radīs jums favicon saiti ar noklusējuma favicon.ico faila nosaukumu. Un css, link:css radīs jums CSS saiti ar noklusējuma style.css stila nosaukumu. Un RSS būs rss.xml kā noklusējuma nosaukums.
Jūs varat apvienot tos ar plus + zīmi, lai radītu ātrākus resursus.
14. Enkurs
Pēc noklusējuma, ievadot tagu, tad hit tab, jūs saņemsiet pilnu tagu ar href atribūtu. Bet jūs varat pievienot // vērtību, ja to apvienojat ar saiti, piemēram, a:link . Un, ja vēlaties, lai tā vietā būtu e-pasta saite, tad izmantojiet a:mail .
15. Viedā izlaišana
Pēdējie HTML triki, ko es jums sniegšu, ir gudra izlaišanas funkcija. Būtībā, jums nav rakstīt tagu nosaukumu, ja vēlaties tajā iekļaut klasi vai id. Tas attiecas tikai uz dažiem nosacījumiem.
Pirmkārt, ja vēlaties, lai div ar ID vai klasi, jums nav nepieciešams rakstīt tagu, vienkārši tieši rakstiet ID vai klases simbolu kopā ar savu nosaukumu.
Otrkārt, kad esat iekšā ul tag, jūs izlaist rakstīt li tag, ja tai ir klase vai ID.
Un pēdējais tiek piemērots table tagā. Jūs varat izlaist rakstīšanas tr un td tagu, ja viņiem ir klase vai ID, un Emmet automātiski pievienos tos jums.
Emmet - labākie CSS triki
Pēc tam, kad uzzināsiet dažus HTML trikus, tagad ir pienācis laiks CSS. Daži no kopējiem simboliem, kas parādīti augšējā attēlā, nedarbosies ar CSS. Tie ir lielāki > un uzkāpt ^ simboli. Ja jūs tos izmantojat, tie radīs tāpat kā plus + simbolu. Tātad, ejam.
1. Platums un augstums
width un height ar Emmet ir ļoti vienkārša. Jums tikai jāievada pirmais vārds, kam seko izmērs, kuru vēlaties pievienot. Pēc noklusējuma, ja nenorādīsiet vienības, Emmet tos ģenerēs ar px vienību. Pieejamais vienības simbols ir procenti un em .
2. Teksts
Ir daži viegli lietojami teksta īpašuma simboli, un tie tiks ģenerēti ar noklusējuma vērtību. ta radīs text-align ar left vērtību, td būs text-decoration ar none vērtību, un tt kļūs text-transform ar uppercase vērtību.
3. Pamatinformācija
Lai pievienotu fonu, vienkārši izmantojiet bg saīsinājumu. Jūs varat apvienot to ar bgi lai iegūtu background-image, bgc background-color un bgr background-repeat . Varat arī rakstīt bg+ lai iegūtu pilnu fona īpašumu sarakstu.
4. Fonta seja
Plus zīme nav piemērojama tikai fonam. Attiecībā uz @font-face jūs varat vienkārši ierakstīt @f+ lai iegūtu pilnīgu @font-face īpašuma sarakstu. Ja @f bez plusa zīmes, tad jūs saņemsiet tikai pamata @font-face .
5. Dažādi
Citi lieliski triki ir jūs varat saīsināt rakstīšanas animation ar animation tekstu. Ja pievienojat mīnusa zīmi, animācijas īpašumu iegūsit ar pilnu vērtību. Ir arī @kf teksts, kas sniegs pilnu @keyframe sarakstu.
Secinājums
Emmet ir ļoti liels laika taupīšanas līdzeklis, lai racionalizētu savu attīstības procesu. Ja jūs vienkārši zināt Emmet, tas nav par vēlu to izmēģināt. Šie triki ir tikai daži no Emmet līdzekļiem. Emmetā ir īpaši simbols un sintakse, īpaši CSS. Vienkārši dodies uz Emmet docs vai apkrāptu lapu, lai turpinātu lasīt.
![Tas ir, kā internets ir padarījis pasaules zaļāku [Infographic]](https://gadget-info.com/img/tech/226/this-is-how-internet-has-made-world-greener.jpg)
