Naudodami formatavimo žymas galite puslapiuose paryškinti semantiškai svarbų tekstą, kurti ranka rašytus tekstus, įterpti į HTML dokumentai simbolius su viršutiniu ir apatiniu indeksu, taip pat padidinti ir sumažinti šrifto dydį.
Kas yra semantika?
Semantika HTML yra praktika, suteikianti reikšmę ir struktūrą dokumento turiniui naudojant atitinkamą žymą. Semantinis kodas apibūdina dokumento turinio reikšmę, neatsižvelgiant į jo stilių ar išvaizdą. Yra keletas semantinių elementų naudojimo pranašumų:
- semantinis kodas tiesiogiai veikia HTML kodo kiekį. Kuo mažiau kodo, tuo „lengvesnis“ dokumentas, o tai reiškia, kad tinklalapiai įkeliami greičiau ir reikalauja mažiau laisvosios kreipties atmintis vartotojo pusėje. Svetainė tampa greitesnė ir pigesnė.
- kompiuteriai, ekrano skaitytuvai kuriems svarbios žymos ir jų atributai, tinkamai perskaityti ir suprasti tinklalapio turinį.
- semantinis kodas jei visi kiti dalykai yra vienodi, paieškos sistemos rezultatuose bus rodomi aukščiau nei puslapis su nesemantiniu kodu.
Miniatiūra
Norėdami paryškinti tekstą ir atkreipti į jį dėmesį, naudosime įterptinį elementą . Yra dvi žymos, kurias galima naudoti norint paryškinti tekstą: žymos Ir . Svarbu suprasti jų semantinį skirtumą.
Žyma semantiškai naudojamas, kad tekstas būtų svarbesnis, todėl yra populiariausias paryškinto teksto pasirinkimas. Žyma , kita vertus, semantiškai reiškia stilistinį teksto išryškinimą, kuris ne visada Geriausias pasirinkimas už dėmesio vertą tekstą. Turite įvertinti teksto, kurio paryškinimą norite nustatyti, reikšmę ir pasirinkti atitinkamą žymą. Nors naršyklės juos rodo lygiai taip pat, paieškos sistemos gali suteikti jiems skirtingas reikšmes analizuojant puslapį.
HTML kodas su žymomis Ir :
Dėmesio: staigus nusileidimas.
Tai yra receptai Olivie Ir vinaigretas.
Pavyzdys: svarbus ir paryškintas tekstas
- Išbandykite patys"
Dėmesio: staigus nusileidimas. Tai yra receptai Olivie Ir vinaigretas.
Dėmesio: staigus nusileidimas.
Tai yra receptai Olivie Ir vinaigretas.
Kursyvas tekstas
Kursyvui, kuris taip pabrėžiamas, naudosime įterptinį elementą . Kaip ir naudojant paryškintus teksto žymes, yra dvi skirtingos žymos, kurios nustato tekstą kursyvu ir kiekviena turi savo semantinę reikšmę.
Žyma naudojamas norint pabrėžti teksto dalį – tai populiariausias kursyvo variantas. Kitas variantas yra naudoti žymą , kuris naudojamas tiesiog kursyviniam tekstui kurti.
HTML kodas su žymomis Ir :
aš myliu Tėvynė!
vardas Viktorija reiškia pergalę.
Žymos Ir
Žyma Sumažina šrifto dydį vienu, palyginti su įprastu tekstu. HTML šrifto dydis matuojamas savavališkais vienetais nuo 1 iki 7, vidutinis numatytasis teksto dydis yra 3. Taigi, pridedant žymą sumažina tekstą vienu sutartiniu vienetu. Žyma priešingai, jis padidina šrifto dydį vienu, palyginti su įprastu tekstu.
HTML kodas su žymomis Ir :
Tai normalus tekstas.
Tai tekstas su mažesnėmis raidėmis.
Tai tekstas su didžiosiomis raidėmis.
Pavyzdys: sumažintas ir padidintas šriftas
- Išbandykite patys"
Tai normalus tekstas.
Tai tekstas su mažesnėmis raidėmis.
Tai tekstas su didžiosiomis raidėmis.
HTML žyma
Žyma naudojamas tekstui paryškinti ar paryškinti dėl jo aktualumo kontekste. Geras pavyzdys yra paryškinti žodį, kurio vartotojas ieškojo dokumente. Paprastai naršyklėse konteineryje esančio teksto fono spalva yra paryškintas geltonai kaip rašalo žymeklis.
HTML žyma
Žyma naudojamas paryškinti tekstą, kuris buvo pašalintas iš naujos dokumento versijos. Šis formatavimas leidžia stebėti, kokie pakeitimai buvo atlikti pataisytame dokumento tekste. Naršyklės paprastai žymi tekstą konteineryje kaip perbrauktas
.
HTML žyma
Žyma skirtas paryškinti pridėtą tekstą nauja versija dokumentas. Šis formatavimas leidžia stebėti, kuri turinio dalis buvo pridėta Paskutiniai pakeitimai dokumentas. Naršyklės paprastai žymi tekstą konteineryje .
HTML žyma
Žyma rodomas tekstas apatiniame indekse. Tekstas yra žemiau likusių eilutės simbolių ir yra sumažinto dydžio. Toks tekstas gali būti naudojamas praktiškai, pavyzdžiui, rašant įvairias formules apatiniame indekse .
HTML žyma
Žyma rodomas tekstas viršutiniu indeksu. Tekstas atrodo mažesnis ir didesnis nei likusių eilutės simbolių pradinė linija. Toks tekstas gali būti naudojamas praktiškai, pavyzdžiui, rašant įvairias formules ar išnašas viršutiniame indekse .
Eilučių lūžiai ir horizontalios linijos
Žyma
(eilinis vertimas)
Kaip matėte anksčiau, žyma
Leidžia logiškai ir fiziškai atskirti vieną teksto pastraipą nuo kitos, bet ką daryti, jei reikia perkelti tekstą pastraipoje į nauja linija? Viena žyma sukurta specialiai šiems tikslams.
. Vienas iš matomų skirtumų tarp šios žymos ir
Ar nėra įtraukos po ir prieš žymą
. Tai leidžia gretimas teksto eilutes išdėstyti arčiau viena kitos. Galimybė savarankiškai nustatyti perdavimo vietą gali būti naudinga įrašant poeziją arba atskiriant įvairius dokumento elementus. Pridėti elementą
bet kurioje eilutėje, kurioje norite nutraukti teksto srautą ir įterpti eilutės lūžių.
Žyma
(horizontali linija)
Horizontalios linijos leidžia padalyti ilgą, formaliai atvirą tekstą į atskirus poskyrius. Horizontalios linijos žiniatinklio dokumente atlieka tą patį vaidmenį kaip dekoratyvinės juostelės spausdintuose leidiniuose. Viena žyma naudojama horizontaliai linijai įterpti
. Ši bloko viena žyma leidžia įterpti horizontalią juostą, kurios plotis yra arba visas konteinerio, kuriame įdėta žyma, plotis arba naršyklės lango plotis.
Pavyzdys: linijų lūžiai ir horizontalios linijos
- Išbandykite patys"
Šios eilutės atskiriamos viena nuo kitos pastraipa (p):
Tai pirmoji pastraipa.
Tai yra antra pastraipa.
Tai yra eilutė:
Šios eilutės yra atskirtos viena nuo kitos naudojant br žymą:
Mūsų Tanya garsiai verkia
Į upę numetė kamuolį
HTML kodas su žymomis
,
,
,
,
:
Tekste yra žodis: sėkmė.
Žodis bėda buvo pašalintas iš teksto.
Žodis pergalę buvo pridėtas prie teksto.
Vandens formulė: N 2 O.
Vėjo greitis: 20 m 3/sek.
Pavyzdys: teksto formatavimas
- Išbandykite patys"
Tekste yra žodis: sėkmė. Žodis bėda pašalintas iš teksto. Žodis buvo pridėtas prie teksto. Vandens formulė: H 2 O. Vėjo greitis: 20m 3 /sek.
Tekste yra žodis: sėkmė.
Žodis bėda buvo pašalintas iš teksto.
Žodis pergalę buvo pridėtas prie teksto.
Vandens formulė: N 2 O.
Vėjo greitis: 20 m 3/sek.
Užduotys
Galutinė užduotis
Šioje pamokoje sužinojote apie elementus, skirtus mažoms frazėms ir atskiriems žodžiams žymėti. Ypatingas dėmesys buvo skiriamas loginiam teksto išdėstymui naudojant žymes, nurodančius žodžio ar frazės svarbą, o ne tik vaizdinį formatavimą.
Atėjo laikas peržiūrėti tai, ko išmokote, ir atlikti penkias paprastas užduotis:
Semantiškai stiprus žodis
- Spręskite patys"
Paryškinkite žodį „profesionalas“ paryškintu šriftu, taip nurodydami ypatingą šio žodžio semantinę svarbą.
Turite tapti savo srities profesionalu
Tu turi tapti profesionalus tavo reikalas
Žodžio akcentas
- Spręskite patys"
Pabrėžkite žodį „pilnas“. Šiuo atveju vizualiai šis žodis turėtų būti rodomas kursyvu.
Tai lemia teksto lygiavimas išvaizda ir pastraipos kraštų orientaciją ir gali būti kairėn, dešinėn, centre arba išlyginta. Lentelėje 1 paveiksle parodytos teksto bloko lygiavimo parinktys.
| Lygiavimas į kairę | Teisingas lygiavimas | Išlygiavimas centre | Pateisinimas |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Dažniausia parinktis yra lygiuojama kairėje, kai kairėje esantis tekstas nustumiamas į kraštą, o tekstas dešinėje lieka dantytas. Lygiavimas dešinėje ir centre pirmiausia naudojamas antraštėse ir paantraštėse. Turėkite omenyje, kad naudojant pagrindimą, tekste tarp žodžių gali atsirasti didelių tarpų, o tai nėra labai patrauklu.
Pastraipos žyma paprastai naudojama teksto lygiavimui nustatyti
Su lygiavimo atributu, kuris nurodo lygiavimo metodą. Taip pat galima sulygiuoti teksto bloką naudojant žymą
| HTML kodas | apibūdinimas |
|---|---|
| Prideda naują teksto pastraipą, sulygiuotą kairėje pagal numatytuosius nustatymus. Mažos vertikalios įtraukos automatiškai pridedamos prieš ir po pastraipų. | |
Tekstas |
Išlygiavimas centre. |
Tekstas |
Lygiavimas į kairę. |
Tekstas |
|
Tekstas |
Pločio išlyginimas. |
| Išjungiamas automatinis eilučių vyniojimas, net jei tekstas platesnis nei naršyklės langas. | |
| Tekstas |
Leidžia naršyklei pertraukti eilutę nurodytoje vietoje, net jei naudojama žyma |
Tekstas
|
Išlygiavimas centre. |
Tekstas
|
Lygiavimas į kairę. |
Tekstas
|
Teisingas lygiavimas. |
Tekstas
|
Pločio išlyginimas. |
Elementų lygiavimas kairėje yra nustatytas pagal numatytuosius nustatymus, todėl nereikia jo nurodyti dar kartą. Taigi align="left" galima praleisti.
Skirtumas tarp pastraipos (žyma
) ir pažymėkite
Lygiavimo atributas yra gana universalus ir gali būti taikomas ne tik pagrindiniam tekstui, bet ir tokioms antraštėms kaip
. 1 pavyzdyje parodyta, kaip tokiu atveju nustatyti lygiavimą.
1 pavyzdys: teksto lygiavimas
Kaip pagauti liūtą?
Brutalios jėgos metodas
Dykumą suskirstome į keletą elementarių sričių, kurių dydis sutampa su bendrais liūto matmenimis, bet yra mažesnis už narvo dydį. Tada paprasta paieška nustatome vietovę, kurioje yra liūtas, o tai automatiškai veda prie jo gaudymo.
Dichotomijos metodas
Dykumą padaliname į dvi dalis. Vienoje dalyje yra liūtas, kitoje nėra. Paimame pusę, kurioje yra liūtas, ir vėl padalijame per pusę. Taip kartojame, kol liūtas sugaunamas.
Pavyzdžio rezultatas parodytas fig. 1.
Ryžiai. 1. Lygiuokite tekstą į dešinę ir į kairę
IN šiame pavyzdyje Pavadinimas sulygiuotas su naršyklės lango centru, paryškinta pastraipa lygiuojama į dešinę, o pagrindinis tekstas – į kairę.
Ar jums patinka jūsų CSS kodas taip pat, kaip aš? Jei taip, tuomet, žinoma, pasistenkite, kad jis ne tik elgtųsi ir jaustųsi gerai, bet ir gražiai atrodytų.
Tikiuosi, kad toliau aprašyti įrankiai padės jūsų kodui priartėti prie idealo.
1.Styleneat
Turbūt pati paprasčiausia paslauga, pateikta apžvalgoje.Įrankis neturi daug galimybių:
- Rūšiuoti savybes abėcėlės tvarka
- Rinktuvų rūšiavimas abėcėlės tvarka (jei pažymėta „Saugus tvarkymas“, ši parinktis negalima)
- Galimybė pasirinkti formatavimo stilių: kelių eilučių arba vienos eilutės
- Gali ištraukti CSS failus, prijungtus naudojant importavimą, į pagrindinį failą ir negailestingai juos apdoroti
- Galite pateikti kodą apdorojimui naudodami: teksto lauką, įkeldami failą arba pateikdami nuorodą į CSS
- Rezultatą galima gauti kaip CSS kodą arba įkelti failą
2. Formatas CSS
Nepaisant grėsmingos išvaizdos, instrumentas puikiai susidoroja su savo funkcijomis, kurių turi daug.
Galite daug konfigūruoti:
- tarpų / skirtukų / naujų eilučių išdėstymas,
- rūšiavimo ypatybės ir parinkiklio pavadinimai,
- ypatybių pavadinimų ir parinktuvų konvertavimas į mažąsias raides ir kt.
3. CleanCSS
Užteks galingas įrankis, kuri suteikia mums daug galimybių:
- Galite pateikti CSS nukopijuodami įklijuodami lauką „CSS kodas“ arba kaip nuorodą į stiliaus failą
- Rezultatą galite gauti kaip tekstą arba kaip failą.
- Vartotojas gali pasirinkti iš 4 šaltinio formatavimo tipų: kodą galima optimizuoti mažiausiam dydžiui arba, atvirkščiai, geresniam skaitomumui. Lauke „Custom template“ galima nustatyti formatavimo šabloną
- Geba derinti taisykles ir sumažinti nuosavybės įrašus į trumpą formą
- Jei reikia, pašalinkite komentarus ir netinkamus apibrėžimus
- Kaip ir aukščiau aprašytos paslaugos, ji mielai surūšiuos viską, ko tik širdis geidžia abėcėlės tvarka ir konvertuos į mažąsias / didžiąsias raides.
UPD> Komentaruose jie pasiūlė nuorodą į šios paslaugos dvynį: CodeBeautifier. Funkcijų rinkinys beveik identiškas CleanCSS (paslauga taip pat veikia CSSTidy).
4.ProCSSor
Mano patyrusiu nuomone, tai patogiausia iš visų šioje apžvalgoje pateiktų.
Paslauga vartotoją pasitinka malonia sąsaja ir labai aiškiais iššokančiais patarimais, leidžiančiais greitai suprasti nustatymus.
Kaip ir bet kuris save gerbiantis gražuolis, ProCSSor priims kodą iš mūsų įvesties lauke, failo ar nuorodos pavidalu. Jis išsiųs rezultatą į naršyklę ir parodys nuorodą, kad galėtumėte atsisiųsti failą.
Įrankis turi pakankamai nustatymų, kad patiktų beveik bet kuriam vartotojui, nereikia jų išvardyti ypatinga prasmė- Geriau iš karto pabandyk.
Maloni paslaugos savybė yra galimybė išsaugoti nustatymus, kad kitą kartą galėtumėte praleisti nustatymų veiksmą ir iškart pereiti prie tobulinimo proceso.
Dar viena atrakcija - „ProCSSor“ teikia API, dokumentaciją rasite čia:
Pagrindinis formatavimo uždavinys – padaryti tekstą skaitomu ir suprantamu jo struktūra. Yra net ištisi vadovai, kaip formatuoti kodus, kuriuose aprašyta tokia smulkmena kaip tarpų skaičius ar riestųjų breketų įtrauka. Tiesą sakant, viskas yra daug paprasčiau – visiškai pakanka, kad kodas būtų vizualiai įskaitomas, o tarpai ar lentelės yra smulkmena.
Tačiau noriu pasakyti, kad jei ketinate skelbti kodą kitiems žmonėms, turėsite laikytis tam tikro „bazinio standarto“.
Blokų paminkštinimas
Kiekvienas įdėtas blokas turi turėti didesnę kairiąją paraštę nei pirminis.
Tai reiškia, kad kuriame vaizdinę žymų hierarchiją, kurią lengva naršyti. Palyginkite su „plokščiu stiliumi“:
Modernus teksto redaktoriai, pavyzdžiui, „Notepad++“ automatiškai padaro tokią įtrauką „Enter“, o tai visiškai pašalina problemas, susijusias su jų rankiniu išdėstymu. Tai užtikrina, kad pradžios žyma visada turi uždarymo žymą.
„Uždarymo“ blokai
Jūsų kode gali būti situacija, kai blokai visada iškart seka vienas kitą. Tokiu atveju jums nereikia jų dalyti tarpusavyje ir nedaryti papildomos įtraukos.
Šiame pavyzdyje div.layout-center-wrap visada yra tiesioginis div.layout-wrap antrinis elementas be pertraukos. Tokius blokus vizualiai galima žiūrėti kaip vieną. Štai dar vienas pavyzdys, kai blokai gali būti dedami tame pačiame lygyje.
Čia svarbiausia nepersistengti: vienoje eilutėje / lygyje neturėtumėte dėti daugiau nei 2–3 blokus. Jei tekstas ar kodas yra tarp blokų, tada jie tikrai turėtų būti dedami į skirtingas eilutes.
Šis formatavimas netinka. Teisingas būdas būtų:
Tarpas arba skirtukas
Nesvarbu. Naudokite tai, kas jums labiausiai patinka. Kiek žinau, beveik visi programuotojai naudoja tabulatorių, nes tam reikia tik vieną kartą paspausti Tab klavišą.
Jei tai darote su tarpais, tada kiekvienai įtraukai reikia paspausti 4 tarpus. Dažna problema Bėda ta, kad per klaidą galima paspausti ne 4, o 3, 5 ar kokį kitą skaičių ir tokiu atveju reikia arba skaičiuoti klavišų paspaudimus, arba vizualiai kontroliuoti rezultatą.
Šiuo atžvilgiu tabulatorius yra daug „patikimesnis“. Techniniu požiūriu nesvarbu, ar tai yra tabulatorius, ar tarpai (HTML kodas vis tiek bus suspaustas).
Kelių tarpų naudojimas yra tabulatoriaus modeliavimas. Taigi šis klausimas yra naudojimo srityje. Bet jei nuspręsite naudoti tarpus, kiekvienai įtraukai turi būti 4 simboliai, kitaip tekstas praras skaitomumą. Yra gidai, kur rekomenduojama dėti 2 tarpus, bet man toks kodas vizualiai „netvarkingas“.
Viršutinė ir apatinė raidės
Jei mes kalbame apie HTML, tada visos žymos turi būti mažosiomis raidėmis. Techniškai, vėlgi, nesvarbu, bet didžiosios raidės sunkiai įskaitomos. Todėl visos žymos ir jų atributai rašomi griežtai mažosiomis raidėmis.
Jei mes kalbame apie programavimo kalbas, tada, kaip taisyklė, jos yra skiriamos didžiosioms ir mažosioms raidėms, todėl didžiosios raidės naudojamos tik tada, kai reikia.
Viengubos ir dvigubos kabutės
Beveik visada naudojamos dvigubos kabutės. Įterpiant JS kodą į HTML puslapį, gali susidaryti situacija, kai reikalingos dviejų tipų citatos:
Šiame pavyzdyje atributas html yra apsuptas dvigubomis kabutėmis, o js kode jau naudojamos pavienės kabutės. Neįmanoma naudoti tik vienos rūšies.
Todėl taisyklė dėl kabučių HTML ir CSS paprasta: pagrindinės kabutės yra dvigubos, o jei jų trūksta, tada naudojame pavienes.
Neprivalomos uždarymo žymos
Čia viskas paprasta – mes visada tai nustatome. Tai taikoma žymoms P, LI ir kt.
Pasvirasis brūkšnys atskirų žymų pabaigoje
Mes niekada nedarome. Tai senojo XHTML standarto reliktas. Taip negerai:
Tikra tiesa:
Atributų tvarka žymose
Klasė visada pateikiama pirma. Tiesą sakant, analizuojant išdėstymą, visada žiūrima į žymą ir jos klases, o tada į likusius atributus.
Atributai, kurie gali būti pavieniai (kaip privalomi), geriausiai nurodomi paskutiniai:
Tuščios klasės / atributai turėtų būti pašalinti.
CSS kodo formatavimas
Klasė dedama į atskirą eilutę ir atidaro ypatybių bloką (()).
T etiketė (spalva: balta; fonas: mėlynas; šrifto dydis: 0,75 tšk.; užpildas: 1 piks. 10 piks.; kraštinės spindulys: 3 piks.; )
Jei vienu metu nurodomos kelios klasės, jos dedamos į atskiras eilutes:
Straipsnis, nuošalyje, poraštė, antraštė, naršymas, skyrius (rodyti: blokuoti; )
Jei klasė yra trumpa ir susideda iš vienos savybės, tada ją galima įdėti į vieną eilutę:
W100-max ( maksimalus plotis: 100 %; ) .w-hide ( ekranas: nėra; ) .w-auto ( plotis: automatinis; )
Matavimo vienetai nėra rašomi nuliui (kur tai nesvarbu), vietoj 0px turėtumėte tiesiog nurodyti 0 .
U trupmeniniai skaičiai su nuliu, vietoj 0.8em geriau nurodyti .8em . Tačiau ši sąlyga nėra privaloma ir galite naudoti bet kurią parinktį, svarbiausia, kad vienodumas būtų bent vieno css failo lygiu.
Jei ypatybė palaiko stenografinę žymėjimą, ją galima naudoti, pavyzdžiui, vietoj paraštės: 0 20px 0 20px; galite nurodyti paraštę: 0 20px;
Jei spalvos reikšmę galima sutrumpinti, tai galima padaryti, pavyzdžiui, vietoj #FFAA88 nurodykite #FA8 . Čia svarbus punktas Bėda ta, kad dažnai ši spalva nustatoma ne rankiniu būdu, o nukopijuojama iš lašintuvų programų. Paprastai jie naudoja pilnas rekordas iš 6 skaitmenų. Be to, kai kurios programos pateikia mažąsias raides, o kitos – didžiąsias: #FFAA88 arba #ffaa88 . Todėl spalvai nustatyti tinka bet kokia parinktis. Kaskart rankiniu būdu keisti didžiąsias raides yra kvaila.
Raidžių spalvų pavadinimus reikia naudoti atsargiai ir geriausia juos naudoti tik prototipų kūrimo etape. Gautame kode geriau juos pakeisti šešioliktainės reikšmės, pavyzdžiui, vietoj spalvos: raudona; reikia nurodyti spalvą: #F00; . Šis metodas leis jums pakeisti spalvą tiesiogiai kodo rengyklėje, pvz., Notepad++ (jis reaguoja į # simbolį).
CSS ypatybių tvarka gali būti bet kokia. Galite juos užsisakyti papildymo tvarka, galite sugrupuoti pagal funkcionalumą. Techniškai tvarka gali būti bet kokia, todėl čia nėra taisyklių.
Reikėtų suprasti, kad CSS kodo formatavimas yra tik įprastas susitarimas. Realiai tokį kodą suglaudins ir sumažins Sass kompiliatorius. Jei jums reikia formatuoti, kad galėtumėte peržiūrėti, niekas sveiko proto to nepadarys rankiniu būdu: yra daugybė internetinių paslaugų, leidžiančių gražiai suformatuoti kodą su bet kokiais nustatymais. Todėl CSS formatavimas reikalingas tik kūrimo etape.
Kartais mūsų kodas ne visada yra tobulas. Ir labai noriu, kad jis būtų ne tik funkcionalus, bet ir gražiai suprojektuotas bei suformatuotas. Laikas yra pagrindinis mūsų priešas, jis retai leidžia mums laikytis kodo dizaino taisyklių. Stengiamės greitai užbaigti maketą arba aprašyti keliolika CSS stilių ir tai darome skaitomumo sąskaita. Šiame straipsnyje pateiksiu sąrašą paslaugų, kurios padės suformatuoti kodą taip, kad būtų malonu žiūrėti.
Ar turėtumėte pasitikėti programa, ar viską daryti rankiniu būdu?
Tikrai turite klausimą: kaip padaryti kodą skaitomą? Ar programa gali teisingai išdėstyti visas įtraukas ir eilučių pertraukas taip, kad žmogaus akis gautų tik estetinį malonumą žiūrėdama kodą? Žinoma, kad gali! Neapsigaukite, kadangi robotas iš esmės atlieka darbą už jus, jis bus atliktas „nešvariai“. Paslaugos, kurios bus pristatytos žemiau esančiame straipsnyje, mane išgelbėjo ne kartą. Pavyzdžiui, situacijose, kai reikėjo tą patį nukopijuoti html kodas iš kitos svetainės, o įdėjus žymos pasirodė tiesiog išdėstytos tam tikra chaotiška tvarka išilgai linijų: daug skirtukų, nelogiškų eilučių lūžių, visiškai nesimato jokio lizdo! Tai tikriausiai žinoma daugeliui. Ir labai noriu, kad jūsų svetainė atrodytų kitaip: tvarkinga ir lengvai skaitoma. Juk visų pirma tai darome dėl savęs, dėl to, kad būtų patogu toliau palaikyti tą ar kitą kodą.
Suformatuokime kodą
Mažiau kalbėkite, daugiau dirbkite. Kaip parodė praktika, kodo formatavimas internete yra gana paprastas. Viskas, ką jums reikia padaryti, tai nukopijuoti nešvarų kodą ir įklijuoti jį į specialius teksto laukus vienoje iš nurodytų svetainių. Tada paspauskite mygtuką, šiek tiek palaukite ir - voila! Gaunate gražų, suformatuotą ir lengvai skaitomą kodą.
Čia yra visų man žinomų kodų „valytuvų“, skirtų įvairioms kalboms, sąrašas.
