HTML ir vienkārša valoda, taču tās vārdu krājums ir lielāks, nekā jūs varētu saprast. Uzziniet visu par dažiem neparastākajiem tagiem, ko varat izmantot.
Key Takeaways
- Izmantojiet un tagus, lai izveidotu paplašināmas sadaļas, nodrošinot lietotājam draudzīgu pieredzi un saglabājot tīru dizainu.
- Izceliet svarīgu saturu ar tagu, pievēršot uzmanību atslēgvārdiem, frāzēm vai meklēšanas rezultātiem savā tīmekļa lapā.
- Pievienojiet datumiem un laikiem semantisko nozīmi, izmantojot tagu, uzlabojot pieejamību lietotājiem ar invaliditāti, kuri izmanto ekrāna lasītājus.
Kā tīmekļa izstrādātājam jums ir labi jāpārzina tādi izplatīti HTML tagi kā, , un kas atspoguļo jūsu tīmekļa lapu struktūru un saturu. Tomēr HTML valoda piedāvā daudz vairāk!
Izpētot šos unikālos tagus, varat uzlabot savu tīmekļa lietotņu funkcionalitāti, padarot tās izceļas no citiem.
1. un
Iedomājieties, ka jums ir plaša informācija vai saturs, ar kuru jūs nevēlaties uzreiz pārņemt lasītāju. The un tagi nāk palīgā!
Šie tagi darbojas kopā, lai izveidotu izvēršamu sadaļu ar nosaukumu vai kopsavilkumu, uz kuru jūsu vietnes lietotāji var noklikšķināt, lai atklātu. Pēc noklusējuma detalizētās informācijas elementa saturs netiks rādīts, tādējādi saglabājot jūsu lapu kārtīgu un sakārtotu.
Jūsu apmeklētāji var viegli noklikšķināt uz kopsavilkuma, lai piekļūtu slēptajai informācijai.
<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>
Izmantojot šos tagus, varat paslēpt lielas teksta, koda vai citas informācijas sadaļas, nodrošinot lietotājam draudzīgu pieredzi, vienlaikus saglabājot tīru dizainu. Tie var pat palīdzēt jums uzlabot savu saskarnes dizainera prasmes.
2.
The tags ļauj izcelt noteiktas satura daļas, padarot tās vizuāli pamanāmas. Kad jūs izmantojat elementu, pārlūkprogrammas tekstam parasti izmanto dzeltenu fona krāsu, pievēršot tam lasītāja uzmanību.
Šī funkcija ir īpaši noderīga, ja vēlaties savā tīmekļa lapā uzsvērt atslēgvārdus, svarīgas frāzes vai meklēšanas rezultātus.
<p>
You can use the <mark>markmark> tag to highlight important words or
phrases.
p>Piemēram, ja jūsu vietnei ir meklēšanas funkcionalitāte, varat izmantot tagu, lai izceltu meklēšanas vaicājuma atbilstības rezultātos, tādējādi lietotājiem atvieglojot atbilstošas informācijas atrašanu.
3.
Vai esat kādreiz saskāries ar situācijām, kad saturs kļūst novecojis vai vairs nav atbilstošs, bet joprojām vēlaties to rādīt vēsturiskiem nolūkiem vai norādīt uz izmaiņām laika gaitā?
Ievadiet tagu! Tas nozīmē pārsvītrots un atveido jebkuru elementa saturu ar līniju caur vidu.
<p>
This product is <s>out-of-stocks> currently available at a discounted
price!
p>Šajā piemērā nav noliktavā teksts tiks parādīts ar līniju caur to, kas norāda, ka preces noliktavā ir mainījies statuss.
4.
Ja savā saturā vēlaties pievienot semantisku nozīmi datumiem un laikiem, tags noder.
Izmantojot datums Laiks atribūtu, varat norādīt datuma vai laika mašīnlasāmu versiju, kas palīdz pārlūkprogrammām, meklētājprogrammām un ekrāna lasītājiem izprast kontekstu.
<p>
The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>Izmantojot tagu, jūs piešķirat savam saturam lielāku struktūru un padarāt to pieejamu plašākam lietotāju lokam, tostarp tiem, kuriem ir invaliditāte un kuri izmanto ekrāna lasītājus.
5.
Teksta pārvaldība tīmekļa lapā vairākās valodās dažkārt var būt sarežģīta, it īpaši, ja katrai daļai ir nepieciešams atšķirīgs formatējums.
The tags nāk palīgā, izolējot teksta daļu, kas pārlūkprogrammai būtu jārīkojas atšķirīgi dažādu valodas prasību dēļ.
<p>
<bdi>5,000bdi> people attended the conference.
p>Šajā piemērā elements apņem numuru 5,000. Tas nodrošina, ka, ja apkārtējais teksts ir citā valodā vai ir nepieciešams cits formatējums, tas netraucēs numuram.
6. ,
Austrumāzijas tipogrāfijā, kur izrunas norādījumi, furigana vai citas piezīmes parasti tiek izmantotas virs vai zem rakstzīmēm,, , un atzīmes sāk darboties.
<p>
I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>Šajā piemērā elements satur rakstzīmi 漢 (Kanji) un elements satur izrunu かん (kan). The elementi nodrošina atkāpšanās iekavas pārlūkprogrammām, kas neatbalsta rubīna anotācijas.
7.
Ja jums ir gari vārdi, kas var sabojāt jūsu izkārtojumu, tags ir šeit, lai palīdzētu. Tā piedāvā iespēju rindiņas pārtraukumam (vārda pārtraukuma iespēja) garā vārdā, kur pārlūkprogramma var izvēlēties aplauzt tekstu.
<p>
This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>Iepriekš minētajā piemērā garais URL ietver a elements, kas ļauj pārlūkprogrammai vajadzības gadījumā to sadalīt divās rindās, saglabājot apkārtējā satura izkārtojumu.
8. un
Zinātniskiem vai matemātiskiem apzīmējumiem, ķīmiskajām formulām vai zemsvītras piezīmēm varat izmantot un atzīmes attiecīgi apakšindeksa un augšindeksa tekstam.
<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>Šajā piemērā tiek izmantots tagu, lai parādītu 2 iekšā H2O kā apakšindeksu, savukārt tagi parāda eksponentus Pitagora teorēmā.
9.
Vai ir jāattēlo skalārie mērījumi zināmā diapazonā, piemēram, diska lietojums, vērtējumi vai eksāmenu rezultāti? The tags ir nodrošinājis jūs.
Izmantojot vērtību, min, un maks atribūtus, varat definēt attiecīgi pašreizējo vērtību, minimālo vērtību un maksimālo mērījuma vērtību.
<metervalue="75"min="0"max="100">75%meter>Šajā piemērā elements apzīmē eksāmena rezultātu 75%.
10.
Kad vajag izveidot modāliem dialoglodziņu vai loga pārklājumu vai labi izturēta modālā uznirstošā mijiedarbība, tags ir pareizais ceļš. Jūs varat izmantot atvērts atribūtu, lai pēc noklusējuma parādītu dialoglodziņu.
<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>Šajā piemērā vienkāršs dialoglodziņš, kurā ir rindkopa un aizvēršanas poga, parāda, kad lapa tiek ielādēta, pateicoties atvērts atribūts. Varat pielāgot dialoglodziņa saturu un darbību, izmantojot JavaScript, lai uzlabotu mijiedarbību.
11.
Izmantojiet tagu, lai grupētu saistītās opcijas sadaļā a nolaižamās izvēlnes elements. Tas ļauj sakārtot un klasificēt opcijas, lai atvieglotu navigāciju un atlasi.
- Thetags ir konteinera elements, kas ir saistīts ar grupām atzīmes a elements.
- Tas palīdz sakārtot opcijas, izveidojot vizuālu grupēšanu vai kategoriju nolaižamajā izvēlnē.
- The tagam ir nepieciešams etiķetes atribūts, kas norāda opciju grupas nosaukumu vai nosaukumu.
- Tas var saturēt vienu vai vairākus atzīmes kā tās pakārtotie elementi, kas pārstāv atsevišķas opcijas grupā.
Piemēram:
<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>
Šajā piemērā atlases nolaižamā izvēlne ir sagrupēta divās sadaļās: Āzija, un Eiropā. Katrā grupā ir atzīmes, kas apzīmē dažādas valstis šajā reģionā.
Uzlabojiet savas prasmes tīmekļa izstrādē
Šo mazāk zināmo HTML tagu apgūšana var ievērojami uzlabot jūsu tīmekļa izstrādes prasmes. Neskatoties uz atpazīstamības trūkumu, tie piedāvā vērtīgas funkcijas konkrētiem kontekstiem.
Šo tagu pievienošana prasmju kopai uzlabo interaktivitāti, pieejamību un racionalizē tīmekļa izstrādes procesu. Ņemiet vērā: lai gan tie var būt nepazīstami, tie būtiski ietekmē jūsu kā tīmekļa izstrādātāja ceļu.
