ความคิดเห็น: HTML5 ยังเพิ่มองค์ประกอบระดับบล็อกความหมายล้วนๆ: กล่องโต้ตอบรูปที่ฉันใช้องค์ประกอบสององค์ประกอบแรกในบทความและหนังสือของฉัน องค์ประกอบที่สามที่ฉันไม่ได้ใช้บ่อยมันส่วนใหญ่จะใช้ในข้อความที่เป็นลายลักษณ์อักษร นอกเหนือจากองค์ประกอบที่แสดงถึงคำอธิบาย, พรอมต์, แถบด้านข้าง, คำพูด, ความคิดเห็นเพิ่มเติม ฯลฯ นั่นคือเนื้อหานอกบรรทัดหลักของการบรรยาย ตัวอย่างเช่นในนักพัฒนา
HTML5 ยังเพิ่มองค์ประกอบระดับบล็อกความหมายล้วนๆ:นอกเหนือจากกล่องโต้ตอบรูป
ฉันใช้องค์ประกอบสององค์ประกอบแรกในบทความและหนังสือของฉัน องค์ประกอบที่สามที่ฉันไม่ได้ใช้บ่อยมันส่วนใหญ่จะใช้ในข้อความที่เป็นลายลักษณ์อักษร
นอกเหนือจาก
องค์ประกอบนอกเหนือจากคำอธิบาย, พรอมต์, แถบด้านข้าง, เครื่องหมายคำพูด, ความคิดเห็นเพิ่มเติม ฯลฯ นั่นคือเนื้อหานอกบรรทัดหลักของการบรรยาย ตัวอย่างเช่นในบทความ DeveloperWorks คุณมักจะเห็นแถบด้านข้างที่เขียนในรูปแบบตารางดูโค้ด 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 =#eeeeee>
<p> <aname = xf-value> <spanclass = smalltitle> .xf-value </span> </a> </p>
<p>
<codetype = inline> .xf-value </code> selectorusedHeresTylestheinput
FieldValueButnotitslabel.her
withthecurrentcss3draft.theexamplerally ควร
<codetype = inline> :: value </code> pseudo-classinsteadlikeso:
</p>
<TableBorder = 0CellPadding = 0CellPacing = 0Width = 100%>
<tbody> <tr> <tdclass = code-outline>
<preclass = displayCode> input :: value {width: 20em;}
#ccnumber :: ค่า {width: 18em}
#zip :: ค่า {width: 12em}
#State :: ค่า {Width: 3EM} </pre>
</td> </tr> </tbody> </table> <br>
<p>
อย่างไรก็ตาม Firefox ไม่มี tyetsupport thissyntax
</p>
</td> </tr> </table>
ใน HTML5 คุณสามารถเขียนแถบด้านข้างนี้ได้อย่างมีความหมายมากขึ้นดูรหัส 4 Writise Bringe ใน HTML5
<นอกเหนือจาก>
<H3> .xf-value </h3>
<p>
<codetype = inline> .xf-value </code> selectorusedHeresTylestheinput
FieldValueButnotitslabel.her
withthecurrentcss3draft.theexamplerally ควร
<codetype = inline> :: value </code> pseudo-classinsteadlikeso:
</p>
<preclass = displayCode> input :: value {width: 20em;}
#ccnumber :: ค่า {width: 18em}
#zip :: ค่า {width: 12em}
#State :: ค่า {Width: 3EM} </pre>
<p>
อย่างไรก็ตาม Firefox ไม่มี tyetsupport thissyntax
</p>
</side>
เบราว์เซอร์สามารถตัดสินใจได้ว่าจะวางแถบด้านข้างนี้ที่ไหน (อาจต้องใช้รหัส CSS เล็กน้อย)
รูป
องค์ประกอบรูปแสดงภาพระดับบล็อกและอาจรวมถึงคำอธิบาย ตัวอย่างเช่นในบทความนักพัฒนาซอฟต์แวร์จำนวนมากคุณจะเห็นได้ว่าผลลัพธ์ของการติดฉลากรหัส 5 ของไดอะแกรมของนักพัฒนาซอฟต์แวร์ที่เขียนใน HTML4 แสดงในรูปที่ 1
<name = fig2> <b> รูปที่ 2.installmozillaxformsdialog </b> </a> <br/>
<imgalt = awebsiteisrequestingpermissiontoinstallthefollowingitem:
mozillaxforms0.7unsigned
src = installDialog.jpgBorder = 0Height = 317Hspace = 5VSpace = 5Width = 331/>
<br/>
รูปที่ 1. InstallMozillaxformsDialog
ใน HTML5 คุณสามารถเขียนแผนภาพนี้ได้ในแบบที่มีความหมายมากขึ้นดูรหัส 6 ไดอะแกรมผู้พัฒนาที่เขียนด้วย HTML5
<fimid = รูปที่ 2>
<gregend> รูปที่ 2.installmozillaxformsdialog </Legend>
<imgalt = awebsiteisrequestingpermissiontoinstallthefollowingitem:
mozillaxforms0.7unsigned
src = installDialog.jpgBorder = 0Height = 317Hspace = 5VSpace = 5Width = 331/>
</pige>
สิ่งสำคัญที่สุดคือเบราว์เซอร์ (โดยเฉพาะตัวอ่านหน้าจอ) สามารถเชื่อมโยงรูปภาพและคำอธิบายได้อย่างชัดเจน
องค์ประกอบรูปไม่เพียง แต่สามารถแสดงภาพได้ นอกจากนี้คุณยังสามารถใช้เพื่อระบุเสียงวิดีโอ iframe วัตถุและองค์ประกอบฝัง
บทสนทนา
องค์ประกอบกล่องโต้ตอบแสดงถึงการสนทนาระหว่างคนหลายคน องค์ประกอบ HTML5DT สามารถเป็นตัวแทนของลำโพงและองค์ประกอบ HTML5DD สามารถแสดงเนื้อหาคำพูดได้ ดังนั้นการสนทนาสามารถแสดงในวิธีที่เหมาะสมในเบราว์เซอร์เก่า รหัสที่ 7 แสดงการสนทนาที่มีชื่อเสียงเกี่ยวกับ DialogueConcercerning TwoChiefWorldSystems
รหัส 7. บทสนทนา Galilean เขียนใน HTML5
<กล่องโต้ตอบ>
<Dt> Simplicius </dt>
<dd> ตาม thestrightlineaf,
และไม่เป็นไปตามเส้นโค้ง
forsuchause. </dd>
<Dt> Sagredo </dt>
<dd> แต่ butishtakenethem
เห็นว่า thestraightlineafrunsobliquely.
Drawlineperpendicular Tocd, Forthis ดูเหมือนจะเป็น tome
Tobetheshortest, aswellasbeinguniqueamongthe
Infinitenumberoflongerandunequalones ซึ่งอาจจะ
ดึงออกมาจากจุด atoever สำหรับตรงกันข้าม
linecd. </dd>
<Dt> Salviati </dt>
<Dd> <p> คุณคิดและคุณ
AdduceForitSeemTomeMostExcellent.sonowWeHaveit
ว่ามิติแรกจะถูกกำหนด byastraightline;
เหล่านี้ (กล่าวคือความกว้าง) byanotherstraightline และ
notonlystraight, butatanglestothat ซึ่ง
การกำหนดค่าความยาว thuswehave กำหนด thetwo
มิติฟาสเดอร์เฟซ; นั่นคือ lengthandbreadth. </p>
<p> butsupposeyouhadtodetermineaheight - สำหรับ
ตัวอย่าง howhighthisplatformisfromthepavementdown
ด้านล่างที่นั่นดูว่าจากการพยางค์
maydrawinfinitelines, curvedorstraight, และทั้งหมด
ความยาวที่แตกต่างกันไปยังจุดที่ไม่มีที่สิ้นสุดเพื่อไปยังทางเท้า
ด้านล่างนี้คุณจะต้องทำวิทยานิพนธ์ใด
</dd>
</dialog>
ยังคงมีข้อโต้แย้งเกี่ยวกับไวยากรณ์ที่แน่นอนขององค์ประกอบนี้ บางคนต้องการฝังข้อความที่ไม่ใช่ประวัติย่อในองค์ประกอบการโต้ตอบ (เช่นคำอธิบายขั้นตอนในสคริปต์) และคนอื่น ๆ ไม่ชอบบทบาทของการขยายองค์ประกอบ DT และ DD แม้จะมีการโต้เถียงกันเรื่องไวยากรณ์ที่เฉพาะเจาะจง แต่คนส่วนใหญ่คิดว่าการแสดงบทสนทนาในลักษณะความหมายดังกล่าวเป็นสิ่งที่ดี
(จะดำเนินการต่อ)