HTML5 Grundlagen-Tutorial

HTML5 API

HTML5 Medien

HTML5 Grafik

HTML5 Client-Speicher HTML5 Formular-Attribute

HTML5 语义元素

Semantische Elemente sind Elemente, deren Name sofort zeigt, was sie darstellen. Zum Beispiel für Artikel <article> gibt es Informationen wie Überschrift <header>, Inhaltsverzeichnis <catalog>, Inhalt <content> und Fußzeile <footer>.

Was sind semantische Elemente?

Ein semantisches Element kann seinen Sinn klar an den Browser und den Entwickler beschreiben.

Beispiel für nicht semantische Elemente: <div> und <span> - ohne Inhalte zu berücksichtigen.

Beispiel für semantische Elemente: <form>, <table> und <img> - definiert klar seinen Inhalt.

Browser-Unterstützung

Internet Explorer 9+, Firefox, Chrome, Safari und Opera unterstützen semantische Elemente.

Hinweis: Internet Explorer 8 und frühere Versionen unterstützen das Element nicht. Aber am Ende des Artikels wird eine kompatible Lösung bereitgestellt.

HTML5neue semantische Elemente

Viele bestehende Websites enthalten folgenden HTML-Code:

<div id="nav">, <div>, oder <div id="footer">, um Navigationslinks, Header und Footer zu kennzeichnen.

HTML5 Er stellt neue semantische Elemente bereit, um verschiedene Teile einer Webseite klar zu kennzeichnen:

<header>
<nav>
<section>
<article>
<aside>
Der <figcaption>-Tag
<figure>
<footer>

HTML5 Der <section>-Element

Der <section>-Tag definiert Abschnitte (Abschnitt, Abschnitt) in Dokumenten. Zum Beispiel Kapitel, Kopfzeilen, Fußzeilen oder andere Teile eines Dokuments.

According to W3C HTML5Document: 　section contains a set of content and its title.

示例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<section>
　　<h1>HTML5</h1>
　　<p>It is a new HTML language version that includes new elements, attributes, and behaviors, and also includes a series of technologies that can be used to make Web sites and applications more diverse and powerful. This set of technologies is often referred to as HTML5　and its friends, usually abbreviated as HTML5。</p>
</section>
<section>
　　<h1>CSS3</h1>
　　<p>A major change in the evolution of CSS is W3C decided to divide CSS3into a series of modules. Browser vendors innovate quickly according to the CSS rhythm, so by adopting the modular approach, CSS3The elements in the specification can develop at different speeds because different browser vendors only support given features. But different browsers support different features at different times, which also makes cross-browser development complex./p>
</section>
</body>
</html>

Testen Sie es heraus ‹/›

HTML5 <article> 元素

<article> 标签定义独立的内容。

<article> 元素使用示例:

Forum post
Blog post
News story
Comment

示例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<article>
　　<h1>CSS3　</h1>
　　<p>SS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001Jahr5Monat23日W3C completed CSS3的工作草案，
主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块　。/p>
</article>
</body>
</html>

Testen Sie es heraus ‹/›

HTML5 <nav> 元素

<nav> 标签定义导航链接的部分。

<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

示例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<nav>
　　　　<a href="/html/">HTML</a> |
　　　　<a href="/css/">CSS</a> |
　　　　<a href="/js/">JavaScript</a> |
　　　　<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>

Testen Sie es heraus ‹/›

HTML5 <aside> 元素

<aside> 　tag defines additional content outside the main content area of the page (such as sidebars).

The content of the aside tag should be related to the main content.

示例

<!doctype　html>
<html>
<head>
<meta　charset="UTF-8">
<title>HTML5　Example　by　de.oldtoolbag.com</title>
</head>
<body>
<article>
　　<h1>Heading　for　Article</h1>
　　<p>Text　that　appears　under　article</p>
</article>
<aside>
　　<p>Text that appears under aside</p>
</aside>
</body>
</html>

Testen Sie es heraus ‹/›

HTML5 <header> 元素

<header>元素描述了文档的头部区域

<header>元素主要用于定义内容的介绍展示区域.

在页面中你可以使用多个<header> 元素.

以下示例定义了文章的头部:

示例

<!doctype　html>
<html>
<head>
<meta　charset="UTF-8">
<title>HTML5　Example　by　de.oldtoolbag.com</title>
</head>
<body>
<header>
　　<img src="/static/images/logo-n.png" alt="Logo">
</header>
<article>
　　<h1>Heading　for　Article</h1>
　　<p>Text　that　appears　under　article</p>
</article>
</body>
</html>

Testen Sie es heraus ‹/›

HTML5 <footer> 元素

<footer> 元素描述了文档的底部区域.

<footer> 元素应该包含它的包含元素

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

文档中你可以使用多个 <footer>元素.

示例

<!doctype　html>
<html>
<head>
<meta　charset="UTF-8">
<title>HTML5　Example　by　de.oldtoolbag.com</title>
</head>
<body>
<article>
　　<h1>Heading　for　Article</h1>
　　<p>Text　that　appears　under　article</p>
</article>
<footer>
　　<p>Copyright　©2013</p>
</footer>
</body>
</html>

Testen Sie es heraus ‹/›

HTML5 <figure> 和 <figcaption> 元素

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 <figure> 元素的标题.

<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

示例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<figure>
　　<img　src="venglobe.gif"　alt="venglobe"　width="304"　height="228">
　　<figcaption>venglobe　venglobe　venglobe.</figcaption>
</figure>
</body>
</html>

Testen Sie es heraus ‹/›

　HTML5语义元素在线汇总示例

示例

<!doctype　html>
<html>
<head>
　　　　<meta　charset="UTF-8">
　　　　<title>语义元素</title>
</head>
<body>
　　　　<!--结构元素-->
　　　　<header>头部</header>
　　　　<section>表示一个段落：用于区域的章节表述</section>
　　　　<footer>区域的页脚部分</footer>
　　　　<nav>菜单　导航</nav>
　　　　<article>表示文章的主体内容</article>
　　　　<!--块级元素　用于区域的划分-->
　　　　<aside></aside>
　　　　<figure>
　　　　　　　　<figcaption></figcaption>
　　　　</figure>
　　　　<code>表示一段代码</code>
　　　　<dialog>表示对话
　　　　　　　　<dt>说话的人</dt><dd>内容</dd>
　　　　</dialog>
　　　　<!--语义元素-->
　　　　<mtter>一定范围的数值</mtter>
　　　　<time></time>
　　　　<progress>Fortschrittsbalken</progress>
　　　　<video>Video</video>
　　　　<audio>Audio</audio>
　　　　<!--Interaktionslemente-->
　　　　<details>Ein spezifisches Inhalt<, durch eine bestimmte Methode angezeigt</details>
　　　　<datagrid>Wird verwendet, um die Anzeige von Clientendaten zu steuern</datagrid>
　　　　<menu>Interaktive Menüe</menu>
　　　　<command>Bezeichnung</command>
　　　　<!--Zeige Beispiele an-->
　　　　<article>
　　　　　　　　<header>
　　　　　　　　　　　　<h1>Die Tags im HTML-Header</h1>
　　　　　　　　　　　　<time>2015Jahr12Monat12Tag/time>
　　　　　　　　</header>
　　　　　　　　<p>Die Tags und Elemente im HTML-Header sind vielfältig und betreffen die Rendering von Webseiten durch Browser, SEO usw. Während verschiedene Browser-Engines und verschiedene heimische Browser-Hersteller ihre eigenen Tags und Elemente haben, führt dies zu vielen Unterschieden. In der Ära des mobilen Internets ist die Struktur des Headers und die Meta-Elemente auf mobilen Endgeräten noch wichtiger. Das Verständnis der Bedeutung jedes Tags und das Schreiben von Header-Tags, die den eigenen Anforderungen entsprechen, ist das Ziel dieses Artikels. Dieser Artikel erweitert und zusammenfasst auf Basis des Artikels 'Yi Si' die Bedeutung und Anwendungsszenarien der gebräuchlichen Tags und Elemente im Header./p>
　　　　　　　　<footer>
　　　　　　　　　　　　<p>http://www.baidu.com</p>
　　　　　　　　</footer>
　　　　</article>
　　　　<!--Kommentare-->
　　　　<section>
　　　　<h2>Kommentare</h2>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>Li Si</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23　10:00　-　11:00>vor einer Stunde</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>Kommentare</p>
　　　　　　　　</article>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>Li Si</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23　10:00　-　11:00>vor einer Stunde</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>Kommentare</p>
　　　　　　　　</article>
　　　　</section>
</body>
</html>

Testen Sie es heraus ‹/›

Können wir diese semantischen Elemente verwenden?

Diese Elemente sind alle Block-Elemente (außer <figcaption>).

Um sicherzustellen, dass diese Blöcke und Elemente in allen Browser-Versionen funktionieren, müssen Sie einige Eigenschaften in der Stylesheet-Datei festlegen (folgender Stilcode ermöglicht es alten Browsern, die in diesem Kapitel vorgestellten Block-Elemente zu unterstützen):

header, section, footer, aside, nav, article, figure
{
　　　　display: block;
}

Internet Explorer 8 und frühere IE-Versionen haben dieses Problem

IE8 Frühere IE-Versionen können keine CSS-Effekte in diesen Elementen rendern, sodass Sie <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, oder andere HTML5 elements.

Lösung: Sie können HTML5 Shiv-Javascript-Skript, um Kompatibilitätsprobleme in IE zu lösen.

HTML5 Shiv-Download-Adresse:http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js

Nach dem Herunterladen fügen Sie den folgenden Code in die Webseite ein:

Der obige Code wird in Browsern kleiner als IE9Version wird HTML laden5shiv.js-Datei. Sie müssen es in das <head>-Element einfügen, da der IE-Browser diese HTML-Elemente nach dem Laden im Header rendern muss5neue-Elemente

HTML5 Client-Speicher HTML5 Formular-Attribute