Comentário: O HTML5 também adiciona alguns elementos puramente semânticos no nível do bloco: à parte o diálogo da figura que tenho usado os dois primeiros elementos em meus artigos e livros. O terceiro elemento que não uso com frequência, ele é usado principalmente no texto escrito. Além do elemento, o elemento representa a descrição, solicitações, barras laterais, citações, comentários adicionais etc., ou seja, conteúdo fora da linha principal da narrativa. Por exemplo, no desenvolvedor
O HTML5 também adiciona alguns elementos puramente semânticos no nível do bloco:Além da caixa de diálogo da figura
Eu tenho usado os dois primeiros elementos em meus artigos e livros. O terceiro elemento que não uso com frequência, ele é usado principalmente no texto escrito.
aparte
O elemento à parte representa descrição, solicitações, barras laterais, citações, comentários adicionais etc., ou seja, conteúdo fora da linha principal da narrativa. Por exemplo, em artigos de desenvolvedores, você costuma ver as barras laterais escritas em forma de tabela, consulte o Código 3, barra lateral de desenvolvedores escritos em 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-value> <spanclass = smalltitle> .xf-value </span> </a> </p>
<p>
O <CodeType = inline> .xf-value </code> seletorEctorUsedHerestylestheInput
FieldValuebutnotitsLabel.Este realmente inconescedor
WithTheCurrentCSs3Draft.Theexamplerealmente deve ser
<CodeType = inline> :: value </code> pseudo-classinsteadlikeso:
</p>
<tableborder = 0CellPadding = 0CellPacing = 0Width = 100%>
<Tbody> <tr> <tdclass = code-outline>
<preclass = displaycode> input :: value {width: 20em;}
#ccnumber :: value {width: 18em}
#zip :: value {width: 12em}
#state :: value {width: 3em} </pre>
</td> </tr> </tbody> </tabela> <br>
<p>
No entanto, o Firefox não tem um TyetSupport ThisSyntax.
</p>
</td> </tr> </ table>
No HTML5, você pode escrever esta barra lateral de uma maneira mais significativa, consulte a barra lateral do Código 4 Developerworks escrita no HTML5.
<oswer>
<H3> .xf-valor </h3>
<p>
O <CodeType = inline> .xf-value </code> seletorEctorUsedHerestylestheInput
FieldValuebutnotitsLabel.Este realmente inconescedor
WithTheCurrentCSs3Draft.Theexamplerealmente deve ser
<CodeType = inline> :: value </code> pseudo-classinsteadlikeso:
</p>
<preclass = displaycode> input :: value {width: 20em;}
#ccnumber :: value {width: 18em}
#zip :: value {width: 12em}
#state :: value {width: 3em} </pre>
<p>
No entanto, o Firefox não tem um TyetSupport ThisSyntax.
</p>
</fast>
O navegador pode decidir onde colocar esta barra lateral (pode exigir um pouco de código CSS).
Figura
O elemento da figura representa uma imagem no nível do bloco e também pode incluir descrições. Por exemplo, em muitos artigos de desenvolvedores, você pode ver que o resultado da rotulagem do Código 5 do Diagrama de Desenvolveres Escrito no HTML4 é mostrado na Figura 1.
<nome = fig2> <b> Figura.Installmozillaxformsdialog </b> </a> <br/>
)
Mozillaxforms0.7Unsignado
src = installdialog.jpgborder = 0Height = 317hspace = 5vspace = 5width = 331/>
<br/>
Figura 1. InstallMozillaxformsDialog
No HTML5, você pode escrever este diagrama de uma maneira mais semântica, consulte o Diagrama do Código 6 Developerworks escrito no HTML5.
<figuraId = Fig2>
<legend> figura.Installmozillaxformsdialog </legend>
)
Mozillaxforms0.7Unsignado
src = installdialog.jpgborder = 0Height = 317hspace = 5vspace = 5width = 331/>
</figura>
Mais importante ainda, os navegadores (especialmente os leitores de tela) podem associar claramente imagens e descrições.
Os elementos da figura podem não apenas exibir imagens. Você também pode usá -lo para especificar elementos de áudio, vídeo, iframe, objeto e incorporação.
diálogo
O elemento de diálogo representa uma conversa entre várias pessoas. O elemento HTML5DT pode representar o alto -falante e o elemento HTML5DD pode representar o conteúdo da fala. Portanto, as conversas também podem ser exibidas de maneira razoável em navegadores antigos. O Código 7 mostra uma conversa famosa sobre o DialoGuEcoConerning de Galileu, os TwoChiefWorldSystems.
Código 7. Diálogo Galileia escrito em HTML5
<diálogo>
<dt> Simplicius </dt>
<DD> De acordo com o TheStrightlineaf,
e não de acordo com a curva, thestbeingalreadyexcluied
Forsuchause. </dd>
<dt> sagredo </dt>
<dd> massishouldTakenethefthem,
Vendo que o tempo é o que há
DrawLinePerpendicicular TOCD, o Forthis parece o tomo
TobethesHorTest, SwewellasbeingUniquEamongThe
InfinitenumberoflonGerAndunequalones que talvez
Extraído do ponto de ponto para o contrário
Linecd. </dd>
<dt> salviati </dt>
<dd> <p> yourchoice e teatime você
AdduceForitSeemTomemostexcellent.soNowWeHaveit
que a primeira dimensão é determinada pelo ARAVELIGHTLINE;
estes (a saber, largura) por Aantherstraightline, e
Notonlystraight, butatlangestothat que
Determinações Thelngth.ThusweHave Definiu Thetwo
dimensõesfasurface; Isso é, comprimento e pão. </p>
<p> butsupPpesoyouhadtodetermineAHeaHeight - para
Exemplo, como o HighThisplataFormIsChemthePavementDown
abaixo. Veja que é de pontuação na plataforma
MayDrawinfinitelines, Curvedorstraight e, e todos
comprimentos diferentes, até o ponto infinito, de modo a o pavimento
Abaixo, quais cai as linhas de linhas de tensão você seriameseof? </p>
</dd>
</dialog>
Ainda há controvérsia sobre a sintaxe exata desse elemento. Algumas pessoas querem incorporar textos não dialogadores em elementos de diálogo (como descrições de estágio em scripts) e outras não gostam do papel de estender os elementos DT e DD. Apesar da controvérsia sobre a gramática específica, a maioria das pessoas pensa que expressar conversas de maneira tão semântica é uma coisa boa.
(continua)