Sākuma tīmekļa dizainerim var būt grūti saprast atstarpes un elementu fizisku atdalīšanu HTML. Tas ir tāpēc, ka HTML ir īpašums, kas pazīstams kā "atstarpes sabrukums". neatkarīgi no tā, vai HTML kodā ierakstāt 1 atstarpi vai 100, tīmekļa pārlūkprogramma šīs vietas automātiski sakļauj tikai vienā atstarpē. Tas atšķiras no tādas programmas kā Microsoft Word, kas ļauj dokumentu veidotājiem pievienot vairākas atstarpes atsevišķiem vārdiem un citiem šī dokumenta elementiem. Tā nedarbojas vietņu dizaina atstarpes.
Tātad, kā pievienot HTML atstarpes, kas parādās izveidotā tīmekļa lapa? Šajā rakstā ir apskatīti daži no dažādajiem veidiem.
Vietas HTML ar CSS
Vēlamais veids, kā pievienot atstarpes HTML, ir Kaskādes stila lapas (CSS). CSS ir jāizmanto, lai pievienotu visus tīmekļa lapas vizuālos aspektus, un, tā kā atstarpe ir daļa no lapas vizuālā dizaina īpašībām, CSS ir vieta, kur vēlaties to izdarīt.
CSS varat izmantot vai nu piemales, vai pildījuma īpašības, lai pievienotu atstarpi ap elementiem. Turklāt rekvizīts teksta ievilkums teksta priekšpusē pievieno vietu, piemēram, rindkopu ievilkšanai.
Šeit ir piemērs, kā izmantot CSS, lai pievienotu atstarpi visu rindkopu priekšā. Pievienojiet savam CSS šādu CSS ārējs vai iekšējs stila lapa:
p {
teksta ievilkums: 3em;
}
Vietas HTML tekstā
Ja tekstam vienkārši vēlaties pievienot papildu atstarpi vai divas, varat izmantot nesalaužamo vietu. Šis raksturs darbojas tāpat kā standarta atstarpes raksturs, tikai tas nesabrūk pārlūkprogrammā.
Šeit ir piemērs, kā teksta rindiņā pievienot piecas atstarpes:
Šim tekstam ir piecas papildu atstarpes
Izmanto HTML:
Šim tekstam ir piecas papildu atstarpes
Varat arī izmantot
tagu, lai pievienotu papildu rindiņu pārtraukumus.
Šim teikumam ir pieci rindiņu pārtraukumi
Kāpēc atstarpes HTML ir slikta ideja
Kaut arī šīs opcijas darbojas - elements, kas nepārkāpj atstarpes, patiešām palielinās atstarpes jūsu tekstam un rindai pārtraukumi pievienos atstarpi zem iepriekš parādītās rindkopas - tas nav labākais veids, kā izveidot atstarpi jūsu vietne. Pievienojot šos elementus savam HTML, kodam tiek pievienota vizuālā informācija, nevis atdalīta lapas struktūra (HTML) no vizuālajiem stiliem (CSS). Labākā prakse nosaka, ka tiem jābūt nošķirtiem vairāku iemeslu dēļ, tostarp to, ka nākotnē ir viegli atjaunināt, kā arī kopējais faila lielums un lapas veiktspēja.
Ja visu stilu un atstarpju diktēšanai izmantojat ārēju stila lapu, tad šo stilu mainīšana visai vietnei ir viegli izdarāma, jo jums vienkārši jāatjaunina šī viena stila lapa.
Apsveriet iepriekš teikuma piemēru ar pieciem
tagus tā beigās. Ja vēlaties, lai katras rindkopas apakšdaļā būtu tik daudz atstarpes, šis HTML kods jums būs jāpievieno katrai visas vietnes rindkopai. Tas ir diezgan daudz papildu uzcenojumu, kas uzpūtīs jūsu lapas. Turklāt, ja jūs nolemjat, ka šī atstarpe ir par daudz vai par mazu, un vēlaties to mazliet mainīt, jums būs jārediģē katrs punkts visā jūsu vietnē. Nē paldies!
Tā vietā, lai kodam pievienotu šos atstarpes elementus, izmantojiet CSS.
p {
polsterējuma apakšdaļa: 20 pikseļi;
}
Šī CSS rindiņa pievienotu atstarpi zem jūsu lapas rindkopām. Ja vēlaties mainīt šo atstarpi nākotnē, rediģējiet šo vienu rindiņu (nevis visas vietnes kodu), un jums ir labi iet!
Tagad, ja jums ir jāpievieno viena vieta vienā vietnes daļā, izmantojot a
birka vai viena neplīstoša vieta nav pasaules gals, taču jums jābūt uzmanīgam. Šo iekšējo HTML atstarpes iespēju izmantošana var būt slidena. Lai gan viens vai divi, iespējams, nenodarīs kaitējumu jūsu vietnei, turpinot šo ceļu, jūs savās lapās ieviesīsit problēmas. Galu galā jums labāk ir pievērsties CSS, lai iegūtu HTML atstarpes un visas citas tīmekļa lapas vizuālās vajadzības.