Mitä HTML5 Paikkamerkki-linkit ovat?
idUp kunnes HTML5, a-tunniste on edellyttänyt yhtä attribuuttia: href. Mutta HTML5 tekee myös kyseisen attribuutin valinnaksi. Kun kirjoitat tunnisteen ilman attribuutteja, sitä kutsutaan paikkamerkkitunnukseksi.
Paikkamerkkiliitäntä näyttää tältä:
EdellinenPaikkamerkkien linkkien käyttäminen kehityksen aikana
Lähes jokainen web-suunnittelija on luonut paikkamerkkiyhteyksiä kerralla tai toisella samalla, kun suunnittelet ja rakennat verkkosivuja. Ennen HTML5: ta kirjoittaisimme:
linkkitekstikuten paikkamerkki. Ja olen lähettänyt mockup-sivustoja näiden paikkamerkkien asiakkaille vain, jos asiakas kysyy minulta "miksi tekstin linkit eivät toimi?"
Ongelma hashtagin (#) käyttämisessä paikkamerkkisuojana on, että linkkiä voidaan napsauttaa ja tämä voi aiheuttaa sekaannusta asiakkaillesi. Ja jos joku ei unohda päivittää niitä oikeilla URL-osoitteilla, nämä linkit voivat näyttää rikkinäiseltä sivustolta, koska ne eivät liity mihinkään.
Sen sijaan sinun tulisi aloittaa tunnisteiden käyttäminen ilman attribuutteja. Voit muotoilla ne näyttämään miltä tahansa muulta sivulta, mutta niitä ei voi napsauttaa, koska ne ovat vain paikkamerkkejä.
Paikkamerkkiyhteyden käyttäminen Live-sivustoissa
Paikkamerkkisuhteilla on kuitenkin sijaa web-suunnittelussa enemmän kuin pelkkää kehitystä. Yksi paikka, jonka paikkamerkkiyhteys voi loistaa, on navigoinnissa. Monissa tapauksissa verkkosivustojen navigointi-luettelot ovat jossain määrin osoitus siitä, miltä sivulta olet. Näitä kutsutaan usein "olet täällä" -indikaattoreilla.
Useimmat sivustot luottavat id attribuutteihin elementin, joka tarvitsee "olet täällä" merkin, mutta jotkut käyttävät myös luokan ominaisuutta. Kuitenkin mitä tahansa attribuuttia käytät, sinun on tehtävä työryhmä jokaiselle sivulle, jolla on navigointi, lisäämällä ja poistamalla attribuutti oikeista elementeistä.
Paikkamerkkiliitännän avulla voit kirjoittaa haluamasi navigoinnin ja poistaa sitten href-attribuutin asianmukaisesta linkistä, kun lisäät navigoinnin sivulle. Tallennan koko navigointilistani koodinpätkänä muokkaajassani, joten se on vain nopea kopiointityö ja poista sitten href. Voit myös saada CMS: n tekemään saman.
Ja sen lisäksi, että lisätään erityinen muotoilu (näytän sinulle, miten alla) paikkamerkkiliitokselle, linkkiä ei voi napsauttaa. Joten asiakkaat eivät sekaudu ajattelemaan, että he saisivat jotain muuta, jos he napsauttavat navigointiyhteyttä, jossa he ovat tällä hetkellä.
Styling Placeholder Linkit
Paikkamerkkien linkit ovat helposti tyylikkäitä ja tyyliä eri tavoin kuin muut verkkosivustosi linkit. Varmista, että tyylit sekä a-tag että a: linkitunniste. Esimerkiksi:
a {väri: punainen; font-weight: bold; teksti-decoration: none; } a: linkki {väri: sininen; font-paino: normaali; teksti-decoration: underline; }Tämä CSS tekee paikkamerkkien linkit rohkeiksi ja punaisiksi, ilman alleviivausta. Säännölliset linkit ovat normaalipainoisia, sinisiä ja alleviivattuja.
Muista palauttaa kaikki tyylit, joita et halua siirtää a-tagista. Esimerkiksi asetin fontin paino lihavointiin paikkamerkkien linkit, joten minun oli asetettava se:
font-paino: normaali;vakiolinkkien osalta. Sama pätee tekstin sisustukseen poistamalla sen valitsimella, se olisi poistettu a: linkin valitsimelle, jos en olisi palauttanut sitä.