Hvordan Tab tekst i HTML

Hvordan Tab tekst i HTML


Tastaturer har "Tab" tastene som er nyttige for innrykk tekst. Men disse tabbed innrykk normalt ikke vises på Web-sider skrevet i HTML. Dette kan være et problem hvis websiden inneholder innhold som må innrykk, som poesi eller datakode. Den enkleste løsningen er å "tab" tekst i HTML ved hjelp av CSS (Cascading Style Sheets). Dette lar deg lage tilpassede formateringsregler for så mange kategorien størrelser som du trenger.

Bruksanvisning

1 Åpne HTML-filen i en teksteditor og legge til denne CSS-koden i HTML "head" -seksjonen:

<Style type = "text / css">
<! -
span.tab1 {padding-left: 1.3em;}
span.tab2 {padding-left: 2.6em;}
->
</ Style>

Den første stilen regelen definerer en "span" klasse med en relativ venstre "padding" på 1,3. Den andre regelen definerer en annen "span" klasse med dobbelt så mye "padding". Lagre filen som "tabs.html."

2 I innholdet, påberope kategorien du vil like før innholdet. For eksempel:

<P> Det var en ivrig leser av eHow
<br/> <span class = "tab1"> </ span> Hvem ønsket å vite hvordan du kategorien;
<br/> Svaret var egentlig ganske enkelt,
<br/> <span class = "Fane2"> </ span> Når stilark laget oppsett bare fab! </ p>

Den andre og fjerde linjer begynner med tomme "span" elementer med virtuelle kategorien størrelser definert i "padding" verdiene i CSS-regler. Lagre filen på nytt.

3 Test din webside. Åpne nettleseren og laste "tabs.html." Du skal se to forskjellige størrelser av "tabs" på andre og fjerde linjer av diktet. Hvis ikke, sjekk at du har kopiert koden eksempler på riktig måte.

4 Fortsett å legge til faner der du vil ha dem, ved hjelp av spennelementer med klasse attributter og verdier for å definere hver kategori type. Juster CSS padding verdier til suite din egen layout. Lag flere stilregler for så mange "tab" størrelser som du trenger.

Hint

  • Du kan også bruke HTML "pre" element for å formatere datakode. Dette tvinger de fleste nettlesere for å vise alle bokstavelig plass, line-break og fanen som du skriver innenfor "<pre>" koder. Men kanskje forskjellige nettlesere vise kategorien bredder annerledes. Selv her, ved hjelp av HTML "span" elementer med sine "padding" verdier som er definert i CSS gir deg større kontroll over oppsett.
  • Hvis du bruker HTML "pre" elementer å formatere datakode, være svært forsiktig med hvordan du koder hvert tegn. Skrive tag tegnene "<" og ">" gjør nettlesere behandle innholdet som vanlige HTML-elementer, utfører dem som usynlig kode. For å gjøre nettlesere vise dem som synlig tekst, kode "<" og ">" tegn som "& lt;" og "& gt;" (Uten mellomrom).