Elemente HTML

Versiunea actuală a paginii nu a fost încă examinată de colaboratori experimentați și poate diferi semnificativ de versiunea revizuită la 11 decembrie 2015; verificările necesită 50 de modificări .

Elementul HTML  este unitatea structurală de bază a unei pagini web , scrisă în limbajul HTML . Puteți vedea acest element în codul sursă pentru toate paginile web după setarea tipului de document pe prima linie a paginii. DOCTYPE specifică ce versiune de (X)HTML folosește această pagină. Elementele paginii sunt situate între eticheta <HTML> de deschidere și </HTML> de închidere. Elementul <html> se numește element rădăcină. [unu]


Structura unui document HTML

HTML  este un limbaj de marcare a documentelor cu etichete , adică orice document în limbajul HTML este un set de elemente, iar începutul și sfârșitul fiecărui element sunt indicate prin semne speciale numite etichete . Cazul în care este introdus numele etichetei nu contează în HTML. Elementele pot fi goale , adică să nu conţină text sau alte date (de exemplu, o etichetă de întrerupere de linie <br> ). În acest caz, eticheta de închidere nu este de obicei specificată. În plus, elementele pot avea atribute care definesc unele dintre proprietățile lor (de exemplu, dimensiunea fontului pentru eticheta <font> ). Atributele sunt specificate în eticheta de deschidere. Iată un exemplu de porțiune de marcare a unui document HTML:

< p > Text între două etichete - deschidere și închidere. </ p > <a href="http://example.com"> Aici , elementul conține atributul href . </a> Iată un exemplu de element gol : <br>

Fiecare document HTML care se conformează unei versiuni a specificației HTML trebuie să înceapă cu o linie de declarație a versiunii HTML <!DOCTYPE>, care de obicei arată cam așa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Dacă această linie nu este specificată, atunci devine mai dificil să se realizeze afișarea corectă a documentului în browser .

În plus, începutul și sfârșitul documentului sunt indicate prin etichete <html>și, </html>respectiv. În cadrul acestor etichete se află etichetele de titlu ( <head></head>) și corp ( <body></body>) ale documentului.

Opțiuni DOCTYPE pentru HTML 4.01

  • Strict: nu conține etichete marcate ca depreciate sau depreciate.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Tranzițional: conține etichete învechite pentru compatibilitate și ușurință de tranziție de la versiunile mai vechi de HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Cu cadre (Frameset): similar cu tranziția, dar conține și etichete pentru crearea de seturi de cadre.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DOCTYPE pentru HTML 5

Spre deosebire de versiunile anterioare, există o singură etichetă. [2]

<!DOCTYPE html>

Elemente de bază

Etichetele și parametrii lor nu fac distincție între majuscule și minuscule. Adică, <A HREF="http://example.com"> și <a href="http://example.com"> înseamnă același lucru.

În cele mai recente versiuni de HTML, aproape fiecare etichetă are un număr mare de parametri opționali - de obicei cel puțin 15. Oferim doar parametrii etichetei principali.

Hyperlinkuri

< a href = "filename" target = "_self" > nume link </ a >
  • Atributul hrefspecifică valoarea adresei documentului indicat de link.
  • filename — numele fișierului sau adresa de internet la care doriți să vă referiți.
  • название ссылки - numele link-ului hypertext care va fi afișat în browser, adică afișat celor care au vizitat pagina.
  • target - setează valoarea ferestrei sau cadrului în care va fi deschis documentul indicat de link. Valori posibile ale atributelor:
    • _top — deschiderea unui document în fereastra curentă;
    • _blank - deschiderea unui document într-o fereastră nouă;
    • _self - deschiderea unui document în cadrul curent;
    • _parent — deschiderea documentului în cadrul părinte.

Valoare implicită: _self.

Ancoră

Același element este folosit pentru a crea așa-numitele „ancore” (ancoră), care pot fi apoi folosite în hyperlinkuri direcționate către un anumit element al paginii. De exemplu:

<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title > Ancora în interiorul documentului </ title > </ head > < body > < p >< a name = "top" > </ a ></ p > < p > text </ p > < p >< a href = "#top" > Sus </ a ></ p > </ body > </ html >

În mod similar, o ancoră poate fi plasată pe un marcaj situat pe o altă pagină web sau pe un alt site: unde este direcționat linkul, acesta ar trebui să fie <a name="xxx"></a>, iar de unde provine linkul, se hrefadaugă semnului de litere și numele ancorei . valoare.

De asemenea, id-ul oricărui element poate servi drept ancoră în browserele moderne.

Blocuri de text

  • <H1> … </H1>, <H2> … </H2>, … , <H6> … </H6> — rubricile 1, 2, … 6 niveluri. Folosit pentru a evidenția părți ale textului (titlul 1 este cel mai mare, 6 este cel mai mic).
  • <P> - alineat nou. Puteți pune la sfârșitul paragrafului </P>, dar acest lucru nu este obligatoriu.
  • <BR> - linie nouă. Această etichetă nu este închisă (adică eticheta nu există </BR>)
  • <HR> - linie orizontală
  • <BLOCKQUOTE> … </BLOCKQUOTE>  - citat. În mod normal, textul este deplasat spre dreapta.
  • <PRE> … </PRE>  — modul de previzualizare (text preformatat). Caracterele cu spații albe rămân acolo unde se află în documentul original (ignorate în alte etichete). Intern, etichetele inline, altele decât img, object, big, small, sup și sub pot fi procesate.
  • <DIV> … </DIV>  - bloc (utilizat de obicei pentru a aplica stiluri CSS )
  • <SPAN> … </SPAN>  - șir (utilizat de obicei pentru a aplica stiluri CSS )

Formatarea textului

  • <EM> … </EM>  - stres logic (afisat de obicei cu caractere cursive )
  • <STRONG> … </STRONG>  - stres logic întărit (de obicei afișat cu aldine )
  • <I> … </I>  - text cu caractere italice
  • <B> … </B>  - text îngroșat
  • <U> … </U>  - sublinierea textului
  • <S> … </S> (sau <STRIKE> … </STRIKE> ) - text barat
  • <BIG> … </BIG>  - mărirea dimensiunii fontului
  • <SMALL> … </SMALL>  - reducerea fontului
  • <BLINK> … </BLINK>  - text care clipește. Atenţie! Această etichetă nu funcționează în Internet Explorer 5 și versiunile anterioare fără JavaScript
  • <MARQUEE> … </MARQUEE>  - text care alunecă pe ecran.
  • <SUB> … </SUB>  - textul indicelui. De exemplu, H <SUB>2</SUB>O va crea textul H 2 O.
  • <SUP> … </SUP>  - text în indicele. De exemplu, E=mc <SUP>2</SUP> va crea textul E=mc 2 .
  • <FONT параметры> … </FONT>  — setați parametrii fontului. Această etichetă are următoarele opțiuni:
    • COLOR=цвет - setați culoarea. Culoarea poate fi specificată în formă hexazecimală ca #rrggbb (primele 2 cifre hexazecimale sunt componenta roșie, următoarele 2 sunt verzi, ultimele 2 sunt albastre) sau printr-un nume.
    • FACE=шрифтstabilirea fontului _
    • SIZE=размерsetarea dimensiunii fontului. Dimensiunea de la 1 la 7: dimensiunea implicită este 3. Există multe modalități de a modifica dimensiunea implicită.
    • SIZE=+изменениеsau  — modificați dimensiunea fontului de la cea standard. De exemplu, +2 înseamnă că dimensiunea este cu 2 mai mare decât dimensiunea standard.SIZE=-изменение

De exemplu,

< U > trei </ U > < FONT SIZE = "+2" > mare </ FONT > < FONT COLOR = "verde" > verde </ FONT > fluierele sunt semnalul pentru a începe atacul .

va crea text

Сигналом к началу атаки являются три больших зелёных свистка.

Liste

< UL > < LI > primul element </ LI > < LI > al doilea element </ LI > < LI > al treilea element </ LI > </ UL >

creează o listă

  • primul element
  • al doilea element
  • al treilea element

Dacă în loc de <UL> ( Lista  neordonată - listă neordonată) puneți <OL> ( Listă ordonată  - listă numerotată), lista va fi numerotată:

  1. primul element
  2. al doilea element
  3. al treilea element

Aceste etichete au parametri:

tip = "tip"

unde tipul  este forma:

în <UL>  - caractere

  • square - pătrat
  • circle - circumferinta
  • disk - cerc: implicit

iar în <OL>  - cifre sau litere

  • A sau a (cu litere latine) - lista alfabetica: respectiv cu litere mari sau mici
  • I sau i - cifre romane: respectiv cu litere mari sau mici (cifrele romane afișează numere de la 1 la 3999, restul - arabe)
  • 1 - Cifre arabe: implicit

este scris asa:

< oltip = " i" > < li > Mai întâi </ li > < li > Al doilea </ li > < li > etc. </ li > </ ol >

și va crea următoarele:

  1. Primul
  2. Al doilea
  3. etc.

Parametru start ="start" (numai pentru <OL> ), care definește începutul unei noi numărătoare inversă: de exemplu, dacă nu aveți nevoie de 1, 2, 3, ci de 24, 25, 26

Este scris astfel:

< ol start = "24" > < li > Douăzeci și patru </ li > < li > Douăzeci și cinci </ li > < li > etc. </ li >

și va crea următoarele:

  1. Douăzeci și patru
  2. Douazeci si cinci
  3. etc.

și, în sfârșit, pentru eticheta , un <LI> parametru  - dacă trebuie să săriți de la o cifră la alta: de exemplu, nu 1, 2, 3, 4, ci 1, 2, 22, 23 value="следующий"

< ol > < li > Unu </ li > < li > Două </ li > < li value = "22" > Douăzeci și doi </ li > < li > Douăzeci și trei </ li >

va crea următoarele:

  1. unu
  2. Două
  3. Douazeci si doi
  4. Douăzeci și trei

În cele din urmă, a treia și ultima listă este lista de definiții :

< DL > < DT > Pisica </ DT > < DD > animal de companie miaunat </ DD > < DT > Pisica </ DT > < DD > sotul pisicii </ DD > < DT > Crocodil </ DT > < DD > mare african fiară cu dinți ascuțiți </ DD > </ DL >

va crea următoarele:

Pisică animal de companie miaunat Pisică soț de pisică Crocodil fiară africană mare, cu dinți ascuțiți

Apropo, etichetele <LI>, <DT>, <DD>pot să nu fie închise.

Diferențele de afișare a listelor numerotate

Cu valori nepozitive în numerotare, browserele se comportă diferit. De exemplu, Internet Explorer ignoră value=0, value=-1etc., în timp ce alte browsere precum Chrome , Firefox , afișează valoarea dată. În același timp, Internet Explorer nu ignoră start=0, start=-1etc., adică. poate începe lista cu o valoare nepozitivă, dar nu poate sări la o valoare nepozitivă în numerotare.

Marcaj HTML Acest browser Chrome, Firefox Internet Explorer
<ol start=-2><li><li value=0><li value=2></ol>
  1.  
  2.  
  3.  
 -2, 0, 2 -2, -1, 2

În lista alfabetică ( type=Asau type=a), unele browsere, cum ar fi Chrome, Firefox, afișează valori nepozitive sub formă de numere, în timp ce Internet Explorer (în modul Quirks , adică dacă pagina nu specifică HTML 4.01 sau 5 în etichetă !DOCTYPE HTML) afișează valori negative ca litere cu semnul minus și zero cu simbolul @.

Marcaj HTML Acest browser Chrome, Firefox Internet Explorer (mod Quirks)
<ol type=A start=-1><li><li><li></ol>
  1.  
  2.  
  3.  
 -1, 0, A -A, @, A

O valoare goală sau nenumerică ( value=, value=A, value=B) este ignorată de unele browsere, cum ar fi Chrome, Firefox, în timp ce Internet Explorer o percepe ca value=1.

Marcaj HTML Acest browser Chrome, Firefox Internet Explorer
<ol start=-2><li><li value=B><li value=2></ol>
  1.  
  2.  
  3.  
 -2, -1, 2 -2, 1, 2

Există diferențe la afișarea numerelor în cifre romane ( type=Isau type=i), deoarece Internet Explorer (în modul Quirks , adică dacă pagina nu specifică versiunea HTML 4.01 sau 5 în etichetă !DOCTYPE HTML) afișează incorect unele numere.

Marcaj HTML Acest browser Chrome, Firefox Internet Explorer (mod Quirks)
<ol type=I start=3300><li><li><li><li></ol>
  1.  
  2.  
  3.  
  4.  
MMMCCC
MMMCCCI
MMMCCCII
MMMCCCIII 		MMMCCC
MMMCCC
MMMCCC
MMMCCC

Toate numerele din intervalul de la 1 la 1880 sunt afișate corect de Internet Explorer, dar nu toate din intervalul de la 1881 la 3999. Pentru 603 numere, 67 grupuri de 9 numere (xxx1-xxx9), cifra cea mai puțin semnificativă nu este inclusă în intrarea cu cifre romane. Și asta, cel mai probabil, nu este pentru a scurta un record lung, pentru că 3888 - numărul cu cea mai lungă intrare (între 1 și 3999) cu cifre romane (MMMDCCCLXXXVIII) - se afișează corect.

Grupurile de numere afișate incorect în Internet Explorer (în modul Quirks ) sunt marcate cu o cruce în tabel:

01-09 11-19 21-29 31-39 41-49 51-59 61-69 71-79 81-89 91-99
1800 ✘
2300 ✘ ✘ ✘
2700 ✘ ✘ ✘
2800 ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘
3100 ✘
3200 ✘ ✘ ✘ ✘ ✘ ✘ ✘
3300 ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘
3400 ✘ ✘ ✘ ✘ ✘ ✘ ✘
3500 ✘
3600 ✘ ✘ ✘ ✘ ✘ ✘ ✘
3700 ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘
3800 ✘ ✘ ✘
3900 ✘ ✘ ✘ ✘ ✘ ✘ ✘

Obiecte

  • EMBED - inserarea diferitelor obiecte: documente non-HTML și fișiere media
  • APPLET - inserarea applet -urilor Java
  • SCRIPT - inserarea de scripturi.

Imagini

  • IMG - inserați imaginea. Această etichetă nu este închisă.
    • SRC - nume sau URL
    • ALT - nume alternativ (va fi afișat dacă browserul interzice afișarea imaginilor)
    • TITLE - o scurtă descriere a imaginii (afișată când treceți cu mouse-ul peste imagine)
    • WIDTH, HEIGHT - dimensiuni (dacă nu se potrivesc cu dimensiunile reale ale imaginii, atunci imaginea se va „întinde” sau „strânge”)
    • ALIGN — setează parametrii de împachetare a textului (sus, mijloc, jos, stânga, dreapta)
    • VSPACE, HSPACE - setați dimensiunile spațiului vertical și orizontal din jurul imaginii

Exemplu:

< IMG SRC = url ALT = „text” TITLE = „text” WIDTH = „dimensiune (px, %)” HEIGHT = „dimensiune (px, %)” >

O imagine poate fi făcută un link:

< A HREF = url >< IMG SRC = url ></ A >

Harta imagine

Exemplu:

< IMG width = "500" height = "200" usemap = "#somemap" src = "url" > < MAP name = "somemap" > < AREA shape = "rect" coords = "6, 7, 140, 196" href = "url1" > < AREA form = "cerc" coords = "239, 98, 92" href = "url2" > < AREA shape = "poligon" coords = "386.16, 344.56, 350.189, 385.132, 4894". href = "url3" > </ MAP >

Tabelele

  • TABLE - crearea unui tabel. Opțiuni de etichetare:
    • BORDER — grosimea liniilor de despărțire din tabel
    • CELLSPACING - distanta dintre celule
    • CELLPADDING- indentare de la cadru la conținutul celulei.
  • CAPTION - titlul tabelului (această etichetă este opțională)
  • TR - rând de masă
  • TH - antetul coloanei tabelului (această etichetă este opțională)
  • TD - celula de tabel
  • height - inaltimea mesei
  • width - latimea mesei

De exemplu,

< TABLE BORDER = "1" CELLSPACING = "0" > < CAPTION > Captură de crocodil Mumbe Yumba </ CAPTION > < TH > An </ TH > < TH > Captură </ TH > < TR > < TD > 1997 </ TD > < TD > 214 </ TD > </ TR > < TR > < TD > 1998 </ TD > < TD > 216 </ TD > </ TR > < TR > < TD > 1999 </ TD > < TD > 207 </ TD > </ TR > </ TABEL >

Creează un tabel:

Captură de crocodili în Mumbe-Yumbe
An Captură
1997 214
1998 216
1999 207

Eticheta TABLE are, de asemenea, un parametru CELLPADDING. Acesta definește distanța în pixeli dintre marginea celulei și conținutul acesteia. De exemplu, dacă înlocuiți primul rând al tabelului cu

< TABLE BORDER = "1" CELLSPACING = "0" CELLPADDING = "5" >

tabelul va arăta astfel:

Captură de crocodili în Mumbe-Yumbe
An Captură
1997 214
1998 216
1999 207

Un alt parametru al etichetelor TABLE, TR, TH, TD este ALIGN. Acesta definește alinierea. Valorile posibile sunt center(centru), left(stânga), right(dreapta).

Parametrul ALIGNîn TDsau THdetermină alinierea pentru conținutul din interiorul celulei date, în TR - pentru conținutul tuturor celulelor din rând, TABLE - pentru tabelul în sine de pe pagină. Pentru fiecare celulă, alinierea este luată de la TDsau TH, dacă nu este setată - de la TR, dacă nu este setată nici - centru pentru THsau stânga pentru TD.

De exemplu, dacă înlocuiți primele rânduri ale tabelului cu

< TABLE BORDER = "1" CELLSPACING = "0" ALIGN = "center" > < CAPTION > Captură de crocodil Mumbe Yumba </ CAPTION > < TH > An </ TH > < TH > Captură </ TH > < TR > < TD > 1997 </ TD > < TD ALIGN = "CENTRU" > 214 </ TD >

tabelul va arăta astfel:

Captură de crocodili în Mumbe-Yumbe
An Captură
1997 214
1998 216
1999 207

Etichetele neînchise TD , TR și TH duc la afișarea incorectă, mai ales atunci când lucrați cu tabele imbricate.

Formulare

Crearea de formulare în HTML este destul de complexă. Aici sunt date doar numele etichetelor principale.

  • FORM - crearea unui formular
  • INPUT - element de introducere (poate avea diferite funcții - de la introducerea textului la trimiterea unui formular)
  • TEXTAREA - zonă de text (câmp de introducere a textului cu mai multe linii)
  • SELECT - o listă (de obicei sub forma unui meniu derulant)
  • OPTION - element din listă

Simboluri

Pentru a crea un simbol, nu este necesar să îl căutați pe tastatură: puteți introduce pur și simplu eticheta; de exemplu, pentru a obține ¢ , trebuie să tastați &cent;, spațiu fără rupere  - &nbsp;, accent  - &#x301;etc.

Nume de culori

Următoarele culori sunt definite în HTML.

Nume Culoare hexagonală
negru #000000
Argint #c0c0c0
maro #800000
roșu #ff0000
marina #000080
albastru #0000ff
Violet #800080
fucsie #ff00ff
verde #008000
lămâie verde #00ff00
măsline #808000
galben #ffff00
teal #008080
acva #00ffff
gri #808080
alb #ffffff

Caractere de bază

Codul Simbol Sens
< < Mai puțin
> > Mai mult
& & ampersand
  spațiu neîntrerupt (pe acest spațiu linia nu este întreruptă pentru împachetare)
§ă; § paragraf
№ Nu. cameră
&copie; © drepturi de autor _ _
® ® marcă înregistrată _
™ ™ marcă înregistrată _ _ _
° ° grade
« " citat de deschidere în rusă
" » citat de încheiere în rusă
&helli; … elipsă
— — liniuță
• • punct gras
± ± plus sau minus
− − minus

Caracterele de la tastatură „ și „ în rusă nu sunt ghilimele. De asemenea, este greșit să înlocuiți №, ©, ®, ™, °C cu N, (c), (R), TM, C pe site-uri web.

Cratima, liniuța și minusul sunt trei caractere diferite.

  1. Simbolul tastaturii - se numește cratima și este folosit în interiorul cuvintelor.
  2. Un minus este mai larg decât o cratima . Este folosit pentru a scrie numere negative și operații de scădere.
  3. Linia este chiar mai lată decât minus . Este folosit între cuvinte și este înlăturat cu spații, iar în față - inseparabil . O liniuță este, de asemenea, folosită pentru a indica intervalele numerice, dar nu este delimitată cu spații.

Mai multe detalii: Artemy Lebedev . liniuță, minus și cratimă sau caracteristici ale tipografiei rusești . Conducere (15 ianuarie 2003). Consultat la 23 aprilie 2013. Arhivat din original pe 9 decembrie 2007.

Caracterele < , > și & nu pot fi afișate normal în HTML deoarece au o semnificație specială. Acestea sunt întotdeauna afișate folosind <, > și & respectiv.

Pentru majoritatea personajelor speciale, consultați about.com .

Note

  1. ↑ Descriere element rădăcină a documentului HTML
  2. ↑ Standard HTML . html.spec.whatwg.org . Preluat: 26 septembrie 2021.

Link -uri