Комментарий: HTML5 также добавляет несколько чисто семантических элементов на уровне блоков: кроме диалога с фигурой, я использовал первые два элемента в своих статьях и книгах. Третий элемент, который я не использую часто, он в основном используется в письменном тексте. Помимо элемента представляет описание, подсказки, боковые панели, цитаты, дополнительные комментарии и т. Д., То есть содержание вне основной линии повествования. Например, в разработчике
HTML5 также добавляет несколько чисто семантических элементов уровня блока:Помимо диалога фигуры
Я использовал первые два элемента в своих статьях и книгах. Третий элемент, который я не использую часто, он в основном используется в письменном тексте.
в стороне
В стороне элемент представляет описание, подсказки, боковые панели, цитаты, дополнительные комментарии и т. Д., То есть содержание вне основной линии повествования. Например, в статьях DeveloperWorks вы часто видите боковые панели, написанные в форме таблицы, см. Code 3, Боковая панель DeveloperWorks, написанная в 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>
<Codetype = inline> .xf-value </code> selectorusedherestylestheinput
FieldValueButnotitsLabel. Это на самом деле не соответствует
с TheTeCurrentCss3draft.TheEexAmplereally должен
<codetype = inline> :: value </code> pseudo-classinsteadlikeso:
</p>
<tableborder = 0cellpadding = 0cellpacing = 0width = 100%>
<tbody> <tr> <tdclass = code-outline>
<proclass = displaycode> input :: value {width: 20em;}
#ccnumber :: value {width: 18em}
#zip :: value {width: 12em}
#state :: value {width: 3em} </pre>
</td> </tr> </tbody> </table> <br>
<p>
Тем не менее, Firefox не имеет tyetsupport thissyntax.
</p>
</td> </tr> </table>
В HTML5 вы можете написать эту боковую панель более значимым образом, см. Код 4 DeveloperWorks Sidebar, написанная в HTML5.
<в сторону>
<h3> .xf-value </h3>
<p>
<Codetype = inline> .xf-value </code> selectorusedherestylestheinput
FieldValueButnotitsLabel. Это на самом деле не соответствует
с TheTeCurrentCss3draft.TheEexAmplereally должен
<codetype = inline> :: value </code> pseudo-classinsteadlikeso:
</p>
<proclass = displaycode> input :: value {width: 20em;}
#ccnumber :: value {width: 18em}
#zip :: value {width: 12em}
#state :: value {width: 3em} </pre>
<p>
Тем не менее, Firefox не имеет tyetsupport thissyntax.
</p>
</кроме>
Браузер может решить, где поместить эту боковую панель (может потребовать небольшой код CSS).
Фигура
Элемент фигура представляет изображение уровня блока и может также включать описания. Например, во многих статьях DeveloperWorks вы можете видеть, что результат маркировки кода 5 диаграммы разработчиков, написанной в HTML4, показан на рисунке 1.
<name = Fig2> <b> Figure2.installmozillaxformsdialog </b> </a> <br/>
<imgalt = awebsiteisrequestingpermissiontoinstaltheFollowingItem:
MozillaxForms0.7 Подписано
src = installDialog.jpgborder = 0height = 317hspace = 5Vspace = 5width = 331/>
<br/>
Рисунок 1. Installmozillaxformsdialog
В HTML5 вы можете написать эту диаграмму более семантическим образом, см. Диаграмму Code 6 DeveloperWorks, написанная в HTML5.
<Figured = Fig2>
<Legend> Figure2.installmozillaxformsdialog </Legend>
<imgalt = awebsiteisrequestingpermissiontoinstaltheFollowingItem:
MozillaxForms0.7 Подписано
src = installDialog.jpgborder = 0height = 317hspace = 5Vspace = 5width = 331/>
</Рисунок>
Самое главное, что браузеры (особенно читатели экрана) могут четко ассоциировать изображения и описания.
Элементы рисунка могут не только отображать изображения. Вы также можете использовать его для указания аудио, видео, iframe, объекта и встроенных элементов.
диалог
Диалог -элемент представляет собой разговор между несколькими людьми. Элемент HTML5DT может представлять собой динамик, а элемент HTML5DD может представлять собой речевое содержание. Таким образом, разговоры также могут отображаться разумно в старых браузерах. Код 7 показывает знаменитый разговор о диалоге Галилео «Двешифулдсистемы».
Код 7. Галилейский диалог, написанный в HTML5
<Диалог>
<dt> Simplicius </dt>
<dd> Согласно TheStrightlinef,
и не в соответствии с кривой, это так
Forsuchause. </dd>
<dt> Sagredo </dt>
<dd> butishouldtakeneofthem,
Видя, что это время
DrawlinePerpendicular Tocd, Forw
TobetheShortest, AswellasbeingUniqueamongthe
InfiniteNumberOflongerandunequalones, которые, возможно,
Вытянут с точки зрения на противоположность
linecd. </dd>
<dt> salviati </dt>
<dd> <p> yourChoice и в то время как вы
adduceforitseemtomemostexcellent.sonowwehaveit
что первое измерение определяется byastraightline;
Они (а именно, ширина) byanothrastraightline, и
NotonlyStraight, ButatangLestothat, который
Определения
размеры это, длина
<p> Butsupposeyouhadtodetermineaheight - для
Пример, HowhhithisplatformisfromThePavementDown
Ниже там. См
Maydrawinfinitelines, CustrodorStraight, Andallof
разные длины, к бесконечной точке, так что на тротуар
Ниже, какая линии линии, вы могли бы youmakeuseof? </p>
</dd>
</dialog>
По -прежнему существуют споры по поводу точного синтаксиса этого элемента. Некоторые люди хотят внедрить тексты, не являющиеся диалогами, в диалоговое элементы (такие как описания сцен в сценариях), а другим не нравится роль расширения элементов DT и DD. Несмотря на противоречие по поводу конкретной грамматики, большинство людей думают, что выражение разговоров таким семантическим образом - это хорошо.
(продолжение следует)