简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > H5-Tutorial > Hauptteil

Detaillierte Erläuterung der HTML5-CSS3-Anwendungs-_HTML5-Tutorialfähigkeiten

WBOY
Freigeben： 2016-05-16 15:48:21
Original
1439 Leute haben es durchsucht

Webdesigner können mit HTML4 und CSS2.1 einige coole Dinge erreichen. Wir können die logische Struktur von Dokumenten vervollständigen und inhaltsreiche Websites erstellen, ohne das alte tabellenbasierte Layout zu verwenden. Wir können unserer Website ein schönes und subtiles Design hinzufügen, ohne Inline-Tags zu verwenden. Tatsächlich haben uns unsere aktuellen Designfähigkeiten weit von dieser schrecklichen Ära der Browserkriege, proprietären Protokolle und dieser hässlichen Webseiten voller Flackern, Scrollen und Blitzen entfernt.

Obwohl wir mittlerweile häufig HTML4 und CSS2.1 verwenden, können wir es noch besser machen! Wir können unseren Code umstrukturieren und unseren Seitencode semantischer gestalten. Wir können die Menge an Styling-Code reduzieren, der Seiten ein schönes Aussehen verleiht, und sie skalierbarer machen. Jetzt warten HTML5 und CSS3 sehnsüchtig auf uns. Mal sehen, ob sie unser Design wirklich auf die nächste Stufe bringen können...

In der Vergangenheit verwendeten Designer häufig tabellenbasierte Layouts ohne jegliche Semantik. Aber am Ende akzeptierten intelligente Designer dank Innovatoren wie Jeffrey Zeldman und Eric Meyer langsam das relativ semantischere

-Layout anstelle des Tabellenlayouts und begannen, externe Stylesheets aufzurufen. Aber leider erfordert komplexes Webdesign viele unterschiedliche Tag-Strukturcodes, wir nennen es „
-Suppe“-Syndrom. Vielleicht kennen Sie den folgenden Code:


Code kopierenDer Code lautet wie folgt:


Div Soup Demonstration



Lorem ipsum text bla bla.

Lorem ipsum text bla bla.

Lorem ipsum text bla bla.


Tags: HMTL, code, demo


class=" aside">

Tangential Information

Inhalt"> ;

Lorem ipsum Text bla bla bla.


Lorem ipsum Text bla bla bla.


Lorem ipsum text bla bla.









Obwohl dies etwas zurückhaltend ist, kann das obige Beispiel dennoch veranschaulichen, dass die Verwendung von HTML4 zum Codieren eines komplexen Designs immer noch zu aufgebläht ist (tatsächlich ist xHTML1.1 nichts weiter als das). Aber das Spannende ist, dass HTML5 das „
-Suppe“-Syndrom löst und uns einen neuen Satz struktureller Elemente bietet. Diese neuen HTML5-Elemente verfügen über eine detailliertere Semantik, um diese bedeutungslosen
-Tags zu ersetzen, und bieten gleichzeitig „natürliche“ CSS-Hooks für CSS-Aufrufe.

Das Folgende ist ein Beispiel für eine HTML5-Lösung:





Code kopieren


Der Code lautet wie folgt:




Div Suppenvorführung


Gepostet am 11. Juli 2009




Lorem ipsum Text bla bla bla.


Lorem ipsum Text bla bla bla.


Lorem ipsum Text bla bla bla.




Tags: HMTL, Code, Demo






Tangentiale Informationen




Lorem ipsum Text bla bla bla.


Lorem ipsum Text bla bla bla.


Lorem ipsum Text bla bla bla.




Tags: HMTL, Code, Demo






正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的

标签.这种语义化的特性不仅提升了我们网页的质量和语义事实上, CSS3也是可以然通过我们忽略掉所有class和id 的.

跟class属性说再见，欢迎整洁的标签　　

     5的能量,我们将得到更多的对文档代码的控制权,有了CSS3的能量，我们的控制权将趋于无穷大！

　　即使没有那些高级的CSS选择器,我们仍然可以通过强大的HTML5条调用不同的容器而不劳驾class和id这类属性.像以往的DIV布局,我们在css中可能要这样调用: div #news    {}


复制代码
代码如下:

div.section {}
div .article {}
div.header {}
div.content {}
div.footer {}
div.aside {}

我们再来看看基于HTML5的实例: Abschnitt {}


复制代码
代码如下:

article {}
header {}
Fußzeile {}
beiseite {}

Das ist ein Fortschritt, aber es gibt noch einige Probleme, die gelöst werden müssen. In der
-Instanz müssen wir das Element auf der Seite über das Klassen- oder ID-Attribut aufrufen. Diese Logik ermöglicht es uns, Stile auf jedes Element im Dokument anzuwenden, sei es als Ganzes oder einzeln. Im
-Beispiel lassen sich beispielsweise die Elemente .section und .content einfach positionieren. Im HTML5-Beispiel gibt es jedoch viele Abschnittselemente im eigentlichen Dokument. Eigentlich könnten wir einige spezifische Attributselektoren hinzufügen, um diese verschiedenen Abschnittselemente aufzurufen, aber zum Glück habe ich jetzt nicht ein paar erweiterte CSS-Selektoren, um auf verschiedene Abschnittselemente abzuzielen.

Verwenden Sie Klasse und ID nicht, um HTML-5-Elemente zu finden

Schauen wir uns nun an, wie man eine Instanz eines HTML5-Seitenelements findet, ohne Klasse und ID zu verwenden. Wir können drei CSS-Selektoren verwenden, um Elemente in der Instanz zu finden und zu identifizieren. Wie folgt:

Nachkommenselektor: [CSS 2.1]: EF
Geschwisterselektor: [CSS 2.1]: E F
Kinderselektor: [CSS 2.1]: E > F

Sehen wir uns an, wie man die Abschnittselemente im Dokument positioniert, ohne Klasse und ID zu verwenden:

Suchen Sie das äußerste -Element

Da es sich bei unserem Beispiel nicht um einen vollständigen Satz HTML5-Code handelt, gehen wir davon aus, dass sich unter dem Element ein Element

befindet. In diesem Fall können wir den äußersten
finden, wie im folgenden Code gezeigt:


Code kopieren
Der Code lautet wie folgt:

Körpernavigationsabschnitt {}

Suchen Sie das nächste -Element

Als einziges unmittelbares Teilmengenelement unter dem äußersten

-Element kann dieses
-Element wie folgt positioniert werden:


Code kopieren
Der Code lautet wie folgt:

Abschnitt>Abschnitt {}

Positionieren Sie das

-Element

Es gibt viele Möglichkeiten, das Element

zu finden, aber die einfachste Methode ist natürlich der Nachkommenselektor:


Code kopieren
Der Code lautet wie folgt:

Abschnitt Abschnitt Artikel {}

Positionierung der Elemente

,

Diese drei Elemente erscheinen jeweils an zwei Stellen, eines im
-Element, das andere im
Verwandte Etiketten：
css3 html5
Quelle：php.cn
Vorheriger Artikel：HTML5-Websockets-Vollduplex-Kommunikation, detailliertes Lernbeispiel_HTML5-Tutorial-Fähigkeiten Nächster Artikel：HTML5 implementiert WeChat-Masturbationsspiel_html5-Tutorialfä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
Aktuelle Ausgaben
Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
Aus 2024-04-06 15:33:12
0
1
433
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
Aus 2024-04-02 11:47:56
0
1
275
Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
Aus 2024-04-01 20:42:38
0
1
259
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！