Manuale di base HTML5

API HTML5

Media HTML5

Immagini HTML5

Supporto dei browser HTML5

Puoi far sì che alcuni browser più vecchi (che non supportano HTML5) supportino HTML5.

Supporto dei browser HTML5

I browser moderni supportano HTML5.

Inoltre, tutti i browser, inclusi quelli obsoleti e i più recenti, trattano automaticamente gli elementi non riconosciuti come elementi in linea.

Per questo, puoi "Insegnare" Il browser gestisce "Sconosciuto" dei elementi HTML.

Anche puoi insegnare al browser IE6 (Windows XP 2001) a gestire gli elementi HTML sconosciuti.

Definire gli elementi HTML5 come elementi bloccanti

HTML5 ha definito 8 nuovi elementi semantiche HTML5. Tutti questi elementi sono Elementi bloccanti.

Per consentire ai browser di versione precedente di visualizzare correttamente questi elementi, puoi impostare il valore dell'attributo CSS display su block:

Esempio

<html>
<head>　
<meta charset="utf-8">　
<title>Manuale di base del sito Web (oldtoolbag.com)</title>　
</head>
<body>
header, section, footer, aside, nav, main, article, figure {
　　　　display: block;　
}
</body>
</html>

Prova a vedere <‹/›>

Aggiungi elementi personalizzati a HTML

Puoi aggiungere elementi personalizzati a HTML.

L'elemento personalizzato aggiunto a HTML in questo esempio, con lo stile definito per l'elemento denominato <myLabel> :

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Aggiungi nuovi elementi a HTML (oldtoolbag.com)</title>
<script>
　　　　document.createElement("myLabel")
</script>
<style>
myLabel{
　　　　display: block;
　　　　background-color: #ddd;
　　　　padding: 50px;
　　　　font-size: 30px;
}
</style>　
</head>
　
<body>
　
<h1>Il mio primo titolo HTML5</h1>
　
<p>Il mio primo paragrafo HTML5.</p>
　
<myLabel>Il mio primo elemento personalizzato</myLabel>
　
</body>
　　</html>

Prova a vedere <‹/›>

L'espressione JavaScript document.createElement("myLabel") è utilizzata per aggiungere nuovi elementi al browser IE.

Fare in modo che il browser IE supporti HTML5

Puoi utilizzare il metodo sopra descritto per aggiungere elementi HTML5 ai browser IE, ma:

I browser Internet Explorer 8 e versioni precedenti non supportano il metodo sopra descritto.

Possiamo utilizzare "HTML5 Enabling JavaScript" creato da Sjoerd Visscher, " Per risolvere questo problema:

<![if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

Il seguente codice è un commento, il cui scopo è leggere il file html5.js e analizzarlo quando la versione del browser IE è inferiore a IE9.

Attenzione:Gli utenti cinesi devono utilizzare la libreria di risorse statiche di questo sito (la libreria di risorse Google è instabile in Cina):

<![if lt IE 9]>
　　<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

Per i browser IE, html5shiv è una buona soluzione.html5shivPrincipale soluzione per i nuovi elementi proposti da HTML5 non riconosciuti dai browser IE6-8, questi nuovi elementi non possono essere utilizzati come nodi genitori per contenere elementi figli e non possono applicare stili CSS.

Soluzione Shiv perfetta

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Visualizzazione HTML5</title>
　　<![if lt IE 9]>
　　<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
　　<![endif]-->
</head>
　
<body>
　
<h1>Il mio primo articolo</h1>
　
<article>
Sito web di tutorial di base (oldtoolbag.com) - Impara bene, puoi andare più lontano!!
</article>
　
</body>
</html>

Prova a vedere <‹/›>

Il codice di riferimento di html5shiv.js deve essere messo nel tag <head> perché i browser IE devono caricare questo file prima di interpretare i nuovi elementi HTML5.

SVG inline HTML5 Guida HTML5