HTML yra paprasta kalba, tačiau jos žodynas yra didesnis, nei galite suprasti. Sužinokite viską apie kai kurias neįprastesnes žymas, kurias galite naudoti.
Key Takeaways
- Naudokite ir žymas, kad sukurtumėte išplečiamas skiltis, suteikdami patogią patirtį ir išlaikydami švarų dizainą.
- Pažymėkite svarbų turinį naudodami žymą, atkreipdami dėmesį į raktinius žodžius, frazes ar paieškos rezultatus savo tinklalapyje.
- Naudodami žymą pridėkite semantinę datų ir laiko reikšmę, pagerindami neįgalių naudotojų, naudojančių ekrano skaitytuvus, prieinamumą.
Kaip žiniatinklio kūrėjas turėtumėte gerai išmanyti įprastas HTML žymas, pvz.,, , ir kurie atspindi jūsų tinklalapių struktūrą ir turinį. Tačiau HTML kalba siūlo daug daugiau!
Ištyrę šias unikalias žymas galite patobulinti savo žiniatinklio programų funkcionalumą, kad jos išsiskirtų iš minios.
1. ir
Įsivaizduokite, kad turite daug informacijos ar turinio, kurio nenorite iškart priblokšti skaitytojo. The ir žymės ateis į pagalbą!
Šios žymos kartu sukuria išplečiamą skiltį su pavadinimu arba santrauka, kurią spustelėję jūsų svetainės naudotojai gali atskleisti. Pagal numatytuosius nustatymus išsamios informacijos elemento turinys nebus rodomas, todėl jūsų puslapis bus tvarkingas ir tvarkingas.
Jūsų lankytojai gali lengvai spustelėti santrauką, kad pasiektų paslėptą informaciją.
<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
clicks the summary.p>
details>
Naudodami šias žymas galite paslėpti dideles teksto, kodo ar kitos informacijos dalis, suteikdami patogią patirtį ir išlaikydami švarų dizainą. Jie netgi gali padėti jums patobulinti savo sąsajos dizainerio įgūdžiai.
2.
The Naudodami žymą galite paryškinti konkrečias turinio dalis, kad jos vizualiai išsiskirtų. Kai naudojate elementą, naršyklės paprastai taiko geltoną fono spalvą viduje esančiam tekstui, atkreipdamos į jį skaitytojo dėmesį.
Ši funkcija ypač naudinga, kai savo tinklalapyje norite pabrėžti raktinius žodžius, svarbias frazes ar paieškos rezultatus.
<p>
You can use the <mark>markmark> tag to highlight important words or
phrases.
p>Pavyzdžiui, jei jūsų svetainėje yra paieškos funkcija, galite naudoti žyma, kad paryškintumėte paieškos užklausos atitikmenis rezultatuose, todėl naudotojams būtų lengviau rasti atitinkamą informaciją.
3.
Ar kada nors susidūrėte su situacijomis, kai turinys paseno arba nebeaktualus, bet vis tiek norite jį rodyti istoriniais tikslais arba nurodyti pokyčius laikui bėgant?
Įveskite žyma! Tai reiškia perbrauktas ir pateikia bet kokį elemento turinį su linija per vidurį.
<p>
This product is <s>out-of-stocks> currently available at a discounted
price!
p>Šiame pavyzdyje Išparduota tekstas bus rodomas su linija, nurodant, kad prekės būklė pasikeitė.
4.
Jei norite pridėti semantinę reikšmę savo turinio datoms ir laikui, žyma praverčia.
Naudojant data ir laikas atributas, galite nurodyti mašininiu būdu nuskaitomą datos arba laiko versiją, kuri padės naršyklėms, paieškos sistemoms ir ekrano skaitytuvams suprasti kontekstą.
<p>
The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>Naudodami žymą, suteikiate savo turiniui daugiau struktūros ir darote jį prieinamą didesniam vartotojų ratui, įskaitant neįgaliuosius, kurie naudoja ekrano skaitytuvus.
5.
Tvarkyti tekstą keliomis kalbomis tinklalapyje kartais gali būti sudėtinga, ypač kai kiekvienai daliai reikia skirtingo formatavimo.
The žyma padeda atskirti teksto dalį, kurią naršyklė turėtų traktuoti skirtingai dėl skirtingų kalbos reikalavimų.
<p>
<bdi>5,000bdi> people attended the conference.
p>Šiame pavyzdyje elementas apvynioja skaičių 5,000. Tai užtikrina, kad jei aplinkinis tekstas yra kita kalba arba reikalauja kitokio formatavimo, jis netrukdys numeriui.
6. ,
Rytų Azijos tipografijoje, kai tarimo vadovai, furigana ar kiti komentarai dažniausiai naudojami virš arba po simboliais,, , ir įsijungia žymos.
<p>
I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>Šiame pavyzdyje elemente yra simbolis 漢 (Kanji) ir elemente yra tarimas かん (kan). The elementai pateikia atsarginius skliaustus naršyklėms, kurios nepalaiko rubino komentarų.
7.
Kai turite ilgus žodžius, kurie gali sugadinti jūsų išdėstymą, žyma yra čia, kad padėtų. Jame siūloma eilutės lūžio galimybė (žodžio lūžio galimybė) ilgame žodyje, kai naršyklė gali pasirinkti įterpti tekstą.
<p>
This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>Anksčiau pateiktame pavyzdyje ilgas URL apima a elementas, leidžiantis naršyklei, jei reikia, suskaidyti jį į dvi eilutes, išsaugant aplinkinio turinio išdėstymą.
8. ir
Moksliniams ar matematiniams žymėjimams, cheminėms formulėms ar išnašoms galite naudoti ir atitinkamai apatinio ir viršutinio indekso teksto žymos.
<p>
The chemical formula for water is H<sub>2sub>O,
and the Pythagorean theorem is
a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>Šiame pavyzdyje naudojama žyma, kad būtų rodomas 2 in H2O kaip apatinis indeksas, o žymės rodo eksponentus Pitagoro teoremoje.
9.
Reikia pateikti skaliarinius matavimus žinomo diapazono ribose, pvz., disko naudojimą, įvertinimus ar egzamino balus? The žyma jus apėmė.
Naudojant vertė, min, ir maks atributus, galite atitinkamai apibrėžti dabartinę, mažiausią ir maksimalią matavimo reikšmę.
<metervalue="75"min="0"max="100">75%meter>Šiame pavyzdyje elementas reiškia egzamino balą 75%.
10.
Kai reikia sukurti modalų dialogo langą arba lango perdangą arba gerai veikianti modalinė iššokančiųjų langų sąveika, žyma yra kelias. Galite naudoti atviras atributas, kad dialogo langas būtų rodomas pagal numatytuosius nustatymus.
<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>Šiame pavyzdyje paprastas dialogo langas, kuriame yra pastraipa ir uždarymo mygtukas, rodo, kada puslapis įkeliamas atviras atributas. Galite tinkinti dialogo lango turinį ir elgseną naudodami „JavaScript“, kad sąveika būtų sudėtingesnė.
11.
Naudoti žyma, kad sugrupuotų susijusias parinktis a išskleidžiamojo elemento. Tai leidžia tvarkyti ir suskirstyti parinktis, kad būtų lengviau naršyti ir pasirinkti.
- Thežyma yra sudėtinio rodinio elementas, susijęs su grupėmis žymos, esančios a elementas.
- Tai padeda tvarkyti parinktis sukuriant vaizdinį grupavimą arba skirstymą į kategorijas išskleidžiamajame meniu.
- The žymai reikalingas etiketės atributas, nurodantis parinkčių grupės pavadinimą arba pavadinimą.
- Jame gali būti vienas ar daugiau žymės kaip antriniai elementai, atspindintys atskiras grupės parinktis.
Pavyzdžiui:
<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>
Šiame pavyzdyje pasirinkimo išskleidžiamasis meniu sugrupuojamas į dvi dalis: Azija, ir Europa. Kiekvienoje grupėje yra žymų, nurodančių skirtingas to regiono šalis.
Pagerinkite žiniatinklio kūrimo įgūdžius
Išmokę šias mažiau žinomas HTML žymas, galite labai pagerinti žiniatinklio kūrimo įgūdžius. Nepaisant atpažinimo stokos, jie siūlo vertingų savybių tam tikriems kontekstams.
Šių žymų pridėjimas prie įgūdžių rinkinio padidina interaktyvumą, prieinamumą ir supaprastina žiniatinklio kūrimo procesą. Atminkite, kad nors jie gali būti nepažįstami, jie daro didelę įtaką jūsų, kaip žiniatinklio kūrėjo, kelionei.