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 .htmlvagy .htmkiterjeszté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 pcímke használatával:
A paragraph of text
Ez a HTML-kódrészlet létrehozza az elemek listáját a ulcímke segítségével, ami rendezetlen listát jelent , és a licí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 htmlelem, 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 htmlkezdő címkét a dokumentum elején, közvetlenül a dokumentumtípus deklaráció után használják.
A htmlbefejező címke az utolsó dolog, ami egy HTML dokumentumban található.
Az htmlelemen belül 2 elemünk van: headés body:
... ... Belül headolyan 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 bodymeg 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 pkezdő és a záró címkéket használjuk egy pelem 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 idattribú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 idegyedi 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 idcsak egy érték. classtö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, styleamelyek 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 headcímke speciális címkéket tartalmaz, amelyek meghatározzák a dokumentum tulajdonságait.
Mindig a bodycímke elé íródik , közvetlenül a nyitó htmlcí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:
titlescriptnoscriptlinkstylebasemeta
A titlecímke
A titlecí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 scriptcí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ő srcattribútum használatával:
Az typeattribú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 headcímkében tartja.
Véleményem szerint ez most rossz gyakorlat. Hagyja scriptélni a headcímkét.
A modern JavaScript-ben van egy alternatívánk, amely jobban teljesít, mint a szkript az oldal alján - az deferattribútum - tartani . Ez egy példa, amely egy file.jsfá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 asyncattribú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 noscriptcí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 noscriptcímke csak más címkéket tartalmazhat:
linkcímkékstylecímkékmetacímkék
az oldal által szolgáltatott erőforrások vagy az metainformációk megváltoztatása, ha a szkriptek le vannak tiltva.
Ebben a példában beállítottam egy elemet az no-script-alertosztállyal, hogy megjelenjen, ha a szkriptek le vannak tiltva, display: nonealapé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 linkcímke
A linkcí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 mediaattribú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 stylecí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 linkcímkéhez hasonlóan az mediaattribútummal is használhatja azt a CSS-t csak a megadott médiumon:
.some-css {} A basecí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 metací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 descriptionmetací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 charsetmetacímke az oldal karakterkódolásának beállítására szolgál. utf-8a legtöbb esetben:
A robotsmetací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 nofollowglobá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 viewportmetací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 bodyelem.
... ... Csakúgy, mint a headés a htmltagek, csak egy bodycímke lehet egy oldalon.
A bodycí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,,divfejlé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 ptag-et inline-nak vagy egy spana-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 pcímke például nem engedélyezi az ilyen lehetőséget.
A SZÖVEGGEL KAPCSOLATOS CÍMKÉK
A pcí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 spanvagy a.
Nem vehetünk fel blokk elemeket.
Nem fészkelhetünk be egy pelemet egy másikba.
Alapértelmezés szerint a böngészők olyan bekezdést stílusoznak, amelynek teteje és alja margóval rendelkezik. 16pxa 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 spancí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 brcí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 ptagot 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 h1eleme lesz , ez az oldal címe. Ezután h2az 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 h1nagyobbá teszi a címkét, és kisebbé teszi az elemek méretét, amikor a közeli szám hnövekszik:
Minden címsor blokk elem. Nem tartalmazhatnak más elemeket, csak szöveget.
A strongcí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 emcí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 blockquoteHTML 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 blockquoteelemre. A Chrome 40 képpontos bal és jobb margót, valamint 10 képpontos felső és alsó margót alkalmaz.
A qHTML címkét a belső idézetekhez használják.
Vízszintes vonal
Nem igazán szöveg alapján, de a hrcí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 codecí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 codeelem figyelmen kívül hagyja a szóközt és a sortöréseket. Mint a pcímke.
A Chrome preezt 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 ulcímke használatával jönnek létre . A lista minden elemét a licímke hozza létre :
- First
- Second
A rendezett listák hasonlóak, csak a olcí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 olné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
markcímkét - a
inscímkét - a
delcímkét - a
supcímkét - a
subcímkét - a
smallcímkét - a
icímkét - a
bcí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 bmás, mint strong? És miben imás, mint em?
A különbség a szemantikai jelentésben rejlik. Bár bés ikö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 ema 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 ialapé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 acímke segítségével határozzuk meg . A hivatkozás célját annak hrefattribú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ó /testaz 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 testkarakterláncot az aktuális URL-hez.
Példa: az oldalon vagyok, //flaviocopes.com/axios/és rendelkezem a következő linkekkel:
/testha egyszer rákattint, akkor eljutok//flaviocopes.com/testtestha 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ő targetattribú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:
articlesectiondiv
é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 articlecí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. diverre készül.
div
div az általános tároló elem:
... Gyakran hozzáad egy classvagy idattribú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 ulvagy ollistát:
- Home
- Blog
aside
A asidecí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 asideazt jelzi, hogy a benne lévő dolgok nem részei annak a szakasznak a rendszeres áramlásának, amelyben él.
header
A headercí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 maincímke az oldal fő részét képviseli:
.... ....
footer
A footercí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 formcí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 methodattribú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/contactsoldalon 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 actionparamé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-contactaz 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 inputcímke
A inputmező az egyik legszélesebb körben használt formaelem. Ez is egy nagyon sokoldalú elem, és teljesen megváltoztathatja a viselkedést az typeattribú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 placeholderattribú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 stepattribú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 valueattribú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 requiredattribú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 maxattribútumát.
Többet tehet.
Bármely mezőn kikényszeríthet egy adott formátumot.
Az patternattribú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 acceptattribú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 nameattribútummal és különböző valueattribútummal rendelkezik:
Az űrlap colorelkü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 checkedattribú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 nameattribútummal és különböző valueattribútummal rendelkezik:
Az összes jelölőnégyzet alapértelmezés szerint nincs bejelölve. Az checkedattribú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 valueattribú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 telover használatának fő eladási pontja texta mobil, ahol az eszköz választhatja a numerikus billentyűzet megjelenítését.
Adjon meg egy patternattribútumot a további ellenőrzéshez:
URL
A type="url"mező egy URL megadására szolgál.
Ellenőrizheti a következő patternattribútummal:
A textareacímke
Az textareaelem lehetővé teszi a felhasználók számára, hogy többsoros szöveget írjanak be. Ehhez képest inputbefejező címkét igényel:
A dimenziókat beállíthatja CSS, de a rowsés colsattribútumok használatával is :
A többi űrlapcímkéhez hasonlóan az nameattribútum is meghatározza a nevet a kiszolgálónak küldött adatokban:
A selectcí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 optioncí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 optgroupcímke segítségével csoportosíthatók . Minden opciócsoport rendelkezik egy labelattribú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 tablecímke
Táblázatot határozhat meg a tablecí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 trcímke segítségével sor kerül hozzáadásra , és ez az egyetlen dolog, amelyet hozzáadhatunk egy tableelemhez:
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 thcímke segítségével definiáljuk :
Column 1
Column 2
Column 3
A táblázat tartalma
A táblázat tartalmát tdcímkékkel definiálják , a többi trelem 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 colspanattribú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ő rowspanattribú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 thelső trcímkéjében lévő címke használatával.
Hozzáadhat egy thcímkét első elemként egy olyan táblán belül, tramely nem tra 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
theadtbodytfoot
Becsomagolják a trcí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 captioncímkét, amely leírja a tartalmát. Ezt a címkét közvetlenül a nyitó tablecí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 videocímkéket.
A audiocí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 srcattribú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 controlsattribútumot:
A vezérlőknek egyedi bőrük lehet.
Az typeattribú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 autoplayattribú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 loopattribú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 mutedattribútum használatával elnémítva (nem igazán tudja, mi a haszna ennek:)
A JavaScript használatával meghallgathatja az audioelemen zajló különféle eseményeket , amelyek közül a legalapvetőbbek:
playamikor a fájl elkezd lejátszódnipauseamikor a hanglejátszás szüneteltplayingamikor a hang folytatódik egy szünet utánendedamikor elérte a hangfájl végét
A videocí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 srcattribú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 controlsattribútumot:
A vezérlőknek egyedi bőrük lehet.
Az typeattribú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 autoplayattribútumot a videó automatikus lejátszásához:
Néhány böngésző mutedaz automatikus lejátszáshoz is megköveteli az attribútumot. A videó csak némításkor jelenik meg automatikusan:
Az loopattribú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 heightattribú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 videoelemen zajló különféle eseményeket , amelyek közül a legalapvetőbbek:
playamikor a fájl elkezd lejátszódnipauseamikor a videó szüneteltplayingamikor a videó szünetből folytatódikendedamikor elérte a videofájl végét
IFRAMES
A iframecí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 srcdocattribú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 sandboxattribú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 sandboxattribú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-modalslehetővé teszi a modálok ablakainak megnyitását, beleértvealert()a JavaScript meghívását isallow-orientation-lockengedélyezze a képernyő tájolásának rögzítésétallow-popupslehetővé teszi a felugró ablakok használatátwindow.open()és atarget="_blank"linkeketallow-same-origina betöltött erőforrást azonos eredetként kezeljeallow-scriptslehetővé teszi a betöltött iframe parancsfájlok futtatását (de nem hoz létre felugró ablakokat).allow-top-navigationhozzá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 sandboxattribútumhoz, de lehetővé teszi számunkra a speciális funkciók, például:
accelerometerhozzáférést biztosít a Sensors API Accelerometer interfészhezambient-light-sensorhozzáférést biztosít a Sensors API AmbientLightSensor interfészéhezautoplaylehetővé teszi a video- és audiofájlok automatikus lejátszásátcameralehetővé teszi a kamera elérését a getUserMedia API-bóldisplay-capturelehetővé teszi a képernyő tartalmának elérését a getDisplayMedia API használatávalfullscreenlehetővé teszi a teljes képernyős mód elérésétgeolocationlehetővé teszi a Geolocation API elérésétgyroscopehozzáférést biztosít az Sensors API Gyroscope interfészhezmagnetometerhozzáférést biztosít a Sensors API magnetométer interfészéhezmicrophonehozzáférést biztosít az eszköz mikrofonjához a getUserMedia API használatávalmidihozzáférést biztosít a webes MIDI API-hozpaymenthozzáférést biztosít a Payment Request API-hozspeakerlehetővé teszi az audio lejátszását az eszköz hangszóróin keresztülusbhozzáférést ad a WebUSB API-hoz.vibratehozzáférést biztosít a Vibration API-hozvrhozzá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 Refererfejlécbe (vegye észre a rszinglit, 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 referrerpolicyattribú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-downgradeez 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-referrernem küldi a hivatkozó fejlécetorigina 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-originamikor 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-origina 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-originelkü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-originelkü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 imgcímke segítségével jeleníthetők meg .
Ez a címke elfogad egy srcattribú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 altattribú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 heightattribú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 figurecímke
A figurecímkét gyakran használják a imgcímkével együtt.
figureegy szemantikus címke, amelyet gyakran használnak, ha felirattal ellátott képet akar megjeleníteni. Így használod:
A nice dog A figcaptioncímke beborítja a felirat szövegét.
Reszponzív képek srcset
Az srcsetattribú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 srcsethasználjuk wintézkedés, hogy jelezze az ablak szélessége.
Mivel így cselekszünk, az sizesattribútumot is használnunk kell :
Ebben a példában az attribútumban található (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxkarakterlánc sizesleí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: 500pxa 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 vwmértékegység új lehet számodra, és röviden azt mondhatjuk, hogy az 1 az vwablakszélesség 1% -a, így 100vwaz ablakszélesség 100% -a is.
Hasznos webhely a srcsetfokozatosan kisebb képek előállításához a //responsivebreakpoints.com/.
A picturecímke
A HTML megadja nekünk a picturecímkét is, amely nagyon hasonló munkát végez srcset, és a különbségek nagyon finomak.
Akkor használja, pictureamikor 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 picturecí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 sourcecímke egy vagy több formátumot határoz meg a képekhez. A imgcímke tartalék abban az esetben, ha a böngésző nagyon régi, és nem támogatja a picturecímkét.
A sourcebelső címkében picturehozzáadhat egy mediaattribú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 picturecí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 emahelyett, bvalamint i. Vizuálisan ugyanúgy néznek ki, de az első 2-nek több jelentése van társítva. bés iinká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 captioncímkét, amely leírja a tartalmát:
Dogs age
Dog
Age
Roger
7
Használja altattribútumok képek
Minden képnek tartalmaznia kell egy altcí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 roleattribútumot
Az roleattribú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 navcí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 divhelyett nav, akkor a következő navigationszerepet kell használnia :
- Home
- Blog
Tehát itt van egy gyakorlati példa: roleakkor használunk értelmes értéket, ha a címke már nem közvetíti a jelentést.
Használja az tabindexattribútumot
Az tabindexattribú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 ariaattribú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 inputelemet társítani egy labelelemhez, 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 !