Izveidojiet HTML atstarpi

Izveidojiet atstarpes un fizisku elementu atdalīšanu HTML, izmantojot CSS

Iesācējam tīmekļa dizainerim var būt grūti saprast atstarpju izveidi un elementu fizisku atdalīšanu HTML. Tas ir tāpēc, ka HTML ir rekvizīts, kas pazīstams kā “baltās atstarpes sabrukums”. neatkarīgi no tā, vai savā HTML kodā ierakstāt 1 vai 100, tīmekļa pārlūkprogramma automātiski sakļauj šīs atstarpes līdz vienai atstarpei. Tas atšķiras no tādas programmas kā Microsoft Word , kas ļauj dokumentu veidotājiem pievienot vairākas atstarpes, lai atdalītu vārdus un citus šī dokumenta elementus. Vietnes dizaina atstarpes nedarbojas šādi.

Tātad, kā pievienot atstarpes HTML, kas tiek rādītas jūsu izveidotā tīmekļa lapa ? Šajā rakstā ir aplūkoti daži dažādi veidi.

RapidEye / Getty Images

Atstarpes HTML ar CSS

Vēlamais veids, kā pievienot atstarpes savā HTML, ir ar Kaskādes stila lapas (CSS) . CSS ir jāizmanto, lai pievienotu jebkādus tīmekļa lapas vizuālos aspektus, un, tā kā atstarpes ir daļa no lapas vizuālā noformējuma raksturlielumiem, CSS ir vieta, kur to vēlaties darīt.

CSS varat izmantot piemales vai polsterējuma rekvizītus, lai pievienotu vietu ap elementiem. Turklāt rekvizīts teksta atkāpe pievieno atstarpi teksta priekšpusē, piemēram, rindkopu atkāpei.

Šeit ir piemērs, kā izmantot CSS, lai pievienotu atstarpi visu rindkopu priekšā. Pievienojiet tālāk norādīto CSS savam ārējā vai iekšējais stila lapa:

|_+_|

HTML atstarpes teksta iekšpusē

Ja vēlaties tekstam pievienot tikai vienu vai divas papildu atstarpes, varat izmantot neatstarpi. Šī rakstzīme darbojas tāpat kā standarta atstarpes rakstzīme, tikai tā nesabrūk pārlūkprogrammā.

Šeit ir piemērs, kā teksta rindā pievienot piecas atstarpes:

|_+_|

Izmanto HTML:

|_+_|

Varat arī izmantot
tagu, lai pievienotu papildu rindiņu pārtraukumus.

|_+_|

Kāpēc atstarpes HTML ir slikta ideja?

Lai gan darbojas abas šīs opcijas — nelaužošais atstarpju elements patiešām pievienos tekstam atstarpi un rindiņu pārtraukumi pievienos atstarpi zem iepriekš parādītās rindkopas — tas nav labākais veids, kā izveidot atstarpi jūsu tīmekļa lapā. Pievienojot šos elementus savam HTML, kodam tiek pievienota vizuāla informācija, nevis lapas struktūra (HTML) tiek atdalīta no vizuālajiem stiliem (CSS). Labākā prakse nosaka, ka tiem ir jābūt atsevišķiem vairāku iemeslu dēļ, tostarp, lai atvieglotu atjaunināšanu nākotnē, kā arī kopējais faila lielums un lapas veiktspēja .

Ja izmantojat ārēju stilu lapu, lai diktētu visus savus stilus un atstarpes, tad šo stilu mainīšana visai vietnei ir vienkārša, jo jums vienkārši ir jāatjaunina šī viena stila lapa.

Apsveriet iepriekš minēto teikuma piemēru ar pieci
tagus tā beigās. Ja vēlaties, lai katras rindkopas apakšā būtu tik daudz atstarpju, šis HTML kods ir jāpievieno katrai rindkopai visā vietnē. Tas ir diezgan liels papildu uzcenojums, kas uzpūtīs jūsu lapas. Turklāt, ja nolemjat, ka šīs atstarpes ir par daudz vai par maz, un vēlaties to nedaudz mainīt, jums būs jārediģē katra rindkopa visā vietnē. Nē paldies!

Tā vietā, lai kodam pievienotu šos atstarpes elementus, izmantojiet CSS.

|_+_|

Šī viena CSS rindiņa pievienotu atstarpes zem jūsu lapas rindkopām. Ja nākotnē vēlaties mainīt šo atstarpi, rediģējiet šo vienu rindiņu (visa vietnes koda vietā), un tas ir gatavs!

Tagad, ja jums ir jāpievieno viena vieta vienā vietnes daļā, izmantojiet a
tags vai viena nepārkāpjoša atstarpe nav pasaules gals, taču jums jābūt uzmanīgiem. Šo iekļauto HTML atstarpju opciju izmantošana var būt slidena nogāze. Lai gan viens vai divi var nekaitēt jūsu vietnei, ja turpināsit pa šo ceļu, jūs savās lapās radīsit problēmas. Galu galā labāk ir izmantot CSS, lai iegūtu HTML atstarpes un visas citas tīmekļa lapas vizuālās vajadzības.​