W dynamicznym świecie internetu, doskonalenie umiejętności tworzenia stron internetowych wymaga zrównoważonego i innowacyjnego podejścia, aby być na bieżąco z najnowszymi technologiami i trendami. Elementy HTML należą do najważniejszych fundamentów tego procesu, ponieważ stanowią podstawowy język, na którym zbudowana jest struktura i projekt stron internetowych. Nie chodzi jednak tylko o stosowanie podstawowych elementów; konieczne jest również rozważenie zastosowania nietypowych i innowacyjnych elementów HTML, które zwiększają atrakcyjność i efektywność doświadczenia użytkownika.
Jako twórca stron internetowych powinieneś dobrze znać takie powszechnie stosowane elementy HTML jak: I I który reprezentuje strukturę i zawartość stron internetowych. Jednak HTML oferuje o wiele więcej!
Eksplorując te unikalne elementy, możesz ulepszyć funkcjonalność tworzonych przez siebie aplikacji internetowych, wyróżniając je na tle konkurencji. Sprawdź Powody, dla których nauka HTML jest niezbędna dla każdego programisty.
Szybkie linki
1. I
Wyobraź sobie, że masz obszerne informacje lub treści, którymi nie chcesz, aby czytelnik od razu się pogubił. Elementy Cię uratują. I !
Elementy te współdziałają, tworząc rozwijaną sekcję z tytułem lub podsumowaniem, którą użytkownicy witryny mogą kliknąć, aby wyświetlić więcej szczegółów. Domyślnie zawartość elementu nie będzie wyświetlana. , utrzymując Twoją stronę w czystości i porządku.
Odwiedzający mogą łatwo kliknąć podsumowanie, aby uzyskać dostęp do ukrytych informacji.
<detale>streszczenie>Kliknij do ujawnić więcej informacjistreszczenie>p>To zawartość będzie domyślnie ukryty, ale pojawi się, gdy użytkownik kliknie streszczenie.</p> </detale>Dzięki tym elementom możesz ukryć duże fragmenty tekstu, kodu lub innych informacji, zapewniając przyjazne dla użytkownika środowisko przy jednoczesnym zachowaniu przejrzystego designu. Elementy te mogą również pomóc Udoskonalaj swoje umiejętności jako projektant front-end.
2.
Przedmiot pozwala na Podświetlanie określonych fragmentów treści, aby wyróżnić je wizualnie. Podczas korzystania z elementu Przeglądarki zazwyczaj stosują żółty kolor tła do wyświetlanego tekstu, co przyciąga uwagę czytelnika.
Funkcja ta jest szczególnie przydatna, gdy chcesz podkreślić ważne słowa kluczowe, frazy lub wyniki wyszukiwania na swojej stronie internetowej.
<p> Możesz użyćznak>znak</znak> tag do Podkreśl ważne słowa lub frazy. </p>Na przykład, jeśli Twoja witryna ma funkcję wyszukiwania, możesz użyć elementu Aby wyróżnić pasujące zapytania wyszukiwania w wynikach, ułatwiając użytkownikom znalezienie odpowiednich informacji.
3.
Czy kiedykolwiek spotkałeś się z sytuacją, gdy treść stała się nieaktualna lub nie jest już aktualna, ale nadal chcesz ją wyświetlić ze względów historycznych lub aby poinformować o zmianach, jakie zaszły na przestrzeni czasu?
Poznaj element ! Reprezentuje on przekreślony tekst i wyświetla całą zawartość elementu w przekreśleniu.
<p>
Produkt jest <s>Out-of-magazynowych</s> Aktualnie dostępne w obniżonej cenie!
</p>W tym przykładzie informacja o braku w magazynie zostanie wyświetlona jako przekreślony tekst, wskazujący, że status magazynowy produktu uległ zmianie.
4.
Jeśli chcesz dodać znaczenie semantyczne do dat i godzin w swojej treści, element Będzie na wyciągnięcie ręki.
Za pomocą atrybutu datetime można określić wersję daty lub godziny, którą może odczytać maszyna, co ułatwia przeglądarkom, wyszukiwarkom i czytnikom ekranu zrozumienie kontekstu.
<p>
Deklaracja Niepodległości została podpisana
<czasdata i godzina="1776">July 4, 1776
</czas>.
</p>Korzystanie z elementu Nadając swojej treści większą strukturę i udostępniając ją szerszemu gronu użytkowników, w tym osobom niepełnosprawnym, które korzystają z czytników ekranu.
5.
Zarządzanie tekstem w wielu językach na stronie internetowej może być czasami trudne, zwłaszcza gdy każdy fragment wymaga innego formatowania.
Przedmiot zostanie Ci zaprezentowany. Pomaga poprzez wyodrębnienie fragmentu tekstu, który przeglądarka powinna traktować inaczej ze względu na wymagania innego języka.
<p><bdi>5,000</bdi> osób wzięło udział w konferencji.
</p>W tym przykładzie element jest zawijany. W przypadku liczby 5000. Dzięki temu mamy pewność, że jeśli otaczający tekst jest w innym języku lub wymaga innego formatowania, nie będzie to kolidować z liczbą.
6. , ,
W przypadku tekstów pisanych w krajach Azji Wschodniej, gdzie nad lub pod znakami powszechnie stosuje się wskazówki dotyczące wymowy, furiganę lub inne adnotacje, istotną rolę odgrywają elementy. I I Ta rola.
<p>
Uczę się
<rubin>chiński<rt>intuicja</rt></rubin>słowo<rp>(</rp><rt>kanji</rt><rp>)</rp>.
</p>W tym przykładzie element zawiera: W przypadku znaku 漢 (kanji) przedmiot zawiera O wymowie かん (kan). Dostarcza elementy Zapasowe nawiasy dla przeglądarek, które nie obsługują adnotacji w kolorze czerwonym.
7.
Jeśli masz długie słowa, które mogą zaburzyć formatowanie, z pomocą przychodzi element. Sugeruje on podział wiersza (podział wyrazu) w długim słowie, gdzie przeglądarka może zawinąć tekst.
Oto przykład długiego adresu URL: https://www.example.org/ z/a/long/path/and/a?query=string.W powyższym przykładzie długi adres URL zawiera element <a href="http://www.youtube.com/watch?v=gZmfgfp" target="_blank" rel="nofollow">, który pozwala przeglądarce w razie potrzeby podzielić go na dwie linie, zachowując jednocześnie układ otaczającej treści. Sprawdź Podręcznik dla początkujących dotyczący responsywnych obrazów HTML.
8. I
W przypadku symboli naukowych lub matematycznych, wzorów chemicznych lub przypisów można używać elementów i odpowiednio w indeksie dolnym i górnym.
<p>
Wzór chemiczny wody to H<poniżej>2</poniżej>O, a twierdzenie Pitagorasa jest<sup>2</sup> + B<sup>2</sup> = c<sup>2</sup>.
</p>W tym przykładzie użyto elementu do wyświetlania 2 w H2O jako indeks dolny, podczas gdy element wyświetla wykładnik w twierdzeniu Pitagorasa.
9.
Czy potrzebujesz przedstawić pomiary liczbowe w znanym zakresie, takie jak wykorzystanie dysku, oceny lub wyniki testów? Ten element Ci w tym pomoże. .
Używając atrybutów value, min, i max, możesz określić odpowiednio wartość bieżącą, wartość minimalną i wartość maksymalną pomiaru.
<meter value="75"min="0"max="100">75%W tym przykładzie element reprezentuje Wynik testu 75%.
10.
Gdy trzeba utworzyć okno dialogowe, okno nakładki warunkowej lub interakcje wyskakującego okienka modalnego, To jest właściwy sposób. Możesz użyć motywu. koncepcjaAby domyślnie wyświetlać okno dialogowe.
<Dialogkoncepcja><p>To jest okno dialogowe!</p><przycisk>Zamknij</przycisk></Dialog>W tym przykładzie po załadowaniu strony pojawia się proste okno dialogowe z akapitem i przyciskiem zamykania, dzięki atrybutowi koncepcjaMożesz dostosować zawartość i zachowanie okna dialogowego za pomocą JavaScript, aby umożliwić bardziej zaawansowane interakcje.
11.
Użyj przedmiotu Aby grupować powiązane opcje w ramach elementu menu rozwijanego .co pozwala na organizowanie i kategoryzowanie opcji, co ułatwia nawigację i wybór.
- Jest to element kontenera zbierający tagi. Powiązane w obrębie elementu .
- Pomaga organizować opcje poprzez tworzenie wizualnego grupowania lub kategoryzacji w menu rozwijanym.
- Wymaga tagu Atrybut etykiety określający nazwę lub tytuł zestawu opcji.
- Może zawierać element Jeden lub więcej podelementów, które reprezentują indywidualne wybory w ramach grupy.
Na przykład:
<wybierać><grupa opt-groupetykieta="Azja"><opcjawartość="kr">Korea Południowa</opcja></grupa opt-group><grupa opt-groupetykieta="Europa"><opcjawartość=„de”>Niemcy</opcja></grupa opt-group></wybierać>W tym przykładzie lista rozwijana jest podzielona na dwie sekcje: Azja i Europa. Każda grupa zawiera pozycje reprezentujące różne kraje w danym regionie.
Zwiększ swoje umiejętności w zakresie tworzenia stron internetowych
Poznanie mniej znanych elementów HTML może znacząco poprawić Twoje umiejętności tworzenia stron internetowych. Choć nie są one powszechnie znane, oferują cenne funkcje w określonych kontekstach.
Dodanie tych elementów do Twojego zestawu umiejętności poprawia interaktywność, dostępność i upraszcza proces tworzenia stron internetowych. Pamiętaj, że choć mogą być nieznane, mają znaczący wpływ na Twoją ścieżkę kariery jako programisty stron internetowych. Możesz już teraz sprawdzić Możesz kodować w podróży: najlepsze aplikacje do edycji HTML na Androida.
