HTML to prosty język, ale jego słownictwo jest obszerniejsze, niż mogłoby się wydawać. Dowiedz się wszystkiego o niektórych bardziej nietypowych tagach, których możesz użyć.

Kluczowe dania na wynos

  • Używaj i tagów, aby tworzyć rozwijalne sekcje, zapewniając przyjazną dla użytkownika obsługę i zachowując przejrzysty projekt.
  • Zaznacz ważne treści za pomocą tagu, zwracając uwagę na słowa kluczowe, wyrażenia lub wyniki wyszukiwania na swojej stronie internetowej.
  • Dodaj znaczenie semantyczne do dat i godzin za pomocą znacznika, poprawiając dostępność dla użytkowników niepełnosprawnych korzystających z czytników ekranu.

Jako programista stron internetowych powinieneś dobrze znać popularne tagi HTML, takie jak, , I reprezentujących strukturę i zawartość Twoich stron internetowych. Jednak język HTML oferuje znacznie więcej!

Eksplorując te unikalne tagi, możesz zwiększyć funkcjonalność swoich aplikacji internetowych, dzięki czemu będą się wyróżniać z tłumu.

1.
I

Wyobraź sobie, że masz obszerne informacje lub treści, którymi nie chcesz od razu przytłoczyć czytelnika. The I tagi przychodzą na ratunek!

instagram viewer

Te tagi współpracują ze sobą, tworząc rozwijaną sekcję z tytułem lub podsumowaniem, które użytkownicy Twojej witryny mogą kliknąć, aby wyświetlić. Domyślnie zawartość elementu szczegółów nie będzie wyświetlana, dzięki czemu Twoja strona będzie uporządkowana i zorganizowana.

Twoi goście mogą łatwo kliknąć podsumowanie, aby uzyskać dostęp do ukrytych informacji.

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

Za pomocą tych tagów można ukryć duże sekcje tekstu, kodu lub innych informacji, zapewniając przyjazną dla użytkownika obsługę przy jednoczesnym zachowaniu przejrzystego wyglądu. Mogą nawet pomóc ci udoskonalić twój umiejętności projektanta interfejsów.

2.

The tag pozwala wyróżnić określone części treści, dzięki czemu wyróżniają się one wizualnie. Kiedy korzystasz z element, przeglądarki zwykle stosują żółty kolor tła do tekstu w środku, zwracając na to uwagę czytelnika.

Ta funkcja jest szczególnie przydatna, gdy chcesz podkreślić słowa kluczowe, ważne wyrażenia lub wyniki wyszukiwania na swojej stronie internetowej.

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

Na przykład, jeśli Twoja witryna ma funkcję wyszukiwania, możesz użyć tag, aby wyróżnić wyniki wyszukiwania w wynikach wyszukiwania, ułatwiając użytkownikom znajdowanie odpowiednich informacji.

3.

Czy kiedykolwiek spotkałeś się z sytuacjami, w których treść staje się nieaktualna lub nieaktualna, ale nadal chcesz ją wyświetlić w celach historycznych lub wskazać zmiany w czasie?

Wejdz do etykietka! To znaczy przekreślenie i renderuje dowolną zawartość w elemencie z linią przechodzącą przez środek.

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

W tym przykładzie obecnie brak na stanie zostanie wyświetlony tekst z przekreśloną linią, wskazujący, że stan magazynowy produktu uległ zmianie.

4.

Jeśli chcesz dodać znaczenie semantyczne do dat i godzin w swojej treści, przyda się tag.

Używając datagodzina możesz określić czytelną maszynowo wersję daty lub godziny, co pomaga przeglądarkom, wyszukiwarkom i czytnikom ekranu zrozumieć kontekst.

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

za pomocą tag, nadajesz swojej treści lepszą strukturę i udostępniasz ją szerszemu gronu użytkowników, w tym osobom niepełnosprawnym korzystającym z czytników ekranu.

5.

Zarządzanie tekstem w wielu językach na stronie internetowej może być czasami trudne, zwłaszcza gdy każda część wymaga innego formatowania.

The tag przychodzi na ratunek, izolując część tekstu, którą przeglądarka powinna traktować inaczej ze względu na różne wymagania językowe.

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

W tym przykładzie element otacza liczbę 5,000. Gwarantuje to, że jeśli otaczający tekst jest w innym języku lub wymaga innego formatowania, nie będzie kolidował z liczbą.

6. , ,

W przypadku typografii wschodnioazjatyckiej, gdzie wskazówki dotyczące wymowy, furigana lub inne adnotacje są powszechnie używane nad lub pod znakami,, , I w grę wchodzą tagi.

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

W tym przykładzie element zawiera znak 漢 (Kanji) i element zawiera wymowę かん (kan). The elementy zawierają nawiasy zastępcze dla przeglądarek, które nie obsługują adnotacji ruby.

7.

Kiedy masz długie słowa, które mogą zepsuć twój układ, plik tag jest tutaj, aby pomóc. Sugeruje możliwość podziału wiersza (możliwość podziału słowa) w długim słowie, w którym przeglądarka może zawijać tekst.

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

W powyższym przykładzie długi adres URL zawiera a element, który w razie potrzeby pozwala przeglądarce podzielić go na dwie linie, zachowując układ otaczającej treści.

8. I

W przypadku notacji naukowych lub matematycznych, wzorów chemicznych lub przypisów można użyć formatu I znaczniki odpowiednio dla tekstu w indeksie dolnym i górnym.

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

W tym przykładzie użyto tag, aby wyświetlić 2 W H2O jako indeks dolny, podczas gdy tagi wyświetlają wykładniki w twierdzeniu Pitagorasa.

9.

Potrzebujesz przedstawić pomiary skalarne w znanym zakresie, takie jak użycie dysku, oceny lub wyniki egzaminów? The tag cię obejmuje.

Używając wartość, min, I maks atrybutów można zdefiniować odpowiednio wartość bieżącą, wartość minimalną i maksymalną wartość pomiaru.

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

W tym przykładzie element reprezentuje wynik egzaminu 75%.

10.

Kiedy musisz utwórz okno dialogowe lub nakładkę okna dla modów Lub dobrze wychowane modalne wyskakujące interakcje, tag jest drogą do zrobienia. Możesz użyć otwarty atrybut, aby domyślnie wyświetlać okno dialogowe.

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

W tym przykładzie proste okno dialogowe zawierające akapit i przycisk zamykania pokazuje, kiedy strona się ładuje, dzięki otwarty atrybut. Możesz dostosować zawartość i zachowanie okna dialogowego za pomocą JavaScript dla bardziej zaawansowanych interakcji.

11.

Użyj tag, aby pogrupować powiązane opcje w a element rozwijany. Pozwala organizować i kategoryzować opcje w celu łatwiejszej nawigacji i wyboru.

  • Thetag to element kontenera, który jest powiązany z grupami tagi w obrębie a element.
  • Pomaga organizować opcje, tworząc wizualne grupowanie lub kategoryzację w menu rozwijanym.
  • The tag wymaga atrybutu label, który określa nazwę lub tytuł grupy opcji.
  • Może zawierać jeden lub więcej tagi jako elementy podrzędne, reprezentujące poszczególne opcje w grupie.

Na przykład:

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

Ten przykład grupuje menu wyboru w dwie sekcje: Azja, I Europa. Każda grupa zawiera tagi reprezentujące różne kraje w tym regionie.

Zwiększ swoją biegłość w tworzeniu stron internetowych

Nauka tych mniej znanych tagów HTML może znacznie poprawić twoje umiejętności tworzenia stron internetowych. Pomimo braku uznania, oferują one wartościowe funkcje w określonych kontekstach.

Dodanie tych tagów do zestawu umiejętności zwiększa interaktywność, dostępność i usprawnia proces tworzenia stron internetowych. Pamiętaj, że nawet jeśli są nieznane, mają znaczący wpływ na Twoją podróż jako programisty.