5 Asiat, joita et tiennyt, voit tehdä HTML

Sep 15, 2025

Miten tehdään

Katsotaanpa se, web-kehitys voi helposti tulla sotku. HTML, CSS ja JavaScript Kaikki ovat kehittyneet nöyryydestä monien vuosien ajan ja ovat suurelta osin yhtä suuret kuin ne, miten sinun pitäisi käyttää niitä. Tämän seurauksena on aivan liian helppoa rakentaa epämiellyttävä sotku. Standardien noudattaminen ja uusimpien parannusten hyödyntäminen eritelmissä ei takaa hyvää koodia, mutta se voi varmasti auttaa.

Kaikenlaisessa ohjelmistokehityksessä modulaarisuus on kuningas, kun kyseessä on ylläpidettävä koodi. Tämän seurauksena haluat pitää läheisen silmän Web-komponenteilla. Selaimen tuki ei ole suuri, mutta jos napasit itse polyfillit , voit päästä eteenpäin käyrän ja aloittaa hyödyntää mukautettuja elementtejä koodin rakentamiseksi heti. Tämä kehitystyyli on tulevaisuus, joten kannattaa tutustua siihen nyt.

Keep code streamlined for clearer understanding — Pidä koodi virtaviivainen selkeämpi ymmärrys

HTML5 itse esitteli useita uusia elementtejä (ja heikensi useita), mikä auttaa edistämään hyviä koodauskäytäntöjä. Olet ehkä kuullut semanttisesta margupista, joka viittaa HTML5: n kuvailevien elementtien käyttöön, kuten & lt; artikkeli & gt; ja & lt; kuva & gt; Ilmoittakaa sisältötyyppi ne sisältävät.

Tämä voi todella auttaa koodin puhtaudessa, koska HTML-elementit tunnistavat välittömästi esimerkiksi, mitkä osat edustavat valikkopalkkia, sisältöjäsi, alatunniste ja niin edelleen.

Se auttaa myös, jos käytät uusimpia JavaScript-standardeja. Javascript voi myös olla sotkuinen, mutta viime vuosina on paljon helpompi työskennellä. ES6-syntaksi on laajalti tuettu selaimissa, ja ominaisuudet, kuten arrow-toiminnot ja luokat, voivat tehdä elämäsi paljon helpommin - mutta monet kehittäjät ovat joko tuntemattomia tai varovaisia.

Modulaarisen kehityksen teemana JavaScript tukee myös moduulin lataamista, mikä voi auttaa sinua hallitsemaan riippuvuuksiasi puhtaasti.

01. Tunnista ja syntetisoida puhe

The sound of things to come — Tulevien asioiden ääni (Kuva luotto: Kuva Jason Rosewell on Unsplash)

Nämä olivat kerran monimutkaisia toimintoja, jotka edellyttävät erikoistuneita ohjelmistoja, mutta ne on nyt rakennettu suoraan selaimiin. Web-puheen API: llä on komponentteja, jotka tukevat tekstiä puhetta ja puheenvuoroa. Jälkimmäiset näistä joko käyttävät verkkopalvelua (Chrome käyttää Google Cloud -puheen API) tai laitteen alkuperäisen puheentunnistuspalvelun. Odottaa, että tätä käytetään laajasti mobiililaitteissa tulevaisuudessa.

02. Näytä värinvalitsin

Choosing the right colour — Oikean värin valitseminen (Kuva luotto: Kuva Scott Webb Unsplash)

Triviaali, koska se saattaa kuulostaa, tämä on erinomainen esimerkki siitä, miten HTML5 yksinkertaistaa yhteisiä tehtäviä, jotka aiemmin olisivat vaatineet mukautettua koodausta melko monimutkaisen UI-komponentin. & lt; syöttötyyppi = "väri" & gt; Näyttää visuaalisen värinvalitsimen, kun napsautat laitteen natiivin väriliikenteen. Tämä voi olla erityisen hyödyllinen HTML-kankaalla. Se on laajalti tuettu lukuun ottamatta mobiililaitteita.

03. RECOLOURA selain UI

Colour themes for browsers — Väri-teemat selaimille (Kuva luotto: Kuva Marko Blažević Unsplash)

Tämä voi tarjota mukavan esteettisen kosketuksen mobiililaitteilla. & lt; meta nimi = "teema-väri" sisältö = "# ffffff" / & gt; on suunniteltu ohjaamaan selainta uudelleen työkalupalkki tarkastelemalla sivustoasi. Valitettavasti se on vähän ei-standardoituja, niin "Teema-väri" Toimii Chrome, Firefox ja Opera, IOS tarvitset "Apple-Mobile-Web-App-Status-Bar-tyyli" (toimii vain koko näytön tilassa).

04. Eri kuvat eri näytöille

Specifying the image and the resolution — Kuvan määrittäminen ja resoluutio (Image Credit: Kuva Tran Mau Tri Tam on Unsplash)

Toivottavasti olet jo toteuttanut reagoivaa muotoilua, jolloin kuvesi koorioitaan näkemykseen sopivaksi. Tämä ei ole täydellinen, koska voit pakottaa käyttäjän lataamaan kuvan suurimman version sitten alaspäin sen. Anna HTML5 & lt; kuva & gt; Elementti, jonka avulla voit määrittää eri kuvat näytön tarkkuuden mukaan, sivustoa tarkastellaan.

05. Väritä puhelin

Shakin' all over — Shakin 'kaikkialla (Kuva luotto: Kuva Gilles Lambert Unsplash)

Yksiselitteisesti nimetty tärinä API paljastaa yhden toiminnon, värähtelee (), mikä tekee juuri sen, mitä se sanoo laitteita, jotka tukevat sitä. Toiminto ottaa luettelon, jossa kuvataan värähtelykuvio sen argumenttina. Se toimii Chrome, Firefox ja Opera, vaikka olette onnea reunalla tai safarilla. On raportoitu, että jotkin mainokset käyttävät tätä houkuttelemaan käyttäjän huomion, joten tuomaristo on siitä, onko se oikeastaan hyvä idea.

Tämä artikkeli oli alun perin ilmestynyt Nettisivujen suunnittelija Julkaisu 266. Osta se täällä .

Aiheeseen liittyvät artikkelit:

10 parasta HTML5-mallipohjaa
20 HTML-malleja, jotka antavat web-suunnittelun projekteille päätän
NAIL HTML tämän huijausarkin kanssa

5 Asiat, joita et tiennyt, voit tehdä HTML

01. Tunnista ja syntetisoida puhe

02. Näytä värinvalitsin

03. RECOLOURA selain UI

04. Eri kuvat eri näytöille

05. Väritä puhelin

Miten tehdään - Suosituimmat artikkelit

Kuinka perustaa ja optimoida Smugmug-myymälät

Miten tarkentaa suunnitteluvarfoliosi

Miten luoda sovelluksen kuvake Illustratorissa

Johdatus CSS mukautetuille ominaisuuksille

Kuinka luoda kojelaudan sovellus reagoimaan

Luo interaktiivinen parallax-kuva

Miten hallita CSS-luokkia JavaScript

Luo luonne, jossa on tyylitelty realismi

Luokat