Une nouvelle version HTML 5 (Working Draft) a été publiée le 10 juin. L'éditeur a lu brièvement la documentation de la nouvelle version fournie par celui-ci et a pris quelques notes : 
Le brouillon HTML 5 ne devient pas une norme officielle
La publication en tant que version de travail n'implique pas l'approbation des membres du W3C.
La publication en tant que « projet » n'implique pas l'approbation (le soutien) des membres du W3C.
La spécification HTML 5 ne sera pas considérée comme terminée avant qu'il n'y ait au moins deux implémentations complètes de la spécification.
La spécification HTML 5 ne sera finalisée que lorsqu'au moins deux logiciels l'auront implémentée.
XHTML 1 a été publié en 1999. Il a fallu deux ou trois ans avant qu'il soit entièrement pris en charge, et ce n'est que récemment, près de dix ans plus tard, qu'il a été pleinement promu. Il faudra donc un certain temps avant que HTML 5 soit pris en charge (en particulier par les navigateurs « non traditionnels »). Selon le calendrier du groupe de travail HTML du W3C, il n'y aura pas de finalisation formelle avant 2010.
XHTML 1 a été publié en 1999. Il a fallu deux ou trois ans avant qu'il soit entièrement pris en charge, et ce n'est que récemment, près de dix ans plus tard, qu'il a été pleinement promu. Il faudra donc un certain temps avant que HTML 5 soit pris en charge (en particulier par les navigateurs « non traditionnels »). Selon le calendrier du groupe de travail HTML du W3C, il n'y aura pas de finalisation formelle avant 2010.
Une instruction DOCTYPE étonnamment simple
C'est aussi simple que ça, ha. De plus, il n’y a aucune distinction entre les majuscules et les minuscules. Il est à noter que la spécification exige que si ce DOCTYPE est déclaré, la "syntaxe HTML 'personnalisée' (syntaxe HTML personnalisée, je ne sais pas pourquoi on l'appelle ainsi)" puisse être utilisée, qui est la précédente type qui ne nécessite pas de balises. Syntaxe HTML fermée. Dans le même temps, il autorise toujours la syntaxe du format XML comme XHTML, de sorte que le DOCTYPE du document XML doit être déclaré au lieu de celui ci-dessus.
Compatibilité ascendante
La spécification HTML 5 ne comporte pas d'éléments « obsolètes ». La raison en est que, d'une part, elle oblige les concepteurs à ne pas essayer certains éléments, mais d'autre part, elle oblige les navigateurs à prendre en charge ces éléments. Dans ce cas, selon mon intuition, il est destiné à prendre en charge toutes les pages Web précédentes écrites en HTML ou XHTML. C'est une bénédiction pour les concepteurs. Enfin, ils ne doivent plus être limités par la syntaxe stricte du XHTML.
élément supprimé
Bien sûr, ces éléments sont relatifs à HTML 4, mais on voit aussi que HTML 5 n'est pas une simple régression vers HTML 4. Il adhère toujours à certains esprits importants de XHTML, comme les éléments de présentation d'interface pure doivent être abandonnés, tandis que en utilisant CSS, etc.
Les éléments suivants sont supprimés « car leur effet est purement présentationnel et donc mieux géré par CSS » car ce sont des éléments purement présentationnels et doivent être remplacés par CSS :
basefont/big/center/font/s/strike/tt/u
|
Les éléments suivants ont été supprimés « car leur utilisation affectait négativement la convivialité et l'accessibilité pour l'utilisateur final » :
| cadre/ensemble de cadres/sans cadres |
Les éléments suivants ont été supprimés « parce qu'ils n'ont pas été souvent utilisés, ont créé de la confusion ou peuvent être gérés par d'autres éléments » :
| acronyme/applet/isindex/dir |
Document de test HTML :
<!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">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document de test HTML</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</tête>
<corps>
<h1>Document de test HTML</h1>
<ul>
<li>Version : 1.1 </li>
<li>DTD : transition XHTML 1.0</li>
<li>Encodage : UTF-8</li>
<li>Mise à jour : 2008-6-12</li>
</ul>
<heure />
<h1><h1> représente le titre numéro un</h1>
<h2><h2> représente le titre numéro deux</h2>
<h3><h3> représente le titre trois</h3>
<h4><h4> représente le titre numéro quatre</h4>
<h5><h5> représente le titre n°5</h5>
<h6><h6> représente le titre n°6</h6>
<p>Ce paragraphe est entouré de <p>. <p> représente un paragraphe et est le format de flux de texte le plus couramment utilisé. Nous pouvons utiliser diverses balises de texte en ligne dans les flux de texte. Les plus couramment utilisés sont :
<strong> <strong>Aggravé</strong>,
<em><em> Souligné</em>,
<ins><ins> insérer</ins>,
<del><del> Supprimer</del>,
<sub><sub> indice</sub>,
<sup><sup> exposant</sup>,
<cite><cite> cite</cite>, <big><big>augmenter</big>, <small><small>réduire</small>. </p>
<pre> Il s'agit d'un flux de texte contenu par <pre>.
Les espaces, tabulations, retours chariot, etc. qu'il contient peuvent être directement affichés sur la page Web et ne seront pas automatiquement enveloppés par le navigateur. Vous pouvez l'utiliser pour afficher le code du programme.
La valeur par défaut du préformatage consiste à utiliser une police à largeur fixe. </pre>
<p>Nous pouvons également utiliser ces balises en ligne pour afficher des extraits de code dans le flux de texte :
<code><code>code</code>,
<kbd><kbd>Entrée au clavier</kbd>,
<var><var>Variable</var>,
<samp><samp>exemple d'exemple</samp>.
</p>
<p>De plus, deux balises sont également importantes :</p>
<ul>
<li><abbr> : par exemple, <abbr title="Mister">M.</abbr> est l'abréviation de Monsieur. Mais cette balise semble invalide dans IE. </li>
<li><acronym><acronym title=""></acronym> : par exemple, <acronym title="Hyper Text Markup Language">HTML</acronym> est l'acronyme de Hyper Text Markup Language (le chinois peut également be Utilisez cette balise, par exemple : "<acronym title="République populaire de Chine">Chine</acronym>" est l'abréviation de "République populaire de Chine"). </li>
</ul>
<blockquote cite="#">
Ce paragraphe est <blockquote>. N'oubliez pas d'utiliser l'attribut cite dans <blockquote>.
</blockquote>
<adresse>
Cette section est contenue par <adresse>, qui peut être utilisée pour afficher une adresse e-mail ou une adresse réelle. Notez qu'il s'agit d'un élément de niveau bloc, mais qu'il n'a ni marge ni remplissage par défaut.
</adresse>
La section <div> est contenue par <div>. <div> est un élément de niveau bloc et n'a aucun style par défaut. Un autre élément avec son statut équivalent est le <span><span>champ en ligne</span>, qui n'a pas non plus de style par défaut. <br />
Il y a un <br> devant cette phrase, qui est utilisé pour les sauts de ligne dans le paragraphe. </div> <heure />
<p>La ligne horizontale ci-dessus correspond à la balise <hr> </p>
<p><a id="a"></a>Cette phrase est précédée d'une balise d'ancrage implémentée par la balise <a>. </p>
<p><a href="http:///"><a>Signifie également lien</a>. Notez qu'il comporte quatre pseudo-classes : :link est un <a href="http:///">lien non visité</a>, :visited est un <a href="#">lien visité</a>, : le survol est un <a href="http:///">lien lorsque la souris survole</a>, :active<a href="http:///">un lien lorsque le clic de la souris est activé</a> . </p>
<p><img width="100" height="100" alt="<img> tag" /> L'image est en ligne par défaut, mais nous pouvons également la définir comme bloc. Et définissez une classe .inline spécifiquement pour img <img width="100" height="30" alt="img.inline" class="inline" />. De plus, le style de <img> dans le lien est différent <a href="#"><img width="60" height="60" alt="<img>" dans <a> </a>. </p>
<p><object width="200" height="150"><param name="movie" value=""></param></object>
Il existe également une balise <object> pour insérer un média et une balise <param> </p>
<heure />
<ul>
<li>La couche externe de la liste non ordonnée est <ul></li>
<li>Chaque élément de la liste se compose de <li></li>
<li>Notez que la balise <ul> ne peut contenir que directement la balise <li>
<ul>
<li>Il s'agit d'une liste imbriquée de deuxième niveau qui doit être placée dans un <li></li>
<li>Notez que les styles des éléments de liste imbriqués de deuxième niveau peuvent être différents de ceux de la liste de premier niveau.
<ul>
<li>Il s'agit du troisième niveau et son style est différent de celui du deuxième niveau</li>
</ul>
</li>
</ul>
</li>
</ul>
<ol>
<li>La couche externe de la liste ordonnée est <ol></li>
<li>Chaque élément de la liste se compose de <li></li>
<li>Notez que la balise <ol> ne peut contenir que directement la balise <li>
<ol>
<li>Il s'agit d'une liste imbriquée de deuxième niveau qui doit être placée dans un <li></li>
<li>Notez que les styles des éléments de liste imbriqués de deuxième niveau peuvent être différents de ceux de la liste de premier niveau.
<ol>
<li>Il s'agit du troisième niveau et son style est différent de celui du deuxième niveau</li>
</ol>
</li>
</ol>
</li>
</ol>
<dl>
<dt>Cette ligne est<dt></dt>
La ligne <dd> est <dd>. La liste de définitions externe est <dl>. </dd>
<dt>Remarque<dt>ne peut contenir que des éléments de niveau en ligne</dt>
<dd>Et <dd> peut contenir des éléments en ligne ou au niveau du bloc</dd>
</dl> <heure />
<p>Modèle de table standard. La largeur de la colonne est contrôlée par <colgroup> et <col>. </p>
<tableau>
<légende>
Ceci est <légende>
</légende>
<groupecol>
<col width="30%" />
<col width="50%" />
<col width="20%" />
</colgroup>
<tête>
<tr>
<th>Cette ligne est<thead></th>
<th><thead> peut être utilisé avec <th> ou <td></th>
<th>Ici, nous utilisons <th></th>
</tr>
</tête>
<pied>
<tr>
<td>La dernière ligne est <tfoot></td>
<td><tfoot>Peu importe où il est placé, il sera toujours affiché à la fin</td>
<td></td>
</tr>
</tfoot>
<corps>
<tr>
<td>Les trois lignes suivantes sont<tbody>
<td>Vous pouvez mettre n'importe quel nombre de<tr></td>
<td>Ce qui est utilisé ici est<td></td>
</tr>
<tr>
<td>Utilisez <col> pour représenter les colonnes</td>
<td>La cellule la plus à droite de cette ligne est une cellule de tableau vide sans contenu</td>
<td></td>
</tr>
<tr>
<td>Utilisez <tr> pour représenter les lignes</td>
<td>La cellule la plus à droite de la ligne comporte un&nbsp;</td>
<td> </td>
</tr>
</tbody>
</table>
<heure />
<formulaire d'action="">
Les étiquettes <p><form> ne peuvent pas contenir directement diverses étiquettes de contrôle. Vous pouvez utiliser <label><label></label> pour contenir des composants de formulaire,</p>
<ensemble de champs>
<legend>Vous pouvez également utiliser les balises <fieldset> et <legend> </légende>
<p>Pour la méthode de définition CSS de la balise d'entrée : utilisez la valeur de l'attribut type comme nom de classe, afin de pouvoir distinguer les différents contrôles d'entrée. </p>
<p>
<input type="text" class="text" size="20" id="text" value="textfield zone de texte sur une seule ligne" />
<input type="text" class="text" size="20" id="text_d" value="Zone de texte sur une seule ligne de champ de texte désactivée" désactivé="disabled" />
<label for="text"> input.text </label>
</p>
<p>
<input type="password" class="text" size="20" id="password" value="mot de passe mot de passe" />
<input type="password" class="text" size="20" id="password_d" value="Boîte de mot de passe désactivée" désactivé="disabled" />
<label for="password"> input.text </label>
</p>
<p>
<input type="submit" class="submit" id="submit" value="soumettre le bouton de soumission" />
<input type="submit" class="submit" id="submit_d" value="Bouton de soumission désactivé" désactivé="disabled" />
<label for="submit"> input.submit </label>
</p>
<p>
<input type="reset" class="button" id="reset" value="reset réinitialiser le bouton" />
<input type="reset" class="button" id="reset_d" value="Bouton de réinitialisation désactivé" désactivé="disabled" />
<label for="reset"> input.button </label>
</p>
<p>
<input type="bouton" class="bouton" id="bouton" value="bouton bouton ordinaire" />
<input type="button" class="button" id="button_d" value="Bouton désactivé bouton normal" désactivé="disabled" />
<label for="bouton"> entrée.bouton </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" désactivé="disabled" />
<label for="image_d"> input.image désactivé</label>
</p>
<p>
<input name="radio" type="radio" class="radio" id="radio1" vérifié="checked" />
<input name="radio" type="radio" class="radio" id="radio2" />
<label>entrée.radio </label>
</p>
<p>
<input name="radio" type="radio" class="radio" id="radio1_d" vérifié="checked" désactivé="disabled" />
<input name="radio" type="radio" class="radio" id="radio2_d" désactivé="disabled" />
<label> désactivé input.radio </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1" vérifié="checked" />
<input type="checkbox" class="checkbox" id="checkbox2" />
<label for="checkbox"> input.checkbox </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1_d" vérifié="checked" désactivé="disabled" />
<input type="checkbox" class="checkbox" id="checkbox2_d" désactivé="disabled" />
<label for="checkbox_d"> input.checkbox désactivé </label>
</p>
<p>
<input type="file" class="file" id="file" size="20" value="sélecteur de fichier sélecteur de fichier" />
<label for="file"> input.file </label>
</p>
<p>
<input type="file" class="file" id="file_d" size="20" value="sélecteur de fichier sélecteur de fichier" désactivé="disabled" />
<label for="file_d"> désactivé input.file </label>
</p>
<p>
<bouton><img /><bouton> balise</bouton>
<button Disabled="disabled"><img />Désactivé<bouton>
</p>
<p>
<label for="textarea"><textarea>La valeur par défaut est l'alignement vers le bas</label>
<textarea name="textarea" cols="60" rows="5" id="textarea">zone de texte multiligne textarea.
Il est également similaire à un préformat en interne et peut afficher tous les retours chariot et caractères de tabulation</textarea>
<textarea name="textarea" cols="20" rows="5" id="textarea_b" Disabled="disabled">Zone de texte multiligne de zone de texte désactivée</textarea>
</p>
<p>
<select name="textarea">
<option>sélecteur déroulant sélecteur déroulant</option>
<optgroup label="Ceci est le premier groupe">
<option>Les options peuvent être regroupées à l'aide de <optgroup></option>
<option>Et spécifiez le nom du groupe par son attribut label</option>
</groupe optant>
<optgroup label="Ceci est le deuxième groupe">
<option>Le nom du groupe n'est qu'un texte d'invite, pas une option</option>
</groupe optant>
</sélectionner>
<select multiple="multiple" name="textarea">
<option>Lorsque l'attribut size de <select> est supérieur à 1 ou que l'attribut multiple est spécifié</option>
<option>Cela deviendra une boîte de sélection multiligne comme celle-ci</option>
</sélectionner>
<select name="textarea" désactivé="disabled">
<option>Boîte déroulante Désactivé</option>
<option>Cela deviendra une boîte de sélection multiligne comme celle-ci</option>
</sélectionner>
</p>
</fieldset>
</form> </corps>
</html>
|
