Przegląd nowych elementów HTML5
Od 1999 r., Kiedy HTML 4.01 stał się standardem, sieć i korzystanie z sieci uległy znacznej zmianie. W3C zdecydowało się zmienić podstawową składnię HTML ze standardowego uogólnionego języka znaczników (SGML) na XML, a także zupełnie inne języki znaczników, takie jak Scalable Vector Graphics (SVG), XForms i MathML. Obecnie niektóre składniki HTML 4.01 są nieaktualne, nigdy nie są używane lub nie są używane zgodnie z oczekiwaniami. Każda część komponentów HTML5 jest przemieszczana lub ponownie komponowana. HTML5 zawiera nowe elementy do zilustrowania reprezentacji, wyświetlania treści cyfrowych, ulepszonego układu strony i ogólnej funkcjonalności, a także kilka nowych interfejsów do właściwego sprostania dzisiejszym wymaganiom internetowym.
W HTML5 wprowadzono kilka nowych elementów, które oferują pewne dodatkowe funkcje do opracowania pożądanej i interaktywnej strony. Możemy szybko i skutecznie utworzyć Twój kod za pomocą takich komponentów. Z powodu braku struktury wiele dobrze sformatowanych dokumentów HTML jest trudniejszych w obsłudze, niż jest to konieczne. Oceniając skale nagłówków, musimy dowiedzieć się, dokąd zmierzają podziały segmentów. Element div identyfikuje paski boczne, stopki, nagłówki, menu nawigacyjne i główne części treści.
Top 10 nowych elementów HTML5
HTML5 zapewnia nowe elementy poprawiające układ dokumentu.
1.
Element określa część strony, która zawiera osobną strukturę w dokumencie, sekcji lub witrynie internetowej i która jest zalecana do szerokiej dystrybucji lub użyteczności. Może to być grupowa publikacja dziennika lub codziennego raportu w formie papierowej, przesłanie do internetowego biuletynu, uwagi przesłanej przez klienta lub dowolnego innego przedmiotu bez substancji.
Przykład:
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Wynik:
- Zapisz powyższy kod w pliku z rozszerzeniem .html.
- Uruchom plik html w przeglądarce, a otrzymasz wynik, jak pokazano na poniższym obrazku.
2)
Ten element w znacznym stopniu wskazuje poszczególne treści, takie jak kategoryzacje, mapy, obrazy, artykuły kodowe i wiele innych.
Przykład:
Figure Element
EDUCBA jest wiodącym globalnym dostawcą edukacji opartej na umiejętnościach, która zaspokaja potrzeby ponad 500 000 członków w ponad 40 krajach.
Wynik:
Powyższy kod wygeneruje dane wyjściowe, jak pokazano na poniższym obrazie,
3)
Element służy do dodawania opisu obrazu.
Przykład:
Figure Caption Element
EDUCBA jest wiodącym globalnym dostawcą edukacji opartej na umiejętnościach, która zaspokaja potrzeby ponad 500 000 członków w ponad 40 krajach.
EDUCBA (Corporate Bridge Consultancy Pvt Ltd)
Wynik:
Powyższy kod wyświetla wynik, jak pokazano na poniższym obrazku,
4
Element służy do określania nagłówka dokumentu lub sekcji na stronie. Możesz zdefiniować więcej niż jeden nagłówek w jednym dokumencie.
Przykład:
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Treść dokumentu znajduje się tutaj …
Wynik:
Powyższy kod wyświetla wynik, jak pokazano na poniższym obrazku,
5
Element służy do określania informacji, takich jak informacje o autorze, informacje o prawach autorskich, kontakt, linki do powiązanych dokumentów, mapa witryny i wiele innych.
Przykład:
Footer Element
Prawa autorskie © 2019 www.educba.com
Kontakt:
Wynik:
Powyższy kod wyświetla wynik, jak pokazano na poniższym obrazku,
6.
Element służy do wyświetlania głównej, tj. Ważnej informacji dokumentu.
Przykład:
Main Element
Informacje w nagłówku
Informacja główna
EDUCBA
EDUCBA jest wiodącym globalnym dostawcą edukacji opartej na umiejętnościach …
Informacje o stopce
Wynik:
Powyższy kod wygeneruje dane wyjściowe, jak pokazano na poniższym obrazie,
7
Element służy do podświetlania lub oznaczania tekstu kolorem tła, który przyciąga użytkownika do określonego tekstu w dokumencie.
Przykład:
Mark Element
EDUCBA jest wiodącym globalnym dostawcą edukacji opartej na umiejętnościach, która zaspokaja potrzeby ponad 500 000 członków w ponad 40 krajach.
Wynik:
Powyższy kod wyświetla wynik, jak pokazano na poniższym obrazku,
8
Element służy do określania łączy nawigacyjnych na stronie. Te linki zapewniają połączenia z innymi stronami w dokumencie.
Przykład:
Nav Element
HTML |
CSS |
JAVA |
PHP |
PYTHON
Wynik:
Powyższy kod wygeneruje dane wyjściowe, jak pokazano na poniższym obrazie,
9
Element służy do zdefiniowania samodzielnej sekcji lub określonego regionu w dokumencie.
Przykład:
Section Element
Main Article
Section Element
Main Article
Section Element
Main Article
Treść głównego nagłówka zostanie wyświetlona tutaj …
Sekcja pierwsza
Zostanie wyświetlona treść pierwszej sekcji …
Sekcja druga
Zostanie wyświetlona treść drugiej sekcji …
Wynik:
Powyższy kod wyświetla wynik, jak pokazano na poniższym obrazku,
10
Tag jest podczęścią tagu, która zapewnia tekst, który można wyświetlić lub ukryć, gdy użytkownik kliknie nagłówek.
Przykład:
Summary Element
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
Jest wiodącym światowym dostawcą edukacji opartej na umiejętnościach, która zaspokaja potrzeby ponad 500 000 członków w ponad 40 krajach.
Wynik:
Po uruchomieniu powyższego kodu wyświetli wynik, jak pokazano poniżej,
Jak pokazano na obrazku, kliknij nagłówek, wyświetli ukryty tekst, jak pokazano na poniższym obrazku,
Wniosek
Do tej pory widzieliśmy, jak nowe elementy HTML5 są przydatne do różnych zadań związanych z tworzeniem strony internetowej. Te nowe elementy odczytują dokument w bardziej dokładny i standardowy sposób oraz opracowują bardziej złożone i wydajne aplikacje internetowe. Nowe elementy HTML5 oferują dodatkowe funkcje do generowania interaktywnych stron internetowych.
Polecane artykuły
To jest przewodnik po nowych elementach HTML5. W tym miejscu omawiamy 10 nowych elementów HTML5 w celu ulepszenia układu dokumentu. Możesz także przejrzeć następujące artykuły, aby dowiedzieć się więcej -
- Korekcja kolorów w After Effects
- Top 6 wersji HTML
- HTML5 vs HTML4
- XHTML vs HTML5
- Co to jest Bridge?
- Tagi HTML5 | 4 najlepsze tagi HTML5