HTML5 Grundlagen-Tutorial

HTML5 API

HTML5 Medien

HTML5 Grafik

HTML5 Browser unterstützen

Sie können einige frühere Browser (die HTML nicht unterstützen5）unterstützt HTML5.

HTML5 Browser unterstützen

Moderne Browser unterstützen HTML5.

Darüber hinaus behandeln alle Browser, einschließlich alter und neuer, nicht erkannte Elemente automatisch als Inline-Elemente.

Daher können Sie "Lehre" Browser verarbeiten "Unbekannt" HTML-Elemente.

Sie können sogar IE6 　(Windows XP 2001) wird von Browsern verarbeitet, die unbekannte HTML-Elemente nicht erkennen.

HTML5 Das Element als Blockelement definiert

HTML5 festgelegt 8 Ein neuer HTML-Semantikelement. Alle diese Elemente sind Block-Elemente.}}

Um sicherzustellen, dass diese Elemente in alten Browsern korrekt angezeigt werden, können Sie den CSS-Display-Property-Wert auf block setzen:

Beispiel

<html>
<head>　
<meta　charset="utf-8">　
<title>Grundlagen-Tutorial-Netz(oldtoolbag.com)</title>　
</head>
<body>
header, section, footer, aside, nav, main, article, figure {
　　　　display: block;　
}
</body>
</html>

Testen Sie es heraus ‹/›

Benutzerdefinierte Elemente zu HTML hinzufügen

Sie können benutzerdefinierte Elemente zu HTML hinzufügen.

Der in diesem Beispiel zu HTML hinzugefügte benutzerdefinierte Element und die für das Element definierten Stile, der Name des Elements ist <myLabel> :

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta　charset="utf-8">　
<title>Neue Elemente zu HTML hinzufügen(oldtoolbag.com)</title>
<script>
　　　　document.createElement("myLabel")
</script>
<style>
myLabel{
　　　　display: block;
　　　　background-color: #ddd;
　　　　padding:　50px;
　　　　font-size:　30px;
}
</style>　
</head>
　
<body>
　
<h1>Meine erste HTML5Titel</h1>
　
<p>Meine erste HTML5Absatz.</p>
　
<myLabel>Meine erste benutzerdefinierte Element</myLabel>
　
</body>
　　</html>

Testen Sie es heraus ‹/›

Das JavaScript-Ausdruck document.createElement("myLabel") dient dazu, neue Elemente für IE-Browser hinzuzufügen.

IE-Browser unterstützen HTML5Browser

Sie können die obige Methode verwenden, um HTML für IE-Browser hinzuzufügen5 Elemente, aber:

Internet Explorer 8 und ältere IE-Versionen der Browser unterstützen diese Methode nicht.

Wir können das von Sjoerd Visscher geschaffene "HTML5 JavaScript aktivieren", " shiv" um dieses Problem zu lösen:

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

Der obige Code ist ein Kommentar, der dient dazu, in IE-Browsern mit Versionen kleiner als IE9 wird html5.js-Datei und analysieren Sie sie.

Hinweis:Bitte verwenden Sie die statische Ressourcenbibliothek dieser Seite (Google-Bibliothek ist in China instabil):

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

Für die html5shiv ist eine gute Lösung.html5shivLöst hauptsächlich HTML5Die neuen Elemente, die vorgeschlagen werden, werden von IE6-8Diese neuen Elemente können nicht als Elternteilselemente für Kindelemente verwendet werden und können keine CSS-Styles anwenden.

Perfektes Shiv-Lösung

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta　charset="utf-8">
<title>Rendering von HTML5</title>
　　<!--[if　lt　IE　9]>
　　<script　src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
　　<![endif]-->
</head>
　
<body>
　
<h1>Mein erstes Artikel</h1>
　
<article>
Grundlagen-Tutorial-Website(oldtoolbag.com) —— Lernen Sie die Grundlagen, um weiter voranzukommen!!
</article>
　
</body>
</html>

Testen Sie es heraus ‹/›

html5Der Quellcode für shiv.js muss im <head>-Element platziert werden, da der IE-Browser HTML beim Parsen ausführt5 Beim Laden neuer Elemente in HTML5 muss diese Datei zuerst geladen werden.

HTML5 Inlines-SVG HTML5 Tutorial