องค์ประกอบใหม่ใน HTML 5

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-05-31 00:37:41

ในความคิดของฉัน HTML 5 เป็นวิธีแก้ปัญหาที่ไม่รุนแรง แต่ก็สามารถส่งเสริมความก้าวหน้าทางเทคโนโลยีอย่างต่อเนื่อง ไม่มีเนมสเปซ ไม่จำเป็นต้องปิดองค์ประกอบ (ซึ่งแน่นอนว่าไม่ใช่ข้อได้เปรียบ) และเบราว์เซอร์สามารถจัดการกับข้อผิดพลาดบางอย่างได้อย่างผ่อนปรน ทุกอย่างเป็นไปตามแนวทางปฏิบัติของ HTML 4 ในศตวรรษที่ผ่านมา เมื่อพูดถึงการเรนเดอร์ HTML เบราว์เซอร์ติดอยู่ที่ระดับ 1999 ด้วยเหตุนี้ HTML 5 จึงเป็นโซลูชันเชิงปฏิบัติ ซึ่งไม่เพียงแต่สามารถประมวลผล HTML ที่กระจัดกระจายอยู่ทั่วทุกมุมโลกเป็นเวลาหลายปีเท่านั้น แต่ยังทำให้ผู้ผลิตเบราว์เซอร์เพิ่มคุณสมบัติใหม่ๆ ได้ง่ายขึ้นอีกด้วย นี้เรียกว่าเสื่อมทรามลงอย่างสง่างาม มาดูองค์ประกอบใหม่บางส่วนที่เพิ่มโดย HTML 5 กัน

องค์ประกอบโครงสร้าง

นี่เป็นความสุขที่แท้จริง ปัจจุบัน เราสามารถกำหนดโครงสร้างผ่าน div "สากล" เท่านั้น โดยพยายามแสดงส่วนหัว ด้านล่าง หรือแถบด้านข้างตามลำดับโดยการตั้งค่ารหัสแอตทริบิวต์ เช่น ส่วนหัว ส่วนท้าย แถบด้านข้าง ฯลฯ ผู้เขียนโค้ดไม่จำเป็นต้องกังวลเกี่ยวกับการตั้งชื่อ ID อีกต่อไป ซึ่งมีประโยชน์ด้านความหมายมากขึ้นสำหรับโทรศัพท์มือถือ เครื่องอ่าน และอุปกรณ์อื่นๆ HTML 5 เพิ่มองค์ประกอบโครงสร้างใหม่เพื่อแสดงโครงสร้างที่ใช้บ่อยที่สุดเหล่านี้:

ส่วน: นี้สามารถแสดงบางส่วนหรือบทของหนังสือหรือส่วนภายในบทได้

header: ส่วนหัวในส่วนเนื้อหาของหน้า ไม่ใช่องค์ประกอบส่วนหัว

ส่วนท้าย: ด้านล่างของหน้า (ส่วนท้าย) ซึ่งอาจเป็นที่ตั้งของลายเซ็นอีเมล

nav: ชุดลิงก์ไปยังหน้าอื่น

บทความ: บันทึกอิสระในบล็อก นิตยสาร บทสรุป ฯลฯ

ตัวอย่างเช่น หน้าแรกของบล็อกที่เขียนด้วย HTML 5 อาจมีลักษณะเช่นนี้ (โดยมีข้อยกเว้นบางประการ):

ต่อไปนี้เป็นเนื้อหาที่ยกมา:

<<!DOCTYPE HTML>
<HTML>
<หัว>
<title>สมจริง</title>
</หัว>
<ร่างกาย>
<ส่วนหัว>
<h1>เรียลสุดๆ</h1>
</ส่วนหัว>
<ส่วน>
<บทความ>
<h2><a href="http://realazy.org/blog">หัวข้อ</a></h2>
<p>เนื้อหาอยู่ที่นี่...(ละเว้นคำ n)</p>
</บทความ>
<บทความ>
<h2><a href="http://realazy.org/blog">หัวข้อ 2</a></h2>
<p>เนื้อหา 2 มาแล้ว...(ละเว้นคำว่า n)</p>
</บทความ>
-
</ส่วน>
<ส่วนท้าย>
<นำทาง>
<ul>
<li><a href="http://realazy/blog">การนำทาง 1</a></li>
<li><a href="http://realazy/blog">การนำทาง 2</a></li>
-
</ul>
</นำทาง>
<p>© 2007 realazy</p>
</ส่วนท้าย>
</ร่างกาย>
</HTML>องค์ประกอบความหมายบล็อกระดับบล็อก
HTML ยังเพิ่มองค์ประกอบระดับบล็อกสามต่อไปนี้:

กัน
รูป/รหัส>
กล่องโต้ตอบ
Aside สามารถใช้เพื่อแสดงบันทึก เคล็ดลับ แถบด้านข้าง สรุป คำพูดที่แทรก ฯลฯ เป็นเนื้อหาเสริม ตัวอย่างเช่น แสดงแถบด้านข้างของบล็อกดังนี้:

<ข้าง>
<h3>บทความล่าสุด</h3>
<ul>
<li><a href="http://realazy.org/blog/">ชื่อบทความ</a></li>
-
</ul>
องค์ประกอบ </aside>figure แสดงถึงภาพระดับบล็อกพร้อมคำอธิบาย ตัวอย่างเช่น:

<รูป>
<legend>นี่คือคำอธิบายของภาพ</legend>
<img alt="ข้อความแสดงแทนรูปภาพ" src="/path/to/img.png" />
องค์ประกอบกล่องโต้ตอบ </figure> ใช้เพื่อแสดงการสนทนาระหว่างผู้คน ใน HTML 5 ใช้ dt เพื่อเป็นตัวแทนของผู้พูด และ dd ใช้เพื่อแสดงเนื้อหาของผู้พูด ชอบ:

<กล่องโต้ตอบ>
<dt>พระพุทธเจ้า</dt>
<dd>สีคือความว่างเปล่า</dd>
<dt>หวู่กง</dt>
<dd>ตอนนี้ฉันต้องการองค์ประกอบความหมายแบบอินไลน์ที่ว่างเปล่า

องค์ประกอบ m ใช้เพื่อทำเครื่องหมายข้อความบางส่วนที่ไม่ต้องการการเน้น ยังคงเป็นที่ถกเถียงกันอยู่และอาจมีการเปลี่ยนแปลงได้ในที่สุด

องค์ประกอบเวลาตามชื่อของมันใช้เพื่อแสดงเวลา ต้องใช้คุณลักษณะวันที่และเวลาเพื่อระบุเวลาที่เครื่องสามารถจดจำได้ เช่น:

<time datetime="2008-08-08T20:08:08">20:08:08 น. วันที่ 8 สิงหาคม 2551</tiem> องค์ประกอบมิเตอร์จะแสดงค่าภายในช่วงที่ระบุ สามารถใช้กับเงินเดือน เปอร์เซ็นต์ เศษส่วน ฯลฯ ตัวอย่างเช่น:

ฉันเสียใจที่ต้องบอกคุณว่าฉันมีเพียง <meter>150cm</meter> เท่านั้น นอกจากนี้ยังมี 6 ลักษณะที่แสดงความหมายต่างๆ เช่น:

<p>คะแนนของคุณคือ: <meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter></p >

นอกจากนี้ยังมีความก้าวหน้าตามชื่อที่ใช้เพื่อแสดงความก้าวหน้า:

เป้าหมายที่สำเร็จ: <progress value="40" max="100">40%</progress> ฝังมัลติมีเดีย

เพิ่มองค์ประกอบวิดีโอและเสียง ตามชื่อเลย พวกมันใช้เพื่อแทรกวิดีโอและเสียงตามลำดับ สำหรับรูปแบบนั้น เบราว์เซอร์จะต้องนำไปใช้ และ HTML ไม่จำเป็นต้องมีโค้ดพิเศษในการเล่นรูปแบบใดรูปแบบหนึ่งอีกต่อไป เช่นเดียวกับ img มันสามารถแสดงได้ไม่ว่าจะเป็น PNG, JPG หรือ GIF โดยเฉพาะอย่างยิ่งพวกเขาสามารถมีเนื้อหาได้ ตัวอย่างเช่น คุณสามารถใส่เนื้อเพลงลงในเพลงบางเพลงได้:

ต่อไปนี้เป็นเนื้อหาที่ยกมา:
<audio src="ใครนอนกับคุณ.mp3">
<p>น้ำตาเหือดแห้ง</p>
<p>ฉันจะทนทำผิดตัวเองได้อย่างไร</p>
<p>มีช่วงเวลาแห่งความเศร้าและความสุข</p>
-
</เสียง>

การโต้ตอบ

HTML 5 เรียกอีกอย่างว่า Web Applications 1.0 ดังนั้นจึงพัฒนาความสามารถเชิงโต้ตอบเพิ่มเติมอีกด้วย แท็กเหล่านี้ได้รับการออกแบบมาเพื่อปรับปรุงประสบการณ์การโต้ตอบของเพจ:

ต่อไปนี้เป็นเนื้อหาที่ยกมา:
รายละเอียด
ตารางข้อมูล
เมนู
สั่งการ

รายละเอียด

ใช้เพื่อแสดงเนื้อหาเฉพาะเจาะจง แต่เนื้อหาอาจไม่แสดงตามค่าเริ่มต้น โดยจะแสดงหลังจากโต้ตอบกับคำอธิบายด้วยวิธีการบางอย่าง (เช่น การคลิก) ซึ่งค่อนข้างคล้ายกับวิธีการปัจจุบันในการซ่อนเนื้อหาผ่าน JavaScript และแสดงเนื้อหานั้นหลังจากคลิก ตัวอย่างเช่น:

บันทึกทุกชีวิตในหนึ่งประโยค

ต่อไปนี้เป็นเนื้อหาที่ยกมา:
<รายละเอียด>
<ตำนาน>เพิ่มเติม</ตำนาน>
<p>สื่อสารและแบ่งปัน นำคุณและเพื่อนของคุณมาใกล้ชิดกันมากขึ้น รองรับ MSN/GTalk/QQ, SMS, WAP มือถือ</p>
</details>สามารถมีแอตทริบิวต์เปิดเพื่อแสดงรายละเอียดหรือไม่ก็ได้

DataGrid ใช้เพื่อควบคุมข้อมูลและสามารถอัปเดตโดยผู้ใช้หรือสคริปต์

มีเมนูอยู่ใน HTML 2 แต่ HTML 4 ทำให้ล้าสมัย มีการใช้ของเสีย HTML 5 และองค์ประกอบคำสั่งจะถูกเพิ่มในช่วงเวลานั้น

อ้างอิง: องค์ประกอบใหม่ใน HTML 5