5 lucruri pe care nu le-ați știut că puteți face cu HTML

Feb 12, 2026

să

Să ne confruntăm cu el, dezvoltarea web poate deveni cu ușurință o mizerie. HTML, CSS și JavaScript. Toți au evoluat de la origini umile de mai mulți ani și sunt în mare parte echivocă în ceea ce privește modul în care ar trebui să le folosiți. Ca rezultat, este prea ușor să construim o mizerie nemulțumită. Aderarea la standarde și profitând de ultimele îmbunătățiri ale specificațiilor nu garantează un cod bun, dar poate ajuta cu siguranță.

În orice tip de dezvoltare de software, modularitatea este rege atunci când vine vorba de construirea unui cod menținut. Ca rezultat, veți dori să păstrați un ochi apropiat asupra componentelor Web. Suportul browserului nu este minunat, dar dacă vă apucați unii Polyfills. , puteți obține înaintea curbei și începeți să profitați de elemente personalizate pentru a vă structura imediat codul. Acest stil de dezvoltare este viitorul, deci merită să ne familiarizați acum.

Keep code streamlined for clearer understanding — Păstrați codul raționalizat pentru o înțelegere mai clară

HTML5 a introdus în sine o serie de elemente noi (și depreciate mai multe) pentru a ajuta la încurajarea practicilor de codificare bune. Este posibil să fi auzit de marcaj semantic, care se referă la utilizarea elementelor descriptive ale HTML5, cum ar fi & articole & gt; și & lt; figura & gt; pentru a indica tipul de conținut pe care îl conțin.

Acest lucru poate ajuta cu adevărat cu curățenia codului dvs., deoarece elementele HTML vor identifica imediat, de exemplu, care părți reprezintă bara de meniu, secțiunile de conținut, subsolul și așa mai departe.

De asemenea, vă va ajuta să profitați de cele mai recente standarde JavaScript. JavaScript poate deveni, de asemenea, murdar, dar a devenit mult mai ușor de lucrat în ultimii ani. Sintaxa ES6 este susținută pe scară largă în browsere, iar funcțiile ca săgeată funcționează și clasele vă pot face viața mult mai ușoară - dar mulți dezvoltatori sunt fie necunoscuți sau de folosirea lor.

Continuând tema dezvoltării modulare, JavaScript acum acceptă încărcarea modulului, care vă poate ajuta să vă gestionați dependențele curat.

01. Recunoașteți și sintetizați discursul

The sound of things to come — Sunetul lucrurilor devin (Credit de imagine: fotografie de Jason Rosewell pe Unsplash)

Acestea ar fi fost odată funcții complexe care necesită software specializat, dar acum sunt construite direct în browsere. API-ul de vorbire web are componente care susțin textul-la-discurs și vorbire la text. Acestea din urmă vor folosi un serviciu online (Chrome utilizează API-ul Google Cloud Vorge API), fie serviciul de recunoaștere a vorbirii native a dispozitivului. Așteptați să vedeți că acest lucru este utilizat pe scară largă pe dispozitive mobile în viitor.

02. Afișați un picker de culoare

Choosing the right colour — Alegerea culorii potrivite (Credit Imagine: Fotografie de Scott Webb pe Unsplash)

Trivial După cum sună, acesta este un exemplu deosebit pentru modul în care HTML5 simplifică sarcinile comune care anterior ar fi cerut codarea personalizată a unei componente UI destul de complexe. & lt; introduceți tipul = "culoare" & gt; Va afișa un picker de culoare vizuală când este clic, utilizând un picker de culoare nativ pe dispozitiv. Acest lucru ar putea fi deosebit de util cu HTML Canvas. Este susținut pe scară largă cu excepția Safari pe Mobile.

03. Recuperați browserul UI

Colour themes for browsers — Temele de culoare pentru browsere (Credit Imagine: Fotografie de Marko Blažević pe Unsplash)

Acest lucru poate oferi o atingere estetică frumoasă pe platformele mobile. & Lt; Meta Name = "Content Temă-Color" = "# FFFFFF" / & GT; este conceput pentru a instrui browser-ul pentru a recolta bara de instrumente atunci când vizualizați site-ul dvs. Din păcate, este puțin non-standardizat, deci în timp "Culoare temă" Funcționează cu Chrome, Firefox și Opera, pe iOS veți avea nevoie "Apple-Mobile-Web-App-Status-Bar-Style" (funcționează numai în modul Fullscreen).

04. Diferite imagini pentru diferite ecrane

Specifying the image and the resolution — Specificarea imaginii și a rezoluției (Credit de imagine: Fotografie de Tran Mau Tri Tam pe Unsplash)

Sperăm că implementați deja designul receptiv, caz în care imaginile dvs. vor fi redimensionate pentru a se potrivi cu ecranul de vizualizare. Acest lucru nu este perfect, deoarece veți forța utilizatorul să descărcați cea mai mare versiune a imaginii, apoi să o eliminați. Introduceți HTML5. & picture & gt; Element, care vă permite să specificați diferite imagini care urmează să fie afișate în funcție de rezoluția ecranului pe care site-ul este vizualizat.

05. Vibrați telefonul

Shakin' all over — Shakin 'peste tot (Credit de imagine: Fotografie de Gilles Lambert pe Unsplash)

API-ul vibrației numit fără echivoc expune o singură funcție, vibrează (), ceea ce va face exact ceea ce spune pe dispozitivele care o susțin. Funcția ia o listă care descrie un model de vibrație ca argument. Va lucra la Chrome, Firefox și Opera, deși nu sunteți de noroc pe marginea sau safari. Este raportat că unele anunțuri folosesc acest lucru pentru a atrage atenția utilizatorului, astfel încât juriul e pe baza unei idei bune.

Acest articol a apărut inițial în Web designer Ediția 266. Cumpărați-l aici .

Articole similare:

Cele 10 modele de șabloane HTML5
20 șabloane HTML pentru a oferi proiectelor de design web un cap
Unghii HTML cu această foaie de cheat

5 lucruri pe care nu le-ați știut că puteți face cu HTML

01. Recunoașteți și sintetizați discursul

02. Afișați un picker de culoare

03. Recuperați browserul UI

04. Diferite imagini pentru diferite ecrane

05. Vibrați telefonul

să - Cele mai populare articole

Cum se scrie codul HTML mai repede

Adăugați filtre SVG cu CSS

Cum se creează o abilitate alexa pentru site-ul dvs.

Modelarea procedurală Master

Construiți o aplicație de proiectare a materialelor cu unghiular 2

10 Reguli de aur pentru SVG-urile responsabile

10 Tutoriale Houdini Top

Anatomia caricaturii: 15 sfaturi de top

Categorii