Teilen Sie mehrere Seitenbeispiele für HTML5-Design und -Modifikation_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Um die neuen semantischen Elemente in HTML5 zu verstehen und sich mit ihnen vertraut zu machen, nehmen Sie am besten ein klassisches HTML-Dokument als Beispiel und bereichern es dann mit einigen frischen Nährstoffen von HTML5. Die folgende Seite ist sehr einfach und enthält nur einen Artikel.

ApocalypsePage_Original.html, dies ist eine Seite mit einem sehr standardisierten Format und alle Stile stammen von externen Stylesheets.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

>
<html lang="zh- CN">
<Kopf>
<meta charset="utf- 8">
<Titel>Apocalypse NowTitel>
<link rel="stylesheet" href="ApocalypsePage_Original.css">
Kopf>
<Körper>
<div class="Header" >
<h1>Wie die Welt untergehen könnteh1>
<p Klasse="Teaser" >Szenarien, die, wie wir wissen, das Ende des Lebens bedeutenp>
<p class="Byline" >von Ray N. Carnationp>
div>
<div class="Inhalt" >
<p><span Klasse="LeadIn">Im Momentspan>, du fühlst dich wahrscheinlich ziemlich gut. Schließlich ist das Leben in der entwickelten Welt angenehm >"style1">—span>wahrscheinlich komfortabler als es für den durchschnittlichen Menschen in der gesamten aufgezeichneten Geschichte war.p> <p>Aber werden nicht zu selbstgefällig. Es gibt immer noch viele schreckliche Möglichkeiten, wie alles auseinanderfallen könnte. In diesem Artikel erfahren Sie mehr über einige unserer Favoriten.

> <h2>

Maya-Weltuntergang

h2> <p>Skeptiker vermuten, dass der Maya-Kalender einfach in eine neue Ära von 5.126 Jahren übergeht nach 2012 und sagt nicht wirklich eine lebensvernichtende Apokalypse voraus. Aber angesichts der Tatsache, dass die längst verstorbenen Mayas in praktisch allem anderen Unrecht hatten, warum sollten wir ihnen in dieser Hinsicht vertrauen?p> <h2>

Roboterübernahme

h2> <p>Nicht ganz so beängstigend wie eine Übernahme durch einen Vampir oder eine Übernahme durch lebende Tote, a Roboteraufstand ist immer noch ein beunruhigender Gedanke. Wir sind durch unsere technischen Geräte bereits zahlenmäßig unterlegen, und selbst Bill Gates hat Angst vor dem Tag, an dem sein japanischer Robotersklave ihn an den Knöcheln umdreht und (mit angemessener Roboterstimme) fragt: „Wer ist jetzt dein Papa?“< /

p> <h2

Unerklärte Singularität

h2>

<p>Wir wissen nicht, wie das Universum begann, also können wir es nicht Stellen Sie sicher, dass es nicht einfach endet, vielleicht heute, und vielleicht mit nichts Aufregenderem als einem Hauch von Antimaterie und einem leichten zischenden Geräusch.p >

<h2>Unkontrollierter Klimawandel h2>

<p>Von einigen abgelehnt, könnte sich Al Gores Unheilsprophezeiung dennoch erfüllen. Wenn das der Fall ist, müssen wir uns möglicherweise mit heftigen Stürmen, weit verbreiteter Nahrungsmittelknappheit und mürrischen Reparaturarbeitern für Klimaanlagen herumschlagen.p>

<h2>Globale Epidemieh2>

<p>Irgendwann in der Zukunft könnte ein tödlicher Virus zuschlagen. Über die Quelle der Krankheit gehen die Vorhersagen auseinander, aber zu den Kandidaten zählen Affen im afrikanischen Dschungel, Bioterroristen, Vögel und Schweine mit der Grippe, Krieger aus der Zukunft, eine außerirdische Rasse, Krankenhäuser, die zu viele Antibiotika verwenden, Vampire, die CIA usw ungewaschen Rosenkohl. Was auch immer die Quelle sein mag, es sind eindeutig schlechte Nachrichten.p>

div>

<p Klasse="Haftungsausschluss" >Diese apokalyptischen Vorhersagen spiegeln nicht die Ansichten des Autors wider.p>

<p>

<a href="Haftungsausschluss. html">Haftungsausschlussa>

<a href="ContactUs. html">Kontaktieren Sie unsa>

div>

Körper>

html>

在不增加任何 CSS 样式表之前，效果如下：

上面通过三个

将页面分成了三个部分，顶部的页眉，中部的内容和底部的页脚.

这个例子中的样式表很简单,整个页面最大宽度设置为 800 像素,避免文本在宽屏显示器上显示过长.页眉位于一个带有蓝色边框的盒子中,内容区的两侧都增加了内边距，而页脚在整个页面的底部居中.

ApocalypsePage_Original.css样式文件内容如下：

XML/HTML-Code复制内容到剪贴板

@charset "utf-8"
/* CSS-Dokument */
Körper{
/*font-family Um sichere Schriftarten zu verwenden, folgen Sie dem Prinzip „Speziell zuerst und dann allgemein“,
Geben Sie zuerst die gewünschte Schriftart ein, dann eine sicherere Schriftart,
Endet schließlich mit serifenloser Schriftart*/
Schriftfamilie: „Lucida sans Unicode“, „Lucida Grande“, Genf, serifenlos
max-width: 800px; /*Die maximale Breite überschreitet nicht 800 Pixel*/
}
/*Titelbereichsstil oben auf der Seite*/
.Header {
Hintergrundfarbe: #7695FE; /*Jeder Farbwert ist akzeptabel*/
Rahmen: dünn #336699 einfarbig; /*All-in-One-Rahmenattribut*/
Innenabstand: 10 Pixel; /* 10 Pixel Innenabstand, der Abstand zwischen dem Rand und dem Inhalt*/
Rand: 10 Pixel; /* 10 Pixel Rand, der Abstand zwischen dem Rand und umgebenden Elementen*/
text-align: center; /*Kopfzeilentext ist zentriert*/
}
/*Titel in der Kopfzeile<h1>Stil*/
.Header h1{
Rand: 0px;
Farbe: weiß;
Schriftgröße: xx-large; /*Präzise Steuerung kann in Pixeln oder EM-Einheiten erfolgen*/
}
/*Header-Untertitelstil*/
.Header .Teaser{
Rand: 0px;
Schriftstärke: fett;
}
/*Signaturzeilenstil in der Kopfzeile*/
.Header .Byline{
Schriftstil: kursiv;
Schriftgröße: klein;
Rand: 0px;
}
.Content{
Schriftgröße: mittel;
Schriftfamilie: Cambria, Cochin, Georgia, „Times New Roman“, Times, Serife;
Rand unten: 2px;
}
.Footer{
text-align: center;
Schriftgröße: x-klein;
}
.Footer .Disclaimer{
Schriftstil: kursiv;
}
.Footer p{
Rand: 3px;
}

Auf diese Weise wurde unser Stylesheet gebogen. Nun wollen wir sehen, was das Ergebnis sein wird. Wie unten gezeigt:

Verwenden Sie HTML5, um die Seite zu erstellen

Immer noch ein unverzichtbares Element im Webdesign, ist es ein intuitiver, vielseitiger Container, der es Ihnen ermöglicht, Stile auf jeden Block auf der Seite anzuwenden. Das Problem mit

ist jedoch, dass es selbst keine Informationen über die Seite widerspiegelt.

Um diese Situation mit HTML5 zu verbessern, ersetzen Sie

durch ein Element mit aussagekräftigerer Semantik.

In ApocalypsePage_Revised.html wurden die Klassenattribute von Header und Footer und

durch

ersetzt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<Kopfzeile>
<h1>Wie die Welt untergehen könnteh1>
<p Klasse="Teaser" >Szenarien, die, wie wir wissen, das Ende des Lebens bedeutenp>
<p class="Byline" >von Ray N. Carnationp>
Header>
...
<Fußzeile>
<p Klasse="Haftungsausschluss" >Diese apokalyptischen Vorhersagen spiegeln nicht die Ansichten des Autors wider.p>
<p>
<a href="AboutUs. html">Über unsa>
...
p>
<p>Copyright © 2014 p>
Fußzeile>

当然, 对应的 ApocalypsePage_Revised.css 文件也需要进行修改, 将其中的 .Header 和 .Footer 替换为 header 和 footer如下:

XML/HTML-Code复制内容到剪贴板

/*Titelbereichsstil oben auf der Seite*/
Kopfzeile {
Hintergrundfarbe: #7695FE; /*Jeder Farbwert ist akzeptabel*/
Rahmen: dünn #336699 einfarbig; /*All-in-One-Rahmenattribut*/
Innenabstand: 10 Pixel; /* 10 Pixel Innenabstand, der Abstand zwischen dem Rand und dem Inhalt*/
Rand: 10 Pixel; /* 10 Pixel Rand, der Abstand zwischen dem Rand und umgebenden Elementen*/
text-align: center; /*Kopfzeilentext ist zentriert*/
}
/*Titel in der Kopfzeile<h1>Stil*/
Header h1{
Rand: 0px;
Farbe: weiß;
Schriftgröße: xx-large; /*Präzise Steuerung kann in Pixeln oder EM-Einheiten erfolgen*/
}

Schließlich gibt es noch ein Element, das in der Beispieldatei verwendet werden muss, nämlich das Element

, das einen vollständigen, in sich geschlossenen Inhalt darstellt.

Das

-Element sollte den Inhalt eines Nachrichtenberichts oder Artikels enthalten, einschließlich Titel, Byline und Text. Die Struktur nach dem Hinzufügen des

-Elements ist also wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<Artikel>
<Kopfzeile>
<h1>Wie die Welt untergehen könnteh1>
<p Klasse="Teaser" >Szenarien, die, wie wir wissen, das Ende des Lebens bedeutenp>
<p class="Byline" >von Ray N. Carnationp>
Kopfzeile>
<div class="Inhalt" >
<p><span Klasse="LeadIn">Im Momentspan>, du fühlst dich wahrscheinlich ziemlich gut. Schließlich ist das Leben in der entwickelten Welt angenehm >"style1">—span>wahrscheinlich komfortabler als es für den durchschnittlichen Menschen in der gesamten aufgezeichneten Geschichte war.p> ... div
Artikel>
重新设计后，页面结构如下：用
添加插图

很多页面都是包含图片的.但是,插图 (Abbildung)但是文本中会提到它.

一般来说插图应该是浮动的,还会有浮动图题.下面是在文章中添加插图的. 标记，在正文的第一段和第二段之间的位置，部分代码如下:

XML/HTML-Code

复制内容到剪贴板

...
<div class="Inhalt" >
<p><span Klasse="LeadIn">Im Momentspan>, du bist ...p>
<div class="FloatFigure" >
<img src="human_skull. jpg" alt="Menschlicher Schädel">
<p>Werden Sie der letzte überstehende Mensch sein, wenn einer dieser apokalyptischen
Szenarien spielen sich ab?p>
div>
<p>Aber werden nicht zu selbstgefällig. Es gibt...p>
...

相应的样式表规则如下：

XML/HTML-Code复制内容到剪贴板

.FloatFigure{
float: links;
Rand: 0px 20px 0px 0px;
}
.FloatFigure p{
maximale Breite: 300 Pixel;
Schriftgröße: klein;
Schriftstil: kursiv;
margin-bottom: 5px;
}

下图展示了这个示例的外观,插图恰好在第一段文本之后,浮动在后面文本的左侧,图题的文本的宽度我们限制住了,让图题显示很充实、很优雅.

HTML5 中提供了一个

元素里，经过改造，代码如下：

XML/HTML-Code复制内容到剪贴板

<figure class="FloatFigure" >

<img src="human_skull. jpg" alt="Menschlicher Schädel">

<figcaption>Werden Sie die letzte Person sein, die noch übrig ist, wenn einer dieser apokalyptischen

Szenarien spielen sich ab?figcaption>

Abbildung>

Natürlich kann der Selektor im Stylesheet entsprechend geändert werden.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

.FloatFigure{

float: links;

Rand: 0px 20px 0px 0px;
}

.FloatFigure figcaption{

maximale Breite: 300px

Schriftgröße: klein;

Schriftstil: kursiv;

Rand unten: 5px;
}

Abschließend kann das Alt-Attribut im -Element gelöscht werden, da der Titel eine vollständige Beschreibung des Bildes enthält.

Fügen Sie eine Notiz mit hinzu

Das neue
-Element stellt Inhalte dar, die nicht in engem Zusammenhang mit dem umgebenden Text stehen. Es kann ein anderes verwandtes Thema einführen oder einen im Hauptdokument angesprochenen Punkt erläutern. Es kann auch zum Platzieren von Werbung und Links zu verwandten Inhalten verwendet werden. Das folgende Beispiel wird als Pull-Zitat verwendet, um diesen Effekt zu erzeugen, aber verwenden Sie das Element
, um das Markup aussagekräftiger zu machen:

Ein Teil des Codes lautet wie folgt:

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

  <p>... (mit geeigneter Roboterstimme) "Wer ist? dein Daddy jetzt?    <aside
class
="PullQuote" >     <img src
="quotes_start. png" alt="Zitat">     Wir wissen nicht, wie das Universum begann, deshalb können wir nicht sicher sicher sein, dass es nicht einfach zu Ende geht, vielleicht heute.      <img
src
="quotes_end. png" alt="Zitat beenden">   beiseite>

   <h2
>Unerklärte Singularität

h2>   对应的样式表内容如下： XML/HTML-Code
复制内容到剪贴板

.PullQuote{
  float: right;

  maximale Breite: 300 Pixel;      Rand oben: dünner schwarzer Vollton;

  border-bottom: dicker schwarzer Vollton;

  Schriftgröße: 30px;

  Linienhöhe: 130 %;

  Schriftstil: kursiv;

  padding-top: 5px;

  padding-bottom: 5px;

  Rand links: 15px;

  margin-bottom: 10px;

}

.PullQuote img{

  vertikal-align: bottom;

}

Verwandte Etiketten：

html5

Quelle：php.cn

Vorheriger Artikel：Tutorial zur Verwendung von Localstorage in HTML5_HTML5-Tutorial-Fähigkeiten Nächster Artikel：Eingehende Analyse der Verwendung von Blob-Objekten in HTML5_html5-Tutorial-Fähigkeiten

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors