Mi a HTML?
A HTML a Hyper Text Markup Language, amely egy előre definiált elem, más néven címkék, halmaza, amely megmondja a böngészőnek a megjelenítendő tartalmat és annak megjelenítését. Ez azt jelenti, hogy el tudok készíteni egy üres szöveges fájlt, hozzáadhatom néhány HTML-címkét, és a böngésző megtudja, hogyan kell megjeleníteni a weboldalamat.
Mi az a címke?
A címke egy utasítás, amely megmondja a böngészőnek, hogyan kell megjeleníteni bizonyos tartalmat a képernyőn. Előfordulhat, hogy a fejlesztők elemként hivatkoznak a címkékre. Íme egy példa arra, hogy milyen címke tartalmaz valamilyen szöveget.
Ez a címke fejléc-címke. A címkenévben szereplő h megmutatja nekünk és a böngészőnek, hogy fejléccímkével dolgozunk. A h-t követő jelzi a használt fejléc méretét. Ebben az esetben az 1 a legnagyobb alapértelmezett szöveg, amelyet a böngészőben megjeleníthet. A címke kimenete a böngészőben a Hello World!
Mi az a tulajdonság?
Az attribútum egy kiegészítő érték, amely képes egy címkét konfigurálni, vagy amely módosíthatja a címke viselkedését. Ez egy tökéletes példa arra, hogy hogyan néz ki a címke hozzáadott attribútummal
Adjon hozzá Pizzát
Az id attribútum értéke bármi lehet, amit szeretne, bár nem tartalmazhat helyet benne. A második attribútum az osztály attribútum. Az osztályattribútum több értéket vehet igénybe, amelyek bármilyenek lehetnek.
Globális attribútum
A globális attribútum az összes címkére beállítható. Vessük át a négy leggyakrabban használt globális attribútumot.
- id: Az első az id attribútum. Ez nem ad vizuális változást magának a címkének. Leginkább a JavaScript-hez és a stílushoz használják, CSS-sel (Cascading Style Sheets). Az id attribútum értékének egyedinek kell lennie egy adott oldalon. Ez azt jelenti, hogy egyetlen azonosítóban sem lehet két címke azonos értéke
- class: class attribútum hasonló az id tag-hez, kivéve az attribútum értékét többször ismételni egy adott oldalon. Ezeket elsősorban a CSS-sel és néha a JavaScript-rel használja.
- style: style attribútumot használunk az Inline CSS-hez. Kerülni kell, ha lehetséges.
- title: title egy azonosítót vagy egy tippet ad a címkének. Amikor az egér lebegett egy címke fölé, ahol a cím megjelent.
Például
Üdvözöljük!
Blokk szintű elem vs Inline elem
Az alábbiakban a Blokk szint elem és a Beillesztett elem attribútumai találhatóak.
Blokk szintű elem
- Felveszi a szülőtartály teljes szélességét.
Inline elem
- A jelenlegi hely felvétele.
Itt van egy alapvető ábra.
Ez a zöld terület a szülőtartályt jelöli. Esetünkben ez a böngészőablak. A böngésző, a szülőcímke szélessége a blokk szintű elem szélessége lesz.
Ezek a rózsaszínű területek képviselik a blokk szintű elemeinket vagy címkéinket. Mint láthatja, ők a szülőtároló teljes szélességét felveszik. Ez azt jelenti, hogy minden címkének a következő sorban kell kezdődnie.
Ez a következő három kék terület Inline címkék. Mint láthatja, ezek egymás mellett helyezkednek el, és csak a megtartott tartalomhoz szükséges szélességet veszik fel. Ennek több értelme lesz, mivel ezeket a címkéket működésben látjuk
Különböző alapvető HTML címkék
Tanuljuk meg a különböző HTML címkéket.
1) Címke - DOCTYPE
A DOCTYPE megmondja a böngészőnek, hogy milyen fájlt fog megnyitni. Mivel a HTML5-ben kódolunk. A HTML5 a HTML jelölőnyelv legújabb verziója, a DOCTYPE rendkívül egyszerű. Figyelem: Nincs záró címke.
A DOCTYPE éppen olyan, mint egy szokásos címke, és zárójelekkel kezdődik, majd a felkiáltójelbe helyezzük, majd beírjuk a DOCTYPE-t. Van helyünk, majd gépelünk HTML-t. Ez a címke alapvetően azt mondja a böngészőnek, hogy ezeket a dokumentumokat HTML-ként kell szolgáltatni.
2) Címke - html
A HTML tag, más néven gyökér elem, a DOCTYPE címkét követi. Ennek a címkének lehet a normál globális attribútuma, plusz a manifest nevű attribútum. A HTML-címke csak egyszer használható HTML-oldalon.
Minden, ami a HTML-hez kapcsolódik, be van ágyazva ezen a címkén. Ez azt jelenti, hogy minden tagünk a HTML-címkék nyitása és bezárása között található.
3) Címke - fej
A fejcímke általános információkat tartalmaz a megjelenő weboldalról. A fejcímke belsejébe egy egyedi címke kerül, amely lehetővé teszi a böngésző számára, hogy megismerje bizonyos részleteket, például az oldal címét, az oldal szerzőjét és más hasonló információkat.
A fejcímke semmi sem jelenik meg a weboldalon. Bizonyos információk azonban megjelennek a tényleges böngésző alkalmazásban, például a fül címe. Ez a szabvány általános globális attribútumokkal áll rendelkezésre.
4) Címke - test
A törzscímke segítségével a böngésző tudja, hogy mi jelenjen meg az oldalon. A test belsejében a címke helyezi az összes tartalmat, például címkéket és szöveget. A testcímke belsejébe helyezett bármi megjelenik a weboldalon.
A testcímkét a fejcímke után helyezik el a HTML címke belsejében. Egy oldalon csak egy törzscímke van. A testcímkének lehetnek általános globális attribútumai.
5) Címketartomány
Az első tag a span címke. Ez a címke egy általános, beépített tároló. Ez azt jelenti, hogy nincs hozzárendelve alapértelmezett stílusa. Ez a címke akkor hasznos, ha olyan szövegeket kell csoportosítania, amelyeket összetartozni szeretne.
6) Címke - p
A bekezdést vagy a p-tagot akkor kell használni, ha egy bekezdést a szövegről együtt akar tartani. Ez az elem blokk szintű elem, vagyis az alaptartály szélességét felveszi. Az ideális használat akkor lenne, ha sok szöveg jelenne meg. Kizárólag globális attribútumok megengedettek ehhez az elemhez.
7) Címke - div
A megosztási címke, vagy közismert nevén div tag, egy általános blokk tároló. Ez azt jelenti, hogy sok címkét csoportosíthat együtt, hogy a webhely egy részét képezzék. Ez a címke globális attribútumok.
8) Címke - al
Az feliratcímke vagy az alcímke lehetővé teszi, hogy a következő a normál szövegsor alatt legyen. Ez egy Inline elem, mivel globális attribútumokat használ. A felhasználás tökéletes példája az, ha a H2O-ban kettő megjelenik.
Példa: H20
9) Címke - sup
A felülíró címke vagy a sup tag, amely egy inline elem, lehetővé teszi, hogy a szöveg a normál szöveg fölé kerüljön. Példa erre a matematikai egyenlet kezelése. Ne feledje, hogy a 2 magasabb, mint a többi szöveg ebben az egyenletben.
Példa: E = mc 2
Ez egy globális tulajdonság.
10) Címke - u
- Az U aláhúzást jelent. Ez aláhúzza a nyitott és zárt címkék bármely szövegét. Ez egy inline elem és globális attribútum.
11) Címke - em
Az em címke a hangsúlyt jelenti. Ebben az esetben annak a gondolatnak a hangsúlyozása, hogy bármilyen szöveget kiemeljen, a szöveg dőlt vagy ferde lesz. Ezt a beépített elemet akkor használják, ha bizonyos hangsúlyt szeretne kifejezni a szöveg egyes részeire. Ez egy globális tulajdonság.
12) Címke - erős
Ha valaha szöveget félkövérre szeretne tenni, akkor az erős címkét használja. Ezt a beillesztett címkét a félkövér betűvel szövegezni kell. Csakúgy, mint a hangsúly. Az erős címke további jelentőséget tulajdonít a webhelyén lévő szövegnek.
13) Címke - br
A BR címke állt egy kis szünetet. Van néhány címke, amelyhez nincs szükség záró címkére. Ez sem blokk, sem inline elem. Ez egy globális tulajdonság.
14) Címke - óra
A hr címkének szintén nincs szüksége záró címkére annak kitöltéséhez. A hr címke, amely a vízszintes szabályt jelenti, sorot hoz létre a weboldalon. Ez egy blokk szintű elem. Ez egy globális tulajdonság.
Beágyazott elemek / címkék
- Fészkelő címkék
- Ahol az egyik címke egy másik címkén található
Példa
16) Címke - li
A listaelemhez tartozó li címke beágyazott címke. A li tagbe bármilyen típusú tartalmat felsorolhat, amely egy lista.
(17) Címke - ol
Az ol címke, amely a megrendelt listát jelenti, a beágyazott li címke tárolója. Soha nem fogja látni ezt a két címkét, az li vagy az ol címkét önmagukban. Mivel ez a megrendelések listája, azaz a lista egyes elemei mellett lesz egy érték.
Alapértelmezés szerint a lista számokat fog használni.
attribútumok
Globális, fordított, kezdő, típus (a, A, I, i)
18) Címke - ul
Az ul-címke, vagy a rendezetlen lista, ugyanúgy, mint az ol-címke, a beágyazott li-címke tárolója. De az ol-címkével ellentétben, amely számérték jelenik meg a lista egyes elemei mellett, ez az ul-címke csak golyópontot szolgáltat a listában szereplő tételek mellett.
19) Címke - h1, h2, h3, h4, h5, h6
Hat fejléc-címke található összesen. Mindegyik saját számmal kezdődik, 1-től 6-ig. A h1-címke és az összes többi fejléc-címke rövid leírást nyújt a szöveg vagy a tartalom egy részére. Ezek a címkék globális attribútumok.
20) Címke - a
A címke, vagy a rögzítőcímke, népszerű címke, mivel linkeket hoz létre a weboldal más oldalain, és hivatkozásokat hozhat létre a külső webhelyekre. A címke egy inline elem, és rengeteg attribútummal rendelkezik, a hozzá kapcsolódó globális attribútumokon kívül.
Helló Világ!
Az egyetlen kiegészítő tulajdonság, amelyet megemlítünk, a href. Ez a hipertext referencia. A legfontosabb dolog, amit emlékezzünk arra, hogy a href az az attribútum, ahol megadjuk az utat, így linket tudunk mutatni egy másik oldalra vagy egy másik weboldalra.
Az attribútum, href. És mindig szeretnénk beilleszteni a záró címkét. Link vissza a Google.com webhelyre.
Kimenet
21) Címke - kép
Az img tag vagy a image tag lehetővé teszi számunkra, hogy képeket jelenítsünk meg az oldalunkon.
Most a példában észreveszi, hogy a képcímkének nincs zárócímkéje. Ez egy maroknyi címke. De a br tag és a hr tag eltérően, ennek a tagnek a végét előrejelzővel jelöljük. Néhányan valójában erre utalnak, mint a záró címke írásának rövid módjára.
Az src attribútum és az alt attribútum. Az src vagy a source attribútum, amint azt a példában látja, kötelező.
Most az attribútum értéke a fényképhez vezető út, amelyet szeretnénk megjeleníteni. Az út lehet abszolút út vagy relatív út. A másik attribútum az alt attribútum. Ez alternatívát jelent. Az alt értéknek leírnia kell a fényképet. Az alt szöveg az alábbiak szerint jelenik meg a böngészőben. 
Következtetés - Alapvető HTML címkék
A HTML szó szerint elképesztően hatalmas tárgyterületek, amelyekről azt gondolják, hogy rendelkeznek. Ha sikerült ezt sokat megszerezni, annak ellenére, hogy sokkal több, mint tökéletesen képes vagy a front-end evolúciós hatalomra. Sokkal biztonságosabbnak kell lennie egy weboldal bontásában elem elemeikbe, majd ezt követően a HTML-hez és CSS-hez társított kód után.
Ajánlott cikkek
Ez egy útmutató az Alap HTML címkékhez. Itt azt is megvitatjuk, mi az a címke? és különféle alapvető HTML címkék, egy Attribútum jelentése mellett. Lehet, hogy megnézi a következő cikkeket is, ha többet szeretne megtudni -
- Bevezetés a HTML-be
- Ismerje meg az XHTML fogalmát
- Melyek a HTML attribútumok?
- A HTML alkalmazásai
- A HTML listastílusok bemutatása
- HTML keretek
- HTML blokkok