HTML kezdőknek: Tanulja meg HTML kódolását ma

Közzététel: Támogatása segít fenntartani a webhely működését! Az ezen az oldalon javasolt szolgáltatások némelyikén referenciadíjat keresünk.


A HTML ismeretek hihetetlenül hasznosak a kisvállalkozás tulajdonosától az osztályprojekt létrehozó diákokig, vagy akár online blogon vagy személyes projekten dolgozó hétköznapi emberekig. Bár a programozási nyelv elsajátításának esélye bizonyosan félelmetesnek tűnik, a jó hír az, hogy a HTML általános szavakat használ, így meglehetősen egyszerű felvenni őket..

Ebben az útmutatóban (remélhetőleg) könnyen érthető módon, az abszolút kezdő számára tökéletesen bemutatjuk az alapokat. Azonban nem áll meg az alapokon – még a tapasztalt webmesterek is hasznos tippeket találnak a HTML ismereteinek bővítésére. Még belemerülünk az XHTML-be, a DHTML-be és a HTML5 legújabb cuccaiba is.

HTML kezdőknek

Contents

A HTML 1-4 rövid története

A HTML-t Tim Berners-Lee találta ki az 1980-as évek végén és az 1990-es évek elején. Az első „nyilvános” kiadás 1991-ben volt. Egy korábbi jelölési nyelven, az SGML-en (szabványosított általános jelölőnyelv) alapult..

A HTML legfontosabb újítása a hiperhivatkozás használata volt. Most annyira hozzászoktunk ehhez, hogy nehéz megérteni, milyen forradalmi volt ez az ötlet akkoriban.

A hiperhivatkozás lehetővé teszi, hogy bármely dokumentum hivatkozzon bármely más dokumentumra, és azonnali hozzáférést biztosít ehhez a másik dokumentumhoz. A hiperhivatkozások teszik a világhálót nettóan egy könyvtár vagy adatbázis formájában.

Az IETF a HTML-t választotta standardnak, és 1993-ban közzétette az első HTML-javaslatot. A HTML 2.0, az első teljes hivatalos specifikáció 1995-ben jelent meg. 1997-re a W3C átvette a szabvány irányítását, és a HTML 3.2 kiadásra került..

A HTML 4.0 1997 vége felé, majd a következő évben is megjelent néhány frissítéssel. A szabványnak ez a verziója, három változatával (szigorú, átmeneti és keretszettel) meghatározta a HTML-et a következő évtizedben.

Ez volt az a verzió, amely a web ikonikus tulajdonságainak megjelenésekor volt érvényben: Wikipedia, Google, Facebook, WordPress, Myspace, AOL. Ha 2008 előtt megtanulta weboldalak készítését, akkor szinte biztosan megtanulta ezt a verziót.

A HTML 4.0 mellett egy kapcsolódó projekt, az XHTML volt. Ezt először adták ki 2000-ben és 2001-ben, a HTML 4.0 XML-alapú megvalósításaként. Mivel az XML-nek szigorúbb szintaxisa volt, mint a HTML-nél, és az XML-elemző által könnyen ellenőrizhető, úgy gondoltuk, hogy az XHTML bevezetése arra kényszeríti a webtartalom-készítőket, hogy pontosabb dokumentumokat készítsenek.

Leginkább ez nem történt meg. A gyakorlatban az XHTML – a HTML4 három változatával és a böngésző megjelenítésének vad variációival együtt – hozzájárult az általános zavart illetően, ami az volt és nem volt a „standard” HTML.

Az XHTML egyik figyelemre méltó hatása az a gondolat, hogy az üres címkéket egy bezáró vonallal kell bezárni. Ha hajlandó gépelni
ahelyett, hogy csak
, megköszönheti az XHTML-t – XML ​​szintaxis követelmény volt, hogy minden címkét le kell zárni.

Általános HTML

Általános HTML

Indítsa el az alábbiakat, vagy használja a jobb oldali navigációt egy adott témához ugráshoz.

HTML alapok

Ez a szakasz bemutatja a HTML-t, a weboldalak készítéséhez használt nyelvet, és ad egy kis hátteret a történelemről és a használat okáról.

Mi a HTML?

A HTML hipertext jelölőnyelv, formátum a dokumentumok és weboldalak készítéséhez. Eredetileg az 1990-es évek elején találta ki Tim Berners-Lee, és egy korábbi jelölési nyelven alapult, az SGML (Standard Generalized Markup Language) néven, amely egy korábbi formátumon alapult, amelyet egyszerűen GML-nek (Generalized Markup Language) neveztek, amelyet az IBM-ben fejlesztettek ki. az 1960-as évek.

A HTML elsősorban az emberi jelentéssel bíró szöveget körülvevő pár szögletes zárójelű címkékből áll (ilyen). A címkék jelentést, kontextust és információt jelenítenek meg a körülvevő szöveghez.

Mi az a jelölőnyelv??

Képzeljen el bármilyen szöveges dokumentumot, amelyet valaha olvasott: weboldal, könyv, PDF, Word-dokumentum, egyházi közlemény. Természetesen ott van a szöveg – de nincs valami más: a szöveg megjelenítésének módja. Néhány szó nagyobb vagy kisebb, néhány dőlt vagy félkövér, néhány más színű vagy más betűtípus.

A fájlba, amelybe az egyik ilyen dokumentum el van mentve, tartalmaznia kell mind az ember számára olvasható szöveget, mind a kijelzővel kapcsolatos információkat. Számos különböző módszert kipróbáltak ennek megvalósítására, és a legkényelmesebb módja az információnak a szöveggel összhangban történő tárolása..

Tehát például ha valami szöveget félkövér vagy dőlt betűvel szeretne készíteni, akkor ilyesmit tehet:

[Kezdő félkövér szedés] ezeket a szavakat félkövér szedéssel [félkövér szedéssel] és a [szót dőlt betűvel] ezeket a többi szót dőlttel jelölni.

Amelynek elméletileg valami hasonlót kell előállítania:

szeretnék csinálni ezek a szavak félkövér és ezek a többi szó dőlt.

Ezeket a beillesztett stíluspéldány-párokat címkéknek nevezzük, és szinte minden jelölési nyelv alapja valami ilyen. De a fenti formátum nem HTML, csak egy kicsit összeállított példa.

A fenti példának számos problémája van vele, és a HTML (és az SGML és a GML) feltalálói valami hasonlót, de sokkal jobbat hoztak fel:

  • A szögletes zárójeleket gyakran használják a szövegben, így problémákat okozhat azoknak a címkékben való felhasználása. Ehelyett a HTML szögletes zárójeleket használ: < és >.
  • Az írás kezdete és befejezése újra és újra nagyon unalmas. A HTML egyszerűsíti ezt azzal, hogy maga a címkenevet használja „start” deklarációként. A címkenevet, amelynek előjele egy perjel (/) használunk, mint végcímkét.
  • A „félkövér” és a „dőlt” szavak helyett a HTML rövidítéseket használ, hogy gyorsabban gépelje be és kevésbé zavarja az olvasást.

Tehát, figyelembe véve ezeket a dolgokat, a fenti példa a következőképpen néz ki:

szeretnék csinálni ezek a szavak félkövér és ezek a többi szó dőlt.

szeretnék csinálni ezek a szavak félkövér és ezek a többi szó dőlt.

Az utóbbi időben elmozdultak a tipográfiai részletek kifejezett deklarálása (pl bátor és dőlt betűvel), ehelyett a jelöléssel a jelentés, nem csak a megjelenés közvetítésére szolgál. Ezért a és a címkék használata már nem ajánlott. Ehelyett az előnyben részesített címkék vannak és (hangsúly). Tehát a kortárs dokumentumokban a fenti mondat a következő lenne:

szeretnék csinálni ezek a szavak kiemelkednek és hangsúlyozzuk ezeket a szavakat.

szeretnék csinálni ezek a szavak kiemelkednek és hangsúlyozzuk ezeket a szavakat.

A HTML lényege nem más, mint egy meghatározott jelölőcímke halmaza.

Mi a hipertext??

A hipertext egy olyan szó, amelyet az 1960-as években találtak meg olyan dokumentumok leírására, amelyek olyan linkeket tartalmaznak, amelyek lehetővé teszik az olvasó számára, hogy ugrik a dokumentum más helyére vagy egy másik dokumentumra. Ezek a linkek, amelyeket most már magától értetődőnek tekintünk a modern weben, nagy ügy voltak, amikor a számítógépek először érettek voltak.

A belső és külső összekapcsolás „hiper” fogalma annyira forradalmi volt a tartalom internetes megszervezésének módja szempontjából, hogy a szó több helyen megjelenik:

  • A HTML a „HyperText jelölőnyelv”
  • A http: // a „HyperText Transfer Protocol
  • Az egyik oldalról a másikra mutató linket „hiperhivatkozásnak” nevezzük, és azt az adatattribútumot, amely meghatározza, hogy a linkre hol mutat, „hiperhivatkozásnak” nevezzük.

Hol és hogyan használják a HTML-t?

A HTML-t szinte minden weboldalon használják. A jelenleg olvasott weboldal HTML-t használ. Ez a webhelyek alapértelmezett nyelve.

Más típusú dokumentumokhoz, például e-könyvekhez is felhasználható.

A HTML-dokumentumokat egy webböngésző állítja elő (az alkalmazás, amelyet az oldal olvasásához használ). A HTML-leképezés elrejti az összes címkét, és megváltoztatja a tartalom többi részét annak alapján, hogy ezeknek a címkéknek melyiknek kell kinézniük.

Meg kell tanulnom HTML-t a webhelyem futtatásához?

Hacsak nem tervez webfejlesztővé válni, és az oldalakat a semmiből építi fel, nem kell ismernie a HTML összes bonyolult részletét.

Ha csak blogplatformot, webhely-készítőt vagy valaki más által létrehozott Tartalomkezelő Rendszert (CMS) használ, akkor a HTML ismerete nélkül is megkeresheti – vannak olyan „grafikus” szerkesztők, amelyek tartalom hozzáadását teszik lehetővé a blogba, amely hasonló a Microsoft Word vagy az e-mail írásához.

Azonban ezek a grafikus szerkesztők néha nem működnek pontosan a megfelelő módon, és néha meg akarnak csinálni valamit, és nem értik, miért nem tudják. Ezért erősen ajánlott, hogy ha internetet ír, akár csak rendszeres blogbejegyzéseket és bejelentéseket, akkor ismerje meg az alapvető HTML fogalmakat.

Ezenkívül vannak részletek a HTML dokumentumok felépítéséről, amelyek hatással vannak például a Search Engine Optimization (SEO) és az adatok összesítésére. Ha érdekli, hogy tájékozódjon arról, hogy miként jelenik meg webhelye nem emberi látogatóknak, a HTML megértése fontos készség.

Hasonlóképpen a weboldal hozzáférhetősége – az a képesség, hogy a webhelyet vizuális vagy egyéb hátrányokkal küzdő emberek sikeresen navigálják – egyre fontosabb szempont. A vakok a számítógépes képernyőolvasókra támaszkodnak, hogy a weboldalakat hangossá tegyék, és az alapjául szolgáló HTML dokumentum minősége és szerkezete nagy hatással van a képernyőolvasó megfelelő működésére..

Leginkább a HTML a kortárs internet általános mögöttes nyelve. Ha meg akarod érteni, hogyan működik a világ, akkor jó ötlet legalább megismerni a HTML-t.

Alsó sor a HTML-en

A HTML – hipertext jelölőnyelv – a weblapok és más webes dokumentumok létrehozásához használt nyelv. Elsősorban párosított szögletes zárójelekkel ellátott címkékből áll, amelyek az emberi jelentéssel bíró szöveg részei. A címkék, amelyeket a böngészők nem jelenítenek meg, a szöveg és az oldal megjelenítésének módjáról szolgálnak információval.

HTML elemek és címkék

Ez a szakasz áttekintést ad a címkékről, a HTML alapvető építőelemeiről. Ez ismerteti a működésüket, a kiviteleket a szokásos működés alól, valamint egy rövid megbeszélést a címkeattribútumokról.

A címkék felépítése

Általában a megfelelő címkepárok veszik körül a szövegrészt, amelyre hatással vannak. Két egyező pár címkét, valamint a hozzájuk tartozó tartalmat „elemnek” nevezzük.

Ez az elem kezdődik és végződik a "erős" címke.

A nyitó címke tartalmazhat további attribútumokat, amelyek további információt nyújtanak a címke tartalmáról és annak megjelenítéséről. Ezeket az attribútumokat név-érték párok formájában írják, egyenlő (=) jellel elválasztva, az érték idézőjelekbe helyezve.

href ="http://example.com">Ez egy link. A címke egy "egy" mert "horgony," és a href (hiperhivatkozás) attribútum határozza meg, hol mutat a link.

Néhány címke nem fordul elő megfelelő párban, mert valami beillesztésre használják, nem pedig a szöveg leírására. Ezeket „üres” vagy „érvénytelen” címkéknek hívják, és a leggyakoribb a kép beillesztésére használt címke. Az src attribútum határozza meg a kép URL-jét.

src ="images / html-for-kezdőknek-learn-to-kód html-today.png" />

Figyelem: nincs zárócímke, ezért nincs mellékelt szöveg. A perjel közvetlenül a végső szögtartó előtt (/> ) a címke „önzárásához” kerül felhasználásra. Erre nincs feltétlenül szükség, de jó emlékeztető arra, hogy az alábbiak nem kerülnek mellékelésre. (Erre az XHTML-ben van szükség, amelyet később meg fogunk tárgyalni ebben a cikkben.)

Több más üres címke is létezik. A kettő meglehetősen egyenes és közös.

  • beszúr egy sortörést.
  • beszúr egy vízszintes szabály (vonal) elválasztót.

Mások nem tesznek be valamit vizuálisan, hanem arra szolgálnak, hogy maga az oldal információit szolgáltassák.

rel ="stylesheet" type ="text / css" href ="theme.css" />

name ="leírás" content ="Az oldal címe." />

Ezenkívül a címke (amelyet Javascript hozzáadására használnak egy oldalhoz) lehet üres, de ennek nem kell lennie..

(További információ a, és a címkékről ebben az útmutatóban később található.)

Blokk szint és inline

A címkék kivételével, amelyek információkat tartalmaznak a magáról a dokumentumról, a HTML címkék két kategóriába sorolhatók: blokk és beépített.

Elemek blokkolása

A blokk elemek téglalap alakú tartalom blokkokat képviselnek. Van hallgatólagos vonalszakadásuk előtt és után. A blokk elemek tartalmaznak szekcionált tartalmat, például bekezdések (

), osztályok () és címsorok (

,

, stb).

Általános gyakorlat a legtöbb blokk szintű címke beírása az egyes sorokra azok tartalma felett és alatt:

Ez egy div.

Ez azonban nem mindig történik, főleg a címsorral:

Ez egy oldal címe

Ez egy nagy rész

Néhány tartalom egy bekezdésben.

Blokk szintű elemek beágyazhatók, de egyes blokk szintű elemek nem tartalmazhatnak más blokk szintű elemeket:

Cikk címe

A cikk első bekezdése.

A bekezdések és a címsorok nem tartalmazhatnak más blokk szintű elemeket.

Beépített elemek

A beépített elemek a szövegben használt elemek. Félkövér ( ), a dőlt () és a linkek () mind inline elemek.

Az inline elemeket néha „span-level” elemeknek nevezik. Van egy általános span-szintű elem is, amelyet egyszerűen span () -nek hívnak. Ez önmagában nem sok mindent megtesz, de felhasználható testreszabott típusú szöveges megjelenítés létrehozására, elemek használatával.

class ="különleges szöveges">Ez a szöveg különleges.

(A class = elkészítésével kapcsolatos információkat lásd a CSS szakaszban"különleges szöveges" megjelenítés speciális formátumban.)

Valamikor nincs értelme

Képek ( ) úgy érzik, mint a blokk szintű elemek – téglalap alakúak, meghatározzák a meghatározott méreteket, és általában a szövegfolyamon kívül jelennek meg.

Ezek azonban valójában inline elemek. Ennek oka többnyire a webes tervezés kevésbé kifinomult korszakának visszatartása, de most ragaszkodtak hozzá. Ennek furcsa következményei könnyen elkerülhetők, de jó tudni. (Lásd a képeket és a CSS-t is.)

Vannak más furcsa kérdések is, mint például ezek, és ezekkel később foglalkozunk ebben az útmutatóban, amikor felmerülnek.

További információ az attribútumokról

Szinte minden elemcímke tartalmazhat attribútumokat. Számos elemnek van egy meghatározott attribútumkészlete, amelyet támogat (pl és az src = attribútum), de számos elem létezik, amelyeket globálisan támogatnak minden elemtípus.

Két fontos tulajdonságtípus az osztály és az azonosító.

href ="http://example.com" class ="Például-link" id ="link27">Ennek a horgonycímkének három attribútuma van.

Osztályattribútumok

Az osztályattribútumok egy vagy több elem megjelölésére szolgálnak, mint egy adott „osztályhoz” vagy csoporthoz tartozóak – ez felhasználható ezek azonos megjelenítésére..

Például gyakori egy rendezetlen lista használata (

    ) menüként, és a lista elem elkészítéséhez (
  • ), amely az aktuális oldalra mutat, különbözik az azonos lista összes többi linkjétől.

    class ="menü">
    class ="menü tétel">
    href ="/itthon">itthon

  • class ="áram-tétel">
    href ="/ról ről">Ról ről

    class ="menü tétel">
    href ="/kapcsolatba lépni">Kapcsolatba lépni

Az elemnek egynél több osztálya lehet. A több osztályt szóközök választják el az osztály elem belsejében.

class ="első cseppsapka">
Ez az első bekezdés, és szintén része a drop-cap osztálynak.

Mivel az osztályokat szóköz választja el, lehet, hogy az osztályok nem tartalmaznak szóközt a nevükben.

A CSS-ben, a JavaScript-ben és más nyelvekben az elem osztályát ponttal jelöljük a név elé.

/ * CSS * /

.első {
szín: zöld;
}

A fenti CSS-kód azt jelenti, hogy az első osztályú elemek bármelyik elemén belül a szöveg színének zöldnek kell lennie.

ID attribútum

Az ID attribútum hasonlóan működik, mint a Class attribútum, de fogalmilag más. Ahelyett, hogy jelezné az elemek tagságát egy csoportban, az egyedileg azonosítja az elemet. Ezért az adott oldalon csak egy elem lehet, bármilyen azonosítóval.

id ="lap cím">Ez az oldal címe

Az azonosítókat ritkábban és a funkcionális célokra használják a megjelenítés befolyásolására.

Az azonosítók felhasználhatók egy dokumentum, például a wikipedia-cikk tartalomjegyzékének belső összekapcsolására.

  1. href ="#intro">Intro
  2. href ="#history_of_topic">A téma története

id ="intro" class ="rész-header">Bevezetés

A bevezető szakasz szövege.

id ="history_of_topic" class ="rész-header">

Néhány történelem ebben a témában.

Ne feledje, hogy a szakaszokra mutató hivatkozások tartalmazzák a címke nevét, amelyet a hash vagy a font jel elé helyeztek (#). Ez egy szokásos módszer az elem azonosításához:

/ * CSS * /

#intro {
betűméret: 14 képpont;
}

Egyéb attribútumok

Minden HTML-címke rendelkezik a rendelkezésre álló attribútumokkal, amelyek az adott célra vonatkoznak. Például a hiperhivatkozást meghatározó címke tartalmazza a href (hiper-referencia) attribútumot, amely meghatározza a kapcsolódó URL-t.

Ezeket az attribútumokat részletesebben lefedjük, mivel az egyes címkéket a későbbi szakaszokban külön-külön megvizsgáljuk.

Számos „globális” attribútum is létezik – bármilyen elemhez tartozó attribútumok. Ezekkel később részletesebben foglalkozunk, mivel felhasználásuk relevánsabbá válik.

Megjegyzéscímkék

Az alapvető HTML-címkékben az utolsó szempont a megjegyzés. A megjegyzések szögletes zárójelekkel kezdődnek, amelyet felkiáltójel és két kötőjel követ. Két vonallal és záró szögtartóval végződnek.

A megjegyzések lehetnek több sor.

Mikor kell használni

és

Az

a címkét a keresőmotorok az oldal legfontosabb címsorának tekinti, és érdeklődjön benne, hogy mi az oldalról. Ezért egyeznie kell a címke tartalmával, ha egyáltalán lehetséges, és csak egynek kell lennie

elem bármely oldalon.

A kezdőlapján és a blog indexlapján a legjobb, ha webhelyének címét a

címke és a cikkek címei egy blogindexben belül

címkék.

Ugyanakkor egy cikkből álló oldalon a bejegyzés vagy a cikk címének belül kell lennie

címke, a weboldal címével egy

vagy akár

címke.

Hasonlóan egy kategória vagy címke alapú archívum oldalon, általában a legjobb, ha a kategória vagy a címke nevét egy elembe helyezi

címke.
Hierarchikus szervezet

Ez (enyhén) jó a SEO számára, és az olvasók számára is nagyon jó, ha a cikkeket logikai részekre bontja, és a cikk tartalmában megfelelő címsorokat használ. A címsorokat hierarchikusan kell használni – ha van

követ egy

címke, az alárendelt szakasz fejlécének kell lennie.

feliratok

A felirat címe legyen nem két különböző fejléccímkét használt:

Ehelyett helyezze a teljes címet és a feliratot egy címsorba, és használjon másik címkét a kapcsolat meghatározásához:

E cikk fő címe:
Ugyanazon cikk alcíme

E cikk fő címe: class ="felirat">Ugyanazon cikk alcíme

A widgetek címsora

Az oldalsáv szakaszokhoz vagy a kütyühez címekre van szükség, de ezek általában nem relevánsak tartalmi (SEO) szempontból. A legtöbb tájékozott tervező használja

címkék erre a célra, fenntartás

,

, és

kulcsszóra vonatkozó tartalomhoz.
 

Legutóbbi hozzászólások

  • href ="#">Postai cím
  • href ="#">Postai cím
  • href ="#">Postai cím

Archív

  • href ="#">2015. június
  • href ="#">2015. május
  • href ="#">2015. április

Ha azonban rendszeresen olyan sok alszakasz található az oldal tartalmában, amelyet használnia kell

a főszöveg címsora, a használatban nincs semmi rossz
vagy akár
az oldalsáv címeiben.
A címsorok linkcélként

Egy különösen hosszú dokumentumban érdemes lehet nemcsak az oldal egészére, hanem egy adott szakaszra mutató hivatkozás is lehetővé tenni..

A múltban csak rögzítőcímkék ( ) lehet használni egy link célpontjaként, de ez már nem így van – bármely elem válhat az oldal-helyspecifikus link célpontjává.

Az ilyen hivatkozások természetes jelöltje a címsorok, mivel ezek a szakaszok elejének azonosítására szolgálnak.

A munka elvégzéséhez csak annyit kell hozzáadni, hogy egyedi legyen id attribútum a fejlécelemhez. Az erre a szakaszra mutató linkek egyszerűen az oldal URL-je, csatolva a hash jelhez ( # ) és az azonosító.




 id ="Egyes-headline">Néhány címsor az oldal közepén
href ="Http://example.com/page#some-headline">Kattintson ide, hogy odamenjen.
  • Ez rossz.
  • Ez rossz.
  • Nem támogatott.
  • Rendezett lista

    A rendezett listák számozott vagy betűkkel ellátott listák. A külső elem

      , és a
    1. a címkét újra használják minden elemhez.

      1. Gyűjtse össze az alsónadrágot.
      2. ???
      3. Nyereség.
      1. Gyűjtse össze az alsónadrágot.
      2. ???
      3. Nyereség.

      Az

        Az elem számos olyan attribútumot támogat, amelyek megváltoztatják a lista számozását.

        A type attribútum felhasználható az alapértelmezett arab számok (1, 2, 3) betűkre vagy római számokra (nagybetűkkel vagy kisbetűkkel) történő megváltoztatására..

        type ="én">
      1. Kisbetűs római szám 1.
      2. Kisbetűs római szám 2.
      3. Kisbetűs római szám 3.
      1. Kisbetűs római szám 1.
      2. Kisbetűs római szám 2.
      3. Kisbetűs római szám 3.

      Típus opciók:

      • 1 - arab számok (1, 2, 3) - ez az alapértelmezett érték.
      • A - Nagybetűk (A, B, C)
      • a - kisbetűk (a, b, c)
      • I - Nagybetűs római számok (I, II, III)
      • i - Kisbetűs római számok (i, ii, iii)

      A start attribútum felhasználható a lista számozására egy 1-től eltérő számra. Ez használható számokhoz vagy más típusokhoz.

      start ="10">
    2. Csokoládé
    3. Vanília
    4. Motorolaj
    type ="én" start ="8">
  • Telesphorus
  • Hyginus
  • Pius
  • Anicetus
    1. Csokoládé
    2. Vanília
    3. Motorolaj
    1. Telesphorus
    2. Hyginus
    3. Pius
    4. Anicetus

    Végül a fordított attribútum felhasználható a lista elemek fordított sorrendben történő számozására. Ez kombinálható a többi attribútummal (vagy mindkettővel).

    Ki a kezdő kaputól!

    start ="-3">
  • Várni rá.
  • Várni rá.
  • Várni rá.
  • MEGY!
  • Tíz legfontosabb ok

    start ="10" fordított>
  • Mivel.
  • És így tehát.
  • QED
  • stb..
  • Ki a kezdő kaputól!

    1. Várni rá.
    2. Várni rá.
    3. Várni rá.
    4. MEGY!

    Tíz legfontosabb ok

    1. Mivel.
    2. És így tehát.
    3. QED
    4. stb..

    Érdemes megjegyezni ezt a két példát:

    1. A start attribútum negatív lehet.
    2. Még ha a listát is megfordítják, a kezdőérték a első a lista száma.
    3. A fordított attribútumnak nem kell értéket megadnia. Ennek oka az, hogy csak két lehetséges értékkel rendelkezik: igaz (jelen) vagy hamis (hiányzik).
    4. A tíz legfontosabb (vagy hasonló visszaszámlálás) listának nem kell meghatároznia egy kezdő attribútumot, ha az 1-gyel fejeződik be, amely mindig az utolsó szám lesz a fordított listában, hacsak másként nincs megadva. A fenti példa valójában nem tartalmaz tíz elemet, ezért meg kellett határozni.
    5. Az alapértelmezett viselkedés az, hogy növelje az egyes egymást követő listaelemek számát. Ezért, ha negatív számból szeretne visszaszámlálni, akkor ezt kell tennie nem tartalmazza a fordított attribútumot.
    Leírás / meghatározási listák

    A leírási listák (vagy a „Definition” listák, mivel azok közösebben nevezik) kissé különböznek a rendezett és rendezetlen listáktól. Ezeket a kifejezések listájának biztosításához használják, például leíróval együtt, leírással.

    A teljes listát bekerítettük a címkébe. A listában szereplő minden kifejezést egy címkével jelölnek (“meghatározási kifejezés”), és minden kifejezést egy vagy több elem követ (“meghatározási leírás”)..

    A listák típusai

    Rendezett lista Az elemek számozott listája. Rendezetlen lista A felsorolt ​​elemek listája. Meghatározási lista A kifejezések listája a kapcsolódó meghatározásokkal. Minden kifejezésnek lehet egy vagy több meghatározási leírás.

    A listák típusai

    Rendezett lista Az elemek számozott listája. Rendezetlen lista A felsorolt ​​elemek listája. Meghatározási lista A kifejezések listája a kapcsolódó meghatározásokkal. Minden kifejezésnek lehet egy vagy több meghatározási leírás.

    A leíráslista nyilvánvaló használata egy szószedet vagy szótár, de ez nem az egyetlen általános használat.

    Nevek listája: a leírásban szereplő elérhetőségekkel. Audio műsorszámok felsorolása: a műsorszámmal kapcsolatos részletes információkkal a leírásban. A termékajánlatok listája: a leírásban szereplő termékekkel. Statisztikák listája: a stat névvel együtt kifejezéssel és a stat értékkel a leírásban

    Bármikor, ha van egy olyan listája az elemekről, amelyek mindegyike részletesebb, a leírási lista jó ötlet.

    A definíciós listák még erősebbek, mint amilyenek már rájöttnek, mert a címke - a leírás - bármilyen más elemet tartalmazhat: bekezdéseket, képeket és egyéb listákat. Ez azt jelenti, hogy a leírási lista nagyon tartalmas jelölési séma lehet, ha olyan elemek vannak, amelyek mindegyikére bármilyen kiegészítő információra van szükség.

    A leíráslistákhoz egyfajta felhasználás is alkalmazható, ami némileg ellentmondásos. Példaként szerepelt a HTML4 specifikációban, de eltávolítottuk a HTML5: script-szerű párbeszédhez.

    Olvasó Mi a kedvenc HTML entitásod?? Szerző Vicces, kérdezd meg! Ez a leíráslista. Olvasó Igazán? Mi olyan nagyszerű benne?? Szerző Olyan furcsán rugalmas.

    Ez rosszul fog kinézni

    1. Első tétel
    2. Második tétel
      1. A. alpont.
      2. B. alpont.
        1. I. Alpont.
        2. Ii. Alpont.
        3. Iii. Alpont.
      3. C. alpont.
    3. Harmadik tétel

    Itt, hogy kell csinálni

    1. Első tétel
    2. Második tétel
      1. A. alpont.
      2. B. alpont.
        1. I. Alpont.
        2. Ii. Alpont.
          1. Lefelé a hierarchiában.
          2. Szüksége van-e valakinek erre a sok listaszintre??
            1. Ez nevetséges.
        3. Iii. Alpont.
      3. C. alpont.
    3. Harmadik tétel

    A beágyazott listák keverhetik a listátípusokat.

    Ez egy rendezett lista:
    1. sütemények.
    2. pite.
    3. A torta hazugság.
    Ez egy rendezetlen lista, amely felsorolja a listátípusokat:
    • Rendezett listák
    • Rendezetlen listák
    • Leírási listák
    Ez egy rendezetlen lista, amely egy elrendezett lista belsejében van beágyazva, amely a leírásban található:
    1. Az első elem.
    2. A második elem.
    3. A harmadik elem, amely a beágyazott lista.
      • Kés
      • Villa
      • Kanál
      • Spork
      • kínai evőpálcikák
    4. Ez a negyedik elem csak a beágyazott lista jobb keretének meghatározására szolgál.
    Ez egy rendezett lista:
    1. sütemények.
    2. pite.
    3. A torta hazugság.
    Ez egy rendezetlen lista, amely felsorolja a listátípusokat:
    • Rendezett listák
    • Rendezetlen listák
    • Leírási listák
    Ez egy rendezetlen lista, amely egy elrendezett lista belsejében van beágyazva, amely a leírásban található:
    1. Az első elem.
    2. A második elem.
    3. A harmadik elem, amely a beágyazott lista.
      • Kés
      • Villa
      • Kanál
      • Spork
      • kínai evőpálcikák
    4. Ez a negyedik elem csak a beágyazott lista jobb keretének meghatározására szolgál.

    Meg kell jegyezni, hogy a listákat nem lehet beágyazni a bekezdéselemekbe (

    ). Ennek oka az, hogy minden lista blokk-szintű elem, és a bekezdések (amelyek szintén blokkok) csak span-szintű elemeket tartalmazhatnak.

    Ez időnként bosszantó lehet, mivel a normál írásbeli szövegben néha rendkívül jó ok van arra, hogy egy bekezdést tartalmazzon egy listát. Ez azonban egyszerűen nem működik.

    Idézetek és inline idézetek blokkolása

    Ha valakit vagy valamit idéz, akkor használja a két HTML idéző ​​elem egyikét.

    Blockquotes

    A blokk idézet sokkal gyakoribb. Ennek oka a normál tipográfiai egyezmény:

    • A blokk idézetek (több soros idézetek vagy kivonatok) speciális módon jelennek meg (általában behúzva, néha dőlt betűvel),
    • míg a soros idézeteket egyszerűen pontozás jelöli.
    Legyen vagy nem, ez a kérdés.

    Legyen vagy nem, ez a kérdés.

    A blokk idézetek idézett anyag nagy blokkjaihoz használhatók, függetlenül attól, hogy az anyag egy irodalmi mű, dal, egy másik blogbejegyzés vagy e-mail üzenet kivonata, amelyre Ön válaszol..

    Ha idézni szeretné az árajánlat forrását, kétféleképpen teheti meg. Az elemhez megadhat egy citite attribútumot, vagy hozzáadhat egy byline sort a forráscímkét körülvevő címkével. Mindkettőt megteheti.

    cite ="http://www.gutenberg.org/ebooks/2265"> Legyen vagy nem, ez a kérdés.
    - Hamlet, William Shakespeare

    Legyen vagy nem, ez a kérdés.
    - Hamlet, William Shakespeare

    Meg kell jegyezni, hogy a címkének tartalmaznia kell az idézett eredeti mű címét, és adott esetben tartalmazhatja a szerző nevét és egyéb információkat (például oldalszám vagy cselekmény és jelenet száma).

    Az idézet végén található idézet jobban azonosítható, ha azt egy elem belsejébe helyezik, és ha maga a hivatkozás kapcsolódik a forrásanyaghoz. Ezzel a cite attribútum feleslegessé válik, ezért távolítsa el azt. Végül, adjon hozzá egy bekezdést, és távolítsa el a kötőjelet (-), így csak az információk szerepelnek - és nem jelenítik meg a részleteket -.

    cite ="http://www.gutenberg.org/ebooks/2265">

    Legyen vagy nem, ez a kérdés.

    href ="http://www.gutenberg.org/ebooks/2265">Hamlet, William Shakespeare

    A blokk idézet tartalmazhat egy is, amely felhasználható maga az árajánlat bevezetésére vagy az eredeti fejléc információk idézésére.

    Inline idézet

    A ritkábban használt idéző ​​elem az inline idézet, .

    A kedvenc vonalom Hamletben az, amikor azt mondja: cite ="http://www.gutenberg.org/ebooks/2265"> Legyen vagy nem, ez a kérdés.

    A kedvenc vonalom Hamletben az, amikor azt mondja: lenni vagy nem lenni, ez a kérdés.

    Ezt nem gyakran használják, mert már létezik egy rendkívül jó módszer annak bemutatására, hogy valamit idézett - idézőjelekkel.

    A címke egyszerű idézőjelek helyett történő használatának azonban van néhány előnye.

    • Az idézőjelek megjelenítését meg lehet változtatni a CSS-en keresztül, ami hasznos a nemzetközivé válás szempontjából, mivel nem minden ország ugyanazokat a szimbólumokat használja az idézőjelekhez.
    • A tény, hogy a szöveg egy másik forrásból származó idézet, szemantikailag egyértelmű, míg az idézőjelek más okokból is felhasználhatók:
      • retorikus „ijesztő idézetek”
      • szó említése vagy megfogalmazása
      • valós beszélgetés jelentése, amelyben nincs forrásszöveg
    • Lehetőség egy idézet-hozzárendelés beillesztésére, amely az idézet eredeti forrásához kapcsolódik.

    hiperlinkek

    A HTML egyik legfontosabb címkéje a rögzítőcímke (), amely meghatározza a hiperhivatkozást. A dokumentumok és a kapcsolatok hálózatának összekapcsolásának képessége a web lényege, és a „hipertext” meghatározása.

    Az elemet „horgonynak” hívják, mert arra használják, hogy egy összekapcsolt URL-t rögzítsen egy adott szöveghez. (Ez ellentétben van a címkével, amely összeköti a teljes dokumentumot, nem pedig a szöveg egy meghatározott részét.)

    Az elem belsejében levő szöveget „horgonyszövegnek” nevezzük, és a csatolt URL-t a href attribútum határozza meg.

    href ="http://example.com">Ez egy link a example.com webhelyre Ez egy link a example.com webhelyre

    A href mellett a címke számos fontos tulajdonsággal rendelkezik.

    • A target határozza meg, hogy melyik ablakon (vagy böngésző lapon) nyissa meg a linket. Az alapértelmezett beállítás ugyanaz. Ha új fület szeretne megnyitni, akkor állítsa be a cél ="_üres".
    • cím beállítja a hivatkozás eszköztippjét vagy lebegő szövegét. Ez megjelenik egy kis felugró ablakban, amikor a felhasználó az egérmutatót a horgonyszöveg fölé viszi. Hasznos, ha további információkat szolgáltat arról, hogy mi a felhasználó kattintson.
    • rel jelentést készít a hivatkozott dokumentum és az aktuális dokumentum közötti kapcsolatról. Számos lehetséges értéke van:
      • alternatív - A kapcsolt dokumentum tartalma megegyezik a jelenlegi dokumentummal, de alternatív formátumban. Leggyakrabban az RSS-hírcsatornákra mutató hivatkozásra használják.
      • szerző - A hivatkozott dokumentum az aktuális dokumentum vagy cikk szerzőjének profiljának honlapja.
      • könyvjelző - Hivatkozás a dokumentum egy adott pontjára (például egy oldalsó tartalomjegyzék létrehozásakor).
      • súgó - A csatolt dokumentum segítséget nyújt az aktuális dokumentumhoz.
      • licence - a csatolt dokumentum az aktuális dokumentum licencszövege.
      • Következő - A csatolt dokumentum a paginált sorozat következő része. Egyes böngészők előzetesen letölti a hivatkozott dokumentum tartalmát annak érdekében, hogy felgyorsítsák a megjelenítést, amikor a felhasználó végül rákattint.
      • nofollow - A csatolt dokumentum nem támogatott az aktuális dokumentum szerzője. Annak megakadályozására szolgál, hogy a SEO előnyei legyenek a linkelt oldalon. A kommentáló rendszerek ezt alapértelmezés szerint gyakran hozzáadják a felhasználó által megadott linkekhez.
      • noreferrer - Megakadályozza a referenciainformációk küldését a HTTP kérés fejlécében, amikor a felhasználó rákattint a linkre. A HTTP kérés általában meghatározza, hogy a felhasználó honnan jön (az aktuális oldal). Ez kéri, hogy a böngésző kliens hagyja ki ezeket az információkat.
      • prefetch - hasonló a következőhöz, de nem utal a tényleges szekvenciális kapcsolatra. Ez megköveteli, hogy a böngésző töltse le a hivatkozott oldal tartalmát, mielőtt a felhasználó rákattintana, így a következő oldalra való navigálás azonnal tűnik..
      • prev - A következő fordítottja, ez az érték megadja, hogy a csatolt dokumentum az oldalazott sorozat előző oldala. Egyes böngészők előzetesen letölthetik a tartalmat.
      • keresés - A csatolt oldal kifejezetten az aktuális dokumentum és a kapcsolódó dokumentumok keresésére szolgáló felületet biztosít.
      • tag - a csatolt dokumentum az aktuális oldal témájának összefüggéseit adja meg.

    A rel attribútumot a nem műszaki weboldal készítői alulhasználják, és ez egy nagyszerű módja annak, hogy gazdag, szemantikai információkat nyerjenek a jelölésbe oly módon, hogy a keresőmotorok, összesítők és képernyőolvasók megértsék.

    Például: A Google a rel = -et használja"szerző" link (ha kapcsolódik egy Google+ profilhoz), hogy ugyanazon szerző más tartalomra mutató linkeket jelenítsen meg a keresési eredmények között. - A Google képkeresés magában foglalja a licenc alapján történő keresés, a Creative Commons licenccel rendelkező tartalmak újbóli felhasználásra történő felkutatásának lehetőségét. Ez a szolgáltatás részben a rel =-től függ"engedély" az attribútum a Creative Commons és más nyitott licencek hivatkozásaiban használatos. Számos keresőmotor és hírösszesítő oldal használja a rel = rögzített szövegét és hivatkozott oldalát"címke" link az adott oldal témájának meghatározásához.

    A rel címke használható a mikroformátumokban is, amelyek egyszerű módszerek a további szemantikai információk beillesztésére a meglévő HTML attribútumokba (általában rel és osztály).

    Például az XFN mikroformátum azt javasolja, hogy használja a rel attribútumot, ha linket mutat azoknak a kezdőlapoknak vagy profiloldalaknak, akikkel kapcsolatban állsz.

    A következő hónapban egész hétvégét töltök egy konferencián, ahol a href ="http://example.com/kami-profile" rel ="munkatárs">Kami. A konferencia a szülővárosom közelében található, tehát remélem, hogy ebédelni tudok a href = -nel"http://example.com/dave-profile" rel ="szülő">édesapám.

    Számos további mikroformátum van, amelyek használják a rel címkét, valamint más módszereket az ilyen szemantikai információknak a webhely jelöléséhez történő beillesztésére. Ezeket a Szemantikus HTML szakasz tartalmazza.

    Szöveg dekoráció

    Számos egyszerű címke van felhasználva az alapszöveg jelöléséhez egy bekezdésben vagy más elemben.

    Bátor

    Két címke használható szövegek készítésére bátor.

    • ajánlott a „fontos” szöveg megjelölésére. Megalapozottan jeleníti meg a becsomagolt szöveget, de szemantikai jelentést is hordoz (hogy maga a szöveg valahogy fontos).
    • egyszerűen félrehúzza a szöveget anélkül, hogy semmiféle szemantikai jelentést jelentene.
    dőlt betű

    Tetszik bátor, kétféle módon állíthatjuk be a szöveget dőlt betűvel.

    • javasolja, hogy a becsomagolt szöveget valamilyen módon hangsúlyozzák.
    • egyszerűen dőlt betűvel, konkrét szemantikai jelentés nélkül.
    Aláhúzás

    Noha az utóbbi időben kevésbé vált népszerűvé, a hiperhivatkozások () általános szöveges kijelzője aláhúzza őket. Ebből kifolyólag, linkek nélküli aláhúzás nem nagyon gyakran szokik. Ennek ellenére vannak jelölőcímkék.

    • a szöveg aláhúzásának általános címe. A leírásban bemutatott használati eset aláhúzza a hibás szavakat. A HTML5 specifikáció azt is szeretné, ha tudná, hogy más elemek általában megfelelőbbek, és ne használja ezt, ha egy linkre tévedni lehet.
    • a beillesztett szöveg, amelyet általában a címkével összekapcsolva használnak a szövegben végrehajtott változtatások megjelenítésére.

    A műsor 19:00 és 20:00 órakor kezdődik.

    A műsor 19:00 és 20:00 órakor kezdődik

    Áthúzott

    Két elem jelöli a sorakozni kívánt szöveget. Mindegyikük kissé eltérő jelentéssel bír.

    • a szövegre vonatkozik, amelyet törölt vagy megváltoztatottként kell értelmezni, és amelyet a fent említett címkével együtt használtak.
    • olyan szöveghez használható, amely már nem helyes vagy már nem releváns.

    Van egy címke is, amely elérhető volt a HTML4-ben.

    Míg a specifikációk leírása és elméletileg kissé eltérnek, a szakértők nem értettek egyetértést a különbség gyakorlati részleteiről vagy arról, hogy mely helyzetek szükségessé teszik az egyiket a másik helyett.

    Forráskód és feldolgozatlan szöveg

    Két olyan elem jelenik meg a szöveg vagy a kód megjelenítéséhez, amelyeket nem akarja, hogy a böngésző megjelenítsen, hanem egyszerűen „nyersen” jelennek meg a használthoz.

    • - Kódblokkokhoz vagy feldolgozatlan szöveghez használható.
    • - Használható, amikor egy rövid szót vagy kódmondatot kell beillesztenie a szövegbe.

    Mindkettő alapértelmezés szerint monospace (általában Courier) betűtípusként jelenik meg, megőrzi a szóközt, és nem ad meg semmiféle címkét.

    Ez az útmutató mind az elemeket, mind az elemeket nagymértékben használja a forráskód példák megjelenítéséhez és az elemek címkéinek megbeszéléséhez.

    Szöveg méretezése

    Tetszőlegesen nagyobb vagy kisebb szöveget tehet két elemmel, amelyeknek egyébként nincs konkrét jelentése:

    A méretezési elemek leggyakoribb használata az oldal vagy cikk feliratának a fejcímke belsejében beágyazott elembe helyezése.

    Az általános elem

    Ha szemantikai vagy stílussági célokra meg kell jelölnie a szöveg meghatározott hosszúságát, de a létező címkék egyikének semmi értelme, akkor használja a generikus elemet, a class attribútummal (és néhány CSS-rel) a kívánt hatás létrehozásához..

    Nem tudom, miért nem létezik szarkasz címke. Talán csak nincs rá szükség, mert osztály ="gúny">A hangot annyira könnyű olvasni az interneten.

    / * CSS * / .szarkazmus { szín: lila; betűtípus: dőlt; }

    .szarkazmus {
    szín: lila;
    betűtípus: dőlt;
    }

    Nem vagyok biztos benne, miért nincs szarkazmus-címke. Talán csak nincs rá szükség, mert a hangot annyira könnyű olvasni az interneten.

    szeparátorok

    A HTML két címkét ad a szétválasztáshoz a szövegben.


    • beszúr egy sortörést
    • beszúr egy vízszintes vonalat

    Ezen elemek egyikének sem kell zárócímkéje, mert nem tartalmaznak szöveget. Ha ez segít a forráskód jobb olvasásában, akkor tartalmazhatja az önzáró végpontot:
    és .

    A vonalszakítás különösen akkor hasznos, ha kemény vonalszakadokra van szükség, de más megoldásokra is - például többszörösre -

    a címkéknek nincs értelme. Két jó példa a költészet vagy dalszöveg és cím.

    A rózsák pirosak
    Az ibolyák kékek
    A rímolás nehéz
    A HTML5 fantasztikus.

    123 Main St.
    Fort Worth, TX 76148

    A rózsák pirosak
    Az ibolyák kékek
    A rímolás nehéz
    A HTML5 fantasztikus.

    123 Main St.
    Fort Worth, TX 76148

    Ez könnyebb, mint amilyennek látszik

    Mindez bonyolultnak tűnhet, de valójában nem. A legtöbb rendszeresen szükséges címke könnyen megjegyezhető: címsorok, bekezdések, rendezetlen lista. Nem kell megjegyeznie az egyes mögöttes lehetőségeket vagy jelentéseket. Csak próbáljon szem előtt tartani, hogy minden normál tipográfiai elem (például címsor, lista, bekezdés vagy link) valószínűleg rendelkezik meglévő HTML-címkével annak végrehajtásához. Ha ezt szem előtt tartja, akkor csak írhat anélkül, hogy ezekre a dolgokra összpontosítana, majd keresse meg azokat a tételeket, amelyekre nem emlékszik.

    Próbáljon meg sem akadályozni a lehetőségeket. A lényeg az, hogy a jelölés a lehető legmegfelelőbb, anélkül, hogy túlzottan bonyolult lenne. Ha nem tudja eldönteni, hogy kettő vagy több lehetőség közül melyik a legjobb, akkor kérdezze meg, melyik értelmesebb. Ha nem tudja kitalálni, kérdezd meg, melyik egyszerűbb. Ha továbbra sem tudja dönteni, csak válasszon egyet - ha úgy tűnik, hogy hasonlóak, akkor valószínűleg nem lesz hatalmas különbség a működésében.

    Szerkezeti HTML

    Ez a szakasz ismerteti a HTML dokumentum általános szerkezetét, beleértve azt is, hogy milyen típusú információ található a és a dokumentumban. Azt is elmagyarázza, hogyan lehet egy tipikus weboldal különféle részeit megszervezni. További információt az alábbi HTML5 szakaszban talál.

    Alapvető HTML dokumentumszerkezet

    A HTML dokumentumoknak (weboldalak) néhány alapvető szerkezeti szabályt kell követniük, hogy megfelelően működhessenek és a böngészők pontosan olvashassák őket.

    A dokumentumnak a DOCTYPE deklarálásával kell kezdenie. Számos különféle HTML (és kapcsolódó) szabvány létezik, amelyeket az évek során használtak, ezért fontos meghatározni, hogy milyen típusú dokumentumot (melyik HTML szabványt) használ a dokumentum.

    Leginkább ma a helyes DOCTYPE egyszerűen html. Tehát egy HTML dokumentumnak a következővel kell kezdődnie:

    html>

    Ez nem pontosan egy HTML címke a megfelelő értelemben, hanem megmondja a böngészőnek, hogyan kell értelmezni az összes többi címkét, amelyek ezt követik.

    A DOCTYPE deklaráció után a nyitó címke a címke. A címke bezárása lesz a dokumentum utolsó sora.

    A HTML-címkén belül megadhatja a dokumentum nyelvét (ebben az esetben angol).

    html> lang ="en"> . . . . .

    A címke belsejében két rész található, a és a. A test tartalmazza az összes látható tartalmat, míg a fej tartalmazza a magáról a dokumentumról szóló információkat. Semmi nincs ezen a két szakaszon kívül.

    html> lang ="en"> . . . . . .

    Ez a HTML-dokumentumok alapvető felépítése. Minden alapvetően extra.

    A

    A html dokumentum eleme általában tartalmazza az összes információt, amely a böngészőnek szüksége van a dokumentum megfelelő megjelenítéséhez, valamint a tartalmat leíró kiegészítő információkat (az összesítők és robotok javára)..

    Metaadatok

    A címkét többször használják a metaadatok (a dokumentumra vonatkozó adatok) meghatározására a.

    A metacímkék üres címkék, nem igényelnek záró címkét. Az önzáró perjelmel végezheti el őket (/>), de erre nincs szükség (és egyesek ezt kifejezetten elriasztják).

    Karakterkódolás

    Számos különféle módszer létezik a karakterek (betűk, számok és írásjelek) kódolására a számítógép memóriájában. Ha nem adja meg, hogy melyiket használja, akkor a böngésző összezavarhatja és megjeleníthet néhány rossz karaktert.

    Manapság a legtöbb esetben meg kell adni az UTF-8 karakterkészletet.

    (A másik általános kódolás - az ASCII - nem rendelkezik az összes kibővített karakterrel, például em-kötőjelekkel és göndör idézőjelekkel. Ha valaha is látott furcsa jellegű hibákat, amelyekben az idézőjelek vagy az aposztrófák látszólag véletlenszerű karakterekkel vannak helyettesítve, az az oka, hogy a dokumentumot UTF-8, de az ASCII használatával jelenik meg - ami azt jelenti, hogy valaki nem határozta meg a megfelelő karakterkészletet a dokumentumban.)

    charset ="utf-8">
    Leírás, szerző és kulcsszavak

    A dokumentumra vonatkozó alapvető információkat - ki írta és miről szól - címkék útján továbbítják. Mindegyiknek két attribútuma van: a címke neve és a címke tartalma.

    name ="leírás" content ="Egy oldal a HTML-ről."> name ="kulcsszavak" content ="HTML, címkék, metaadatok"> name ="szerző" content ="Adam Michael Wood">

    Ez a fajta információ a SEO szempontjából különösen fontos volt. Már nem így van, hogy ez hatalmas szerepet játszik a SEO-ban, bár befolyásolja. Ennél is fontosabb, hogy ezekben az elemekben a helyes és részletes információk megléte hozzájárul egy szemantikai webhez, ahol az összes tartalom a gépek könnyen megtalálható és értelmezhető..

    (Ha Tartalomkezelő Rendszert használ, akkor a szerkesztő képernyőn írt címkék és hozzászólásleírások általában ezekben a metacímkékben jelennek meg.)

    Cím

    A címke megjelenik a fejben, és általában nem tartalmaz attribútumokat. A címet csatolja.

    Ez az oldal címe.

    A címnek pontosnak kell lennie, és ha lehetséges, egyeznie kell az oldalon látható címmel (általában egy

    vagy

    címsor) a testben. A cím tartalma általában a böngészőablak tetején található fülön jelenik meg.

    Ez nem jó ötlet más címkék beillesztésére a címben (például vagy ), mert általában nem jelennek meg megfelelően.

    A HTML dokumentum csak egy címet adhat meg.

    CSS linkek

    A CSS (Cascading Style Sheet) nyelven írt stíluslapok külön dokumentumok, amelyek információt nyújtanak az oldal böngészőben történő megjelenítéséről. A méretre, a színekre, az elhelyezésre és a betűtípusokra vonatkozó információk mind a stíluslapban találhatók. Ha ezeket az adatokat elkülöníti a fő HTML-dokumentumból, megkönnyíti azok megváltoztatását anélkül, hogy magának a dokumentumnak a tartalmát befolyásolná.

    A CSS stíluslapokat a címke segítségével a HTML dokumentumban összekapcsolják. A href attribútum határozza meg a stíluslap-fájl URL-jét, a rel attribútum pedig azt, hogy a link stíluslap-link (más típusú linkek is vannak).

    href ="/css/style.css" rel ="stylesheet">
    RSS információ

    Az RSS - a Rich Site Summary, vagy a Really Simple Syndication egy olyan módszer, amellyel webhelyfrissítéseket (például új blogbejegyzéseket) biztosíthat az előfizetők számára, hogy tájékozódjanak az új tartalomról, amikor közzéteszik, és el tudja olvasni ezt a tartalmat egy RSS-ről. olvasó, anélkül, hogy meg kellene látogatnia a webhelyen.

    Ha Tartalomkezelő Rendszert használ, akkor általában RSS-hírcsatornát hoz létre az Ön számára, amely egy saját URL-jén elérhető XML-dokumentum. Ehhez az URL-hez a blogja fő indexoldalán kell kapcsolódni, hogy az RSS olvasók és a böngészők könnyen megtalálhassák.

    rel ="váltakozó" type ="application / rss + xml" title ="RSS" href ="/feed.xml" />

    A rel ="váltakozó" attribútum azt jelenti, hogy a kapcsolt URL ugyanazt a tartalmat (a blogbejegyzések listáját) tartalmazza, de alternatív formátumban. A type attribútum meghatározza a formátum típusát (RSS).

    Más információ

    A dokumentumban sok további részlet jelenik meg gyakran a. Ezeket részletesebben később, a vonatkozó szakaszokban tárgyalom.

    Javascript linkek

    A JS fájlokhoz a fejről is lehet hivatkozni, és ez általános gyakorlat. Általában azonban jobb, ha ezeket a dokumentum végére helyezi.

    Példa az elkészült elemmel ellátott HTML dokumentumra

    html> lang ="en"> charset ="utf-8"> name ="leírás" content ="Egy oldal a HTML-ről."> name ="kulcsszavak" content ="HTML, címkék, metaadatok"> name ="szerző" content ="Adam Michael Wood"> href ="/css/style.css" rel ="stylesheet"> Útmutató a HTML-hez rel ="váltakozó" type ="application / rss + xml" title ="RSS" href ="/feed.xml" /> . . . .

    A

    A címke a HML dokumentum fő része, és mindenféle dolgot tartalmazhat.

    Általában a HTML-struktúra felépítése több részre osztható, amelyek mindegyikében lehet egy vagy több alszakasz:

    • fejléc
      • logó / márkanév / webhely címe
      • fő navigáció
      • kereső sáv
    • központi téma
      • egy vagy több cikk
      • cikk címe
      • cikk tartalma
      • cikk metaadatai (szerző, címkék, a feladás dátuma)
    • oldalsáv (s)
      • widgetek
      • másodlagos navigáció (archívumok dátum, kategória vagy címke szerint)
    • Lábjegyzet
      • szerzői jogi / licenc információk
      • harmadlagos navigáció
      • elérhetőségei
      • cím / telefon
      • társadalmi kapcsolatok

    Ezeknek a szakaszoknak nem mindegyike kerül minden oldalra, vagy ugyanúgy jelenik meg. Ez azonban jó kiindulópontként szolgál annak példájához, hogy ezeket a különféle darabokat hogyan lehet összeilleszteni egy dokumentumba.

    Az elem

    A weboldalak szerkesztésének legáltalánosabb blokk szintű elem az elem. Ezt egyszer használták az oldal minden részéhez és alszakaszához.

    Ez sok beágyazott címkét eredményezett.

    class ="fejléc"> class ="logo"> class ="main-nav"> class ="kereső sáv"> class ="page-tartalom"> class ="fő-"> class ="cikk"> class ="Cikk-header">

    A cikk címe

    class ="Cikk-meta"> class ="Cikk-tartalom">

    Cikk.

    Tartalom.

    class ="Cikk-footer"> class ="Hozzászólások"> class ="oldalsáv"> class ="Lábjegyzet"> class ="engedély"> class ="elérhetőségei">

    A legújabb HTML-szabvány (HTML5) kibővített strukturális címkéinek köszönhetően ez könnyebben olvashatóbbá válik azoknak a keresőmotoroknak és más rendszereknek, amelyek információt vonnak ki az Ön oldaláról (például a képernyők olvasói számára a vakok számára)..

    HTML táblák

    Ez a szakasz a HTML táblázatokat tartalmazza, beleértve mindent, amit tudnia kell a különféle használati esetek jelöléséről. Az összes fő tábla elem és attribútum lefedi, beleértve a táblázat fejléceit, láblécét, törzsét és oszlopait. Ez a szakasz konkrét javaslatokat tartalmaz az asztali jelölésbe beépített nehézségek kezelésére, és a valós gyakorlatokkal foglalkozik.

    Mik az asztalok??

    A HTML-formátumú táblázat a „táblázatos adatok” - információk, amelyeket reprezentálhatunk a táblázatokban - bemutatásának módja. A HTML táblázatok kétdimenziós táblák, sorokkal és oszlopokkal.

    Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41

    A táblázatos adatok sokféle formában jelennek meg. A legegyszerűbb módszer annak eldöntésére, hogy kell-e valami táblázatnak lennie, ellentétben a különböző szintaxisokkal, mint például a definíciós lista, kérdezze meg magától: „Ennek lenne-e értelme táblázatoknak?”

    Ha az adatoknak értelme lenne táblázatoknak, akkor ez jó jelölõ a táblázathoz.

    Táblázat szintaxis

    Alapszintaxis

    Minden táblázat használja a

    elem, a táblázat sor ( ) elem, és az asztal cellája ( ) egy időben.

    ) elem.

    Ez a három elem önmagában elegendő egy egyszerű asztalhoz. Egy sort építenek egy sorban (

    János Kovács 31
    Jane fehér 32
    bársony Jones 41
    János Kovács 31
    Jane fehér 32
    bársony Jones 41
    Táblázat fejlécek: 1. lehetőség

    Gyakran kívánatos, hogy a fejléceket az asztal tetejére tegyék. Ennek egyik módja a normál táblacellák cseréje ( ) tábla fejléc cellákkal ().

    Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41
    Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41

    Ennek a megközelítésnek az az előnye, hogy nem érinti az egész sort, csak azokat a cellákat, amelyeket fejlécként jelöltek meg. Vagyis - előnye, ha az, amit meg akar tenni, megtörténik.

    Asztalfejlécek (és test): 2. lehetőség

    A táblázat fejlécének elkészítésének másik módja az, hogy a teljes első sort (vagy akár akár több sort is) egy asztal-fej () elembe csomagolja.

    Amikor ez megtörtént, a tartalom többi részét általában egy tábla-test () elembe csomagolják.

    Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41

    Ez lehetővé teszi a teljes fejléc sor stílusának kialakítását.

    thead { háttér szín: fekete; fehér szín; betűsúly: félkövér; }

    # thead-example thead {
    háttér szín: fekete;
    fehér szín;
    betűsúly: félkövér;
    }

    Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41

    Talán még érdekesebb, hogy ez lehetővé teszi az asztal testének kialakítását is, anélkül, hogy a fejét befolyásolná.

    tbody tr: n. gyermek (furcsa) { háttér szín: #eee; } tbody tr: n. gyermek (akár) { background-color: #fff; }

    # tbody-example thead {
    háttér szín: fekete;
    fehér szín;
    betűsúly: félkövér;
    }
    # tbody-példa tbody tr: n. gyermek (páratlan) {
    háttér szín: #eee;
    }
    # tbody-példa tbody tr: n. gyermek (még) {
    background-color: #fff;
    }

    Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41
    Asztali lábléc

    Az asztali fej és az asztaltest mellett meghatározhat egy vagy több sort is, amelyek az asztal láblécéhez tartoznak (). Ez akkor hasznos, ha az utolsó sort eltérően kell stílusolni, mint a többi sort. Leggyakrabban ezt akkor lehet használni, ha az utolsó sor egy összegzés vagy számítás a fölötte lévő sorok alapján.

    thead { háttér szín: fekete; fehér szín; betűsúly: félkövér; } tbody tr: n. gyermek (furcsa) { háttér szín: #eee; } tbody tr: n. gyermek (akár) { background-color: #fff; } láb { háttér szín: # 222222; fehér szín; betűtípus: dőlt; } Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41
    Átlagos életkor 34.67

    # tfoot-example thead {
    háttér szín: fekete;
    fehér szín;
    betűsúly: félkövér;
    }
    # tfoot-example tbody tr: n. gyermek (páratlan) {
    háttér szín: #eee;
    }
    # tfoot-example tbody tr: n. gyermek (még) {
    background-color: #fff;
    }

    # tfoot-example tfoot {
    háttér szín: # 222222;
    fehér szín;
    betűtípus: dőlt;
    }

    Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41
    Átlagos életkor 34.67
    Táblázat oszlopok

    Időnként meg kell stílusolnia egy táblázat oszlopot. Ezt (bizonyos mértékig) az oszlopjelöléssel lehet elérni.

    Az oszlopok kissé furcsa módon működnek HTML-ben. Mivel a táblázatok sorokként vannak írva, az oszlopokat másodlagos fedvényként definiálják az asztalon.

    A táblázat tetején az elem meghatározza, hogy az oszlopok hogyan kerülnek az asztal fölé. Az elem oszlopdefiníciói az elem használatával találhatók. Mindegyik egy vagy több oszlopot átölel, és meghatározható egy elkészíthető entitás.

    style ="háttér szín: cián;"> style ="background-color: sárga;"> style ="background-color: red;"> Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41
    Átlagos életkor 34.67
    Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41
    Átlagos életkor 34.67

    A fenti példában mindegyik táblázati cellát egy oszlopra ölel fel. Ha a stílust a két név oszlopra szeretnénk egyetlen egységként alkalmazni, elkészíthetjük a két cella oszlopot.

    span ="2" style ="háttér szín: cián;"> style ="background-color: sárga;"> Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41
    Átlagos életkor 34.67
    Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41
    Átlagos életkor 34.67

    Sajnos problémák vannak a jelölés használatával:

    • csak a háttérhez, szélességhez, szegélyhez és láthatósághoz kapcsolódó stílusokat támogatja. Ez azt jelenti, hogy nem formázhatja például a táblázat első oszlopát bátor.
    • Mivel sem a táblák egyik része (fej, test, lábléc) sem szülő, sem gyermekelem, nem célozhat meg egy adott oszlopot egy szakaszon belül.
    • Ráadásul a táblázatok és a táblázatsorok pontosabbak, mint az elem, tehát a szakaszokra alkalmazott stílusok felülbírálják a

    Ezen kérdések miatt korlátozottan használható az asztali stílus kialakításához.

    Ehhez két közös megoldás létezik: osztályattribútumok és n. Gyermek választók.

    Osztályattribútumok használatához egyszerűen alkalmazza az oszlop-specifikus osztályokat mindegyikre (és / vagy) elem.

    class ="col1">Keresztnév class ="col2">Vezetéknév class ="Col3">Kor class ="col1">János class ="col2">Kovács class ="Col3">31 class ="col1">Jane class ="col2">fehér class ="Col3">32 class ="col1">bársony class ="col2">Jones class ="Col3">41 class ="col1"> class ="col2">Átlagos életkor class ="Col3">34.67

    Természetesen ez rengeteg jelölést eredményez, amelyre szigorúan nincs szükség. Jobb módszer az első gyermek, az n. Gyermek és az utolsó gyermek CSS választók használata.

    Például mi lenne, ha azt szeretnénk, ha az Első név oszlop félkövér lenne, és az életkorok piros, monospace betűtípusban jelennének meg - a többi fejléc és lábléc stílus mellett?

    thead { háttér szín: fekete; fehér szín; betűsúly: félkövér; } tbody tr: n. gyermek (furcsa) { háttér szín: #eee; } tbody tr: n. gyermek (akár) { background-color: #fff; } láb { háttér szín: # 222222; fehér szín; betűtípus: dőlt; } td: első gyermek { betűsúly: félkövér; } td: utolsó gyermek { font-család: monospace; piros szín; Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41
    Átlagos életkor 34.67

    # pseudocolumns-example thead {
    háttér szín: fekete;
    fehér szín;
    betűsúly: félkövér;
    }
    # álszeres oszlopok - példa t: tr: n. gyermek (páratlan) {
    háttér szín: #eee;
    }
    # álszeres oszlopok - példa t: tr: n. gyermek (páros) {
    background-color: #fff;
    }

    # pseudocolumns-example tfoot {
    háttér szín: # 222222;
    fehér szín;
    betűtípus: dőlt;
    }

    # pseudocolumns-példa td: első gyermek {
    betűsúly: félkövér;
    }

    # pseudocolumns-példa td: last-child {
    font-család: monospace;
    szín: # a20000;
    }

    # pseudocolumns-példa tfoot td: last-child {
    szín: # ff3e3e;
    }

    Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41
    Átlagos életkor 34.67
    A rács feltörése: sor- és oldalsáv

    A táblázatos adatok néha nem illenek megfelelően a táblázat által létrehozott rácshoz. Ha táblás cellára van szüksége két vagy több oszlop átfedéséhez, használja a colspan attribútumot. Ha egynél több sort kell meghúznia, használja a sortávot.

    Például az életkor-táblázatunk lábléc-sorral rendelkezik, amelyen fel van tüntetve az „Átlagos életkor” címke. Ezt nem kell a második oszlopba berakni. Sokkal jobb lenne, ha a címke az utolsó oszlop első két celláját lefedi.

    colspan ="2"> Átlagos életkor: 34.67

    # colspan-example thead {
    háttér szín: fekete;
    fehér szín;
    betűsúly: félkövér;
    }
    # colspan-example tbody tr: n. gyermek (páratlan) {
    háttér szín: #eee;
    }
    # colspan-example tbody tr: n. gyermek (akár) {
    background-color: #fff;
    }

    # colspan-example tfoot {
    háttér szín: # 222222;
    fehér szín;
    betűtípus: dőlt;
    }

    Keresztnév Vezetéknév Kor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41
    Átlagos életkor 34.67

    Hasonló szintaxist lehet használni két sor átfedésére. (Nos, hozzá kell hozzá egy oszlopot, mert nincs jó jelöltünk a cellák összeolvadására.)

    Keresztnév Vezetéknév Kor kohort rowspan ="2">Oregon Trail Generation colspan ="2">Átlagos életkor
    János Kovács 31
    Jane fehér 32
    bársony Jones 41 X generáció
    34.67

    # rowspan-example thead {
    háttér szín: fekete;
    fehér szín;
    betűsúly: félkövér;
    }
    # sorhossz-példa t-tr: n-edik gyermek (páratlan) {
    háttér szín: #eee;
    }
    # sorsáv-példa tbody tr: n. gyermek (páros) {
    background-color: #fff;
    }

    # rowspan-example tfoot {
    háttér szín: # 222222;
    fehér szín;
    betűtípus: dőlt;
    }

    Keresztnév Vezetéknév Kor kohort
    János Kovács 31 Oregon Trail Generation
    Jane fehér 32
    bársony Jones 41 X generáció
    Átlagos életkor 34.67

    Melyek a táblák??

    Ezt nem kellett igazán mondani, de:

    A táblázatok nem elrendezésre szolgálnak. A táblázatok nem használhatók kényelmes módszerként oszlopok és fejlécek készítésére egy egész dokumentum szintjén.

    Ez néha továbbra is kérdés manapság, mert a szabványalapú böngészők és a szemantikai jelölések kora előtt sokan táblázatokat használtak (sok összetett stílusszabálylal) HTML dokumentumok elrendezésére..

    Ez több okból is rossz ötlet volt: még akkor is, ha a forrásdokumentum szinte olvashatatlanná vált, a szemantikát teljesen megszakította, majdnem lehetetlenné tette az oldal újratelepítését anélkül, hogy mindegyikét újraírná..

    Ma van egy új oka ennek elkerülésére - az az oka, amely mindenkit ütközik: nem működik mobiltelefonon. Az asztali elrendezés egyértelműen nem reagál, és nem képes gradiensen méretezni a különféle képernyőméretekhez.

    Mindezek mellett - a helyes cselekedethez képest az asztallapú elrendezés sokkal nehezebb. Csak ne csináld.

    Table Edge Case - fordítások egymás mellett

    Az egyik nem adattáblázat-használat a tábláknál, amely meglehetősen gyakori, a fordítás egymás mellett. Fontolja meg a Dantes The Divine Comedy következő részletét.

    # inferno-nyitó {
    határ: nincs;
    szegélytávolság: 10 képpont;
    }

    Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    chéa la diritta via smarrita.
    Középen az életünk útján
    Egy erdőben találtam magam sötétben,
    Mert az egyértelmű út elveszett.
    Ahi quanto a dir minőségi korszak osa cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    Ó, nekem! milyen nehéz dolog ezt mondani
    Mi volt az erdei vad, durva és szigorú,
    Ami önmagában megújítja a félelmet.
    Tant ma amara che poco à pi morte;
    ma trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    Tehát keserű, a halál alig több;
    De a kezelt jó, amit ott találtam,
    A többi dologról, amit ott láttam, beszélni fogok.

    Ez természetesen csak egy kis stílusú asztal:

    # inferno-nyitó { határ: nincs; szegélytávolság: 10 képpont; } id ="Inferno-nyitó"> Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    chéa la diritta via smarrita.
    Középen az életünk útján
    Egy erdőben találtam magam sötétben,
    Mert az egyértelmű út elveszett.
    Ahi quanto a dir minőségi korszak osa cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    Ó, nekem! milyen nehéz dolog ezt mondani
    Mi volt az erdei vad, durva és szigorú,
    Ami önmagában megújítja a félelmet.
    Tant ma amara che poco à pi morte;
    ma trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    Tehát keserű, a halál alig több;
    De a kezelt jó, amit ott találtam,
    A többi dologról, amit ott láttam, beszélni fogok.

    A táblázatok használatának előnye ebben a példában az, hogy minden sor automatikusan beállítja a magasságát a sor összes cellájának tartalma alapján. Ez megtartja a lefordított tartalmat a forrás mellett, még akkor is, ha az egyik nyelv sokkal pontosabb, mint a másik.

    Sok fejlesztő ezt a mintát használja a lefordított szöveghez, és ez tökéletesen tökéletes. Lehet, hogy van egy jobb mód is.

    Vegye figyelembe a következő HTML-t:

    id ="canto-1"> class ="olasz"> id ="it-1" class ="p1"> Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    chéa la diritta via smarrita.
    id ="it-2" class ="p2"> Ahi quanto a dir minőségi korszak osa cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    id ="it-3" class ="p3"> Tant ma amara che poco à pi morte;
    ma trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    class ="angol"> id ="en-1" class ="p1"> Középen az életünk útján
    Egy erdőben találtam magam sötétben,
    Mert az egyértelmű út elveszett.
    id ="en-2" class ="p2"> Ó, nekem! milyen nehéz dolog ezt mondani
    Mi volt az erdei vad, durva és szigorú,
    Ami önmagában megújítja a félelmet.
    id ="en-3" class ="p3"> Tehát keserű, a halál alig több;
    De a kezelt jó, amit ott találtam,
    A többi dologról, amit ott láttam, beszélni fogok.

    Ha a CSS segítségével a két nyelvet egymás mellé úsztatjuk, és a JS segítségével biztosítjuk, hogy az egyes bekezdések (en-1 és it-2 stb.) Azonos magasságúak, ugyanazt a hatást lehet létrehozni anélkül, hogy a táblázat- alapú elrendezés.

    Előnyök:

    • Előfordulhat, hogy egyes képernyők nem elég szélesek ahhoz, hogy mindkét szöveg oszlopát egymáshoz illeszkedjenek. Ezzel a megközelítéssel az egyik vagy a másik külön-külön megnézhető.
    • Ez lehetővé teszi egy szöveg több bekezdésének kiválasztását a másolás és beillesztés céljából. Táblázat-alapú verzió esetén ez nem lehetséges.

    hátrányok:

    • JavaScript szükséges
    • Minden bekezdést azonosítással kell ellátni a jelölésben.

    Asztalok a való világban

    Az asztalok alapértelmezett stílusai valóban nem vonzóak, ezért ritkán használnak. A legtöbb előtér felhasználói felület (mint például a Bootstrap és a Skeleton) rendkívül javított alapértelmezett asztali stílusú.

    Még ha előlapi felhasználói felületet sem használ, jó ötlet lehet, ha az asztalok stílusait bevezeti az egyik könnyű, moduláris keretből. A táblázatoknak sok furcsa stílusél van, amelyeket valószínűleg nem fogsz lefedni, ha megpróbálsz magadnak megjavítani a stílust..

    Az asztalok erőteljesek

    A táblák valószínűleg a HTML legbonyolultabb jelölő struktúrája, és a múltban visszaéltek azzal a céllal, hogy konténerként szolgáljanak az elrendezéshez. Ha azonban táblázatos adatokat kell megjeleníteni egy oldalon, akkor a táblázatokat kell megtenni.

    HTML űrlapok

    Ez a szakasz részletesen leírja a HTML űrlapokat. Mindenféle űrlapelem és felhasználói beviteli felület lefedésre kerül, valamint az űrlapok rendezéséhez és kialakításához szükséges tippek.

    A forma alapjai

    A HTML űrlap olyan felhasználói felület elemek összessége, amelyek lehetővé teszik a felhasználó számára adatok szolgáltatását, valamint az adatok kiszolgálóra történő továbbításának mechanizmusa.

    Egy nagyon egyszerű példa a következőnek néz ki:

    Még ebben az egyszerű formában is láthatjuk, hogy a felhasználó adatot (kereszt- és utónév) adhat meg, és ezeket az adatokat kiszolgálóra küldheti..

    A űrlapok nagyon bonyolulttá válhatnak, és a HTML5-nek köszönhetően sok érdekes beviteli típus létezik, de bármennyire is bonyolultak, a HTML űrlap lényege megegyezik: a felhasználói beviteli elemek sorozata és a bemenet a szerverre.

    Hogyan működik egy forma

    Mielőtt elmész az összes felhasználói felület elemében, érdemes egyértelműen megérteni, hogy az űrlap hogyan működik, amikor felhasználói adatokat küld a kiszolgálóra.

    Az űrlap létrehoz egy HTTP-kérést - ugyanolyan típusú kérést, amelyet a böngésző küld egy oldal betöltésekor. A kérelem tartalmát az űrlapba bevitt értékek határozzák meg. A szerver által adott válasz alapvetően megegyezik az oldal betöltésekor kapott válasz típusával - és a böngésző ugyanúgy reagál, új válaszként betöltve a választ..

    Más szavakkal: az űrlap benyújtása lényegében megegyezik egy új oldal kérésével, azzal a különbséggel, hogy a kérelem az űrlap bemenetek útján szolgáltatott felhasználó által megadott adatokat hordozza..

    Ami a kért adatokkal történik, a kiszolgálóoldali szkriptek (PHP, Ruby stb.) Tárgyát képezi, ezért nem kell aggódnunk.

    HTTP kérések és űrlap-módszerek

    Az űrlapok kétféle típusú kérést küldhetnek:

    • POST
    • KAP

    Ez a két kéréstípus eltérő jelentéssel bír, amelyek miatt eltérően viselkednek, és ezért különféle helyzetekben kell őket felhasználni.

    __A szemantikai különbség a POST és a GET között

    A GET az alapértelmezett HTTP kérés, és ugyanaz a kérés, amelyet a böngésző használ, amikor címet gépel be a címsorba. Ez egy kérés, hogy valamit megszerezzenek.

    A POST nem valami megkeresése, hanem valami küldésének vagy benyújtásának kérése. Gondolhat egy levél, óvadék vagy egy aláírás feladására.

    A műszaki különbség

    GET kérés használatakor a bemeneti paraméterek szerepelnek az URL-ben.

    http://example.com/search?term=thing+i+am+searaching+for

    POST kérés esetén a bemeneti paramétereket nem tartalmazza az URL, hanem inkább a kérés törzsében küldik el.

    A különbség az egyes típusú kérelmek jelentése alapján ésszerű:

    • A GET-kérelem egy speciális erőforrást kér, amelyet az URL határoz meg. Ezért a kérés részleteit fel kell tüntetni az URL-ben, mivel ezek az adatok meghatározzák, hogy milyen erőforrást kér a kérelem.
    • A POST kérés üzenetet küld egy adott címre. A címet az URL határozza meg, az üzenetet pedig a kérés törzsében.
    Mikor kell használni a POST-ot és a GET-et az űrlapokban

    Ha egy űrlapot használnak adatok és információk - például keresési űrlap - kérésére, és nem elsősorban tartalom hozzáadására vagy szerkesztésére irányul, akkor valószínűleg a legjobb a GETrequest használata..

    Egyéb indikációk A GET a megfelelő választás:

    • Két különböző felhasználónak, aki ugyanazokat az adatokat adja meg az űrlaphoz, azonos válaszokat kell kapnia.
    • Az űrlapból származó válasz olyasmi, amelyet közvetlenül össze szeretne kapcsolni.
    • A forgalom és a tevékenység naplózása mellett az adatbázis ugyanolyan az űrlap benyújtása után, mint korábban.
    • Az űrlap egy keresési űrlap.
    • A felhasználó az űrlapot használja annak érdekében, hogy információt szerezzen az Ön webhelyéről, és ne az, hogy információt szolgáltasson az Ön számára.

    Ha egy űrlapot használnak információk benyújtására, akkor valószínűleg a POST a megfelelő választás.

    Egyéb jelek arra, hogy a POST a helyes választás:

    • Nagyon valószínűtlen, hogy két különböző felhasználó nyújtana be azonos információkat.
    • Nagyon valószínűtlen, hogy egyetlen felhasználó ugyanazt az információt többször is benyújtja.
    • Az űrlapot arra használják, hogy információkat továbbítsanak a webhelyre, és ne információkat szerezzenek belőlük.
    • A közvetlenül a válaszoldalra történő hivatkozás értelmetlen lenne.
    • Az adatbázis az űrlap benyújtása után más, mint korábban.

    Ezenkívül két oka van annak, hogy a POST-ot kell használni, még akkor is, ha a GET-igény más okokból ésszerűbb:

    • Biztonsági okokból célszerű, ha a bemeneti paramétereket nem helyezi az URL-be.
    • A GET kérést tartalmazó URL hossza meghaladja a 2000 karaktert.
    Hol határozható meg a POST vagy a GET

    Minden űrlap információkat küld a kiszolgálónak a GET vagy a POST kérés típusával. Ezt a metódus attribútum határozza meg az elemben.

    módszer ="KAP"> módszer ="POST">

    Az alapértelmezett módszer a GET, ami a GET sok szerencsétlen használatához vezetett, amikor a POST lett volna a megfelelő választás. Ne hagyatkozzon az alapértelmezettre - használja a helyzetének megfelelő módszert.

    Űrlapművelet - a kért URL

    Az űrlap vagy erőforrást kap (egy URL-t határoz meg), vagy információkat küld egy erőforráshoz (egy URL-t határoz meg).

    Az erőforrás URL-jét az action attribútum határozza meg egy formában.

    action ="search.php" módszer ="KAP"> action ="edit-post.php" módszer ="POST">

    A href és az src attribútumokhoz hasonlóan az URL relatív is lehet (action ="search.php") vagy abszolút (akció ="http://example.com/search.php").

    Ha a művelet attribútumot kihagyja, akkor az alapértelmezett URL az aktuális oldal. (Ez normál körülmények között továbbra is elindítja az oldal újratöltését.

    Egyéb jellemzői

    A következő attribútumok vonatkoznak az elemre:

    • accept-charset - meghatározza az űrlapadatok benyújtásához használt karakterkészletet. Az alapértelmezett érték megegyezik a dokumentumok karakterkészletével, így általában nincs rá szükség.
    • művelet - Az űrlap benyújtásának cél URL-je. A fenti magyarázat.
    • automatikus kiegészítés - engedélyezi az automatikus kiegészítést a támogatott böngészőkben. Az értékek be vagy ki vannak kapcsolva. Az alapértelmezett érték be van kapcsolva. Ezt a beállítást az egyes űrlapelemeken felül lehet felülírni.
    • enctype - Megadja, hogy az űrlapadatokat hogyan kell kódolni. Ez csak a POST űrlapokra vonatkozik. Értékek:
      • application / x-www-form-urlencoded - Az összes karakter kódolásra kerül, mielőtt elküldenék. A szóközöket + szimbólumokká konvertálják, a speciális karaktereket pedig ASCII HEX értékekké konvertálják. Ez az alapértelmezés.
      • multipart / form-data - A karakterek nem vannak kódolva. Erre akkor van szükség, ha fájlfeltöltőt használ az űrlapon.
      • szöveg / sima - A szóközöket átalakítják + szimbólumokká, de a speciális karakterek nem vannak kódolva.
    • módszer - GET vagy POST
    • név - az űrlap neve. Általában jó ötlet, ha beletartozik, és ennek okán nem lehet ugyanaz, mint az azonosító.
    • novalidate - Megadja, hogy az űrlapadatokat nem kell automatikusan érvényesíteni a benyújtásukkor. Ez az attribútum nem fogad el értéket. (Legyen óvatos ezzel.)
    • cél - megegyezik a horgonykapcsolatok céltulajdonságával (), ez az attribútum meghatározza, hogy az űrlapból adott válasz hol jelenjen meg.
      • _elf - megnyitja a választ ugyanabban az ablakban. Ez az alapértelmezés.
      • _blank - A választ új ablakban vagy lapon nyitja meg.
      • _parent - megnyitja a választ az űrlapok szülő ablakában vagy keretében.
      • _top - megnyitja a választ az ablak teljes részében.
      • framename - Megadhatja annak a keretnek a nevét is, amelybe megnyílik a válasz, ha korábban már megnyitotta és elnevezte a keretet az oldalon.

    Az űrlapelemek használata

    Elem nevek

    Amikor egy űrlapot eljuttatnak a szerverhez, a kérés - legyen az POST vagy GET - tartalmazza a felhasználó által az űrlapon megadott adatokat. Ezeket az adatokat kulcs-érték párok formájában küldik el.

    Az egyes űrlapelemek értéke a felhasználó által bevitt adatok. Az egyes elemek kulcsa az elem névattribútuma. Ezért kritikus, hogy az űrlapod minden adatbeviteli elemének egyedi névattribútummal rendelkezzen.

    action ="" módszer ="posta"> a ="keresztnév">Keresztnév type ="szöveg" name ="keresztnév" id ="keresztnév"> a ="keresztnév">Vezetéknév type ="szöveg" name ="vezetéknév" id ="vezetéknév"> type ="Beküldés">
    Elem címkék

    Az elem nagyon fontos, mivel meghatározza minden formaelem címkét.

    Egyes tervezők nem szeretik az űrlapcímkék használatát, mert inkább a címkék szövegét helyezik a bemeneti elembe.

    action =„” módszer ="Post"> type ="szöveg" name ="keresztnév" helykitöltő ="Keresztnév"> type ="szöveg" name ="vezetéknév" helykitöltő ="Vezetéknév"> type ="Beküldés">

    Noha ez jobban néz ki a dizájn szempontjából, ezek két komoly használhatósági probléma:

    • A címkéket a képernyőolvasók használják, hogy elmondják a vak felhasználóknak, hogy mi a mező.
    • Nem minden böngésző támogatja a „helyőrző” attribútumot.

    Megfelelő címkézés nélkül annak kockázata lehet, hogy egyes felhasználók nem tudják kitölteni az űrlapot.

    Sajnos szintén túl gyakori, hogy az emberek bevonják a elem, de nem használja helyesen.

    A címke elem megfelelő működéséhez a mert az attribútumnak tartalmaznia kell a id tulajdonság a bemeneti elemnél.

     a ="keresztnév">Keresztnév
     type ="szöveg" name ="keresztnév" id ="keresztnév">

    Ennek két célja van:

    • Annak ellenőrzése, hogy a jelölés meghatározza, mely elemre vonatkozik a címke – elősegíti, hogy a képernyőolvasók összekapcsolják a címkéket a bemeneti elemekkel, hogy a vak felhasználók jobban tájékozódhassanak az űrlapon..
    • A címkére kattintva úgy viselkedik, mintha rákattintana a bemeneti elemre. Ez nagymértékben javítja a használhatóságot, különösen a kattintással váltható elemeknél, például a jelölőnégyzeteknél és a választógomboknál.

    Amellett, hogy a mert attribútummal, a címkét egy bemenethez lehet kötni, ha a bemenetet beilleszti a elem.

    
    
    Szín

    Piros

    Kék

    Zöld

    Alapértelmezett értékek beállítása

    Az érték az attribútum megfelel az űrlap-beviteli elem aktuális értékének. Az érték bevonásával érték, bármilyen űrlapelemhez beállíthat egy alapértelmezett (kezdő) állapotot.

     action =„” módszer ="Post">
     a ="keresztnév">Keresztnév
     type ="szöveg" name ="keresztnév" id ="keresztnév"érték="János">
     a ="vezetéknév">Vezetéknév
     type ="szöveg" name ="vezetéknév" id ="vezetéknév" value ="Kovács">
     type ="Beküldés">
    

    Egyes fejlesztőknek kísértésük van a érték attribútum, mint egy helyőrző vagy felhasználói tippeket tartalmazó szöveg biztosítási módja. Ez általában rossz ötlet, mert ha az értéket nem cserélik ki, akkor a helyőrző szöveget elküldik a kiszolgálóra, amely szinte soha nem a kívánt művelet.

    A fenti példában (egy személy neve) rossz ötlet lenne, ha a “John Smith” értékeket csak helyőrzőként vagy utalásként használnánk a felhasználóra – a felhasználó elküldheti ezt a szervernek. Ha ez volt (például) egy profiloldal, ahol a felhasználók frissíthetik saját adataikat vagy hagyja ugyanazt, akkor az érték ilyen módon történő használata értelmes.

    Ha a felhasználó megváltoztatja az űrlapelem bemeneti adatait, akkor a érték attribútum változások is. Ha a JavaScriptet használja az elemek értékének megszerzéséhez, akkor a frissített értékre, nem pedig a dokumentumforrás eredeti értékére vonatkozna..

    Az elemek letiltása

    A legtöbb elem letiltható a Tiltva attribútum nekik. A letiltott elemekre nem lehet kattintani vagy szerkeszteni.

     action =„” módszer ="Post">
     a ="keresztnév">Keresztnév
     type ="szöveg" name ="keresztnév" value ="János" id ="keresztnév">
     a ="vezetéknév">Vezetéknév
     type ="szöveg" name ="vezetéknév" value ="Kovács" id ="vezetéknév" Tiltva>
     type ="Beküldés">
    

    A letiltott elemek nem küldnek értéket az űrlap beküldésekor, ezért vigyázzon, ha ezzel használja a (például) profil adatok megjelenítését, amelyeket nem akarja, hogy a felhasználó megváltoztassa.

    Az elem

    A legfontosabb és sokoldalúbb formaelem . A legtöbb más formaelemmel ellentétben, amelyeknek van egy funkciója, a Az elem sokféle funkcióhoz használható, az egyszerű szövegetől a komplex interakcióig a gombokig (az űrlapon a benyújtási gomb általában egy elem).

    A bemeneti vezérlők különféle típusait a típus attribútum a elem.

    Típus: Szöveg

    A legalapvetőbb (és alapértelmezett) bemeneti típus a szöveg. Ez meghatározza az egysoros szövegbevitelt, amelyet felhasználnánk egy felhasználónévhez bejelentkezési formában, vagy egy lekérdezés beviteléhez a keresési űrlapon.

    type ="szöveg">

    Az lista Az attribútum megadhatja az input előre megadott értékeinek listáját.

    type ="szöveg" list ="opciók"> id ="opciók"> value ="piros"> value ="zöld"> value ="kék">
    Típus: Küldés

    A második legalapvetőbb bemeneti típus a Beküldés input, amely meghatározza az űrlapok benyújtási gombját.

     type ="Beküldés">

    Az elküldés gomb alapértelmezett szövege a „Küldés”. Ez megváltoztatható a érték tulajdonság.

    name ="keresés"> type ="Beküldés" value ="Keresés">

    Egy másik bemeneti típus hasonló GUI-t hoz létre, mint a Beküldés típus – a gomb típus. Ne használja azonban a gomb általános űrlap benyújtáshoz. (Nem fog működni.) És ne használja a Beküldés gomb az általános gombokhoz egy űrlapon belül – rosszul fog működni.

    Típus: Jelszó

    Ha el akarja takarni a szövegbevitelbe beírt karaktereket, használja a Jelszó típus.

    a ="felhasználónév">Felhasználónév
    name ="felhasználónév" type ="szöveg" id ="felhasználónév">

    a ="Jelszó">Jelszó
    type ="Jelszó" name ="Jelszó" id ="Jelszó">

    type ="Beküldés" value ="Belépés">
    Szövegbeviteli típusok érvényesítéssel

    Több bemeneti típus hozza létre ugyanazt a grafikus felhasználói felületet – egy dobozt a szöveg beírásához -, de eltérő feltételeket hoz létre a bevitel érvényesítéséhez.

    Például a email gépellenőrzés, hogy megbizonyosodjon arról, hogy a bevitt adatok megfelelnek-e a szabványos e-mail cím formátumnak (néhány szöveg, majd a @ jel, amelyet legalább egy pontot tartalmazó szöveg követ).

    Ezek a következők:

    • email
    • szám – A mező csak számokat fogad el.
    • tel – Telefonszám. (A telefonszámok érvényesítését a böngészők nem támogatják széles körben.)
    • url – Csak a jól formázott URL-eket fogadja el.

    Ezeket az értékeket az űrlap benyújtásakor érvényesítik, kivéve a novalidate az attribútumot az űrlapon vagy a formnovalidate az attribútumot az egyes elemek határozzák meg.

    Típusok dátum- vagy időválasztóval

    Több bemeneti típus előugró felhasználói felület elemeket hoz létre a dátum és / vagy az idő kiválasztásához a naptárból. Ezek a felhasználói felület elemek böngésző alapúak, és nem egyetemesen támogatottak.

    Ezek a következők:

    • dátum
    • dátum idő
    • datetime helyi
    • hónap
    • idő
    • hét
    a ="dátum">Példa a dátumbevitelre
    type ="dátum" name ="dátum" id ="dátum">

    a ="dátum idő">Példa a dátum-idő bevitelre
    type ="dátum idő" name ="dátum idő" id ="dátum idő">

    a ="Datetime-local"> Példa a helyi időpontra
    type ="Datetime-local" name ="Datetime-local" id ="Datetime-local">

    a ="hónap">Példa a hónapbevitelre
    type ="hónap" name ="hónap" id ="hónap">

    a ="idő">Példa az időbevitelre
    type ="idő" name ="idő" id ="idő">

    a ="hét">Példa a hét bevitelére
    type ="hét" name ="hét" id ="hét">

    Típus: Rádió

    A rádiógombok az űrlapbevitel egy típusa, ahol a készletben csak egy elem választható ki.

    A rádiógombok minden egyes gombja saját gombra, és nincs követelmény, hogy egy tartalmú elem gyermekeiként össze vannak kötve.

    Az a tulajdonság, amely több rádiógombot egy sorba köti, a név tulajdonság.

    type ="rádió" name ="alak" value ="négyzet"> Négyzet
    type ="rádió" name ="alak" value ="kör"> Kör
    type ="rádió" name ="alak" value ="háromszög"> Háromszög
    type ="rádió" name ="szín" value ="piros"> Piros
    type ="rádió" name ="szín" value ="kék"> Kék
    type ="rádió" name ="szín" value ="Zöld"> Zöld
    Alak



    Szín



    Mindegyiknél a kiszolgálóra beküldött érték név a érték az egyes párokhoz kiválasztott választógomb attribútuma. Bármely címkézés csak a felhasználó számára történik, és nincs hatással a kiszolgálóra átadott értékre.

    A bemenetek jelölésének legjobb módja a sugárzógombok sorozatában, ha becsomagolják a elem és a címkeszöveg a elem. Ez a címkeszöveget kattinthatóvá teszi, ami könnyebben használható.

    
    
    type ="rádió" name ="alak" value ="négyzet"> Négyzet
    type ="rádió" name ="alak" value ="kör"> Kör
    type ="rádió" name ="alak" value ="háromszög"> Háromszög
    type ="rádió" name ="szín" value ="piros"> Piros
    type ="rádió" name ="szín" value ="kék"> Kék
    type ="rádió" name ="szín" value ="Zöld"> Zöld
    Alak

    Négyzet

    Kör

    Háromszög

    Szín

    Piros

    Kék

    Zöld

    Vegye figyelembe, hogy a elem becsomagolja a elem, a mert és id attribútumok nem szükségesek.

    Típus: Jelölőnégyzet

    A jelölőnégyzet bemeneti típusa meghatározhatja a bemeneti vezérlők két típusának egyikét (amelyek mindkettő jelölőnégyzeteknek tűnik).

    Az első típus egyetlen kulcs, amelynek több értéke is lehet (néha multi-select). A második típus egy logikai (TRUE / FALSE) kulcs.

    Ugyanazon kulcshoz hozzárendelhető értékek tömbjének létrehozásához egyszerűen hozzon létre egy csoportot négyzetet bemenetek azonosak név tulajdonság.

    Színek, amiket szeretek
    type ="Checkbox" name ="szín" value ="kék"> Kék
    type ="Checkbox" name ="szín" value ="zöld"> Zöld
    type ="Checkbox" name ="szín" value ="sárga"> Sárga
    type ="Checkbox" name ="szín" value ="piros"> Piros
    Színek, amiket szeretek

    Színek

    Kék

    Zöld

    Sárga

    Piros

    Ebben a példában többszörös szín választásokat lehet tenni. Mindegyiket a kérelemben külön paraméterként küldik el a kiszolgálóra. Például, ha mindegyiket a KAP űrlapon a kért URL a következőképpen néz ki:

    http://example.com?color=blue&color=green&color=yellow&color=red

    A jelölőnégyzeteket külön-külön is felhasználhatja a logikai (TRUE / FALSE) értékek ábrázolására.

    type ="Checkbox" name ="Tos" value ="IGAZ"> Ide kattintva igazolja, hogy elfogadja Szolgáltatási feltételeinket.

    Ide kattintva igazolja, hogy elfogadja Szolgáltatási feltételeinket.

    Természetesen, bármilyen érték akkor működik, amíg a szerveroldali kód tudja, hogyan kell értelmezni az attribútum jelenlétét.

    Mindkét esetben, ha nincs bejelölve négyzet, a név A kulcs nem kerül elküldésre a kérésben.

    Például a fenti színpéldában, ha a lehetőségek egyikét sem ellenőrizték, akkor a benyújtott adatokat nem lenne tartalmazzon minden utalást a szín beviteli kulcs. (Még egy üres készlet sem.)

    Típus: Gomb

    A gomb létrehozható formában a. Beviteli típus használatával gomb. Más bemeneti típusoktól eltérően ez az űrlapon belül nem jelent konkrét jelentést, és általában csak bizonyos JavaScript műveletek kiváltására szolgál.

     type ="gomb" value ="Button Label" onclick ="riasztás ('Egy gomb vagyok!')">
    Típus: Szín

    A HTML5 újdonsága – és csak néhány böngészőben támogatott – színválasztó bemeneti típus.

    Az ezt támogató böngészőkben erre az elemre kattintva megjelenik egy GUI a szín kiválasztásához. A kiszolgálóra benyújtott érték egy HTML / CSS hexadecim érték (volt. fehér = #ffffff).

    a ="kedvenc szín">Mi a kedvenc színed?
    type ="szín" name ="kedvenc szín" id ="kedvenc szín">

    Típus: Tartomány

    A HTML5-ben is új, és a böngésző támogatásától is függ hatótávolság bemenet. Ez a bemenet csúszkaként jelenik meg, amelyet a felhasználó vízszintesen mozgathat.

    A bemeneti elemnek meg kell határoznia a tartomány legmagasabb és legalacsonyabb értékét. A felhasználó által beállított értéket az űrlappal együtt kell benyújtani.

    
    
    a ="Form-megértés">Mennyire érti a formákat??

    Egyáltalán nem.
    type ="hatótávolság" name ="Form-megértés" id ="Form-megértés" min ="0" max ="100"> Nagyon jól.

    Egyáltalán nem.

    Nagyon jól.

    Típus: Kép

    Az kép bemenet helyettesíti a Beküldés gombot, amely lehetővé teszi, hogy képet használjon gombként.

    Amellett, hogy egyszerűen megváltoztatja a gomb működését, a benyújtási kérelem magában foglalja a képen kattintó felhasználók X és Y koordinátáit is. Ez lehetővé teszi, hogy a benyújtási űrlap kiszolgáló oldali képtérképként működjön.

    type ="kép" src =„Pelda.jpg”>
    Típus: Fájl

    Az űrlap fájlfeltöltési bemeneteket tartalmazhat a fájl típus. A fájlfeltöltési grafikus felhasználói felület pontos megjelenítését és funkcionalitását a böngésző ellenőrzi. A fájlkezelést (ahol a fájl mentésre kerül) szintén meg kell határozni a szerveroldalon.

    type ="File" name ="fájlfeltöltés">

    A fájlbevitel által elfogadott fájlokat korlátozhatja a elfogad attribútum, amely lehetővé teszi a kiterjesztések vagy a MIME típusok listájának megadását.

    
    
    
    type ="File" name =„Kiterjesztés korlátozott-feltöltő” accept =".png, .gif, .jpg, .jpeg">
    type ="File" name ="Mime-korlátozott feltöltő" accept ="kép, kép / png, kép / gif, kép / jpg, kép / jpeg">

    A böngésző nem támogatja a fájlkiterjesztést, ezért valószínűleg a MIME-típusú lista a jobb út. (A részleteket lásd a MIME típusok ezen listájában.)

    Még ha a elfogad attribútummal korlátozhatja az űrlapon keresztül feltölthető fájlkiterjesztéseket, fontos ellenőrizni a fájltípust és a szerver fájltartalmát is. Legalább két okból:

    • A rosszindulatú (vagy gondatlan) felhasználó helytelen nevet adhat a rossz kiterjesztésű fájlnak. Az elfogad a fájlfeltöltő korlátozása csak a kiterjesztésre, nem pedig a tényleges fájlformátumra vonatkozik, így nincs garancia arra, hogy a fájl megfelelő típusú.
    • Lehetséges megkerülni az űrlapot, és közvetlenül a szerverhez kérést is benyújtani. (Ezért kell MINDEN bemenetet érvényesíteni a szerveren.)
    Típus: Rejtett

    Megjelölhet egy nem láthatót bemenet elem, amelynek értékét az űrlap benyújtásakor bele fogják foglalni a rejtett.

     type ="rejtett" name =„Rejtett érték” value =„”>

    A rejtett bevitel leggyakoribb értéke az oldal másutt létrehozott érték birtokosa, általában a JavaScripten keresztül. Az oldalon történő felhasználói interakció miatt értéket kell hozzárendelni a rejtett bemenetekhez, amelyeket ezután belefoglalnak az űrlap benyújtásához.

    Tulajdonságai

    Az Az elemnek számos attribútuma van. Néhányuk csak bizonyos bemeneti típusokra alkalmazható, mások bármilyen bemenethez felhasználhatók.

    • elfogad – Meghatározza a fájltípusok listáját kiterjesztés vagy MIME típus szerint. Csak együtt használható type = "file".
    • alt – egy alt szöveget határoz meg. Csak együtt használható type = "image".
    • autocomplete – Megadja, hogy a beviteli mező automatikusan kitöltse-e. Az értékek vannak tovább vagy ki. Felülírja az űrlapszintet autocomplete tulajdonság. Csak szöveges alapú bemenetekre alkalmazható.
    • autofókuszos – Megadja, hogy a fókuszban kell lennie, amikor az oldal betöltődik. Nincs szükség értékre. Csak egyszer szabad felhasználni a dokumentumban.
    • kockás – Beállítja a rádió vagy négyzetet bemenet az ellenőrzött állapotba.
    • Tiltva – Letiltja az elem. A letiltott elemek nem küldik értéküket az űrlap benyújtásakor. Nincs szükség értékre.
    • forma – Megadja a
      amelyhez a tartozik, ha a elem kívül található elem. Az érték a id a cél formájában. Ezt az attribútumot nem általánosan támogatják.
    • formaction – Megadja az URL-t, amelybe el kell küldeni az űrlapot. Felülírja a akció a
      önmagában, vagy helyettesíti. Ezt csak a Beküldés vagy kép típusok. Az egyetlen ok, hogy ezt az űrlapok helyett használja akció attribútum, ha egy űrlaphoz több benyújtási gombra van szükség különböző műveletekkel.
    • formenctype – Megadja a benyújtott adatok karakterkódolását. Felülírja a enctype a
      elem. Ezt csak a Beküldés és kép típusok. értékek:
      • application / x-www-form-urlencoded
      • multipart / form-data
      • text / plain
    • formmethod – Meghatározza a módszert (kap vagy posta) az űrlap benyújtásával. Felülírja a eljárás a
      elem. Ezt csak a Beküldés és kép típusok.
    • formnovalidate – Megadja, hogy az űrlapadatokat benyújtás előtt nem kell érvényesíteni. Felülírja a novalidate a
      elem. Ezt csak a Beküldés és kép típusok. Ez az attribútum nem igényel értéket.
    • formtarget – Megadja a böngésző környezetét, amelyben a válasz megjelenik. Felülírja a cél a
      elem. Ezt csak a Beküldés és kép típusok. értékek:
      • _üres
      • _maga
      • _szülő
      • _top
      • framename
    • magasság – Megadja az egy magasságot pixelben kép bemenet. Jobb lenne CSS-t használni ennek meghatározására.
    • lista – Megadja a id a elem, amely előre meghatározott lehetőségeket tartalmaz. Csak szöveges alapú bemeneteknél használható.
    • max – Megadja a szám vagy dátum alapú bemenet maximális értékét.
    • maxlength – Megadja a karakterek maximális számát a szöveg alapú bevitelben.
    • min – Megadja a szám vagy dátum alapú bemenet minimális értékét.
    • többszörös – Megadja, hogy a felhasználó egynél több értéket is megadhat. Használva email és fájl bemeneti típusok. Ez az attribútum nem igényel értéket.
    • név – Meghatározza a bemenet nevét. Kulcsként használható egy kulcs-érték párban, amely az űrlap benyújtásakor bemeneti formát képviseli. Egy egyedi név minden űrlapelemhez meg kell adni.
    • minta – Meghatározza a szöveg-alapú bemenet értékének érvényesítéséhez használandó szabályos kifejezést.
    • helykitöltő – Meghatározza a helyőrzőt vagy a „segítő” szöveget a szöveg alapú bevitelhez.
    • csak olvasható – Megadja, hogy a bemenetet a felhasználó nem szerkesztheti. Viselkedésében hasonló a Tiltva attribútum, kivéve az olvasható bemeneteket csinál küldjék értéküket a szervernek, amikor az űrlapot benyújtják. Gyakran használják a JavaScript segítségével annak biztosítására, hogy a felhasználó nem szerkeszthet egy értéket, amíg bizonyos feltételek nem teljesülnek, vagy nem tud értéket megadni, ha bizonyos feltételek teljesülnek. Ez az attribútum nem igényel értéket.
    • kívánt – Megadja, hogy a értékének kell lennie, különben az űrlapot nem nyújtják be. Ez az attribútum nem igényel értéket.
    • méret – Megadja a szöveg alapú bemeneti elem szélességét karakterekben. A CSS használata általában jobb módszer ennek elérésére.
    • src – Megadja a kép URL-jét kép bemenet.
    • lépés – Meghatározza az érvényes bemenetek közötti intervallumot egy szám alapú bemenetnél.
    • típus – Meghatározza a elem. Alapértelmezés: szöveg. Nem minden lehetséges érték támogatott minden böngészőben. értékek:
      • gomb
      • négyzetet
      • szín
      • dátum
      • dátum idő
      • datetime helyi
      • email
      • fájl
      • rejtett
      • kép
      • hónap
      • szám
      • Jelszó
      • rádió
      • hatótávolság
      • Visszaállítás
      • keresés
      • Beküldés
      • tel
      • szöveg
      • idő
      • url
      • hét
    • érték – Meghatározza egy bemenet kezdőértékét.
    • szélesség – Megadja az an szélességét pixelben kép bemenet. A CSS használata általában jobb módszer ennek elérésére.

    Szöveg terület

    Ha rövid, egyetlen sornyi szöveget akar beírni, használja a elem. Ha azonban hosszabb üzenethez nagyobb területre van szüksége, akkor használja a

    # textarea-example textarea {
    magasság: 6em;
    szélesség: 30em;
    }

    Az elem belsejében lévő bármely szöveg megjelenik a szövegterületen.


    a ="Msg">Az üzeneted:

    name ="Msg" id ="Msg">Ez a szöveg a textarea elem belsejében van. Ezt a felhasználó látja. Ha a felhasználó nem változtatja meg, akkor az űrlappal együtt megküldjük.

    # textarea-text-example textarea {
    magasság: 6em;
    szélesség: 30em;
    }

    Az üzeneted:

    A következő attribútumok:

    • autofókusz - Megadja, hogy az oldal fókuszában legyen-e az oldal betöltésekor. Csak egyszer használható fel egy dokumentumon. Ez az attribútum nem igényel értéket.
    • cols - Megadja a szövegterület szélességét, karakterben megadva. Ezt jobban lehet elérni a CSS-sel.
    • tiltva - letiltja a. A letiltott űrlapelemek nem küldik értéküket a szervernek az űrlap benyújtásakor. Ez az attribútum nem igényel értéket.
    • forma - Megadja az a azonosítóját, amelyhez tartozik, mert a használata nem található az elemben. Nem minden böngészőben támogatott.
    • maxlength - Megadja a karakterek maximális számát .
    • név - Meghatározza az, és a kulcsként szolgál az űrlap benyújtási kérelemben szereplő értéket képviselő kulcs-érték pár számára. Az összes űrlapelemnek egyedi nevet kell tartalmaznia.
    • helyőrző - meghatározza a helyőrzőt vagy a segítőszöveget, amelyet meg kell jeleníteni az előlapon belül, mielőtt a felhasználó beírná.
    • readonly - Megadja, hogy a bemenetet a felhasználó nem szerkesztheti. Viselkedéshez hasonlóan a letiltott attribútumhoz, kivéve az csak olvasható elemek az űrlap benyújtásakor az értéküket a szervernek. Gyakran használják a JavaScript segítségével annak biztosítására, hogy a felhasználó nem szerkeszthet egy értéket, amíg bizonyos feltételek nem teljesülnek, vagy nem tud értéket bizonyos feltételek teljesítése után. Ez az attribútum nem igényel értéket.
    • szükséges - Megadja, hogy az értéknek értéknek kell lennie, különben az űrlap nem kerül benyújtásra. Ez az attribútum nem igényel értéket.
    • sorok - Megadja a szöveg magasságát a szöveg sorában. Bizonyos esetekben ez jobb, mint a CSS használata (például amikor a tényleges vonalszám releváns), de a magasság egyszerű meghatározásához a CSS általában jobb választás.
    • wrap - Megadja, hogy a bemenetet keményen betakarja-e (vonalszakítás karaktert kell beilleszteni minden sortörésnél) vagy puha beillesztést (vonalszakítás karakter beillesztése csak abban az esetben, ha a felhasználó egy sortörést határoz meg). Az értékek lágyak vagy kemények.

    Válassza ki (legördülő menü)

    A legördülő választó meghatározásához használja az elemet gyermekelemekkel.

    a ="kedvenc szín">Mi a kedvenc színed?
    name ="kedvenc szín" id ="kedvenc szín">
    value ="piros">Piros
    value ="kék">Kék
    value ="zöld">Zöld
    value ="sárga">Sárga

    Mi a kedvenc színed?
    Piros
    Kék
    Zöld
    Sárga

    A beállítások csoportosíthatók és csoportszintű címkék adhatók az elemmel.

    a ="kedvenc szín">Mi a kedvenc színed?
    name ="kedvenc szín" id ="kedvenc szín">
    label ="Elsődleges színek">
    value ="piros">Piros
    value ="kék">Kék
    value ="sárga">Sárga

    label ="Másodlagos színek">
    value ="zöld">Zöld
    value ="narancssárga">narancssárga
    value ="lila">Lila

    label ="Nem igazán színek">
    value ="fekete">Fekete
    value ="fehér">fehér
    value ="szürke">szürke

    Mi a kedvenc színed?
    Piros
    Kék
    Sárga

    Zöld
    narancssárga
    Lila

    Fekete
    fehér
    szürke

    Az elemen belüli tartalom felhasználóbarát címkét ad, de a kiszolgálóra küldött értéket az érték attribútum határozza meg, nem az elem tartalma.

    Az elem attribútumai:

    • autofókusz - Megadja, hogy az elemnek fókuszban legyen az oldal betöltésekor. Csak egyszer használható fel egy dokumentumon. Ez az attribútum nem igényel értéket.
    • tiltva - letiltja az elemet. A letiltott elemek az űrlap benyújtásakor nem küldik el az értéket a kiszolgálónak. Ez az attribútum nem igényel értéket.
    • forma - Megadja annak az azonosítóját, amelyhez ez az elem tartozik, akkor az elem nem található az. Nem minden böngészőben támogatott.
    • multiple - Megadja, hogy a felhasználó egynél többet is kiválaszthat. A többszörös kiválasztást több kulcs-értékpárként küldi el. Ez az attribútum nem igényel értéket.
    • name - az elem neve, amely kulcsként szolgál az elemt ábrázoló kulcs-érték párban, amikor az űrlapot kiszolgálóra továbbítják.
    • szükséges - Megadja, hogy az elemnek legyen egy kiválasztott értéke, különben az űrlap nem kerül benyújtásra. Ez az attribútum nem igényel értéket.
    • méret - Megadja a látható opciók számát. Az alapértelmezett érték 1.

    Az elemek attribútuma a következő:

    • tiltva - Megadja, hogy a nem választható ki.
    • label - meghatározza az elem címkét, amely felváltja az elem tartalmát a legördülő képernyőn.
    • kiválasztva - Megadja, hogy az előzetesen kiválasztott legyen-e az oldal betöltésekor.
    • érték - meghatározza a kiszolgálóra küldött értéket.

    Űrlap szervezése

    A nagy vagy összetett forma megkönnyíthető a stílus és a használat használatával, ha az űrlapelemeket konténerekbe csoportosítja. Mindegyik megnevezhető egy elemmel.

    Személyes adat
    a ="keresztnév">Keresztnév
    name ="keresztnév" id ="keresztnév">

    a ="vezetéknév">Vezetéknév
    name ="vezetéknév" id ="vezetéknév">

    a ="születési dátum">Születési dátum
    name ="születési dátum" id ="születési dátum">

    Kedvenc dolgok
    a ="kedvenc szín">Kedvenc szín
    name ="kedvenc szín" id ="kedvenc szín">
    label ="Elsődleges színek">
    value ="piros">Piros
    value ="kék">Kék
    value ="sárga">Sárga

    label ="Másodlagos színek">
    value ="zöld">Zöld
    value ="narancssárga">narancssárga
    value ="lila">Lila

    label ="Nem igazán színek">
    value ="fekete">Fekete
    value ="fehér">fehér
    value ="szürke">szürke

    a ="favoriteShape">Kedvenc alak
    name ="favoriteShape">
    value ="háromszög">Háromszög
    value ="négyzet">Négyzet
    value ="kör">Kör

    type ="Beküldés">

    Stíluslapok

    Az űrlapelemek alapértelmezett megjelenítése a legtöbb böngészőben rendkívül vonzó. A gombok és a legördülő felhasználói felület általános „harci hajóinak szürke” mellett tipikusan súlyos problémák vannak az igazítással, a vonalmagassággal és a távolsággal.

    Ez két problémát okoz:

    • Az űrlapelemek nagy része külön-külön néz ki rosszul.
      • Például - A Rádiógombok és a Jelölőnégyzetek általában nem igazodnak megfelelően a saját címkéikhez.
    • Az űrlapelemek együtt nem néznek ki jól.
      • Például: egy elem és egy legördülő menü ugyanabban a sorban nem lesz egyenesen egymással.

    Ez nagyon frusztráló lehet.

    Néhány problémával - például a függőleges magassággal és a távolsággal - néhány népszerűbb CSS-visszaállítás foglalkozik, de nem mindegyik.

    Ha a projekt kezdetéből CSS stíluslapot készít, akkor feltétlenül hozzon létre több részletes példa űrlapot, az összes űrlapelemet különféle kombinációkban felhasználva. Különösen ügyeljen a több oszlopos formákra.

    Az űrlapformázás nehézségei miatt gyakran jó ötlet az űrlapstílusokat a népszerű előlapi keretből használni.

    HTML és CSS - rövid bevezetés

    Ez a szakasz bemutatja a web stílusstílusát - CSS - és elmagyarázza, hogyan működik együtt a HTML-sel. Bár ez nem egy teljes útmutató a témához, meglehetősen mélyreható fogalmi áttekintést nyújt a helyszín kialakításáról. A tárgyalt témák között szerepel a strukturális CSS, a „dobozmodell”, a szöveges stílus, a tipográfia, az animációk, az érzékeny kialakítás és a kezelőfelületek használata.

    Mi a CSS??

    A CSS a lépcsőzetes stíluslapokat jelenti. Ez egy olyan nyelv, amely meghatározza, hogyan kell egy HTML dokumentumot megjeleníteni egy oldalon.

    Ezt "stíluslapnak" hívják, azzal az elképzeléssel kapcsolatban, hogy egy dokumentumnak tartalmaznia kell az összes tartalmat, és csak a tartalmat, és hogy egy külön dokumentumnak vagy lapnak tartalmaznia kell információkat a stílusokról.

    Ezt úgy hívják, hogy „lépcsőzetes”, mert a szövegek „kaszkád” megjelenítésével kapcsolatos stílusok a szülőktől a gyermekelemektől kezdve. Például, ha egy bekezdés CSS-je (

    ) a szöveg színét kékre állítja, majd vastag betűvel ( ) vagy dőlt () szöveg az adott bekezdésben szintén kék színű, kivéve, ha egy új stílusnyilatkozat megváltoztatja.

    Hogyan működik a CSS - Alapvető áttekintés

    A CSS beillesztése a dokumentumba

    A CSS beilleszthető egy elem belsejébe egy dokumentumban, vagy különálló .css fájlokba (úgynevezett “stíluslapok”), amelyekhez a HTML dokumentumból hivatkozunk, a fej belsejében.

    rel ="stylesheet" type ="text / css" href ="theme.css">

    p {
    betűtípus-család: Georgia, "Times New Roman", serif;
    }

    Egy dokumentumban több stíluslapra is hivatkozhat, és egynél több címkét is tartalmazhat.

    Szinte mindig jobb gyakorlat, ha a CSS-t egy hivatkozott stíluslapon keresztül vesszük be, mint egy elem beágyazását az oldalra. Vannak olyan esetek, amikor a beágyazott stílusoknak értelme van (például e-mail), de az általános hüvelykujjszabály az, hogy - ha linkre helyezhet egy stíluslapra, akkor.

    Stílus-nyilatkozatok

    A stíluslap stílusnyilatkozatok sorozatát képezi. Ezeket a következőképpen kell megjelölni:

    [választó] {
    [attribútum]: [érték];
    [attribútum]: [érték];
    }

    / * hozzászólások itt * /

    Vagyis:

    • Kiválasztó vagy elem azonosító, amely meghatározza a stílusot. Ide tartoznak a következők (vannak még):
      • Az elem típusának neve: a, p, dl, stb. Ez a stílusokat az összes ilyen elemre vonatkozik.
      • Osztályazonosító - egy osztály neve, ponttal előtagolva (.).
      • Azonosító azonosító - egy azonosító neve, amelyet a hash (#) előtaggal csatoltak.
      • A fentiek egyike, valamint valamilyen más speciális választó, például egy álnév, például: lebeg.
    • Nyíló gömbtartó, amely jelzi az adott elemre vonatkozó stílusszabályok kezdetét.
    • Stílusszabályok, amelyek tulajdonság-érték párokban vannak kifejezve, kettőspontokkal összekapcsolva, és félig kettőspontokkal véget vetve.
    • Záró göndör zárójel, amely jelzi az elem stílusszabályának végét.

    Például:

    html {
    szín: # 222222; / * szöveges szín - nagyon sötét szürke * /
    betűtípus-család: Georgia, "Times New Roman", Garamond, serif;
    betűméret: 14 képpont;
    vonalmagasság: 22 képpont;
    }

    / * Ez egy megjegyzés. * /

    #logo {/ * stílus elem azonosító alapján * /
    szín: # B20000;
    betűtípus család: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .widget {/ * Stílus elem osztályonként. * /
    szélesség: 100%;
    szegély: szilárd 2 képpont fekete;
    párnázat: 22 képpont 11 képpont;
    }

    a {
    szín: # 008AE6;
    }

    a: lebeg {
    szín: # 006EB8;
    szövegdíszítés: aláhúzás;
    }

    A dokumentum fa

    Sokan egyszerűen csak egy HTML dokumentumra gondolnak, mint egy lineáris struktúrára: először a, majd a, aztán, majd a .

    A HTML dokumentum azonban valójában egy fa:

    • HTML
      • Fej
      • Cím
      • meta
      • Test
      • Fejléc
        • H1
        • nav
        • p
          • egy
          • egy
          • erős
        • ol
          • li
          • li
          • li
            • egy
      • Félre
        • szakasz
        • szakasz
        • szakasz
      • Lábjegyzet

    Minden elem be van ágyazva egy másik elembe.

    A CSS-ben néhány stílusnyilatkozat befolyásolja magának az elemnek a méretét vagy alakját. Ennek nincs hatása a benne lévő elemekre.

    De más stílusok befolyásolják az elem tartalmát - olyan stílusok, mint a szöveg színe, háttér színe, betűméret, térköz. Ezeknek a stílusoknak azt mondják, hogy "lépcsőzetes" a dokumentumfán. Az összes tartalmat, beleértve az egyéb elemeket is, ez érinti, kivéve ha egy másik stílusnyilatkozat felülbírálja azt egy konkrétabb ponton.

    Vegyük figyelembe a következő példát:

    href ="">Horgony a fejlécben

    href ="">

    `A fejléc egy horgony belsejében

    a {
    szín: kék;
    }

    h1 {
    szín: zöld;
    }

    Melyik kék és melyik zöld lesz?

    Ebben az esetben az első sor (a fejlécben levő horgony) kék, a másik zöld színű lesz.

    Miért?

    Az első példában a

    a stílus zöld, tehát minden benne zöldnek kell lennie. De aztán ott van egy horgony, amely a kék szöveget stílusolja. A horgony konkrétabb - közelebb a formázandó szöveghez - tehát a kék stílus érvényesül.

    A második példában ellentétes helyzet van. Az elemnek kék tartalommal kell rendelkeznie, de ezt a stílust felülírja a címsor, amely tartalmát zöldre váltja.

    CSS választók

    Minden CSS deklaráció választóval kezdődik. Ez lehet elemtípus, osztály és azonosító, vagy számos egyéb elem.

    A dokumentum szinte bármilyen elemét megcélozhatja - nemcsak osztály és azonosító alapján, hanem a dokumentumban lévő hely, a kontextus és az egyéb attribútumok alapján is.

    A választó nyilatkozatok is kombinálhatók. Például:

    #container div {
    }

    Ez az összes elemet kiválasztja, amelyek a #konténer elem belsejében vannak.

    Itt van néhány fontosabb választó és választó formátum.

    • * - Az összes elem kiválasztása.
    • element-name - Kiválasztja az adott típusú összes elemet.
    • .class-name - Elemek kiválasztása az osztály neve alapján.
    • #id - Elemek kiválasztása azonosító alapján.
    • element-name.class-name - Kiválaszt egy adott típusú elemet, amely megegyezik az osztály nevével.
    • 1. szelektor, 2. szelektor - vesszőkkel elválasztott szelektorok megegyeznek az 1. vagy 2. szelektorral jelölt összes elemmel.
    • 1. szelektor 2. szelektor - Az egyik szelektor egy másik szelektort követ, csak szóközzel, az összes, a 2. szelektornak megfelelő elemet választja ki, amelyek az 1. szelektorhoz tartozó elem belsejében vannak..
    • választás1>2. szelektor - Az összes, a 2. szelektornak megfelelő elemet kiválasztja, amelyek az 1. szelektor közvetlen gyermekei.
    • [attribútum] - A szögletes zárójelben lévő attribútumnév minden elemet kiválaszt, amely rendelkezik az attribútummal, függetlenül annak értékétől.
    • [attribútum = érték] - Kiválasztja azokat az elemeket, amelyek rendelkeznek az adott attribútum-érték párral.
    • [attribútum ~ = karakterlánc] - Kiválasztja az elemeket, amelyekben a megadott attribútumok értéke tartalmazza a megadott karakterláncot.
    • választó: első gyermek - Kiválasztja azokat az elemeket, amelyek a szülő elemek első gyermeke. Ez felhasználható fő p: első gyermekként (például) az oldal nyitó bekezdésének stílusához.
    • választó :: első betű - Kiválasztja a megfelelő elem első betűjét. Használható drop-cap effektusok létrehozására.
    • választó :: első sor - Kiválasztja a megfelelő elem első sorát.
    • input: focus - az űrlapabevitelt stílusolja, amikor fókuszban volt.
    • a: lebeg, a: aktív, a: meglátogatott - A stílusok a horgonyokat összekötik az interakciós ciklus különböző pontjain.

    Ezen kívül még sok más létezik.

    CSS és oldalszerkezet - A dobozmodell

    A CSS Box modell magyarázata annak, ahogyan a CSS megjeleníti és elhelyezi a blokk szintű elemeket.

    Mik a blokk elemek??

    A blokk szintű elemek HTML elemek, amelyek szélessége és magassága, valamint (alapértelmezés szerint) sortörés előtte és utána. Tartalmi blokkokat képviselnek. (Ez ellentétben a beépített elemekkel, amelyek a szöveg átmérőjét ábrázolják, és alapértelmezés szerint nem hoznak létre új sorokat.)

    Számos elem alapértelmezés szerint blokk szintű:

    • - Elérhetőség.
    • - A cikk tartalma.
    • - félretéve a tartalmat.
    • - Audiolejátszó.
    • - Hosszú („blokk”) idézet.
    • - Vászon rajz.
    • - Meghatározás leírása.
    • - Dokumentummegosztás.
    • - Meghatározási lista.
    • - Mezõs címke.
    • - ábra felirat.
    • - Média (általában kép) felirattal.
    • - szakasz vagy oldal lábléc.
    • - Beviteli forma.
    • ,

      ,

      ,

      ,

      ,
      - Hírek.

    • - Szekció vagy oldal fejléce.
    • - vízszintes szabály (elválasztó vonal).
    • - A dokumentum egyedi központi tartalmát tartalmazza.
    • - Navigációs linkeket tartalmaz.
    • - Használható tartalom, ha a szkriptek nem támogatottak vagy ki vannak kapcsolva.
      1. - Rendezett lista.
      2. - Űrlapkimenet.
      3. - Bekezdés.

      4. - Előzetesen formázott szöveg.
      5. - A weboldal egy része.
      6. - Asztal.
      7. - Asztalláb.
        • - Rendezetlen lista.
        • - Videó lejátszó.

        Azt is okozhatja, hogy bármely elem úgy viselkedjen, mint egy blokk szintű elem, ha hozzárendeli a stíluskijelzőt: block;.

        Szélesség és magasság

        Alapértelmezés szerint a blokk szintű elem szélessége a blokk szintű elemének 100% -a, beleértve minden margót, szegélyt vagy kitöltést. (Vagyis az egész elem, beleértve a margót, a szegélyt és a párnázatot, belefér a tartályba.)

        A blokk szintű elem alapértelmezett magassága az összes tartalom magassága, plusz minden margó, szegély vagy padding.

        Az oldal elrendezésének megtervezésében általában az elemek szélességét, de a magasságát nem kell megadni. Ennek oka az, hogy a kijelzőablak szélessége rögzített méretű bármelyik képernyőn, de az oldal felfelé és lefelé görgethető bármely magasság mentén.

        Furcsa dolog a szélesség (és a magasság meghatározásakor, de ezt nem kell gyakran tenni) az, hogy a megadott szélesség nem lesz az elem teljes szélessége.

        Margók, szegély és padding

        Az elem tartalmán kívül a teljes szélességet és a teljes magasságot három további attribútum határozza meg:

        • margin - Az elem körüli terület.
        • határ - egy vonal az elem kerülete körül.
        • párnázás - Hely csak az elem kerületén belül.

        Bármely háttér-nyilatkozat (például háttér, háttér szín vagy háttérkép) lefedi a tartalom területét, a párnázatot és a szegélyt. A margó nem jeleníti meg a hátteret.

        .terület {
        szélesség: 100%;
        háttér szín: # 66FF33; /* Zöldcitrom zöld*/
        }
        .belül {
        szélesség: 100 képpont;
        margin: 25 képpont;
        szegély: szaggatott, 15 képpontos fekete;
        párnázat: 25 képpont;
        háttér szín: # 90acff;
        szín: # 002346;
        betűsúly: félkövér;
        }

        class ="terület">
        class ="belül">
        Ez egy szöveg belülről. Vegye figyelembe, hogy a belső széltől el van helyezve. Ezt a bélés okozza.

        # margin-padding-border .field {
        szélesség: 100%;
        háttér szín: # 66FF33; /* Zöldcitrom zöld*/
        }
        # margin-padding-border .inside {
        szélesség: 100 képpont;
        margin: 25 képpont;
        szegély: szaggatott, 15 képpontos fekete;
        párnázat: 25 képpont;
        háttér szín: # 90acff;
        szín: # 002346;
        betűsúly: félkövér;
        }

        Ez egy szöveg belülről. Vegye figyelembe, hogy a belső széltől el van helyezve. Ezt a bélés okozza.

        Megjegyzés: A margó, a szegély és a betét hozzáadódik a CSS által deklarált szélességhez. - A magasságot a tartalom határozza meg. - A belső margó kitolja a mező bal oldalától, de ez nem igaz a felső és az alsó oldalra. Ez egy CSS ügy. A belső elemnek a tartály tetejétől való kitolásakor párnázást adna a tartóelemhez. - Az elem bal és jobb margója befolyásolja annak kapcsolatát a szülő elemmel és a testvérekkel. - Az elem felső és alsó margója csak a testvérekkel való kapcsolatát érinti. - A háttér szín kitölti a tartalom, a párnázat és a szegély területét, de a margót nem.

        Mivel a teljes szélesség magában foglalja a deklarált szélességet, valamint az esetleges margók, szegélyek és párnák szélességét, a következő deklaráció nem működik:

        div {
        szélesség: 100%;
        margó: 5 képpont;
        párnázat: 15 képpont;
        }

        Ha valami ilyesmit csinál, akkor rájössz, hogy a kiterjesztés jobb oldalán 40 képpontosra megnő.

        Ebben a példában, mivel úgy tűnik, hogy az a gondolat, hogy a konténer teljes szélességét kitölti, a helyes dolog az lenne, ha egyszerűen kihagynák a szélességi nyilatkozatot. Ennek következtében az elem automatikusan automatikusan kitölti a konténer szélességét, túlcsordulás nélkül.

        div {
        margó: 5 képpont;
        párnázat: 15 képpont;
        }

        Ha azonban olyan elemre van szüksége, amely csak a rendelkezésre álló szélesség felét veszi igénybe, annak érdekében, hogy egymás melletti oszlopok legyenek, egy kicsit másképp kell tennie.

        Lebegő elemek

        A blokk szintű elemek alapértelmezett viselkedése az, hogy kitöltsék a konténer teljes szélességét, és hozzanak létre egy sorszakadást maguk előtt és után. Ha több blokk szintű elemet helyez el egy sorozatban, akkor azok egyszerűen csak az oldalon jelennek meg, mindegyik az előző alatt:

        #container {
        szélesség: 400 képpont;
        háttér szín: #eeeeee;
        párnázat: 20 képpont;
        }
        #container div {/ * Minden olyan div-ot megcéloz, amelyek a #container gyermek elemei. * /
        magasság: 50 képpont;
        }
        #red {
        háttér szín: piros;
        }
        #blue {
        háttér szín: kék;
        }
        #zöld {
        háttér szín: zöld;
        }

        id ="tartály">
        id ="piros">
        id ="kék">
        id ="zöld">

        # div-stack .container {
        szélesség: 400 képpont;
        háttér szín: #eeeeee;
        párnázat: 20 képpont;
        }
        # div-stack .container div {
        magasság: 50 képpont;
        }
        # div-stack .red {
        háttér szín: piros;
        }
        # div-stack .blue {
        háttér szín: kék;
        }
        # div-stack .zöld {
        háttér szín: zöld;
        }

        Még ha azt is megtennénk, hogy a belső terek mindegyike elég kicsi legyen ahhoz, hogy egymás mellett ülhessenek egymás mellett, a vonalszakadás továbbra is ott lesz.

        #container {
        szélesség: 400 képpont;
        háttér szín: #eeeeee;
        párnázat: 20 képpont;
        }
        #container div {
        magasság: 50 képpont;
        szélesség: 50 képpont;
        }
        #red {
        háttér szín: piros;
        }
        #blue {
        háttér szín: kék;
        }
        #zöld {
        háttér szín: zöld;
        }

        id ="tartály">
        id ="piros">
        id ="kék">
        id ="zöld">

        # div-stack-sovány .konténer {
        szélesség: 400 képpont;
        háttér szín: #eeeeee;
        párnázat: 20 képpont;
        }
        # div-stack-sovány .container div {/ * Minden olyan div-ot megcéloz, amelyek a #container gyermek elemei. * /
        magasság: 50 képpont;
        }
        # div-stack sovány .red {
        háttér szín: piros;
        }
        # div-stack-sovány .blue {
        háttér szín: kék;
        }
        # div-stack-sovány .zöld {
        háttér szín: zöld;
        }

        Annak érdekében, hogy egymás mellett ülhessenek, meg kell engedni, hogy úszhassanak. A CSS-ben az „úszó” azt jelenti, hogy lehetővé teszi a dokumentum más elemeinek áramlását az úszó elem körül. A blokk elem balra, jobbra vagy középen lebegő lehet (a középpont szokatlan). Ha több testvér elem van beállítva, hogy lebegjen, akkor egymás mellé állnak, szélükkel elválasztva.

        Ahhoz, hogy ezt a három színes dobozba helyezett helyet egymás mellé tegyük, mindössze háromnak kell hozzáadnunk úszót: balra vagy úszót: jobbra.

        #container {
        szélesség: 400 képpont;
        háttér szín: #eeeeee;
        párnázat: 20 képpont;
        }
        #container div {
        magasság: 50 képpont;
        szélesség: 50 képpont;
        balra lebeg;
        }
        #red {
        háttér szín: piros;
        }
        #blue {
        háttér szín: kék;
        }
        #zöld {
        háttér szín: zöld;
        }

        id ="tartály">
        id ="piros">
        id ="kék">
        id ="zöld">

        # div-float .container {
        szélesség: 400 képpont;
        háttér szín: #eeeeee;
        párnázat: 20 képpont;
        }
        # div-float .container div {/ * Minden olyan div-ot megcéloz, amelyek a #container gyermek elemei. * /
        magasság: 50 képpont;
        }
        # div-float .red {
        háttér szín: piros;
        }
        # div-float .blue {
        háttér szín: kék;
        }
        # div-float .zöld {
        háttér szín: zöld;
        }

        Értesítés:

        • Az első színes blokk (#red) a tartály bal oldalán található, amelyet #blue és #green követ.
        • Nincs árrésük, tehát közvetlenül egymás mellett vannak.
        • A #konténer belsejében lévő párnázás lenyomja a blokkokat, és távol a bal felső saroktól.

        De - ó nem - mi folyik a #container elemmel? Miért lógnak ki a színes blokkok??

        Itt van a probléma az úszókkal: az úszó elem alapértelmezés szerint nem járul hozzá a tartály magasságához. Tehát a tartály magasságát az alábbiak összege határozza meg:

        • magassági nyilatkozat, ha van ilyen (ez nem rendelkezik) VAGY nem úszó tartalma, ha nem rendelkezik deklarált magassággal (ebben az esetben nem is van)
        • függőleges párnázat (felül és alul)
        • függőleges szegélyek (felül és alul)
        • függőleges margó (felül és alul)

        A #konténer elem belső magassága ebben az esetben nulla, és a teljes magasság csak kétszerese a párnázat méretének..

        Ez nagyon bosszantó és nagyon gyakori probléma. A megoldást (egy kicsit hack) Clearfix megoldásnak hívják. Számos lehetőség áll rendelkezésre ennek megvalósítására, de a példáinkhoz a legegyszerűbbet fogjuk használni, kiegészítve az automatikus túlcsordulást a #tartályba. Ez nem működik minden böngészőben vagy bármilyen kontextusban, de a legtöbb böngészőben elég jól fog működni, hogy jó legyen az itt bemutatott példákkal.

        Ez a törlés javításának eredménye.

        #container {
        szélesség: 400 képpont;
        háttér szín: #eeeeee;
        párnázat: 20 képpont;
        túlcsordulás: automatikus;
        }
        #container div {
        magasság: 50 képpont;
        szélesség: 50 képpont;
        balra lebeg;
        }
        #red {
        háttér szín: piros;
        }
        #blue {
        háttér szín: kék;
        }
        #zöld {
        háttér szín: zöld;
        }

        id ="tartály">
        id ="piros">
        id ="kék">
        id ="zöld">

        # div-float-fix .container {
        szélesség: 400 képpont;
        háttér szín: #eeeeee;
        párnázat: 20 képpont;
        }
        # div-float-fix .container div {/ * Minden olyan div-ot megcéloz, amelyek a #container gyermek elemei. * /
        magasság: 50 képpont;
        }
        # div-float-fix .red {
        háttér szín: piros;
        }
        # div-float-fix .blue {
        háttér szín: kék;
        }
        # div-float-fix .zöld {
        háttér szín: zöld;
        }

        Ha hozzátennénk néhány margót, párnázatot, tartalmat és kevésbé szokatlan színeket, akkor láthatjuk, hogyan lehet ez az alapötlet átállni egy standard tartalom + oldalsáv elrendezésére.

        #container {
        háttér szín: #eeeeee;
        túlcsordulás: automatikus;
        párnázat: 20 képpont;
        szélesség: 600 képpont;
        }

        main {
        balra lebeg;
        háttér szín: #efefef;
        szélesség: 300 képpont;
        párnázat: 15 képpont;
        jobb margó: 20 képpont;
        }

        félre {
        balra lebeg;
        háttér szín: #dedede;
        párnázat: 15 képpont;
        szélesség: 220 képpont;
        }

        id ="tartály">

        Lorem Ipsum

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, mi eu elementum ullamcorper, dui justo egestas turpis, sed auctor turpis tellus eget augue. Quisque vel malesuada erat. Vestibulum non felis et turpis iaculis iaculis.

        Arcu metais, finibus id dolor a, interdum lacinia lectus. Vestibulum vulputált neque eget ante tincidunt sodades. Quisque hatékonyság egy további, máshova nem sorolt ​​színpadon. Donec commodo, diam id következménye szóda, justo quam posuere libero, non fringilla ante dui id tortor. Sed hatékonyság az ipsum mns pellentesque-ben.

        Levéltár

        • 2015. május
        • 2015. április
        • 2015. március
        • 2015. február
        • 2015. január

        # egyszerű oldalsáv .tartály {
        háttér szín: #eeeeee;
        túlcsordulás: automatikus;
        párnázat: 20 képpont;
        szélesség: 600 képpont;
        }

        # egyszerű oldalsáv fő {
        balra lebeg;
        háttér szín: #efefef;
        szélesség: 300 képpont;
        párnázat: 15 képpont;
        jobb margó: 20 képpont;
        }

        # egyszerű oldalsáv félre {
        balra lebeg;
        háttér szín: #dedede;
        párnázat: 15 képpont;
        szélesség: 220 képpont;
        }

        Lorem Ipsum

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, mi eu elementum ullamcorper, dui justo egestas turpis, sed auctor turpis tellus eget augue. Quisque vel malesuada erat. Vestibulum non felis et turpis iaculis iaculis.

        Arcu metais, finibus id dolor a, interdum lacinia lectus. Vestibulum vulputált neque eget ante tincidunt sodades. Quisque hatékonyság egy további, máshova nem sorolt ​​színpadon. Donec commodo, diam id következménye szóda, justo quam posuere libero, non fringilla ante dui id tortor. Sed hatékonyság az ipsum mns pellentesque-ben.

        Levéltár

        • 2015. május
        • 2015. április
        • 2015. március
        • 2015. február
        • 2015. január

        #### __Extra

        s__

        A tökéletes világban a HTML-dokumentumok minden eleme szemantikailag jelentős, csak a dokumentum tartalmához kapcsolódik, és soha nem adható hozzá kizárólag a prezentációs stílusok támogatásához..

        Sajnos a való világ messze nem tökéletes. A dolgok sokkal jobbak lettek az elmúlt évtizedben, de vannak olyan idők is, amikor bármilyen okból szükségtelen idegen elemet kell hozzáadni, kivéve, ha ez az oldal megfelelő megjelenítését teszi lehetővé.

        A legtöbb blog - valószínűleg a legtöbb weboldal - tipikus mintát követ:

        • Fejléc szakasz, amely átfedi az oldal szélességét
        • A központi tartalomterület két oszlopba oszlik:
          • Az elsődleges tartalom szélességének 2/3-a
          • A widget oldalsávjának szélességének 1/3-a
        • A lábléc szakasz az oldal szélessége.

        A dokumentumszerkezet ideális jelölése a következő lenne:

        Sajnos ezeknek az elemeknek szinte nincs módja arra, hogy az elemek egymás mellett helyesen üljenek, hacsak nem képesek úszni egy tartalmazó elem belsejében..

        Ezért a tipikus blogelrendezés leggyakoribb jelölési struktúrája valójában így néz ki:

        id ="tartály">

        Gyakran előfordul, hogy hasonló tárolóelemekre van szükség az oldal megfelelő megjelenítéséhez. Ne aggódjon - az internet ugyanolyan vizuális médium, mint szöveges dokumentumok gyűjteménye.

        CSS a szövegstílushoz

        A CSS-t a dokumentum bemutatásának minden aspektusára használják, beleértve az oldalszerkezetet és a szöveg stílusát is. Lehet, hogy egy teljes könyv a CSS-ről és a tipográfiáról szól, de a fő fogalmak rövid bevezetése segít ennek az útmutatónak.

        A kaszkád

        Amikor a CSS-ben a szövegstílusra gondolunk, különösen fontos megjegyezni a Cascading stíluslapok kaszkádrészét.

        Ha olyan stílust ad hozzá, amely hatással van a tartalomra (ellentétben az elem alakjával, méretével vagy elhelyezésével), a stílus lépcsőzetesen lefut a dokumentumfán. Tehát minden stílus alkalmazható az összes tartalom befolyásolására, míg minden alkalmazott stílus befolyásolja az összes tartalmat, de nem azon kívül.

        Ennek gyakorlati jelentősége az, hogy a stíluslapját az általános és a konkrét között kell elkészítenie. Általában be kell állítania egy alapbetűt a, amely a tartalom nagy részét lefedi, majd beállítania kell az ettől eltérő betűkészleteket (például a menükhez vagy a gombokhoz) azon a ponton, ahol eltérnek.

        Minden, a tipográfiával kapcsolatos stílusnyilatkozatot fel kell tüntetni a legmegfelelőbb (a fa legmagasabb) pontján, amelyre vonatkozik. Ez segít elkerülni a stílusok másolását.

        A stílusok

        A szövegformázás és a tipográfia szempontjából a legrelevánsabbak a stílusmeghatározások:

        font-család: Meghatározza a használni kívánt betűtípust. : A legjobb gyakorlat az, ha deklaráljuk a betűkészlet listáját, kezdve a kívánt betűtípussal és a visszaesések sorozatával, kezdve egy általános betűcsaláddal. : A szóközöket tartalmazó betűtípusneveket idézőjelbe kell csomagolni. : betűtípus-család: Garamond, Georgia, "Times New Roman", serif;

        font-size: Megadja a szöveg méretét. : Lehet méret pixelben (14 képpont), tipográfiai ems alapján a szülői szöveg méretén (1em), százalékban a szülői szöveg méretén alapulva (115%), leíró méretneven (kicsi, közepes, nagy), vagy összehasonlító leírás a szülõk szövegméretének alapján (kisebb, nagyobb). : betűméret: 14 képpont;

        sor-magasság: Megadja a szöveg sorának magasságát. : Ennek általában nagyobbnak kell lennie, mint a betűméret. A szöveg sora általában a sor magasságán belül van. : A vonalmagasság pixelben, ems-ben vagy százalékban adható meg. Beállítható a betűméret szorzójának is; ezt úgy kell elvégezni, hogy elhagyjuk az egységi utótagot. : vonalmagasság: 1,4;

        alsó margó: A bekezdések, címsorok, listák és más tipográfiai elemek alatti margó hozzájárul az általános olvashatósághoz. : Ezt az attribútumot az érintett elemekre kell beállítani, nem pedig a dokumentumra vagy a szakaszra. : Általában a margó aljának a vonalmagassággal megegyező beállítása hozta a legjobb eredményt. : margin-bottom: 1.4em;

        szín: A szöveg alapértelmezett színe fekete. Érdemes lehet ezt megváltoztatni egy kevésbé markánsra. : szín: # 111111; : Ezenkívül a linkek alapértelmezett színekkel rendelkeznek, amelyek jelzik, hogy meglátogatták-e őket, és az aktív állapotot jelöli. : Általában az alapértelmezett link színe nem különösebben kívánatos. A horgonycímke különböző állapotainak színének megváltoztatásához használja: a: link (alapértelmezett), a: hover, a: látogatott és a: aktív. : a: lebeg {szín: # 3399FF; }

        font-weight: A betűsúly az a tulajdonság, amely szabályozza, hogy a szöveg vastag vagy normál legyen-e. : A specifikáció szerint numerikus érték segítségével állíthatja be a súlyt nagy pontossággal. Ezt a legtöbb betűtípus vagy böngésző nem támogatja, és ez nem is általános gyakorlat. : A betűsúly leggyakoribb használata félkövér betűk megadása. : erős {font-súly: félkövér; }

        font-style: A betűstílus a dőlt típus jelölésére szolgál. : A vonatkozó értékek normál és dőlt. (A harmadik opciót, ferde, ritkán használják.: Em {font-style: italic;}

        szövegdekoráció: Ezt egy sor hozzáadásához használják egy szövegtartományra: felül (felülhúzás - ritkán használt), átmenő (átváltás - törölt szöveghez használt) vagy alul (aláhúzás - linkekhez és néha fejlécekhez) . : a {szöveg-dekoráció: aláhúzás; }

        szöveg-átalakítás: Ez a tulajdonság lehetővé teszi a szöveg nagybetűinek ellenőrzését. : A releváns értékek: nagybetűs (címbetű), nagybetűs (ALL CAPS) és kisbetűs (minden kisbetű). : h3 {szöveg-transzformáció: nagybetűk; }

        font-variant: Ez a kisbetűk megadására szolgál. Beállítja a tartalom összes kisbetűjét nagyobb betűkkel, kisebb betűmérettel. : h1 {betűtípus-változat: kisbetűs; }

        @ font-face: Ez nem egy elemhez rendelt tulajdonság, hanem választóként működik egy CSS dokumentumban. Új betűtípuscsalád meghatározására szolgál. Ez lehetővé teszi a tervezők számára, hogy meghatározzák a kívánt betűkészletet, ahelyett, hogy az ügyfélszámítógépek rendszerbetűire támaszkodnának. : A font-család tulajdonsága meghatározza az új betűtípus nevét (amelyet más elemek betűkészlet-család tulajdonságában kell használni), az src tulajdonság pedig egy betűkészlet-fájlt. : Az összes böngésző nem támogatja a betűkészlet-formátumokat. A legszélesebb körben támogatott formátumok a TTF, OTF és WOFF (de nem a WOFF2). : Ha a betűtípus-változatok (félkövér, dőlt) külön betűkészlet-fájlokat igényelnek, több @ font-face nyilatkozatot állíthat be, mindegyik eltérő src tulajdonsággal és kontextust meghatározó kiegészítő tulajdonságokkal (például - font-weight: bold ;): @ font-face {font-család: myNewFont; src: url (myNewFont.woff;}

        Tipográfiai tippek

        Az internetes tipográfia trükkös. A legtöbb böngészőben az alapértelmezett szövegkijelzés valóban nem vonzó, és a szöveg jó megjelenése és olvashatósága nem-triviális probléma..

        Ha webhely tipográfiát tervez, tartsa szem előtt a következő tippeket.

        • Használjon olyan szöveges oldalt, amely tartalmazza az összes lehetséges tipográfiai stílust. Számos web-tipográfia-tervező elfelejti a leíró listákat (), a mondat idézőjeleket (), a címsorokat

          (

          ,

          ,
          ) és más ritkán használt stílusok. Noha ritkán használják, megszokják. Ne felejtsen el beágyazott listákat, képeket feliratokkal és anélkül, valamint kódmintákat is tartalmazni (ha technológiáról ír).
        • Vegye figyelembe, hogy az elemek margói kölcsönhatásba lépnek egymással és a környezetükkel. Például gyakori, hogy a fejlécet a címsorra helyezik. Lehet, hogy ez bizonyos kontextusokban értelmezhető, de ha az első elem egy, ez valószínűleg nem tűnik megfelelőnek. Hasonlóképpen, egy szakasz utáni szekcionált címsor a sorköz sokszorosításához vezethet, és a kívántnál több vizuális törést eredményezhet..
        • A vonalmagasság értékét használja skálaszabályként az oldalak szövegének állandó ütemben tartásához. A globális vonalmagasságnál nagyobb betűtípusok (például a címsorok) vonalmagasságának a globális érték többszöröse legyen. Az elemek alatti margóhoz és a beépített (behúzott) szakaszokhoz használja a vonalmagasság-értéket is.
        • Gyakori, hogy a bekezdéseket kettős vonal-töréssel azonosítják (a margó alját úgy kell beállítani, hogy ugyanazt az értéket adja meg, mint a vonalmagasság). Általános az is, hogy a bekezdéseket nem behúzzák.
        • A listák jobban néznek ki, ha be vannak helyezve (bal-margó) nagyjából ugyanolyan távolságban, mint a vonalmagasság (vagy annak többszörösének)..
        • A leíráslisták nagyon rossz alapértelmezett stílusúak. Általában a legjobban néznek ki, ha a teljes lista be van állítva, félkövér, és még inkább be van állítva.
        • Nagyon gyakori, hogy az oldal elsődleges betűméretét 12 képpontra állítja be, de ez nem nagyon olvasható. Fontolja meg a 14 vagy akár 16 képpont globális alapméretű betűméretet (a betűtípus-családtól függően).
        • Nagyon gyakori, hogy a betűtípust fekete (alapértelmezett) hagyja, de általában egy nagyon sötét szürke vonzóbb és olvashatóbb.
        • A linkek () alapértelmezés szerint kék színűek szinte minden böngészőben az internet kezdete óta. Még akkor is, ha meg akarja változtatni a linkek színét, hogy illeszkedjen a márkához (és meg kellene), ennek valószínűleg kék árnyalatúnak kell lennie. Ezenkívül vigyázzon a kék szöveg más helyeken történő használatára is, mivel ez jelzi a felhasználókat, hogy képesek legyenek rákattintani a szövegre.
        • Hasonlóképpen, az aláhúzott szöveg egyetemes jel, amely szerint valami kattintható. Változtassa meg ezt az egyezményt saját kockázatára.
        • Általános tanács volt a serif betűtípusok elkerülésére az interneten, és csak a sans serif betűkészleteket használták. Ez jó tanács volt, mivel a serif betűtípusok nem mutatnak olyan jól az alacsony felbontású képernyőkön. Ez azonban a legtöbb ember számára már nem jelent gondot. Egy serif betűtípus (például Georgia, Times vagy Garamond) használatával a szöveg jobban olvashatóvá válik.
        • Általában nem kell háromnál több betűtípust egy oldalon:
          • Tartalmi betűtípus, amely lehet szerif vagy sans.
          • Menü és navigációs betűkészlet, amelynek általában sans serifnek kell lennie, és ugyanolyan lehet, mint a tartalmi betűkészlet.
          • Betűkészlet a kódmintákhoz (ha ilyet csinálsz), ennek egy monospace betűtípusnak kell lennie, például Courier vagy Console.
        • A szöveg „mértéke” a karakterek száma soronként. A több mint 80 karakter hosszúság olvashatatlanná válik. A legtöbb szakértő az ideális méretet soronként kb. 65 karakterre állítja. Ez a tartalomterület szélességének és a betűkészlet méretének függvénye.
        • Ha a @ font-face eszközzel importálja saját betűkészletét egy oldalra, akkor ellenőrizze, hogy ez hogyan néz ki több böngészőben. Egyes böngészők bizonyos betűkészleteket rosszul jelenítenek meg. Szintén győződjön meg arról, hogy a tartalék betűkészleteket is tartalmazza a betűkészlet-család bevallásaiba - nem mindig számíthat arra, hogy a @ font-face minden helyzetben működik.

        CSS animáció

        A CSS lehetővé teszi a HTML elemek animálását Javascript nélkül. Az egyszerű effektusok érdekében ez nagyon kényelmes lehet. Sokkal gyorsabb, mint a Javascript által létrehozott hasonló effektusok, és támogatni fogják azokat a böngészőket is, amelyekben a Javascript le van tiltva.

        A képkockák

        Az animáció meghatározása egy @keyframes nevű CSS választóval történik. A @keyframes deklarációnak van neve és stílusszabályainak sorozata az animáció különböző pontjaira (kulcskeretek).

        @keyframes colorChange {
        tól től {
        háttér szín: piros;
        }
        nak nek {
        háttér szín: kék;
        }
        }

        A fenti példában a „colorChange” animáció miatt az elem megváltoztatja a háttér színét pirosról kékre.

        A színen túl animálható. Ha a @keyframes szabályokat használja a pozíciók beállításához, az érintett elem elmozdul az egyik helyről a másikra.

        @keyframes moveLeft {
        tól től {
        pozíció: relatív;
        balra: 100 képpont;
        nak nek {
        pozíció: relatív;
        balra: 0 képpont;
        }
        }

        A többpontos animáció meghatározható százalékos arány felhasználásával is.

        @keyframes moveAround {
        0% {
        felső: 0 képpont;
        balra: 0 képpont;
        }
        25% {
        felső: 0 képpont;
        balra: 50 képpont;
        }
        50% {
        felső: 50 képpont;
        balra: 50 képpont;
        }
        75% {
        felső: 50 képpont;
        balra: 0 képpont;
        }
        100% {
        felső: 0 képpont;
        balra: 0 képpont;
        }
        }

        Ez az animáció azt eredményezné, hogy egy animált elem mozogjon át, le, vissza, majd vissza az eredeti helyzetébe.

        Animációk hozzárendelése az elemekhez

        Az animációkat azoktól az elemektől külön határozzák meg, amelyeket befolyásolnak. Az animációkat a @keyframes deklarációkban definiáljuk, a fent bemutatottak szerint, majd az elemekre alkalmazzuk.

        Az animációkat az elemekre alkalmazzák a @keyframe névvel és az animáció időtartamával. Más attribútumok befolyásolhatják az animációt is.

        @keyframes colorChange {
        tól től {
        háttér szín: piros;
        }
        nak nek {
        háttér szín: kék;
        }
        }

        .színváltó {
        szélesség: 100 képpont;
        magasság: 100 képpont;
        animáció-név: colorChange;
        animáció időtartama: 5 s;
        }

        @keyframes colorChange {
        tól től {
        háttér szín: piros;
        }
        nak nek {
        háttér szín: kék;
        }
        }

        @ -webkit-keyframes colorChange {
        tól től {
        háttér szín: piros;
        }
        nak nek {
        háttér szín: kék;
        }
        }

        # színváltás-bemutató .színszínváltó {
        szélesség: 100 képpont;
        magasság: 100 képpont;
        animáció-név: colorChange;
        animáció időtartama: 5 s;
        -webkit-animation-name: colorChange;
        -webkit-animáció időtartama: 5 s;
        }

        Ha nem állítja be az animáció időtartamát, az animáció nem fog futni, mert az alapértelmezett érték 0.

        Számos más animációs tulajdonság is beállítható:

        • animáció-késés - megadja az animáció elindításának késleltetését. Az alapértelmezett érték 0, azaz az animáció azonnal lejátszásra kerül. Általában másodpercekben kifejezve, de milliszekundumban (ms) is megjelölhető.
        • animációs irány - Megadja, hogy az animációnak normál módon (alapértelmezés szerint), fordítva, vagy előre-hátra fordítva kell-e futnia. Az alternatív érték csak akkor működik, ha az animáció-iterációs szám nagyobb, mint 1.
        • animáció-kitöltési mód - meghatározza, hogy az animáció stílusai hogyan és hogyan befolyásolják az elemet, amikor az animáció nem fut (amikor kész vagy, vagy ha késik).
          • normál - az alapértelmezett. Az animációs stílusoknak nincs hatása az elemre, ha az elem nem játszik.
          • előre - Az utolsó kulcskép-stílus (100% -ra vagy 100% -ra, ha az animáció nem fordítottan futott) kerül az elemre.
          • visszafelé - Az első kulcskép-stílus (0-tól vagy 0% -ig, ha az animáció nem fordítottan futott) kerül az elemre.
        • animáció-iteráció-szám - Megadja, hányszor kell animációt lejátszani.
        • animáció-időzítés-funkció - meghatározza az animáció sebességgörbéjét:
          • könnyűség - Az animáció lassan indul, felgyorsul, majd lassan fejeződik be.
          • könnyű beépítés - Az animáció lassan kezdődik, felgyorsul, és teljes sebességgel fejeződik be.
          • könnyítés - Az animáció teljes sebességgel kezdődik, de a végén lelassul.
          • Lineáris - Az animáció teljes sebességgel fut az elejétől a végéig.
        Böngésző-támogatás animációkhoz

        A legtöbb nagy böngésző támogatja a CSS animációkat, ám furcsa furcsaság azokra a böngészőkre, amelyek a WebKit enegine-t nyújtják (Safari, Chrome, Opera)..

        Annak biztosítása érdekében, hogy az animációk működjenek ezen a böngészőn, a @keyframes deklarációt és az animációs hozzárendelés attribútumait másolni kell egy speciális webkit szintaxissal..

        / * Ez nem webkit böngészőkre vonatkozik. * /
        @keyframes moveLeft {
        tól től {
        pozíció: relatív;
        balra: 100 képpont;
        nak nek {
        pozíció: relatív;
        balra: 0 képpont;
        }
        }

        / * Ez a webkit böngészőkre vonatkozik: Chrome, Safari és Opera. * /
        @ -webkit-keyframes moveLeft {
        tól től {
        pozíció: relatív;
        balra: 100 képpont;
        nak nek {
        pozíció: relatív;
        balra: 0 képpont;
        }
        }

        #animationSupportDemo {
        animációs név: moveLeft;
        animáció időtartama: 4 s;
        -webkit-animation-name: moveLeft; / * Chrome, Safari és Opera. * /
        -webkit-animáció időtartama: 4 s; / * Chrome, Safari és Opera. * /
        }

        (A fenti élő példákban ezeket a további stílusokat hozzáadtuk a futó demo kódhoz, de nem a kód példákat, csak azért, hogy ez kevésbé bonyolult legyen.)

        Ez feleslegesnek és ostobanak tűnhet (mert így van), de ez az egyetlen módja annak, hogy animációi működjenek ezen a böngészőn.

        Mikor kell használni a CSS animációkat?

        Ha olyan dinamikus elemekre van szüksége, amelyek a képernyő körül repülnek, mint egy ügyességi játék, a CSS animációk nem igazán a megfelelő módja - a Javascript számára megfelelőbb.

        A CSS-animációk a legmegfelelőbbek az oldal finom fejlesztéseinek biztosításához. Néhány példa: a diagram sávjainak kitöltése - a fülek lehúzása a lebegéskor - az elemek beillesztése, amikor a felhasználó görgeti az oldalt, - a háttér színének lassú és finom változása - a „pattogó” gombok a kattintás ösztönzésére

        A CSS Animáció és a Javascript kombinálása

        A CSS animációk vagy azonnal, vagy egy meghatározott késleltetés után indulnak. Ha azonban CSS-animációt kíván indítani valamilyen esemény bekövetkezésekor, beállíthatja az animációt „szüneteltetésre” a CSS-ben, majd később szüneteltetheti a Javascript használatával. Az animáció szüneteltetése az animáció-játék-állapot attribútummal történik.

        .pausedAnimation {
        animációs név: példa;
        animáció időtartama: 5 s;
        animációs-lejátszási állapot: szüneteltetve;
        -webkit-animáció-név: példa;
        -webkit-animáció időtartama: 5 s;
        -webkit-animáció-play-state: szüneteltetve;
        }

        Az animáció-lejátszás állapotának értéke, ha szüneteltetés fut. Ez manipulálható a Javascript segítségével:

        [elem] .style.animationPlayState = "futás"

        CSS a valós világban

        A webfejlesztés és a tervezés valós világában nagyon kevés fejlesztő ül egy HTML dokumentummal és egy üres CSS fájllal, és a stílusok meghatározását megkezdi a semmiből. (Bár ez mindenképpen szórakoztató lehet.)

        Számos tipikus „bevált gyakorlat” létezik, amelyeket a CSS tervezői általában követnek, hogy munkájukat könnyebbé és következetesebbé tegyék.

        CSS visszaáll

        Minden HTML elem alapértelmezett stílusát a böngésző állítja be. Minden böngésző kissé eltér az alapértelmezett stílusoktól. Ez azt jelenti, hogy egyetlen dokumentum és egyetlen stíluslap eltérő lehet a különböző böngészőkben. (A támogatással és a kompatibilitással kapcsolatos kérdések mellett)

        A „CSS alaphelyzetbe állítása” egy stíluskészlet, amelyet be lehet helyezni egy CSS stíluslapba, mielőtt bármilyen más stílus deklarálásra kerülne. A újraküldött CSS közös alapot kínál a stílusok hozzáadásához az összes böngészőben.

        A CSS visszaállításával alapértelmezett megjelenítési stílusokat állíthatunk be azoknak a HTML5 elemeknek, amelyeknél a régebbi böngészőkben esetleg nem szerepelnek alapértelmezett megjelenítési elemek - mint például az elemek és .

        Számos közös CSS-alaphelyzet-sablon létezik. A legismertebb Eric Meyer alkotta.

        / * http://meyerweb.com/eric/tools/css/reset/
        v2.0 | 20110126
        Engedély: nincs (nyilvános)
        * /

        html, test, div, span, applet, objektum, iframe,
        h1, h2, h3, h4, h5, h6, p, blokk idézet, pre,
        a, abbr, betűszó, cím, nagy, idézet, kód,
        del, dfn, em, img, ins, kbd, q, s, samp,
        kicsi, sztrájk, erős, sub, sup, tt, var,
        b, u, i, központ,
        dl, dt, dd, ol, ul, li,
        mezőkészlet, forma, címke, jelmagyarázat,
        asztal, felirat, tbody, láb, thead, tr, th, td,
        cikk, félre, vászon, részletek, beágyaz,
        ábra, ábra, lábléc, fejléc, csoport,
        menü, navigáció, kimenet, rubin, szakasz, összefoglaló,
        idő, jel, hang, videó {
        margin: 0;
        párnázás: 0;
        határ: 0;
        betűméret: 100%;
        betűtípus: öröklés;
        függőleges igazítás: alapvonal;
        }
        / * HTML5 megjelenítési szerep visszaállítása régebbi böngészők számára * /
        cikk, félre, részletek, ábra, ábra,
        lábléc, fejléc, csoport, menü, navigáció, szakasz {
        kijelző: blokk;
        }
        test {
        vonalmagasság: 1;
        }
        ol, ul {
        lista stílus: nincs;
        }
        blokkjegyzék, q {
        idézetek: nincs;
        }
        blockquote: előtte, blockquote: után,
        q: előtte, q: után {
        tartalom: '';
        tartalom: nincs;
        }
        asztal {
        határ-összeomlás: összeomlás;
        szegélytávolság: 0;
        }

        CSS előfeldolgozók

        Képzelje el, hogy definiál egy színsort a weboldal tervezéséhez, és használni szeretné őket a CSS különböző helyein.

        Ha ugyanazt a színt alkalmazza a másodlagos címsorokra, mint amit a szerzői jogi nyilatkozatra tesz (és így tovább), akkor a színes nyilatkozatot több különböző helyre másolja..

        Mi történik, ha meg akarja változtatni??

        Mi lenne a szövegméret skálájával? Az alapértelmezett szövegméretet 12 képpontosra állította, és minden egyes címsor mérete ennek a méretnek a többszörösét jelenti, hogy egységes méretkészletet készítsen. Mi történik, ha megváltoztatja az alapértelmezett méretet?

        A CSS egy deklaratív nyelv - minden egyes tulajdonságot és értéket meg kell adni, és nincs változók, függvények vagy számítások a dolgok megkönnyítésére..

        Ugyanígy, a PHP (és más nyelvek) megkönnyíti a HTML kiadását anélkül, hogy minden oldal tartalmát meg kellene ismételni, a CSS előfeldolgozói lehetővé teszik a változók, a függvény és más programozási konstrukciók beillesztését a stíluslapokba..

        Ez megkönnyíti a színsémák, a méretarányok és az ismétlődő deklarációk egyéb típusainak meghatározását.

        A két legnépszerűbb CSS előfeldolgozó: Kevesebb - a Twitter Bootstrap által használt - Sass - a Ruby on Rails, a Jekyll és sok más Ruby-alapú fejlesztő eszköz.

        Általában a fejlesztők a stíluslapokat Less vagy Sass formátumban írják le, majd a webhely indítása előtt összeállítják azokat CSS-be. Vannak olyan ügyféloldali (böngészőn belüli) fordítók is, amelyek Javascript-ben vannak írva, de ezek sok erőforrást használnak, és általában csak a fejlesztés alatt állnak.

        Rendkívül szokatlan, hogy egy profi webfejlesztő nem használja a Less vagy a Sass szoftvert.

        Ez az útmutató nem szolgál bevezetésként ezen eszközök egyikére sem, ezért egyszerűen arra ösztönözjük Önt, hogy többet megtudjon Önnek.

        Reszponzív dizájn

        Volt egy idő, amikor biztos lehetsz abban, hogy tudod, hogy milyen típusú képernyőn jelennek meg a webhely látogatói az Ön oldalán: egy asztali monitor egy maroknyi alapértelmezett méretben.

        Azok a napok már rég elmúltak.

        A felhasználók az Ön webhelyét számos eszköz és képernyőméret közül megnézhetik: mobiltelefon, mini tabletta, táblagép, laptop, asztali számítógép, televízió.

        Szinte lehetetlen egyedileg megcélozni ezeket a különféle méretű képernyőket, és ezeket nem szabad figyelmen kívül hagyni.

        Gondolhatja, hogy a demográfiai webhelyeit valószínűleg egy asztali számítógéppel látja meg, de ez valószínűleg nem igaz minden helyzetben. Az internetes forgalom több mint 60% -a mobil eszközökből származik. Ha rossz webhely-élményt nyújtó webhelyet fog károsítani vállalkozása számára.

        Sőt, a Google megváltoztatta a keresési eredményeit annak alapján, hogy a webhelyeket optimalizálták-e a mobil eszközökhöz. Egyre inkább, ha nem néz ki jól a mobiltelefonon, senki sem fog látni.

        A probléma megoldása a Responsive Design.

        A reagáló formatervezés a webhelytervezés - filozófia - megközelítése, nem eszköz vagy program. Ez az oldalmegjelölés és a CSS strukturálásának egyik módja, hogy az oldalelemek megfelelően konfigurálódjanak a különféle méretű ablakokban.

        A rugalmas webdesign három pillére:

        Folyékony rácsok: A folyékony rácsok az oldalrácsok százalékos, nem abszolút pixelek szerinti elosztását jelentik. Lehet, hogy van például egy fő tartalomoszlop, amely a képernyő 70% -át fedi le, és egy oldalsáv oszlop, amely 30% -ot tesz ki. A képernyő méretének növekedésével vagy csökkentésével a rács tágul vagy zsugorodik.

        Folyékony képek: A képek soha nem lehetnek szélesebbek, mint a képernyő, amelyen jelennek meg, azaz soha nem szabad szélesebbek lenni, mint a rács elem. A legegyszerűbb megoldás erre az, ha a képek maximális szélességét 100% -ra állítja. img {maximális szélesség: 100%; }

        Média lekérdezések: A média lekérdezések egy kicsit összetettebbek. Lehetővé teszik a CSS-nek, hogy meghatározott képernyőtípusokat és méreteket célozzon meg, és olyan szabályokat deklarál, amelyek csak bizonyos körülmények között érvényesek. A média lekérdezések segítségével a fő tartalom és az oldalsáv egymás mellett jelenhet meg a nagyobb képernyőkön, és egymás fölé rakhatja egymást a kisebb képernyőkön. A médialekérdezések felhasználhatók bizonyos elemek elrejtésére vagy megjelenítésére is, amelyek többé-kevésbé hasznosak lennének a különböző összefüggésekben, valamint megváltoztathatják például a betűméretet, vagy akár különböző képeket kicserélhetnek..

        A reagáló webdesign egyszerű koncepciókon alapszik, de a tényleges megvalósítása - megkísérelni helyrehozni oly sok különböző kontextusban, különböző képernyőméretekkel, eszköztípusokkal és böngészőkkel - valójában nagyon bonyolult és nehéz..

        Ezen okból és más okokból sok manapság dolgozó tervező nem próbálja meg ezeket a problémákat magukkal megoldani, hanem úgy dönt, hogy egy előtér keretét használja.

        Kezelőfelületek

        Sok dologra kell gondolni, amikor a CSS-t egy webhelytervezésre kódolják, és ez a rövid bevezetés csak egy kevés rá.

        • Reagáló rácsszerkezet bevezetése minden böngészőbe és eszközbe.
        • Megfelelő nyomathordozó-lekérdezések megtervezése és az optimális képernyőszélesség-pont meghatározása.
        • Szép és könnyen olvasható tipográfia.
        • Az űrlapok készítése még mérsékelten tisztességesnek tűnik, nem is beszélve szépről és felhasználóbarátról.
        • Stílusstáblák, amelyek úgy néznek ki, mintha 1997-től nincsenek.
        • Kecses rombolás az idősebb böngészőknél.
        • Ne feledje, hogy a -webkit szolgáltatásokhoz duplikált stílusszabályokat használ (és ügyeljen arra, hogy ugyanazt a szabályt minden alkalommal ugyanúgy írja be).
        • A CSS és a Javascript beillesztése a megfelelő módon.

        Ezeknek a kérdéseknek számos egyszerű „kazánlap” kódolási feladata van, amelyek időt vesznek igénybe az új tervek és szolgáltatások kódolásától, és sokan túl túlságosan bonyolultak ahhoz, hogy minden projektnél „kézkódolást” lehessen vállalni. Senki sem akarja költeni a fejlesztési idő legalább 50% -át az alapkód hibakeresésére - a fejlesztők fejleszteni akarnak.

        Ezen okok miatt és az alkalmazáskód-fejlesztés hasonló tendenciáját követve egyre több fejlesztő fordul előtér-keretrendszerekhez.

        A kezelőfelület egy vagy több HTML-dokumentum-struktúrát és egy teljes CSS-stíluslapot biztosít, amely kezeli a fent felsorolt ​​alapvető igényeket vagy azokat. Ez megszabadítja a fejlesztőket arra, hogy a tényleges tervezési döntésekre összpontosítsanak, ahelyett, hogy megpróbálnák a médiakérdezéseket megfelelően működni.

        Mint az alkalmazásfejlesztési kereteknél is, széles lehetőségek vannak. Egyes keretek sok design elemet határoznak meg, beleértve a színeket és a gombok alakját. Mások egyszerűen csak minimálisan érzékeny hálózatot biztosítanak. Egyes keretek nagymértékben testreszabhatók, mások egy-egy-megközelítést kínálnak. Néhányan tartalmazzák a Javascript interaktivitását, másokban nem.

        A jelenleg használatban lévő népszerűbb front-end tervezési keretek közül néhány a következő:

        • Bootstrap - A Twitter fejlesztőcsoportjától a Bootstrap-ot úgy tervezték, hogy felgyorsítsa a webes alkalmazások prototípusát és fejlesztését. Kiváló forma és interaktivitású felhasználói felületet, valamint merész, megkülönböztetett formát biztosít. Sokan panaszkodnak, hogy puffadt jelölést hoznak létre (igen), mert a tapasztalatlan felhasználókat arra ösztönzik, hogy stílusstílusokat hozzanak a HTML-be. Ennek ellenére kiváló eszközt kínál bármilyen formalapú webalkalmazás gyors prototípusának készítéséhez.
        • Pure.css - Moduláris CSS-keretkészlet-eszközkészlet, amely külön-külön vagy egészben használható.
        • Alapítvány - Számlázza magát mint a „legfejlettebb reagáló front-end keretrendszert a világon”. Sokan úgy gondolják, hogy az alapítvány olyan, mint a Bootstrap olyan emberek számára, akiket érdekel a jó jelölés.
        • Skeleton - A Skeleton egy „egyszerűen halott” CSS keretváz, amely érzékeny rácsot, tiszta tipográfiát és általában minimális kialakítást biztosít. Ennek célja „kiindulási pont, nem keret”.

        Ezen kívül sok más létezik, és újak fejlesztése folyamatosan zajlik. Ezenkívül vannak külön darabok - CSS-kivonatok -, amelyeket egy egyedi keretbe lehet összeállítani. Például kombinálhat egy egyszerű folyadékrács eszközt egy tipográfiai könyvtárral, és használhat egy harmadik szerszámkészletet az űrlapokhoz.

        A CSS-keretek - hasonlóan a szoftverfejlesztési keretekhez - jelentik az utat a komplex webes tervezéshez és fejlesztéshez. Nincs értelme annak, hogy minden új projektnél feltalálják a kereket, vagy ugyanazt a megoldást dekódolják.

        Mégis - a CSS-keret legmegfelelőbb kihasználása érdekében meg kell értenie a CSS működését és a HTML-sel való interakcióját.

        A CSS a HTML nélkülözhetetlen része

        A CSS - lépcsőzetes stíluslapok - a tervezés és a vizuális megjelenítés nyelve az interneten. A HTML dokumentum csak a tartalomcsomópontok gyűjteménye, de a CSS megmondja a böngészőnek, hogyan kell ezt a tartalmat a felhasználónak bemutatni.

        A HTML-hez hasonlóan, a CSS szerkezeti szempontjai és a szöveges szintű szempontok is vannak. A CSS felhasználható dinamikus animációk és reagáló elrendezések létrehozására is.

        A modern webhelytervezés nagy bonyolultsága miatt - ami nagyrészt a böngészőeszközök és a képernyőméretek sokféleségének köszönhető - a weboldal kialakításának reagálónak kell lennie. Vagyis működnie kell bármilyen méretű vagy típusú eszközön - az oldalnak reagálnia kell a környezetére.

        Az a nehézség és nehézség, amely biztosítja, hogy a webhelytervezés oly sokféle környezetben működjön és a nagyszámú versengő érdekkel foglalkozzanak, arra késztette a legtöbb fejlesztőt, hogy CSS-keretrendszereket fogadjon el..

        Az alkalmazásfejlesztési kerethez hasonlóan a CSS (vagy „front-end”) keretek is kiindulási pontot jelentenek az új webhelytervezés kidolgozásához. Szerkezetet, útmutatást és véleményt adnak az oldal elrendezéséről.

        A CSS-keretrendszer szinte bárki számára lehetővé teszi reagáló, működő webhelyek létrehozását, de csak a CSS és a HTML megértésével rendelkezők képesek a legtöbbet kihasználni..

        JavaScript és HTML

        Ez a szakasz bemutatja a Javascript-et, a legtöbb modern böngészőbe beépített szkriptnyelvet. A hangsúly a Javascript működéséről a HTML-vel és a böngészővel, valamint néhány gyakorlati tippel a JavaScript fejlesztőként való használatának megkezdésére. A tárgyalt témák közé tartozik a Document Object Model, a JavaScript könyvtárak és a JavaScript alkalmazás keretrendszerei. Ez a szakasz nem JavaScript bemutatója.

        Mi a JavaScript?

        A JavaScript egy szkriptnyelv, amely (szinte) minden böngészőbe be van építve. Dinamikus interaktivitás és szkriptek hozzáadására szolgál a weboldalakhoz. (Szerveroldalon is használható, olyan eszközökkel, mint a Node.js, de erre nincs a hangsúly.)

        A JavaScript egy teljes funkcionalitású programozási nyelv, tehát bármi lehetséges. Ez kifejezetten a HTML dokumentumokkal való interakció és manipuláció igényeinek felel meg.

        ECMAScript

        Ha egyáltalán dolgozik a JavaScript-rel, akkor átfut a nagyon furcsa „ECMAScript” névvel. Ez a JavaScriipt „hivatalos” neve.

        A nyelv szabványos előírásait az Ecma nevű szervezet tartja fenn, amely régen az Európai Számítógépgyártók Szövetsége volt. Azóta megváltoztatták a nevüket egyszerűen „Ecma-ra”, amely már nem jelenik meg betűszóként semmit.

        Minden egyes böngésző kissé eltérően valósítja meg az ECMAScript szabványt (és a Microsoft megy olyan messzire, hogy a végrehajtást JScript-nek nevezi Javascript helyett). Tehát néhány ember az „ECMAscriptet” fogja használni, hogy kifejezetten a nyelv szabványos formájára hivatkozzon, ne pedig a böngészőkbe beépített dialektusokra vagy derivatívákra..

        JavaScript és Java

        Tehát nincs zavar - a JavaScriptnek nincs valódi kapcsolata a Java-val. A Java volt az új és divatos nyelv, amikor a JavaScriptet először fejlesztették, és az eredeti ötlet az volt, hogy a Java Java alapú legyen - ebből a névből. A JavaScript azonban nem egyáltalán a Java alapú volt, és a név kivételével nagyon kevés hasonlóság van a két nyelv között.

        Dokumentumobjektum-modell

        Az egyik legfontosabb dolog, amit meg kell érteni, ha jó kezelést szeretne kapni a Javascript-en - a Document Object Model.

        A dokumentum-objektum modell fogalmi szempontból nagyon hasonlít az előző szakaszokban leírt dokumentumfa-struktúrához - valójában lényegében ugyanazon dologra utal.

        A DOM az API (Application Programming Interface), amellyel a Javascript kód kölcsönhatásba lép a HTML dokumentummal. Amikor egy dokumentumot egy böngésző készít, a böngésző nem csak azt mutatja meg a forráskódhoz, amelyhez néhány kiegészítő stílusszabály tartozik. A böngésző elolvasta a forráskódot, és létrehozott egy nézetet annak alapján. A dokumentum minden elemét objektummá (programozási értelemben) objektumokká alakítottuk, a attribútumokkal és módszerekkel a Javascript elérhető.

        A DOM objektum attribútumai tartalmazzák a HTML elem deklarált (és deklarálható) attribútumait (például osztály, azonosító és név), az elem CSS stílusát és magának az elemnek a tartalmát. Az egyes DOM-objektumokhoz társított módszerek tartalmaznak ezen attribútumok bármelyikének megváltoztatására szolgáló funkciókat.

        A böngészőben megjelenített weboldal a dokumentum-objektum modell élő nézete. Ez azt jelenti, hogy ha a DOM egyébként megváltozik (például - bármely elem attribútuma megváltozik), akkor a nézet is megváltozik. Ez lehetővé teszi a JavaScript számára, hogy frissítse vagy megváltoztassa a weboldal tartalmát anélkül, hogy újra kellene frissítenie vagy újratöltenie az oldalt.

        A JavaScript API-kat is tartalmaz a legtöbb böngésző funkcióhoz, így például (például) el tudja olvasni a dokumentum aktuális állapotát, frissítéseket válthat ki, megkaphatja a böngészőablak szélességét és átméretezheti a böngészőablakot.

        Javascript használatával

        Ez nem egy JavaScript bemutató. Ez a szakasz csak néhány hasznos környezetet próbál nyújtani a JavaScriptet kezelő HTML fejlesztők számára.

        A JavaScript beillesztése egy oldalra

        A CSS-hez hasonlóan a JavaScript kétféle módon beilleszthető egy weboldalba - beágyazott szkriptek és a kapcsolódó erőforrások.

        A szkript beágyazásához egyszerűen illessze a JavaScript kódot a címkék közé.

        function changeColor (toChange, newColor) {
        document.getElementbyId (toChange) .style.backgroundColor = newColor;
        }
        </forgatókönyv>

        Ha külön JavaScript fájlt szeretne beilleszteni egy HTML dokumentumba, akkor csatolja az elemhez.

        type ="text / javascript" src ="app.js">

        A JavaScript fájl (relatív vagy teljesen megadott) URL-je az src attribútumba kerül. A type attribútumra nincs szigorúan szükség a HTML5-ben, de jó dolog, ha beletartozik a visszamenőleges és (potenciálisan) kompatibilitásra is. Ezenkívül, ha egy oldalon több elem van, nem jó ötlet az egyedi azonosító attribútumok megadása.

        Általában úgy vélik, hogy jobb, ha a JavaScriptet külön fájlként tartalmazza, ahelyett, hogy beágyazná az oldalra. Ez megtartja a funkcionalitást (JS) a tartalomtól (HTML). Ennek az általános politikának azonban vannak gyakorlati kivételei. Például a szokásos gyakorlat a követőkód (például a JS kódrészletének a Google Analytics által biztosított kódja) közvetlenül az oldalon történő elhelyezése..

        Hová kell tenni a JavaScriptet

        Két általános hely található a JavaScript beillesztésére egy oldalon, a és az alatt .

        A JavaScript-fájlra mutató hivatkozások elhelyezése a dokumentumban jó szemantikai szempontból jó - egy szkriptnek van hatása az oldal egészére, tehát a dokumentum többi hasonló eleméhez tartozik .

        Mivel azonban az oldal betöltése felfüggesztésre kerül, míg a JavaScript fájlokat lekérjük és elemezzük, a címkék elhelyezése hagyományosan összeráncolta a szemöldökét. A tipikus tanács az, hogy az utolsó elemként helyezze őket a készülék belsejébe, közvetlenül a készülék után .

        Ez még mindig jó tanács. Most azonban csavarodik a furcsa tanácsokhoz: van mód arra, hogy elemeket helyezze a dokumentumba anélkül, hogy az oldalmegjelenítés lelassulna. A HTML5-től kezdődően a címke tartalmaz egy aszinkron címkével ellátott attribútumot. Ha hozzáadja az async attribútumot a szkriptcímkéhez, az oldal nem állítja le a megjelenítést, és a JS-t aszinkron módon értelmezi és hajtja végre (azaz külön szálban).

        type ="text / javascript" src ="app.js" aszinkron>

        Ennek fel kell gyorsítania az oldal egészének betöltését és megjelenítését. Az aszinkron betöltés és elemzés azonban továbbra is problémákat okozhat. Ha az adatkapcsolat lassú, vagy ha az ügyfélszámítógép különösen alacsony fogyasztású, ez továbbra is lelassíthatja az oldal megjelenítését.

        Ha különösen a lassú kapcsolatok és az alacsony fogyasztású eszközök esetleges hatékonyságának kiküszöbölésére törekszik, akkor érdemes lehet a címkéket a dokumentum aljára helyezni..

        JSON

        A JavaScript részhalmaza, amelyet a szemantikus HTML szakaszaiban érintettek, a JSON - JavaScript Object Notation.

        A JavaScript egy objektumorientált nyelv, amely (többek között) azt jelenti, hogy az egyes objektumokat (a szó valós értelemében) adatobjektumokká lehet kódolni (a szó programozási értelmében). Például egy blogbejegyzés (egy „való világ” objektum) kódolható JavaScript objektumként:

        {
        "cím" : "Lorem Ipsum és az All That Jazz",
        "szerző" : "Adam Wood",
        "tartalom" :
        „Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris metus, euismod non sodales eu, molestie congue nibh. Nunc eu dignissim est. Donec nem érte el a sapien rutrum állandóságát. Nunc vitae libero nec velit porta pulvinar vitae ut sapien. Az aliquam következtében orci eget libero blandit semper. Aeneai malesuada risus, máshova nem sorolt ​​volutpat dapibus. Aliquam sit amet bibendum enim. Felfüggesztés és a faucibus erat. Proin quis facilisis nisl. Vivamus sit amet enim elit. Máshová nem sorolt ​​alquam nisl sapien, sagittis vitae nisi, urp.,
        }

        Amint azt a szemantikai jelöléssel láttuk, a JSON felhasználható egy oldal tartalmának kódolására, szemantikai jelölő API-ként történő felhasználásra. Ez hasznos a Googles indexeléséhez.

        Ezenkívül a JSON - AJAX másik fontos felhasználása.

        AJAX

        Az AJAX egy olyan tervezési minta (nem egy speciális technológia), amelyben az aszinkron HTTP kéréseket a JavaScript teszi lehetővé, lehetővé téve a friss adatok weboldalon való feltöltését anélkül, hogy az oldalt újra kellene betölteni..

        Az AJAX eredetileg az „aszinkron JavaScript és XML” kifejezést képviselte, mivel az ilyen típusú tervek eredetileg az XML voltak a leggyakoribb adatátviteli nyelv. A JSON azonban a leggyakoribb nyelv, mivel könnyebb, rugalmasabb, natív JavaScript és könnyebben olvasható. (Sajnos az „AJAJ” nem nagyon fülbemászó, ezért a régi név beragadt.)

        Az AJAX mintázatnak nincs értelme a legtöbb oldalon, de a webalkalmazásokban (például az e-mailben) mindent megváltoztathat a világon.

        Az AJAX-t „aszinkron JavaScript-nek” hívják, mivel a JS-kód nem az oldal betöltésekor (azaz amikor egy böngésző általában hívást kezdeményez a szerverre) hívásokat kezdeményez a kiszolgálóra. A felhasználói műveletek vagy az eltelt idő alapján egy AJAX stílusú webes alkalmazás az oldal újratöltése nélkül kérést küld a kiszolgálónak. A válaszból származó adatokat ezután frissíti a DOM (és így a felhasználói nézet) újratöltés nélkül.

        Ez a fajta kialakítás használható (például) e-mailben vagy csevegőalkalmazásban új üzenetek küldésére és letöltésére. A közösségi hálózati oldalak új hozzászólások hozzáadására használják, sőt egyes blogok is felhasználják az újonnan közzétett tartalom hozzáadására egy oldalra.

        A JSON ideális adatformátum az ilyen típusú felhasználási esetekhez, mivel a JavaScript alapja. Az XML-del ellentétben, amelyet a böngészőben a JavaScript megértéséhez kell értelmezni annak megértéséhez, a JSON már a célnyelv.

        Ezenkívül, mivel a JSON lehet a JavaScript fájl egyetlen tartalma (amelynek bármilyen domainnek rendelkeznie kell az src URL-jével), a JSON felhasználható a származási hely közötti keresztbeszélés nehézségeinek elkerülésére. Általában a webböngészők megakadályozzák a webhelyeket abban, hogy kéréseket tegyenek és adatokat fogadjanak az elsődleges dokumentum domainjétől eltérő domainekre. A JavaScriptet (mint például a CSS-t és a képeket) külön forrásként kezelik, amely bárhonnan származhat. Az AJAX mintázat JSON-megvalósításával a kereszt származási kérelmet erőforrás-beillesztésként lehet „álcázni”.

        JavaScript a valós világban

        JQuery

        A JavaScript szintaxisa időnként kissé szóbeli (és tompás) lehet, és számos nagyon gyakori művelethez rengeteg „kazánlap” kód szükséges..

        Ezért szinte az összes JS fejlesztő használ egy JQuery nevű JavaScript könyvtárat. A JQuery tömör API-kat biztosít számos általános használati esethez, például a dokumentum-átjáráshoz, a DOM manipulációhoz és az AJAX-hez..

        A legtöbb programozási nyelv rendelkezik „szabványos könyvtárral”, amely egy olyan nyelvbővítmény-készlet, amely automatizálja vagy elválasztja a programozók által a nyelven elvégzett leggyakoribb dolgokat. A JavaScriptnek nincs hivatalos szabványos könyvtára. Noha vannak más versengő projektek, dedikált fejlesztői alapokkal (mint például a bezárás és a prototípus), a JQuery - sok ember számára - a JavaScript szabvány könyvtára.

        Itt található egy nagyon rövid példa arra, hogy a JQuery felgyorsítja a fejlesztést. Tegyük fel, hogy meg akarja változtatni egy elem attribútumát.

        // Az "tiszta" JavaScript út.

        document.getElementById ("változtatni") .SetAttribute ("cím","Új címszöveg");

        // A JQuery út.

        $. ("#változtatni") .Attr ("cím","Új címszöveg");

        Ebben az esetben csak 28 karakter kerül mentésre, de néha ennél sokkal több. És még a kis megtakarítások is hozzáadódnak egy nagy projekthez.

        JavaScript Front End könyvtárak

        Sok tisztességes web-tervező, akik jól értik a HTML-t és a CSS-t, használják a JavaScript GUI fejlesztéseit anélkül, hogy JavaScript programozóvá válnának.

        Ez azért lehetséges, mert számos JavaScript felhasználói felület könyvtár (például JQuery UI) és előtér-keretrendszer (mint például a Bootstrap) nyújtanak viszonylag egyszerű HTML API-t.

        API (a fent említettek szerint) egy alkalmazásprogramozási felületen. Ez azt jelenti, hogy egy szoftver egy részének funkcionalitását a szoftveren kívülről is elérhetjük. A JavaScript funkciók és a HTML API összefüggésében ez azt jelenti, hogy egyszerűen beilleszthetők a JavaScript funkciók a HTML-be, egyszerűen az, hogy dolgokat adnak a jelöléshez (általában speciális osztályok)..

        A JavaScript UI könyvtárak szolgáltatáskészletének feltárása sok kezdő fejlesztőnek (és a nem még kezdőnek) sok egyszerű ötletet nyújthat a webhely interaktivitásának javításához, valamint az ötletek megvalósításához szükséges eszközöket. (Ne felejtsen el kiválasztani egyet, és ragaszkodni hozzá egy projekthez - próbáljon meg ne keverni és illeszteni a különféle felhasználói felület könyvtárakat. Az eredmények vizuális káosz és a tervezési zavar.)

        JavaScript front-end alkalmazáskeretek

        Elkülönítve a CSS előző szakaszában tárgyalt front-end tervezési keretektől (például a Bootstrap-tól), az front-end alkalmazás keretrendszer egy vázlatos szoftver alkalmazás, amely nem a vizuális tervezés, hanem a webes alkalmazás.

        A JavaScript alkalmazás keretrendszerei, például a Backbone.js és az Angular, strukturált sablont biztosítanak egy webalkalmazáshoz, automatizálva számos általános feladatot, és tervezési architektúrát biztosítva.

        A legtöbb JS alkalmazáskeret megvalósítja az MVC vagy a Model View Controller tervezési mintáját. Ez a minta így működik:

        • A modell kezeli az adatokat
        • A nézet megjeleníti az adatokat
        • A Vezérlő összeköti a modell adatait a nézettel, és kezeli az alkalmazás logikáját

        Mindegyik JS-keretrendszer különféle módon hajtja végre ezt a mintát, de szinte mindegyik készíti ennek valamilyen változatát.

        Ha megpróbál egy JavaScript alkalmazást építeni, akkor a semmiből történő felépítés szinte mindig szörnyű ötlet. A keret használata biztosítja, hogy az alkalmazás szilárd építészeti alapokra épül, és számtalan órát takarít meg, amelyeket egyébként alacsony szintű, általános funkciók kódolására fordítanának..

        Mint a legtöbb szoftverfejlesztés esetében is tapasztalható, jó JavaScript-fejlesztőként nem csak a JavaScript kódolását kell megtanulni - azt kell megtudni, hogy mely könyvtárak és keretek vannak a legmegfelelőbbek különféle alkalmazásokhoz, és hogy képesek-e ezeket valamilyen mértékben használni. folyékonyság.

        A JavaScript erősebb és hasznosabb, mint valaha

        A JavaScript kevés energiájú nyelvként kezdte meg az életét, amelyet buta effektusokhoz és kisebb fejlesztésekhez használtak a weboldalakon. De az elmúlt évtizedben vagy annál tovább, a szabványoknak megfelelő új böngészők, a fejlett JavaScript könyvtárakkal és keretekkel együtt, a nyelvet komoly platformmá tették a teljes körű böngészőben használható alkalmazások számára.

        HTML vs. mindent

        Ez a szakasz a HTML-lefedettségünket foglalja össze azzal, hogy többféle kontextusban megvizsgálja a HTML alternatíváit, és megmutatja, hogy a HTML a modern technológiai környezetben a tartalom domináns nyelvévé vált..

        A HTML alternatívája

        A HTML a web alapértelmezett nyelve, de más típusú tervezés és tartalom platformjaként is használják.

        E-könyvek

        Az e-könyvek legnépszerűbb nyílt forráskódú szabványa .epub formátum - amely szinte minden e-olvasónál használható az Amazon Kindle kivételével - valójában csak HTML alapú formátum. Az egyes szakaszok és a szakaszok, például a Tartalomjegyzék és az Indexek, külön HTML fájlok. Az összes tartalomfájl, olyan eszközökkel, mint a képek és a CSS-fájlok, egyszerűen egyetlen fájlba csomagolódik, és .epub fájlkiterjesztést kap. Sok szempontból egy .epub könyv analóg egy olyan weboldallal, amelyben sok oldal található.

        Az Amazon Kindle mindig a saját tulajdonú fájlformátumot részesítette előnyben. A Kindles első generációja .mobi-t használt, majd az .azw nevű kapcsolódó formátumot. Ezek összetettebbek, mint a .epub formátum, és nem HTML alapúak.

        A Kindles legújabb generációja azonban az új .azw3 formátumot használja, amely a HTML5-en alapul. Míg mindig is volt lehetőség a Kindle e-könyvek HTML-ből készítésére konvertáló szoftver segítségével, a HTML most az elsődleges szerző nyelv az e-könyvek tartalmához.

        Mobil alkalmazások

        A két legnépszerűbb mobil platform - Android és iPhone - teljesen eltérő programozási nyelveket használ az alkalmazások fejlesztéséhez. Az Android alkalmazás fejlesztését általában Java-ban végzik, míg az iOS a C célkitűzést és az új Swift nyelvet használja.

        Ez azt jelenti, hogy ha mindkét platformon szeretne készíteni és kiadni egy alkalmazást, akkor általában az egész dolgot kétszer, két különböző nyelven kell felépítenie. Ez nagyszerű olyan nagy szoftvervállalatok számára, mint a Facebook, de ez komoly terhet jelenthet a kisebb fejlesztési házak számára.

        Néhány különféle megoldást hoztunk létre erre a problémára, de a legérdekesebb a HTML használata (valamint a JavaScript és a CSS).

        Az olyan eszközök, mint a PhoneGap, lehetővé teszik a fejlesztők számára, hogy egyszer készítsenek egy alkalmazást böngésző alapú nyelveken (HTML, JS, CSS), majd csomagolják őket különböző operációs rendszerek alkalmazásaiba. A PhoneGap szoftver a böngésző alapú alkalmazást egy „króm nélküli böngészőbe” csomagolja - egy böngésző stílusú megjelenítő keretbe, amely csak az alkalmazások könyvtárában lévő fájlokat nézi meg, és nem biztosít felhasználói szemléletű navigációt. Ez megtehető bármilyen támogatott operációs rendszerhez, lehetővé téve az alkalmazások egyszeri létrehozását és mindenhol történő telepítését.

        A HTML lett az univerzális nyelv.

        A HTML alternatívái

        Annak ellenére, hogy a HTML az internetes anyanyelv, és hatékony interoperabilitási platform, vannak olyan alternatív technológiák, amelyek megtagadják az elmenekülést.

        Vaku

        A Flash egy multimédiás szoftverplatform, amely plug-innel a legtöbb böngészőben működhet.

        Az 1990-es évek végén nem volt semmi hűvösebb, mint egy Flash-alapú webhely. Nagyon interaktívak, animálták és jobb grafikával büszkélkedtek, mint az egyszerű HTML-alapú webhelyek. Még zenét és videót is lejátszhat.

        Ezek a webhelyek gyorsan unalmasak és bosszantóvá váltak, ám a technológia szokásból fakadt (az emberek azt írják, amit szoktak írni) és attól a félelemtől, hogy a HTML5 és a JavaScript nyelven írt webhelyeket és alkalmazásokat nem támogatják minden böngésző. Az Internet Explorer 6 évek óta nagy használatban van a jobb, szabványoknak megfelelő böngészők megjelenése után, így az emberek folyamatosan kiutasították a Flash-alapú webhelyeket.

        Ez a tendencia nagyrészt elhalt. A Flash-et manapság leginkább asztali és mobil videojátékokhoz használják, és az internetes használatát leginkább az intelligens közönség korlátozza.

        Sajnos a kis nem technológiai vállalkozások (különösen az egyházak és a közösségi nonprofit szervezetek) évek óta elmaradnak a technológiai trendektől, és sokan továbbra is szeretnék Flash elemeket (például „Flash Intro”) beépíteni webhelyükbe. Ez szinte mindig hiba.

        • A Flash leggyakoribb használata a nem interaktív webhelyeken a „Flash Intro”, amely hihetetlenül idegesítő a felhasználók számára. Senki sem akar várni, és figyelni a szórakoztató előadását, mielőtt megtalálná azokat a dolgokat, amelyeket keresett az Ön webhelyén. Soha, soha ne csináld ezt.
        • Néhány ember szerint jó ötlet a tartalmat és a menüket Flash alkalmazásba helyezni, hogy hűvös effektusokat hozzanak létre, például megvilágítási menüelemeket vagy gördülő lapokat. Ez egy rossz ötlet:
          • Az emberek törődik a tartalommal, nem pedig a speciális effektusokkal. Tegye tartalmát könnyen olvashatóvá és navigálhatóvá. Senki sem fog hosszabb ideig maradni az Ön webhelyén, vagy ajánlani barátainak, mert szerette, ahogyan a tartalma kibontakozik, mint egy görgetés, amikor a repülő menügombra kattintottak..
          • Ha a tartalmat HTML helyett Flash-be helyezi, elrejti a keresőmotorokból, így webhelye ténylegesen láthatatlanná válik a Google számára.
          • A tartalom Flashbe helyezése azt jelenti, hogy a tartalom bármilyen konkrét nézete valójában egy futó alkalmazás egy adott állapota, nem pedig megosztható URL. Ez nagyon megnehezíti a felhasználókat, hogy könyvjelzőket vagy tartalmakat megosszanak.
          • A Flash alkalmazás tartalma és navigációja nem érhető el a képernyőolvasók számára, így a webhelye látássérültek számára nem elérhető.
          • A Flashben létrehozni kívánt effektusok többsége könnyebben létrehozható JavaScript-ben és CSS-ben, anélkül, hogy ezek a problémák felmerülnének.
        PDF

        A PDF - hordozható dokumentumformátum - egy nagy platformon átnyúló formátum nyomtatott dokumentumokhoz.

        A PDF segítségével egyetlen nézetet hozhat létre a tartalmáról. A PDF-fájlnak meghatározott oldalméretei, egy adott elrendezése és a dokumentumfolyamat, egy adott betűtípus, egy adott szövegméret van. A PDF-fájlok beágyazhatják a nyomtatókkal kapcsolatos információkat (például a tintaszíneket).

        Az összes dolog, ami a PDF-fájlokat jó választássá teszi, például a kották és a nyomtatott könyvek, szörnyű választássá teszi az online tartalmakat.

        És mégis, sok ember és szervezet (különösen a nem nem üzleti vállalkozások és a nonprofit szervezetek) továbbra is közzéteszi a PDF-eket az interneten. Átfogó viselkedési mintát jelent a nyomtatásra koncentrált brosúrák készítése, amelyeket azután elérhetővé tesznek egy weboldalon, miközben soha senki sem kap nyomtatott példányt.

        Bárki, aki szeretné megtekinteni az ön prospektusában szereplő információkat, nem akarja, hogy a PDF megjelenjen. Azt akarják, hogy az Ön tartalma legyen, és Önnek az adathordozónak megfelelő formátumban kell rendelkeznie - böngészők esetében az adathordozó HTML.

        A PDF-fájlok egyik különösen rettenetes használata, ahol a HTML jobb választás, a kitölthető űrlapok. Számos szervezet készít olyan PDF-űrlapokat, amelyeket kitölthet egy PDF-olvasóban, majd e-mailben küldhet el. Elképzelhető, hogy néhány túlhajszolt titkár másolja ezeket az űrlapokat bármilyen adatbázis-rendszerbe, amelyet az iroda belsőleg használ.

        Ésszerűbb megoldás lenne egy online HTML űrlap, amely az adatokat közvetlenül az adatbázis alkalmazásba továbbítja. Ez megtakarítana a munkaerőt és csökkentené a hibákat. A HTTPS-rel még biztonságosabb lenne, mint a PDF-űrlapok e-mailezése.

        A HTML nyer

        A HTML a web univerzális nyelvévé vált, valamint a kapcsolódó technológiák, például az e-könyvek és a mobil alkalmazások számára.

        Bizonyos esetekben a HTML egy a választás a több közül, és előnyeit és hátrányait kínálja, mint bármely más technológiai választást. Más esetekben a HTML nem csak a tiszta nyertes, hanem az egyetlen ésszerű választás.

        XHTML és XHTML5

        XHTML

        Az XHTML az eXtensible Hypertext Markup Language kifejezést jelenti. Alapvetően a HTML XML alkalmazása. Az első fejlesztéskor a HTML (4. verzió) laza felépítésű volt. Az XHTML HTML-felépítését nagyon strukturáltá tette. Régóta tekintették az internetes jelölés jövőjének. De a HTML5 nagymértékben megkerüli azt. Ennek ellenére széles körben használják.

        Úgy fejlesztette ki a sok HTML-t használó weboldalon található rossz kód leküzdésére, mint például a hiányzó záró címkék, a címkék nem megfelelő beillesztése és a hasonló laza kódolási gyakorlatok. Az XHTML küzdi ezeket a hibákat olyan szabályok meghatározásával, mint például az összes címke legyen bezárva, és a megfelelő sorrendben legyen.

        Történelem

        1998-ban a W3C közzétette a HTML formázása az XML-ben című munkatervezetet. Ez az új nyelv a HTML 4-en alapult, de betartotta az XML szigorúbb szintaxisszabályait. 1999 februárjában a specifikáció neve XHTML 1.0-ra változott: Az eXtensible HyperText Markup Language. Végül, 2000 januárjában, az XHTML lett a W3C hivatalos ajánlása.

        Az XHTML következő verzióját, az XHTML 1.1-et 2001 májusában tették közzé, amely továbbra is szigorú szabályokon alapult, de lehetővé tette a testreszabást és kisebb változtatásokat. Az XHTML 2.0 működő tervezetként indult, de 2009-ben elhagyta a HTML5 és az XHTML5 javát.

        XHTML alapelvek

        Míg az XHTML szinte azonos a HTML-lel, új szabálykészletet vezetett be, amelynek állítólag biztosítania kellett minden kód érvényességét és helyességét. Ezek a szabályok a következők voltak:

        • Az összes elem és attribútumnév kisbetűsnek kell lennie.
        • Az összes üres elemet az XML speciális üres elem címkéjével kell írni.
        • Az összes végcímkének jelen kell lennie, és nincs választható végcímke.
        • A HTML elemeknek egyetlen fej elemet kell tartalmazniuk, amelyet egyetlen törzselem vagy egyetlen keretkészlet elem követ.
        • Minden fejnek egyetlen címet kell tartalmaznia.

        A fentebb említett szabályokkal együtt az XHTML eredetileg három formális dokumentumtípus-meghatározást (DTD) vezet be, amelyek megfeleltek a HTML 4.01 három különböző verziójának:

        • XHTML 1.0 Szigorú a szigorú HTML 4.01 XML-je, és olyan elemeket és attribútumokat tartalmaz, amelyeket a HTML 4.01 specifikációban nem jelöltek meg elavulttá. 2015. november óta az XHTML 1.0 Strict a dokumentumtípus, amelyet a World Wide Web Consortium honlapjának honlapjára használnak..
        • XHTML 1.0 átmeneti a HTML 4.01 Transitional XML-ekvivalense, és tartalmazza a szigorú verzióból kizárt prezentációs elemeket (például központ, betűtípus és figyelmeztetés).
        • XHTML 1.0 keretek a HTML 4.01 Frameset XML megfelelője, és lehetővé teszi a frameet dokumentumok meghatározását - ez az 1990-es évek végén általános webes szolgáltatás.

        Példa

        A HTML korai verziói lazán felépültek, és nagyon gyakori volt a rossz kódolási gyakorlattal rendelkező weblapok megtalálása. A megfelelő weboldal az XHTML-ben így néz ki:

        Az első weboldalom

        Helló Világ!

        Nagyon egyszerű, de teljesen működőképes weboldal, érvényes XHTML kóddal!

        Online források

        Annak ellenére, hogy az XHTML-t túllépi a HTML5, még mindig rengeteg erőforrás van online, amelyek segítenek az XHTML jobb megértésében. Az alapvető specifikációtól a csalólapokig, az érvényesítőktől az oktatóig, az alább felsorolt ​​linkek segítenek az XHTML-rel kapcsolatos bármilyen kérdésben..

        Referencia

        • XHTML hivatalos specifikáció: hivatalos webhely, amely magyarázza az XHTML fejlesztésének döntését, és további forrásokat nyújt a fejlesztéshez.
        • XHTML 1.0: a munkavázlat második módosított kiadása a HTML 4 újraformázására az XML 1.0-ban
        • XHTML alapvető specifikáció: olyan XHTML dokumentumtípust biztosít, amelyet meg lehet osztani olyan eszközök között, mint például asztali, TV és mobiltelefonok.
        • XHTML: A Tiszta Kód Megoldás: részletes XHTML áttekintést nyújt a HTML és az új szabványok közötti különbségekre összpontosítva.
        • Miért váltson az XHTML-re: kényszerítő érv az XHTML-re való váltáshoz, a munkafolyamat beállítása és a tisztább kód előállítása érdekében.

        Eszközök

        Ezek az eszközök segítenek ellenőrizni a kód érvényességét, és jól néznek ki.

        • HTML / XHTML érvényesítő szolgáltatás: a W3C hitelesítője mind a HTML, mind az XHTML dokumentumokat ellenőrzi a hivatalos előírásoknak való megfelelés szempontjából.
        • HTML Tidy: segít a HTML fájlok automatikus tisztításában és a szabványos előírásoknak való megfelelésben. Eredetileg Dave Ragget, a W3C fejlesztette ki, és most egy nyílt forrású projekt a SourceForge-n.

        oktatóanyagok

        Ha igazán szeretne belemerülni az XHTML fejlesztésébe, akkor ezeknek az oktatóanyagoknak el kell készítenie.

        • XHTML magyarázat: áttekintést nyújt az XHTML kialakulásáról, és elmagyarázza az összes változást, ami történt, majd példákat mutat példákra, DTD áttekintést és a legjobb kódolási gyakorlatokat..
        • XHTML webdesign kezdőknek: felfedezi az XHTML fejlett építőelemeit, ideértve a megjegyzéseket, szöveget és egyebeket.
        • XHTML bemutató: egy nagyon rövid bemutató, amely röviden ismerteti az XHTML alapelveit.
        • Hozzáférhető HTML / XHTML űrlapok: kezdő szintű oktatóanyag, amely csak azt fedezi, amit tudnia kell.
        • Kezdő HTML (XHTML): video bemutató, amely kezdőknek megfelelő az XHTML alapjainak megtanulásához.
        • Szoftvertesztelési módszerek: bevezetés a szoftvertesztelés módszereibe és eszközeibe, amely a HTML fejlesztők számára általános érdeklődés.

        Könyvek

        Mivel az XHTML kapcsolódik a HTML-hez, sok könyv együtt tárgyalja ezt a két nyelvet. Talál majd olyan könyveket, amelyek teljes kezdőknek szólnak, valamint könyveket azoknak, akik már rendelkeznek valamilyen kódolási tapasztalattal és szeretnék bővíteni tudásukat.

        • HTML, XHTML és CSS: Visual QuickStart Guide (2006), Elizabeth Castro: ismerteti az összes HTML és XHTML alapvető elemet a kezdőknek megfelelő nyelven. A könyvnek sok vizuális példája van, és tartalmaz egy kapcsolódó weboldalt extra anyaggal, példákkal, frissítésekkel és egyebekkel.
        • HTML, XHTML és CSS For Dummies (2011), készítette: Tittel és Noble: bevezető hivatkozás a HTML, XHTML és CSS számára, amely megtanítja, hogyan kell létrehozni XHTML dokumentumokat, ezeket az elveket alkalmazni a népszerű CMS-ekre, például a WordPress és a Drupal, valamint a mobilkészülékekre készülékek.
        • A webprogramozás kezdete Jon, Duckett HTML, XHTML és CSS (2011) formájában: megtanítja, hogyan kell weboldalakat írni HTML, XHTML és CSS használatával. Ez követi a szabványokon alapuló elveket, de megtanítja az olvasókat az (X) HTML használatával felmerülő problémák megoldására is.

        XHTML ma

        Az XHTML, amint az eredetileg létrejött, már nem aktív fejlesztés és karbantartás. A kegyelemből való esés fő oka a nagyon szigorú hibakezelés, amely miatt a weboldalak abbahagyták a megjelenítést, amikor hiba történt. Ez a Web Hypertext Application Technology Group (WHATWG) létrehozását eredményezte, amely megkezdett a HTML5-en. Hozzájárultak az XHTML 2.0 munkacsoport esetleges megszüntetéséhez.

        Ma a W3C munkája a HTML5-re és egy XHTML-szintaxisra, az úgynevezett XHTML5.1-re koncentrál, amelyet a HTML5-tervezetben a HTML5-rel együtt határoznak meg.

        Annak ellenére, hogy az XHTML-t megkerülte a HTML5, a mögöttes történelem és a vonatkozó kódolási gyakorlatok ismerete erős alapot teremt a jövő számára. A fenti erőforrások megmutatják a helyes utat az érvényes kód megtanulásához.

        HTML5

        HTML5

        A HTML5 a HTML szabvány jelenlegi verziója. Ez a webes dokumentumokhoz és alkalmazásokhoz használt jelölőnyelv. A HTML5 számos jelentős kiegészítést és változtatást tartalmaz a nyelvben. Megbeszéljük ezeket és még egy kicsit.

        Előzmények és bevezetés

        Áttekintettük a HTML történetét, amikor az 1-től 4-ig változott. De a HTML5 története még érdekesebb és fontosabb.

        Az út a HTML 5-hez

        A web nyilvános bevezetésének korai éveiben a fő böngésző-szolgáltatók kifejlesztették saját védett HTML elemeiket és a megjelenítés saját megközelítését..

        Az egyik böngésző számára létrehozott HTML-dokumentumok szinte használhatatlanok voltak a többiben, különösen, ha a HTML-oldalak interaktív elemeket, például űrlapvezérlőket tartalmaztak.

        Ahogy a HTML 4.0 és az XHTML stabilizálódott, a Web Standards mozgalom arra késztette a böngészőt, hogy nyitott szabványokat fogadjon el, hogy a weboldalak bármilyen böngészővel kompatibilisek legyenek..

        Ez a munka nagyrészt sikeres volt, de két tendencia tolta a HTML határait, fenyegetve a nyitottság és az interoperabilitás teljes elvét.

        Az első a „quirks mód” böngésző-célzás kollektív rossz szokásai. Miután oly sok évig kellett finomítani a terveket bizonyos böngészők számára, sok tervező folytatta a kódolást ezen a módon.

        A második az egyre növekvő vágy a gazdag, interaktív tartalom iránt, amelyet a HTML nem támogatott. Ez a Flash széles körű használatához vezetett.

        2004-ben a Mozilla és az Opera bemutatta a W3C-nek egy állásfoglalást, amelyben később HTML5-ként támogatják. A nyelv új iterációja támogatná az új interaktív funkcionalitást és a multimédiás médiát, miközben visszafelé kompatibilis a szabványoknak megfelelő webböngészőkkel..

        Ez az utolsó pont döntő jelentőségű volt - az új verziónak kecsesen romlnia kellett, és érvényes HTML 4.0-et kellett tartalmaznia részhalmazként; egyébként csak egy zavaró változat lesz a már zsúfolt ökoszisztéma számára.

        A WHATWG szinte azonnal elkezdte dolgozni a HTML5-en, és az első nyilvános tervezetet 2008-ban tették közzé. A böngésző gyártói elkezdték kísérletileg végrehajtani a szabvány egyes részeit, amelyek tovább fejlődtek..

        2012-ben kiadták a stabil „jelölt ajánlást”, a teljes stabil W3C ajánlást pedig 2014-ben adták ki. Addigra minden nagy böngésző támogatta a szabvány legkritikusabb részeit..

        A HTML5 szabványnak most két párhuzamos fejlesztési pályája van. A W3C stabil kiadási ciklusával rendelkezik, növekményes verziószámmal - a „pillanatképek” sorozatával. A WHATWG folyamatosan növeli az „életszínvonalat”, új funkciókkal folyamatosan bővítve.

        A HTML5 újdonságai?

        A HTML5-ben sok új van, beleértve magának a specifikációnak a természetét. A HTML 4.0 lényegében a rendelkezésre álló jelölőcímkék leltára volt. A HTML5 magában foglalja ezt, de ez csak egy része a szabványban meghatározott böngésző alapú technológiák moduláris ökoszisztémájának.

        haszonkulcs

        A HTML5 jelölésének változásai általában néhány kategóriába esnek.

        Szemantika

        A szemantikus jelölés azt jelenti, hogy a jelölés jelentéssel bír. Például a HTML 4.0 egyetlen fő oldal-elrendezési eleme a. A lehet bármi: fejléc, lábléc, oszlop, oldalsáv, menü. A HTML5-hez számos szemantikai oldal-elrendezési elem került hozzáadásra:

        • .

        A HTML5-hez hozzáadott további szemantikai elemek a következők:

        • és amelyek illusztrációkhoz és diagramokhoz használhatók;
        • amely meghatározza a kiemelt vagy megjelölt szöveget;
        • amely meghatározza a nappali időt.

        A HTML5 ezt is kifejezi és előnyben kell részesíteni és .

        Multimédia

        Új elemeket adtak a HTML5-hez a média támogatására:

        • .

        A és az elemek lehetővé teszik a média natív lejátszását JavaScript, Flash és bármilyen beágyazás nélkül - annyira egyszerű, mint egy kép beillesztése. Az elem a JavaScript-kel működik, hogy programozottan hozzon létre az oldali grafikát.

        A HTML5 kifejezetten támogatja a Scalable Vector Graphics (SVG) szoftvert is..

        Az interaktivitás

        A HTML5 számos új űrlapelemet és bemeneti típust tartalmaz, amelyek elősegítik a nyelv, mint alkalmazásplatform támogatását. Ezek tartalmazzák:

        • .

        A bemeneti típusok magukban foglalják: szín, dátum, naptári idő, nappali helyi, e-mail, hónap, szám, tartomány, keresés, tel, idő, URL és hét.

        Az új űrlapvezérlőkkel együtt bevezették a HTML5-et, amely vizuális visszajelzést ad és az űrlapokon kívül is használható. Ezen felül számos új globális attribútum lehetővé teszi az interaktív funkciókat:

        • contenteditable
        • szövegkörnyezet
        • adat-*
        • húzható
        • ugróterület
        • helyesírás-ellenőrzés.
        Lexing és elemzési szabályok

        A rendelkezésre álló elemek katalógusában bekövetkező változások mellett a HTML5 jelölésre sokkal szigorúbb és jobban definiált lexing és elemzési szabályok vonatkoznak. Ez már nem az XML vagy az SGML verziója, hanem egy teljesen meghatározott jelölési nyelv a saját jogában.

        A szintaxishibák vagy a rosszul kialakított jelölések várhatóan következetesen meghibásodnak, hasonló viselkedést biztosítva a kompatibilis böngészőkben.

        Böngésző és DOM API-k

        A HTML5 számos JavaScript API-t határoz meg a DOM-nal (Document Object Model - az oldali tartalom) és a böngészővel történő interakcióhoz. Ezek tartalmazzák:

        • A fent említett vászon az oldalon belüli grafikai megjelenítéshez.
        • Időzített médialejátszás, a és .
        • Online / offline állapot-ellenőrzések.
        • MIME típus és protokollkezelő regisztráció, amely lehetővé teszi a böngésző számára, hogy egy webhelyet válasszon alapértelmezett módon egy adott fájltípus vagy kommunikációs protokoll kezelésére. Például, ha lehetővé teszi egy webmail alkalmazás számára a mailto: hivatkozások kezelését.
        • Mikroadatok, amelyek lehetővé teszik a szemantikai metaadatok fészkelését attribútumként.
        • Dokumentumok közötti keresztirányú üzenetküldés, amely lehetővé teszi két különböző domain-forrásból származó két oldal megnyitását két különböző böngésző-kontextusban, és egymással való kommunikációt.
        • Webtároló, állandó, kulcs-érték páros adattároló, amely hasonló a sütikhez, de könnyebben használható és nagyobb tárolási kapacitással rendelkezik.

        A HTML5 sikere

        A HTML5 sikerét két szempontból lehet megítélni:

        • mennyire teljesíti a specifikáció céljait
        • milyen széles körű elfogadása.

        Mindkét tekintetben a HTML5 rendkívül sikeres volt.

        A HTML5 célja:

        • a böngésző interoperabilitása
        • csökkent vagy megszűnik a bővítmények igénye
        • kompatibilis a meglévő szabványokkal.

        Ezeket nagyrészt elérték. A motorok megjelenítése és a Java böngészők végrehajtása a fő böngészőkben mindannyian konvergáltak, hogy egy weboldal látogatása következetes élményt nyújt minden böngészőben.

        A multimédia, a böngésző tárolása és más alkalmazás-központú szolgáltatások támogatása kiküszöböli a Flash használatát, és robbanást okozott a natív HTML5 webalkalmazásokban.

        A HTML5-ben létrehozott dokumentumok jól működnek a régi böngészőkben, még akkor is, ha a fejlettebb webes alkalmazások nem működnek.

        Az elfogadás gyorsan történt, még a szabvány hivatalos hivatalossá tétele előtt is. Az írástól kezdve a 10 millió webhely nagy része HTML5-et használ. Ráadásul az új webtartalom nagy részét HTML5 formátumban állítják elő.

        Még izgalmasabbá tette a HTML5 böngészőn kívüli használata. Az olyan platformok, mint például az asztali számítógéphez használt Electron és a mobiltelefonhoz nyújtott telefongap, a HTML5-et (a CSS3-val és a JavaScript-kel) natív alkalmazásnyelvévé alakították.

        Általános HTML5-források

        • A HTML5 W3C ajánlása és a WHATWG HTML Living Standard a két hivatalos forrás, amely meghatározza a HTML5-et.
        • A W3C tanfolyam-sorozatot kínál HTML5-en:
          • HTML5 bevezetés
          • HTML5 1. rész: Alapvető HTML5 kódolási alapok és bevált gyakorlatok
          • HTML5 2. rész: Fejlett technikák a HTML5 alkalmazások tervezéséhez
        • A Mozilla Developer Network átfogó HTML5-referenciát kínál.

        A HTML5 a jövő

        A HTML5 a web jelen és jövője. Ha webtechnológiákkal dolgozik, vagy webes tartalmakat publikál, akkor ismernie kell a szabványt. Ha 2010 előtt megtanulta a webdesignot, és nem tartott lépést a változásokkal, a HTML5-ben nagyon sok jó dolog található, amelyeket érdemes megnézni.

        Audio és video erőforrás

        Mielőtt a HTML5 megjelenik, az audio és video weboldalakba ágyazása nem volt egyszerű. A különböző technológiákhoz és a MIME típusokhoz különféle bővítményekre van szükség.

        A médiát is időnként iframe-ek segítségével kellett beágyazni. Ez nem ideális, mert olyan technika, amelyet a hackerek a rosszindulatú kódok beágyazására is használnak.

        A HTML5 új címkéket vezet be, amelyek megkönnyítik a médiakezelést, elsősorban azért, mert olyan szabványokat vezetnek be, amelyek gyakorlatilag bármilyen webhelyen felhasználhatók. Mint minden HTML5 címkénél, némi óvatosság szükséges, mivel a címkék nem kompatibilisek a régebbi böngészőkkel.

        Audio vagy video beágyazására használhatja az új elemeket és a HTML5 elemeket. Íme egy példa:

        Kérjük, frissítse böngészőjét.

        Az alábbiakban lebontottuk az egyes elemeket az attribútumaikkal.

        Videó beágyazása

        A HTML5 bevezet egy új elemet, amely megszünteti a böngésző pluginek szükségességét.

        Az elem nyitó és záró címkéi között megadhat alternatív szöveget. Ez csak akkor jelenik meg, ha a böngésző nem támogatja az elemet.

        Az elem jellemzői

        Az elemen belül különféle attribútumokat adhat meg:

        szélesség magasság

        Ezek az attribútumok meghatározzák a videó méretét a képernyőn. Miközben választhatóak, a legjobb, ha azokat az oldal többi része helyesen jeleníti meg betöltése közben.

        A videó szélességét és magasságát pixelben kell megadni.

        ellenőrzések

        A control attribútum azt mondja a böngészőnek, hogy megjelenítse a lejátszás / szünet gombot és a hangerőszabályzó csúszkát. A videó vezérlő nélküli megjelenítéséhez hagyja ki az attribútumot.

        automatikus lejátszás

        Az automatikus lejátszás kényszeríti a videót, hogy az asztali eszközökön kezdjen lejátszást, a felhasználó beavatkozása nélkül. Az automatikus lejátszás nélküli megjelenítéshez egyszerűen hagyja ki az attribútumot.

        Mobil eszközökön az automatikus lejátszás attribútumot figyelmen kívül hagyják.

        Audio beágyazása

        A hang beágyazásához használja az elemet. Nagyon hasonló az elemhez.

        Az elem nyitó és záró címkéi között megadhat alternatív szöveget. Ez csak akkor jelenik meg, ha a böngésző nem támogatja az elemet.

        Az elem jellemzői

        Az elemen belül különféle attribútumokat adhat meg:

        hurok

        A hurokattribútum azt mondja a böngészőnek, hogy a lejátszás befejezése után indítsa újra az audio sávot.

        ellenőrzések

        A control attribútum azt mondja a böngészőnek, hogy ugyanazt a lejátszás / szünet gombot és a hangerőszabályzó csúszkát jelenítse meg, mint a videó címkénél. Csak hagyja ki az attribútumot, hogy az audio vezérlők nélkül jelenjen meg.

        automatikus lejátszás

        Az automatikus lejátszás attribútum kényszeríti az audio automatikus lejátszását. A hang beágyazása automatikus lejátszás nélkül egyszerűen hagyja ki az attribútumot.

        tompított

        A némított attribútum elnémítja a hangerőt, amikor az audio betöltődik.

        előtöltés

        Az előtöltési attribútum lehetővé teszi, hogy a hangot az oldal tartalma előtt töltse be. Az elfogadható értékek: auto, metaadatok vagy egy sem.

        Az elem

        Az elem meghatározza a fájl- és a MIME-típust, és az elemben kell használni. Legalább egy elemnek lennie kell. Felvehet további elemeket, ha meg akarja határozni a fájl alternatív verzióit.

        Például:

        Az Ön böngészője nem támogatja a videocímkét.

        Az elem jellemzői

        A következő tulajdonságokkal rendelkezik:

        src

        Az src attribútum meghatározza a video- vagy audiofájl forrásútvonalát és fájlnevét.

        típus

        A fájl MIME típusa.

        A videó esetében az elfogadható értékek: video / mp4, video / webm és video / ogg. Az audio esetében elfogadható értékek: audio / mpeg, audio / wav és audio / ogg.

        Noha a modern böngészők elméletileg támogatják magukat az elemeket, egyesek küzdenek bizonyos MIME típusokkal.

        A böngészők közötti kompatibilitás legnagyobb esélye érdekében a video / mp4 MIME típus ajánlott a videóhoz, az audio / mpeg MIME típus pedig a legjobb a hanghoz. Több elemet megadhat, ha például ugyanahhoz a videóhoz ogg-t és mp4-verziót kíván megadni.

        Az elem

        Az elem lehetővé teszi, hogy meghatározzon egy szöveges erőforrást, amelyet az audio vagy a videóval együtt szolgálnak fel. A leggyakoribb felirat-fájl vagy feliratok megadása.

        Minden video vagy audio elemhez egynél több műsorszámot is megadhat. Például érdemes elemeket hozzáadni a különböző nyelvekhez:

        Az elem jellemzői

        Az elem a következő attribútumokkal rendelkezik:

        src

        A szövegfájl forrás elérési útja és fájlneve.

        kedves

        A type attribútumhoz hasonlóan a kind attribútum meghatározza a fájl természetét. Használhat feliratokat, fejezeteket, leírásokat, metaadatokat vagy feliratokat.

        srclang

        Az srclang attribútum lehetővé teszi a szövegfájl nyelvének megadását. Használja a megfelelő nyelvi kódot.

        alapértelmezett

        Az alapértelmezett attribútum segítségével adja meg, melyik legyen az alapértelmezett választás.

        címke

        Nevet ad a szöveges műsorszámnak.

        Audio és video források

        • A Mozilla kifejlesztette ezt a kiváló útmutatót, HTML5 audio és video felhasználásával. Az egyszerű és a haladó használatig visz.
        • Az Apple külön útmutatást tett közzé a fejlesztők számára. Ez érdemes olvasni, ha iOS-re vagy Safari-ra fejleszt.
        • A Microsoft saját útmutatást tartalmaz a HTML5 audio és video szolgáltatásokhoz az Internet Explorerben.

        Alkalmazási gyorsítótár

        A HTML5 nem csak a jelölő szintaxist változtatta meg. Számos böngésző alapú technológiát is meghatározott, köztük többet a webes alkalmazások offline használatához.

        Az alkalmazás gyorsítótár (vagy „AppCache”) egy olyan szolgáltatás, amely lehetővé teszi a fejlesztőknek az előre lehívható és helyben tárolt erőforrások meghatározását..

        Ezeket az erőforrásokat egy gyorsítótár-jegyzékfájlban deklarálják, amelyet egy weboldal fejlécéből összekapcsolnak. Ez felhasználható egy offline alkalmazásban működő webes alkalmazás tervezésére, vagy egyszerűen a felhasználói élmény felgyorsítására.

        Az AppCache sok potenciállal bír, különösen az egyoldalas webes alkalmazások kapcsán. Sajnos a szolgáltatásnak is sok problémája van, és jelenleg elavul, és eltávolodik a szabványtól.

        Ennek ellenére az AppCache továbbra is használható, és az egyetlen módja annak, hogy bizonyos hatásokat elérjünk.

        Annak érdekében, hogy megbirkózzon ezzel a zavarral, összegyűjtöttük a legjobb oktatóanyagokat és erőforrásokat az Application Cache-hez, amelyek különféle szögekből fedezik fel a témát..

        Alkalmazási gyorsítótár oktatóanyagok

        • A Kezdeti útmutató az alkalmazás-gyorsítótár használatához az egyik legjobb bevezető oktatóanyag a témában.
        • Az Application Cache használata a Mozilla Developer Network fejlesztőközpontú műszaki ismertetője.
        • A Let It Take Offline részletes, elbeszélő magyarázat az AppCache használatáról.
        • A HTML5 alkalmazás gyorsítótár használata a mobil webalkalmazásokban lefedi az AppCache általános használatát, és felfedezi a speciális problémákat, amikor felhasználja HTML5 webes alkalmazások fejlesztésekor mobil böngészők számára.
        • A HTML 5 alkalmazás-gyorsítótár használata az egyoldalas alkalmazásokhoz részletezi az AppCache használatát egy Ember.js alkalmazás összefüggésében.
        • Oktatóanyag: Hogyan készíthetünk offline HTML5 webes alkalmazást egy RSS-olvasó példáján, hogy elmagyarázza, hogyan lehet offline módban működő webes alkalmazást létrehozni. Különösen érdekes itt az AppCache együttes használata számos más HTML-adattárral, például a sütikkel, a Helyi tárolóval és a WebSQL-lel.
        • Egy egyszerű böngészőn kívüli offline teendők létrehozása az IndexedDB-vel és a WebSQL-vel egy offline-első teendők listájának alkalmazásának felépítését vizsgálja, amely több böngészőben működik, az offline adattárolási szolgáltatások változó támogatásával. Az Application Cache az IndexedDB-vel és a WebSQL-vel együtt használható.
        • Offline alkalmazás létrehozása a HTML5 App Cache segítségével részletezi az AppCache használatát, beleértve a manifeszt létrehozására vonatkozó részletes utasításokat, valamint az .htaccess használatával kapcsolatos részleteket a manifest fájl megfelelő kiszolgálására az Apache-on..
        • A HTML5 offline webes alkalmazások létrehozása számos helyi adattárolási módszer, például az AppCache be- és hátrányait tárja fel.
        • A HTML5 alkalmazás-gyorsítótár hozzáadása a webes alkalmazás felgyorsításához 5 perc alatt egy rövid bemutató, amely gyorsan elérhetővé teszi az AppCache használatát. Ebben az oktatóanyagban a gyorsítótárazás használatára összpontosít az online webhely élményének felgyorsítása, nem pedig az offline alkalmazásélmény biztosítása.
        • A webes alkalmazások offline futtatása a HTML5 AppCache segítségével lefedi a gyorsítótár manifesztumát, valamint a JavaScript API-t, részletezve a gyorsítótárral kapcsolatos eseményeket és műveleteket.
        • Mi az alkalmazás gyorsítótár? magas szintű áttekintést nyújt az AppCache-ről.
        • HTML5 offline alkalmazás készítése az alkalmazás-gyorsítótárral, a Webtárolóval és az ASP.NET-vel. Az MVC részletesen bemutatja az AppCache tényleges működését, teljes lefedettséget biztosítva a manifeszt fájl megfelelő felépítéséről. Ezen általános magyarázat után az oktatóprogram megmutatja, hogyan kell kezelni ezt a folyamatot egy ASP.NET alkalmazásban.

        További alkalmazás-gyorsítótár-tanulási anyagok

        • Bevált gyakorlatok a gyorsabb webalkalmazáshoz A HTML5 csak az Application Cache-t érinti egy szakaszban, de nagyon hasznos annak megértésében, hogy az App Cache-t hogyan használják egy nagyobb teljesítménystratégiának részeként.
        • Az alkalmazás-gyorsítótár használatával kapcsolatos tippek az AppCache néhány gyakori problémájának kezelésére szolgáló bevált gyakorlatok listája.
        • A HTML alkalmazás-gyorsítótár törlése ismerteti, hogyan lehet több böngészőben törölni a helyi alkalmazás-gyorsítótár-tárolót. Ez különösen akkor hasznos a helyi fejlesztés és tesztelés során, amikor a projekt fájljai gyorsabban változnak, mint az AppCache frissíti őket..
        • A HTML5 alkalmazás-gyorsítótár használata során elkerülhető gyakori bukások: az AppCache leggyakoribb problémáival foglalkozik, és elmagyarázza, hogyan lehet ezeket legyőzni..
        • Az Application Cache egy Douchebag egy vicces, de túlságosan pontos, hogy felhívja a figyelmet az Application Cache használatával kapcsolatos nehézségekre. Ez az esszé azonnali klasszikus volt a front-end fejlesztők körében, és mindenképpen el kell olvasnia az AppCache iránt érdeklődők számára.

        Alkalmazási gyorsítótár-referencia

        • Használhatom az alkalmazás gyorsítótárát? gyors áttekintést nyújt arról, hogy mely böngészők támogatják az AppCache alkalmazást.

        Eszközök az alkalmazás-gyorsítótár kezeléséhez

        • A Cache Manifest Validator egy online eszköz az AppCache Manifest fájlok érvényesítéséhez.
        • A GWT AppCache támogatási könyvtár egy olyan modul a Google Web Toolkit számára, amely automatizálja az Appcache jegyzékfájlok generálását.
        • Az Appcache-Manifest egy Node.js eszköz az Application Cache Manifest fájlok előállításához a parancssorból. Az eszköz tartalmazza a manifeszt fájlok MD5 kivonatát, biztosítva, hogy a frissített fájlok automatikusan megváltoztassák a manifesztot, megfelelő gyorsítótár érvénytelenítést okozva az ügyfélen.
        • A CacheMan egy asztali alkalmazás, amely kezeli a Cache Manifest generációt.

        Előrelépés az alkalmazás gyorsítótárával

        Meg kell tanulnia az Application Cache használatát? Ha Ön webes alkalmazásokkal foglalkozó front-end fejlesztő - feltétlenül igen. De azt is tudnia kell, hogy mi jön és hogyan fejlődik az offline böngészőtárolás.

        Az AppCache tervezett csere a Service Workers. Néhány böngészőben már használhatja a Service Workers alkalmazást, és vannak kiváló eszközök a könnyű végrehajtáshoz. Másrészt néhány böngésző még csak nem is döntött arról, hogy alkalmazza-e ezt a funkciót.

        Tehát mit kell tennie a saját webes alkalmazásaiban?

        Jelenleg használja az AppCache alkalmazást, de készüljön fel a szervizmunkásokra.

        Játékok, grafikák és animációk

        A méretezhető vektorgrafika (SVG) és a HTML5 vászon elem két hatékony eszköz grafikák, animációk és akár böngésző alapú játékok készítéséhez. Noha mindkét technológia ugyanazon célokra felhasználható, alapvetően eltérő módon működnek.

        • A vászon elem egy bitképes tér, ahol raszteres képeket pixel-pixel alapon rajzolhat és manipulálhat.
        • Az SVG olyan kód, amely leírja a felbontástól független vektorgrafikát.

        Mind a vászon elemek, mind az SVG-k programozhatóan létrehozhatók szkriptekkel, és úgy alakíthatók ki, hogy reagáljanak a felhasználói beadásokra. Ennek eredményeként az SVG-k és a vászon elemek statikus grafikák és interaktív animációk készítésére használhatók.

        SVG vs vászon

        Először is, az SVG nem része a HTML5 specifikációnak, míg a vászon. Az SVG egy kétdimenziós grafika leírására szolgáló nyelv. Ez egy önálló webes szabvány, amely beágyazható HTML és XML dokumentumokba.

        Beágyazva egy HTML dokumentumba, az SVG olyan szintaxist alkalmaz, amely megegyezik a HTML5 szintaxisával, így néhányan tévesen feltételezik, hogy az SVG egy HTML elem.

        Az SVG-ket és a HTML5 vászon elemeket a böngészők meglehetősen eltérően jelenítik meg:

        • A vászon elemek „menet közben” kerülnek megjelenítésre. Ez azt jelenti, hogy a vászon elemek valós időben készülnek, amikor azokat a böngésző dolgozza fel.
        • Az SVG nem kerül azonnal felhívásra. Amikor egy böngésző SVG-vel találkozik, először DOM-ot készít az SVG-hez, majd megjeleníti a DOM-ot.

        Ez kismértékű különbségnek tűnhet, de nem az. Ez azt jelenti, hogy a böngészőnek nem kell DOM-ot készítenie, amikor egy vászonra találkozik, hanem akkor is, ha SVG-t renderelt.

        Az egyszerű animációk esetében a különbség elhanyagolható. A rendkívül összetett vászon animációk azonban drámai módon kevesebb böngésző erőforrást igényelnek, mint az SVG-k.

        Másrészt, ha egy SVG-fájlba szeretne kis változtatást végezni, akkor átlépheti a DOM-ot, és elvégezheti a változást, miközben a teljes vászon elemet újrarajzolni kell a változtatáshoz..

        A vászon elemek és az SVG-k különbsége a felbontás. A vászon elemek felbontás-függők. Ez azt jelenti, hogy amikor egy vászon elemre nagyít, a felbontás romlik. Az SVG viszont felbontástól független, és pixel-tökéletesnek tűnik minden újratöltéskor.

        Mikor kell használni az SVG-ket és a vászonokat?

        Mindez felteszi a kérdést: mikor kell használni az SVG-ket és a vászon elemeket? Noha ezen eszközök alkalmazásában van némi átváltás, általánosságban kövesse az alábbi útmutatásokat:

        • Használjon SVG-ket pixel tökéletes animációkhoz és grafikákhoz, amelyeknek élesnek kell lenniük bármilyen méretű eszközön.
        • Használjon SVG-ket, ha el kell kerülnie a JavaScript használatát, vagy ha az animációs tartalom hozzáférhetősége kritikus.
        • A HTML5 vászonnal összetett animációkat és játékokat hozhat létre, amelyek sok felhasználói bemenetet tartalmaznak.

        Ha többet szeretne tudni az SVG-k használatáról, tekintse meg az SVG-k és SWF-ek összehasonlítását tartalmazó cikkünket, amely tartalmazza az SVG-erőforrások listáját. További információ a HTML5 vászon elemről:.

        Vászon források

        Kezdjük az alapokkal:

        • Mozilla Developer Network vászon bemutatója: ez az oktatás az alapvető felhasználással kezdődik, és továbbmegy rajzolni a rajzokat, szöveget, képeket, átalakításokat és animációkat, pixel manipulációkat és még sok más. Az oktatóanyag végére fejlett animációkat, folyamatosan pásztázó panorámaképeket és színválasztó alkalmazást készít.
        • Dev.Opera HTML5 vászon - Alapok: a vászon alapos bevezetése a rajztechnikákat, a képekkel való munkát, a pixel alapú manipulációt, valamint a szöveget, árnyékokat és színátmeneteket foglalja magában..
        • W3Schools Canvas bemutatója: Tanulja meg a rajz alapjait, a koordinátákkal, a színátmeneteket, a szöveges rajzot és a képeket. Ezután alkalmazza megtanultait egy vászonóra felépítésével. Végül tedd össze és készítsen néhány különféle alapvető HTML5 játékot.
        • Eloquent JavaScript, 16. fejezet: Rajzolás a vászonra: Ez a szöveg a JavaScript programozók oktatására szolgál, nemcsak a webfejlesztők egyszerű trükkjeinek tanítására. Ez az egész interaktív e-könyv aranyminta, de ha a hangsúly a vászon elemmel való együttműködés megtanulására összpontosít, akkor a 16. fejezet szilárd alapot ad a JavaScript és a HTML vászon elem kölcsönhatásának..

        A vászon alapjainak szilárd megértésével tovább kell lépnie a fejlett technikákra:

        • Kreatív JS 31 napos vászon oktatóanyagok: elsajátítja a vászon elemet egy hónap alatt (többé-kevésbé). Fejezze be ezt a sorozatot, és megtanulhat számos fejlett vászon-animációs technikát.
        • HTML5 Rocks esettanulmány: Épületversenyző: vessen egy pillantást erre az esettanulmányra, és megnézheti, hogy a Google professzionális mérnökei hogyan működnek a JavaScript és a vászon segítségével.

        Nincs jobb módszer a tanulásra, mint valami építésére. Ezek az oktatóanyagok bemutatják, amit megtanultál használni, és megmutatják, hogyan lehet néhány egyszerű HTML5 játékot létrehozni:

        • CSS-trükkök tanulási vászon: Kígyó játék készítése: A CSS-trükkök ismertek technikailag kiváló oktatóanyagok és cikkek készítésével. Kövesse ezt az oktatót, és készítsen egy szórakoztató kígyójátékot, miközben egyszerre megtanulja, hogyan kell a vászonnal dolgozni egy Twitter-beli mérnöknél.
        • HTML5 Rocks No Tears útmutató a HTML5 játékokhoz: ez az oktató lépésről lépésre bemutatja az egyszerű űrhajós játék építésének folyamatát..
        • Envato Tuts + HTML5 vászon csempecsere-puzzle létrehozása: megtanulja, hogyan kell a vászon és a JavaScript használatával csempecsere-puzzle-t készíteni ebben az oktatóanyagban. Az eredmény egy egyszerű, állítható nehézségű alkalmazás lesz, amelyet bármilyen képhez felhasználhat.
        • Dev.Opera Pszeudo 3D-s játékok létrehozása HTML 5-vászonnal és Raycasting-nal: ez az oktatóanyag bemutatja, hogyan lehet ál-3D-s játéktérképet készíteni HTML5-rel és vászonnal a 90-es évek elején legendás Wolfenstein 3D játék stílusában. Noha ez az oktatóanyag nem fog létrehozni egy funkcionális 3D-s első személyes lövöldözős játékot, megtanulja, hogyan lehet elkészíteni egy hajózható 3D-s térképet, melyben kellékek és őrök találhatók..

        Nincs jobb mód a téma elsajátításához, mint egy vagy két mélységes szöveg kidolgozása. Az alábbiakban látható a jelenleg elérhető legjobb HTML5 vászon szövegek:

        • Fulton és Fulton HTML5 Canvas (2013): tanuljon interaktív multimédiás webes alkalmazásokat készíteni vászonnal és JavaScript-rel. Ez a szöveg az egyszerű 2D rajzokról, az algoritmusok felhasználásáról a matematikai alapú mozgás fejlesztésére, a videó és a képek használatáról, a vászon alkalmazások rugalmassá tételéről és egyebekről szól.
        • Töltött JavaScript grafika: Raffaele Cecco által készített HTML5 vászonnal, jQuery és egyéb elemekkel (2011): ez a fejlett szöveg segít a HTML5 vászon elsajátításában, és olyan fejlett technikák beépítéséhez, mint az ütközésérzékelés, az objektumkezelés, a sima görgetés és a Google adatmegjelenítő eszközök.
        • Core HTML5 vászon: Grafika, animáció és játékfejlesztés (2011), írta David Geary: ez nem egy szöveg kezdőknek. Úgy tervezték, hogy olyan tapasztalt fejlesztők olvassák el, akik középszintű JavaScript-ismeretekkel rendelkeznek. Noha ez a szöveg a vászon alapjait foglalja magában, a fejlett témákra összpontosít, mint például a játékfejlesztés, az egyéni alkalmazásvezérlők, a fizika alkalmazása a HTML5 játékokhoz és a mobil alkalmazások fejlesztése..

        Interaktív elemek

        A HTML5 hozzáadott néhány attribútumot az interaktív weboldalak létrehozásának megkönnyítéséhez.

        Részletek és összefoglaló címkék

        A HTML5 használatával létrehozhat listákat, amelyeket kibővíthetünk és összecsukhatunk a és a címkék között. Bár a felsorolt ​​listák ugyanúgy létrehozhatók, mint a HTML korábbi verzióival, a

          és
        • címkék, ezek statikusak és nem összecsukhatók.
          Elem

          A lista kiindulási pontjának biztosításához a fejlesztőknek az elemmel kell kezdődniük. Ez az elem hasonlóan működik, mint az

            címke. A következő példa bemutatja a kódszegmens elindításának módját ezzel a címkével:

            ...

            A részletcímkék hozzáadása nem elegendő a lista kitöltéséhez. Összefoglaló címkéket is hozzá kellett adni.

            Elem

            Az összefoglaló címke meghatározza a kibővíthető és összecsukható listára alkalmazott címkét. Az összecsukható és kibontható elemeket a tartalom határozza meg közvetlenül az összefoglaló címke alatt.

            Az összefoglaló címketartalom bármilyen HTML elemmel meghatározható, beleértve

            vagy

              . Az alábbiakban bemutatjuk a és a címkék egyszerű példáját:

              Listacímke

              Részletes információ itt található...

              A címkéket és a címkéket egy másik halmazba is beillesztheti. Ez összecsukható / kibontható listát hoz létre egy másik listán belül.

              Íme egy példa egy másik listán belüli listára a és címkék használatával:

              Tételek listája

              1. tétel

              2. tétel

              3. tétel

              A tétel

              B tétel

              4. tétel

              A részletek és az összefoglaló címkék felhasználhatók a weblapon dinamikusan megnyíló és bezáró listák hatásának létrehozására. Ez különféle forgatókönyvekre alkalmazható, beleértve a GYIK-kat is, amelyek választ adnak a nyitható vagy bezárható kérdésekre.

              Az összefoglaló címke tartalmazza a kérdést, míg az összecsukható tartalom kitölti a választ.

              Menü és Menuitem címkék

              Az interneten való böngészés közben a felhasználók a jobb egérgombbal kattintva férhetnek hozzá a böngésző menüjéhez. A megjelenő menüelemek böngészőnként változnak. Néhány új HTML5 címkével testreszabható a menü, hogy további felhasználói tevékenységeket vehessen fel.

              Ezenkívül a műveleteket testre lehet szabni a weboldal meghatározott szakaszaihoz vagy helyeihez. Például különféle műveletek vagy menüelemek jelenhetnek meg a navigációs területen, szemben a weboldal fő részével.

              A lehetséges címkék a és a címkék. Mivel ezek kísérleti címkék, ezért nem támogatják széles körben. A Firefox az egyetlen fő böngésző, amely jelenleg támogatja őket.

              Elem

              Bármikor, amikor egy menüelemet hozzá kell adni, az elemek sorozatának a címkével kell kezdődnie. Ez a sorozat a záró címkével zárul, .

              A fejlesztőknek óvatosan kell használni ezeket a címkéket, mivel ezek környezetmenük, és az, hogy megjelennek-e, attól függ, hogy a kód hol helyezkedik el a HTML fájlban. Ez különösen igaz, amikor a fejlesztők elemeket használnak. Vegye figyelembe a következő kódot:

              ...

              Ebben az esetben az egyéni menü elemei jelennek meg, amikor a felhasználó a jobb egérgombbal kattint a „tmpDiv” alatt. A legtöbb HTML5-címkehez hasonlóan a menücímkének is vannak címkéi és típusa.

              A címke egyszerűen a menü azonosítója, míg a típus meghatározható kontextusként, listaként vagy eszköztárként. Annak ellenére, hogy több menütípust meg lehet határozni, csak a helyi menü támogatott.

              Elem

              Elemeknek a menübe történő hozzáadásához a fejlesztőknek meg kell adniuk az elemek nevét a címke segítségével. A címkének vannak olyan tulajdonságai, amelyek befolyásolják a menüpont megjelenését és viselkedését is.

              A menuitem címke attribútumai közé tartozik a címke, az ikon és a onclick.

              A címke meghatározza azt a szöveget, amelyet a felhasználó látni fog a menüelemhez, amikor a menüt a böngészőből aktiválja. A fejlesztők megadhatják a menü bal oldalán megjelenő menüponthoz használt ikont. Az onclick attribútum vezérli a műveleteket, amikor a felhasználó aktiválta a menüpontot.

              Az onclick attribútum által végrehajtott műveletek végrehajthatják a javascript kódot. A felhasználók például figyelmeztető mezőt láthatnak. Íme egy példa arra, hogyan állítsunk be egy menuitem címkét, amely felbukkanó feliratot jelenít meg: “hello”:

              A menü és a menuitem címkék felhasználhatók speciális menük létrehozására. Ez lehetővé teszi a felhasználók számára, hogy a kattintott menüelemtől függően különféle műveleteket hajtsanak végre. Óvakodjon azonban ezeknek a címkéknek a korlátozott támogatásáról.

              Natív drag and drop

              A HTLM5 előtt a fejlesztőknek JavaScript könyvtárakat, például a jQuery UI-t vagy Dojo-t kellett felhasználniuk, hogy drag and drop animációkat adjanak a webhelyekhez és az alkalmazásokhoz..

              A HTML5 azonban hozzáadja a natív böngésző támogatást a drag and drop eseményekhez, a JavaScript API-t és a dedikált jelöléseket ezen interakciók támogatására. Ebben a szakaszban áttekintjük a HTML5-ös húzást és kódoljuk a szolgáltatás alapvető megvalósítását.

              Építőkockák

              A drag and drop interakció létrehozásához a HTML jelölésnek három típusú elemet kell tartalmaznia:

              • Forrás elem: a húzandó elem, amelyet ilyenként a HTML5 attribútum jelöl, draggable ="igaz".
              • Cél elem: az az elem, amelybe az áthúzott elem kerül, és amelyet a HTML5 attribútum droppable = jelöl meg"igaz".
              • Hasznos teher: az átvitt adatok, amikor egy húzott elem leesik.

              Drag and drop API események

              A JavaScript API hat eseményt és egy objektumot tartalmaz, amelyeket felhasználni kell a drag and drop interakció létrehozásához.

              • A dragstart esemény akkor villan, amikor egy húzható objektum van kiválasztva.
              • A dragenter esemény akkor jön létre, amikor az egérmutató csepegtethető objektumba lép, miközben húzható objektum van kiválasztva.
              • A dragover esemény minden egyes alkalommal bekapcsol, amikor az egér mozog, miközben egy húzható objektumot választanak ki, és az egérmutató egy cseppobjektum fölött van..
              • A dragleave esemény akkor aktiválódik, amikor egy húzható objektumot választott ki, és az egérmutató eldobható tárgyat hagy.
              • A jelmagyarázat esemény akkor jön létre, amikor az áthúzható objektumot az egérgomb elengedésével vagy a böngészőablakból való kilépésével törli.
              • A csepp esemény akkor jön létre, amikor egy húzható objektumot ledobható egy leejthető tárgyra.
              • Az dataTransfer objektumot a húzott adatok tárolására használják.

              Például húzza és dobja

              Hogy bemutassuk, hogyan használhatja a HTML5 drag and drop funkciókat a webhelyén, hozzunk létre egy egyszerű modult, amely lehetővé teszi a webhely látogatói számára, hogy három elemet rendezzenek egymásnak megfelelő sorrendbe..

              A példához inspirációt nyújtó cikk a HTML5 Rocks: Natív HTML5 Drag and Drop.

              Kezdjük a HTML-lel

              Kedvenc DnD megvalósítás
              HTML51
              jQuery UI2
              Dojo3

              Három osztót készítettünk, amelyek mindegyike tartalmaz egy-egy szöveget egy eltérő drag and drop megvalósításhoz. Mi is tovább haladtunk, és mindhármat alapértelmezett sorrendbe rendeztük, az 1, 2 és 3 hozzárendelt preferenciával.

              Mindegyik div-nek megkapta a droppable = attribútumot"igaz" és húzható ="igaz" hogy tükrözze azt a tényt, hogy mindhárom cserét egymással cseréljük.

              Lehet hozzá néhány alapvető stílus.

              #dobozok {
              szöveg igazítás: középpont;
              szélesség: 100%;
              maximális szélesség: 658px;
              margin: 0 auto;
              margin: 0 auto;
              font-család: 'Source Sans Pro', FreeSans, Arimo,"Droid Sans",Helvetica, Arial, talpatlan;
              túlcsordulás: automatikus;
              }
              .címsor {
              kijelző: blokk;
              betűméret: 1,25em;
              párnázat: 10 képpont;
              }
              .doboz {
              háttér szín: # bcd5e0;
              szegély: 2xx szilárd #aaa;
              margin: 10 képpont;
              kurzor: mozgatni;
              túlcsordulás: automatikus;
              }
              .box .dnd-tech {
              betűméret: 1em;
              kijelző: inline-block;
              párnázat: 10 képpont 0;
              }
              .doboz .pozíció {
              betűméret: 1em;
              balra lebeg;
              párnázat: 10 képpont;
              jobb-jobb: 2 képpont szilárd #aaa;
              szín: #fff;
              háttér szín: # 0a5194;
              }

              Noha nem fogjuk átvágni ezeket a stílusokat soronként, lényegében az, amit tettünk, az, hogy a dobozakat egymás mellé rendezzük, és az egész stílusra alkalmazzuk. Így néz ki most a dobozunk:

              Drag-and-drop

              Készítsünk néhány stílust, amelyeket alkalmazni fogunk a húzható és leejthető elemekre, miközben azokat meghúzzuk.

              .box.dragged {
              átlátszatlanság: 0,5;
              }
              .box.over {
              szegély: 2px szaggatott # 222;
              átlátszatlanság: 0,5;
              }

              A JavaScripten. Kezdjük azzal, hogy létrehozunk olyan funkciókat, amelyek a felhasználói aktivitás alapján kezelik az áthúzott és az osztályok hozzáadását és eltávolítását.

              dragStartHandler (e) függvény {
              this.classList.add ('húzott');
              }

              dragEnterHandler (e) függvény {
              this.classList.add ('vége');
              }

              dragLeaveHandler (e) függvény {
              this.classList.remove ( 'over');
              }

              dragEndHandler (e) függvény {
              [] .forEach.call (dobozok, funkció (doboz) {
              box.classList.remove ('over', 'draged');
              });
              }
              var box = document.querySelectorAll ('# box .box');

              Jelenleg ezek a funkciók nem csinálnak semmit. Pillanatnyilag mindegyiket egy megfelelő eseményhez kötjük. Most nézzük meg, mit csinál mindegyik.

              Az első funkció, a dragStartHandler hozzáadja a húzott osztályt a húzott elemhez.

              A következő két függvény hozzáadja és eltávolítja az overlass osztályt a csepegtethető elemekből, mivel egy húzott elem áthalad rajtuk.

              Az utolsó függvény az összes dobozon keresztül ismétlődik, és eltávolítja a felül és húzott osztályokat.

              Ezután meg kell írnunk egy olyan funkciót, amely egy kis tisztítási munkát végez a dragover eseményének kezelésére.

              dragOverHandler (e) függvény {
              if (e.preventDefault) {
              e.preventDefault ();
              }
              hamis visszaadást;
              }

              Miután ezt a funkciót a dragoverhez kötjük, letiltja az alapértelmezett böngésző viselkedést, amely néha akadályba ütközhet a drag and drop interakció során.

              Ezután két különféle funkcióhoz kódot kell hozzáadnunk, hogy az dataTransfer objektum segítségével kiválaszthassuk azokat az adatokat, amelyeket az interakció mozgat..

              dragStartHandler (e) függvény {
              this.classList.add ('húzott');

              dragData = ez;
              e.dataTransfer.setData ('text / html', this.firstElementChild.innerHTML);
              }

              dropHandler (e) függvény {
              if (e.stopPropagation) {
              e.stopPropagation ();
              }
              if (dragData! = ez) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML;
              this.firstElementChild.innerHTML = e.dataTransfer.getData ('text / html');
              }
              hamis visszaadást;
              }

              Már láttuk a dragStartHandler funkciót, de most két sort adtunk hozzá. Az első a húzott mezőt a dragData változóhoz rendeli.

              A második a dataTransfer objektum setData módszerét használja a kijelölt mező első gyermek elemének (a Név elem) belső HTML-kódjának hozzárendelésére az dataTransfer objektumhoz..

              A dropHandler funkció először leállítja a böngésző alapértelmezett viselkedését. Ezután ellenőrzi annak ellenőrzését, hogy a húzott objektum nemcsak ledobható objektum. Ha nem, a következő két sor behúzza és kicseréli a húzható és ledobható dobozok nevét.

              Tehát, most már minden funkciónk van a helyén, és össze kell kapcsolnunk azokat a hat drag and drop DOM eseménynel. Ezt megtehetjük egyetlen forEach funkcióval.

              [] .forEach.call (dobozok, funkció (doboz) {
              box.addEventListener ('dragstart', dragStartHandler, false);
              box.addEventListener ('dragenter', dragEnterHandler, false);
              box.addEventListener ('dragover', dragOverHandler, false);
              box.addEventListener ('dragleave', dragLeaveHandler, false);
              box.addEventListener ('drop', dropHandler, false);
              box.addEventListener ('dragend', dragEndHandler, false);
              });

              Ez a kód az, hogy meghallgatja mindkét hat drag and drop eseményt az egyes mezőkön, majd futtat egy funkciót a kiváltott események alapján. Miután összegyűjtöttük a kódot, előállítottuk ezt a szép húzható és ledobható dobozkészletet. Megpróbál:

              #dobozok {
              szöveg igazítás: középpont;
              szélesség: 100%;
              maximális szélesség: 658px;
              margin: 0 auto;
              betűtípus-család: „Source Sans Pro”, FreeSans, Arimo, „Droid Sans”, Helvetica, Arial, sans-serif;
              túlcsordulás: automatikus;
              }
              .címsor {
              kijelző: blokk;
              betűméret: 1,25em;
              párnázat: 10 képpont;
              }
              .doboz {
              háttér szín: # bcd5e0;
              szegély: 2xx szilárd #aaa;
              margin: 10 képpont;
              kurzor: mozgatni;
              túlcsordulás: automatikus;
              }
              .box .dnd-tech {
              betűméret: 1em;
              kijelző: inline-block;
              párnázat: 10 képpont 0;
              }
              .doboz .pozíció {
              betűméret: 1em;
              balra lebeg;
              párnázat: 10 képpont;
              jobb-jobb: 2 képpont szilárd #aaa;
              szín: #fff;
              háttér szín: # 0a5194;
              }
              .box.dragged {
              átlátszatlanság: 0,5;
              }
              .box.over {
              szegély: 2px szaggatott # 222;
              átlátszatlanság: 0,5;
              }

              Kedvenc DnD megvalósítás

              HTML51
              jQuery UI2
              Dojo3

              dragStartHandler (e) függvény {
              this.classList.add ('húzott');

              dragData = ez;
              e.dataTransfer.setData ('text / html', this.firstElementChild.innerHTML);

              }

              dragEnterHandler (e) függvény {
              this.classList.add ('vége');
              }

              dragLeaveHandler (e) függvény {
              this.classList.remove ( „over”);
              }

              dragOverHandler (e) függvény {
              if (e.preventDefault) {
              e.preventDefault ();
              }
              hamis visszaadást;
              }

              dropHandler (e) függvény {
              if (e.stopPropagation) {
              e.stopPropagation ();
              }
              if (dragData! = ez) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML;
              this.firstElementChild.innerHTML = e.dataTransfer.getData ('text / html');
              }
              hamis visszaadást;
              }

              dragEndHandler (e) függvény {
              [] .forEach.call (dobozok, funkció (doboz) {
              box.classList.remove ('felül', 'húzva');
              });
              }

              var box = document.querySelectorAll ('# box .box');
              [] .forEach.call (dobozok, funkció (doboz) {
              box.addEventListener ('dragstart', dragStartHandler, false);
              box.addEventListener ('dragenter', dragEnterHandler, false);
              box.addEventListener ('dragover', dragOverHandler, false);
              box.addEventListener ('dragleave', dragLeaveHandler, false);
              box.addEventListener ('drop', dropHandler, false);
              box.addEventListener ('dragend', dragEndHandler, false);
              });

              Mire vársz?

              A HTML5 hozzáadja a natív böngésző támogatást a húzható és leejthető elemekhez. A drag and drop funkció megvalósítása hat különféle drag and drop esemény és egy adatobjektum manipulálását foglalja magában a JavaScript segítségével.

              iframe

              Alapvetően az iframe egy HTML elem, amely egy weboldalon beágyazott kis böngészőablakot hoz létre, amelybe bármilyen HTML dokumentumot betölthet..

              Mire használják az iframe-ket??

              A modern web iframe-kereteinek egyik leggyakoribb felhasználása a streaming media beágyazása egy weboldalra. A média streaming webhelyek, például a Spotify, a Vimeo és a YouTube az iframe-kereteket használják, hogy tartalmukat beágyazhassák más webhelyekre..

              Például lépjen a YouTube-ra, nyisson meg bármilyen videót, kattintson a jobb gombbal a videóra, és válassza a Beágyazási kód másolása lehetőséget. Ha ezt megteszi, a kód, amely így néz ki, átmásolódik a vágólapra:

              Adja hozzá ezt a kis kódot egy weboldalhoz, és egy iframe keret fogja betölteni a src attribútum által hivatkozott URL-címen tárolt YouTube videót..

              A streaming media nem csak az, ha a keretek jók. Az iframe-ek használatának másik módja a tartalom elkülönítése a weboldal többi részétől. Íme két példa:

              • Azok a webhelyek, amelyek sok kódot mutatnak az oktatóanyagokban, használhatják az iframe-kereteket a kód megjelenítéséhez anélkül, hogy küzdeniük kellene az alapértelmezett stílusok és szkriptek ellen, amelyek a webhelyükre vonatkoznak.
              • A harmadik féltől származó hirdetéseket megjelenítő webhelyek gyakran iframe-kereteket használnak ezeknek a hirdetéseknek a betöltésére, így a hirdetések kicserélhetők a forrásdokumentumban szereplő kód kicserélésével, anélkül, hogy megváltoztatnák a weboldal kódját, ahol a hirdetés megjelenik..

              A HTML 4.01 iframe

              Az iframe elemet a HTML 4.01 bevezette, és négy elsődleges attribútumot tartalmaz:

              • src: meghatározza az iframe fájlban megjelenítendő HTML dokumentum URL-jét.
              • szélesség és magasság: jelzi az iframe méretét pixelben.
              • név: lehetővé teszi, hogy az iframe célozzon meg egy, űrlap, gomb vagy bemeneti elem segítségével.

              A HTML 4.01 számos másodlagos jelentőségű attribútumot is tartalmazott. Ezek közül sok azonban elavult vagy egyenesen eltávolításra került a HTML5-ben.

              Iframe attribútumok eltávolítva a HTML5 segítségével

              Az eltávolított attribútumok legnagyobb csoportja azok voltak, amelyek a CSS-rel jobban kezelt tényezőkre vonatkoztak.

              • Az igazítási attribútum elavult a float, display és margin CSS tulajdonságok használatának javára az iframe elrendezés vezérlésére.
              • A frameborder attribútum elavult a CSS határok javára.
              • A marginheight és a marginwidth attribútumok elavultak a CSS padding javára.
              • A görgető attribútum elavult a túlcsordulás alkalmazása érdekében: rejtett; az iframe görgetősávok elrejtése.

              Egy további tulajdonság, a longdesc, széles körben elterjedt visszaélésekkel szenvedett. Ennek eredményeként ez már elavult.

              Iframe attribútumok hozzáadta a HTML5

              A HTML5 két új attribútumot adott hozzá az iframe elemhez: sandbox és srcdoc.

              A sandbox attribútumot az iframe-tartalom képességeinek korlátozására használják.

              Például, ha csak homokozót ad hozzá az iframe-hez, megakadályozza, hogy a beágyazott tartalom szkripteket futtasson, űrlapokat küldjön be, tartalmat töltsön be a legfelső szintű böngészési környezetbe és egyebek mellett másokat. Az iframe-re alkalmazott korlátozások csökkenthetők az érték hozzáadásával az attribútumhoz.

              Például: sandbox ="allow-formák" lehetővé teszi az iframe formában szereplő űrlapok benyújtását. Ennek az attribútumnak a további értékei között szerepelnek, de nem korlátozódnak ezekre: engedélyek-felbukkanók, engedélyezési azonos származású, engedélyezési szkriptek és engedélyezési top-navigáció.

              Az srcdoc attribútum felhasználható az iframe-ben megjelenítendő HTML meghatározására. Például a következő kód megjelenít egy képet egy iframe-ben:

              Iframe források

              Ha szeretne többet megtudni az iframe-keretekről, akkor az egyik legátfogóbb forrás a Mozilla Developer Network iframe elem referenciaoldala. Itt található az iframe-attribútumok részletes leírása, beleértve az összes lehetséges homokozó-érték alapos ismertetését.

              Microdata

              Amikor meglátogatja a tárhely-értékeléseinket, láthat valamit, mint például „752 vélemény” és „4 csillag az 5-ből” értékelést. Ösztönösen megérti, hogy 752 felhasználói véleményt összevontak, és így az összesített házigazda-besorolást 4 csillagból 5-ből kapják.

              A keresőmotorok azonban nem olyan okosak, mint te, és itt érkeznek be a mikroadatok.

              A mikroadatok olyan HTML-attribútumok halmaza, amelyeket a HTML5 specifikáció részeként adtak hozzá, hogy bizonyos típusú tartalmak számára gépi olvashatóságú címkéket biztosítsanak. Ezen címkék használata lehetővé teszi a keresőmotorok számára, hogy jobban megértsék és indexeljék webhelyének tartalmát, és jobb keresési eredményeket hozzanak létre.

              A mikroadatok alapjai

              A mikroadatok kapcsolódó név-érték párokat tartalmaznak, amelyek egyetlen elemre vannak csoportosítva. Vessen egy általános példát.

              Egy elemmel kezdjük, például egy weboldallal. Amint megtudjuk, hogy egy weboldallal foglalkozunk, számos név-érték pár létezik, amelyet potenciálisan társíthatunk az adott webhellyel, például URL, webhely neve vagy leírás.

              A mikroadat-elem létrehozásához először egy szülőelemet kell létrehoznunk, amely tartalmazza a weboldal összes mikroadatait. Ezután felsorolnánk a mikroadatokat a gyermek elemekben, és megfelelő mikroadatokkal megcímkézzük őket.

              Végül a keresőmotor belép az oldalra, azonosítja a webhely elemet, és az összes megfelelő mikroadatot hozzárendeli ehhez az elemhez..

              Ha ez mind kicsit elvontnak hangzik, a tényleges mikroadatok jelölése sokkal világosabbá teszi ezt. De mielőtt ezt megtennénk, be kell mutatnunk a mikroadat-attribútumokat.

              Mikroadatok jelölése

              Négy mikroadat-attribútum létezik, amelyek a HTML5 specifikáció részét képezik:

              • A itemscope az az elem, amely új elemet hoz létre.
              • Az elemtípus hozzáadódik az elemszkóphoz, hogy meghatározza a létrehozandó elem típusát. A legtöbb esetben a schema.org elemtípust használják.
              • A itemprop hozzáadódik minden elemhez, amely a típus tulajdonságát tartalmazza.
              • A itemref hozzáadódik az elemszkóp elemhez, és olyan elemeket társít, amelyek nem közvetlenül a tárgyköves elem leszármazottjai az elemhez.

              Tegyük fel ezeket az attribútumokat egy kitalált internetes házigazda-besoroláshoz, hogy mindet láthassa.

              Super Linux tárhely

              Névleges:
              4 csillag az 5-ből
              423 valódi felhasználói értékelés.

              Kiemelt felhasználói áttekintés

              Ez egy nagy házigazda! szeretem őket!
              5 csillag az 5-ből!

              A fenti kód létrehoz egy elemet, amely számos név-érték párt tartalmaz:

              • Először egy vállalati elemet hoztunk létre.
              • Az elem neve Super Linux tárhelyre van állítva.
              • Az elem URL-je a http://superlinuxhosting.com értékre van állítva
              • Az elemösszesített áttekintés egy beágyazott elem, amely két név-érték párt tartalmaz: 4-ből 5-ös besorolási érték és 423-as áttekintési szám.
              • Végül, a legelső elemhez hozzáadott itemref attribútum révén az utónév-érték pár egy áttekintés, amelynek értéke két név-érték párt tartalmaz: egy leírást és az 5-ből 5 csillagot.

              A mikroadatok jelenlétével a Google és más keresőmotorok indexelnék az információkat, és felismernék a Super Linux Hosting társaságot és a hozzá tartozó összesített minősítést és egyéni áttekintést.

              Mikroadat-források

              Ha többet szeretne megtudni a mikroadatokról, akkor két helyre kell lépnie:

              • A Schema.org használatának megkezdése A mikroadatok használata a téma egyszerű bevezetése. Ezenkívül szeretné kéznél tartani az összes schema.org elemtípus listáját.
              • HTML: Az Életminőség, 5. szakasz, mikroadatok a mikroadatok műszaki áttekintése. Ha meg akarja tanulni a mikroadatok használatát a schema.org-n kívüli egyéni alkalmazásokhoz, ez az az erőforrás, amelyet keres.

              Globális attribútumok

              Bármely HTML elemhez hozzáadhatók attribútumok az elem alapértelmezett funkcionalitásának vagy viselkedésének módosítására. Ezeket az attribútum elnevezésével és az elem nyitó címkéjében megadott attribútumérték megadásával adják hozzá, így:

              Tartalom

              A legtöbb attribútum csak meghatározott típusú elemekre alkalmazható. Más attribútumokat, amelyeket globális attribútumoknak nevezünk, bármilyen HTML elemmel fel lehet használni. A HTML5 specifikáció a következő globális attribútumokat határozza meg:

              • accesskey: gyorsbillentyűt rendel hozzá egy elemhez.
              • osztály: hozzáad egy osztálynevet, hogy lehetővé tegye egy elem CSC-vel történő stíluscímkézéshez vagy JavaScript programhoz való célzását.
              • contenteditable: az elemet a weboldal látogatója szerkeszthetővé teszi.
              • környezetmenü: az egyéni helyi menüopciót társítja egy elemhez.
              • data- *: egyéni adatattribútum, amely felhasználható oldalspecifikus információk tárolására a CSS-stíluslapokon vagy JavaScript-programokon belüli kiválasztáshoz.
              • dir: irányultságot rendel az elem szöveges tartalmához.
              • húzható: lehetővé teszi egy elem húzását a natív HTML5 támogatással a drag and drop eseményekhez.
              • dropzone: meghatározza azt a műveletet, amelyet egy húzott elem eldobásakor kell elvégezni. A lehetőségek között szerepel a másolás, a hivatkozás és az áthelyezés.
              • rejtett: egy elem elrejtésére szolgál, amíg meg nem jelenik. Az attribútumot a JavaScript segítségével eltávolítják, ha erre indokolt.
              • id: egyedi azonosítót rendel az elemhez.
              • lang: meghatározza a társított elem tartalmának nyelvét.
              • helyesírás-ellenőrzés: meghatározza, hogy ellenőrizni kell-e a felhasználói bevitelt a helyesírás szempontjából.
              • stílus: lehetővé teszi a CSS stílusok csatolását közvetlenül a HTML elemhez.
              • tabindex: meghatározza azt a helyet a lap indexében, ahol az elemnek megjelennie kell.
              • cím: hozzáad egy szöveget, amely eszköztippként jelenik meg, amikor a látogató az egeret az elem fölé viszi.
              • fordítás: az adott HTML elemek szöveges tartalmának böngészőben történő fordításának megakadályozására szolgál.

              Eseménykezelők

              Ezen felül több mint 50 eseménykezelő van, amelyeket HTML attribútumokként adhatunk hozzá bármely HTML elemhez. Az eseménykezelők mindegyike felhasználható egyes kapcsolódó kód futtatására az esemény bekövetkezésekor.

              Az alábbi lista tartalmazza az eseménykezelő összes attribútumát, amelyet az esemény leírása követ, amely aktiválja a kezelőt.

              Érdemes megjegyezni, hogy ezek közül az eseménykezelők közül csak néhány HTML elemre lehet alkalmazni, annak ellenére, hogy a HTML specifikáció lehetővé teszi azok alkalmazását bármely HTML elemnél.

              • onabort: egy elem betöltése megszakadt.
              • onfocus és onblur: egy elem megkapta vagy elvesztette a fókuszt.
              • oncancel: a felhasználók elutasítottak egy párbeszéd elemet.
              • oncanplay és oncanplaythrough: a média elem elegendő adatot töltött le a lejátszás megkezdéséhez vagy a lejátszás pufferolás nélküli befejezéséhez.
              • onchange: a formai elem, például egy input vagy textarea elem értéke megváltozott.
              • onclick és ondblclick: egy elemre kattintottak vagy duplán kattintottak.
              • onclose: a közeli események egyike történt.
              • oncontextmenu: A helyi menüt az elem jobb egérgombbal történő megnyitásával nyitották meg.
              • oncopy, oncut és paste: a megcélzott elem kivágásra, lemásolásra vagy beillesztésre került.
              • oncue-on: a médiaforráshoz társított szöveges műsorszám megváltoztatta az aktuálisan megjelenő útmutatásokat.
              • ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop: egy húzható elemet manipulálunk a HTML5 drag and drop API használatával.
              • ondurationchange: a média elem időtartam-tulajdonsága megváltozott.
              • mentesítve: a média elem üres.
              • onended: elérte a médiaelem végét.
              • onerror: az erőforrás betöltése nem sikerült.
              • oninput: egy bemeneti vagy átengedhető elem értéke megváltozott.
              • on érvénytelen: a benyújtott elem validálása sikertelen.
              • onkeydown, onkeypress és onkeyup: billentyűzet megnyomására került sor.
              • onload, onloadeddata, onloaded metadata, onloadstart: vagy egy teljes erőforrás, vagy az erőforrás meghatározott része befejeződött.
              • onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover és onmouseup: egér alapú interakció történt a felhasználó és az elem között.
              • onwheel: az egér kerékgombját elforgatták.
              • lejátszás és lejátszás: a médiaelem megkezdi a lejátszást vagy szüneteltetett (szándékosan vagy további adatokra várva), és készen áll a lejátszás folytatására.
              • onpause: a médialejátszás szünetel.
              • folyamatban: egy művelet megkezdődött és folyamatban van.
              • onratechange: a média lejátszási sebessége megváltozott.
              • onreset: egy űrlapelem vissza lett állítva.
              • onsize: a dokumentum nézetablak mérete megváltozott.
              • onscroll: a nézetablakot vagy egy elemet görgették.
              • onseeked és onseeking: a média elem keresési tulajdonsága már használatban van vagy használatban van.
              • onselect: az elem egy részének tartalma ki lett választva.
              • onshow: elindult a helyi menü, míg a fókuszban lévő elemnek kontextusmenü-attribútuma van.
              • telepítve: a médiakeresés késik vagy váratlanul megállt.
              • beküldés: űrlapelem benyújtva.
              • felfüggesztés: a médiaelem betöltését felfüggesztettük.
              • ontimeupdate: a média elem aktuális idő attribútuma frissült.
              • onggle: egy részlet elem nyitva vagy zárva.
              • onvolumechange: megváltozott a médiaelem lejátszási hangereje.
              • várakozás: a lejátszás leállt, miközben további adatok letöltésére vár.

              DOM elemek

              Amikor egy böngésző weboldalt jelenít meg, akkor nem csak a weblap HTML-jét teszi. Ehelyett a böngésző először egy helyi, interaktív modellt készít az oldal HTML tartalmáról.

              Ezt a böngésző memóriájában helyben épített és tartott modellt nevezik Document Object Model (DOM) -nek. A DOM-n belül minden HTML elem egyetlen csomópontként létezik, és a csomópontok összege alkotja a DOM-ot.

              Hozzáférés a DOM-hoz

              Annak érdekében, hogy a szkriptek olyan nyelveket, mint a JavaScript, kölcsönhatásba lépjenek a DOM-tal, minden csomópontnak szabványosított, nyelvtől független attribútumokkal és módszerekkel kell felhívni..

              Ezeket az attribútumokat és eseményeket interfészdefiníciós nyelv (IDL) segítségével definiálják, és ezek az IDL attribútumok és események a DOM-csomópontokat bármilyen programozási nyelven írt szkripteknek teszik ki, bár a JavaScript messze a leggyakoribb.

              Az eredmény egy olyan rendszer, amely HTML elemet vesz fel (például:

              Néhány szöveg

              ), és létrehoz egy DOM csomópontot, amely tartalmazza az összes információt (például: p csomópont Néhány szöveg értékkel és IDL attribútumokkal className ="test-text" és a cím ="példa").

              A szkriptnyelvek ezután felhasználhatók a DOM-csomópontok manipulálására a csomópont IDL-attribútumainak hivatkozásával.

              Alapvető IDL attribútumok és módszerek

              A HTML5 specifikáció meghatározza a HTMLElement felületet, és felsorol számos IDL attribútumot és módszert, amelyek az összes HTML elemre vonatkoznak.

              Minden egyes DOM csomópont örökli ezeket az IDL attribútumokat és metódusokat, és opcionálisan kibővítheti a HTMLElement felületet további attribútumok és módszerek hozzáadásával.

              A HTMLElement interfész

              A HTMLElement felület minden DOM csomópontra vonatkozik, és három csoportra osztható: metaadat-attribútumok, felhasználói interakciók és globális eseménykezelők.

              A metaadat-attribútumok tartalmazzák:

              • A cím IDL attribútumát a cím HTML attribútuma állítja be.
              • A lang IDL attribútumot a lang HTML attribútum állítja be, és a DOM csomópontba beágyazott tartalom nyelvének azonosítására szolgál. Ha nem adunk meg lang attribútumot, akkor a legközelebbi szülőcsomóponthoz rendelt nyelvet vonjuk be.
              • A fordító attribútumot arra használják, hogy megakadályozzák a weboldal tartalmának kliens általi fordítását. Az attribútum alapértelmezés szerint fordítja = igen a dokumentum szintjén, és manuálisan kell beállítania, hogy fordítsa = ne minden olyan csomópontnál, amelyeket nem kell lefordítani.
              • A dir attribútum határozza meg a tartalmazott szöveg irányát. Az attribútumnak nincs alapértelmezett értéke.
              • adatkészlet IDL attribútum az egyéni adat-attribútum adatainak * csak DOM-ábrázolása. Amikor egyéni adatattribútumokat adunk hozzá egy HTML elemhez, például data-postId ="6057", ezeket az adatattribútumokat egyetlen adatkészlet IDL-attribútummá aggregálják és a kapott DOM-csomóponthoz rendelik.

              A felhasználói interakciók magukban foglalják:

              • A rejtett attribútum egy logikai érték, amely meghatározza, hogy a DOM-csomópont látható-e vagy sem.
              • A click () esemény szimulálja az egérkattintással történő felhasználói interakciót.
              • A tabIndex attribútum határozza meg a DOM-csomópont sorrendjének megjelenését a lap indexében.
              • A focus () esemény olyan felhasználói interakciót szimulál, amelyben a célzott DOM csomópont kerül fókuszba.
              • Az blur () metódus a célzott DOM csomópont fókuszálására szolgál.
              • Az accessKey IDL attribútumot az accesskey HTML elem attribútum állítja be, és hozzárendel egy billentyűparancsot a célzott csomóponthoz..
              • Az accessKeyLabel IDL attribútum a hozzárendelt hozzáférési kulcs csak olvasható ábrázolása.
              • A contentEditable IDL attribútumot a contenteditable HTML elem attribútum állítja be, és meghatározza, hogy a felhasználók szerkeszthetik-e a célcsomópontot.
              • Az isContentEditable IDL attribútum csak olvasható logikai érték, amely jelzi, hogy a célcsomópont szerkeszthető-e..
              • A helyesírás-ellenőrző IDL attribútum egy logikai érték, amely meghatározza, hogy a DOM-csomópont, általában egy bemeneti csomópont - tartalmát ellenőrizni kell-e a helyes helyesírás szempontjából.

              A globális eseménykezelők listája ötven bejegyzésből áll. A következő tíz eseménykezelő a legfontosabb és leggyakrabban használt globális eseménykezelők:

              • kattintásra
              • onfocus
              • onkeypress
              • Feltöltés alatt
              • onmouseenter
              • onmouseleave
              • onmouseover
              • onscroll
              • onSelect
              • onsubmit.

              Forms

              Az űrlapok régóta részei a HTML-specifikációnak. A HTML5 formában azonban a funkcionalitás jelentősen kibővül a bemeneti és űrlapelemek új attribútumaival, új beviteli típusokkal és még néhány vadonatúj elemmel is..

              HTML forma alapjai

              HTML forma létrehozásakor általában az űrlapcímkével kell kezdenie:

              Ezen címkék között különféle mezőket helyezhet el az adatok elfogadására és benyújtására. A legfontosabb formaelemek a következők:

              • A bemeneti elem, amely alapértelmezés szerint egy normál szövegmezőre vonatkozik. A type attribútum felhasználásával azonban a bemeneti elemek formázhatók a jelszavak elfogadásához, az összes űrlapmező visszaállításához, a rádiógombok vagy a jelölőnégyzetek megjelenítéséhez, a gombok létrehozásához és az űrlaptartalom benyújtásához..
              • A textarea elem, amellyel szöveges beviteli területeket hozhat létre a hosszú formájú gépelt válaszokhoz.
              • A kiválasztó elem, amelyet az opciós elemmel együtt használnak legördülő listák létrehozására. A kiválasztó elem elkészíti a listát, és a kiválasztott elembe beágyazott opciók egy másik, a listában elérhető opciót képviselnek.
              • A gomb elem, amelyet az űrlap gombok létrehozásához használnak.

              HTML5 űrlapjavítások

              A HTML5 számos új típusú bemenetet, bemeneti és űrlapos attribútumot, valamint három új űrlapelemet vezetett be. Fedezzük fel mindegyiket egymás után.

              Új bemeneti elem típusok:

              • A színbeviteli típus egy olyan mezőt azonosít, amelynek el kell fogadnia a színt, és egyes böngészők színválasztót generálnak, amikor a mező fókuszban van.
              • A HTML5 hat új idő- és dátumbeviteli típust vezetett be, amelyek mindegyike dátumválasztót generál a támogatott böngészőkben:
                • dátum: válassza ki azt a dátumot, amely tartalmazza a napot, a hónapot és az évet.
                • nappali idő: válassza ki a dátumot és az időt, valamint az időzóna adatait.
                • naptári-helyi: válassza ki a dátumot és az időt, de hagyja ki az időzóna-információkat.
                • idő: idő kiválasztása.
                • hét: válasszon egy hetet és évet.
                • hónap: válassza ki a hónapot és az évet.
              • Az e-mail beviteli típus azonosítja azt a mezőt, amelynek el kell fogadnia az e-mail címet. A támogatott böngészők elvégzik az alapvető bemeneti ellenőrzést is, hogy megbizonyosodjanak arról, hogy egy e-mail címet beírtak-e.
              • A HTML5 két új, számorientált bemeneti típust vezetett be: a számot és a tartományt. A szám bármilyen számot megadhat, az opcionális minimális és maximális értékkorlátozások függvényében. A Range létrehoz egy csúszkát, amelyet minimális és maximális értékek korlátoznak, amelyek lehetővé teszik a felhasználó számára, hogy az elfogadható értékek megadott tartományán belül értéket válasszon..
              • A keresési bemeneti típust a keresési prompt azonosításához használják.
              • A tel beviteli típust olyan mező azonosításához használják, amelyben el kell fogadni a telefonszámot. A támogatott böngészők elvégzik az alapvető bemeneti ellenőrzést annak megerősítésére, hogy a telefonszám be lett-e írva.
              • Az URL beviteli típus egy olyan mezőt azonosít, amelynek el kell fogadnia az URL-t. A támogatott böngészők elvégzik az alapvető érvényesítést, a támogatott mobil eszközök pedig megjeleníthetnek .com typepad gombot.

              Új bemeneti elem attribútumok:

              • automatikus kiegészítés: az automatikus kiegészítés be- és kikapcsolása egy bemeneti elemnél. Ha be van kapcsolva, az automatikus kiegészítés értékei kerülnek a mentett űrlapbejegyzésekre.
              • autofókusz: megad egy bemeneti elemet, amely automatikusan fókuszba kerül, amikor az oldal betöltődik.
              • forma: egy űrlaphoz hozzárendelt azonosítót használ egy bemeneti elem hozzárendeléséhez, amely nem helyezkedik el az űrlap belsejében az űrlappal.
              • formáció: hozzárendelve egy beküldési mezőhöz, hogy felülbírálja az alapértelmezett űrlap viselkedését egy alternatív URL megadásával az űrlap feldolgozásához.
              • formenctype: hozzáadva egy beküldési mezőhöz, hogy meghatározza a postázási módszerrel benyújtott adatokra alkalmazandó kódolás típusát.
              • formmethod: hozzáadva egy beküldési mezőhöz, hogy meghatározza a HTTP-módszert, a post and get formátumot, amelyet használni kell az űrlap benyújtásához.
              • formnovalidate: a benyújtási mezővel használható, hogy megakadályozzák az űrlapadatok böngésző általi érvényesítését.
              • formarget: hozzáadva egy beküldési mezőhöz, hogy megmondja a böngészőnek, hogy jelenítse meg az űrlapválaszot az aktuális ablakban vagy egy új ablakban.
              • magasság és szélesség: egy típus méretének megadására szolgál ="kép" űrlap benyújtása gomb.
              • min és max: egy számmal, tartománytal vagy nappali irányú bemeneti típusmal együtt használják annak a minimális és maximális értéknek a hozzárendelésére, amelynek a kiválasztott értéknek.
              • többszörös: a fájl vagy az e-mail beviteli típusával együtt használható, hogy a felhasználó több értéket adjon hozzá.
              • minta: egy reguláris kifejezés meghatározására szolgál az e-mail, jelszó, keresés, telefon, szöveg vagy url mezőbe bevitt adatok érvényesítéséhez.
              • helyőrző: helyőrzőszöveget rendel hozzá egy bemeneti elemhez, amely eltávolításra kerül, amikor az elem fókuszba kerül.
              • szükséges: azonosítja az elemet, amelyet ki kell tölteni az űrlap benyújtása előtt.
              • lépés: a számmal, hatótávolsággal vagy nappali tagozatos bemenettel együtt használható annak meghatározására, hogy mely lépésekben választhatók ki az értékek. Például a = lépés hozzáadásával"10" a legalább 0 és legfeljebb 30 közötti értékre korlátozott számbevitel lehetővé tenné 0, 10, 20 vagy 30 beküldését.

              Új űrlapelem attribútumok:

              • automatikus kiegészítés: az automatikus kiegészítés be- vagy kikapcsolása egy teljes űrlaphoz. Az automatikus befejezés bemeneti alapon továbbra is vezérelhető ugyanazon attribútum használatával az egyes bemeneti elemeknél.
              • novalidate: kikapcsolja az űrlap benyújtásának böngésző általi érvényesítését.

              Új űrlapelemek:

              Az adatelemző elem létrehozza a bemeneti elemre előre meghatározott javaslatok legördülő listáját. Vegye figyelembe, hogy ez az elem nem korlátozza a bemeneti mezőt ezekre az értékekre. Ehelyett pusztán javaslatokként járnak el.

              A legördülő elemek listáját az új listattribútum társítja a bemeneti elemhez. Például:

              A kimeneti elem helyőrzőt hoz létre egy folyamat, például egy számítás eredményének megjelenítéséhez. Vegye figyelembe, hogy a kimenet valójában nem végez számításokat - ezt továbbra is JavaScript-rel vagy szerveroldali programmal kell elvégeznie - egyszerűen helyet biztosít az eredmény megjelenítéséhez. Például:

              Képlet: y = mx + b

              Lejtés (m):

              X értéke:

              Y metszéspont (b):

              Y értéke:

              Ha ezután a lineformula () -ot írjuk be JavaScript-be a számítás feldolgozása és a CSS megkönnyítése érdekében, akkor elkészíthetjük a következő egyszerű, de működőképes JavaScript-számológépet:

              függvény lineformula () {
              var y = 0;
              var m = document.getElementById („m”) érték;
              var x = document.getElementById („x”) érték;
              var b = document.getElementById („b”) érték;
              y = + m * + x + + b;
              document.getElementById („y”) érték = y;
              }

              # példa-forma {
              szélesség: 100%;
              maximális szélesség: 400 képpont;
              margin: 0 auto;
              szegély: 1px szilárd #bbb;
              háttér szín: #eee;
              }
              # példa-forma p bemenet, # példa-forma p kimenet {
              úszó: jobb;
              szélesség: 100 képpont;
              }
              # példa-forma p {
              túlcsordulás: automatikus;
              párnázat: 10 képpont;
              margin: 0;
              }
              # példa-forma p: nem (: utolsó gyermek) {
              szegély alsó: 1 képpont szilárd #bbb;
              }

              Képlet: y = mx + b

              Lejtés (m):

              X értéke:

              Y metszéspont (b):

              Y értéke:

              A keygen elemet a HTML5-ben is hozzáadtuk a felhasználók hitelesítéséhez. Az elemet egy nyilvános-magán kulcspár létrehozására tervezték, amely felhasználható annak biztosítására, hogy az űrlap benyújtásának eredményeit csak a megfelelő felhasználó jelenítse meg. Az elem azonban már elkészült a HTML5-specifikáció eltávolításához, ezért nem szabad használni.

              Szemantikus elemek

              Számos HTML elemet úgy alakítottak ki, hogy szemantikai jelentést adjon a weboldal tartalmának. Ez azt jelenti, hogy bizonyos HTML elemek az elem tartalmát illetően különleges jelentést jelentenek.

              Például a hangsúlyos címkék használatát egy böngésző dőlt betűtípussal teszi lehetővé, és azt jelenti, hogy az elem tartalmát nagyobb hangsúlyokkal kell olvasni és megérteni, mint a környező tartalmat..

              Bár nem minden HTML elem rendelkezik szemantikai jelentéssel, fontos, ha csak lehetséges, a HTML-címkéket szemantikai jelentéseik szerint használják.

              Miért fontos a szemantika?

              A szemantika legalább négy elsődleges okból fontos:

              • A szemantika javítja az akadálymentességet. A segítő technológiák jobban tudják közvetíteni a weboldal jelentését, ha a HTML elemek kiválasztása nyomokat ad az oldal tartalmának jelentésére..
              • A szemantika megkönnyíti a tartalom felfedezését. A keresőmotorok jobban megértik és indexelik a weboldal tartalmát, ha a HTML elemeket a megfelelő szemantikai célnak megfelelően használják.
              • A szemantikai elemek hozzájárulnak a nemzetközivé váláshoz. Az új szemantikai elemek, a rubin és a bdi bevezetésre kerültek a HTML5-ben annak érdekében, hogy jobban felismerjék azt a tényt, hogy a világ kevesebb, mint 15% -át anyanyelvű anyanyelvek alkotják.
              • A szemantika javítja az interoperabilitást azáltal, hogy megkönnyíti a fejlesztők és az alkalmazások számára a weboldal tartalmának megértését és az azzal való interakciót.

              Mivel a Mindent Internet (IOE) felé vezető menet továbbra sem változik, a szemantika egyre fontosabbá válik.

              A megfelelő szemantika használata a HTML-ben és az internetes programozás más formáiban kritikusabbá válik, mivel az internethez csatlakoztatott eszközök száma és sokfélesége növekszik.

              Ma azt gondolhatja, hogy egy olyan weblapot hoz létre, amelyet elsősorban laptopokon és okostelefonokon lehet megtekinteni, de további tíz év alatt bárki kitalálja, milyen eszközök próbálják elérni és értelmezni az Ön webhelyének tartalmát..

              A szemantika helyes megszerzése kulcsfontosságú annak biztosításához, hogy az adatok időben rendkívül hozzáférhetőek maradjanak.

              Szemantika a HTML-ben A HTML5 elõtt

              A HTML elemek mindig szemantikai jelentéssel bírtak. Az űrlap vagy a táblázatok használata mindig egy bizonyos jelentést és célt jelentett az elem tartalmához.

              A listák a böngésző számára az ol és ul címkék használatával megrendeltek vagy rendezetlenek voltak. Hasonlóképpen, van egy kiterjedt lista a HTML5 előtti elemekről is, amelyeket a szövegben fel lehet használni szemantikai jelentés hozzáadására:

              • Az em és az erős címkék hangsúlyt jelentenek és erős hangsúly.
              • Az s, del és ins jelöléseket olyan információk azonosítására használják, amelyek már nem alkalmazandók, vagy felváltottak frissített információkkal.
              • Az idézőjelek és idézőjelek idézetek és kreatív munkák azonosítására szolgálnak.
              • Az abbr és a dfn címkék a magyarázó megjegyzések hozzárendelésére szolgálnak a meghatározást igénylő kifejezéshez.
              • A kódot, a sampot, a kbd-t és a var elemeket a szövegetípusok azonosításához használják: programozási kód, a számítógépes program kimenete, a billentyűzet bemenete és a formula változói.
              • A sup és az alapelemek azonosítják azt a tartalmat, amelynek mind felirat, akár felülíró szövegként kell megjelennie.

              Míg a HTML5-et megelőző sok HTML elem szemantikai jelentéssel bír, a HTML5 által kezelt nyelv egyik jelentős hiányossága volt: a szerkezeti szemantikai elemek hiánya.

              HTML dokumentum szerkezet a HTML5 előtt

              A HTML5 elõtt a div elem volt az elsõdleges tároló, amelyet felépítettek egy weboldal-dokumentumhoz. Elég volt és még mindig gyakori látni a divs segítségével épített weboldalakat, amelyek olyan dokumentumszerkezetet készítenek, amely körülbelül így néz ki:

              Az oldalszerkezet div-elemmel történő felépítésének ez a megközelítése - a divitisnek nevezett gyakorlat - maguk a HTML elemek nem utalnak az oldal szerkezetére. A HTML5 elõtt a fejlesztõk megbocsáthattak az ilyen gyakorlatért.

              Azonban, ha a HTML5-ben rendelkezésre állnak új szerkezeti szemantikai elemek, van egy jobb módszer.

              Szerkezeti szemantikai elemek a HTML5-ben

              A HTML5 bemutatta a következő elemeket, amelyeket a fenti példában bemutatott div leves helyett kell használni. Ezek az elemek felépítik a dokumentumot, miközben egyidejűleg a dokumentum különféle részeire utalnak konkrét jelentésre:

              • A fő elem célja egy weboldal elsődleges tartalmának tárolása. Ha egy webhely ugyanazt a fejlécet és láblécet használja újra az összes oldalon, akkor ezeket általában kihagyják a fő elemből, míg az összes többi weboldal tartalma megfelelően beágyazható a fő elembe.
              • A fejlécelem bevezető tartalmat tartalmaz egy teljes weboldalról vagy egy weboldal egy részéről. Helyénvaló azt használni, hogy a weboldal minden oldalán megjelenő fejlécet megtartsa, valamint a cikk és az oldal tetején a cím és más bevezető információk tárolásához..
              • A láblécelem célja a szülő elem összefoglaló információinak tárolása. Használható egy weboldal láblécéhez, amely megjelenik a weboldal minden oldalán, valamint egy cikkben, a cikk összefoglaló adatainak, például a szerzők, a témák, a közzététel dátuma és a felhasználói megjegyzések tárolására..
              • A szakasz elemét a tematikusan kapcsolódó tartalom csoportosítására használják, és általában egy címsorral kezdődik. Például egy blogban az oldal elsődleges része lehet egy szakasz, az oldalsáv pedig egy második részt foglalhat el.
              • A navigációs elem a navigációs hivatkozások egy csoportjának azonosítására szolgál. A navigációs elemek általában az újrahasznosítható, a webhely egészére kiterjedő navigációs elemekre korlátozódnak, például a weboldal fejlécében, láblécében és oldalsávjában megjelenő elemekre..
              • A cikk elemét a tartalom - például a blogbejegyzés vagy a hírcikk - önálló egységként, a weboldaltól elkülönülten értelmező csoportjaként csoportosítják. A cikkek fejléc, lábléc, szakasz és félidelemeket tartalmazhatnak.
              • A félrevezető elem azon információk azonosítására szolgál, amelyeket meg kell érteni a szülő elemben a tartalom elsődleges áramlásától eltekintve.

              Noha nem kell mindezen elemeket felhasználnia a weboldal szerkezetének megtervezésekor, ezek rendelkezésre állnak, ha megfelelő, hogy jobb képet kapjanak az oldal egyes részeinek szemantikai jelentéséről.

              Ha újra megvizsgáljuk a div-leves elrendezését és felülvizsgáljuk az új címkék megvalósításához, kapunk valamit, amely így néz ki:

              Szöveges szemantikai elemek a HTML5-ben

              Az általunk tárgyalt szerkezeti elemek mellett a HTML5 számos elemet is bevezetett, amelyek a szöveges tartalom bitjeinek meghatározott típusát jelentik. Vessen egy pillantást rájuk:

              • A cím elem segítségével azonosíthatók egy címek, amelyek a weboldal vagy cikk szerzőjére vagy tulajdonosára vonatkoznak.
              • Az ábrát és az ábrázolási elemeket a weboldal tartalmához kapcsolódó vizuális tartalom - például grafikon, diagram vagy ábra - azonosításához és rögzítéséhez használják, de ennek nem kell, hogy a dokumentum tartalmával összhangban jelenjen meg..
              • A jelölőcímkét olyan szöveg azonosítására használják, amelynek konkrét jelentése van a jelenlegi helyzetben. Például felhasználható arra, hogy azonosítsa a keresési kifejezések minden előfordulását a keresési eredményeket megjelenítő oldalon.
              • Az időelem egy bizonyos szöveget egy adott időpontra mutató szövegként azonosít. A datetime attribútum felhasználható az adott időpont gépi úton olvasható verziójának hozzáadásához az időcímkéhez.
              • A bdi elemet arra használják, hogy megfordítsák a tartalom darabjának irányát azokról a nyelvekről, amelyek jobbról balra követnek.
              • A rubin, az rp és az rt elemeket kiejtési segédeszközök vagy rubinok biztosítására használják bizonyos ázsiai nyelvű karakterekhez.

              Dinamikus HTML

              Dinamikus HTML

              Amikor a modern weboldalra gondol, általában nem képzel el statikus webhelyet. A szkriptnyelvek, például a JavaScript és a PHP megjelenésének köszönhetően a mai webhelyek interaktívabbak és dinamikusabbak, mint elődeik..

              Noha a dinamikus weblapok létrehozására számosféle módszer létezik, létezik egy speciális technika, amelyet valószínűleg ismersz, bár valószínűleg nem sokat hallottál erről: DHTML.

              A „DHTML” név kissé félrevezető. Eltérően a jelölőnyelv HTML-től, amelyből a nevét felveszi, a dinamikus hipertext jelölőnyelv valójában egy olyan kifejezés, amely számos technológiát és nyelvet ír le, amelyeket dinamikus webhelyek létrehozásához használnak.

              Ez a DHTML négy fő eleme:

              • HTML: statikus oldalak és alkalmazások létrehozásához használt jelölőnyelv.
              • CSS: az oldal bemutatásának stíluslapon történő diktálásához használt nyelv.
              • JavaScript: az interaktív elemek fejlesztésére használt programozási nyelv egy oldalon.
              • DOM: a programozási felület, amelyen keresztül az oldal kódja megváltoztatható.

              Ha szeretne többet megtudni a DHTML-ről, a következő forráslista referenciaanyagokat, lépésről lépésre mutató útmutatásokat és eszközöket tartalmaz a dinamikus weboldalak létrehozásához a DHTML segítségével.

              Könyvek

              Noha a webhelyek mindig nagy alapot jelentenek a kezdéshez, nem hibázhat, ha egyes asztali erőforrásokba fektet be, hogy áttekinthesse a DHTML hibáit..

              • JavaScript: A végleges útmutató (2006), David Flanagan: ez a útmutató a JavaScript tanulásához, és kiváló referenciaanyag a DHTML-hez kapcsolódó összes kérdésben..
              • Interaktív adatmegjelenítés az interneten: Bevezetés a D3-hoz való tervezésbe (2013), készítette: Scott Murray: Miután megismerte a DHTML alapjait, használja ezt a lépésről lépésre szóló útmutatót a dinamikus tartalom tervezésének alapjainak megtanulásához.
              • DOM szkriptek: Webdesign JavaScript-kel és Keith és Sambells dokumentumobjektum-modelljével (2010): tökéletes forrás arra az esetre, amikor a DOM jobb megértéséhez és a gyakorlathoz való valós alkalmazásokkal van szükség.
              • Webes animáció a JavaScript használatával: Fejlesztés & Design (2015), Julian Shapiro: ha animációkat szeretne elsajátítani a DHTML segítségével, ellenőrizze ezt.

              Eszközök

              A DHTML harmadik felek általi hozzájárulásainak célja, hogy segítsen a fejlesztőknek tisztább kódot írni, könnyű hibakeresést végezni és előre megírt szkripteket felhasználni erőfeszítéseik fokozására.

              • Dinamikus meghajtó: Ez a webhely a fejlesztők számára ingyenes JavaScript (és más DHTML) szkriptek biztosítását szolgálja.
              • DHTML nyalánkságok: egy másik online erőforrás, amely ingyenes DHTML (és Ajax) szkripteket biztosít.
              • JavaScript Kit Scripts: egy másik ingyenes forrás a JavaScript szkriptek megtalálására, amelyek segítenek a különféle tervezési és animációs effektusok létrehozásában.

              Online útmutatók és útmutatók

              Részletes útmutatást szeretne kapni a HTML, CSS, JavaScript és DOM megismeréséről? Vagy inkább egy gyakorlati gyakorlatot szeretsz? A következő útmutatók ismerteti az összes alapját.

              • Webfejlesztési ütemterv kezdőknek: ez a „Tanulj kódolni” útmutató a tökéletes hely a DHTML használatának megkezdéséhez, mivel a HTML alapjaitól (1. fejezet) egészen a JavaScripten és a jQueryn keresztül (5. fejezet).
              • W3Schools DHTML oktatóprogramok: A W3Schools különféle oktatóanyagokat kínál a DHTML-ről, a három különböző programozási nyelvre bontva..
              • Mozilla Web Technologies oktatóanyagok: A Mozilla Developer Network az egyik legátfogóbb (és jól szervezett) útmutatót kínál a DHTML programban részt vevő különböző programozási nyelveken..
              • QcTutorials DHTML oktatóprogram: keres egy egyszerű és egyértelmű megközelítést a DHTML tanulásához? Nézze át ezt az oktatóanyagot, majd tartsa kéznél a DHTML és HTML DOM példákat a jövőbeni referencia céljából.
              • Útmutató a DHTML bemutatójának kezdőjéhez: bevezetés a DHTML-hez, amely számos útmutatót tartalmaz az induláshoz.
              • Webfejlesztő és CSS oktatóanyagok: sokat lehet megtanulni a CSS-hez, tehát ne korlátozódjon csupán az alapokra. Ez az erőforrás különféle CSS oktatóanyagokat tartalmaz az Ön webhelyének igényei alapján.
              • JavaScript oktatóanyagok: egy másik útmutató a JavaScript Kit-ből, csak ez kifejezetten a JavaScript-hez kapcsolódó feladatokra összpontosít.
              • CSS-referencia: használja ezt az egyszerű forrást gyors útmutatóként a CSS-írás során.
              • DOM-referencia: További információ a DOM-objektumokról itt.

              Munkára!

              Ha dinamikus tartalmat szeretne létrehozni webhelye számára, fontos, hogy tisztában legyen azzal, hogy az egyes elemek hogyan működnek, és hogy mindegyik együtt játszik a DHTML égisze alatt..

              A fenti referencia útmutatók jó hely a kezdéshez, de semmi semmi sem felel meg a gyakorlati gyakorlatnak, ha új programozási technika elsajátításának lehetőségeit akarod elérni..

              Jó HTML összeállítása és validátorok használata

              .sourceCode span.kw
              .sourceCode span.dt
              .sourceCode span.dv
              .sourceCode span.bn
              .sourceCode span.fl
              .sourceCode span.ch
              .sourceCode span.st
              .sourceCode span.co
              .sourceCode span.ot
              .sourceCode span.al
              .sourceCode span.fu
              .sourceCode span.re
              .sourceCode span.er

              Jó HTML összeállítása és validátorok használata

              Megérintettük a jó HTML elkészítésének a témáját, de itt mélyebben megyünk. Megbeszéljük továbbá az érvényesítőket és azok használatának módját.

              1. rész - Jó HTML szerkesztése

              A megfelelő nyelvtan összes szabályának ismerete nem tesz jó íróvá, és a nyelv minden funkciójának és felépítésének ismerete nem tesz jó programozóvá. Van még valami, ami szükséges - jó stílus.

              A HTML írása ugyanúgy történik. Lehet, hogy ismeri az összes jelölő elem be- és hátrányait, és még mindig összeállíthat olyan hanyag dokumentumokat, amelyeket nehéz olvasni és megtervezni. De nem feltétlenül kell így lennie - megtanulhatja, hogyan kell jó, jól megírt HTML-t írni.

              Miért zavarja a jó HTML?

              Mivel a HTML-t nem a végfelhasználók és az online közönség látja, akkor kérdezheti:

              • Mi a különbség??
              • Miért aggódik a jelölés miatt??

              A kérdés megválaszolása az első lépés a jó HTML stílus felé: gondolkodni kell azon, kinek írsz HTML-t.

              Van egy maroknyi közönség a HTML-hez:

              • A jelenlegi tervező / fejlesztő, akinek CSS-t kell írnia
              • A jövő fejlesztői és tervezői, akiknek esetleg át kell alakítaniuk az Ön webhelyét
              • Google és más keresőmotorok
              • Facebook és más közösségi média oldalak, amelyek oldalkivonatokat jelentenek
              • RSS olvasók
              • Képernyő-olvasók látássérültek számára
              • Végül a rendszeres felhasználók.

              Mindezeknek a különféle közönségeknek - amelyek közül csak néhány ember ember - eltérő igényei vannak, és mindezt jól szolgálja a jó, jó stílusú HTML.

              Jó dokumentumszerkezet

              A HTML stílus legfontosabb szempontja az egész dokumentum megfelelő felépítése.

              Az általános szerkezetnek így kell kinéznie:

              html>

              A dokumentum címe




              A webhely címe

              A dokumentum címe

              Dokumentum címe

              Vegye figyelembe, hogy lehet, hogy nincs szüksége minden itt megadott elemre. Például: lehet, hogy nem akarja az elemet beletenni önbe, és a cikk tetejére nem helyezi bele a metaadatok részleteit - egy egyszerű

              vagy

              címke, ugyanolyan „szinten”, mint a cikk tartalma.

              A dokumentum megfelelő felépítésével kapcsolatos további részletek a cikk Strukturális HTML szakaszában találhatók.

              A legfontosabb elemek megrendelése

              A tartalommal és a tartalommal kapcsolatban már korán kell lennie. Amikor SEO tanácsadója megpróbálja kitalálni, hogy mi folyik azzal, hogy a Google vagy a Facebook hogyan jeleníti meg az Ön oldalait, ne erőltesse őket egy tucat CSS link és véletlenszerű JavaScript kód segítségével..

              Még akkor is, ha a navigációs sáv az ablak tetejére van ragasztva, és a webhely főcíme alatta van, tegye a főoldal címét egy

              vagy

              címkét, és tegye ezt először befelé. Helyezze a navigációs menüt a cím után.

              Az elemnek az első elemnek kell lennie a. Még akkor is, ha van bal oldali oldalsáv, használja a CSS-t a bal oldalra; ne tedd a fő tartalom elé.

              Az oldal legyen az utolsó tartalom elem a benne. Után nem lehet látható HTML elemek .

              Helyezze be a lehető legtöbb JavaScriptet a zárócímke után. Csak akkor helyezze be a JavaScriptet, ha valamilyen okból feltétlenül ott kell lennie (általában nem létezik).

              A szerkezeti jelölés könnyebben olvasható

              Valamikor csak sok címkét kell tartalmaznia, vagy több oldalsávval rendelkezik, különböző szinteken. Vagy talán van egy csomó beágyazott lista.

              Az egyik leghasznosabb dolog, amit megtehetsz behúzza a kódját. Vegyük figyelembe a következő két példát:

              class ="Mast-head">

              Dokumentum címe

              class ="nav-bar">
              class ="main-nav">

              • Menü tétel
              • Menü tétel
              • Menü tétel
                • Menü tétel
                • Menü tétel
                • Menü tétel
              • Menü tétel

              class ="Mast-head">

              Dokumentum címe

              class ="nav-bar">
              class ="main-nav">

              • Menü tétel
              • Menü tétel
              • Menü tétel
                • Menü tétel
                • Menü tétel
                • Menü tétel
              • Menü tétel

              A második sokkal könnyebben olvasható, nemde? Ez nagyon hasznos azoknak a tervezőknek és fejlesztőknek, akik megpróbálják értelmezni a dokumentumot.

              Ügyeljen arra, hogy megfeleljen a behúzás módjának - egy szóköz, két szóköz, egy lap. Amit választott, nem számít annyira, de a fontos az, hogy következetessé tegye.

              De mi a helyzet a generált HTML-kel?

              Az internetes HTML nagy részét ma vagy egyik tartalomkezelő rendszer generálja. Nem mindig teheti a kód behúzását úgy, hogy a kívánt módon működjön - különösen akkor, ha a HTML-kódot előállító kód sok különböző téma- és plugin-fájlban van elterítve..

              A válasz értelmes osztályok vagy azonosítók, valamint megjegyzéscímkék használata. Ez különösen hasznos lehet a generált tartalom ismételt blokkjaihoz, például kommentárokhoz vagy az oldalsávon lévő elemekhez.

              class ="Mast-head">

              Dokumentum címe

              class ="nav-bar">
              class ="main-nav">

              • Menü tétel
              • Menü tétel
              • Menü tétel
                • Menü tétel
                • Menü tétel
                • Menü tétel
              • Menü tétel



              class ="Hozzászólások">
              class ="megjegyzés" id ="comment-39874693029">


              class ="sidebar-tétel" id ="subscribe-forma">


              class ="sidebar-tétel" id ="levéltár">

              Általános szabály - ha egy elem nyitó és záró tagje nem egy vonalban van, és az elem osztályra vagy azonosítóra van szükség, érdemes megjegyezni a zárócímkét.

              Jelentős osztályok és azonosítók

              Először is - tegye osztály- és személyazonossági attribútumait következetessé és könnyen olvashatóvá:

              • csak kisbetűk használatával
              • szó elválasztása kötőjelekkel.

              Ezután győződjön meg arról, hogy az osztálynevek és az azonosítók nyilvánvaló szemantikai értelemben vannak-e, és nem csupán a tervezésről és a megjelenítésről szólnak.

              Jó osztály- és személynevek:

              • nav-menü
              • blog bejegyzés
              • sidebar-modul
              • comment-meta.

              Rossz osztály- és azonosítónevek:

              • green-box
              • bal oldalsáv
              • fade-in-banner.

              Előfordulhat, hogy a front-end keretrendszer vagy a CSS jellege miatt további elemekre lesz szüksége, és az elrendezés-specifikus osztálynevekkel, például csomagolóval használhatja magát..

              Ez rendben van, ha nem tudsz segíteni. Csak győződjön meg arról, hogy a dolgokat általános. Nincs semmi rosszabb, mint egy olyan újratervezés, amely a következő CSS-t hozza létre:

              .green-box
              háttér szín: kék;
              }

              Használja a tartalomelemeket okosan

              A cikk vagy más tartalom fő részében a szekcionált tartalomcímkéket használjon a dokumentum megfelelő rendezéséhez.

              Hírek és szakaszok

              A szakaszok címsora nagyon fontos. Ne hagyja figyelmen kívül őket. A végleges tartalmat sokkal könnyebben lehet elolvasni, ha több címmel és alrésztel rendelkezik, nem pedig egy óriási tartalomtömbön.

              • Használjon címsorokat (

                ,

                ,

                ,

                ) a címrészekre és alszakaszokra.

              • Győződjön meg arról, hogy a címsorok hierarchiája ésszerű vázlatot tartalmaz. Ne tegyen egy
                után egy

                anélkül

                és

                beavatkozó. Ügyeljen arra, hogy tartalma ésszerű és érthető legyen.

              • Ha használ a szakaszok fejléceinek megjelöléséhez valami nincs rendben.

              Ezenkívül feltétlenül tegye az id attribútumot a szakaszcímekre, hogy Ön és mások is létrehozhassanak dokumentumon belüli hivatkozásokat.

              id ="cím-A-szakasz">A szakasz címe

              ...

              href ="# Cím-az-szakasz">Ez hivatkozik erre a helyre.

              Végül, ne használja vissza a horizontális szabályt (). Ha a szakaszokat és a címeket megfelelően használja, akkor ennek szinte soha nincs oka.

              linkek

              A horgonycímke egyetlen szükséges attribútuma a csatolt dokumentum URL-je.

              A címke feltüntetése azonban nagyon hasznos, mivel az az emberek tudják, hogy a linkre kattintva tudják, merre tartanak. Ez segít a keresőmotoroknak abban is, hogy meghatározzák, mire utal a link.Ideális esetben a címkecímke lesz a hivatkozott dokumentum címe.

              Egy másik probléma a linkekkel kapcsolatban a horgonyszöveg - az a tényleges szöveg, amelyre a felhasználó rákattint (vagy rákattint vagy kiválaszt) a link követésére.

              Ha lehetséges, próbáljon elkerülni a Kattintson ide. Néha ez elkerülhetetlen, de amikor csak lehetséges, meg kell próbálnia értelmezni a horgonyszöveget. Ez hasznos az olvasók számára, valamint a hivatkozott dokumentumhoz (amely lehet a saját is).

              Tudjon meg többet a HTML-ről a href = segítségével"">ide kattintva.

              Sok href = -t adunk meg"">információk a HTML-ről.

              képek

              A képhez csak egy src elem szükséges - a kép URL-je. De a cím és az alt szöveg beillesztése segíthet.

              • A vakok képernyőolvasói elolvashatják a leírást egy olyan felhasználó számára, aki nem látja a képet
              • a keresőmotorok indexálhatják a képet, és rendelkezhetnek valamilyen elképzelésükkel arról, hogy mi a kép.
              Fogalommeghatározások, idézetek, rövidítések

              Számos nagyon hasznos span-szintű jelölőelem létezik, amelyeket soha nem használnak.

              Ezek finom szempontokkal szolgálnak az oldal szaváról. Segíthetnek a felhasználóknak a tartalom jobb megértésében, és segíthetnek a számítógépeknek (keresőmotorok, mesterséges intelligencia) jobban megérteni, amit írt..

              • - A meghatározási címke. Ez lehet az első alkalom, amikor egy technikai kifejezést használ és meghatároz.
              • - Rövidítések. A rövidítés kibővített formáját a címkebe helyezheti.
              • - A legtöbb ember csak tipográfiai idézőjeleket használ az árajánlatok körülhatárolására, de a jelölés használata világosabbá teszi, és lehetővé teszi az idézet forrásának hivatkozását az elemmel.

              Tudjon meg többet és érdekeljen többet

              A jó HTML írása a következő kérdése:

              • néhány alapelv megtanulása
              • annyira törődik a tartalommal és a webhellyel, hogy követni tudja őket.

              Csak a tanulási részben tudunk segíteni. Döntenie kell az érdeklődésről.

              A legtöbb tanácsunk egy mondatban foglalható össze:

              Győződjön meg arról, hogy HTML-kódja egyértelműen közli azt, amit kommunikálni kíván.

              2. rész: HTML érvényesítők

              A modern, szabványalapú webböngészők és a HTML megjelenésével egyre nagyobb az érdeklődés az érvényesítés iránt - annak biztosítása, hogy a weboldal forráskódja tartalmazzon hibákat és megfelel-e a vonatkozó előírásoknak..

              Ez természetesen jó dolog - az internet általában jobb hely, ha a webhelyek „szabályokat” követnek. De az érvényesítés túl nagy hangsúlyozása szintén ellentétes lehet.

              Itt van, amit tudnia kell.

              Mi a HTML érvényesítés??

              Az érvényesítés azt jelenti, hogy ellenőrizni kell, hogy webhelye forráskódja megfelel-e a W3C által meghatározott nyelvi előírásoknak. Ezt az ellenőrzést egy HTML Validator nevű szoftver eszköz végzi.

              Ez analóg a korrektúrával - annak ellenőrzése, hogy minden szó helyesen van-e írva, valamint hogy az írásjelek és a nyelvtan hagyományos szabályait betartják.

              A jelölőnyelv specifikációja megfogalmazza (olykor megkönnyítő részletekben), hogy az egyes HTML elemeket hogyan kell használni, milyen lehetnek azok potenciális attribútumai és hogyan kapcsolódik az oldal többi eleméhez.

              Ha azt mondjuk, hogy a HTML dokumentum érvényes, akkor az azt jelenti, hogy minden egyes szabályt betart.

              Mi az a HTML érvényesítés??

              A HTML valójában nem jelenti azt, hogy webhelye jó-e, vagy úgy néz ki, ahogyan gondolja, vagy segít-e a marketing céljainak elérésében. Csak azt adja meg, ha a jelölés megfelel-e a specifikációnak.

              Ez kicsit olyan, mint a különbség a szerkesztés és a lektorálás között - az érvényesítés olyan, mint a leolvasás.

              A HTML érvényesítése csak a HTML-re vonatkozik - nem a CSS-re, a JavaScript-re és az alapjául szolgáló PHP-re. Ennek semmi köze nincs az olyan dolgokhoz, mint az űrlapok megfelelő működése (az űrlap érvényesítése egészen más dolog).

              Miért zavarja az érvényesítés??

              A HTML ellenőrzőn keresztüli futtatása elősegítheti a hibák elkerülését, amelyek a legkülönfélébb lehetőségekből beleférhetnek a HTML-be.

              Egyszerű gépelések

              Az érvényesítési hibák leggyakoribb forrása csak az egyszerű tipográfiai hibák. Ha egy elem címkéjének helytelen betűjele van, vagy ha egy bal szög helyett egy derékszögű zárójelet találnak, akkor érvényesítési hiba jelenik meg. Ezek gyakran a legfontosabb megtalálni és kijavítani, és a legkönnyebbek is.

              A verzió eltérése

              A HTML minden verziója kissé eltérő szabálykészlettel rendelkezik, és olyan dolgokkal, amelyek a nyelven szerepelnek. Ha a HTML érvényes, az azt jelenti, hogy betartotta ezeket a szabályokat, és csak azokat a dolgokat tartalmazza, amelyek hivatalosan a nyelv részét képezik.

              Például a HTML-címke új a HTML5-ben - a HTML 4.0 specifikációban nem volt jelen. Ez azt jelenti, hogy ha érvényesítené a megadott specifikációt, és beillesztené, akkor az nem érvényes. Kapsz egy hibát.

              Egy másik példa megváltozott dolgokra a null elemek bezárásának módja.

              A képcímke ( ) egy null elem - nincs tartalma, csak attribútumai (a kép maga a képfájlra mutató attribútum, nem pedig az elem tartalma). A múltban a null elemeket be kellett zárni, tehát ezt láthatja:

              src ="http://example.com/some_image" alt ="Néhány kép" />

              Most a HTML5 specifikációban ezt nem részesítik előnyben, és ugyanaz a kép így néz ki:

              src ="http://example.com/some_image" alt ="Néhány kép" >

              Az érvényesítés számos ok miatt fontos:

              • Az évek során számos különféle specifikáció létezett
              • Időnként több specifikáció aktív egyidejűleg
              • A kódolók szokásaikat alakították ki a dolgok különböző módszerein alapulva.
              Rossz szerveroldali kód

              A legtöbb webhely manapság valamilyen alapul szolgáló tartalomkezelő rendszert vagy szerveroldali szkriptet használ HTML létrehozására. Ez összetett réteggel jár, amely további hibákat vezethet be.

              Például, ha egy adott feltétel nem teljesül, vagy a sablonfájl nincs betöltve, akkor előfordulhat, hogy egy nagy elem zárócímkéje nem szerepel a kimenetben.

              A kiszolgálóoldali dinamikus szkripteknél is nehéz lehet a teljes HTML-dokumentum látása - az egyetlen oldal sablonja gyakran különféle fájlokon oszlik meg..

              Tartalmazza a rossz kódot

              A Tartalomkezelő Rendszerekkel együtt a legtöbb webhelytulajdonos számos harmadik féltől származó bővítményt használ webhelyeinek előállításához. Ezek nem mindig olyan magas színvonalúak, mint amilyennek lennie kellene, és gépelés, rossz jelölés és rosszul írt kód forrása lehet..

              Egyszerűen nem ismeri a HTML-specifikációt

              Nagyon sok perc van a HTML-specifikációban - olyan dolgok, amelyeket sok kezdő és középhaladó fejlesztő nem ismeri vagy érti.

              Tudta, hogy nem tud listát készíteni (