หน้าแรก>การสอนการออกแบบเว็บไซต์>กวดวิชา HTML

สถาปัตยกรรมหน้า HTML5 (HTML5 Boilerplates)

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-03-27 01:32:01

สถาปัตยกรรม HTML5

สถาปัตยกรรม HTML5 (HTML5 Boilerplates)

การสร้างเอกสาร HTML5 อย่างรวดเร็ว

เอกสาร HTML5 นั้นง่ายมากในการสร้างคุณเพียงแค่ต้องเปลี่ยนการประกาศ Doctype ที่หัวของเอกสาร

  1. <! doctypehtml>

ด้วยวิธีนี้คุณได้สร้างเอกสาร HTML5 แล้ว มาดูกันว่าโฮมเพจของ Google ทำอย่างไร

คัดลอกเนื้อหาไปยังคลิปบอร์ด
  1. <! doctypehtml>
  2. <head>
  3. <title> html5-googlesearch </title>
  4. <script>
  5. -

อย่างไรก็ตามไม่ได้ใช้หน้าการตรวจสอบและการค้นหาของ Google เนื่องจากยังมีแท็กที่ไม่ถูกต้องจำนวนมากในหน้าเหล่านั้นเช่น <font> แต่ไม่สำคัญคุณยังสามารถใช้แท็กที่ถูกต้องเช่น <script> เพื่อแยกวิเคราะห์ภายใต้ html5 doctype ปัจจุบัน

ตัวอย่างง่ายๆ HTML5

หน้า HTML5 ที่สมบูรณ์ไม่จำเป็นต้องใช้แท็กที่ซับซ้อนจำนวนมาก

คัดลอกเนื้อหาไปยังคลิปบอร์ด
  1. <! doctypehtml>
  2. <title> smallhtml5 </title>
  3. <p> HelloWorld </p>

นี่เป็นตัวอย่างที่เรียบง่ายและสมบูรณ์

(น่าสนใจเมื่อฉันลบแท็ก <title> แท็กการแยกวิเคราะห์ Dom Viewer ของ Hixie ผ่านการตรวจสอบ W3C แต่ผู้ตรวจสอบความถูกต้องของ Henri Sivonen บอกว่ามันไม่ถูกต้องแท็ก)

ความสมบูรณ์และความเข้ากันได้ของ HTML5

ดีที่สุดนี่คือตัวอย่าง HTML5 ที่สมบูรณ์พร้อมสไตล์และแท็กใหม่ที่เพิ่มเข้ามา เพื่อแก้ปัญหาที่เบราว์เซอร์เคอร์เนลบางอย่างไม่สามารถดูได้นี่คือสคริปต์ JS ที่แก้ปัญหานี้

  1. <! doctypehtml>
  2. <html>
  3. <head>
  4. <metacharset = utf-8/>
  5. <title> html5complete </title>
  6. <!-[ifie]> <scriptsrc = http: //html5shiv.googlecode.com/svn/trunk/html5.js> </script> <! [endif]->
  7. <style>
  8. บทความ, นอกเหนือ, รายละเอียด, figcaption, รูป, ส่วนท้าย, ส่วนหัว, hgroup, เมนู, nav, ส่วน {display: block;}
  9. </style>
  10. </head>
  11. <body>
  12. <p> HelloWorld! </p>
  13. </body>
  14. </html>
บทความที่เกี่ยวข้อง