5 věcí, které jste nevěděli, že můžete dělat s HTML

Sep 13, 2025

jak

Pojďme si to, vývoj webu se může snadno stát nepořádkem. Html, css a JavaScript. Vše se vyvíjely z pokorných původů po mnoho let a jsou z velké části nejednoznačné, pokud jde o to, jak byste je měli používat. Výsledkem je, že je to příliš snadné stavět neomezný nepořádek. Dodržování standardů a využívání nejnovějších vylepšení specifikací nezaručuje dobrý kód, ale může určitě pomoci.

V každém typu vývoje softwaru je modularita král, pokud jde o budování udržovatelného kódu. V důsledku toho budete chtít udržet blízké oko na webových komponentách. Podpora prohlížeče není skvělá, ale pokud se chytíte někteří polyfills. , Můžete se dostat před křivkou a začít využít vlastní prvky pro strukturu vašeho kódu hned. Tento styl rozvoje je budoucnost, takže to stojí za to seznámit se s tím.

Keep code streamlined for clearer understanding — Udržujte kód zjednodušení jasnějšího porozumění

HTML5 sám zavedl řadu nových prvků (a zastaralých několik), aby pomohla povzbudit dobré postupy kódování. Možná jste slyšeli o sémantickém Markupu, který odkazuje na použití popisných prvků HTML5, jako je & lt; článek & gt; a & lt; postava & gt; označovat typ obsahu, které obsahují.

To může skutečně pomoci s čistotou vašeho kódu, protože prvky HTML budou okamžitě identifikovat například, které části představují panel nabídek, vaše části obsahu, zápatí a tak dále.

To také pomůže, pokud využiješ nejnovější standardy JavaScriptu. JavaScript se může také stát chaotický, ale je mnohem snazší pracovat s v posledních letech. ES6 Syntaxe je široce podporována v prohlížečích, a funkce, jako jsou funkce šipky a třídy mohou učinit váš život mnohem snazší - přesto mnoho vývojářů jsou buď obeznámeni s nimi nebo opatrní.

Pokračování tématu modulárního vývoje, JavaScript také nyní podporuje načítání modulu, což vám může pomoci spravovat své závislosti čistě.

01. Rozpoznat a syntetizovat řeč

The sound of things to come — Zvuk věcí (Image Credit: Foto Jason Rosewell na Unsplash)

Ty by kdysi byly složité funkce vyžadující specializovaný software, ale nyní jsou postaveny přímo do prohlížečů. Webová řečová API má komponenty, které podporují text-k-řeč a řeč-k textu. Ten z nich bude buď použít online službu (Chrome používá službu API pro řeč Google Cloud) nebo nativní službu rozpoznávání řeči zařízení. Očekávejte, že se v budoucnu zobrazí široce používané na mobilních zařízeních.

02. Zobrazit barevný výběr

Choosing the right colour — Výběr správné barvy (Image Credit: Fotografie od Scott Webb na Unsplash)

Triviální, jak to může znít, to je skvělý příklad toho, jak HTML5 zjednodušuje společné úkoly, které by dříve vyžadovaly vlastní kódování poměrně složité komponenty UI. & lt; vstupní typ = "barva" & gt; Při kliknutí zobrazí vizuální výběr barev, pomocí snímače barevného pickeru v zařízení. To by mohlo být zvláště užitečné s HTML Canvas. Je široce podporován výjimkou Safari na mobilu.

03. recolour prohlížeč UI

Colour themes for browsers — Barevná témata pro prohlížeče (Image Credit: Foto Marko Blažević na Unsplash)

To může nabídnout pěkný estetický dotek na mobilních platformách. & lt; meta název = "Téma-barva" obsah = "# ffffff" / & gt; Je navržen tak, aby instruován prohlížeče, aby se na panelu nástrojů recochurovat při prohlížení vašich stránek. Bohužel je to trochu nestandardizované, takže "Téma-barva" Pracuje s Chrome, Firefox a Opera, na iOS budete potřebovat "Apple-Mobile-Web-App-Status-Statest" (Pracuje pouze v režimu celé obrazovky).

04. Různé obrázky pro různé obrazovky

Specifying the image and the resolution — Určení obrazu a rozlišení (Image Credit: Foto: Tran Mau Tri Tam na Unsplash)

Doufejme, že již implementujete citlivý design, v takovém případě budou vaše obrázky změna velikosti tak, aby vyhovovaly výřezu. To není dokonalé, protože budete nutit uživatele ke stažení největší verzi obrazu, pak jej zklamal. Zadejte HTML5. & lt; obraz & gt; Prvek, který umožňuje určit různé obrázky, které mají být zobrazeny v závislosti na rozlišení obrazovky, na webu se zobrazí.

05. Vibrovat telefon

Shakin' all over — Shakin 'všude (Image Credit: Foto: Gilles Lambert na Unsplash)

Jednoznačně pojmenované vibrační API odhaluje jednu funkci, vibrovat (), která bude dělat přesně to, co říká na zařízeních, která ji podporuje. Funkce vezme seznam popisující vzor vibrací jako jeho argument. Bude to fungovat na Chrome, Firefox a Opera, i když jste mimo štěstí na okraji nebo safari. Ukazuje se, že některé reklamy používají, aby přitáhl pozornost uživatele, takže porota je na tom, zda je to vlastně dobrý nápad.

Tento článek se původně objevil Web Designer. Vydání 266. Koupit to tady .

Související články:

10 nejlepších návrhů šablony HTML5
20 šablony HTML, které poskytují váš web design projekty Headstart
Nailte svůj HTML s tímto podvádět

5 věcí, které jste nevěděli, že můžete dělat s HTML

01. Rozpoznat a syntetizovat řeč

02. Zobrazit barevný výběr

03. recolour prohlížeč UI

04. Různé obrázky pro různé obrazovky

05. Vibrovat telefon

jak - Nejoblíbenější články

Jak překlopit vrstvu ve Photoshopu: Kompletní průvodce

Proveďte volné a rychlé testy uživatelů s uživatelem

Jak navrhnout tvary CSS: Úvod

Jak kombinovat 3D a komiksové umění v Zbrushu

Jak opravit chybnou kompozici

Speed Sculpt stvoření v Zbrushu

Jak simulovat výbuchy v Maya

Jak přidat video do interaktivních pdfs

Kategorie