HTML elemek

Az oldal jelenlegi verzióját még nem ellenőrizték tapasztalt hozzászólók, és jelentősen eltérhet a 2015. december 11-én felülvizsgált verziótól ; az ellenőrzések 50 szerkesztést igényelnek .

A HTML elem a weboldal  alapvető szerkezeti egysége, HTML nyelven írva . Ezt az elemet minden weboldal forráskódjában láthatja, miután az oldal első sorában beállította a dokumentumtípust. A DOCTYPE megadja, hogy az (X)HTML melyik verzióját használja ez az oldal. Az oldalelemek a nyitó <HTML> címke és a záró </HTML> között helyezkednek el. A <html> elemet gyökérelemnek nevezzük. [egy]


Egy HTML dokumentum szerkezete

A HTML  egy címkézett dokumentumjelölő nyelv , vagyis a HTML nyelven használt bármely dokumentum elemek halmaza, és az egyes elemek elejét és végét speciális jelölések, úgynevezett címkék jelzik . A címkenév beírásának esete nem számít a HTML-ben. Az elemek lehetnek üresek , azaz nem tartalmazhatnak szöveget vagy egyéb adatokat (például sortörés címkét <br> ). Ebben az esetben a záró tag általában nincs megadva. Ezenkívül az elemek rendelkezhetnek olyan attribútumokkal , amelyek meghatározzák egyes tulajdonságaikat (például a <font> címke betűméretét ). Az attribútumok a nyitó címkében vannak megadva. Íme egy példa egy HTML-dokumentum jelölőrészére:

< p > Szöveg két címke között – nyitó és záró. </ p > <a href="http://example.com"> Itt az elem tartalmazza a href attribútumot . </a> Íme egy példa egy üres elemre : <br>

Minden HTML-dokumentumnak, amely megfelel a HTML-specifikáció egy verziójának, egy HTML-verziódeklarációs sorral kell kezdődnie: <!DOCTYPE>, amely általában így néz ki:

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

Ha ez a sor nincs megadva, akkor nehezebb lesz elérni a dokumentum megfelelő megjelenítését a böngészőben .

Továbbá a dokumentum elejét és végét címkék <html>és címkék jelzik </html>. Ezeken a címkéken belül találhatók a dokumentum heading ( <head></head>) és body ( <body></body>) címkéi.

DOCTYPE beállítások a HTML 4.01-hez

  • Szigorú: Nem tartalmaz elavultként vagy elavultként megjelölt címkéket.
<!DOCTYPE HTML NYILVÁNOS "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Átmeneti: elavult címkéket tartalmaz a kompatibilitás és a HTML régebbi verzióiról való egyszerű átállás érdekében.
<!DOCTYPE HTML NYILVÁNOS "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Keretekkel ( Frameset ): hasonló az átmenethez, de tartalmaz címkéket is a keretkészletek létrehozásához.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DOCTYPE HTML 5-höz

A korábbi verziókkal ellentétben csak egy címke van. [2]

<!DOCTYPE html>

Alapelemek

A címkék és paramétereik nem különböznek egymástól. Vagyis a <A HREF="http://example.com"> és a <a href="http://example.com"> ugyanazt jelenti.

A HTML legújabb verzióiban szinte minden címkéhez rengeteg opcionális paraméter tartozik – általában legalább 15. Csak a fő címkeparamétereket adjuk meg.

Hiperhivatkozások

< a href = "fájlnév" target = "_self" > link neve </ a >
  • Az attribútum hrefa hivatkozás által mutatott dokumentum címének értékét adja meg.
  • filename — fájlnév vagy internetcím, amelyre hivatkozni kíván.
  • название ссылки - a hiperszöveg hivatkozás neve, amely megjelenik a böngészőben, azaz megjelenik azoknak, akik meglátogatták az oldalt.
  • target - beállítja annak az ablaknak vagy keretnek az értékét, amelyben a hivatkozás által mutatott dokumentum megnyílik. Lehetséges attribútumértékek:
    • _top — dokumentum megnyitása az aktuális ablakban;
    • _blank - dokumentum megnyitása új ablakban;
    • _self - dokumentum megnyitása az aktuális keretben;
    • _parent — a dokumentum megnyitása a szülőkeretben.

Alapértelmezett érték: _self.

Horgony

Ugyanezt az elemet használják úgynevezett "horgonyok" (horgonyok) létrehozására, amelyeket azután az oldal egy adott elemére mutató hiperhivatkozásokban lehet használni. Például:

<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title > Rögzítés a dokumentumon belül </ title > </ head > < body > < p >< a name = "top" > </ a ></ p > < p > szöveg </ p > < p >< a href = "#top" > Felső </ a ></ p > </ body > </ html >

Hasonlóképpen, egy horgony elhelyezhető egy másik weboldalon vagy egy másik webhelyen található könyvjelzőn: ahol a link irányul, ott kell lennie <a name="xxx"></a>, és ahol a hivatkozás származik, egy font jel és a horgony neve hrefkerül a érték.

Ezenkívül bármely elem azonosítója horgonyként szolgálhat a modern böngészőkben.

Szövegblokkok

  • <H1> … </H1>, <H2> … </H2>, … , <H6> … </H6> — 1., 2., … címsorok 6 szint. A szövegrészek kiemelésére szolgál (az 1. címsor a legnagyobb, a 6. a legkisebb).
  • <P> - új bekezdés. A bekezdés végére is beírhatod </P>, de ez nem kötelező.
  • <BR> - új sor. Ez a címke nincs lezárva (azaz a címke nem létezik </BR>)
  • <HR> - vízszintes vonal
  • <BLOCKQUOTE> … </BLOCKQUOTE>  - idézet. Általában a szöveg jobbra tolódik.
  • <PRE> … </PRE>  — előnézeti mód (előre formázott szöveg). A szóköz karakterek ott maradnak, ahol az eredeti dokumentumban vannak (más címkék figyelmen kívül hagyják). Belsőleg az img, object, big, small, sup és sub címkéktől eltérő soron belüli címkék is feldolgozhatók.
  • <DIV> … </DIV> - blokk (általában CSS -stílusok  alkalmazására használják )
  • <SPAN> … </SPAN> - karakterlánc (általában CSS -stílusok  alkalmazására használják )

Szöveg formázása

  • <EM> … </EM>  - logikai hangsúly (általában dőlt betűvel jelenik meg )
  • <STRONG> … </STRONG>  - megerősített logikai hangsúly (általában félkövérrel van szedve )
  • <I> … </I> - dőlt betűs  szöveg
  • <B> … </B>  - félkövér szöveg
  • <U> … </U>  - szöveg aláhúzása
  • <S> … </S> (vagy <STRIKE> … </STRIKE> ) - áthúzott szöveg
  • <BIG> … </BIG>  - betűméret növelése
  • <SMALL> … </SMALL>  - betűtípus csökkentése
  • <BLINK> … </BLINK>  - villogó szöveg. Figyelem! Ez a címke JavaScript nélkül nem működik az Internet Explorer 5 és régebbi verzióiban
  • <MARQUEE> … </MARQUEE>  - a képernyőn átcsúszott szöveg.
  • <SUB> … </SUB>  - alsó index szöveg. Például H <SUB>2</SUB>O létrehozza a H 2 O szöveget.
  • <SUP> … </SUP>  - felső index szöveg. Például az E=mc <SUP>2</SUP> létrehozza az E=mc 2 szöveget .
  • <FONT параметры> … </FONT>  — betűtípus-paraméterek beállítása. Ennek a címkének a következő lehetőségei vannak:
    • COLOR=цвет - állítsa be a színt. A szín megadható hexadecimális formában: #rrggbb (az első 2 hexadecimális számjegy a piros komponens, a következő 2 a zöld, az utolsó 2 a kék), vagy névvel.
    • FACE=шрифтa betűtípus beállítása
    • SIZE=размерa betűméret beállítása. Méret 1-től 7-ig: Az alapértelmezett méret a 3. Az alapértelmezett méret megváltoztatásának számos módja van.
    • SIZE=+изменениеvagy  — módosítsa a betűméretet a szabványosról. Például a +2 azt jelenti, hogy a méret 2-vel nagyobb, mint a normál méret.SIZE=-изменение

Például,

< U > három </ U > < FONT SIZE = "+2" > nagy </ FONT > < FONT COLOR = "green" > zöld </ FONT > síp jelzi a támadást .

szöveget fog létrehozni

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

Listák

< UL > < LI > első elem </ LI > < LI > második elem </ LI > < LI > harmadik elem </ LI > </ UL >

listát hoz létre

  • első elem
  • második elem
  • harmadik elem

Ha a ( Rendezett lista  - rendezetlen lista) helyett <UL> ( Rendezett lista  - sorszámozott lista), a lista számozásra kerül: <OL>

  1. első elem
  2. második elem
  3. harmadik elem

Ezeknek a címkéknek vannak paraméterei:

írja be a ="type"

ahol a típus  a forma:

- <UL>  karakterekben

  • square - négyzet
  • circle - körméret
  • disk - kör: alapértelmezett

és <OL>  - számok vagy betűk

  • A vagy a (latin betűkkel) - alfabetikus lista: nagy- vagy kisbetűkkel
  • I vagy i - Római számok: nagy- vagy kisbetűkkel (a római számok 1-től 3999-ig jelölik a számokat, a többi - arab)
  • 1 - Arab számok: alapértelmezett

így van írva:

< oltype = " i" > < li > Első </ li > < li > Második </ li > < li > stb . </ li > </ ol >

és létrehozza a következőket:

  1. Első
  2. Második
  3. Stb.

Paraméter start ="start" (csak for <OL> ), amely egy új visszaszámlálás kezdetét határozza meg: például ha nem 1, 2, 3, hanem 24, 25, 26 kell

Így van írva:

< ol start = "24" > < li > Huszonnégy </ li > < li > Huszonöt </ li > < li > stb . </ li >

és létrehozza a következőket:

  1. Huszonnégy
  2. Huszonöt
  3. Stb.

és végül a címkéhez egy <LI> paraméter  - ha egyik számjegyről a másikra kell ugrani: például nem 1, 2, 3, 4, hanem 1, 2, 22, 23 value="следующий"

< ol > < li > Egy </ li > < li > Kettő </ li > < li value = "22" > Huszonkettő </ li > < li > Huszonhárom </ li >

a következőket hozza létre:

  1. Egy
  2. Két
  3. Húszonkettő
  4. Huszonhárom

Végül a harmadik és egyben utolsó lista a definíciók listája :

< DL > < DT > Macska </ DT > < DD > nyávogó háziállat </ DD > < DT > Macska </ DT > < DD > macska férje </ DD > < DT > Krokodil </ DT > < DD > nagy afrikai éles fogú vadállat </ DD > </ DL >

a következőket hozza létre:

Macska nyávogó kisállat Macska macska férj Krokodil nagy afrikai fenevad éles fogakkal

Egyébként a , , címkék <LI>nem <DT>zárhatók <DD>be.

Különbségek a számozott listák megjelenítésében

Ha a számozásban nem pozitív értékek szerepelnek, a böngészők eltérően viselkednek. Például az Internet Explorer figyelmen kívül hagyja value=0a -t value=-1stb., míg más böngészők, például a Chrome , a Firefox megjeleníti a megadott értéket. Ugyanakkor az Internet Explorer nem hagyja figyelmen kívül start=0a , start=-1stb., azaz. kezdheti a listát nem pozitív értékkel, de nem ugorhat nem pozitív értékre a számozásban.

HTML jelölés Ez a böngésző Chrome, Firefox internet böngésző
<ol start=-2><li><li value=0><li value=2></ol>
  1.  
  2.  
  3.  
 -2, 0, 2 -2, -1, 2

Az alfabetikus listában ( type=Avagy type=a) egyes böngészők, például a Chrome, a Firefox nem pozitív értékeket jelenítenek meg számként, míg az Internet Explorer ( Quirks módban , azaz ha az oldal nem ad meg HTML 4.01-et vagy 5-öt a címkében !DOCTYPE HTML) negatív értékeket jelenít meg mínuszjellel ellátott betűkként és nullaként a @ szimbólummal.

HTML jelölés Ez a böngésző Chrome, Firefox Internet Explorer (Quirks mód)
<ol type=A start=-1><li><li><li></ol>
  1.  
  2.  
  3.  
 -1, 0, A -A, @, A

Egy üres vagy nem numerikus értéket ( value=, value=A, value=B) egyes böngészők figyelmen kívül hagynak, mint például a Chrome, a Firefox, míg az Internet Explorer value=1.

HTML jelölés Ez a böngésző Chrome, Firefox internet böngésző
<ol start=-2><li><li value=B><li value=2></ol>
  1.  
  2.  
  3.  
 -2, -1, 2 -2, 1, 2

Különbségek vannak a számok római számmal ( type=Ivagy type=i) való megjelenítésénél, mert Az Internet Explorer ( Quirks módban , azaz ha az oldal nem adja meg a 4.01-es vagy 5-ös HTML-verziót a címkében !DOCTYPE HTML) néhány számot hibásan jelenít meg.

HTML jelölés Ez a böngésző Chrome, Firefox Internet Explorer (Quirks mód)
<ol type=I start=3300><li><li><li><li></ol>
  1.  
  2.  
  3.  
  4.  
MMMCCC
MMMCCCI
MMMCCCII
MMMCCCIII 		MMMCCC
MMMCCC
MMMCCC
MMMCCC

Az 1 és 1880 közötti intervallumban lévő összes számot helyesen jeleníti meg az Internet Explorer, de nem mindegyiket az 1881 és 3999 közötti intervallumból. 603 szám, 67 9 számból álló csoport (xxx1-xxx9) esetében a legkisebb jelentőségű számjegy nem szerepel a római szám bejegyzésében. És ez valószínűleg nem azért van, hogy lerövidítsünk egy hosszú lemezt, mert 3888 – a leghosszabb (1 és 3999 közötti) római számjegyű szám (MMMDCCCLXXXVIII) – helyesen jelenik meg.

Az Internet Explorerben ( Quirks módban ) hibásan megjelenített számcsoportok kereszttel vannak jelölve a táblázatban:

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 ✘ ✘ ✘ ✘ ✘ ✘ ✘

Objektumok

  • EMBED - különféle objektumok beszúrása: nem HTML dokumentumok és médiafájlok
  • APPLET- Java kisalkalmazások  beszúrása
  • SCRIPT - szkriptek beszúrása.

Képek

  • IMG - kép beszúrása. Ez a címke nincs lezárva.
    • SRC - név vagy URL
    • ALT - alternatív név (akkor jelenik meg, ha a böngésző tiltja a képek megjelenítését)
    • TITLE - a kép rövid leírása (megjelenik, ha a kép fölé viszi az egérmutatót)
    • WIDTH, HEIGHT - méretek (ha nem egyeznek meg a kép valódi méreteivel, akkor a kép "nyúlik" vagy "zsugorodik")
    • ALIGN - beállítja a tördelési paramétereket (felső, középső, alsó, bal, jobb)
    • VSPACE, HSPACE - állítsa be a kép körüli függőleges és vízszintes tér méreteit

Példa:

< IMG SRC = url ALT = "szöveg" TITLE = "szöveg" WIDTH = "méret (px, %)" HEIGHT = "méret (px, %)" >

A képhez linket lehet készíteni:

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

Képtérkép

Példa:

< IMG width = "500" height = "200" usemap = "#somemap" src = "url" > < TÉRKÉP neve = "somemap" > < TERÜLET alakja = " egyenes" koordináták = "6, 7, 140, 196" href = "url1" > < TERÜLET alak = "kör" koordináták = "239, 98, 92" href = "url2" > < TERÜLET alakja = "sokszög" koordináták = " 386.16 , 344.56, 350.189, 385.132, 4897.967"1. href = "url3" > </ MAP >

Táblázatok

  • TABLE - táblázat elkészítése. Címkebeállítások:
    • BORDER — az elválasztó vonalak vastagsága a táblázatban
    • CELLSPACING - sejtek közötti távolság
    • CELLPADDING- behúzás a keretből a cella tartalmába.
  • CAPTION - táblázat címe (ez a címke nem kötelező)
  • TR - táblázat sor
  • TH - táblázat oszlopfejléce (ez a címke nem kötelező)
  • TD - táblázat cella
  • height - asztal magasság
  • width - asztal szélessége

Például,

< TABLE BORDER = "1" CELLSPACING = "0" > < CAPTION > Mumbe Yumba krokodilfogás </ CAPTION > < TH > Év </ TH > < TH > Fogás </ 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 >

Létrehoz egy táblázatot:

Krokodilfogás Mumbe-Yumbében
Év Fogás
1997 214
1998 216
1999 207

A TABLE címkének van egy CELLPADDING paramétere is. Meghatározza a távolságot pixelben a cella határa és tartalma között. Például, ha a táblázat első sorát a következőre cseréli:

< TÁBLÁZATSZEGÉR = "1" CELLASTÉR = "0" CELLPADDING = " 5" >

a táblázat így fog kinézni:

Krokodilfogás Mumbe-Yumbében
Év Fogás
1997 214
1998 216
1999 207

A címkék  másik paramétere TABLE, TR, TH. Ez határozza meg az igazítást. A lehetséges értékek: (középen), (balra), (jobbra). TDALIGNcenterleftright

A vagy paraméter határozza ALIGNmeg az igazítást az adott cellán belüli tartalomhoz, in  - a sor összes cellájának tartalmához,  - magának a táblázatnak az oldalon. Minden cellánál az igazítás innen , vagy ha nincs beállítva - from , ha nincs beállítva - középre vagy balra a . TDTHTRTABLETDTHTRTHTD

Például, ha a táblázat első sorait a következőre cseréli:

< TABLE BORDER = "1" CELLSPACING = "0" ALIGN = "center" > < CAPTION > Mumbe Yumba krokodilfogás </ CAPTION > < TH > Year </ TH > < TH > Catch </ TH > < TR > < TD > 1997 </ TD > < TD ALIGN = "KÖZÉP" > 214 </ TD >

a táblázat így fog kinézni:

Krokodilfogás Mumbe-Yumbében
Év Fogás
1997 214
1998 216
1999 207

A lezáratlan TD , TR és TH címkék helytelen megjelenítéshez vezetnek, különösen ha beágyazott táblázatokkal dolgozik.

Űrlapok

Az űrlapok létrehozása HTML-ben meglehetősen bonyolult. Itt csak a fő címkék nevei szerepelnek.

  • FORM - űrlap létrehozása
  • INPUT - beviteli elem (különböző funkciója lehet - a szöveg bevitelétől az űrlap elküldéséig)
  • TEXTAREA - szöveges terület (többsoros szövegbeviteli mező)
  • SELECT - lista (általában legördülő menü formájában)
  • OPTION - listaelem

Szimbólumok

Szimbólum létrehozásához nem szükséges rákeresni a billentyűzeten: egyszerűen beírhatja a címkét; például a ¢ eléréséhez be kell írnia a következőt: , &cent;szóköz -  , &nbsp;ékezet -  stb &#x301;.

Színnevek

A következő színek a HTML-ben vannak definiálva.

Név Hatszögletű szín
fekete #000000
ezüst #c0c0c0
gesztenyebarna #800000
piros #ff0000
haditengerészet #000080
kék #0000ff
lila #800080
fukszia #ff00ff
zöld #008000
mész #00ff00
olajbogyó #808000
sárga #ffff00
a zöldeskék #008080
aqua #00ffff
szürke #808080
fehér #ffffff

Alapkarakterek

A kód Szimbólum Jelentése
< < Kevésbé
> > több
& & és és
  nem törő szóköz (ezen a mezőn a sor nem törik a burkoláshoz)
&szekta; § bekezdés
№ Nem. szoba
&másolat; © szerzői jog _ _
® ® bejegyzett védjegy _
™ ™ védjegy _ _ _
° ° fokon
« " nyitó idézet oroszul
" » záró idézet oroszul
&helli; … ellipszis
— — gondolatjel
• • kövér pont
± ± plusz vagy mínusz
&mínusz; − mínusz

Az orosz nyelvű ' és "" billentyűzet karakterei nem idézőjelek. Az is helytelen, ha a №, ©, ®, ™, °C karaktereket N, (c), (R), TM, C-re cseréljük a webhelyeken.

A kötőjel, a gondolatjel és a mínusz három különböző karakter.

  1. Billentyűzet szimbólum - kötőjelnek nevezik , és szavakon belül használatos.
  2. A mínusz szélesebb, mint a kötőjel . Negatív számok írására és kivonási műveletekre szolgál.
  3. A kötőjel még a mínusznál is szélesebb. A szavak között használatos, szóközökkel törik le, elöl pedig elválaszthatatlan . A kötőjelet a numerikus intervallumok jelzésére is használják, de nem szóközökkel.

További részletek: Artemy Lebedev . Dash, mínusz és kötőjel, vagy az orosz tipográfia jellemzői . Vezetés (2003. január 15.). Letöltve: 2013. április 23. Az eredetiből archiválva : 2007. december 9..

A < , > és & karakterek nem jeleníthetők meg normálisan a HTML-ben, mert különleges jelentésük van. Mindig a <, > és & illetőleg.

A legtöbb speciális karakterért lásd az about.com webhelyet .

Jegyzetek

  1. ↑ HTML dokumentum gyökérelem Leírás
  2. ↑ HTML szabvány . html.spec.whatwg.org . Letöltve: 2021. szeptember 26.

Linkek