Megjegyzés: letöltheti a könyv PDF / ePub / Mobi változatát, így offline módon is elolvashatja.

Bevezetés
Üdvözöljük! Azért írtam ezt a könyvet, hogy segítsek a HTML gyors elsajátításában és a haladó HTML témák megismerésében.
A HTML, a Hyper Text Markup Language rövidítése, az egyik legfontosabb építőköve a webnek.
A HTML hivatalosan 1993-ban született, és azóta az aktuális állapotává fejlődött, az egyszerű szöveges dokumentumokról a gazdag webalkalmazások táplálására.
Ez a kézikönyv hatalmas közönségnek szól.
Először is a kezdő. Összefoglalóan, de átfogóan magyarázom a HTML-t nulláról, így ezt a könyvet felhasználva megtanulhatja a HTML-t az alapoktól.
Aztán a szakember. A HTML-t gyakran másodlagos dolognak tartják. Lehet, hogy magától értetődő.
Mégis sok minden homályos sok ember számára. Én is. Ezt a kézikönyvet azért készítettem, hogy jobban megértsem a témát, mert amikor valamit meg kell magyaráznom, jobb, ha először meggyőződöm arról, hogy a dolgot kifordítva ismerem.
Még akkor is, ha nem írsz HTML-t a mindennapi munkádba, a HTML működésének ismerete segíthet némi fejfájást megtakarítani, amikor időnként meg kell értened, például egy weboldal módosítása közben.
A Twitteren @flaviocopes elérhető.
A honlapom a flaviocopes.com.
Könyvindex
- Előszó
- HTML alapok
- A dokumentum címsora
- A dokumentum törzse
- Címkék, amelyek kölcsönhatásba lépnek a szöveggel
- Linkek
- Konténer címkék és oldalszerkezet HTML
- Formák
- Táblázatok
- Multimédiás címkék: audio és video
- iframe-ek
- Képek
- Megközelíthetőség
ELŐSZÓ
A HTML az alapja a Web nevű csodának.
Hihetetlen erő rejlik e meglehetősen egyszerű és korlátozott szabályrendszer alatt, amely lehetővé teszi számunkra - fejlesztőknek, készítőknek, tervezőknek, íróknak és bütyköknek - kézműves dokumentumokat, alkalmazásokat és élményeket az egész világon.
Az első HTML-könyvem 1997-ben jelent meg, és "HTML Unleashed" néven volt. Nagy, sok oldalas, hosszú darab.
Több mint 20 év telt el, és a HTML továbbra is a web alapja, minimális változásokkal azóta.
Persze több szemantikus címkét kaptunk, a prezentációs HTML már nem egy dolog, és a CSS gondoskodott a dolgok tervezéséről.
A HTML sikere egy dologon alapszik: az egyszerűségen .
Ellenállt annak, hogy XHTML-en keresztül XML-dialektusba rabolják, amikor végül az emberek rájöttek, hogy ez a dolog túlságosan összetett.
A számunkra nyújtandó másik tulajdonság miatt tette: a megbocsátás . Van néhány szabály, igaz, de miután ezeket megtanulta, nagy szabadsága van.
A böngészők megtanultak rugalmasságot tanúsítani, és mindig igyekeznek mindent megtenni a HTML elemzése és a felhasználók számára történő bemutatása során.
És az egész webes platform jól csinált egy dolgot: soha nem törte meg a visszafelé kompatibilitást. Nagyon hihetetlen, hogy visszatérhetünk az 1991-ben írt HTML-dokumentumokhoz, és nagyjából úgy néznek ki, mint akkoriban.
Még azt is tudjuk, hogy mi volt az első weboldal. Ez a következő: //info.cern.ch/hypertext/WWW/TheProject.html
És láthatja az oldal forrását, köszönhetően a web és a HTML másik nagy tulajdonságának: bármely weboldal HTML-jét ellenőrizhetjük .
Ne vedd ezt természetesnek. Nem ismerek más platformot, amely ezt a képességet megadja nekünk.
A bármely böngészőbe épített kivételes Fejlesztői eszközök segítségével ellenőrizhetjük és inspirálhatjuk a HTML-kódot, amelyet bárki a világon írt.
Ha még nem ismeri a HTML-t, akkor ennek a könyvnek az a célja, hogy segítsen az indulásban. Ha gyakorlott webfejlesztő vagy, ez a könyv javítani fogja ismereteidet.
Annyit tanultam írás közben, annak ellenére, hogy már több mint 20 éve dolgozom a weben, és biztos vagyok benne, hogy talál valami újat is.
Vagy újra megtanul valami régit, amit elfelejtett.
Mindenesetre a könyv célja az, hogy hasznos legyen számodra, és remélem, hogy ez sikerülni fog.
HTML ALAPOK
A HTML a WHATWG által meghatározott szabvány , a Web Hypertext Application Technology Working Group rövidítése, a legnépszerűbb böngészőben dolgozó emberek által létrehozott szervezet. Ez azt jelenti, hogy alapvetően a Google, a Mozilla, az Apple és a Microsoft ellenőrzi.
A múltban a W3C (World Wide Web Consortium) volt a szervezet, amely a HTML szabvány létrehozásával foglalkozott.
A vezérlés informálisan a W3C-ről a WHATWG-re költözött, amikor kiderült, hogy a W3C XHTML felé történő tolása nem jó ötlet.
Ha még soha nem hallottál az XHTML-ről, íme egy rövid történet. A 2000-es évek elején mindannyian azt hittük, hogy a Web jövője XML (komolyan). Tehát a HTML SGML-alapú szerzői nyelvből XML-jelölő nyelvvé vált.
Nagy változás volt. További szabályokat kellett ismernünk és tiszteletben tartanunk. Szigorúbb szabályok.
Végül a böngésző gyártói rájöttek, hogy ez nem a megfelelő út az internet számára, és visszaléptek, létrehozva a ma HTML5 néven ismert nevet.
A W3C nem igazán értett egyet abban, hogy feladja a HTML irányítását, és évek óta két versengő szabvány állt rendelkezésünkre, amelyek mindegyike arra törekedett, hogy hivatalos legyen. Végül 2019. május 28-án a W3C hivatalossá tette, hogy az "igazi" HTML verziót a WHATWG tette közzé.
Említettem a HTML5-et. Hadd magyarázzam el ezt a kis történetet. Tudom, ez egészen zavaró eddig, mint sok mindenben az életben, amikor sok színész vesz részt, mégis lenyűgöző.
1993-ban volt HTML 1. verziónk . Itt van az eredeti RFC.
A HTML 2 1995-ben következett.
1997 januárjában kaptunk HTML 3-ot , 1997 decemberében pedig a HTML 4- et.
Forgalmas idők!
Több mint 20 év telt el, megvolt ez az egész XHTML dolog, és végül eljutottunk ehhez a HTML5 "dologhoz", ami valójában már nem csak HTML .
A HTML5 egy olyan kifejezés, amely ma már egy egész technológiát meghatároz, amely magában foglalja a HTML-t, de rengeteg API-t és szabványt ad hozzá, mint például a WebGL, az SVG és még sok más.
A legfontosabb, amit itt meg kell érteni, ez a következő: nincs (többé) HTML verzió. Ez egy életszínvonal. Mint a CSS, amelyet "3" -nak hívnak, de a valóságban egy csomó különállóan kifejlesztett független modul van. Mint a JavaScript, ahol évente egy új kiadásunk van, manapság azonban csak az számít, hogy az egyes funkciókat melyik motor hajtja végre.
Igen, HTML5-nek hívjuk, de a HTML4 1997-ből származik. Ez hosszú idő bárminek, nemhogy az internetnek.
Itt "él" a szabvány: //html.spec.whatwg.org/multipage.
A HTML az a jelölőnyelv, amelyet a weben fogyasztott tartalom strukturálásához használunk.
A HTML-t különböző módon tálalják a böngészőhöz.
- Létrehozhat egy szerveroldali alkalmazás, amely a kérés vagy a munkamenet adatai alapján építi fel, például egy Rails vagy Laravel vagy Django alkalmazás.
- Hozhat létre egy JavaScript kliensoldali alkalmazás, amely HTML-t generál menet közben.
- A legegyszerűbb esetben fájlban tárolható, és egy webszerver kiszolgálhatja a böngészőnek.
Merüljünk bele ebbe az utolsó esetbe. Bár a gyakorlatban valószínűleg ez a legkevésbé népszerű módszer a HTML létrehozására, mégis alapvető fontosságú az alapvető építőelemek ismerete.
Megállapodás szerint egy HTML-fájl mentésre kerül egy kiterjesztéssel .html
vagy .htm
kiterjesztéssel.
Ebben a fájlban címkék segítségével rendezzük a tartalmat .
A címkék beburkolják a tartalmat, és minden címke különös jelentést ad a beburkolt szövegnek.
Tegyünk néhány példát.
Ez a HTML-kódrészlet létrehoz egy bekezdést a p
címke használatával:
A paragraph of text
Ez a HTML-kódrészlet létrehozza az elemek listáját a ul
címke segítségével, ami rendezetlen listát jelent , és a li
címkéket, amelyek a listaelemet jelentik :
- First item
- Second item
- Third item
Amikor egy HTML oldalt a böngésző szolgáltat, a címkék értelmezése megtörténik, és a böngésző az elemeket a vizuális megjelenésüket meghatározó szabályok szerint rendereli.
Néhány ilyen szabály beépített, például hogyan jelenik meg a lista, vagy hogy a hivatkozás kék színnel van aláhúzva.
Néhány más szabályt Ön határoz meg a CSS segítségével.
A HTML nem prezentációs. Nem foglalkozik azzal, hogy néznek ki a dolgok . Ehelyett azzal foglalkozik, hogy mit jelentenek a dolgok .
A böngészőnek kell meghatároznia a dolgok kinézetét az irányelvek alapján, akik meghatározzák az oldalt és a CSS nyelvet.
Ez a két példa, amelyeket készítettem, HTML-kódrészletek, amelyek az oldal kontextusán kívülre kerültek.
HTML oldal felépítése
Készítsünk példát egy megfelelő HTML oldalra.
A dolgok a Dokumentumtípus-deklarációval (más néven doctype ) kezdődnek, amellyel elmondhatjuk a böngészőnek, hogy ez egy HTML-oldal, és hogy a HTML melyik verzióját használjuk.
A modern HTML a következő doctype-t használja:
Ezután megvan az html
elem, amelynek nyitó és záró címkéje van:
...
A legtöbb címke párosítva van egy nyitó és egy záró címkével. A záró tag van írva ugyanaz, mint a nyitó tag, de egy /
:
some content
Van néhány önzáró címkéket, amelyek segítségével nem kell külön záró tag, mivel nem tartalmaz semmi bennük .
A html
kezdő címkét a dokumentum elején, közvetlenül a dokumentumtípus deklaráció után használják.
A html
befejező címke az utolsó dolog, ami egy HTML dokumentumban található.
Az html
elemen belül 2 elemünk van: head
és body
:
... ...
Belül head
olyan címkékkel rendelkezünk, amelyek elengedhetetlenek a weboldal létrehozásához, például a cím, a metaadatok, valamint a belső vagy külső CSS és a JavaScript. Többnyire olyan dolgok, amelyek nem közvetlenül jelennek meg az oldalon, de csak a böngészőben (vagy olyan botokban, mint a Google kereső bot) segítik a megfelelő megjelenítést.
Belül body
meg lesz az oldal tartalma. A látható dolgok .
Címkék vs elemek
Címkéket és elemeket említettem. Mi a különbség?
Az elemeknek van kezdő és záró címkéje. Ebben a példában a p
kezdő és a záró címkéket használjuk egy p
elem létrehozásához :
A paragraph of text
Tehát egy elem alkotja a teljes csomagot :
- kezdő tag
- szöveges tartalom (és esetleg más elemek)
- záró tag
Ha egy elemnek nincs záró címkéje, akkor azt csak a kezdő címkével írják, és nem tartalmazhat szöveges tartalmat.
Ennek ellenére használhatom a könyvben a címkét vagy az elem kifejezést, ami ugyanazt jelenti, kivéve, ha kifejezetten megemlítem a kezdő címkét vagy a végcímkét.
Attribútumok
Egy elem kezdő címkéjén speciális információrészletek lehetnek, amelyeket csatolhatunk, az úgynevezett attribútumokat .
Az attribútumok key="value"
szintaxisa:
A paragraph of text
Használhat egyetlen idézőjelet is, de a dupla idézőjelek használata a HTML-ben nagyon jó szokás.
Sok közülük lehet:
A paragraph of text
és néhány attribútum logikai, vagyis csak a kulcsra van szükséged:
A class
és az id
attribútumok a leggyakrabban használtak.
Különleges jelentéssel bírnak, és hasznosak mind a CSS-ben, mind a JavaScript-ben.
A különbség a kettő között az, hogy az an id
egyedi egy weboldal kontextusában; nem lehet lemásolni.
Az osztályok viszont többször is megjelenhetnek több elemen.
Ráadásul az an id
csak egy érték. class
több értéket tartalmazhat, szóközzel elválasztva:
A paragraph of text
Gyakori, hogy a kötőjellel -
elválasztják a szavakat az osztályértékben, de ez csak konvenció.
Ez csak a lehetséges attribútumok közül kettő. Egyes attribútumokat csak egy címkéhez használnak. Nagyon specializáltak.
Más attribútumok általánosabban használhatók. Most láttad id
és class
, de van más is, style
amelyek segítségével beilleszthetők a CSS-szabályok egy elembe.
Nem érzékeny a kis- és nagybetűkre
A HTML kis- és nagybetűk nem érzékeny. A címkék írhatók nagybetűvel vagy kisbetűvel. Az első időkben a sapkák voltak a szokásosak. Ma a kisbetű a szokás. Ez egy egyezmény.
Általában így írsz:
A paragraph of text
így nem:
A paragraph of text
fehér űr
Nagyon fontos. A HTML-ben még akkor is, ha több szóközt ad hozzá egy sorhoz, a böngésző CSS-motorja összeesik.
Például ennek a bekezdésnek a megjelenítése:
A paragraph of text
megegyezik ezzel:
A paragraph of text
és ugyanaz, mint ez:
A paragraph of text
> A szóköz használatával megváltoztathatja a dolgok viselkedését. További információ arról, hogy a CSS hogyan dolgozza fel a szóközöket, a CSS specifikációban található
Jellemzően támogatom
A paragraph of text
vagy
A paragraph of text
A beágyazott címkéket 2 vagy 4 karakterrel kell behúzni, az Ön preferenciájától függően:
A paragraph of text
- A list item
Megjegyzés: ez a "szóköz nem releváns" funkció azt jelenti, hogy ha további helyet akar hozzáadni, akkor eléggé megőrülhet. Azt javaslom, hogy CSS használatával több helyet biztosítson, ha szükséges.
Megjegyzés: különleges esetekben használhatja a
HTML entitást (rövidítés, amely nem töretlen helyet jelent ) - később a HTML entitásokról. Szerintem ezzel nem szabad visszaélni. A vizuális megjelenítés megváltoztatásához mindig a CSS-t részesítik előnyben.
A DOKUMENTUMFEJEZET
A head
címke speciális címkéket tartalmaz, amelyek meghatározzák a dokumentum tulajdonságait.
Mindig a body
címke elé íródik , közvetlenül a nyitó html
címke után :
... ...
Soha nem használunk attribútumokat ezen a címkén. És nem írunk bele tartalmat.
Ez csak tároló más címkék számára. Benne sokféle címke található, attól függően, hogy mit kell tennie:
title
script
noscript
link
style
base
meta
A title
címke
A title
címke határozza meg az oldal címét. A cím a böngészőben jelenik meg, és ez különösen fontos, mivel ez az egyik kulcsfontosságú tényező a Search Engine Optimization (SEO) szempontjából.
A script
címke
Ezt a címkét használják a JavaScript hozzáadásához az oldalhoz.
Beleillesztheti egy nyitó címke, a JavaScript kód és a záró címke használatával:
..some JS
Vagy betölthet egy külső JavaScript fájlt a következő src
attribútum használatával:
Az type
attribútum alapértelmezés szerint a értéke text/javascript
, tehát teljesen opcionális.
Van valami nagyon fontos, amit erről a címkéről tudni kell.
Néha ezt a címkét használják az oldal alján, közvetlenül a záró címke előtt . Miért? Teljesítmény okokból.
Alapértelmezés szerint a szkriptek betöltése blokkolja az oldal megjelenítését, amíg a parancsfájl elemzésre és betöltésre nem kerül.
Az oldal aljára helyezésével a szkript betöltődik és végrehajtásra kerül, miután az egész oldalt már elemezték és betöltötték, ami jobb élményt nyújt a felhasználó számára, ha azt a head
címkében tartja.
Véleményem szerint ez most rossz gyakorlat. Hagyja script
élni a head
címkét.
A modern JavaScript-ben van egy alternatívánk, amely jobban teljesít, mint a szkript az oldal alján - az defer
attribútum - tartani . Ez egy példa, amely egy file.js
fájlt tölt be az aktuális URL-hez képest:
Ez az a forgatókönyv, amely gyorsabb útvonalat indít a gyorsan betöltő oldal és a gyorsan betöltő JavaScript felé.
Megjegyzés: az async
attribútum hasonló, de véleményem szerint rosszabb lehetőség, mint defer
. A miérteket részletesebben a //flaviocopes.com/javascript-async-defer/ oldalon ismertetem.
A noscript
címke
Ez a címke arra szolgál, hogy észlelje, ha a szkriptek le vannak tiltva a böngészőben.
Megjegyzés: A felhasználók a böngésző beállításaiban letilthatják a JavaScript szkripteket. Vagy lehet, hogy a böngésző alapértelmezés szerint nem támogatja őket.
Különböző módon használják, attól függően, hogy a dokumentum fejébe vagy a dokumentum törzsébe került-e.
Most a dokumentumfejről beszélünk, ezért először mutassuk be ezt a felhasználást.
Ebben az esetben a noscript
címke csak más címkéket tartalmazhat:
link
címkékstyle
címkékmeta
címkék
az oldal által szolgáltatott erőforrások vagy az meta
információk megváltoztatása, ha a szkriptek le vannak tiltva.
Ebben a példában beállítottam egy elemet az no-script-alert
osztállyal, hogy megjelenjen, ha a szkriptek le vannak tiltva, display: none
alapértelmezés szerint:
... .no-script-alert { display: block; } ... ...
Oldjuk meg a másik esetet: ha beillesztjük a törzsbe, akkor tartalmazhat olyan tartalmat, mint a bekezdések és más címkék, amelyeket az UI renderel.
A link
címke
A link
címke a dokumentum és más erőforrások közötti kapcsolatok beállítására szolgál.
Elsősorban egy külső CSS-fájl összekapcsolására szolgál.
Ennek az elemnek nincs záró címkéje.
Használat:
... ... ...
Az media
attribútum lehetővé teszi a különböző stíluslapok betöltését az eszköz képességeitől függően:
A stíluslapoktól eltérő forrásokhoz is linkelhetünk.
Például társíthatunk RSS-hírcsatornát a
Vagy társíthatunk egy favicont a következők használatával:
Ez a címke volt is használják több tartalom van, hogy jelezze az előző és a következő oldal segítségével rel="prev"
és rel="next"
. Leginkább a Google számára. 2019-től a Google bejelentette, hogy már nem használja ezt a címkét, mert nélküle megtalálja a megfelelő oldalszerkezetet.
A style
címke
Ez a címke használható stílusok hozzáadására a dokumentumba, nem pedig külső stíluslap betöltése.
Használat:
.some-css {}
A link
címkéhez hasonlóan az media
attribútummal is használhatja azt a CSS-t csak a megadott médiumon:
.some-css {}
A base
címke
Ezt a címkét használjuk az alap URL beállításához az oldalon található összes relatív URL-hez.
... ... ...
A meta
címke
A metacímkék sokféle feladatot látnak el, és nagyon-nagyon fontosak.
Különösen a SEO-hoz.
meta
az elemeknek csak a kezdő címkéjük van.
A legalapvetőbb a description
metacímke:
Ez lehet a Google felhasználhatja generálni az oldalt leírás a találati oldalakon, ha úgy találja, hogy jobban leírja az oldalon, mint az oldalon szereplő tartalom (ne kérdezd, hogyan).
A charset
metacímke az oldal karakterkódolásának beállítására szolgál. utf-8
a legtöbb esetben:
A robots
metacímke utasítja a keresőmotor botjait, hogy indexeljenek-e egy oldalt vagy sem:
Vagy ha linkeket követnek, vagy sem:
A nofollow beállítható az egyes linkeken is. Így állíthat be nofollow
globálisan.
Kombinálhatja őket:
Az alapértelmezett viselkedés az index, follow
.
Akkor más tulajdonságok, beleértve nosnippet
, noarchive
, noimageindex
és így tovább.
Azt is elmondhatja a Google-nak, hogy az összes keresőmotort megcélozza :
És más keresőmotoroknak is lehet saját metacímkéjük.
Ennek apropóján elmondhatjuk a Google-nak, hogy tiltsa le néhány funkciót. Ez megakadályozza a fordítási funkciót a keresőmotor találataiban:
A viewport
metacímke arra szólítja fel a böngészőt, hogy állítsa be az oldal szélességét az eszköz szélessége alapján.
További információ erről a címkéről.
Egy másik meglehetősen népszerű metacímke az http-equiv="refresh"
. Ez a sor arra utasítja a böngészőt, hogy várjon 3 másodpercet, majd irányítsa át a másik oldalra:
A 3 helyett 0 használata a lehető leghamarabb átirányítja.
Ez nem teljes hivatkozás; Más kevésbé használt metacímkék léteznek.
A dokumentum címsorának bemutatása után elkezdhetünk merülni a dokumentum törzsében.
A DOKUMENTUM TEST
A záró fejcímke után csak egy dolog lehet egy HTML dokumentumban: az body
elem.
... ...
Csakúgy, mint a head
és a html
tagek, csak egy body
címke lehet egy oldalon.
A body
címkén belül minden olyan címke megtalálható, amely meghatározza az oldal tartalmát.
Technikailag a kezdő és a befejező címke nem kötelező. De jó gyakorlatnak tartom ezek hozzáadását. Csak az érthetőség kedvéért.
A következő fejezetekben meghatározzuk az oldal törzsében használható címkék sokféleségét.
De előtte különbséget kell bevezetnünk a blokkelemek és az inline elemek között.
Blokk elemek vs beillesztett elemek
A vizuális elemek, amelyek az oldal törzsében vannak meghatározva, általában 2 kategóriába sorolhatók:
- blokkelemek (
p
,,div
fejlécelemek, listák és listaelemek, ...) - inline elemek (
a
,span
,img
, ...)
Mi a különbség?
A blokkelemek, ha az oldalon helyezkednek el, nem engednek más elemeket maguk mellé. Balra vagy jobbra.
Inline elemek ehelyett más inline elemek mellett ülhetnek.
A különbség abban rejlik, hogy a vizuális tulajdonságokban mi is szerkeszthetünk CSS-t. Módosíthatjuk a blokkelemek szélességét / magasságát, margóját, párnázatát és szegélyét. Inline elemeknél nem tehetjük meg.
Ne feledje, hogy a CSS használatával megváltoztathatjuk az egyes elemek alapértelmezett értékét, beállíthatunk például egy p
tag-et inline-nak vagy egy span
a-t blokk elemnek.
További különbség, hogy az inline elemek blokkelemekben lehetnek. Ez fordítva nem igaz.
Egyes blokkelemek tartalmazhatnak más blokkelemeket, de ez attól függ. A p
címke például nem engedélyezi az ilyen lehetőséget.
A SZÖVEGGEL KAPCSOLATOS CÍMKÉK
A p
címke
Ez a címke meghatározza a szöveg egy bekezdését.
Some text
Ez egy blokk elem.
Belsejébe tetszőleges inline elemet adhatunk, tetszik span
vagy a
.
Nem vehetünk fel blokk elemeket.
Nem fészkelhetünk be egy p
elemet egy másikba.
Alapértelmezés szerint a böngészők olyan bekezdést stílusoznak, amelynek teteje és alja margóval rendelkezik. 16px
a Chrome-ban, de a pontos érték böngészőnként eltérhet.
Ez két egymást követő bekezdést választ el egymástól, megismételve azt, amit egy "bekezdésről" gondolunk a nyomtatott szövegben.
A span
címke
Ez egy beágyazott címke, amely felhasználható a CSS használatával megcélozható szakaszok létrehozására:
A part of the text and here another part
A br
címke
Ez a címke egy sortörést jelent. Ez egy inline elem, és nem igényel záró címkét.
Arra használjuk, hogy új p
tagot hozzunk létre egy címke belsejében , új bekezdés létrehozása nélkül.
És összehasonlítva egy új bekezdés létrehozásával, ez nem ad további szóközt.
Some text
A new line
A címke címkék
A HTML 6 fejléccímkét biztosít nekünk. A legfontosabb a legkevésbé fontos, van h1
, h2
, h3
, h4
, h5
, h6
.
Az oldalnak általában egy h1
eleme lesz , ez az oldal címe. Ezután h2
az oldal tartalmától függően egy vagy több eleme lehet.
A fejlécek, különösen a fejlécszervezés szintén elengedhetetlenek a SEO számára, és a keresőmotorok sokféleképpen használják őket.
A böngésző alapértelmezés szerint h1
nagyobbá teszi a címkét, és kisebbé teszi az elemek méretét, amikor a közeli szám h
növekszik:

Minden címsor blokk elem. Nem tartalmazhatnak más elemeket, csak szöveget.
A strong
címke
Ez a címke arra használható, hogy a benne lévő szöveget erősnek jelölje . Ez nagyon fontos, ez nem vizuális, hanem szemantikai tipp. Az alkalmazott közegtől függően annak értelmezése változó lesz.
A böngészők alapértelmezés szerint félkövérré teszik a címke szövegét .
A em
címke
Ez a címke jelöli meg azokat a szövegben benne, mint hangsúlyozta . Hasonlóan strong
, ez nem vizuális, hanem szemantikai célzás.
A böngészők alapértelmezés szerint ebben a dőlt betűben írják a szöveget .
Idézetek
A blockquote
HTML címke hasznos idézetek beszúrására a szövegbe.
A böngészők alapértelmezés szerint margót alkalmaznak az blockquote
elemre. A Chrome 40 képpontos bal és jobb margót, valamint 10 képpontos felső és alsó margót alkalmaz.
A q
HTML címkét a belső idézetekhez használják.
Vízszintes vonal
Nem igazán szöveg alapján, de a hr
címkét gyakran használják egy oldal belsejében. Ez azt jelenti horizontal rule
, és hozzáad egy vízszintes vonalat az oldalon.
Hasznos az oldal szakaszainak elkülönítésére.
Kód blokkok
A code
címke különösen hasznos a kód megjelenítésére, mert a böngészők egyoldalas betűtípust adnak neki.
A böngészők általában csak ezt csinálják. Ez a Chrome által alkalmazott CSS:
code { font-family: monospace; }
Ez a címke általában címkébe van csomagolva pre
, mert az code
elem figyelmen kívül hagyja a szóközt és a sortöréseket. Mint a p
címke.
A Chrome pre
ezt az alapértelmezett stílust adja meg :
pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0px; }
amely megakadályozza a fehér tér összeomlását és blokkelemgé teszi.
Listák
3 típusú listánk van:
- rendezetlen listák
- rendezett listák
- definíciós listák
A rendezetlen listák a ul
címke használatával jönnek létre . A lista minden elemét a li
címke hozza létre :
- First
- Second
A rendezett listák hasonlóak, csak a ol
címkével készültek :
- First
- Second
A kettő közötti különbség az, hogy a rendezett listákon minden tétel előtt van egy szám:

A definíciós listák kissé eltérnek. Van egy kifejezés, és annak meghatározása:
-
Flavio
-
The name
-
Copes
-
The surname
A böngészők általában így jelenítik meg őket:

Azt kell mondanom, hogy ritkán látja őket a vadonban, az biztos, hogy nem sok, ul
és ol
néha, de néha hasznosak lehetnek.
Egyéb szöveges címkék
Számos címke létezik prezentációs célokra:
- a
mark
címkét - a
ins
címkét - a
del
címkét - a
sup
címkét - a
sub
címkét - a
small
címkét - a
i
címkét - a
b
címkét
Ez egy példa azok vizuális megjelenítésére, amelyet alapértelmezés szerint alkalmaznak a böngészők:

Kíváncsi lehet, miben b
más, mint strong
? És miben i
más, mint em
?
A különbség a szemantikai jelentésben rejlik. Bár b
és i
közvetlen utalás a böngészőre, hogy egy szöveget félkövér vagy dőlt betűvel készítsen, strong
és em
a szövegnek különleges jelentést adjon, és a böngésző feladata, hogy megadja a stílust. Ami történetesen pontosan megegyezik a b
és i
alapértelmezés szerint. Bár ezt megváltoztathatja a CSS használatával.
Számos más, kevésbé használt címke kapcsolódik a szöveghez. Csak megemlítettem azokat, amelyeket a legtöbbnek látok.
LINKEK
A hivatkozásokat a a
címke segítségével határozzuk meg . A hivatkozás célját annak href
attribútumán keresztül állítják be .
Példa:
click here
A kezdő és a záró tag között megvan a link szövege.
A fenti példa abszolút URL. A linkek relatív URL-ekkel is működnek:
click here
Ebben az esetben a hivatkozásra kattintva a felhasználó /test
az aktuális eredet URL-jére kerül.
Legyen óvatos a /
karakterrel. Ha kihagyja, a böngésző ahelyett, hogy az eredetről indulna, csak hozzáadja a test
karakterláncot az aktuális URL-hez.
Példa: az oldalon vagyok, //flaviocopes.com/axios/
és rendelkezem a következő linkekkel:
/test
ha egyszer rákattint, akkor eljutok//flaviocopes.com/test
test
ha egyszer rákattint, akkor eljutok//flaviocopes.com/axios/test
A linkcímkék más dolgokat is tartalmazhatnak, nem csak szöveget. Például képek:
vagy bármely más elem, az egyéb címkék kivételével .
Ha egy új lapon szeretné megnyitni a hivatkozást, használhatja a következő target
attribútumot:
open in new tab
TÁROLÓ CÍMKÉK ÉS OLDALSZERKEZET HTML
Konténer címkék
A HTML tárolócímkéket tartalmaz. Ezek a címkék tartalmazhatnak más címkék nem meghatározott készletét.
Nekünk van:
article
section
div
és zavaró lehet megérteni a köztük lévő különbséget.
Lássuk, mikor kell mindegyiket használni.
article
A cikkcímke egy olyan dolgot azonosít , amely független lehet az oldal többi részétől .
Például a kezdőlapon található blogbejegyzések listája.
Vagy linkek listája.
A blog post
Read more Another blog post
Read more
Nem korlátozódunk a listákra: egy cikk lehet az oldal fő eleme.
A blog post
Here is the content...
A article
címke belsejében legyen egy cím ( h1
- h6
) és
section
A dokumentum egy részét képviseli. Minden szakasznak van egy címkéje ( h1
- h6
), majd a szakasz törzse .
Példa:
A section of the page
...
![]()
Hasznos egy hosszú cikket különböző szakaszokra bontani .
Nem használható általános tárolóelemként. div
erre készül.
div
div
az általános tároló elem:
...
Gyakran hozzáad egy class
vagy id
attribútumot ehhez az elemhez, hogy CSS használatával meg lehessen stílusozni.
Bárhol használjuk div
, ahol tárolóra van szükségünk, de a meglévő címkék nem megfelelőek.
Oldalhoz kapcsolódó címkék
nav
Ez a címke az oldal navigációját meghatározó jelölés létrehozására szolgál. Ebbe általában hozzáadunk egy ul
vagy ol
listát:
- Home
- Blog
aside
A aside
címke egy olyan tartalom hozzáadására szolgál, amely kapcsolódik a fő tartalomhoz.
Egy mező, ahová például hozzá kell adni egy árajánlatot. Vagy oldalsáv.
Példa:
some text..
A quote..
other text...
A használat aside
azt jelzi, hogy a benne lévő dolgok nem részei annak a szakasznak a rendszeres áramlásának, amelyben él.
header
A header
címke az oldal egy részét mutatja be, amely a bevezetés. Tartalmazhat például egy vagy több fejléccímkét ( h1
- h6
), a cikk címszavát, képet.
Article title
...
main
A main
címke az oldal fő részét képviseli:
.... ....
footer
A footer
címke a cikk láblécének vagy az oldal láblécének meghatározására szolgál:
.... Footer notes..
FORMÁK
Az űrlapok segítségével interakcióba léphet egy webes technológiával felépített oldallal vagy alkalmazással.
Van egy sor vezérlője, és amikor elküldi az űrlapot, akár egy kattintással a "beküldés" gombra kattintva, akár programszerűen, a böngésző elküldi az adatokat a szervernek.
Alapértelmezés szerint ez az adatküldés okozza az oldal újratöltését az adatok elküldése után, de a JavaScript használatával megváltoztathatja ezt a viselkedést (nem magyarázza el, hogy ebben a könyvben hogyan).
Az űrlap a form
címke segítségével jön létre :
...
Alapértelmezés szerint az űrlapokat a GET HTTP módszerrel küldik be. Aminek megvannak a hátrányai, és általában a POST-ot szeretné használni.
Beállíthatja, hogy az űrlap a POST használatát használja-e beküldéskor, az alábbi method
attribútum használatával:
...
Az űrlapot a GET vagy a POST segítségével küldik ugyanarra az URL-re, ahol található.
Tehát ha az űrlap az //flaviocopes.com/contacts
oldalon található, akkor a "beküldés" gomb megnyomásával kérelmet küldünk ugyanarra az URL-re.
Ami azt eredményezheti, hogy semmi sem történik.
Szüksége van valamilyen kiszolgálói oldalra a kérés kezeléséhez, és általában "meghallgatja", hogy az űrlap beküldi az eseményeket egy dedikált URL-re.
Az URL-t a action
paraméter segítségével adhatja meg :
...
Ez arra készteti a böngészőt, hogy a POST használatával beküldje az űrlapadatokat /new-contact
az azonos eredetű URL-re.
Ha az origó (protokoll + tartomány + port) az //flaviocopes.com
(alapértelmezett a 80-as port), ez azt jelenti, hogy az űrlap adatait elküldjük //flaviocopes.com/new-contact
.
Adatokról beszéltem. Melyik adat?
Az adatokat a felhasználók a webplatformon elérhető vezérlőkészleten keresztül szolgáltatják:
- beviteli mezők (egysoros szöveg)
- szöveges területek (többsoros szöveg)
- jelölőnégyzetek (válasszon egy lehetőséget a legördülő menüből)
- választógombok (válasszon egy lehetőséget a mindig látható listából)
- jelölőnégyzetek (válasszon nulla, egy vagy több lehetőséget)
- fájl feltöltése
- és több!
Bemutassuk mindegyiket az alábbi űrlapmezők áttekintésében.
A input
címke
A input
mező az egyik legszélesebb körben használt formaelem. Ez is egy nagyon sokoldalú elem, és teljesen megváltoztathatja a viselkedést az type
attribútum alapján.
Az alapértelmezett viselkedés az egysoros szövegbeviteli vezérlés:
A következő használatával egyenértékű:
Az összes többi következő mezőhöz hasonlóan, a mezőnek is nevet kell adnia annak tartalmának elküldéséhez a kiszolgálónak, amikor az űrlapot elküldik:
Az placeholder
attribútum arra szolgál, hogy néhány szöveg világosszürkén jelenjen meg, amikor a mező üres. Hasznos tippet adni a felhasználónak, hogy mit kell beírnia:
A használat type="email"
ellenőrzi az ügyféloldali (a böngészőben található) e-mailt a helyesség (szemantikai helyesség, az e-mail cím meglétének nem biztosítása) elküldése előtt.
Jelszó
A használatával type="password"
minden beírt kulcs csillagként (*) vagy pontként jelenik meg, ami hasznos a jelszót tartalmazó mezők számára.
Számok
Megadhatja, hogy egy beviteli elem csak számokat fogadjon el:
Megadhatja az elfogadott minimális és maximális értéket:
Az step
attribútum segít azonosítani a különböző értékek közötti lépéseket. Például ez elfogadja az 10 és 50 közötti értéket az 5 lépésben:
Rejtett mező
A mezőket el lehet rejteni a felhasználó elől. Az űrlap benyújtása után is elküldjük őket a szervernek:
Ezt általában olyan értékek tárolására használják, mint a CSRF token, amelyeket a biztonság és a felhasználói azonosítás céljából használnak, vagy akár spameket küldő robotok észlelésére speciális technikák segítségével.
Csak egy űrlap és annak művelete azonosítására is használható.
Alapértelmezett érték beállítása
Az összes mező elfogad egy előre definiált értéket. Ha a felhasználó nem változtatja meg, akkor ez lesz a szervernek küldött érték:
Helyőrző beállítása esetén ez az érték akkor jelenik meg, ha a felhasználó törli a beviteli mező értékét:
Űrlap benyújtása
A type="submit"
mező egy gomb, amelyet a felhasználó egyszer megnyomva elküldi az űrlapot:
Az value
attribútum beállítja a gomb szövegét, amely hiányában a "Küldés" szöveget jeleníti meg:
Az űrlap érvényesítése
A böngészők kliensoldali ellenőrzési funkciókat biztosítanak az űrlapokhoz.
Szükség szerint beállíthatja a mezőket, biztosítva azok kitöltését, és kikényszeríthet egy adott formátumot az egyes mezők beviteléhez.
Nézzük meg mindkét lehetőséget.
Állítsa be a mezőket szükség szerint
Az required
attribútum segít az érvényesítésben. Ha a mező nincs beállítva, akkor az ügyféloldali ellenőrzés sikertelen lesz, és a böngésző nem küldi el az űrlapot:
Kényszerítsen egy adott formátumot
Leírtam a type="email"
fenti mezőt. Automatikusan ellenőrzi az e-mail címet a specifikációban megadott formátumnak megfelelően.
A type="number"
mezőben megemlítettem az intervallumhoz megadott határértékek min
és max
attribútumát.
Többet tehet.
Bármely mezőn kikényszeríthet egy adott formátumot.
Az pattern
attribútum lehetőséget ad arra, hogy beállítson egy reguláris kifejezést, amellyel érvényesíteni tudja az értéket.
Ajánlom elolvasni a Reguláris kifejezések útmutatót a flaviocopes.com/javascript- regular-expressions/ címen.
minta = "//.*"
Egyéb mezők
Fájl feltöltése
Betölthet fájlokat a helyi számítógépről, és elküldheti őket a szerverre egy type="file"
bemeneti elem segítségével:
Több fájlt csatolhat:
Az accept
attribútum segítségével megadhat egy vagy több megengedett fájltípust . Ez elfogadja a képeket:
Használhat egy adott MIME típust, például application/json
állíthat be fájlkiterjesztést .pdf
. Vagy állítson be több fájlkiterjesztést, például:
Gombok
A type="button"
beviteli mezők segítségével további gombok adhatók hozzá az űrlaphoz, amelyek nem elküldési gombok:
Szoktak programozottan tenni valamit a JavaScript használatával.
Van egy speciális mező, amely gombként jelenik meg, amelynek speciális művelete a teljes űrlap törlése, és a mezők állapotának visszaállítása az elsőre:
Rádiógombok
A rádiógombokkal olyan választási lehetőségeket lehet létrehozni, amelyek közül az egyiket megnyomják, a többit pedig letiltják.
A név olyan régi autórádiókból származik, amelyek rendelkeznek ilyen felülettel.
Megadhat egy type="radio"
bemeneti halmazt , amelyek mindegyike azonos name
attribútummal és különböző value
attribútummal rendelkezik:
Az űrlap color
elküldése után az adat tulajdonságnak egyetlen értéke lesz.
Mindig egy elemet ellenőriznek. Az első elemet alapértelmezés szerint ellenőrizzük.
Az checked
attribútummal beállíthatja az előre kiválasztott értéket . Rádió bemeneti csoportonként csak egyszer használhatja.
Jelölőnégyzetek
Hasonló a rádiós dobozokhoz, de több értéket is választhatnak, vagy egyáltalán nem.
Megadhat egy type="checkbox"
bemeneti halmazt , amelyek mindegyike azonos name
attribútummal és különböző value
attribútummal rendelkezik:
Az összes jelölőnégyzet alapértelmezés szerint nincs bejelölve. Az checked
attribútummal engedélyezheti őket az oldal betöltésekor.
Mivel ez a beviteli mező több értéket is lehetővé tesz, az űrlap elküldésével az értékeket tömbként küldjük el a szervernek.
Dátum és idő
Néhány dátumtípusunk van a dátumértékek elfogadásához.
A type="date"
beviteli mező lehetővé teszi a felhasználó számára a dátum megadását, és szükség esetén megjeleníti a dátumválasztót:
A type="time"
beviteli mező lehetővé teszi a felhasználó számára az idő megadását, és szükség esetén megjeleníti az időválasztót:
A type="month"
beviteli mező lehetővé teszi a felhasználó számára, hogy egy hónapot és évet adjon meg:
A type="week"
beviteli mező lehetővé teszi a felhasználó számára egy hét és egy év megadását:
Ezek a mezők lehetővé teszik az egyes értékek közötti tartomány és lépés korlátozását. Azt javaslom, hogy ellenőrizze az MDN-t a használatuk apró részleteivel kapcsolatban.
A type="datetime-local"
mező lehetővé teszi dátum és idő kiválasztását.
Itt van egy oldal mindegyik tesztelésére: //codepen.io/flaviocopes/pen/ZdWQPm
Színválasztó
Engedélyezheti a felhasználóknak, hogy az type="color"
elem segítségével színt válasszanak :
Alapértelmezett értéket állíthat be az value
attribútum használatával:
A böngésző gondoskodik egy színválasztó megjelenítéséről a felhasználó számára.
Hatótávolság
Ez a beviteli elem egy csúszka elemet mutat. Az emberek használhatják a kiindulási értékről a végső értékre való áttérésre:
Megadhat opcionális lépést:
telefon
A type="tel"
beviteli mezővel telefonszámot lehet megadni:
Az tel
over használatának fő eladási pontja text
a mobil, ahol az eszköz választhatja a numerikus billentyűzet megjelenítését.
Adjon meg egy pattern
attribútumot a további ellenőrzéshez:
URL
A type="url"
mező egy URL megadására szolgál.
Ellenőrizheti a következő pattern
attribútummal:
A textarea
címke
Az textarea
elem lehetővé teszi a felhasználók számára, hogy többsoros szöveget írjanak be. Ehhez képest input
befejező címkét igényel:
A dimenziókat beállíthatja CSS, de a rows
és cols
attribútumok használatával is :
A többi űrlapcímkéhez hasonlóan az name
attribútum is meghatározza a nevet a kiszolgálónak küldött adatokban:
A select
címke
Ez a címke egy legördülő menü létrehozására szolgál.
A felhasználó választhat a rendelkezésre álló lehetőségek közül.
Minden opció a option
címke segítségével jön létre . Hozzáad egy nevet a kiválasztotthoz és egy értéket az egyes opciókhoz:
Red Yellow
Letilthatja az opciót:
Red Yellow
Egy üres lehetőséged lehet:
None Red Yellow
Az opciók a optgroup
címke segítségével csoportosíthatók . Minden opciócsoport rendelkezik egy label
attribútummal:
Red Yellow Blue Green Pink
TÁBLÁZATOK
A webes táblázatok kezdeti napjaiban az építési elrendezések nagyon fontos részét képezték.
Később a CSS és annak elrendezési képességei váltották fel őket, és ma olyan hatékony eszközökkel rendelkezünk, mint a CSS Flexbox és a CSS Grid az elrendezések összeállításához. Az asztalokat ma már csak találgatásra használják, asztalok építésére!
A table
címke
Táblázatot határozhat meg a table
címke használatával:
A táblázatban meghatározzuk az adatokat. A sorokban okoskodunk, ami azt jelenti, hogy sorokat adunk egy táblához (nem oszlopokhoz). Oszlopokat határozunk meg egy soron belül.
Sorok
A tr
címke segítségével sor kerül hozzáadásra , és ez az egyetlen dolog, amelyet hozzáadhatunk egy table
elemhez:
Ez egy 3 soros táblázat.
Az első sor felveheti a fejléc szerepét.
Oszlopfejlécek
A táblázat fejléce egy oszlop nevét tartalmazza, általában félkövér betűvel.
Gondoljon egy Excel / Google Sheets dokumentumra. A felső A-B-C-D...
fejléc.

A fejlécet a th
címke segítségével definiáljuk :
Column 1
Column 2
Column 3
A táblázat tartalma
A táblázat tartalmát td
címkékkel definiálják , a többi tr
elem belsejében :
Column 1
Column 2
Column 3
Row 1 Column 1
Row 1 Column 2
Row 1 Column 3
Row 2 Column 1
Row 2 Column 2
Row 2 Column 3
A böngészők ezt renderelik, ha nem ad hozzá CSS-stílust:

A CSS hozzáadása:
th, td { padding: 10px; border: 1px solid #333; }
az asztal jobban hasonlít egy megfelelő asztalra:

Hasított oszlopok és sorok
Egy sor eldöntheti, hogy 2 vagy több oszlopra kiterjed-e, az colspan
attribútum használatával:
Column 1
Column 2
Column 3
Row 1 Columns 1-2
Row 1 Column 3
Row 2 Columns 1-3

Vagy két vagy több sorra is kiterjedhet a következő rowspan
attribútum használatával:
Column 1
Column 2
Column 3
Rows 1-2 Columns 1-2
Row 1 Column 3
Row 2 Column 3

Sorfejlécek
Mielőtt elmagyaráztam, hogyan lehet oszlopfejlécek, a táblázat th
első tr
címkéjében lévő címke használatával.
Hozzáadhat egy th
címkét első elemként egy olyan táblán belül, tr
amely nem tr
a táblázat elsője, hogy sorcíme legyen:
Column 2
Column 3
Row 1
Col 2
Col 3
Row 2
Col 2
Col 3

További címkék az asztal rendezéséhez
Hozzáadhat még 3 címkét egy táblához, hogy rendezettebb legyen.
Ez a legjobb, ha nagy asztalokat használ. És a fejléc és a lábléc megfelelő meghatározásához is.
Azok a címkék
thead
tbody
tfoot
Becsomagolják a tr
címkéket, hogy világosan meghatározzák a táblázat különböző szakaszait. Íme egy példa:
Column 2
Column 3
Row 1
Col 2
Col 3
Row 2
Col 2
Col 3
Footer of Col 1
Footer of Col 2

Táblázat felirat
A táblának tartalmaznia kell egy caption
címkét, amely leírja a tartalmát. Ezt a címkét közvetlenül a nyitó table
címke után kell elhelyezni :
Dogs age
Dog
Age
Roger
7
MULTIMÉDIA CÍMKÉK: AUDIO
ÉSVIDEO
Ebben a részben szeretném megmutatni a audio
és video
címkéket.
A audio
címke
Ez a címke lehetővé teszi audiotartalom beágyazását HTML-oldalaiba.
Ez az elem streamelhet hangot, esetleg mikrofon segítségével getUserMedia()
, vagy lejátszhat egy hangforrást, amelyre az src
attribútum segítségével hivatkozik :
Alapértelmezés szerint a böngésző nem jelenít meg vezérlőket ehhez az elemhez. Ami azt jelenti, hogy a hang csak akkor fog lejátszani, ha automatikus lejátszásra van állítva (erről bővebben később), és a felhasználó nem látja, hogyan állíthatja le, illetve hogyan szabályozhatja a hangerőt vagy mozoghat a műsorszámon.
A beépített vezérlők megjelenítéséhez hozzáadhatja az controls
attribútumot:
A vezérlőknek egyedi bőrük lehet.
Az type
attribútum segítségével megadhatja az audio fájl MIME típusát . Ha nincs beállítva, a böngésző megpróbálja automatikusan meghatározni:
Alapértelmezés szerint egy audiofájl nem játszik le automatikusan. Adja hozzá az autoplay
attribútumot a hang automatikus lejátszásához:
Megjegyzés: A mobil böngészők nem engedélyezik az automatikus lejátszást
Az loop
attribútum 0:00 órakor újraindítja a hangot, ha be van állítva; ellenkező esetben, ha nincs, a hang a fájl végén megáll:
Lejátszhat egy hangfájlt is az muted
attribútum használatával elnémítva (nem igazán tudja, mi a haszna ennek:)
A JavaScript használatával meghallgathatja az audio
elemen zajló különféle eseményeket , amelyek közül a legalapvetőbbek:
play
amikor a fájl elkezd lejátszódnipause
amikor a hanglejátszás szüneteltplaying
amikor a hang folytatódik egy szünet utánended
amikor elérte a hangfájl végét
A video
címke
Ez a címke lehetővé teszi videotartalom beágyazását a HTML-oldalaiba.
Ez az elem streamelhet videót egy webkamera segítségével getUserMedia()
vagy a WebRTC segítségével , vagy lejátszhat egy videoforrást, amelyre az src
attribútum segítségével hivatkozik :
Alapértelmezés szerint a böngésző nem jelenít meg vezérlőket ehhez az elemhez, csak a videót.
Ami azt jelenti, hogy a videó csak akkor fog lejátszani, ha automatikus lejátszásra van állítva (erről bővebben később), és a felhasználó nem látja, hogyan lehet megállítani, szüneteltetni, szabályozni a hangerőt vagy átugrani a videó egy meghatározott pozíciójára.
A beépített vezérlők megjelenítéséhez hozzáadhatja az controls
attribútumot:
A vezérlőknek egyedi bőrük lehet.
Az type
attribútum segítségével megadhatja a videofájl MIME típusát . Ha nincs beállítva, a böngésző megpróbálja automatikusan meghatározni:
A videofájl alapértelmezés szerint nem játszik le automatikusan. Adja hozzá az autoplay
attribútumot a videó automatikus lejátszásához:
Néhány böngésző muted
az automatikus lejátszáshoz is megköveteli az attribútumot. A videó csak némításkor jelenik meg automatikusan:
Az loop
attribútum újraindítja a 0:00 órakor lejátszott videót, ha be van állítva; ellenkező esetben, ha nincs, a videó a fájl végén leáll:
Beállíthat egy képet poszterképnek:
Ha nincs, a böngésző a videó első képkockáját megjeleníti, amint elérhető.
Beállíthatja a width
és az height
attribútumokat az elem által elfoglalt hely beállításához, hogy a böngésző elszámolhasson vele, és a végleges betöltéskor ne változtassa meg az elrendezést. Számszerű értéket vesz fel, pixelben kifejezve.
A JavaScript használatával meghallgathatja az video
elemen zajló különféle eseményeket , amelyek közül a legalapvetőbbek:
play
amikor a fájl elkezd lejátszódnipause
amikor a videó szüneteltplaying
amikor a videó szünetből folytatódikended
amikor elérte a videofájl végét
IFRAMES
A iframe
címke lehetővé teszi számunkra, hogy más eredetű (más webhelyekről származó) tartalmat beágyazzunk weboldalunkba.
Technikailag az iframe új beágyazott böngészési kontextust hoz létre. Ez azt jelenti, hogy az iframe-ben bármi nem zavarja a szülő oldalt, és fordítva. A JavaScript és a CSS nem "szivárog" az iframe-ekbe / onnan.
Sok webhely iframe-et használ különböző dolgok végrehajtására. Lehet, hogy ismeri a Codepent, a Glitch-et vagy más webhelyeket, amelyek lehetővé teszik az oldal egyik részében történő kódolást, és az eredményt egy mezőben látja. Ez iframe.
Így hozol létre egyet:
Betölthet egy abszolút URL-t is:
Beállíthat egy szélességi és magassági paraméterkészletet (vagy beállíthatja CSS használatával), különben az iframe az alapértelmezéseket, egy 300x150 pixeles mezőt használja:
Srcdoc
Az srcdoc
attribútum segítségével megadhat néhány megjelenítendő HTML-t. Ez egy alternatíva src
, de nemrégiben és nem támogatott az Edge 18 és újabb verzióiban, valamint az IE-ben:
Homokozó
Az sandbox
attribútum lehetővé teszi számunkra, hogy korlátozzuk az iframe-ekben engedélyezett műveleteket.
Ha ezt kihagyjuk, akkor minden megengedett:
Ha "" -re állítjuk, akkor semmi sem megengedett:
Az sandbox
attribútumba opciók hozzáadásával kiválaszthatjuk, mit engedélyezünk . Többet is engedélyezhet, ha szóközt ad hozzá. Itt van egy hiányos lista a használható lehetőségekről:
allow-forms
: engedélyezi az űrlapok benyújtásátallow-modals
lehetővé teszi a modálok ablakainak megnyitását, beleértvealert()
a JavaScript meghívását isallow-orientation-lock
engedélyezze a képernyő tájolásának rögzítésétallow-popups
lehetővé teszi a felugró ablakok használatátwindow.open()
és atarget="_blank"
linkeketallow-same-origin
a betöltött erőforrást azonos eredetként kezeljeallow-scripts
lehetővé teszi a betöltött iframe parancsfájlok futtatását (de nem hoz létre felugró ablakokat).allow-top-navigation
hozzáférést biztosít az iframe-hez a legfelső szintű böngészési kontextushoz
Lehetővé teszi
Jelenleg kísérleti jellegű, és csak a Chromium-alapú böngészők támogatják, ez az erőforrás-megosztás jövője a szülőablak és az iframe között.
Ez hasonlít az sandbox
attribútumhoz, de lehetővé teszi számunkra a speciális funkciók, például:
accelerometer
hozzáférést biztosít a Sensors API Accelerometer interfészhezambient-light-sensor
hozzáférést biztosít a Sensors API AmbientLightSensor interfészéhezautoplay
lehetővé teszi a video- és audiofájlok automatikus lejátszásátcamera
lehetővé teszi a kamera elérését a getUserMedia API-bóldisplay-capture
lehetővé teszi a képernyő tartalmának elérését a getDisplayMedia API használatávalfullscreen
lehetővé teszi a teljes képernyős mód elérésétgeolocation
lehetővé teszi a Geolocation API elérésétgyroscope
hozzáférést biztosít az Sensors API Gyroscope interfészhezmagnetometer
hozzáférést biztosít a Sensors API magnetométer interfészéhezmicrophone
hozzáférést biztosít az eszköz mikrofonjához a getUserMedia API használatávalmidi
hozzáférést biztosít a webes MIDI API-hozpayment
hozzáférést biztosít a Payment Request API-hozspeaker
lehetővé teszi az audio lejátszását az eszköz hangszóróin keresztülusb
hozzáférést ad a WebUSB API-hoz.vibrate
hozzáférést biztosít a Vibration API-hozvr
hozzáférést biztosít a WebVR API-hoz
Referrer
Az iframe betöltésekor a böngésző fontos információkat küld neki arról, hogy ki tölti be a Referer
fejlécbe (vegye észre a r
szinglit, a hibát, amellyel élnünk kell).
A hivatkozó elírása Phillip Hallam-Baker számítástechnikus eredeti javaslatából fakadt, hogy a mezőt beépítsék a HTTP specifikációba. Az elírási hibát kőbe vésették, amikor beépítették az RFC 1945-ös Request for Comments szabványba
Az referrerpolicy
attribútum segítségével beállíthatjuk a hivatkozót, hogy az iframe-be küldje, amikor betöltődik. A hivatkozó egy HTTP fejléc, amely tájékoztatja az oldalt arról, hogy ki tölti be. Ezek a megengedett értékek:
no-referrer-when-downgrade
ez az alapértelmezett, és nem küldi a hivatkozót, amikor az aktuális oldal HTTPS-n keresztül töltődik be, és az iframe betöltődik a HTTP-protokollrano-referrer
nem küldi a hivatkozó fejlécetorigin
a hivatkozó elküldésre kerül, és csak az eredetet (port, protokoll, tartomány) tartalmazza, az origót és az elérési utat nem, ami az alapértelmezettorigin-when-cross-origin
amikor ugyanabból az origóból (port, protokoll, tartomány) tölt be az iframe-be, a hivatkozót teljes formában (origó + útvonal) küldi. Ellenkező esetben csak az origót küldisame-origin
a hivatkozót csak akkor küldjük el, ha ugyanabból az eredetből (port, protokoll, tartomány) töltünk be az iframe-bestrict-origin
elküldi az origót hivatkozóként, ha az aktuális oldal HTTPS-n keresztül töltődik be, és az iframe a HTTPS protokollra is betöltődik. Nem küld semmit, ha az iframe HTTP-n keresztül töltődik bestrict-origin-when-cross-origin
elküldi az origó + útvonalat hivatkozóként, amikor ugyanazon az eredeten dolgozik. Ha az aktuális oldal HTTPS-n keresztül töltődik be, és az iframe a HTTPS protokollra is betöltődik, referenciaként küldi az eredetet. Nem küld semmit, ha az iframe HTTP-n keresztül töltődik beunsafe-url
: elküldi az origó + elérési utat hivatkozóként, még akkor is, ha erőforrásokat tölt be a HTTP-ből, és az aktuális oldal HTTPS-n keresztül töltődik be
KÉPEK
A képek a img
címke segítségével jeleníthetők meg .
Ez a címke elfogad egy src
attribútumot, amelyet a kép forrásának beállításához használunk:
Széles képkészletet használhatunk. A leggyakoribbak a PNG, JPEG, GIF, SVG és újabban a WebP.
A HTML szabvány megköveteli, hogy egy alt
attribútum jelen legyen a kép leírására. Ezt a képernyőolvasók és a keresőmotorok is használják:
Beállíthatja a width
és az height
attribútumokat az elem által elfoglalt hely beállításához, így a böngésző elszámolhatja azt, és a teljes betöltéskor nem változtatja meg az elrendezést. Számszerű értéket vesz fel, pixelben kifejezve.
A figure
címke
A figure
címkét gyakran használják a img
címkével együtt.
figure
egy szemantikus címke, amelyet gyakran használnak, ha felirattal ellátott képet akar megjeleníteni. Így használod:
A nice dog
A figcaption
címke beborítja a felirat szövegét.
Reszponzív képek srcset
Az srcset
attribútum lehetővé teszi, hogy választható képeket állítson be, amelyeket a böngésző használhat a pixelsűrűségtől vagy az ablak szélességétől függően, az Ön igényeinek megfelelően. Így csak akkor töltheti le az oldal megjelenítéséhez szükséges erőforrásokat, anélkül, hogy nagyobb képet töltene le, ha például mobileszközön van.
Íme egy példa, ahol további 4 képet adunk 4 különböző képernyőmérethez:
Az srcset
használjuk w
intézkedés, hogy jelezze az ablak szélessége.
Mivel így cselekszünk, az sizes
attribútumot is használnunk kell :
Ebben a példában az attribútumban található (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px
karakterlánc sizes
leírja a kép méretét a nézetablakhoz viszonyítva, pontosvesszővel elválasztva több feltételt.
A médiafeltétel max-width: 500px
a kép méretét állítja összefüggésben a nézetablak szélességével. Röviden, ha az ablak mérete <500 képpont, akkor a képet az ablak méretének 100% -án adja vissza.
Ha az ablak mérete nagyobb, de < 900px
, akkor a képet az ablak méretének 50% -án adja meg.
És ha ennél is nagyobb, akkor 800 képpontos felbontással rendereli a képet.
A vw
mértékegység új lehet számodra, és röviden azt mondhatjuk, hogy az 1 az vw
ablakszélesség 1% -a, így 100vw
az ablakszélesség 100% -a is.
Hasznos webhely a srcset
fokozatosan kisebb képek előállításához a //responsivebreakpoints.com/.
A picture
címke
A HTML megadja nekünk a picture
címkét is, amely nagyon hasonló munkát végez srcset
, és a különbségek nagyon finomak.
Akkor használja, picture
amikor a fájl kisebb verziójának kiszolgálása helyett teljesen meg akarja változtatni. Vagy szolgáltasson más képformátumot.
A legjobb felhasználási eset a WebP-kép kiszolgálása, amelyet még mindig nem támogatnak széles körben. A picture
címkében megad egy képek listáját, és ezek sorrendben lesznek felhasználva, így a következő példában a WebP-t támogató böngészők használják az első képet, és ha nem, akkor a JPG-re váltanak:
A source
címke egy vagy több formátumot határoz meg a képekhez. A img
címke tartalék abban az esetben, ha a böngésző nagyon régi, és nem támogatja a picture
címkét.
A source
belső címkében picture
hozzáadhat egy media
attribútumot a média lekérdezések beállításához.
Az a példa, amely valamilyen módon működik, a fenti példához hasonlóan működik srcset
:
De ez nem a használati esete, mert mint láthatja, sokkal bőbeszédűbb.
A picture
címke nemrégiben készült, de az Opera Mini és az IE kivételével (az összes verzió) az összes nagy böngésző támogatja.
MEGKÖZELÍTHETŐSÉG
Fontos, hogy a HTML-t az akadálymentesítést szem előtt tartva tervezzük.
Az elérhető HTML-kód azt jelenti, hogy a fogyatékossággal élő emberek használhatják az internetet. Vannak teljesen vak vagy látássérült felhasználók, halláskárosodásban szenvedők és sok más fogyatékosság.
Sajnos ez a téma nem veszi fontosságát, amire szüksége van, és nem tűnik annyira menőnek, mint mások.
Mi van, ha egy személy nem látja az oldalát, de mégis el akarja fogyasztani annak tartalmát? Először is, hogyan csinálják ezt? Nem használhatják az egeret, hanem úgynevezett képernyőolvasót . Ezt nem kell elképzelned. Most kipróbálhat egyet: a Google biztosítja az ingyenes ChromeVox Chrome kiterjesztést. Az akadálymentességnek gondoskodnia kell arról is, hogy az eszközök könnyedén kiválaszthassák az elemeket vagy az oldalakon keresztül navigáljanak.
A weboldalakat és a webalkalmazásokat nem mindig építik úgy, hogy az egyik elsődleges céljuk a hozzáférhetőség, és talán az 1. verzió nem elérhető, de a weboldalt utólag is elérhetővé lehet tenni. Hamarabb jobb, de soha nem késő.
Fontos, és az én országomban a kormány vagy más állami szervezetek által létrehozott webhelyeknek hozzáférhetőknek kell lenniük.
Mit jelent ez a HTML hozzáférhetővé tétele? Engedje meg, hogy bemutassam azokat a főbb dolgokat, amelyekre gondolnia kell.
Megjegyzés: Számos egyéb dologra kell ügyelni, amelyek a CSS témakörben szerepelhetnek, például a színek, a kontraszt és a betűtípusok. Vagy hogyan lehet hozzáférhetővé tenni az SVG képeket. Itt nem beszélek róluk.
Használjon szemantikus HTML-t
A szemantikus HTML nagyon fontos, és ez az egyik legfontosabb dolog, amire ügyelnie kell. Hadd mutassak be néhány általános forgatókönyvet.
Fontos, hogy a címkék címkéihez a megfelelő szerkezetet használja. A legfontosabb az h1
, és a kevésbé fontosaknál nagyobb számokat használ, de az összes azonos szintű fejlécnek ugyanazzal a jelentéssel kell rendelkeznie (gondoljon rá, mint egy fa szerkezetére)
h1 h2 h3 h2 h2 h3 h4
Használja strong
és em
ahelyett, b
valamint i
. Vizuálisan ugyanúgy néznek ki, de az első 2-nek több jelentése van társítva. b
és i
inkább vizuális elemek.
A listák fontosak. A képernyőolvasó képes felismerni egy listát és áttekintést nyújtani, majd hagyja, hogy a felhasználó döntsön a listára kerülés mellett.
A táblának tartalmaznia kell egy caption
címkét, amely leírja a tartalmát:
Dogs age
Dog
Age
Roger
7
Használja alt
attribútumok képek
Minden képnek tartalmaznia kell egy alt
címkét, amely leírja a kép tartalmát. Ez nem csak egy jó gyakorlat, hanem a HTML szabvány megköveteli, és a HTML-kódja anélkül is érvényesül.
A keresőmotorok számára is jó, ha ez ösztönzi Önt a hozzáadásra.
Használja az role
attribútumot
Az role
attribútum segítségével meghatározott szerepeket rendelhet az oldal különböző elemeihez.
Nagyon sok különböző szerepet rendelhet hozzá: kiegészítő, lista, listitem, main, navigáció, régió, fül, riasztás, alkalmazás, cikk, szalaghirdetés, gomb, cella, jelölőnégyzet, contentinfo, párbeszédpanel, dokumentum, feed, ábra, űrlap, rács, gridcell, title, img, listbox, sor, rowgroup, keresés, switch, táblázat, tabpanel, textbox, timer
Nagyon sok, és mindegyikük teljes hivatkozása érdekében megadom neked ezt az MDN linket. De nem kell szerepet rendelnie az oldal minden eleméhez. A képernyőolvasók a legtöbb esetben a HTML címkéből következtethetnek. Például nem kell hozzá egy szerepet címke szemantikai címkéket, mint nav
, button
, form
.
Vegyük a nav
címke példáját. Használhatja az oldal navigációjának így definiálására:
- Home
- Blog
Ha egy címke használatára kényszerült a div
helyett nav
, akkor a következő navigation
szerepet kell használnia :
- Home
- Blog
Tehát itt van egy gyakorlati példa: role
akkor használunk értelmes értéket, ha a címke már nem közvetíti a jelentést.
Használja az tabindex
attribútumot
Az tabindex
attribútum lehetővé teszi a sorrend megváltoztatását, hogy a Tab billentyű lenyomásával hogyan válasszák ki a "választható" elemeket. Alapértelmezés szerint csak a hivatkozások és az űrlapelemek választhatók a Tab billentyűvel történő navigációval (és nem kell ezeket beállítani tabindex
).
A hozzáadással tabindex="0"
egy elem választhatóvá válik:
...
Használata tabindex="-1"
helyett eltávolít egy elemet ezen a lapon alapú navigáció, és ez is elég hasznos.
Használja az aria
attribútumokat
Az ARIA olyan rövidítés, amely az Accessible Rich Internet Applications alkalmazást jelenti, és meghatározza az elemekre alkalmazható szemantikát.
aria-label
Ez az attribútum egy karakterlánc hozzáadására szolgál egy elem leírására.
Példa:
...
Ezt az attribútumot használom a blog oldalsávján, ahol van egy beviteli mezőm kifejezett keresés nélküli kereséshez, mivel helyőrző attribútummal rendelkezik.
aria-labelledby
Ez az attribútum korrelációt állít az aktuális elem és az azt címkéző elem között.
Ha tudod, hogyan lehet egy input
elemet társítani egy label
elemhez, az hasonló.
Átadjuk az aktuális elemet leíró elemazonosítót.
Példa:
The description of the product
...
aria-describedby
Ezzel az attribútummal társíthatunk egy elemet egy másik elemhez, amely leírásként szolgál.
Példa:
Pay now Clicking the button will send you to our Stripe form!
Az aria-hidden használatával elrejtheti a tartalmat
Szeretem a minimalista dizájnt az oldalaimon. A blogom például többnyire csak tartalom, néhány link az oldalsávon található. Az oldalsávon található néhány dolog azonban csak vizuális elem, amely nem adja hozzá annak az embernek a tapasztalatait, aki nem látja az oldalt. Mint a logó képem, vagy a sötét / világos témaválasztó.
Az "
attribútum hozzáadásával a képernyőolvasók figyelmen kívül hagyják az elemet.
Hol lehet többet megtudni
Ez csak a téma bevezetése. További információkért ezeket a forrásokat ajánlom:
- //www.w3.org/TR/WCAG20/
- //webaim.org
- //developers.google.com/web/fundamentals/accessibility/
Elérte a HTML kézikönyv végét.

Kattintson ide a könyv PDF / ePub / Mobi változatának letöltéséhez offline olvasáshoz !