5 ting, du ikke vidste, at du kunne gøre med HTML

Sep 11, 2025
hvordan

Lad os se det, webudvikling kan nemt blive et rod. HTML, CSS og JavaScript. har alle udviklet sig fra ydmyge oprindelse i mange år og er stort set ækvivalente med hensyn til, hvordan du skal bruge dem. Som følge heraf er det alt for nemt at opbygge et ubehageligt rod. Overholdelse af standarder og udnyttelse af de seneste forbedringer i specifikationerne garanterer ikke god kode, men det kan helt sikkert hjælpe.

I enhver form for softwareudvikling er modularitet konge, når det kommer til at opbygge vedligeholdelseskode. Som et resultat vil du gerne holde øje med webkomponenter. Browser support er ikke stor, men hvis du tager fat på dig selv nogle polyfill , Du kan komme foran kurven og begynde at udnytte brugerdefinerede elementer til at strukturere din kode med det samme. Denne udviklingstilstand er fremtiden, så det er værd at blive bekendt med det nu.

Keep code streamlined for clearer understanding

Hold kode strømlinet for klarere forståelse

HTML5 selv introducerede en række nye elementer (og afskrives flere) for at hjælpe med at fremme god kodningspraksis. Du har måske hørt om semantisk markup, som refererer til brugen af ​​HTML5s beskrivende elementer som f.eks & lt; artikel & GT; og & lt; figur & gt; at angive den type indhold, de indeholder.

Dette kan virkelig hjælpe med renligheden af ​​din kode, da HTML-elementerne straks vil identificere, hvilke dele der repræsenterer menulinjen, dine sektioner af indhold, sidefoden og så videre.

Det vil også hjælpe, hvis du udnytter de nyeste JavaScript-standarder. JavaScript kan også blive rodet, men det er blevet meget nemmere at arbejde med de seneste år. ES6 Syntax understøttes bredt i browsere, og funktioner som pilfunktioner og klasser kan gøre dit liv meget lettere - men mange udviklere er enten ikke bekendt med eller forsigtige med at bruge dem.

Ved at fortsætte temaet modulær udvikling understøtter JavaScript også modullastning, som kan hjælpe dig med at styre dine afhængigheder rent.

01. Genkend og syntetisere tale

The sound of things to come

Lyden af ​​ting der skal komme (Billedkredit: Foto af Jason Rosewell på Unsplash)

Disse ville engang have været komplekse funktioner, der kræver specialiseret software, men de bliver nu bygget direkte i browsere. Web Speech API har komponenter, der understøtter tekst-til-tale og tale-til-tekst. Sidstnævnte af disse vil enten bruge en onlinetjeneste (Chrome bruger Google Cloud Speech API) eller enhedens indfødte talegenkendelse service. Forvent at se dette bruges bredt på mobile enheder i fremtiden.

02. Vis en farvevælger

Choosing the right colour

Valg af den rigtige farve (Billedkredit: Foto af Scott Webb på Unsplash)

Trivial som det kan lyde, dette er et godt eksempel på, hvordan HTML5 er forenkling af almindelige opgaver, som tidligere ville have krævet brugerdefineret kodning af en forholdsvis kompleks UI-komponent. & lt; input type = "farve" & gt; vil vise en visuel farvevælger, når den klikkes, ved hjælp af en farvevælger native til enheden. Dette kunne være særligt nyttigt med HTML-lærred. Det understøttes bredt med undtagelse af Safari på mobilen.

03. RECOLOUR BROWSER UI

Colour themes for browsers

Farve temaer til browsere (Billedkredit: Foto af Marko Blažević på Unsplash)

Dette kan tilbyde en dejlig æstetisk berøring på mobile platforme. & lt; meta navn = "tema-farve" content = "# ffffff" / & gt; er designet til at instruere browseren til at recolour værktøjslinjen, når du ser dit websted. Desværre er det lidt ikke-standardiseret, så mens "Tema-farve" arbejder med krom, firefox og opera, på iOS, du har brug for "Apple-Mobile-Web-App-Status-Bar-Style" (Kun arbejder i fuldskærmstilstand).

04. Forskellige billeder til forskellige skærme

Specifying the image and the resolution

Angivelse af billedet og opløsningen (Billedkredit: Foto af Tran Mau Tri Tam på Unsplash)

Forhåbentlig har du allerede implementeret responsivt design, i hvilket tilfælde dine billeder vil blive ændret for at passe visningsporten. Dette er ikke perfekt, da du tvinger brugeren til at downloade den største version af billedet og derefter nedsramende det. Indtast HTML5. & lt; billede & gt; Element, som gør det muligt at angive forskellige billeder, der skal vises afhængigt af skærmopløsningen, ses webstedet.

05. Vibrer din telefon

Shakin' all over

Shakin 'overalt (Billedkredit: Foto af Gilles Lambert på Unsplash)

Den entydigt navngivne vibration API udsætter en enkelt funktion, vibrerer (), som vil gøre præcis, hvad det står på enheder, der understøtter det. Funktionen tager en liste, der beskriver et vibrationsmønster som dets argument. Det vil arbejde på Chrome, Firefox og Opera, selvom du er ude af lykke på kanten eller safari. Det er rapporteret, at nogle annoncer bruger dette til at tiltrække brugerens opmærksomhed, så juryen er ude af, om det faktisk er en god ide.

Denne artikel optrådte oprindeligt i Webdesigner Udgave 266. Køb det her .

Relaterede artikler:

  • De 10 bedste HTML5-template designs
  • 20 HTML-skabeloner til at give dine webdesign projekter en headstart
  • Søm din HTML med dette snydeark

hvordan - Mest populære artikler

Sådan rangeres i Google

hvordan Sep 11, 2025

(Billedkredit: buzzfeed) Så du vil vide, hvordan du rangerer i Google. Den gode nyhed er, at du ikke behøver at væ..

Jamstack: Byg hurtigere, mere effektive hjemmesider i dag

hvordan Sep 11, 2025

(Billedkredit: Fremtid / Joseph Ford) Jamstack er en metode til oprettelse og servering af websteder med minimal bela..

Sådan tilføjes animation til SVG med CSS

hvordan Sep 11, 2025

[Billede: Web Designer] Når det kommer til at animere med SVGS, kan en stor slukning være ideen om at blive skruet ..

10 fantastiske ting, du kan gøre med lag

hvordan Sep 11, 2025

Lag er, hvad der gør det muligt for dig at opbygge et projekt fra de tidlige fundament til de afsluttende hånd. Det er svært a..

Mal på et 3D mesh med Zbrushcores polypaint værktøj

hvordan Sep 11, 2025

Polypaint In. Zbrushcore. er et fantastisk værktøj, der gør det muligt at tilføje farve og teksturer til din m..

Skærpe din hårde overflade modellering i 3ds max

hvordan Sep 11, 2025

I denne vejledning skal jeg dele de teknikker og metoder, jeg bruger til at skabe hårde overflade modeller i 3ds Max. ..

Fremskynde din tekstur-workflow

hvordan Sep 11, 2025

Krigeren er et personligt projekt, som jeg havde glæden ved at forestille sig og designe. Jeg ønskede at skabe et tegn, der bel..

Sådan optages bevægelse i dine 3D-rendere

hvordan Sep 11, 2025

At være freelance kunstner arbejder jeg på en række små projekter, hvoraf de fleste involverer oprettelse og teksturering ..

Kategorier