Commentaire: HTML5 ajoute également des éléments au niveau des blocs purement sémantiques: à part la boîte de dialogue de figure, j'utilise les deux premiers éléments de mes articles et livres. Le troisième élément que je n'utilise pas souvent, il est principalement utilisé dans le texte écrit. Mis à part l'élément représente la description, les invites, les barres latérales, les citations, les commentaires supplémentaires, etc., c'est-à-dire le contenu en dehors de la ligne principale du récit. Par exemple, dans le développeur
HTML5 ajoute également des éléments au niveau des blocs purement sémantiques:Mincièrement la boîte de dialogue Figure
J'utilise les deux premiers éléments de mes articles et livres. Le troisième élément que je n'utilise pas souvent, il est principalement utilisé dans le texte écrit.
de côté
L'élément de côté représente la description, les invites, les barres latérales, les citations, les commentaires supplémentaires, etc., c'est-à-dire le contenu en dehors de la ligne principale du récit. Par exemple, dans les articles DeveloperWorks, vous voyez souvent des barres latérales écrites sous forme de tableau, voir le code 3, la barre latérale DeveloperWorks écrite en HTML4.
<TableALIGN = Rightborder = 0CellPadding = 0Cellpacing = 0Width = 40%>
<tbody> <tr> <tdwidth = 10>
<imgalt = src = // www.ibm.com/i/c.gifheight=1Width=10> </td>
<TD>
<TableBorder = 1CellPadding = 5Cellpacing = 0Width = 100%>
<tbody> <tr> <tdbgcolor = # eeeeee>
<p> <aname = xf-valeur> <panclass = smallTitle> .xf-Value </span> </a> </p>
<p>
Le <deType = inline> .xf-valeur </code> sélectoriel héritage
fieldValueButNotitsLabel.Ce
avec thecurrentcss3Draft.
<CodeType = Inline> :: Valeur </code> Pseudo-ClassinSteadlikeso:
</p>
<TableBorder = 0CellPadding = 0Cellpacing = 0Width = 100%>
<tbody> <tr> <tdclass = code-outline>
<préclass = displaycode> entrée :: valeur {width: 20em;}
#ccNumber :: Value {largeur: 18em}
#zip :: valeur {largeur: 12em}
#State :: Value {width: 3em} </ Pre>
</td> </tr> </ tbody> </ table> <br>
<p>
Cependant, Firefox n'a pas de Tyetsupport ThisSyntax.
</p>
</td> </tr> </ table>
Dans HTML5, vous pouvez écrire cette barre latérale d'une manière plus significative, voir la barre latérale Code 4 DeveloperWorks écrite en HTML5.
<à part
<h3> .xf-valeur </h3>
<p>
Le <deType = inline> .xf-valeur </code> sélectoriel héritage
fieldValueButNotitsLabel.Ce
avec thecurrentcss3Draft.
<CodeType = Inline> :: Valeur </code> Pseudo-ClassinSteadlikeso:
</p>
<préclass = displaycode> entrée :: valeur {width: 20em;}
#ccNumber :: Value {largeur: 18em}
#zip :: valeur {largeur: 12em}
#State :: Value {width: 3em} </ Pre>
<p>
Cependant, Firefox n'a pas de Tyetsupport ThisSyntax.
</p>
</roprows>
Le navigateur peut décider où mettre cette barre latérale (peut nécessiter un petit code CSS).
Chiffre
L'élément de figure représente une image au niveau des blocs et peut également inclure des descriptions. Par exemple, dans de nombreux articles DeveloperWorks, vous pouvez voir que le résultat de l'étiquetage du code 5 du diagramme de développeurs écrit en HTML4 est illustré à la figure 1.
<name = Fig2> <b> Figure2.InstallMozillaxFormsDialog </b> </a> <br/>
<imgalt = awebsiteisrequestingPermissingoInstallThefollowingIntem:
Mozillaxforms0.7unsigné
src = installDialog.jpgborder = 0Height = 317Hspace = 5VSpace = 5Width = 331 />
<br/>
Figure 1. InstallMozillaxFormsDialog
Dans HTML5, vous pouvez écrire ce diagramme d'une manière plus sémantique, voir le diagramme de développement du code 6 écrit en HTML5.
<FiggeID = Fig2>
<gend> Figure2.InstallmozillaxformSDialog </gend>
<imgalt = awebsiteisrequestingPermissingoInstallThefollowingIntem:
Mozillaxforms0.7unsigné
src = installDialog.jpgborder = 0Height = 317Hspace = 5VSpace = 5Width = 331 />
</ figure>
Plus important encore, les navigateurs (en particulier les lecteurs d'écran) peuvent clairement associer des images et des descriptions.
Les éléments de la figure peuvent non seulement afficher des images. Vous pouvez également l'utiliser pour spécifier des éléments audio, vidéo, iframe, objet et intégration.
dialogue
L'élément de dialogue représente une conversation entre plusieurs personnes. L'élément HTML5DT peut représenter le haut-parleur, et l'élément HTML5DD peut représenter le contenu de la parole. Ainsi, les conversations peuvent également être affichées de manière raisonnable dans les anciens navigateurs. Le code 7 montre une conversation célèbre sur le dialogue de Galileo sur les deux chieques.
Code 7. Dialogue galiléen écrit en html5
<Avogue>
<dt> Simplicius </dt>
<dd> selon TheSightlineaf,
et non selon la courbe, tel que ce n'est que
fosuhause. </dd>
<dt> sagredo </dt>
<DD> ButishouldTaKenewitherofthem,
voir que thestraightlineafrunsobliquely.ishould
DrawlinePendiculaire TOCD, Forthis semblerait tome
Tobetheshortest, aussi
infintenumberoflongerandunequalones qui peut-être
Tiré du point de point pour l'opposé
linecd. </dd>
<dt> salviati </dt>
<dd> <p> Votrechoice et vous y êtes
Ajouter le decutseemtomemostexcellent.sonowwehaveit
que la première dimension est déterminée par AntaStRaightline;
Ceux-ci (à savoir la largeur) par une autre ligne, et
Notonlystraight, butatanglestothat qui
déterminations thelgength.Etwehave a défini thetwo
dimensions de la surface; ce’s, longueur etbreadth. </p>
<p> BUTSUPPOSEYOUHADTODETERTINEAHEALT
Exemple, HowhighthsplateformisfromThePavementdown
Ci-dessous là-bas.
MayDrawinfinitelines, CurvedorStraight, Andallof
différentes longueurs, au point infini de manière à la chaussée
Ci-dessous, qui tombe ces lines
</dd>
</DIALOG>
Il y a encore une controverse sur la syntaxe exacte de cet élément. Certaines personnes veulent intégrer des textes non-dialogues dans des éléments de dialogue (tels que les descriptions de scène dans les scripts), et d'autres n'aiment pas le rôle de prolonger les éléments DT et DD. Malgré la controverse sur une grammaire spécifique, la plupart des gens pensent que l'exprimer des conversations d'une manière si sémantique est une bonne chose.
(à suivre)