„Emmet“, anksčiau žinomas kaip „Zen Coding“, yra vienas iš geriausių įrankių, kuriuos turėtumėte padidinti produktyvumą, koduodami HTML arba CSS. Jis veikia kaip kodo užbaigimas, bet jis yra galingesnis ir nuostabesnis. Jis gali automatizuoti HTML / CSS nuo paprastos formos iki sudėtingo.
„Emmet“ siūlo puikią paramą teksto redaktoriui arba IDE (Integrated Development Environment), pvz., „ Dreamweaver“, „Eclipse“, „Sublime“ tekstui, „TextMate“, „Expresso“, „Coda“, „Brackets“, „Notepad ++“, „PHPStorm“ ir daugeliui kitų. Jis taip pat palaiko interneto redagavimo įrankį, pvz., JSFiddle, JSBin, CodePen, IceCoder ir Codio .
„Emmet“ būdas yra įvesti klaviatūros klavišą, kai baigsite rašyti sintaksę. Toliau pateikiami dažniausiai naudojami „Emmet“ simboliai. Jei norite juos matyti, tęskite skaityti.
Emmet - HTML geriausi gudrybės
Būsite nustebinti rašydami HTML su „Emmet“, kaip aš. Kaip minėta anksčiau, Emmetas gali sutrumpinti paprastą HTML į labai sudėtingą. Ir jie parašyti tik vienoje kodo eilutėje. Pagal nutylėjimą, jei sutrumpinsite nežinomą žymės pavadinimą, „Emmet“ automatiškai užrašys jūsų parašytą žymą. Jei norite lengvai suprasti, žiūrėkite animaciją.
1. Lizdavimas
Jei norite įdėti kai kuriuos elementus, po kiekvienos norimos naudoti žymės reikia pridėti didesnį ženklą > . Pavyzdžiui, kai aš noriu turėti header su „ nav, „ div, „ ul ir „ li tiesiog reikia įrašyti header>nav>div>ul>li ir „hit tab“ klavišą.
2. Siblingas
Jei nenorite sudėti savo elementų, galite tiesiog naudoti pliuso + ženklą ir žymes, kurias norite pridėti. Pavyzdžiui, header+section+article+footer suteiks kitokią vietą header, section, article ir footer .
3. Išlipkite
Kai esate vaiko elemento viduje ir norite turėti kitą elementą už šio vaiko, galite lengvai lipti vienu elementu su ^ ženklu. Jei įvesite jį du kartus, tada jums pakils dvigubas elementas ir pan. Pavyzdžiui, jei įvedate header>div>h1>nav navigacijos elementas vis tiek bus h1 viduje. Norėdami jį ištrinti, tiesiog pakeiskite paskutinį > ženklą su ^ .
4. Pridėti klasę
Emmet taip pat gali įtraukti jūsų pageidaujamą klasės pavadinimą į žymę. Ženklas, kurį naudosite, yra tas pats kaip klasės selektorius CSS, kuris yra taškas . ženklas. Pavyzdžiui, jei noriu turėti div .container klasę, h1 su .title ir nav su .fixed, tada aš tiesiog turiu parašyti div.container>header>h1.title+nav.fixed .
Jei norite turėti daugiau nei vieną klasę viduje, įveskite savo papildomą klasę po pirmos klasės kartu su tašku . ženklas. Pavyzdys: div.container.center .
5. Pridėti ID
Be klasės, taip pat galite pridėti ID savo žymenyje su # ženklu. Naudojimas yra toks pat, kaip pridedant klasę, bet negalite įvesti dvigubo ID. Jei bandysite tai padaryti, „Emmet“ perskaitys tik paskutinį jūsų įvestą ID.
6. Pridėti tekstą
Emmetas yra ne tik toks paprastas, kaip tik sutrumpinti kai kurias žymes, bet netgi galite pridėti teksto eilutę. Jei norite pridėti šiek tiek teksto, tekstą reikia suvynioti su garbanotu {} ženklu. Jums nereikės pridėti didesnio > ženklo, nes tekstas bus automatiškai įtrauktas į žymą.
7. Pridėti atributą
Jei norite pridėti kitą atributą, išskyrus klasę ir ID, tiesiog vietovės atributas, kurį norite pridėti vidinio laikiklio [] ženklu. Pvz., Noriu turėti paveikslėlį, kurio logotipas yra logo.png su logotipu alt, taigi aš tiesiog img[src="logo.png"] .
8. Grupavimas
Jei norite turėti elementą su keliais įdėtomis vidinėmis dalimis, tada grupavimas juos su () ženklu padės jums tai pasiekti lengvai. Pavyzdžiui, noriu turėti konteinerį, kuriame yra antraštė su h1 ir ne viduje, o kitą skyrių už antraštės, tiesiog parašysiu: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Daugyba
Ši funkcija gali tapti vienu iš mėgstamiausių „Emmet“. Kaip ir dauginimosi atveju, mes galime dauginti bet kokį elementą tiek, kiek norime. Norėdami jį naudoti, tiesiog pridėkite žvaigždės * ženklą po elemento, kurį norite padauginti, ir pridėti elemento numerį. Pavyzdžiui, aš noriu parašyti penkis li elementus ul, tada teisinga sintaksė yra ul>li*5 .
10. Automatinis numeravimas
Automatinis numeravimas padės jums lengvai užrašyti kitą pavadinimą su vis daugiau. Tinkama šios funkcijos sintaksė yra dolerio $ ženklas. Automatinis numeravimas geriausiai naudojamas dauginant. Pavyzdžiui, noriu pridėti savo ankstesnį elementą su klasė iš elemento1 į item5 . Taigi, aš tiesiog turiu pridėti papildomą klasės pavadinimą su dolerio ženklu: ul>li.item$*5 .
11. Lorem
Jei parašėte šiek tiek tekstinį tekstą, atidarydami lipsum generatorių, pvz., Lipsum.com, su Emmet jums nereikės to padaryti. „Emmet“ taip pat palaiko manekeno generatorius su lorem arba lipsum sintakse. Taip pat galite nurodyti, kiek laiko jūsų tekstas taps. Pavyzdžiui, noriu turėti tekstą su 10 žodžių lorem10, tada aš lorem10 .
12. Automatinis dokumentas
Kai pradedate naują projektą, užuot rašę html struktūrą rankiniu būdu arba nukopijuodami įklijuoti iš kitų išteklių, „Emmet“ gali tai padaryti jums geriau. Viskas, ką jums reikia padaryti, yra rašyti šauktuką ! ženklas, tab tab ir magija. Tai jums sukurs HTML5 dokumento struktūrą, jei norite naudoti HTML4, tada tiesiog įveskite html:4t .
13. Nuoroda
Jei turite favicon, rss arba išorinį CSS failą, kurį norite pridėti prie dokumento, galite naudoti nuorodų gudrybes, kad juos rašytumėte greičiau. Norėdami įtraukti favicon, įrašykite link:favicon tada jis generuos jums favicon nuorodą su numatytu favicon.ico failo pavadinimu. Ir css, link:css generuos CSS nuorodą su numatytu stiliaus stiliaus pavadinimu. RSS bus rss.xml kaip numatytasis pavadinimas.
Jei norite sukurti greitesnius išteklius, juos galite sujungti su pliuso + ženklu.
14. Inkaras
Pagal numatytuosius nustatymus, kai įvedate žymą, spustelėkite skirtuką, gausite pilną žymą su href atributu viduje. Bet jūs galite pridėti // reikšmę, jei ją sujungiate su nuoroda, pvz a:link . Ir jei norite vietoj to susieti el. Pašto nuorodą, naudokite a:mail .
15. Protingas praleidimas
Paskutiniai HTML gudrybės, kuriuos tau duosiu, yra protingas praleidimo funkcija. Iš esmės, jūs neturite rašyti žymos pavadinimo, jei norite, kad joje būtų klasė arba ID. Tai taikoma tik kai kurioms sąlygoms.
Pirma, jei norite turėti ID su ID ar klasės viduje, nereikia rašyti žymos pavadinimo, tiesiog rašykite ID arba klasės simbolį kartu su jo pavadinimu.
Antra, kai viduje yra „tag“ žymė, praleidžiate „ li žymos rašymą, jei jis turi klasę arba ID.
Ir paskutinis taikomas table žyma. Galite praleisti rašymo tr ir td žymes, jei jie turi klasę arba ID, o Emmet automatiškai juos pridės jums.
Emmet - geriausi CSS gudrybės
Kai sužinosite keletą HTML triukų, dabar atėjo laikas CSS. Kai kurie bendrieji simboliai, rodomi viršutiniame vaizde, neveiks su CSS. Jie yra didesni > ir pakilti ^ simboliais. Jei juos naudosite, jie gamins kaip ir pliuso + simbolį. Taigi, eikime.
1. Plotis ir aukštis
Ploto ir height su Emmet yra labai paprasta. Jums tereikia parašyti pirmąjį jų žodį, po kurio nurodomas dydis, kurį norite pridėti. Pagal nutylėjimą, jei nenurodysite vienetų, „Emmet“ generuos juos su px vienetais. Galimas vieneto simbolis yra procentas ir em .
2. Tekstas
Yra keletas lengvai naudojamų teksto nuosavybės simbolių ir bus sukurta pagal numatytąją vertę. ta generuos text-align su left verte, td bus text-decoration be none reikšmės, o tt taps text-transform su uppercase .
3. Pagrindai
Jei norite pridėti foną, tiesiog naudokite bg santrumpą. Galite sujungti jį su bgi kad gautumėte background-image, bgc background-color ir bgr background-repeat . Taip pat galite parašyti „ bg+ kad gautumėte visą fono savybių sąrašą.
4. Šrifto veidas
Pliuso ženklas netaikomas tik fonui. Jei naudojate „ @font-face, galite tiesiog parašyti @f+, kad pateiktumėte visą „ @font-face turto sąrašą. Jei @f be pliuso ženklo, gausite tik pagrindinį @font-face .
5. Įvairūs
Kiti puikūs gudrybės yra sutrumpinti rašymo animation su animation tekstu. Jei pridėsite minuso ženklą, jūs gausite pilną vertę animacijos savybę. Taip pat yra @kf tekstas, kuriame bus pateiktas visas @keyframe sąrašas.
Išvada
„Emmet“ yra labai didelė laiko taupymo priemonė, skirta racionalizuoti savo kūrimo procesą. Jei tik žinote, „Emmet“, tai nėra per vėlu išbandyti dabar. Šie gudrybės yra tik keletas „Emmet“ funkcijų. Emmete yra daug kitų simbolių ir sintaksų, ypač CSS. Tiesiog pereikite prie Emmeto dokumentų arba apgaudinėkite lapą, kad galėtumėte toliau skaityti.
