/ / HTML-tagliste med beskrivelse

Liste over HTML tags med beskrivelse

Mærker er HTML-ord.Med deres hjælp kan du forvandle en simpel strøm af tekst til et smukt designet dokument med en klar struktur. En komplet liste med HTML-tags indeholder omkring hundrede genstande, men i praksis bruges der dog stadig mindre. De udfører forskellige funktioner - fra at opbygge en visuel ramme på en side og formatere tekst til at forbinde tredjepartsfiler og matche design med officielle internetregler.

Dokumentstruktur

For at en webside skal vises tilstrækkeligt af browseren og godt opfattes af robotter, skal den have en bestemt struktur.

Det allerførste dokumentmærke skal være annoncerer hvilken type den tilhører.Det er i overensstemmelse med doktypen, at browseren gengiver layoutet. Den mest populære type er HTML5-standarden, der erklæres som følger:

Siden skal have et rodelement, der indpakker alt dets indhold. Denne funktion udføres af tagget. html.

Åbning og lukning af HTML-tags

Al serviceinformation placeres inden i sektionen. hoved, og faktisk kan indholdet, der vil være synligt for brugeren, være lukket i et tag krop.









Tag brug krop valgfrit betragtes dog som god praksis. Dette giver dig mulighed for klart at definere strukturen på websiden, markere begyndelsen og slutningen af ​​indholdsdelen.

Hvert tag er en fuldgyldig sektion med indhold, derfor har den åbnings- og lukningsdele.

Serviceinformation

Indvendigt tag hoved Data, der ikke er synlige for brugeren, men som er vigtige for webdokumentet, skrives.

Titlen på den side, der vises på browsertabellen, vises i tagget titel.


 FB.ru 
Websidens titel

En række nyttige serviceoplysninger kan præsenteres i form af metatags, der ikke har en afsluttende del. Metainformation er beskrevet af tagattributter. meta:

  • navn - navn på den beskrevne egenskab
  • indhold - dens betydning;
  • http-ækv - en indikation af, at dette metakode skal konverteres til en HTTP-header;
  • charset - den kodning, som dokumentet blev gemt i.

Nedenfor er en liste over html-tags med attributter, der kan være nyttige til overførsel af vigtige data:

Webside-kodning

Beskrivelse af dokumentindhold og nøgleord til SEO-robot

Page Creator & Copyright

<meta name = "Publisher-Email" content = "[email protected]">

E-mail eller forfatterwebsted
En meddelelse til søgeroboten om, at siden om fem dage ændres, og den skal indekseres igen
Fortæller browseren, hvor længe webdokumentet skal cache

Kommandoer til en seo-robot, der tillader eller forby indeksering af en side og spore links til den. Mulige værdier:

  • indeks,
  • noindex,
  • følge efter
  • ingen følger,
  • alle
  • ingen
Omdiriger til en anden URL efter det angivne antal sekunder

Filforbindelse

For at fungere fuldt ud kræver en webside ofte yderligere ressourcer, såsom stilarter og scripts. De kan medtages fra tredjepartsfiler eller defineres i selve dokumentet.

Typografier skal angives inde i taggen hovedfor at sikre, at siden vises korrekt. For at forbinde stilfilen skal du bruge det link, der ikke lukkes, med attributter href = "filadresse" og rel = "typografiark"som fortæller browseren, at den uploadede fil er en CSS-tabel. Definition af stilregler på selve siden skal ske i tagget stil.

Inkludering af scripts i servicesektionen kan bremse indlæsningen, så de bliver ofte erklæret nederst i dokumentet før det afsluttende tag. krop... Attributten bruges til at angive filadressen src... Derudover kan scriptet skrives inde i selve tagget, men du behøver ikke at angive adressen for browseren for at se det.

Eksempel på tilslutning af filer:

<html> <hoved> <link href = "style.css" rel = "stylesheet"> </head> <krop>   <script src = "script.js"> </script> </body> </html>

Et eksempel på at definere scripts og stilarter på en side:

<html> <hoved> <style> h1 {farve:grøn; } h2 {farve: blå; } </style> </head> <krop>  <script> var header = document.getElementById ("header"); header.style.border = "2 pixel rødt rødt"; </script> </body> </html>

Sidelayout

At visuelt bryde en kontinuerlig strøm opuformateret tekst i semantiske grupper, opret kolonner og separate sektioner, brug strukturelle HTML-tags. De danner blokbeholdere, som du kan indstille ethvert udseende til ved hjælp af CSS.

Det mest populære hypertext markup-tag er uden tvivl div... Det har ingen semantisk betydning og kan bruges til at gruppere ethvert indholdssegment.

Semantiske HTML5-struktur tags

Derudover er der flere semantiskestrukturelle tags introduceret af HTML5-standarden. De hjælper med at give deres indhold en vis betydning ved at betegne det for eksempel som en navigationsblok eller sidefod.

Liste over HTML-tags, der har semantisk betydning på niveauet for hele siden:

tag semantik
header sidehoved, indeholder normalt titlen, kontaktoplysninger og hovedmenuen
vigtigste hovedindhold
sidefod sidefod
nav navigationsenhed
artiklen fremhæver et uafhængigt indholdsområde, såsom en separat artikel eller kommentar
afsnit logisk sektion af en webside med en overskrift
til side sidebjælke, der indeholder yderligere oplysninger

Derudover giver den nye standard mulighed for semantisk gruppering af billedtekstmedieindhold ved hjælp af figur- og figcaption-tags.

<figur> <img src = "/ images / elefant.jpg" alt = "" /> <figcaption> Afrikansk elefant </figcaption> </figure>

Header tags

For at fremhæve overskrifter på forskellige niveauer er der en hel gruppe tags fra <h1> til <h6>... H er det første bogstav i ordets overskrift, og indekset ved siden af ​​det er overskriften.

<h1> Overskrift på første niveau </h1> <h2> Overskriftandet niveau </h2> <h3> Overskrift på tredje niveau </h3> <h4> Overskrift på niveau 4 </h4> <h5> Overskrift på niveau 5 </h5> <h6> Overskrift på niveau 6 </h6>

I praksis bruges de første tre typer oftest.

Overskrifter på forskellige niveauer

Hyperlinks design

Hyperlinks, der forbinder forskellige sider ergrundlaget for World Wide Web får deres design i HTML derfor særlig opmærksomhed. Links skal skille sig ud fra resten af ​​teksten, som standard er de blå og understregede. Dette design leveres af taggen <a>.

Fuld liste over attributter for HTML-hyperlink-tag:

  • alle generiske attributter såsom klasse, id, stil;
  • href - adressen på den side, som overgangen skal foretages til;
  • mål - angiver, hvor den nye side skal åbnes nøjagtigt. Som standard er målet den aktuelle fane, værdien blank bestemmer åbningen af ​​en ny fane.
  • download - i stedet for en overgang downloades den angivne fil til brugerens computer;
  • rel - beregnet til søgemaskiner med værdien ingen følger forbyder robotten at følge linket;
  • type - specificerer MIME-typen for målfilen.

Medieindhold

Internettet ville være meget kedeligt uden billeder, videoer og andet medieindhold. HTML-standarden har flere tags til indsættelse af den på en side.

Tagget er beregnet til placering af billeder. img med følgende specifikke attributter:

  • src - billedets adresse
  • alt - alternativ tekst, der vises, hvis der opstår en fejl under billedindlæsning;
  • bredde, højde - størrelser.

Indlejrede objekter kan placeres inde i tags objekt eller indlejrederudover introducerede HTML5-standarden specielle tags video og lyd... De har en imponerende liste over attributter, der styrer visning og afspilning af medieindhold.

tag iframe opretter en separat flydende ramme, hvor et andet webdokument kan indlæses.

Lærred giver dig mulighed for at oprette forskellige billeder og dynamisk manipulere dem med høj effektivitet ved hjælp af JavaScript.

Tekstformatering

Listen over HTML-tags til formatering af tekstindhold er meget lang.

  • i, stærk - fed stil
  • og, em, dfn - kursiv
  • til, blockquote - fremhævning af tilbud
  • kode, kbd - skrifttype med monospace
  • del, med - gennemstregning
  • ins, u - understrege
  • mærke - fremhævning i gul;
  • under - abonnement
  • sup - overskrift
  • lille - teksten er mindre end den nuværende.

Tvungen bindestreg kan udføres ved hjælp af tagget
. <wbr> vil bede browseren om mulige linjeskift. Derudover er der et mærke

uden formatering anvendt på indhold bevares mellemrum og bindestreger.

Mærket hjælper med at arrangere teksten i form af afsnit <p>, og adskil dem med en tynd grå linje -


.

Interaktive elementer

Formularer ogforskellige interaktive elementer. De giver dig mulighed for at modtage og overføre de nødvendige data, interagere med brugeren og oprette dynamisk indhold.

Et af de vigtigste formelementer er inputfeltet repræsenteret af tagget ... Det kan tage mange forskellige former afhængigt af attributens værdi. type.

Andre formelementer:

  • knap - knap;
  • Vælg - rulleliste
  • tekstområde - multi-line input felt
  • etiket - underskrift til feltet.

tag form grupperer interaktive elementer og sender data til serveren, og fieldset - forener relaterede felter i grupper.

Liste design

Der er tre slags lister i HTML: punktlister, nummererede og definitionslister.

Smagsvarianter af lister i HTML

Definitionslisten består af:

  • container - <dl>
  • termnavne - <dt>
  • termbeskrivelser - <dd>.
<dl> <dt> Term 1 </dt> <dd> Beskrivelse af første periode </dd> <dt> Term 2 </dt> <dd> Beskrivelse af anden periode </dd> </dl>

Nummereret HTML-kode - <ol> (bestilt liste) markeret - <ul> (uordnet liste). Deres genstande er pakket ind i et mærke <li> (listeelement).

<ul> <li> alle </li> <li> jæger </li> <li> ønsker </li> <li> ved </li> <li> hvor </li> <li> sidder </li> <li> fasan </li> </ul>

Formatering af tabeller

Et andet vigtigt element på nettet er tabeller, der gør det muligt at organisere og præsentere store mængder information.

Liste over HTML-tabel tags:

  • bord - bordbeholder;
  • hoved - et overskrift, der normalt indeholder overskrifter;
  • tbody - brødteksten med grundlæggende data;
  • tfoot er en sidefod, der opsummerer resultaterne;
  • tr er en række celler;
  • td - almindelig celle;
  • th - header celle, har sit eget standard udseende;
  • col - giver dig mulighed for at vælge en tabelkolonne og anvende stilarter på den;
  • colgroup - en gruppe af kolonner;
  • billedtekst - billedtekst til bordet.
HTML-dokumentstruktur

Denne ufuldstændige liste over HTML-tags med beskrivelsedemonstrerer, hvor store mulighederne for hypertekstmarkering er i designet af websider. En layoutdesigner kan præsentere enhver information i en brugervenlig form og samtidig sikre en god opfattelse af siden af ​​søgrobotter, hvilket er meget vigtigt for dens promovering.