HTML5的构造和词义(3):词义性的块级元素

日期:2021-02-26 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

  HTML5还提升了1些纯词义性的块级元素:
  aside  figure  dialog
  我在文章内容和书中1直应用前两个元素。第3个元素我不常常用,它关键用于书面形式文字。
aside
  aside元素意味着表明、提醒、边栏、引入、额外注解等,也便是描述主线以外的內容。比如,在developerWorks文章内容中,经常会看到用报表方式撰写的边栏,见编码3用HTML4撰写的developerWorks边栏。
<tablealign="right"border="0"cellpadding="0"cellspacing="0"width="40%">
<tbody><tr><tdwidth="10">
<imgalt=""src="//www.ibm.com/i/c.gif"height="1"width="10"></td>
<td>
<tableborder="1"cellpadding="5"cellspacing="0"width="100%">
<tbody><tr><tdbgcolor="#eeeeee">
<p><aname="xf-value"><spanclass="smalltitle">.xf-value</span></a></p>
<p>
The<codetype="inline">.xf-value</code>selectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
<codetype="inline">::value</code>pseudo-classinsteadlikeso:
</p>
<tableborder="0"cellpadding="0"cellspacing="0"width="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></table><br>
<p>
However,Firefoxdoesn'tyetsupportthissyntax.
</p>
</td></tr></table>
  在HTML5中,能够依照更成心义的方法撰写这个边栏,见编码4用HTML5撰写的developerWorks边栏。
<aside>
<h3>.xf-value</h3>
<p>
The<codetype="inline">.xf-value</code>selectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
<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>
However,Firefoxdoesn'tyetsupportthissyntax.
</p>
</aside>

  访问器能够决策把这个边栏放在哪儿里(将会必须用1点儿CSS编码)。
figure
  figure元素意味着1个块级图象,还能够包括表明。比如,在很多developerWorks文章内容中,能够看到编码5用HTML4撰写的developerWorks图这样的标识其結果见图1。
<aname="fig2"><b>Figure2.InstallMozillaXFormsdialog</b></a><br/>
<imgalt="AWebsiteisrequestingpermissiontoinstallthefollowingitem:
MozillaXForms0.7Unsigned"
src="installdialog.jpg"border="0"height="317"hspace="5"vspace="5"width="331"/>
<br/>

图1.InstallMozillaXFormsdialog

  在HTML5中,能够依照更有词义性的方法撰写这个图,见编码6用HTML5撰写的developerWorks图。
<figureid="fig2">
<legend>Figure2.InstallMozillaXFormsdialog</legend>
<imgalt="AWebsiteisrequestingpermissiontoinstallthefollowingitem:
MozillaXForms0.7Unsigned"
src="installdialog.jpg"border="0"height="317"hspace="5"vspace="5"width="331"/>
</figure>

  最关键的是,访问器(特别是显示屏阅读文章器)能够确立地将图和表明联络在1起。
  figure元素不只能够显示信息照片。还能够应用它给audio、video、iframe、object和embed元素加表明。
dialog
  dialog元素表明几本人之间的会话。HTML5dt元素能够表明发言者,HTML5dd元素能够表明发言內容。因此,在旧式访问器中还可以以有效的方法显示信息会话。编码7显示信息在Galileo的“DialogueConcerningtheTwoChiefWorldSystems”上的1段知名会话。
  编码7.用HTML5撰写的Galilean会话
<dialog>
<dt>Simplicius</dt>
<dd>AccordingtothestraightlineAF,
andnotaccordingtothecurve,suchbeingalreadyexcluded
forsuchause.</dd>
<dt>Sagredo</dt>
<dd>ButIshouldtakeneitherofthem,
seeingthatthestraightlineAFrunsobliquely.Ishould
drawalineperpendiculartoCD,forthiswouldseemtome
tobetheshortest,aswellasbeinguniqueamongthe
infinitenumberoflongerandunequaloneswhichmaybe
drawnfromthepointAtoeveryotherpointoftheopposite
lineCD.</dd>
<dt>Salviati</dt>
<dd><p>Yourchoiceandthereasonyou
adduceforitseemtomemostexcellent.Sonowwehaveit
thatthefirstdimensionisdeterminedbyastraightline;
thesecond(namely,breadth)byanotherstraightline,and
notonlystraight,butatrightanglestothatwhich
determinesthelength.Thuswehavedefinedthetwo
dimensionsofasurface;thatis,lengthandbreadth.</p>
<p>Butsupposeyouhadtodetermineaheight—for
example,howhighthisplatformisfromthepavementdown
belowthere.Seeingthatfromanypointintheplatformwe
maydrawinfinitelines,curvedorstraight,andallof
differentlengths,totheinfinitepointsofthepavement
below,whichofalltheselineswouldyoumakeuseof?</p>
</dd>
</dialog>
  针对这个元素的精确英语的语法也有争议。1些人期待在dialog元素中嵌入非会话文字(例如剧本中的舞台表明),也有人不喜爱拓展dt和dd元素的功效。虽然在实际英语的语法层面有争议,可是大多数数人都觉得以这样的词义性方法表述会话是好事儿情。
  
  (待续)