هيكل ودلالات HTML5 (3): عناصر مستوى الكتلة الدلالية

التعليق: يضيف HTML5 أيضًا بعض العناصر الدلالية البحتة على مستوى الكتلة: جانباً مربع الحوار الشكل ، كنت أستخدم العنصرين الأولين في مقالاتي وكتاباتي. العنصر الثالث الذي لا أستخدمه في كثير من الأحيان ، يتم استخدامه بشكل أساسي في النص المكتوب. بصرف النظر عن العنصر ، يمثل العنصر الوصف ، والمطالبات ، والأشرطة الجانبية ، والاقتباسات ، والتعليقات الإضافية ، وما إلى ذلك ، أي محتوى خارج السطر الرئيسي للسرد. على سبيل المثال ، في المطور

جانبا الحوار الشكل

لقد كنت أستخدم العنصرين الأولين في مقالاتي وكتاباتي. العنصر الثالث الذي لا أستخدمه في كثير من الأحيان ، يتم استخدامه بشكل أساسي في النص المكتوب.

جانبا

يمثل العنصر جانبًا الوصف ، والمطالبات ، والأشرطة الجانبية ، والاقتباسات ، والتعليقات الإضافية ، وما إلى ذلك ، أي المحتوى خارج السطر الرئيسي للسرد. على سبيل المثال ، في مقالات المطورين ، غالبًا ما ترى الأشرطة الجانبية المكتوبة في نموذج الجدول ، انظر الرمز 3 ، الشريط الجانبي للمطورات المكتوبة في 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 =#eeeeeee>

<p> <aname = xf-value> <spanclass = smalltitle> .xf-value </span> </a> </p>

<p>

<CODETYPE = inline> .xf-value </code> SelectoreSederSedHerestyLestheinput

FieldValueButNotitslabel. هذا في الواقع

withTheCurrentCss3Draft.TheExamplereally يجب أن يكون

<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> </table> <br>

<p>

ومع ذلك ، لا يحتوي Firefox على tyetsupport thissyntax.

</p>

</td> </tr> </lood>

في HTML5 ، يمكنك كتابة هذا الشريط الجانبي بطريقة أكثر جدوى ، راجع الشريط الجانبي للمطور 4 من Code 4 في HTML5.

<جانب جانب>

<h3> .xf-value </h3>

<p>

<CODETYPE = inline> .xf-value </code> SelectoreSederSedHerestyLestheinput

FieldValueButNotitslabel. هذا في الواقع

withTheCurrentCss3Draft.TheExamplereally يجب أن يكون

<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>

ومع ذلك ، لا يحتوي Firefox على tyetsupport thissyntax.

</p>

</isside>

يمكن للمتصفح أن يقرر مكان وضع هذا الشريط الجانبي (قد يتطلب رمز CSS صغير).

شكل

يمثل عنصر الشكل صورة على مستوى الكتلة وقد يتضمن أيضًا الأوصاف. على سبيل المثال ، في العديد من مقالات المطورين ، يمكنك أن ترى أن نتيجة وضع العلامات على الرمز 5 لمخطط المطورين المكتوب في HTML4 يظهر في الشكل 1.

<name = fig2> <b> figure2.installmozillaxformsdialog </b> </a> <br/>

<imgalt = AwebsiteIsRequestingPermissionToInstallTheFollowingItem:

mozillaxforms0.7unsigned

src = installDialog.jpgBorder = 0height = 317hspace = 5vspace = 5width = 331/>

<br/>

الشكل 1. InstallMozillAxformsDialog

في HTML5 ، يمكنك كتابة هذا الرسم التخطيطي بطريقة أكثر دلالة ، انظر مخطط Code 6 DeveloperWorks المكتوب في HTML5.

<guraliD = fig2>

<GRING> Figure2.InstallMozillaxformsDialog </legend>

<imgalt = AwebsiteIsRequestingPermissionToInstallTheFollowingItem:

mozillaxforms0.7unsigned

src = installDialog.jpgBorder = 0height = 317hspace = 5vspace = 5width = 331/>

</figure>

الأهم من ذلك ، يمكن للمتصفحات (وخاصة قراء الشاشة) ربط الصور والأوصاف بوضوح.

لا يمكن لعناصر الشكل عرض الصور فقط. يمكنك أيضًا استخدامه لتحديد العناصر الصوتية والفيديو والكائن والكائن والعناصر المدمجة.

مربع الحوار

يمثل عنصر الحوار محادثة بين العديد من الأشخاص. يمكن أن يمثل عنصر HTML5DT السماعة ، ويمكن أن يمثل عنصر HTML5DD محتوى الكلام. لذلك ، يمكن أيضًا عرض المحادثات بطريقة معقولة في المتصفحات القديمة. يعرض الرمز 7 محادثة شهيرة على DialogueConming's DealogueConning the TwoChiefWorldSystems.

الرمز 7. حوار الجليل المكتوب في HTML5

<ariog>

<dt> Simplicius </dt>

<dd> وفقًا لـ thestrightlieaf ،

وليس وفقًا للمنحنى ،

forsuchause. </dd>

<dt> sagredo </dt>

<dd> butishouldtakene thoreofthem ،

رؤية أن thestraightlineafrunsoLiquely.ishould

drawlinependiculy tocd ، سوف يبدو توميس

Tobetheshortest ، AswellasBeingUniqueamongthe

infinitenumberoflongerandunequalones التي ربما

تم سحبها من نقطة atoever على العكس

linecd. </dd>

<dt> salviati </dt>

<dd> <p> yourchoice و thereate لك

aduceforitseemtomeMostexCellent.sonowwehaveit

أن البعد الأول يتم تحديد byastraightline.

هذه (وهي اتساع) byanotherstraightline ، و

notonlystraight ، butatanglestothat التي

DetionationsHeLength.Thuswehave تعريف thetwo

أبعاد السطح. trisis ، lengthandbreadth. </p>

<p> butsupposeyouhadtodetermineaheight - بالنسبة

على سبيل المثال ، HowhightSplatformisFromThePavementDown

أدناه هناك

maydrawinfinitelines ، curvedorstraight ، andallof

أطوال مختلفة ، إلى النقطة اللانهائية حتى الرصيف

أدناه ، ما هي السقوط التي ستسقطها youmakeuseof؟ </p>

</dd>

</dialog>

لا يزال هناك جدل حول بناء الجملة الدقيق لهذا العنصر. يريد بعض الناس تضمين النصوص غير الجاهزة في عناصر الحوار (مثل أوصاف المرحلة في البرامج النصية) ، والبعض الآخر لا يحب دور تمديد عناصر DT و DD. على الرغم من الجدل حول قواعد محددة ، يعتقد معظم الناس أن التعبير عن المحادثات بطريقة دلالية أمر جيد.

(يتبع)