[Einleitung] Dieser Artikel ist ein Artikel über Designkonzepte von ued of alimama. Er befasst sich hauptsächlich mit den Designprinzipien für den Einstieg in HTML5, die ich für Freunde in Not lesen kann. Die Ära von HTML5 und CSS3 ist angebrochen. Auf der neuen Taobao-Homepage wurde ausschließlich HTML5 verwendet.

Dieser Artikel ist ein Artikel über Designkonzepte von ued of alimama Freunde in Not können sich auf die Gestaltungsprinzipien für den Einstieg in HTML5 beziehen.

Die Ära von HTML5 und CSS3 ist angebrochen. Die neue Taobao-Homepage 2011 verwendet vollständig HTML5. Der einzige Weg, Veränderungen anzunehmen, besteht darin, Veränderungen anzunehmen. Die Übersetzung des Artikels ist sehr gut. Nachdem ich ihn noch einmal gelesen habe, habe ich das Gefühl, dass ich anderen Kinderschuhentwicklern, insbesondere Front-End-Entwicklern, dringend empfehle, einen Blick darauf zu werfen.
Ich habe nicht nur die Beziehung zwischen HTML4, xhtml1.0, xhtml2.0 und html5 verstanden, sondern auch verstanden, warum HTML5 auftauchte. Gleichzeitig habe ich die Anwendung von HTML5 im Projekt verstärkt.

---------------- ------ ------------------------------------
Die berühmten drei Asimov-Gesetze von Robotern:
Roboter dürfen Menschen nicht schaden oder zusehen, wie Menschen zu Schaden kommen.
Roboter müssen menschlichen Befehlen gehorchen, es sei denn, der Befehl verstößt gegen das Erste Gesetz.
Roboter müssen sich verteidigen, solange sie nicht gegen das erste und zweite Gesetz verstoßen.

---------------- ------ ------------------------------------
Die gleichen Punkte zwischen xhtml1 .0 und html4.0:
Der Inhalt der beiden Spezifikationen ist derselbe;
Alle Elemente sind gleich;
Alle Attribute sind gleich; > xhtml1.0 und html4. 0Der einzige Unterschied:
XHTML 1.0 erfordert die Verwendung von XML-Syntax (strikter Codierungsstil)
//Alle Attribute müssen Kleinbuchstaben verwenden;
//Alle Elemente müssen ebenfalls Kleinbuchstaben verwenden Buchstaben;
/ /Alle Attributwerte müssen in Anführungszeichen gesetzt werden;
//Sie müssen auch daran denken, schließende Tags zu verwenden, und denken Sie daran, selbstschließende Tags für img und br zu verwenden.
Die einzige Änderung zwischen XHTML 1.1 und xhtml1.0:
Markieren Sie das Dokument als XML-Dokument
//XML-Fehlerbehandlungsmodell: Wenn der Parser auf einen Fehler stößt, stoppt er die Analyse.
//Für Browser, die XML nicht verstehen, können Benutzer diese Webseite nicht direkt sehen.
XHTML 2-Funktionen (diese Spezifikation ist nicht vollständig):
Sie verwenden weiterhin das XML-Fehlerbehandlungsmodell und müssen sicherstellen, dass Dokumente als XML-Dokumenttypen gesendet werden.
Absichtlich nicht mehr abwärtskompatibel mit vorhandenen HTML-Versionen , Entwickler und Browser-Anbieter werden es niemals unterstützen.
Wirklich weit verbreitete Designprinzipien:
Seien Sie beim Senden konservativ, seien Sie beim Empfang offen.
//Als Profis werden wir beim Versenden von Dokumenten versuchen, konservativ zu sein, Best Practices anzuwenden und sicherzustellen, dass das Dokument gut formatiert ist.
//Aber aus der Sicht des Browsers müssen sie für den Empfang jedes Dokuments offen sein.

---------------- ------ ------------------------------------

HTML5

1 Web Hypertext wurde 2004 von der Arbeitsgruppe für Anwendungstechnologie (Web Hypertext Application Technology Working Group, WHATWG) vollständig getrennt vom W3C gegründet.
2. W3C gründete 2007 die HTML5-Arbeitsgruppe, um ihre Arbeit auf der Grundlage der Ergebnisse der WHATWG-Arbeit fortzusetzen.

---------------- ------ ------------------------------------

HTML5-Designprinzip eins: unnötige Komplexität vermeiden

Der Code lautet wie folgt:

Code kopieren

1. So schreiben Sie DOCTYPE: //HTML 4.01:

代码如下

复制代码

一、DOCTYPE的写法：
//HTML 4.01：

//XHTML 1.0：

//HTML5：
//

//XHTML 1.0:

代码如下

复制代码

//HTML 4.01：

//XHTML 1.0:

//HTML5:

Diese Schreibmethode löst den Standardmodus des Browsers aus. Hinweis: Doctype ist nicht für Browser geschrieben, Doctype ist für Validatoren geschrieben. Lassen Sie den Validator mein Dokument anhand dieses Dokumenttyps validieren. 2. So schreiben Sie die Zeichenkodierung des angegebenen Dokuments:

Der Code lautet wie folgt	Code kopieren
//HTML 4.01: //XHTML 1.0://HTML5:

Hinweis: Diese Abkürzung gilt nicht nur für die neueste Version des Browsers, sondern gilt auch für Browser, die heute noch von Menschen verwendet werden.
Andere prägnante Schreibmethoden von HTML5:

Der Code lautet wie folgt

Code kopieren

代码如下

复制代码

//无需再写type="text/css"，否则那就是重复自己了

Hello world

bar

Hello world

bar

Hello world

bar

Hello world

/ /Sie müssen den Typ „text/css“ nicht mehr schreiben, sonst wiederholen Sie sich

//Die verwendete Skriptsprache muss nicht mehr geschrieben werden, type= „text/javascript“ HTML5-Designprinzip Zwei: Vorhandenen Inhalt unterstützen
bar

Hallo Welt

代码如下

复制代码

//HTML 4.01 XHTML 1.0:

Headline text

Paragraph text.

//HTML5:

Headline text

Paragraph text.

Hallo Welt

bar

Hallo Welt

代码如下

复制代码

//HTML 4.01 XHTML 1.0:

...

//HTML5:

...

Hallo Welt< /p> Hinweis: HTML5 unterstützt verschiedene vorhandene lose Schreibmethoden. In JavaScript können Sie am Ende jeder Anweisung ein Semikolon hinzufügen, dies ist jedoch nicht erforderlich, da JavaScript automatisch ein Semikolon einfügt ... JSlint ist in der Tat ein großartiges Tool, das den JavaScript-Codierungsstil standardisiert und vereinheitlicht, was sehr hilfreich ist nützlich in Teamprojekten, es funktioniert. ---------------- ------ ------------------------------------HTML5-Designprinzip drei: Lösen realer ProblemeFügen Sie einen Link zum gesamten Inhaltsblock hinzu (einschließlich mehrerer Elemente auf Blockebene)

Der Code lautet wie folgt

Code kopieren

//HTML 4.01 XHTML 1.0:

Überschriftentext

Absatztext.< /a>

//HTML5:

Überschriftentext

Absatztext.

< /a>Hinweis: Diese Schreibweise gibt es eigentlich schon seit langem. Sie existiert im Browser, aber früher war es illegal, sie auf diese Weise zu schreiben. Jetzt haben wir den Standard geändert und erlauben Ihnen, sie auf diese Weise zu schreiben. ---------------- ------ ------------------------------------HTML5-Designprinzip vier: Wahrheit suchen und pragmatisch sein Die neuen semantischen Elemente umfassen Kopfzeile, Fußzeile, Abschnitt, Artikel...

Der Code lautet wie folgt

Code kopieren

//HTML 4.01 XHTML 1.0: < p id="main">...

//HTML5:

...

Hinweis: Die neuen Elemente section, Article, aside und nav stellen ein neues Inhaltsmodell dar, ein beispielloses Inhaltsmodell in HTML – die Partitionierung von Inhalten.
Die Verwendung neuer Elemente als Alternativen zu Klassen ist wertvoller, da diese Elemente nicht nur einmal auf einer Seite, sondern mehrfach verwendet und verschachtelt werden können.
Man kann sagen, dass der häufigste Abschnitt derjenige ist, der für den Inhalt am relevantesten ist. Und Artikel ist eine besondere Art von Abschnitt. Daneben gibt es einen speziellen Abschnitt. Schließlich ist Nav auch ein spezieller Abschnitt.
/

Der Code lautet wie folgt

Code kopieren

代码如下

复制代码

/HTML 4.01 XHTML 1.0:

...

//HTML5:

...

/HTML 4.01 XHTML 1.0:

...

...
< /p>

...

代码如下	复制代码
input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"

//HTML5:
< section class= "item">

...

Hinweis: In HTML5, solange Sie einen neuen Inhaltsblock erstellen, unabhängig von Abschnitt, Artikel, Seite , nav, Unabhängig davon, ob es sich um andere Elemente handelt, können Sie H1 darin verwenden und müssen sich keine Gedanken darüber machen, auf welcher Ebene der Titel in diesem Block auf der gesamten Seite platziert werden soll. H2, H3 ist kein Problem.

---------------- ------ ------------------------------------
HTML5-Designprinzip fünf: Sanfter Abbau
Allmählich Die Kehrseite der Verbesserung ist ein sanfter Abbau.

Verwenden Sie das Typattribut, um das Formular zu erweitern:

Der Code lautet wie folgt

Code kopieren
input type="number"input type="search"input type= "range"input type="email"input type="date"input type="url"

Bemerkungen : Bestehende Browser können diese neuen Typwerte nicht verstehen, aber wenn sie einen Typwert sehen, den sie nicht verstehen, interpretieren sie den Typwert als Text. HTML5 fügt außerdem neue Attribute zu Eingabeelementen hinzu, z. B. Platzhalter (Platzhalter), mit denen Text im Textfeld vorab platziert wird. Für die Implementierung ist kein JavaScript erforderlich, es ist perfekt. ---------------- ------ ------------------------------------HTML5-Video vs. Flash Video (Videoelement):

Der Code lautet wie folgt	Code kopieren
td>

Hinweis: Beides sollte berücksichtigt werden, egal ob HTML5 oder Flash:Wenn der Browser Videoelemente unterstützt Es unterstützt auch H264. Es gibt nichts zu sagen, verwenden Sie einfach First Video. Wenn der Browser das Videoelement und Ogg unterstützt, verwenden Sie das zweite Video. Wenn der Browser das Videoelement nicht unterstützt, sollten Sie Flash-Video ausprobieren. Wenn der Browser weder das Videoelement noch Flash unterstützt, stelle ich auch einen Download-Link zur Verfügung. Folgen Sie einem anderen Designprinzip, dem Metcalfe-Gesetz:

Das obige ist der detaillierte Inhalt vonAnalyse der Designprinzipien für den Einstieg in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!