5 rzeczy, których nie wiedziałeś, możesz zrobić z HTML

Sep 16, 2025

Jak

Zmierzmy się z tym, rozwój sieci może łatwo stać się bałaganem. HTML, CSS i Javascript. Wszyscy ewoluowali od pokornego pochodzenia przez wiele lat i są w dużej mierze niejednoznaczne pod względem sposobu ich użycia. W rezultacie jest to zbyt łatwe do zbudowania nieoczekiwanego bałaganu. Postępowanie na standardach i korzystanie z najnowszych ulepszeń w specyfikacji nie gwarantują dobrego kodu, ale z pewnością może z pewnością pomóc.

W każdym rodzaju rozwoju oprogramowania modułowość jest królem, jeśli chodzi o budowanie kodu utrzymującego. W rezultacie będziesz chciał zachować bliskie oko na komponenty internetowe. Wsparcie przeglądarki nie jest świetne, ale jeśli coś złapiesz polifilly. , Możesz wyprzedzić krzywą i zacząć korzystać z niestandardowych elementów, aby zarumienić swój kod. Ten styl rozwoju jest przyszłością, więc warto się z tym zapoznać.

Keep code streamlined for clearer understanding — Utrzymuj kod Usprawniany dla wyraźniejszego zrozumienia

HTML5 sam wprowadził wiele nowych elementów (i przestarzałe kilka), aby zachęcić do dobrych praktyk kodujących. Słyszałeś o znaczniku semantycznym, co odnosi się do stosowania elementów opisowych HTML5, takich jak & LT; Artykuł & GT; i & lt; figure & gt; wskazać rodzaj zawartości zawierają.

Może to naprawdę pomóc w czystości kodu, ponieważ elementy HTML natychmiast zidentyfikują, na przykład, które części reprezentują pasek menu, sekcje treści, stopera i tak dalej.

Pomoże również, jeśli skorzystasz z najnowszych standardów JavaScript. JavaScript może również stać się bałaganem, ale staje się znacznie łatwiej pracować w ostatnich latach. Składnia ES6 jest szeroko wspierana w przeglądarkach, a funkcje takie jak funkcje strzałek i zajęcia mogą ułatwić życie - jednak wielu deweloperów jest albo nieznane lub nieufne w przypadku ich używania.

Kontynuując motyw modułowy rozwój, JavaScript obsługuje teraz również ładowanie modułu, które może pomóc Ci zarządzać swoje zależności czysto.

01. Rozpoznaj i syntezy mowy

The sound of things to come — Dźwięk rzeczy do przybycia (Kredyt obrazu: Zdjęcie Jason Rosewell na UnplaSh)

Będą kiedyś skomplikowane funkcje wymagające specjalistycznego oprogramowania, ale są teraz budowane bezpośrednio do przeglądarek. Internetowy interfejs API ma komponenty, które obsługują tekst do mowy i mowy na tekst. Te ostatnie z nich będzie korzystać z usługi online (Chrome wykorzystuje API mowy Google Cloud) lub usługi rozpoznawania mowy urządzenia. Spodziewaj się, że będzie używany szeroko na urządzeniach mobilnych w przyszłości.

02. Wyświetl piknik kolorów

Choosing the right colour — Wybór odpowiedniego koloru (Kredyt obrazu: Zdjęcie od Scott Webb na UnplaSh)

TRIVIAL, jak może brzmieć, jest to świetny przykład, w jaki sposób HTML5 upraszcza wspólne zadania, które wcześniej wymagały niezwykłego kodowania dość złożonego elementu interfejsu użytkownika. & LT; Typ wejścia = "Kolor" & GT; Wyświetli wybór kolorów wizualnych po kliknięciu przy użyciu przyboru kolorów pochodzące z urządzenia. Może to być szczególnie przydatne z płótnem HTML. Jest powszechnie wspierany z wyjątkiem Safari na telefonie komórkowym.

03. Recolour UI przeglądarki

Colour themes for browsers — Tematy kolorów do przeglądarek (Kredyt obrazu: Zdjęcie od marko blažević na niepodpostrasznie)

Może to zaoferować ładny estetyczny dotyk na platformach mobilnych. & LT; Meta Imię = "Theme-Color" Content = "# FFFFFF" / & GT; jest zaprojektowany, aby poinstruować przeglądarkę, aby uzupełnić pasek narzędzi podczas przeglądania witryny. Niestety, jest trochę znormalizowany, więc "Kolor motywy" współpracuje z Chrome, Firefox i Operem, na iOS potrzebujesz "Styl typu Apple-Mobile-Web-App-Status-Bar" (Działa tylko w trybie pełnoekranowym).

04. Różne obrazy dla różnych ekranów

Specifying the image and the resolution — Określanie obrazu i rozdzielczości (Kredyt obrazu: Zdjęcie od Tran Mau Tri Tam On UnplaSh)

Mam nadzieję, że już wdrażasz responsywny projekt, w którym to przypadku Twoje obrazy zmieni się rozmiar w celu dopasowania do rzutni. To nie jest idealne, ponieważ będziesz zmuszać użytkownika do pobrania największej wersji obrazu, a następnie do niej odpadku. Wpisz HTML5. Zdjęcie & gt; Element, który umożliwia określenie różnych obrazów, które mają być wyświetlane w zależności od rozdzielczości ekranu, na której znajduje się strona.

05. Wibruj swój telefon

Shakin' all over — Shakin ' (Kredyt obrazu: Zdjęcie od Gilles Lambert na UnplaSh)

Jednoznacznie nazwany interfejs API wibracji naraża pojedynczą funkcję, wibrują (), co zrobi dokładnie, co mówi na urządzeniach, które go obsługują. Funkcja ma listę opisującą wzór wibracji jako jego argument. Pracy na Chrome, Firefox i Operze, chociaż masz szczęście na krawędzi lub Safari. Zgłoszono, że niektóre reklamy używają tego, aby przyciągnąć uwagę użytkownika, więc jury jest na niej, czy to dobry pomysł.

Ten artykuł pierwotnie pojawił się Projektant stron internetowych wydać 266. Kupuj tutaj .

Powiązane artykuły:

10 najlepszych projektów szablonów HTML5
20 szablonów HTML, aby nadać projektowanie stron internetowych Projekty Headstart
Nail swoje HTML za pomocą tego oszustwa

5 rzeczy, których nie wiedziałeś, możesz zrobić z HTML

01. Rozpoznaj i syntezy mowy

02. Wyświetl piknik kolorów

03. Recolour UI przeglądarki

04. Różne obrazy dla różnych ekranów

05. Wibruj swój telefon

Jak - Najpopularniejsze artykuły

Jak narysować różę: początkujący i zaawansowane wskazówki

Utwórz niestandardowy bot bot

Zbuduj komponent głowicy przyjazny SEO dla NextJS / React

Jak kodować efekty inteligentnego tekstu z CSS

Jak kompresować obrazy: podręcznik projektanta internetowego

Uaktualnij tekstury w projektantowi substancji

Jak rzeźbić w kinie 4d

Wyostrzyć swoje umiejętności malowania martwego życia

Kategorie