1. ออกแบบโครงสร้างของหน้า - HTML: กระบวนการนี้คือการใช้องค์ประกอบ HTML ต่างๆเพื่อสร้างโครงสร้างของหน้าเว็บ
2. ออกแบบลักษณะที่ปรากฏของหน้า - CSS: กระบวนการนี้คือการใช้ CSS เพื่อปรับปรุงลักษณะที่ปรากฏของหน้าเว็บ
3. พฤติกรรมหน้าการออกแบบ - JavaScript: กระบวนการนี้คือการให้พฤติกรรมบางอย่างกับองค์ประกอบของหน้าเว็บ
นอกเหนือจาก CSS แล้ว HTML5 ยังได้รับการขยายไปสู่องศาที่แตกต่างกันในสองด้านอื่น ๆ ซีรี่ส์นี้มุ่งเน้นไปที่แง่มุมแรก ในส่วนก่อนหน้านี้เราได้เรียนรู้องค์ประกอบผ้าใบที่ซับซ้อนและองค์ประกอบ SVG และบทต่อไปนี้จะสรุปองค์ประกอบที่เพิ่ม HTML5 อื่น ๆ
องค์ประกอบโครงสร้าง HTML5 ได้เพิ่มองค์ประกอบโครงสร้างใหม่เช่นส่วนหัวส่วนท้าย, NAV การนำทาง, บทความเนื้อหา, ส่วนบท, ฯลฯ ความหมายแสดงในรูปด้านล่าง:นอกเหนือจากองค์ประกอบโครงสร้างของทั้งหน้า HTML5 ยังเพิ่มองค์ประกอบความหมายระดับบล็อกเช่นองค์ประกอบเสริมนอกเหนือจากองค์ประกอบภาพรายละเอียดองค์ประกอบคำอธิบายรายละเอียด ฯลฯ นอกเหนือจากการแสดงความหมายเค้าโครงของหน้าองค์ประกอบเหล่านี้ไม่แตกต่างจาก divs ธรรมดา นี่คือตัวอย่างสั้น ๆ :
<html>
<head>
<tite> บล็อก DXY </title>
</head>
<body>
<ส่วนหัว>
<h1> <a href = "http://www.vevb.com/dxy1982/%22%3Edxy1982 บล็อก </a> </h1>
</header>
<section>
<บทความ>
<h2> <a href = "http://www.vevb.com/dxy1982/"> บทความ 1 </a> </h2>
<p> บทนำ </p>
</บทความ>
<บทความ>
<h2> <a href = "http://www.vevb.com/dxy1982/"> บทความ 2 </a> </h2>
<p> บทนำ </p>
</บทความ>
<av>
<a href = "http://www.vevb.com/dxy1982/"> บล็อก </a>
</av>
</section>
<av>
<ul>
<li> <h2> ข้อมูล </h2>
<ul>
<li> <a href = "http://www.vevb.com/dxy1982/"> นโยบาย </a> </li>
<li> <a href = "http://www.vevb.com/dxy1982/"> รายการ </a> </li>
</ul> </li>
<li> <h2> บทความ </h2>
<ul>
<li> <a href = '/blog/2007/04/'> มกราคม </a> </li>
<li> <a href = '/blog/2007/03/'> กุมภาพันธ์ </a> </li>
</ul>
</li>
</ul>
</av>
<footer>
<p> ลิขสิทธิ์ 2012 DXY1982 </p>
</footer>
</body>
</html>
แม้ว่าองค์ประกอบเหล่านี้จะใช้งานง่าย แต่ก็ยังมีบางจุดที่ควรทราบ :1. อย่าใช้ส่วนเป็นตัวแทนสำหรับ DIV
ส่วนไม่ใช่คอนเทนเนอร์สไตล์ องค์ประกอบส่วนแสดงถึงส่วนความหมายของเนื้อหาที่ใช้เพื่อช่วยสร้างบทสรุปเอกสาร ควรมีส่วนหัว มันมักจะมีอยู่เป็นบทความส่วนใหญ่ (แน่นอนมันเป็นไปได้สำหรับบทความเป็นส่วนหนึ่ง) หากคุณต้องการค้นหาองค์ประกอบที่ใช้เป็นคอนเทนเนอร์หน้าหรือต้องการคอนเทนเนอร์สไตล์เพิ่มเติมโปรดใช้ DIV ต่อไป
2. ใช้เฉพาะส่วนหัวและ hgroup เมื่อจำเป็น
ไม่มีความหมายที่จะเขียนป้ายกำกับที่ไม่จำเป็นต้องเขียน สถานการณ์การใช้งานของส่วนหัวและ HGroup มักจะมีดังนี้:
•องค์ประกอบส่วนหัวแสดงถึงชุดของข้อความเสริมหรือการนำทางนำทางซึ่งมักใช้เป็นส่วนหัวของส่วน
•เมื่อหัวมีโครงสร้างหลายชั้นเช่นหัวข้อย่อยคำบรรยายข้อความโลโก้ต่าง ๆ ฯลฯ ใช้ HGroup เพื่อรวมองค์ประกอบ H1-H6 เป็นหัวของส่วน
ที่นี่หากส่วนหัวหรือ HGroup มีองค์ประกอบหัวเพียงไม่กี่ตัวมันจะเป็นการดีกว่าที่จะลบแท็กที่ไร้ประโยชน์ทั้งสองนี้เช่น:
<บทความ>
<ส่วนหัว>
<H1> โพสต์บล็อกที่ดีที่สุดของฉัน </h1>
</header>
<!-เนื้อหาบทความ->
</บทความ>
แก้ไขโดยตรงเป็น:
<บทความ>
<H1> โพสต์บล็อกที่ดีที่สุดของฉัน </h1>
<!-เนื้อหาบทความ->
</บทความ>
เช่นเดียวกันสำหรับ:
<ส่วนหัว>
<hgroup>
<H1> โพสต์บล็อกที่ดีที่สุดของฉัน </h1>
</hgroup>
<p> โดย Rich Clark </p>
</header>
เปลี่ยนโดยตรงเป็น:
<ส่วนหัว>
<H1> โพสต์บล็อกที่ดีที่สุดของฉัน </h1>
<p> โดย Rich Clark </p>
</header>
3. อย่าใช้ NAV ในทางที่ผิด
องค์ประกอบ NAV แสดงถึงบล็อกในหน้าเว็บที่เชื่อมโยงไปยังหน้าอื่น ๆ หรือส่วนอื่น ๆ ของหน้านี้ บล็อกที่มีลิงก์นำทาง
แต่ไม่ใช่ลิงก์ทั้งหมดในหน้าเว็บที่จำเป็นต้องวางไว้ในองค์ประกอบ NAV - องค์ประกอบนี้มีวัตถุประสงค์เพื่อใช้เป็นบล็อกการนำทางหลัก เพื่อให้ตัวอย่างเฉพาะมักจะมีลิงก์จำนวนมากในส่วนท้ายเช่นข้อกำหนดในการให้บริการหน้าแรกหน้าเว็บประกาศลิขสิทธิ์ ฯลฯ องค์ประกอบส่วนท้ายเองนั้นเพียงพอที่จะรับมือกับสถานการณ์เหล่านี้ แม้ว่าองค์ประกอบ NAV จะสามารถใช้งานได้ที่นี่ แต่ก็มักจะถือว่าไม่จำเป็น
4. อย่าทำในทางที่ผิด
รูปที่ควรเป็นเนื้อหาของเหลวและบางครั้งจะมีคำอธิบายชื่อเรื่องที่มีอยู่ในนั้น โดยทั่วไปจะมีการอ้างอิงเป็นหน่วยอิสระในสตรีมเอกสาร นี่เป็นสถานการณ์ที่ดีที่สุดสำหรับรูป - สามารถย้ายจากหน้าเนื้อหาหลักไปยังแถบด้านข้างโดยไม่ส่งผลกระทบต่อการไหลของเอกสาร รูปที่ควรอ้างอิงในเอกสารหรือล้อมรอบด้วยองค์ประกอบส่วน
หากคุณมีการแสดงภาพ (เช่นโลโก้) อย่างหมดจดไม่ได้อ้างถึงที่อื่นในเอกสารและไม่จำเป็นต้องย้ายตำแหน่งจากนั้นอย่าใช้รูป
5. อย่าใช้แอตทริบิวต์ประเภทที่ไม่จำเป็น
ใน HTML5 องค์ประกอบสคริปต์และสไตล์ไม่จำเป็นต้องใช้แอตทริบิวต์ประเภทอีกต่อไป แน่นอนว่าไม่มีปัญหาในการเขียน แต่จากมุมมองของการปฏิบัติที่ดีที่สุดไม่จำเป็นต้องเขียน
องค์ประกอบเสียง องค์ประกอบเสียงใช้เพื่อระบุเนื้อหาเสียงเช่นเพลงหรือสตรีมเสียงอื่น ๆ รูปแบบที่รองรับโดยองค์ประกอบนี้จะแสดงในตารางต่อไปนี้:| เช่น 9 | Firefox 3.5 | โอเปร่า 10.5 | Chrome 3.0 | Safari 3.0 | |
|---|---|---|---|---|---|
| Ogg Vorbis | |||||
| พ.ศ.ม. | |||||
| ผ้าปูที่นอน |
แท็กเสียงมีแอตทริบิวต์บางอย่างที่ใช้ในการควบคุมเนื้อหาเมื่อใดและวิธีการเล่นเสียง ฯลฯ แอตทริบิวต์เหล่านี้คือ: SRC (ชื่อไฟล์), preload (โหลดเมื่อโหลดหน้าเว็บ), การควบคุม (การควบคุมการแสดงผล), ลูป (ลูป) และ autoplay (autoplay) ในตัวอย่างต่อไปนี้หน้าจะเล่นทันทีที่โหลดเสียงและมันจะยังคงเล่นต่อไป การควบคุมที่ให้ไว้สามารถอนุญาตให้ผู้ใช้หยุดหรือรีสตาร์ทการเล่นของเสียง:
<audio src = "myfirstmusic.ogg" controls = "controls" autoplay = "autoplay" loop = "loop">
เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบเสียง
</เสียง>
หากเบราว์เซอร์ไม่รองรับองค์ประกอบข้อมูลข้อความขององค์ประกอบจะปรากฏขึ้น
หากตั้งค่าองค์ประกอบการเล่นอัตโนมัติคุณสมบัติ preload จะถูกละเว้นโดยอัตโนมัติ หากตั้งค่า preload = อัตโนมัติเสียงจะถูกโหลดหลังจากโหลดหน้าเว็บ
องค์ประกอบเสียงอนุญาตให้ระบุองค์ประกอบหลายแหล่งที่เข้ากันได้กับเบราว์เซอร์ องค์ประกอบต้นทางสามารถเชื่อมโยงไฟล์เสียงที่แตกต่างกัน เบราว์เซอร์จะใช้รูปแบบที่รู้จักแรก:
<เสียง>
<Source Src = "song.ogg" type = "Audio/Ogg">
<Source SRC = "song.wma" type = "audio/x-ms-wma">
<Source Src = "song.mp3" type = "Audio/MPEG">
เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบเสียง
</เสียง>
องค์ประกอบวิดีโอ องค์ประกอบวิดีโอช่วยให้คุณเล่นคลิปวิดีโอหรือสตรีมสื่อภาพ รูปแบบที่รองรับโดยองค์ประกอบนี้จะแสดงในตารางต่อไปนี้:| รูปแบบ | เช่น | Firefox | โอเปร่า | โครเมี่ยม | ซาฟารี |
|---|---|---|---|---|---|
| Ogg | เลขที่ | 3.5+ | 10.5+ | 5.0+ | เลขที่ |
| MPEG 4 | 9.0+ | เลขที่ | เลขที่ | 5.0+ | 3.0+ |
| Webm | เลขที่ | 4.0+ | 10.6+ | 6.0+ | เลขที่ |
มันมีคุณสมบัติทั้งหมดขององค์ประกอบเสียงบวก: ปิดเสียงโปสเตอร์ (รอภาพ) ความกว้างและความสูง ไม่จำเป็นต้องพูดความหมายสองครั้งสุดท้าย เมื่อวิดีโอกำลังโหลดหรือวิดีโออยู่ในสถานะที่ไม่มีการโหลดแอตทริบิวต์โปสเตอร์ (การระบุ URL สัมบูรณ์หรือ URL) ช่วยให้คุณค้นหาภาพที่จะจัดการกับมันก่อน ปิดเสียงหมายถึงการปิดเสียง
วิดีโอยังรองรับการใช้องค์ประกอบแหล่งที่มาเพื่อแก้ปัญหาความเข้ากันได้ ดูตัวอย่างเล็ก ๆ :
<video controls = "controls" poster = "/images/screen.gif">
<Source Src = "Movie.mp4" type = "video /mp4" />>>
<Source Src = "Movie.ogg" type = "video /ogg" />>
เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบวิดีโอ
</video>
หากคุณต้องการที่จะไม่เล่นเสียงวิดีโอให้ตั้งค่าการปิดเสียง = ปิดเสียง
นอกจากนี้องค์ประกอบวิดีโอยังมีวิธีการคุณสมบัติและเหตุการณ์บางอย่างเพื่อรองรับกระบวนการควบคุมการเล่นในการดำเนินงาน DOM ตัวอย่างเช่นองค์ประกอบการโทรเพื่อเล่นหยุดชั่วคราวโหลดและวิธีอื่น ๆ นอกจากนี้ยังมีคุณสมบัติเช่นปริมาณและเวลาเล่นที่สามารถอ่านหรือตั้งค่าได้โดยตรง นอกจากนี้ยังมีเหตุการณ์ที่เริ่มเล่นหยุดชั่วคราวสิ้นสุด ฯลฯ ที่สามารถใช้งานได้ ดูตัวอย่างต่อไปนี้:
<! doctype html>
<html>
<body>
<div style = "text-allign: center">
<ปุ่ม onclick = "playpause ()"> play/pause </button>
<ปุ่ม onclick = "makebig ()"> ใหญ่ </button>
<ปุ่ม onclick = "makemall ()"> เล็ก </kout>
<ปุ่ม onclick = "makenormal ()"> ปกติ </tond>
<video id = "video1">
<ต้นทาง src = "mov_bbb.mp4" type = "video /mp4" />>>>>>
<ต้นทาง src = "mov_bbb.ogg" type = "video /ogg" />>>>
เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบวิดีโอ
</video>
</div>
<script type = "text/javascript">
var myvideo = document.getElementById ("video1");
ฟังก์ชั่น playpause ()
-
ถ้า (myvideo.paused)
myvideo.play ();
อื่น
myvideo.pause ();
-
ฟังก์ชั่น makebig ()
-
myvideo.width = 560;
-
ฟังก์ชั่น make -mall ()
-
myvideo.width = 320;
-
ฟังก์ชั่น makenormal ()
-
myvideo.width = 420;
-
</script>
</body>
</html>
ในความเป็นจริงเราต้องให้ความสนใจกับวิธีการเขียนใหม่: ในตัวอย่างข้างต้นเราเขียนองค์ประกอบเสียงเช่นนี้:
<audio src = "myfirstmusic.ogg" controls = "controls" autoplay = "autoplay" loop = "loop">
เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบเสียง
</เสียง>
ในความเป็นจริงมีการควบคุมรายการจำนวนมากการเล่นอัตโนมัติและการวนซ้ำใน HTML5 คุณสมบัติเหล่านี้ดีสำหรับคุณที่จะเขียนเช่นข้างต้น แต่วิธีที่แนะนำคือการเขียนดังนี้:
<audio src = "myfirstmusic.ogg" ควบคุม loop การเล่นอัตโนมัติ>
เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบเสียง
</เสียง>
เนื่องจากเบราว์เซอร์พบคุณสมบัติเหล่านี้หมายความว่าคุณสมบัติเหล่านี้จะเปิดใช้งาน กล่าวคือถ้าคุณเขียนคุณสมบัติเหล่านี้และตั้งค่าเป็นเท็จอย่างมีประสิทธิภาพเอฟเฟกต์ยังคงเทียบเท่ากับความจริงดังนั้นโดยทั่วไปจึงแนะนำให้เขียนชื่อแอตทริบิวต์เท่านั้น
ปัญหาการเขียนนี้มีอยู่ในรูปแบบ คุณสมบัติใหม่ของรูปแบบและอินพุตเป็นคุณสมบัติบูลีนและควรใช้วิธีการเขียนที่แนะนำ
องค์ประกอบที่ระบุตัวชี้วัด ไม่ใช่ทุกเบราว์เซอร์ที่รองรับองค์ประกอบต่อไปนี้ แต่โดยทั่วไปคุณสามารถเห็นผลกระทบต่อโครเมี่ยม องค์ประกอบแถบความคืบหน้า ใช้องค์ประกอบนี้เพื่อแสดงแถบความคืบหน้าที่ดาวน์โหลดโดยมีเพียงสองแอตทริบิวต์: ค่าและสูงสุดซึ่งง่ายมาก รองรับ Chrome และ Firefox<p> ดาวน์โหลดความคืบหน้า:
<progress value = "1534602" Max = "4603807"> 33%</progress>
</p>
องค์ประกอบตัวชี้วัด ใช้องค์ประกอบนี้เพื่อแสดงค่าที่กำหนดในคลาสช่วงมาตรฐานที่ระบุแผนภาพบ่งชี้และค่าภายในช่วงที่แตกต่างกันจะแสดงสีที่แตกต่างกัน บางเว็บไซต์ใช้สิ่งนี้เพื่อแสดงค่าประสบการณ์ปัจจุบันของผู้ใช้ เมื่อเบราว์เซอร์ไม่รองรับองค์ประกอบนี้ข้อความที่อยู่ตรงกลางขององค์ประกอบจะแสดงโดยตรง ปัจจุบัน Chrome ได้รับการสนับสนุน<p> คะแนนของคุณคือ:
<ค่าเมตร = "88.7" min = "0" max = "100" ต่ำ = "65" สูง = "96" optimum = "100"> b+<//เมตร>
</p>
เรียกใช้มันและคุณจะเห็นสิ่งที่คล้ายกับแถบสีเหลือง หากคุณเปลี่ยนค่าเป็น 50 คุณจะพบว่าสีของแถบตัวบ่งชี้ถูกตั้งโปรแกรมเป็นสีแดง
มีการแนะนำองค์ประกอบใหม่มากมาย สำหรับคำอธิบายองค์ประกอบเพิ่มเติมโปรดดูรายการแท็กที่สมบูรณ์ใน W3C
การอ้างอิงเชิงปฏิบัติ: การสอน W3C: http://www.w3schools.com/html5/default.aspคำแนะนำอย่างเป็นทางการ html5: http://dev.w3.org/html5/html-author/
เว็บไซต์คู่มือที่ดีงาม: http://html5doctor.com/
การสอนภาษาจีน html5: http://www.html5china.com/
บล็อก Front-end ที่ดี: http://www.pjhome.net/default.asp?cateid=1