A címkék szavak a HTML nyelvben.Segítségükkel egy egyszerű szövegfolyamot gyönyörű felépítésű, világos felépítésű dokumentumdá alakíthat. A HTML-címkék teljes listája körülbelül száz elemet tartalmaz, azonban a gyakorlatban sokkal kevesebbet használnak folyamatosan. Különböző funkciókat látnak el - az oldal vizuális drótvázának felépítésétől és a szöveg formázásától a harmadik féltől származó fájlok összekapcsolásáig és az Internet hivatalos szabályainak betartásáig.
A dokumentum felépítése
Ahhoz, hogy egy weboldalt a böngésző megfelelően jelenítsen meg, és a robotok jól érzékeljék, bizonyos felépítésűnek kell lennie.
A legelső dokumentumcímkének kell lennie <! DOCTYPE>, deklarálva, hogy milyen típusú.A böngésző a doctype-nak megfelelően rendereli az elrendezést. A legnépszerűbb típus a HTML5 szabvány, amelyet a következőképpen deklarálnak:
<! DOCTYPE html>Az oldalnak tartalmaznia kell egy gyökérelemet, amely az összes tartalmát beburkolja. Ezt a funkciót a címke hajtja végre html.
Minden szolgáltatási információ a szakaszon belül található fej, és a felhasználó számára látható tényleges tartalom címkékbe zárható szerv.
<! DOCTYPE html> <html> <head> <! - szolgáltatási információk -> </head> <test> <! - oldal tartalma -> </body> </html>A címke használata szerv nem feltétlenül tekinthető jó gyakorlatnak. Ez lehetővé teszi, hogy egyértelműen meghatározza a weboldal struktúráját, megjelölje a tartalmi rész elejét és végét.
Minden címke teljes értékű szakasz tartalommal, ezért van nyitó és záró része.
Szolgáltatási információk
A címke belsejében fej olyan adatokat írnak, amelyek nem láthatók a felhasználó számára, de fontosak egy webes dokumentum szempontjából.
A böngésző lapon megjelenő oldal címét a címke határozza meg cím.
<head> <title> FB.ru </title> </head>
Különféle hasznos szolgáltatási információk mutathatók be metacímkék formájában, amelyeknek nincs záró része. A metaadatokat tag attribútumok írják le meta:
név- a leírt ingatlan neve;tartalom- jelentése;http-equiv- annak jelzése, hogy ezt a metacímkét HTTP fejléccé kell konvertálni;karakterkészlet- a kódolás, amelyben a dokumentum mentésre került.
Az alábbiakban felsoroljuk az olyan attribútumokkal rendelkező html címkéket, amelyek hasznosak lehetnek a fontos adatok továbbításához:
<meta charset = "utf-8"> | Weboldal kódolása |
|
| A dokumentum tartalmának leírása és a seo robot kulcsszavai |
|
| Az oldal készítője és a szerzői jogok |
|
| A szerző e-mail címe vagy webhelye |
<meta name = "Revisit-After" content = "5 nap"> | Üzenet a keresőrobotnak, hogy öt nap múlva megváltozik az oldal, és újra indexelni kell |
<meta http-equiv = "expires" content = "Vas, 2018. február 25., 23:59:59 GMT + 03: 00"> | Megmondja a böngészőnek, hogy mennyi ideig kell tárolni a webdokumentumot a gyorsítótárban |
|
| Parancsok egy seo-robot számára, lehetővé téve vagy megtagadva egy oldal indexelését és a linkek követését rajta. Lehetséges értékek:
|
<meta http-equiv = "Frissítés" content = "8, URL =" http://www.site.ru "> | Átirányítás egy másik URL-re a megadott másodpercek után |
Fájlkapcsolat
A teljes működéshez a weboldal gyakran további erőforrásokat igényel, például stílusokat és szkripteket. Felvehetők harmadik fél fájljaiból, vagy meghatározhatók magában a dokumentumban.
A címkén belül meg kell adni a stílusokat fejhogy az oldal megfelelően jelenjen meg. A stílusfájl összekapcsolásához használja a nem záró hivatkozás címkét attribútumokkal href = "fájl címe" és rel = "stíluslap"amely elmondja a böngészőnek, hogy a feltöltött fájl CSS tábla. A stílusszabályok meghatározását az oldalon belül a címkében kell elvégezni stílus.
A szkriptek beépítése a szolgáltatás szakaszba lassíthatja a betöltést, ezért gyakran a dokumentum legalsó részén, a záró címke előtt deklarálják őket. szerv... Az attribútum a fájl címének feltüntetésére szolgál src... Ezenkívül a parancsfájl beírható magában a címkébe is, de a megtekintéshez nem szükséges megadnia a böngésző címét.
Példa a fájlok összekapcsolására:
<html> <head> <link href = "style.css" rel = "stíluslap"> </head> <test> <script src = "script.js"> </script> </body> </html>Példa egy szkript és stílus meghatározására egy oldalon:
<html> <head> <stílus> h1 {szín:zöld; } h2 {szín: kék; } </style> </head> <test> <script> var header = document.getElementById ("fejléc"); header.style.border = "2px folytonos piros"; </script> </body> </html>Oldal elrendezés
Vizuálisan szétbontani a folyamatos áramotformázatlan szöveget szemantikai csoportokba, oszlopokat és külön szakaszokat hozhat létre, strukturális HTML címkéket használhat. Blokktartályokat alkotnak, amelyekhez bármilyen megjelenést beállíthat a CSS használatával.
A legnépszerűbb hipertext jelölő címke kétségtelen div... Semantikus jelentése nincs, és bármilyen tartalmi szegmens csoportosítására használható.
Ezenkívül számos szemantikusa HTML5 szabvány által bevezetett strukturális címkék. Segítenek tartalmuknak bizonyos jelentést adni azáltal, hogy például navigációs blokkként vagy webhely láblécként jelölik meg őket.
Szemantikai jelentéssel bíró HTML-címkék listája az egész oldal szintjén:
| Címke | szemantika |
fejléc | site fejléc, általában a címet, az elérhetőségeket és a főmenüt tartalmazza |
fő- | központi téma |
lábléc | lábléc webhely |
nav | navigációs egység |
cikk | kiemeli a tartalom független területét, például külön cikket vagy megjegyzést |
szakasz | fejlécű weboldal logikai szakasza |
félre | oldalsáv további információkat tartalmaz |
Ezenkívül az új szabvány lehetővé teszi a feliratos médiatartalom szemantikai csoportosítását az ábra és a figcaption címkék használatával.
<ábra> <img src = "/ images / elefant.jpg" alt = "" /> <figcaption> afrikai elefánt </figcaption> </figure>Fejléccímkék
A címkék egész csoportja van <h1> hogy <h6>... A h a fejléc első betűje, a mellette lévő index pedig a fejléc szintje.
<h1> Első szintű fejléc </h1> <h2> Fejlécmásodik szint </h2> <h3> Harmadik szintű fejléc </h3> <h4> 4. szintű fejléc </h4> <h5> 5. szintű fejléc </h5> <h6> 6. szintű fejléc </h6>A gyakorlatban az első három típust használják leggyakrabban.
Hiperhivatkozások kialakítása
A különböző oldalakat összekapcsoló hiperhivatkozásoka világháló alapja, ezért a HTML-ben történő tervezésükre különös figyelmet fordítanak. A linkeknek kiemelkedniük kell a többi szöveg közül, alapértelmezés szerint kékek és aláhúzottak. Ezt a kialakítást a címke biztosítja <a>.
A HTML hiperhivatkozás-attribútumok teljes listája:
- minden általános tulajdonság, például osztály, azonosító, stílus;
- href - annak az oldalnak a címe, amelyre áttérni fognak;
- target - pontosan jelzi, hol nyissa meg az új oldalt. Alapértelmezés szerint a cél az aktuális fül, az érték
üresmeghatározza egy új fül megnyitását. - letöltés - átmenet helyett a megadott fájl letöltésre kerül a felhasználó számítógépére;
- rel - keresőmotorok számára szánt érték
nincs követésmegakadályozza, hogy a robot kövesse a linket; - type - A célfájl MIME típusát jelzi.
Médiatartalom
Az internet nagyon unalmas lenne képek, videók és egyéb médiatartalmak nélkül. A HTML szabványnak több címkéje van az oldal beszúrásához.
A címke képek elhelyezésére szolgál img a következő sajátos tulajdonságokkal:
src- képcím;alt- alternatív szöveg, amely megjelenik, ha hiba történik a kép betöltése során;szélesség,magasság- méretek.
A beágyazott objektumok címkékbe helyezhetők tárgy vagy beágyazemellett a HTML5 szabvány speciális címkéket vezetett be videó- és hang-... Lenyűgöző listájuk van azokról az attribútumokról, amelyek vezérlik a médiatartalom megjelenítését és lejátszását.
Címke iframe külön úszó keretet hoz létre, amelybe egy másik webdokumentum betölthető.
Vászon lehetővé teszi különféle képek készítését és dinamikus, nagy hatékonysággal történő manipulálását a JavaScript használatával.
Szöveg formázása
A szöveges tartalom formázására szolgáló HTML-címkék listája nagyon hosszú.
-ban,erős- merész stílus;és,em,dfn- dőlt;q,blokk idézet- idézőjelek kiemelése;kód,kbd- egyoldalas betűtípus;del,a- áthúzás;ins,u- aláhúzás;Mark- kiemelés sárga színnel;alatti- index;sup- felső index;kicsi- a szöveg kisebb, mint a jelenlegi.
A kényszerített elválasztás a címke segítségével végezhető el <br>. <wbr> felszólítja a böngészőt az esetleges sortörésekre. Ezen kívül van egy címke <pre>a tartalomra alkalmazott formázás nélkül a szóközök és kötőjelek megmaradnak.
A címke segít elrendezni a szöveget bekezdések formájában <p>, és elválasztja őket egy vékony szürke vonallal - <hr>.
Interaktív elemek
Az űrlapok és űrlapok nagyon fontosak az internetes oldalak működéséhez.különféle interaktív elemek. Lehetővé teszik a szükséges adatok fogadását és továbbítását, a felhasználóval való interakciót és dinamikus tartalom létrehozását.
Az egyik legfontosabb űrlapelem a címke által képviselt beviteli mező <bemenet>... Az attribútum értékétől függően sokféle formát ölthet. típus.
Egyéb formai elemek:
gomb- gomb;választ- legördülő lista;textarea- többsoros beviteli mező;címke- a mező aláírása.
Címke forma - interaktív elemeket csoportosít és adatokat küld a szerverre, és - mezőkészlet - egyesíti a kapcsolódó mezőket csoportokba.
Lista kialakítása
A HTML-ben háromféle lista létezik: felsorolással ellátott, számozott és definíciós listák.
A definíciós lista a következőkből áll:
- konténer -
<dl>; - kifejezésnevek -
<dt>; - kifejezésleírások -
<dd>.
<dl> <dt> 1. kifejezés </dt> <dd> Az első kifejezés leírása </dd> <dt> 2. kifejezés </dt> <dd> Második kifejezés leírása </dd> </dl>Számozott lista HTML címke - <ol> (rendezett lista) megjelölve - <ul> (rendezetlen lista). Tételeiket címkébe csomagolják <li> (listaelem).
<ul> <li> mindenki </li> <li> vadász </li> <li> kívánságok </li> <li> tudja </li> <li> hol </li> <li> ülő </li> <li> fácán </li> </ul>Táblázatok formázása
A web másik fontos eleme a táblázatok, amelyek lehetővé teszik nagy mennyiségű információ rendszerezését és kényelmes bemutatását.
HTML tábla címkék listája:
- asztal - asztali tartály;
- fej - fejléc, amely általában fejléceket tartalmaz;
- tbody - a tábla törzse az alapadatokkal;
- tfoot - az a lábléc, amelyben az eredményeket összesítik;
- tr egy sejtsor;
- td - rendes sejt;
- th - fejléc cella, saját alapértelmezett megjelenéssel rendelkezik;
- col - lehetővé teszi táblaoszlop kiválasztását és stílusok alkalmazását;
- colgroup - oszlopok csoportja;
- felirat - felirat az asztalhoz.
Ez a hiányos HTML-címkék listája leírássalbemutatja, milyen széles lehetőségek rejlenek a hipertext jelöléssel a weboldalak tervezésében. Az elrendező bármilyen információt felhasználóbarát formában tud bemutatni, és ezzel egyidejűleg biztosítani tudja az oldal kereső robotok általi jó érzékelését, ami nagyon fontos a promóció szempontjából.
