HTML-elementtejä

Kokeneet kirjoittajat eivät ole vielä tarkistaneet sivun nykyistä versiota, ja se voi poiketa merkittävästi 11. joulukuuta 2015 tarkistetusta versiosta . tarkastukset vaativat 50 muokkausta .

HTML - elementti on web - sivun  perusrakenneyksikkö , joka on kirjoitettu HTML - kielellä . Näet tämän elementin kaikkien verkkosivujen lähdekoodissa, kun olet asettanut asiakirjatyypin sivun ensimmäiselle riville. DOCTYPE määrittää, mitä (X)HTML-versiota tämä sivu käyttää. Sivuelementit sijaitsevat aloittavan <HTML>-tunnisteen ja sulkevan </HTML>-tunnisteen välissä. <html>-elementtiä kutsutaan juurielementiksi. [yksi]


HTML-dokumentin rakenne

HTML  on koodattu asiakirjan merkintäkieli , eli mikä tahansa HTML-kielellä oleva asiakirja on joukko elementtejä, ja kunkin elementin alku ja loppu on merkitty erityisillä tunnisteilla . Tapauksella, jossa tagin nimi kirjoitetaan, ei ole väliä HTML:ssä. Elementit voivat olla tyhjiä , eli ne eivät sisällä tekstiä tai muita tietoja (esimerkiksi rivinvaihtotunniste <br> ). Tässä tapauksessa sulkevaa tunnistetta ei yleensä määritellä. Lisäksi elementeillä voi olla attribuutteja , jotka määrittävät osan niiden ominaisuuksista (esimerkiksi <font>-tunnisteen fontin koon ). Attribuutit määritetään avaustunnisteessa. Tässä on esimerkki HTML-dokumentin merkintäosasta:

< p > Teksti kahden tagin välissä - avaava ja sulkeva. </ p > <a href="http://example.com"> Tässä elementti sisältää href - attribuutin . </a> Tässä on esimerkki tyhjästä elementistä : <br>

Jokaisen HTML-määrittelyn version mukaisen HTML-dokumentin tulee alkaa HTML-version ilmoitusrivillä <!DOCTYPE>, joka näyttää yleensä tältä:

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

Jos tätä riviä ei ole määritetty, asiakirjan oikea näyttö selaimessa tulee vaikeammaksi .

Lisäksi asiakirjan alku ja loppu on merkitty tunnisteilla <html>ja </html>vastaavasti. Näissä tunnisteissa ovat asiakirjan otsikko ( <head></head>) ja body ( <body></body>) -tunnisteet.

DOCTYPE-asetukset HTML 4.01:lle

  • Tiukka: Ei sisällä tunnisteita, jotka on merkitty vanhentuneiksi tai vanhentuneiksi.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//FI" "http://www.w3.org/TR/html4/strict.dtd">
  • Siirtymävaihe: sisältää vanhentuneita tageja yhteensopivuuden ja vanhemmista HTML-versioista siirtymisen helpottamiseksi.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FI" "http://www.w3.org/TR/html4/loose.dtd">
  • Kehyksillä ( Frameset ): samanlainen kuin siirtymä, mutta sisältää myös tunnisteita kehyssarjojen luomiseen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//FI" "http://www.w3.org/TR/html4/frameset.dtd">

DOCTYPE HTML 5:lle

Toisin kuin aiemmissa versioissa, siinä on vain yksi tunniste. [2]

<!DOCTYPE html>

Peruselementit

Tunnisteet ja niiden parametrit eivät erota kirjainkoosta. Eli <A HREF="http://example.com"> ja <a href="http://example.com"> tarkoittavat samaa asiaa.

Uusimmissa HTML-versioissa lähes jokaisessa tagissa on valtava määrä valinnaisia ​​parametreja - yleensä vähintään 15. Tarjoamme vain tärkeimmät tunnisteparametrit.

Hyperlinkit

< a href = "tiedostonimi" target = "_self" > linkin nimi </ a >
  • Attribuutti hrefmäärittää linkin osoittaman dokumentin osoitteen arvon.
  • filename — tiedoston nimi tai Internet-osoite, johon haluat viitata.
  • название ссылки - hypertekstin linkin nimi, joka näytetään selaimessa, eli näytetään sivulla vierailleille.
  • target - määrittää ikkunan tai kehyksen arvon, jossa linkin osoittama dokumentti avataan. Mahdolliset attribuuttiarvot:
    • _top — asiakirjan avaaminen nykyisessä ikkunassa;
    • _blank - asiakirjan avaaminen uudessa ikkunassa;
    • _self - asiakirjan avaaminen nykyisessä kehyksessä;
    • _parent — asiakirjan avaaminen pääkehyksessä.

Oletusarvo: _self.

Ankkuri

Samaa elementtiä käytetään luomaan niin sanottuja "ankkureita" (ankkureita), joita voidaan sitten käyttää hyperlinkeissä, jotka ohjataan sivun tiettyyn elementtiin. Esimerkiksi:

<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title > Kiinnitä asiakirjan sisään </ title > </ head > < body > < p >< a name = "top" > </ a ></ p > < p > teksti </ p > < p >< a href = "#top" > Yläosa </ a ></ p > </ body > </ html >

Vastaavasti ankkuri voidaan sijoittaa toisella verkkosivulla tai toisella sivustolla olevaan kirjanmerkkiin: minne linkki on suunnattu, sen tulee olla <a name="xxx"></a>, ja missä linkki tulee, puntakyltti ja ankkurin nimi hreflisätään arvo.

Myös minkä tahansa elementin tunnus voi toimia ankkurina nykyaikaisissa selaimissa.

Tekstilohkot

  • <H1> … </H1>, <H2> … </H2>, … , <H6> … </H6> — otsikot 1, 2, … 6 tasoa. Käytetään korostamaan tekstin osia (otsikko 1 on suurin, 6 on pienin).
  • <P> - uusi kohta. Voit laittaa kappaleen loppuun </P>, mutta tämä ei ole pakollista.
  • <BR> - uusi rivi. Tämä tunniste ei ole suljettu (eli tunnistetta ei ole olemassa </BR>)
  • <HR> - vaakasuora viiva
  • <BLOCKQUOTE> … </BLOCKQUOTE>  -lainaus. Normaalisti tekstiä siirretään oikealle.
  • <PRE> … </PRE>  — esikatselutila (esimuotoiltu teksti). Välilyönnit pysyvät alkuperäisessä asiakirjassa (jätetään huomioimatta muissa tunnisteissa). Sisäisesti voidaan käsitellä muita tekstin sisäisiä tunnisteita kuin img, object, big, small, sup ja sub.
  • <DIV> … </DIV>  - block (käytetään yleensä CSS -tyylien soveltamiseen )
  • <SPAN> … </SPAN>  - merkkijono (käytetään yleensä CSS -tyylien soveltamiseen )

Tekstin muotoilu

  • <EM> … </EM>  - looginen painotus (yleensä kursiivilla )
  • <STRONG> … </STRONG>  - vahvistettu looginen painotus (näytetään yleensä lihavoituna )
  • <I> … </I> - kursivoitu  teksti
  • <B> … </B>  - lihavoitu teksti
  • <U> … </U>  - tekstin alleviivaus
  • <S> … </S> (tai <STRIKE> … </STRIKE> ) - yliviivattu teksti
  • <BIG> … </BIG>  - kirjasinkoon kasvattaminen
  • <SMALL> … </SMALL>  - fontin pienennys
  • <BLINK> … </BLINK>  - vilkkuva teksti. Huomio! Tämä tunniste ei toimi Internet Explorer 5 :ssä ja sitä vanhemmissa versioissa ilman JavaScriptiä
  • <MARQUEE> … </MARQUEE>  - teksti, joka liukuu näytön poikki.
  • <SUB> … </SUB>  - alaindeksiteksti. Esimerkiksi H <SUB>2</SUB>O luo tekstin H 2 O.
  • <SUP> … </SUP>  - yläindeksiteksti. Esimerkiksi E=mc <SUP>2</SUP> luo tekstin E=mc 2 .
  • <FONT параметры> … </FONT>  — Aseta fonttiparametrit. Tällä tunnisteella on seuraavat vaihtoehdot:
    • COLOR=цвет - aseta väri. Väri voidaan määrittää heksadesimaalimuodossa muodossa #rrggbb (ensimmäiset 2 heksadesimaalinumeroa ovat punainen komponentti, seuraavat 2 ovat vihreitä, viimeiset 2 ovat sinisiä) tai nimellä.
    • FACE=шрифтkirjasintyypin asettaminen _
    • SIZE=размерfonttikoon asettaminen. Koko 1–7: Oletuskoko on 3. Oletuskokoa voi muuttaa monella tavalla.
    • SIZE=+изменениеtai  — muuta fonttikokoa tavallisesta. Esimerkiksi +2 tarkoittaa, että koko on 2 suurempi kuin vakiokoko.SIZE=-изменение

Esimerkiksi,

< U > kolme </ U > < FONT SIZE = "+2" > iso </ FONT > < FONT COLOR = "vihreä" > vihreä </ FONT > pillit ovat merkki hyökkäyksen aloittamisesta .

luo tekstiä

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

Listat

< UL > < LI > ensimmäinen elementti </ LI > < LI > toinen elementti </ LI > < LI > kolmas elementti </ LI > </ UL >

luo listan

  • ensimmäinen elementti
  • toinen elementti
  • kolmas elementti

Jos ( Järjestämätön lista - järjestämätön lista) sijaan asetetaan ( Järjestätty luettelo  - <UL> numeroitu luettelo  ), luettelo numeroidaan: <OL>

  1. ensimmäinen elementti
  2. toinen elementti
  3. kolmas elementti

Näillä tunnisteilla on parametreja:

kirjoita ="tyyppi"

missä tyyppi  on muoto:

- <UL>  merkkejä

  • square - neliö
  • circle -ympärysmitta
  • disk - ympyrä: oletus

ja <OL>  - numerot tai kirjaimet

  • A tai a (latinalaisin kirjaimin) - aakkosellinen luettelo: vastaavasti isoilla tai pienillä kirjaimilla
  • I tai i - roomalaiset numerot: vastaavasti isoilla tai pienillä kirjaimilla (roomalaiset numerot näyttävät numeroita 1-3999, loput - arabiaa)
  • 1 - Arabialaiset numerot: oletus

on kirjoitettu näin:

< oltype = " i" > < li > Ensimmäinen </ li > < li > Toinen </ li > < li > jne. </ li > </ ol >

ja luo seuraavat:

  1. Ensimmäinen
  2. Toinen
  3. Jne.

Parametri start ="start" (vain <OL> ), joka määrittää uuden lähtölaskennan alun: esimerkiksi jos et tarvitse 1, 2, 3, vaan 24, 25, 26

Se on kirjoitettu näin:

< ol start = "24" > < li > Kaksikymmentäneljä </ li > < li > Kaksikymmentäviisi </ li > < li > jne. </ li >

ja luo seuraavat:

  1. Kaksikymmentäneljä
  2. Kaksikymmentäviisi
  3. Jne.

ja lopuksi tagille <LI> parametri  - jos sinun on siirryttävä numerosta toiseen: esimerkiksi ei 1, 2, 3, 4, vaan 1, 2, 22, 23 value="следующий"

< ol > < li > Yksi </ li > < li > Kaksi </ li > < li value = "22" > Kaksikymmentäkaksi </ li > < li > Kaksikymmentäkolme </ li >

luo seuraavat:

  1. Yksi
  2. Kaksi
  3. Kaksikymmentäkaksi
  4. Kaksikymmentäkolme

Lopuksi kolmas ja viimeinen luettelo on luettelo määritelmistä :

< DL > < DT > Kissa </ DT > < DD > miukuva lemmikki </ DD > < DT > Kissa </ DT > < DD > kissan aviomies </ DD > < DT > Krokotiili </ DT > < DD > iso afrikkalainen peto, jolla on terävät hampaat </ DD > </ DL >

luo seuraavat:

Kissa miuttava lemmikki Kissa kissan aviomies Krokotiili suuri afrikkalainen peto, jolla on terävät hampaat

Muuten, tunnisteita <LI>, <DT>ei <DD>saa sulkea.

Erot numeroitujen luetteloiden näyttämisessä

Kun numeroinnissa on ei-positiivisia arvoja, selaimet toimivat eri tavalla. Esimerkiksi Internet Explorer jättää huomioimatta value=0jne value=-1., kun taas muut selaimet, kuten Chrome , Firefox , näyttävät annetun arvon. Samaan aikaan Internet Explorer ei ohita start=0, start=-1jne., ts. se voi aloittaa luettelon ei-positiivisella arvolla, mutta se ei voi hypätä numeroinnissa ei-positiiviseen arvoon.

HTML-merkintä Tämä selain Chrome, Firefox Internet Explorer
<ol start=-2><li><li value=0><li value=2></ol>
  1.  
  2.  
  3.  
-2, 0, 2 -2, -1, 2

Aakkosjärjestyksessä ( type=Atai type=a) jotkin selaimet, kuten Chrome, Firefox, näyttävät ei-positiivisia arvoja numeroina, kun taas Internet Explorer ( Quirks-tilassa , eli jos sivu ei määritä tagissa HTML 4.01 tai 5 !DOCTYPE HTML) näyttää negatiiviset arvot kirjaimina, joissa on miinusmerkki ja nollana @-symbolilla.

HTML-merkintä Tämä selain Chrome, Firefox Internet Explorer (Quirks-tila)
<ol type=A start=-1><li><li><li></ol>
  1.  
  2.  
  3.  
-1, 0, A -A, @, A

Jotkin selaimet, kuten Chrome, Firefox, jättävät huomioimatta tyhjän tai ei-numeerisen arvon ( value=, value=A, ), kun taas Internet Explorer näkee sen arvona . value=Bvalue=1

HTML-merkintä Tämä selain Chrome, Firefox Internet Explorer
<ol start=-2><li><li value=B><li value=2></ol>
  1.  
  2.  
  3.  
-2, -1, 2 -2, 1, 2

Numeroiden näyttämisessä roomalaisin numeroin ( type=Itai type=i) on eroja, koska Internet Explorer ( Quirks-tilassa , eli jos sivu ei määritä tagissa HTML-versiota 4.01 tai 5 !DOCTYPE HTML) näyttää jotkin numerot väärin.

HTML-merkintä Tämä selain Chrome, Firefox Internet Explorer (Quirks-tila)
<ol type=I start=3300><li><li><li><li></ol>
  1.  
  2.  
  3.  
  4.  
MMMCCC
MMMCCCI
MMMCCCII
MMMCCCIII
MMMCCC
MMMCCC
MMMCCC
MMMCCC

Internet Explorer näyttää oikein kaikki luvut väliltä 1–1880, mutta eivät kaikkia väliltä 1881–3999. Kun kyseessä on 603 numeroa, 67 9 numeron ryhmää (xxx1-xxx9), vähiten merkitsevä numero ei sisälly roomalaiseen numeroon. Ja tämä ei todennäköisesti ole pitkän levyn lyhentämiseksi, koska 3888 - numero, jossa on pisin (välillä 1 - 3999) roomalainen numero (MMMDCCCLXXXVIII) - näkyy oikein.

Internet Explorerissa ( Quirks -tilassa) väärin näytetyt numeroryhmät on merkitty taulukossa ristillä:

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

Objektit

  • EMBED - erilaisten objektien lisääminen: ei-HTML-asiakirjoja ja mediatiedostoja
  • APPLET- Java-sovelmien  lisääminen
  • SCRIPT - skriptien lisääminen.

Kuvat

  • IMG - lisää kuva. Tämä tunniste ei ole suljettu.
    • SRC - nimi tai URL-osoite
    • ALT - vaihtoehtoinen nimi (näkyy, jos selain estää kuvien näyttämisen)
    • TITLE - lyhyt kuvaus kuvasta (näkyy, kun viet hiiren osoittimen kuvan päälle)
    • WIDTH, HEIGHT - mitat (jos ne eivät vastaa kuvan todellisia mittoja, kuva "venyy" tai "kutistuu"
    • ALIGN — asettaa tekstin rivitysparametrit (ylä, keskellä, alhaalla, vasen, oikea)
    • VSPACE, HSPACE - aseta kuvan ympärillä olevan pysty- ja vaakatilan mitat

Esimerkki:

< IMG SRC = url ALT = "teksti" TITLE = "teksti" WIDTH = "koko (px, %)" HEIGHT = "koko (px, %)" >

Kuvaan voi laittaa linkin:

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

Kuvakartta

  • <MAP>…</MAP> - luoda kuvakartan, jonka avulla voit tallentaa useita linkkejä yhteen kuvaan.

Esimerkki:

< IMG - leveys = "500" korkeus = "200" usemap = "#jokukartta" src = "url" > < KARTAN nimi = "jokukartta" > < ALUEEN muoto = " suorat" koordinaatit = "6, 7, 140, 196" href = "url1" > < AREA muoto = "ympyrä" -koordit = "239, 98, 92" href = "url2" > < ALUEEN muoto = "monikulmio" -koordit = "386.16, 344.56, 350.189, 385.132, 489.97"1. href = "url3" > </ MAP >

Taulukot

  • TABLE - taulukon luominen. Tunnistevaihtoehdot:
    • BORDER — taulukon jakoviivojen paksuus
    • CELLSPACING - solujen välinen etäisyys
    • CELLPADDING- sisennys kehyksestä solun sisältöön.
  • CAPTION - taulukon otsikko (tämä tunniste on valinnainen)
  • TR - taulukon rivi
  • TH - taulukon sarakkeen otsikko (tämä tunniste on valinnainen)
  • TD - taulukon solu
  • height -pöydän korkeus
  • width -pöydän leveys

Esimerkiksi,

< TABLE BORDER = "1" CELLSPACING = "0" > < CAPTION > Mumbe Yumba krokotiilin saalis </ CAPTION > < TH > Vuosi </ TH > < TH > Saalis </ 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 > </ TABLE >

Luo taulukon:

Krokotiilien saalis Mumbe-Yumbessa
vuosi Ottaa kiinni
1997 214
1998 216
1999 207

TABLE-tunnisteella on myös CELLPADDING-parametri. Se määrittää pikseleinä etäisyyden solun reunan ja sen sisällön välillä. Jos esimerkiksi korvaat taulukon ensimmäisen rivin arvolla

< TAULUKON REUNUS = "1" SOLUVÄLI = "0" CELLPADDING = "5" >

taulukko näyttää tältä:

Krokotiilien saalis Mumbe-Yumbessa
vuosi Ottaa kiinni
1997 214
1998 216
1999 207

 Toinen tunnisteiden parametri TABLE, TR, THon . Se määrittelee kohdistuksen. Mahdolliset arvot ovat (keskellä), (vasemmalla), (oikealla). TDALIGNcenterleftright

Parametri tai ALIGNmäärittää tasauksen tietyn solun sisällä olevan sisällön kohdalle, -  rivin kaikkien solujen sisällölle,  - itse sivun taulukolle. Jokaisen solun tasaus otetaan arvosta , tai jos sitä ei ole asetettu - alkaen , jos sitä ei ole asetettu kumpaankaan - keskelle tai vasemmalle . TDTHTRTABLETDTHTRTHTD

Jos esimerkiksi korvaat taulukon ensimmäiset rivit arvolla

< TABLE BORDER = "1" CELLSPACING = "0" ALIGN = "keskellä" > < CAPTION > Mumbe Yumba krokotiilin saalis </ CAPTION > < TH > Vuosi </ TH > < TH > Saalis </ TH > < TR > < TD > 1997 </ TD > < TD ALIGN = "KESKUS" > 214 </ TD >

taulukko näyttää tältä:

Krokotiilien saalis Mumbe-Yumbessa
vuosi Ottaa kiinni
1997 214
1998 216
1999 207

Suljemattomat tunnisteet TD , TR ja TH johtavat virheelliseen näyttöön, varsinkin sisäkkäisten taulukoiden kanssa.

Lomakkeet

Lomakkeiden luominen HTML:ssä on melko monimutkaista. Tässä annetaan vain päätunnisteiden nimet.

  • FORM - lomakkeen luominen
  • INPUT - syöttöelementti (voi olla eri toimintoja - tekstin syöttämisestä lomakkeen lähettämiseen)
  • TEXTAREA - tekstialue (monirivinen tekstinsyöttökenttä)
  • SELECT - luettelo (yleensä avattavan valikon muodossa)
  • OPTION - luettelon kohde

Symbolit

Symbolin luomiseksi sitä ei tarvitse etsiä näppäimistöltä: voit yksinkertaisesti kirjoittaa tunnisteen; esimerkiksi saadaksesi ¢ , sinun on kirjoitettava &cent;, katkeamaton välilyönti  - &nbsp;, aksentti  - &#x301;jne.

Värien nimet

Seuraavat värit on määritelty HTML:ssä.

Nimi Hex väri
musta #000000
Hopea #c0c0c0
kastanjanruskea #800000
punainen #ff0000
laivasto #000080
sininen #0000ff
violetti #800080
fuksia #ff00ff
vihreä #008000
lime #00ff00
oliivi- #808000
keltainen #ffff00
sinivihreä #008080
aqua #00ffff
harmaa #808080
valkoinen #ffffff

Perusmerkit

Koodi Symboli Merkitys
< < Vähemmän
> > lisää
& & et-merkki
  katkeamaton väli (tässä tilassa riviä ei katkaista käärimistä varten)
&lahko; § kohta
Ei. huone
&kopio; © tekijänoikeus _ _
® ® rekisteröity tavaramerkki _
™ tavaramerkki _ _ _
° ° astetta
« " avauslainaus venäjäksi
" » viimeinen lainaus venäjäksi
&helli; ellipsi
viiva
• rasvainen piste
± ± plus tai miinus
&miinus; miinus

Näppäimistön merkit ' ja " venäjäksi eivät ole lainausmerkkejä. On myös väärin korvata №, ©, ®, ™, °C N, (c), (R), TM, C verkkosivuilla.

Tavuviiva, viiva ja miinus ovat kolme eri merkkiä.

  1. Näppäimistösymboli - kutsutaan yhdysviivaksi ja sitä käytetään sanojen sisällä.
  2. Miinus on leveämpi kuin yhdysmerkki . Sitä käytetään negatiivisten lukujen ja vähennysoperaatioiden kirjoittamiseen.
  3. Viiva on jopa leveämpi kuin miinus . Sitä käytetään sanojen välissä ja lyöty pois välilyönnillä ja edessä - erottamaton . Viivaviivaa käytetään myös osoittamaan numeerisia aikavälejä, mutta sitä ei korvata välilyönnillä.

Lisätietoja: Artemy Lebedev . Viiva, miinus ja yhdysmerkki tai venäläisen typografian ominaisuudet . Johtajuus (15. tammikuuta 2003). Haettu 23. huhtikuuta 2013. Arkistoitu alkuperäisestä 9. joulukuuta 2007.

Merkkejä < , > ja & ei voida näyttää normaalisti HTML:ssä, koska niillä on erityinen merkitys. Ne näytetään aina painikkeilla <, > ja & vastaavasti.

Useimmat erikoismerkit ovat osoitteessa about.com .

Muistiinpanot

  1. HTML-dokumentin juurielementti Kuvaus
  2. HTML-standardi . html.spec.whatwg.org . Haettu: 26.9.2021.

Linkit