HTML5 kohatäidete lingid algaja juhend

Mis on HTML5 kohatoodete lingid?

IDUP kuni HTML5-s on sildil vaja üks atribuut: href. Kuid HTML5 muudab isegi selle atribuudi valikuliseks. Kui kirjutad sildi ilma atribuutideta, nimetatakse seda kohatähendajaks.

Kohatäite link näeb välja selline:

Eelmine

Placeholder linkide kasutamine arengu ajal

Peaaegu iga veebidisainer on loonud veebisaidi kujundamise ja ehitamise ajal kohesihiga seotud linke. Enne HTML5 kirjutame:

lingi tekst

kohakuti. Ja olen saatnud mockup saidid klientidele nende kohahoidjate ainult selleks, et klient küsiks minult "miks tekstis olevad lingid ei tööta?"

Probleem, mis on seotud hashtagiga (#) kohtade hoidja linkina, on see, et link on klõpsatav ja see võib teie klientidele segadust tekitada. Ja kui keegi unustas neid õigete URL-idega värskendada, võivad need linkid reaalajas saiti puruneda, kuna need ei viita midagi.

Selle asemel peaksite kasutama silte ilma atribuutideta. Võite need stiilid välja nägema nagu ükskõik milline muu lehe link, kuid neid ei saa klikkida, kuna need on lihtsalt kohanäitajad.

Kohalike lingide kasutamine otselinkides

Kuid kohatäidete lingid on veebilehtede kujundamisel rohkem kui lihtsalt arendus. Üks koht, kus kohakuti link võib sära, on navigatsioonis. Paljudel juhtudel on veebisaidi navigeerimisloendites mingil viisil näidatud, millise leheküljega te olete. Neid nimetatakse sageli näitaks "olete siin".

Enamik saite tuginevad elemendi id-atribuutidele, mis vajavad märgistust "oled siin", kuid mõned kasutavad ka klassi atribuuti. Kuid mis tahes atribuudi kasutamisel peate tegema hulga tööd kõigile lehtedele, millel on navigeerimine, lisades ja eemaldades atribuudi õigetest elementidest.

Kohtundja linkiga saate kirjutada oma navigeerimise soovi korral ja seejärel eemaldage href-atribuut vastavast linkist, kui lisate lehele navigeerimise. Ma salvestan oma kogu navigeerimisloendi fragmentina minu redaktorisse, nii et see on lihtsalt kiire kopeerimine ja seejärel hrefi kustutamine. Samuti saate oma CMSi teha samamoodi.

Lisaks spetsiaalse stiili lisamisele (ma näitan sulle allpool) kohatähendaja linki, ei saa linki klikkida. Nii et kliendid ei saa segaduses mõtlema, et nad võivad saada midagi muud, kui nad klikivad navigeerimislingil, kus nad praegu on.

Stiilne kohatäidete lingid

Kohtakohvrite lingid on kergesti stiililt ja stiili erinevad teistest teie veebisaidi linkidest. Lihtsalt veenduge, et stiiliksid nii sildi kui ka a: linki sildi. Näiteks:

a {värv: punane; font-mass: bold; teksti-dekoratsioon: puudub; } a: link {color: blue; font-mass: normaalne; tekstikujundus: rõhutage; }

See CSS teeb kohatähendajana linke järkjärguliseks ja punaseks, ilma rõhutamata. Kuigi tavalised lingid on tavalise kaalu, sinise ja alla joonitud.

Pidage meeles, et lähtestage kõik stiilid, mida te ei soovi sildist eemaldada. Näiteks määrasin märksõnade raskuse järk-järgult kohakeraja linkide jaoks, nii et mul oli vaja seda määrata:

font-mass: normaalne;

standardsete lingidena. Sama kehtib ka teksti sisustamiseks, eemaldades selle valijaga, oleks see eemaldatud a: linki valija jaoks, kui ma seda enam tagasi ei panda.