HTML on lihtne keel, kuid selle sõnavara on suurem, kui võite arvata. Lugege kõike ebatavalisemate siltide kohta, mida saate kasutada.

Võtmed kaasavõtmiseks

  • Kasutage ja silte laiendatavate jaotiste loomiseks, pakkudes kasutajasõbralikku kogemust ja säilitades puhta kujunduse.
  • Tõstke märgendiga esile oluline sisu, juhtides tähelepanu märksõnadele, fraasidele või otsingutulemustele oma veebilehel.
  • Lisage märgendi abil kuupäevadele ja kellaaegadele semantiline tähendus, parandades ekraanilugejaid kasutavate puuetega kasutajate juurdepääsu.

Veebiarendajana peaksite olema hästi kursis selliste tavaliste HTML-märgenditega nagu, ja mis esindavad teie veebilehtede struktuuri ja sisu. HTML-keel pakub aga palju enamat!

Neid ainulaadseid märgendeid uurides saate oma veebirakenduste funktsionaalsust täiustada, muutes need teistest silmapaistvaks.

1.
ja

Kujutage ette, et teil on ulatuslikku teavet või sisu, millega te ei soovi lugejat kohe üle koormata. The ja sildid tulevad appi!

Need sildid loovad koos pealkirja või kokkuvõttega laiendatava jaotise, mille kuvamiseks saavad teie veebisaidi kasutajad klõpsata. Vaikimisi üksikasjade elemendi sisu ei kuvata, hoides teie lehe korras ja korras.

instagram viewer

Teie külastajad saavad peidetud teabele juurdepääsuks hõlpsasti klõpsata kokkuvõttel.

<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>

Nende siltidega saate peita suuri teksti-, koodi- või muu teabe osasid, pakkudes kasutajasõbralikku kogemust, säilitades samas puhta kujunduse. Nad võivad isegi aidata teil oma liidese kujundaja oskused.

2.

The märgend võimaldab teil esile tõsta sisu teatud osi, muutes need visuaalselt silmapaistvaks. Kui kasutate element, rakendavad brauserid tavaliselt sees olevale tekstile kollast taustavärvi, juhtides sellele lugeja tähelepanu.

See funktsioon on eriti kasulik, kui soovite oma veebilehel rõhutada märksõnu, olulisi fraase või otsingutulemusi.

<p>
 You can use the <mark>markmark> tag to highlight important words or
 phrases.
p>

Näiteks kui teie veebisaidil on otsingufunktsioon, saate kasutada märgend, et tõsta esile otsingupäringu vasted tulemustes, hõlbustades kasutajatel asjakohase teabe leidmist.

3.

Kas olete kunagi kohanud olukordi, kus sisu vananeb või pole enam asjakohane, kuid soovite seda siiski kuvada ajaloolistel eesmärkidel või aja jooksul toimunud muutustele viitamiseks?

Sisestage märgi! See tähistab läbikriipsutatud ja renderdab mis tahes sisu elemendis keskelt läbiva joonega.

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

Selles näites on läbimüüdud kuvatakse tekst koos seda läbiva joonega, mis näitab, et toote laoseis on muutunud.

4.

Kui soovite lisada oma sisu kuupäevadele ja kellaaegadele semantilise tähenduse, silt tuleb kasuks.

Kasutades kuupäev Kellaaeg atribuudiga saate määrata kuupäeva või kellaaja masinloetava versiooni, mis aitab brauseritel, otsingumootoritel ja ekraanilugejatel konteksti mõista.

<p>
 The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>

Kasutades märgendiga, annate oma sisule rohkem struktuuri ja muudate selle kättesaadavaks suuremale hulgale kasutajatele, sealhulgas puuetega inimestele, kes kasutavad ekraanilugejaid.

5.

Veebilehe mitmes keeles teksti haldamine võib mõnikord olla keeruline, eriti kui iga osa nõuab erinevat vormindamist.

The silt tuleb appi, eraldades osa tekstist, mida brauser peaks erinevate keelenõuete tõttu erinevalt käsitlema.

<p>
<bdi>5,000bdi> people attended the conference.
p>

Selles näites on element ümbritseb numbrit 5,000. See tagab, et kui ümbritsev tekst on teises keeles või nõuab erinevat vormingut, ei sega see numbrit.

6. , ,

Ida-Aasia tüpograafia puhul, kus hääldusjuhiseid, furiganat või muid märkusi kasutatakse tavaliselt tähemärkide kohal või all,, ja sildid tulevad mängu.

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

Selles näites on element sisaldab tähemärki 漢 (Kanji) ja element sisaldab hääldust かん (kan). The elemendid pakuvad varusulgusid brauserite jaoks, mis ei toeta rubiinmärkusi.

7.

Kui teil on pikki sõnu, mis võivad teie paigutust rikkuda, silt on siin abiks. See viitab võimalusele reavahetuseks (sõna murdmise võimalus) pikas sõnas, kus brauser võib valida teksti murdmise.

<p>
 This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>

Ülaltoodud näites sisaldab pikk URL a element, mis laseb brauseril selle vajadusel kaheks reaks jagada, säilitades ümbritseva sisu paigutuse.

8. ja

Teaduslike või matemaatiliste märgete, keemiliste valemite või joonealuste märkuste jaoks saate kasutada ja sildid vastavalt ala- ja ülaindeksi teksti jaoks.

<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>

See näide kasutab sildi kuvamiseks 2 sisse H2O alamindeksina, samas kui sildid näitavad Pythagorase teoreemi eksponente.

9.

Kas soovite esitada skalaarmõõtmisi teadaolevas vahemikus, nagu kettakasutus, reitingud või eksamitulemused? The silt on teid kaitsnud.

Kasutades väärtus, minja max atribuudid, saate määrata vastavalt mõõtmise hetkeväärtuse, minimaalse väärtuse ja maksimaalse väärtuse.

<metervalue="75"min="0"max="100">75%meter>

Selles näites on element tähistab eksami tulemust 75%.

10.

Kui teil on vaja luua modaalide jaoks dialoogiboks või akna ülekate või hästi käitunud modaalsed hüpikinteraktsioonid, silt on õige tee. Võite kasutada avatud atribuut dialoogiboksi kuvamiseks vaikimisi.

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>

Selles näites näitab lihtne dialoogiboks, mis sisaldab lõiku ja sulgemisnuppu, millal leht laaditakse tänu avatud atribuut. Täpsema suhtluse jaoks saate kohandada dialoogiboksi sisu ja käitumist JavaScripti abil.

11.

Kasuta märgendiga seotud valikute rühmitamiseks a-s rippmenüü element. See võimaldab teil korraldada ja kategoriseerida valikuid, et hõlbustada navigeerimist ja valikut.

  • Thesilt on konteineri element, mis on seotud rühmadega sildid a-s element.
  • See aitab korraldada valikuid, luues rippmenüüs visuaalse rühmitamise või kategoriseerimise.
  • The silt nõuab sildi atribuuti, mis määrab valikurühma nime või pealkirja.
  • See võib sisaldada ühte või mitut sildid selle alamelementidena, mis esindavad rühmasiseseid individuaalseid valikuid.

Näiteks:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>

See näide rühmitab valiku rippmenüü kahte jaotisse. Aasiaja Euroopa. Iga rühm sisaldab silte, mis tähistavad selle piirkonna erinevaid riike.

Täiustage oma veebiarenduse oskusi

Nende vähemtuntud HTML-märgendite õppimine võib teie veebiarendusoskusi oluliselt parandada. Hoolimata nende vähesest tunnustamisest pakuvad need väärtuslikke funktsioone konkreetsete kontekstide jaoks.

Nende siltide lisamine oma oskuste kogumile suurendab interaktiivsust, juurdepääsetavust ja muudab veebiarendusprotsessi sujuvamaks. Pidage meeles, et kuigi need võivad olla võõrad, mõjutavad need oluliselt teie teekonda veebiarendajana.