HTML5

HTML5
( Hypertext Markup Language )
utvikler
W3C HTMLWG, WHATWG
https://www.w3.org/TR/html5/
Generell informasjon
filutvidelse HTML: .html, .htm
XHTML: .xhtml, .xht, .xml
mime-type HTML: text/html
XHTML: application/xhtml+xml, application/xml
Første utgivelse 28. oktober 2014
formattype merkespråk
utvidet fra SGML
Standarder) http://www.w3.org/TR/html5/
åpent format ?

HTML 5 ( HyperText Markup Language , versjon 5) er den femte store revisjonen av det grunnleggende språket på World Wide Web , HTML . HTML5 spesifiserer to syntaksvarianter for HTML: en "klassisk" HTML ( text/html), kjent som HTML5 , og en XHTML- variant kjent som XHTML 5 -syntaks som skal leveres med XML-syntaks ( application/xhtml+xml). [ 1 ]​ [ 2 ]​ Dette er første gang HTML og XHTML har blitt utviklet parallelt. Den endelige versjonen av den femte revisjonen av standarden ble publisert i oktober 2014. [ 3 ]

Siden den ikke gjenkjennes i eldre versjoner av nettlesere på grunn av de nye taggene, anbefales det for den vanlige brukeren å oppdatere nettleseren til den nyeste versjonen, for å nyte det fulle potensialet som HTML 5 gir.

Utviklingen av dette markup-språket er regulert av W3C Consortium .

Nye elementer

HTML5 etablerer en rekke nye elementer og attributter som gjenspeiler den typiske bruken av moderne nettsteder. Noen av dem ligner teknisk sett på taggene <div>og <span>, men har en semantisk betydning, for eksempel <nav>(nettstedsnavigasjonsblokk) og <footer>.

Forskjeller mellom HTML5 og HTML4/XHTML

Merkelapp tag-attributter Kommentarer
<!-- --> standard eller ingen Kommentarer
<!DOCTYPE> HTML stil
<a> href | mål | relé | hreflang | gjennomsnittlig | type Lagt til attributt: media
Endret attributt: Mål
<abbr> tittel
<akronym> Tag fjernet
<adresse> standard eller ingen
<applets> Tag fjernet
<område> standard eller ingen
<artikkel> globale attributter ny tag
<til side> globale attributter ny tag
<lyd> autobuffer | autoplay | kontroller | løkke | src ny tag
<b> globale attributter endret etikett
<base> standard eller ingen
<basefont> Tag fjernet
<bdo> standard eller ingen
<big> Tag fjernet
<blockquote> standard eller ingen
<body> standard eller ingen
<br> standard eller ingen
<knapp> standard eller ingen
<lerret> høyde | bredde ny tag
<bildetekst> standard eller ingen
<senter> Tag fjernet
<siter> globale attributter endret etikett
<kode> standard eller ingen
<col> standard eller ingen
<colgroup> standard eller ingen
<dataliste> globale attributter ny tag
<dd> standard eller ingen
<del> standard eller ingen
<detaljer> åpen ny tag
<dialog> globale attributter ny tag
<dir> Tag fjernet
<div> standard eller ingen Inndeling
<dfn> standard eller ingen
<dl> standard eller ingen
<dt> standard eller ingen
<em> standard eller ingen
<embed> høyde | src | skriv | bredde ny tag
<feltsett> standard eller ingen
<figur> globale attributter ny tag
<font> Tag fjernet
<bunntekst> globale attributter ny tag
<skjema> standard eller ingen
<ramme> Tag fjernet
<rammesett> Tag fjernet
<h1>... <h6> standard eller ingen
<hode> standard eller ingen
<header> globale attributter ny tag
<hgroup> hgroup ble lagt til HTML5-spesifikasjonen, men er nå avviklet. [ 4 ]​ Bruk <header>
<hr> Ingen endret etikett
<html> standard eller ingen
<i> Ingen endret etikett
<iframe> standard eller ingen
<img> standard eller ingen
<input> godta | alt | autofullfør | autofokus | sjekket | deaktivert | form | formasjon | formctype | formmetode | formnovated | form mål | høyde | liste | maks | makslengde | minutt | flere | navn | mønstre | plassholder | skrivebeskyttet | nødvendig | størrelse | src | trinn | skriv | verdi | bredde Endret etikett: Lagt til 13 elementer for å skrive
<ins> standard eller ingen
<isindex> Tag fjernet
<kbd> standard eller ingen
<etikett> standard eller ingen
<legende> standard eller ingen
<li> standard eller ingen
<link> standard eller ingen
<mark> globale attributter ny tag
<kart> standard eller ingen
<meny> standard eller ingen
<mål> standard eller ingen
<meter> høy | lav | maks | minutt | beste | verdi ny tag
<nav> globale attributter ny tag
<noframes> Tag fjernet
<noscript> standard eller ingen
<objekt> standard eller ingen
<ol> standard eller ingen
<optgroup> standard eller ingen
<alternativ> standard eller ingen
<utgang> form ny tag
<p> standard eller ingen
<param> standard eller ingen
<pre> standard eller ingen
<fremgang> maks | verdi ny tag
<q>
<ruby> sitat ny tag
<rp> globale attributter ny tag
<rt> globale attributter ny tag
<s> Tag fjernet
<samp> standard eller ingen
<script> standard eller ingen
<seksjon> sitat ny tag
<velg> standard eller ingen
<liten> globale attributter Etikett endret
<kilde> gjennomsnittlig | src | type ny tag
<span> standard eller ingen
<streik> Tag fjernet
<strong> standard eller ingen
<stil> standard eller ingen
<sub> standard eller ingen
<opp> standard eller ingen
<tabell> standard eller ingen
<tbody> standard eller ingen
<td> standard eller ingen
<tekstområde> standard eller ingen
<tfoot> standard eller ingen
<th> standard eller ingen
<hode> standard eller ingen
<tid> dato klokkeslett | publiseringsdato ny tag
<tittel> standard eller ingen
<tr> standard eller ingen
<tt> Tag fjernet
<i> Definerer tekst som skal ha en annen stil enn vanlig tekst [ 5 ]
<ul> standard eller ingen
<var> standard eller ingen
<video> src | plakat | autobuffer | autoplay | løkke | kontroller | bredde | høyde ny tag
<xmp> Tag fjernet

Merknader: I gult de taggene som ble introdusert i denne nye versjonen (i rødt de som ble fjernet fra HTML5-spesifikasjonen), i blått taggene som har blitt endret helt eller delvis, og i grått taggene fjernet fra denne versjonen. Selv om nettleserne i praksis ikke tar hensyn til det for å unngå å miste markedsandeler.

Hva er nytt

Semantisk nett

Nye APIer og Javascript

HTML5-kodeeksempler

HTML5-kode for å spille av lyd uten behov for plugins


For video er det noe lignende.

<!DOCTYPE HTML> < html LANG = "no" > < head > < meta charset = "UTF-8" > < title > multi-element source </ title > </ head > < body > < audio id = "audioTestElem " autobufferkontroller > < source src = " test.m4a " > < source src = "test.ogg" type = "audio/ogg; codecs=vorbis" > < source src = "url" > ingen lyd for deg </ audio > </ body > </ html >


WebWorker Eksempel (parallell tråd)
Javascript kreves.

For Test.html-filen

<!DOCTYPE HTML> < html > < head > < title > Arbeidseksempel: En-kjerneberegning </ title > </ head > < body > < p > Det høyeste primtallet som er oppdaget så langt er: < output id = "result " ></ output ></ p > < script > var worker = new Worker ( 'worker.js' ); arbeider . onmessage = funksjon ( hendelse ) { dokument . getElementById ( 'resultat' ). textContent = hendelse . dato ; }; </ script > </ body > </ html >

For worker.js-filen (fil med oppgaven til den nye uendelige utførelsestråden)

var n = 1; søk: while (true) { n+= 1; for (var i = 2; i < = Math.sqrt(n); i += 1) hvis (n % i == 0) fortsett søket; // fant en primtall! postMessage(n); }


Canvas 2D-eksempel ved bruk av Drawing API <!DOCTYPE HTML> < html > < head > < title > HTML5 Canvas-eksempel </ title > < script > function drawPicture (){ // Først hentes lerretsobjektet som skal endres var canvas = document . getElementById ( 'eksempel' ); // Så forteller den deg hvordan du arbeider 2D eller 3D var context = canvas . getContext ( '2d' ); // Begynn å tegne på lerretet ved å bruke grafiske //- objekter kontekst . fillStyle = "rgb(0,255,0)" ; kontekst . fillRect ( 25 , 25 , 100 , 100 ); kontekst . fillStyle = "rgba(255,0,0, 0.6)" ; kontekst . startPath (); kontekst . bue ( 125 , 100 , 50 , 0 , Math . PI * 2 , sann ); kontekst . fyll (); kontekst . fillStyle = "rgba(0,0,255,0.6)" ; kontekst . startPath (); kontekst . moveTo ( 125 , 100 ); kontekst . lineTo ( 175 , 50 ); kontekst . lineTo ( 225 , 150 ); kontekst . fyll (); } </ script > < style type = "text/css" > canvas { border : 2 px solid black ; } </ style > </ head > < body onload = "drawPicture();" > < canvas id = "eksempel" width = "260" høyde = "200" > Det skal være et eksempeltegning her, men det er ikke viktig. </ canvas > </ body > </ html >


Eksempel på skjema med nye datatyper


Eliminer mange valideringer i Javascript. (Nøkkelen er i Type-attributtet.)

<!DOCTYPE HTML> < html > < body > < form > < input name = "form_number" id = "form_number" type = "number" min = "1" max = "10" > < input name = "form_date" id = "form_date" type = "date" > < input name = "form_month" id = "form_month" type = "month" > < input name = "form_week" id = "form_week" type = "week" > < input name = "form_time" id = "form_time" type = "time" > < input name = "form_url" id = "form_url" type = "url" list = "url_list" > < datalist id = "url_list" > < alternativverdi = " http://www.google.com" label = "Google " > < option value = "http://net.tutsplus.com" label = "NetTuts+" > </ datalist > < input name = "form_email" id = "form_email" type = "email" list = "email_list" multiple > < datalist id = "email_list" > < option value = "[email protected]" label = "Jane Doe" > < option value = "[email protected]" label = "John Doe" > < / datalist > < input name = "form_telephone" id = "form_telephone" type = "tel" > < input name = "form_color" id = "form_color" type = "color" > < label > Vedlegg: < input type = "file" multiple name = "att" > </ label > < input name = "x" type = "range" min = "100" maks = "700" trinn = "9.09090909" verdi = "509.090909" > </ form > </ body > </ html >


Eksempel på geoposisjonering <!DOCTYPE HTML> < html > < head > < title > Geo Locations </ title > </ head > < body > < script language = "javascript" > function get_location () { navigator . geolokalisering . getCurrentPosition ( koordinater ); } funksjonskoordinater ( posisjon ) { var breddegrad = posisjon . _ koordinater _ breddegrad ; var lengde = posisjon . koordinater _ lengdegrad ; alert ( 'Koordinatene dine er: (' + breddegrad + ',' + lengdegrad + ')' ); } </ script > < a href = "javascript:get_location();" > Vis posisjon </a> < / body > < / html >

Referanser

  1. ↑ W3C (6. oktober 2009). Ian Hickson og David Hyatt, red. "HTML 5" (på engelsk) . Hentet 6. oktober 2009 . 
  2. ↑ Jorge Franganillo (6. september 2010). "HTML 5: den nye grunnleggende webstandarden" . 
  3. ↑ "HTML 5 ferdigstilt" . OSNews . 29. oktober 2014 . Hentet 29. oktober 2014 . 
  4. ↑ W3C (13. juni 2014). "HTML/Elements/hgroup " . 
  5. ↑ W3C (2007). "W3C Consortium HTML 5 Tag Reference " . Arkivert fra originalen 2. august 2012. 

Se også

Eksterne lenker