HTML5-Dokumentstruktur

HTML5-Dokumentstruktur

HTML5 ist stark vereinfacht und sein Design folgt drei Prinzipien: 1. Kompatibilität, 2. Praktikabilität, 3. Universelle Zugänglichkeit

1. Header-Element

Das Tag

definiert den Header eines Dokuments oder eines Teils eines Dokuments und kann auch zum Festlegen des Artikeltitels verwendet werden.

Das

-Element sollte als Container für einleitende Inhalte oder Navigationslinks dienen.

In einem Dokument können Sie mehrere

-Elemente definieren.

Hinweis: Das

-Tag kann nicht innerhalb eines

-,

-Elements platziert werden.

Syntaxbeschreibung:

Tag-Paare können sechs Titelelemente h1~h6 sowie p, span und andere Elemente enthalten.

hgroup-Element

-Tag definiert den Haupttitel und den Untertitel des Dokuments. Zwischen Tag-Paaren werden normalerweise nur sechs Titelelemente h1~h6 verwendet.

2. Fußzeilenelement

Das Fußzeilenelement wird hauptsächlich zum Definieren von Fußnoteninhalten für eine Seite oder einen Artikel verwendet, einschließlich der Copyright-Informationen des Artikels, Kontaktinformationen des Autors usw. Eine Seite kann mehrere Fußzeilenelemente enthalten.

Beispiel:

<footer>
   <ul>
     <li>Copyright © 2000-2013 华软 All Rights Reserved</li>
     <li>学院地址：广州.从化.广从大道13号 电话：020-87818918</li>
   </ul>
</footer>　

3. Artikelelement

“ definiert unabhängigen Inhalt, einen unabhängigen Inhalt auf der Seite, der keinen Bezug zum Kontext hat. Zum Beispiel ein Beitrag, ein Blogbeitrag usw.

Der durch das Tag definierte Inhalt muss für sich genommen aussagekräftig und vom Rest des Dokuments unabhängig sein.

Mögliche Quellen für : Forumbeiträge, Blogbeiträge, Nachrichten, Kommentare usw.

Syntaxbeschreibung:

Tag-Paare können Elemente wie Kopfzeile, Fußzeile, Abschnitt und verschachtelte Artikel enthalten.

Beispiel:

<article>
　　<header>
　　　　<h2 id="写给IT职场新人的六个-关于">写给IT职场新人的六个“关于”</h2>
　　</header>
　　<p>
　　　　<b>关于工作地点</b> ...
　　</p>
　　...
</article>

4. Abschnittselement

Abschnittselement Wird verwendet, um einen bestimmten Inhaltsblock auf der Seite zu unterteilen, beispielsweise um den Inhaltsblock weiter in mehrere Teile wie Kapiteltitel, Inhalt und Fußzeile zu unterteilen.

Syntaxbeschreibung:

Das Tag-Paar kann sechs h1~h6-Titelelemente, p-Elemente und mehrere Artikelelemente enthalten.

„Block“ enthält mehrere Artikel. Darüber hinaus können Abschnittselemente verschachtelt werden.

Beispiel:

<article>
　　<header>
　　　　<h2 id="写给IT职场新人的六个-关于">写给IT职场新人的六个“关于”</h2>
　　</header>
　　<section> 
　　　　<h3 id="关于工作地点">关于工作地点</h3>
　　　　<p>...</p>
　　</section>
　　<section> <h3 id="关于企业">关于企业</h3> <p>...</p> </section>
　　...
</article>

5. Navigationselement

Navigationselement Wird verwendet, um verschiedene Navigationsleisten auf der Seite zu definieren. Eine Seite kann mehrere Navigationselemente als Navigation für die gesamte Seite oder verschiedene Teile des Inhalts haben.

Die einzige unmögliche Position für die Navigation liegt innerhalb des Adresselements

Grundlegende Syntax:

<nav><a>#</a><a>#</a><a>#</a></nav>

6. beiseite Element

Das Nebenelement stellt zusätzlich zum Inhalt des Artikelelements Zusatzinformationen zum Inhalt des Artikelelements dar. Es kann Verweise und Seitenleisten enthalten, die sich auf die aktuelle Seite oder das Hauptelement beziehen Inhalte, Anzeigen, Navigationsleisten und andere ähnliche Teile, die sich vom Hauptinhalt unterscheiden.

7. Audio-Audio-Tag

Das Audio-Tag definiert Sound, z. B. Musik oder andere Audiostreams.

Derzeit unterstützt das Audioelement drei Dateiformate: MP3, Wav und Ogg.

<audio></audio>

Eigenschaften Beschreibung

Quell-URL des abzuspielenden Audios

Autoplay Spielen Sie das Audio ab, sobald es bereit ist

Steuerelemente Zeigen Sie dem Benutzer Audiosteuerelemente an, z. B. Wiedergabe /Pause-Tasten

Schleife Wiedergabe neu starten, wenn das Audio endet

Vorladen Audio wird geladen, wenn die Seite geladen wird und zur Wiedergabe bereit ist

8. Video-Video-Tag

Das Video-Tag definiert ein Video, beispielsweise einen Filmclip oder einen anderen Videostream.

Derzeit unterstützt das Videoelement drei Videoformate: MP4, WebM und Ogg.

<video></video>

Eigenschaftsbeschreibung

src Zum Abspielen Die URL des Videos

Breite Legen Sie die Breite des Videoplayers fest

Höhe Legen Sie die Höhe des Videoplayers fest

Autoplay Das Video wird abgespielt, sobald es ist bereit

Steuerelemente Zeigen Sie dem Benutzer Videosteuerelemente an, z. B. Wiedergabe-/Pause-Schaltflächen

Schleife Starten Sie die Wiedergabe erneut, wenn die Wiedergabe der Mediendatei beendet ist

    muted      规定视频的音频输出应该被静音

    poster     规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

    preload    视频在页面加载时进行加载并预备播放，属性值(none:只有单击了Play按钮才加载视频;metadata:仅加载元数据,例如视频长度、作者、版权)

    9. 图形中的 figure 及 figcaption

    元素figure及figcaption实际上不能算作结构性元素，但在组织独立图片、图像、图表及编码列表时仍然很受欢迎。

    每一个figure元素中只能包括一个figcaption元素。图片排列一起可用。百度文库里有篇“绚丽的HTML5 Figure图片字幕标题特效”

    常常用到一种图片列表，图片+标题或者图片+标题+简单描述。

    实例代码：

   

黄浦江上的的卢浦大桥

    figure用来代替原来li标签，P标签谁来取代呢？答案就是：figcaption

    w3c赋予的定义：figcaption 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    那么上面的代码就变成了：

    <figure>
    <figcaption>黄浦江上的的卢浦大桥</figcaption>
    <img  src="/static/imghwm/default1.png" data-src="images/黄浦江上的的卢浦大桥.jpg" class="lazy" alt="HTML5-Dokumentstruktur" >
    </figure>

    效果图如下：

黄浦江上的的卢浦大桥

更多HTML5的文档结构 - 不报错才可怕相关文章请关注PHP中文网！