HTML5 esittely

Jokaisen luvun HTML5-esimerkki

Esimerkki

<!DOCTYPE html>
<html>
<body>
<video width="420" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
 Selaimesi ei tue video-merkkiä.
</video>
</body>
</html>

Kokeile itse

Klikkaa "Kokeile itse" nähdäksesi, miten tämä esimerkki toimii.

Mitä on HTML5?

HTML5 on uusin HTML-standardi.

HTML5 on suunniteltu kantamaan rikasta web-sisältöä ilman lisäliittimiä.

HTML5:llä on uusia semanttisia, graafisia ja multimediasymbolia.

HTML5 tarjoaa uusia elementtejä ja uusia API:ita, jotka yksinkertaistavat web-sovellusten rakentamista.

HTML5 on yliverkkoinen ja on suunniteltu toimimaan erilaisten laitteiden (PC, tabletti, puhelin, television jne.) päällä.

Huomautus：Seuraavissa luvuissa opit, miten "auttaa" vanhoja selaimia käsittelemään HTML5.

Mitä uutta HTML5:ssä on?

HTML5:n uusi dokumenttipyyntö (DOCTYPE) -ilmoitus on erittäin yksinkertainen:

<!DOCTYPE html>
Uusi merkistö (charset) -ilmoitus on myös erittäin yksinkertainen:
<meta charset="UTF-8">

HTML5-esimerkki：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dokumentin otsikko</title>
</head>
<body>
Dokumentin sisältö......
</body>
</html>

Huomautus：HTML5:n oletusarvoinen merkistö on UTF-8.

HTML5 - Uusi ominaisuuslauseke

HTML5-standarden sallii neljä erilaista ominaisuuslausekkeen syntaksia.

Tämä esimerkki näyttää eri kielioppikieltä <input>-elementissä käytetystä:

Tyyppi Esimerkki
Tyhjä <input type="text" value="Bill Gates" disabled>
Lainausmerkit puuttuvat <input type="text" value=Bill Gates>
Kaksinkertainen lainaus <input type="text" value="Bill Gates">
Yksinkertainen lainaus <input type="text" value='Bill Gates'>

HTML5-standardissa voidaan käyttää kaikkia neljää kielioppikieltä tarpeen mukaan.

HTML5 - Uudet ominaisuudet

HTML5:n kaikkein mielenkiintoisimmat uudet ominaisuudet:

  • Uusia semanttisia elementtejä, kuten <header>, <footer>, <article> ja <section>.
  • Uusia lomakkeiden valitsimia, kuten numeroita, päivämääriä, aikaa, kalenteria ja liukusäädintä.
  • Voimakas kuvatuki (canvas> ja <svg> avulla)
  • Voimakas multimediasuuntaus (video> ja <audio> avulla)
  • Voimakkaat uudet API:t, kuten paikallisen tallennuksen käyttö cookie:n sijaan.

HTML5 - Poistetut elementit

Seuraavat HTML 4.01-elementit on poistettu HTML5:stä:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>