Am 10. Juni wurde ein neuer HTML 5-Entwurf (Working Draft) veröffentlicht. Der Herausgeber las kurz die darin bereitgestellte neue Versionsdokumentation und machte sich einige Notizen: 
Der HTML 5-Entwurf wird kein offizieller Standard
Die Veröffentlichung als Arbeitsentwurf bedeutet nicht die Billigung durch die W3C-Mitgliedschaft.
Die Veröffentlichung als „Entwurf“ bedeutet keine Billigung (Unterstützung) durch W3C-Mitglieder.
Die HTML 5-Spezifikation gilt erst dann als abgeschlossen, wenn mindestens zwei vollständige Implementierungen der Spezifikation vorliegen.
Die HTML 5-Spezifikation wird erst dann finalisiert, wenn sie von mindestens zwei Softwareteilen implementiert wurde.
XHTML 1 wurde 1999 veröffentlicht. Es dauerte zwei oder drei Jahre, bis es vollständig unterstützt wurde, und erst vor kurzem, fast zehn Jahre später, wurde es vollständig beworben. Es wird also noch einige Zeit dauern, bis HTML 5 unterstützt wird (insbesondere von „Nicht-Mainstream“-Browsern). Nach dem Zeitplan der HTML-Arbeitsgruppe des W3C wird es bis 2010 keine formelle Fertigstellung geben.
XHTML 1 wurde 1999 veröffentlicht. Es dauerte zwei oder drei Jahre, bis es vollständig unterstützt wurde, und erst vor kurzem, fast zehn Jahre später, wurde es vollständig beworben. Es wird also noch einige Zeit dauern, bis HTML 5 unterstützt wird (insbesondere von „Nicht-Mainstream“-Browsern). Nach dem Zeitplan der HTML-Arbeitsgruppe des W3C wird es bis 2010 keine formelle Fertigstellung geben.
Eine überraschend einfache DOCTYPE-Anweisung
So einfach ist das, ha. Außerdem wird nicht zwischen Groß- und Kleinschreibung unterschieden. Es ist erwähnenswert, dass die Spezifikation erfordert, dass bei der Deklaration dieses DOCTYPE die sogenannte „benutzerdefinierte“ HTML-Syntax (benutzerdefinierte HTML-Syntax, ich weiß nicht, warum sie so heißt)“ verwendet werden kann, was die vorherige ist Typ, der keine Tags erfordert. Geschlossene HTML-Syntax. Gleichzeitig ist weiterhin eine Syntax im XML-Format wie bei XHTML möglich, sodass anstelle des oben genannten der DOCTYPE des XML-Dokuments deklariert werden muss.
Vorwärtskompatibilität
Die HTML 5-Spezifikation enthält keine „veralteten“ Elemente. Der Grund dafür ist, dass sie einerseits von Designern verlangt, bestimmte Elemente nicht auszuprobieren, andererseits aber auch verlangt, dass Browser diese Elemente unterstützen. In diesem Fall soll es meiner Intuition nach alle bisherigen Webseiten unterstützen, die in HTML oder XHTML geschrieben sind. Für Designer ist das ein Segen, da sie sich nicht mehr auf die strenge Syntax von XHTML beschränken müssen.
gelöschtes Element
Natürlich sind diese Elemente relativ zu HTML 4, aber es ist auch ersichtlich, dass HTML 5 keine einfache Regression zu HTML 4 ist. Es hält sich immer noch an einige wichtige Geister von XHTML, wie zum Beispiel reine Schnittstellendarstellungselemente, die aufgegeben werden sollten Verwendung von CSS usw.
Die folgenden Elemente werden verworfen, „weil ihre Wirkung rein präsentationsorientiert ist und daher besser von CSS gehandhabt werden kann“, da es sich um reine Präsentationselemente handelt und durch CSS ersetzt werden sollte:
basefont/big/center/font/s/strike/tt/u
|
Die folgenden Elemente wurden verworfen, „da sich ihre Verwendung negativ auf die Benutzerfreundlichkeit und Zugänglichkeit für den Endbenutzer auswirkte“:
Die folgenden Elemente wurden verworfen, „weil sie nicht oft verwendet wurden, Verwirrung stifteten oder von anderen Elementen verarbeitet werden können“:
| Akronym/Applet/isindex/dir |
HTML-Testdokument:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML-Testdokument</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<Körper>
<h1>HTML-Testdokument</h1>
<ul>
<li>Version: 1.1 </li>
<li>DTD: XHTML 1.0 Übergangsversion</li>
<li>Kodierung: UTF-8</li>
<li>Aktualisiert: 12.06.2008</li>
</ul>
<hr />
<h1><h1> steht für Titel Nummer eins</h1>
<h2><h2> steht für Titel Nummer zwei</h2>
<h3><h3> steht für Titel drei</h3>
<h4><h4> steht für Titel Nummer vier</h4>
<h5><h5> steht für Titel Nr. 5</h5>
<h6><h6> steht für Titel Nr. 6</h6>
<p>Dieser Absatz ist von <p> umschlossen. <p> stellt einen Absatz dar und ist das am häufigsten verwendete Textflussformat. Wir können verschiedene Inline-Text-Tags in Textströmen verwenden. Die am häufigsten verwendeten sind:
<strong> <strong>Erschwert</strong>,
<em><em> Hervorhebung</em>,
<ins><ins> einfügen</ins>,
<del><del> Löschen</del>,
<sub><sub> tiefgestellt</sub>,
<sup><sup> hochgestellt</sup>,
<cite><cite> cite</cite>, <big><big>erhöhen</big>, <small><small>reduzieren</small>. </p>
<pre> Dies ist ein Textstream, der in <pre> enthalten ist.
Die darin enthaltenen Leerzeichen, Tabulatoren, Wagenrückläufe usw. können direkt auf der Webseite angezeigt werden und werden vom Browser nicht automatisch umbrochen. Sie können damit Programmcode anzeigen.
Die vorformatierte Standardeinstellung ist die Verwendung einer Schriftart mit fester Breite. </pre>
<p>Wir können diese Inline-Tags auch verwenden, um Codeausschnitte im Textfluss anzuzeigen:
<code><code>code</code>,
<kbd><kbd>Tastatureingabe</kbd>,
<var><var>Variable</var>,
<samp><samp>Beispielbeispiel</samp>.
</p>
<p>Darüber hinaus sind auch zwei Tags wichtig:</p>
<ul>
<li><abbr>: Beispielsweise ist <abbr title="Mister">Mr.</abbr> die Abkürzung für Mister. Aber dieses Tag scheint im IE ungültig zu sein. </li>
<li><acronym><acronym title=""></acronym>: Beispielsweise ist <acronym title="Hyper Text Markup Language">HTML</acronym> das Akronym für Hyper Text Markup Language (Chinesisch kann es auch sein). Verwenden Sie dieses Tag, zum Beispiel: „<acronym title="Volksrepublik China">China</acronym>“ ist die Abkürzung für „Volksrepublik China“). </li>
</ul>
<blockquote cite="#">
Dieser Absatz ist <blockquote>. Denken Sie daran, das Cite-Attribut in <blockquote> zu verwenden.
</blockquote>
<Adresse>
Dieser Abschnitt ist in <address> enthalten, das zur Anzeige einer E-Mail-Adresse oder einer echten Adresse verwendet werden kann. Beachten Sie, dass es sich um ein Element auf Blockebene handelt, aber standardmäßig keinen Rand oder Abstand hat.
</address>
Der Abschnitt <div> ist in <div> enthalten und hat standardmäßig keinen Stil. Ein weiteres Element mit entsprechendem Status ist <span><span>inline field</span>, das standardmäßig ebenfalls keinen Stil hat. <br />
Vor diesem Satz steht ein <br>, das für Zeilenumbrüche innerhalb des Absatzes verwendet wird. </div> <hr />
<p>Die horizontale Linie oben ist das <hr>-Tag. </p>
<p><a id="a"></a>Diesem Satz geht ein Ankertag voraus, der durch das Tag <a> implementiert wird. </p>
<p><a href="http:///"><a>Bedeutet auch Link</a>. Beachten Sie, dass es vier Pseudoklassen gibt: :link ist ein <a href="http:///">unbesuchter Link</a>, :visited ist ein <a href="#">besuchter Link</a>, : Hover ist ein <a href="http:///">Link, wenn die Maus darüber schwebt</a>, ein :aktiver<a href="http:///">Link, wenn ein Mausklick aktiviert wird</a>. </p>
<p><img width="100" height="100" alt="<img> tag" /> Das Bild ist standardmäßig inline, wir können es aber auch als Block definieren. Und definieren Sie eine .inline-Klasse speziell für img <img width="100" height="30" alt="img.inline" class="inline" />. Außerdem ist der Stil von <img> im Link anders: <a href="#"><img width="60" height="60" alt="<a>" </a>. </p>
<p><object width="200" height="150"><param name="movie" value=""></param></object>
Es gibt auch ein <object>-Tag zum Einfügen von Medien und ein <param>-Tag. </p>
<hr />
<ul>
<li>Die äußere Ebene der ungeordneten Liste ist<ul></li>
<li>Jedes Element in der Liste besteht aus <li></li>
<li>Beachten Sie, dass das <ul>-Tag nur das <li>-Tag enthalten kann
<ul>
<li>Dies ist eine verschachtelte Liste der zweiten Ebene und muss in einem <li></li> platziert werden
<li>Beachten Sie, dass sich die Stile verschachtelter Listenelemente der zweiten Ebene von denen der Liste der ersten Ebene unterscheiden können
<ul>
<li>Dies ist die dritte Ebene und ihr Stil unterscheidet sich von der zweiten Ebene</li>
</ul>
</li>
</ul>
</li>
</ul>
<ol>
<li>Die äußere Ebene der geordneten Liste ist <ol></li>
<li>Jedes Element in der Liste besteht aus <li></li>
<li>Beachten Sie, dass das <ol>-Tag nur das <li>-Tag enthalten kann
<ol>
<li>Dies ist eine verschachtelte Liste der zweiten Ebene und muss in einem <li></li> platziert werden
<li>Beachten Sie, dass sich die Stile verschachtelter Listenelemente der zweiten Ebene von denen der Liste der ersten Ebene unterscheiden können
<ol>
<li>Dies ist die dritte Ebene und ihr Stil unterscheidet sich von der zweiten Ebene</li>
</ol>
</li>
</ol>
</li>
</ol>
<dl>
<dt>Diese Zeile ist<dt></dt>
Die Zeile <dd> ist <dd>. Die äußere Definitionsliste ist <dl>. </dd>
<dt>Hinweis<dt>kann nur Inline-Level-Elemente enthalten</dt>
<dd>Und <dd> kann Elemente auf Inline- oder Blockebene enthalten</dd>
</dl> <hr />
<p>Standard-Tischmodell. Die Spaltenbreite wird durch <colgroup> gesteuert. </p>
<Tabelle>
<Bildunterschrift>
Dies ist <caption>
</caption>
<colgroup>
<col width="30%" />
<col width="50%" />
<col width="20%" />
</colgroup>
<thead>
<tr>
<th>Diese Zeile ist<thead></th>
<th><thead> kann mit <th> verwendet werden
<th>Hier verwenden wir <th></th>
</tr>
</thead>
<tfoot>
<tr>
<td>Die letzte Zeile ist <tfoot></td>
<td><tfoot>Egal wo es platziert wird, es wird immer am Ende angezeigt</td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Die folgenden drei Zeilen sind<tbody>
<td>Sie können eine beliebige Anzahl von<tr></td> eingeben
<td>Hier wird <td></td> verwendet
</tr>
<tr>
<td>Verwenden Sie <col>, um Spalten darzustellen</td>
<td>Die Zelle ganz rechts in dieser Zeile ist eine leere Tabellenzelle ohne Inhalt</td>
<td></td>
</tr>
<tr>
<td>Verwenden Sie <tr>, um Zeilen darzustellen</td>
<td>Die Zelle ganz rechts in der Zeile hat ein&nbsp;</td>
<td> </td>
</tr>
</tbody>
</table>
<hr />
<form action="">
<p><form> Labels können nicht direkt verschiedene Steuerelementlabels enthalten. Sie können <label><label></label> verwenden, um Formularkomponenten zu enthalten
<fieldset>
<legend>Sie können auch die Tags <fieldset> verwenden, um Formulare zu gruppieren. </legend>
<p>Für die CSS-Definitionsmethode des Eingabe-Tags: Verwenden Sie den Wert des Typattributs als Klassennamen, damit verschiedene Eingabesteuerelemente unterschieden werden können. </p>
<p>
<input type="text" class="text" size="20" id="text" value="textfield einzeiliges Textfeld" />
<input type="text" class="text" size="20" id="text_d" value="Deaktiviertes Textfeld für einzeiliges Textfeld" deaktiviert="disabled" />
<label for="text"> input.text </label>
</p>
<p>
<input type="password" class="text" size="20" id="password" value="password password box" />
<input type="password" class="text" size="20" id="password_d" value="Deaktiviertes Passwort-Passwortfeld" deaktiviert="disabled" />
<label for="password"> input.text </label>
</p>
<p>
<input type="submit" class="submit" id="submit" value="submit send button" />
<input type="submit" class="submit" id="submit_d" value="Submit-Schaltfläche deaktiviert" deaktiviert="disabled" />
<label for="submit"> input.submit </label>
</p>
<p>
<input type="reset" class="button" id="reset" value="reset reset button" />
<input type="reset" class="button" id="reset_d" value="Deaktivierter Reset-Reset-Button" deaktiviert="disabled" />
<label for="reset"> input.button </label>
</p>
<p>
<input type="button" class="button" id="button" value="button gewöhnlicher Button" />
<input type="button" class="button" id="button_d" value="Disabled button normal button" invalid="disabled" />
<label for="button"> input.button </label>
</p>
<p>
<input type="image" class="image" size="20" id="image" />
<label for="image"> input.image </label>
</p>
<p>
<input type="image" class="image" size="20" id="image_d" invalid="disabled" />
<label for="image_d">input.image deaktiviert</label>
</p>
<p>
<input name="radio" type="radio" class="radio" id="radio1" geprüft="checked" />
<input name="radio" type="radio" class="radio" id="radio2" />
<label>input.radio </label>
</p>
<p>
<input name="radio" type="radio" class="radio" id="radio1_d" geprüft="checked" deaktiviert="disabled" />
<input name="radio" type="radio" class="radio" id="radio2_d" invalid="disabled" />
<label> deaktivierte input.radio </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1" geprüft="checked" />
<input type="checkbox" class="checkbox" id="checkbox2" />
<label for="checkbox"> input.checkbox </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1_d" geprüft="checked" deaktiviert="disabled" />
<input type="checkbox" class="checkbox" id="checkbox2_d" deaktiviert="disabled" />
<label for="checkbox_d"> input.checkbox deaktiviert </label>
</p>
<p>
<input type="file" class="file" id="file" size="20" value="file selector file selector" />
<label for="file"> input.file </label>
</p>
<p>
<input type="file" class="file" id="file_d" size="20" value="file selector file selector" invalid="disabled" />
<label for="file_d"> input.file deaktiviert </label>
</p>
<p>
<button><img /><button> tag</button>
<button deaktiviert="disabled"><img />Deaktiviertes<button>-Tag</button>
</p>
<p>
<label for="textarea"><textarea>Die Standardausrichtung ist die untere Ausrichtung</label>
<textarea name="textarea" cols="60" rows="5" id="textarea">textarea mehrzeiliges Textfeld.
Es ähnelt auch intern einer Vorformatierung und kann alle Wagenrückläufe und Tabulatorzeichen anzeigen</textarea>
<textarea name="textarea" cols="20" rows="5" id="textarea_b" invalid="disabled">Mehrzeiliges Textfeld von textarea deaktiviert</textarea>
</p>
<p>
<select name="textarea">
<option>Dropdown-Auswahl Dropdown-Auswahl</option>
<optgroup label="Dies ist die erste Gruppe">
<option>Optionen können mit <optgroup></option> gruppiert werden
<option>Und geben Sie den Gruppennamen anhand seines Label-Attributs an</option>
</optgroup>
<optgroup label="Dies ist die zweite Gruppe">
<option>Der Gruppenname ist nur ein Eingabeaufforderungstext, keine Option</option>
</optgroup>
</select>
<select multiple="multiple" name="textarea">
<option>Wenn das Größenattribut von <select> größer als 1 ist oder das Mehrfachattribut angegeben ist</option>
<option>Es wird ein mehrzeiliges Auswahlfeld wie dieses</option>
</select>
<select name="textarea" deaktiviert="disabled">
<option>Dropdown-Feld deaktiviert</option>
<option>Es wird ein mehrzeiliges Auswahlfeld wie dieses</option>
</select>
</p>
</fieldset>
</form> </body>
</html>
|
