Gabay ng Baguhan sa Mga Link sa Placeholder ng HTML5

Ano ang Mga Link ng HTML5 Placeholder Para sa?

idUp hanggang sa HTML5, ang isang tag ay nangangailangan ng isang katangian: href. Ngunit ang HTML5 ay gumagawa ng kahit na katangiang opsyonal na iyon. Kapag isinulat mo ang isang tag nang walang anumang mga katangian na tinatawag itong link na placeholder.

Mukhang ganito ang isang link sa placeholder:

Nakaraang

Paggamit ng Mga Link ng Placeholder Sa Panahon ng Pagpapaunlad

Halos bawat taga-disenyo ng web ay lumikha ng mga link sa placeholder sa isang pagkakataon o iba pa habang nagdidisenyo at nagtatayo ng isang website. Bago ang HTML5, isusulat namin:

teksto ng link

bilang placeholder. At ipinadala ko ang mga site ng mockup sa mga kliyente na may mga placeholder na lamang upang hilingin sa akin ng client na "bakit hindi gumagana ang mga link sa text?"

Ang problema sa paggamit ng isang hashtag (#) bilang isang link ng placeholder ay ang link ay maaaring i-click, at ito ay maaaring maging sanhi ng pagkalito para sa iyong mga kliyente. At, kung may isang taong nakalimutan na i-update ang mga ito gamit ang mga wastong URL, maaaring lumitaw ang mga link na iyon sa live na site dahil hindi sila naka-link sa anumang bagay.

Sa halip, dapat mong simulan ang paggamit ng mga tag nang walang anumang mga katangian. Maaari mong estilo ang mga ito upang magmukhang anumang iba pang mga link sa iyong pahina, ngunit hindi nila ma-click dahil ang mga ito ay mga placeholder lamang.

Paggamit ng Mga Link ng Placeholder sa Mga Live na Site

Ngunit ang mga link sa placeholder ay may lugar sa disenyo ng web para sa higit pa sa pag-unlad. Isang lugar na maaaring lumiwanag ang isang placeholder na link ay nabigasyon. Sa maraming sitwasyon, may mga listahan ng nabigasyon sa website na nagpapahiwatig kung aling pahina ikaw ay nasa. Ang mga ito ay madalas na tinatawag na "ikaw ay dito" tagapagpahiwatig.

Karamihan sa mga site ay umaasa sa mga katangian ng id sa elemento na nangangailangan ng marker na "narito ka", ngunit ginagamit din ng ilan ang katangian ng klase. Gayunpaman, anuman ang katangiang ginagamit mo, kailangan mong gumawa ng isang grupo ng trabaho sa bawat pahina na may nabigasyon dito, pagdaragdag at pag-alis ng katangian mula sa mga tamang elemento.

Sa isang link ng placeholder, maaari mong isulat ang iyong nabigasyon gayunpaman gusto mo, at pagkatapos ay alisin lamang ang href attribute mula sa naaangkop na link kapag idinagdag mo ang nabigasyon sa isang pahina. Nag-iimbak ako ng aking buong listahan sa pag-navigate bilang isang snippet sa aking editor, kaya ito ay isang mabilis na kopya-i-paste at pagkatapos ay tanggalin ang href. Maaari mo ring makuha ang iyong CMS upang gawin ang parehong bagay.

At bukod sa pagdaragdag ng espesyal na estilo (ipapakita ko sa iyo kung paano sa ibaba) sa isang link na placeholder, ang link ay hindi naki-click. Kaya ang mga kliyente ay hindi nalilito sa pag-iisip na maaari silang makakuha ng ibang bagay kung mag-click sila sa link sa nabigasyon kung saan sila kasalukuyang.

Mga Link ng Pag-istilo ng Placeholder

Ang mga link ng mga placeholder ay madaling istilo at magkaiba ang estilo mula sa iba pang mga link sa iyong web page. Tiyaking tiyakin na pareho ang isang tag at ang isang: tag na link. Halimbawa:

isang {kulay: pula; font-weight: bold; text-decoration: none; } a: link {color: blue; font-weight: normal; text-decoration: underline; }

Ang CSS na ito ay gagawing naka-bold at pula na mga link ng placeholder, nang walang salungguhit. Habang ang regular na mga link ay normal na timbang, asul at nakasalansan.

Tandaan na i-reset ang anumang mga estilo na hindi mo gustong dalhin mula sa isang tag. Halimbawa, inilagay ko ang font-weight sa bold para sa mga link sa placeholder, kaya kinailangan ko itong i-set sa:

font-weight: normal;

para sa karaniwang mga link. Ang parehong ay totoo sa teksto-dekorasyon, sa pamamagitan ng pag-alis sa isang tagapili, ito ay tinanggal na para sa a: link selector kung hindi ko ibinalik ito.