บทข้างต้นพูดถึงทักษะเจ็ดประการแรกของ HTML5 และตอนนี้มาเรียนรู้ทักษะใหม่ ๆ
8. ตัวยึดตำแหน่ง
ก่อนหน้านี้เราจำเป็นต้องใช้ JavaScript เพื่อสร้างตัวยึดตำแหน่งสำหรับกล่องข้อความ คุณสามารถตั้งค่าแอตทริบิวต์ค่าเพื่อดูว่าเหมาะสมหรือไม่ แต่ตราบใดที่ผู้ใช้ลบข้อความเนื้อหาอินพุตจะว่างเปล่าอีกครั้ง แอตทริบิวต์ของตัวยึดจะชดเชยสิ่งนี้ได้อย่างมีประสิทธิภาพ
<ชื่ออินพุต = ประเภทอีเมล = ผู้ถือครองอีเมล[email protected] />
9. ที่เก็บข้อมูลท้องถิ่น
ต้องขอบคุณที่เก็บข้อมูลท้องถิ่นของ HTML5 เราสามารถให้เบราว์เซอร์ขั้นสูงจำสิ่งที่เราป้อนได้และแม้ว่าเบราว์เซอร์จะปิดหรือรีเฟรชในภายหลังมันจะไม่ได้รับผลกระทบ แม้ว่าเบราว์เซอร์ทั้งหมดจะไม่รองรับ แต่ Internet Internet Explorer 8, Safari 4, Firefox 3.5
10. ส่วนหัวและส่วนท้ายแบบความหมาย
<div id = ส่วนหัว>
-
</div>
<div id = footer>
-
</div>
ไปเป็นรหัสด้านบน Divs ไม่มีโครงสร้างความหมายใด ๆ โดยพื้นฐานแม้ว่าจะใช้ ID ก็ตาม ใน HTML5 เราสามารถใช้องค์ประกอบ <ส่วนหัว> และ <footer> และรหัสด้านบนสามารถแทนที่ได้ด้วย:
<ส่วนหัว>
-
</header>
<footer>
-
</footer>
ระวังอย่าทำให้สับสนทั้งสององค์ประกอบนี้ด้วยหัวและเท้าของเว็บไซต์ พวกเขาเป็นเพียงตู้คอนเทนเนอร์ที่เป็นตัวแทนของพวกเขา
11. IE และ HTML5
ต้องใช้เงินเป็นจำนวนมากในการทำความเข้าใจองค์ประกอบ HTML5 ใหม่ เพื่อให้แน่ใจว่าองค์ประกอบ HTML5 ใหม่สามารถแสดงได้อย่างถูกต้องเป็นองค์ประกอบระดับบล็อกจำเป็นต้องกำหนดสไตล์ของพวกเขาด้วยรหัสต่อไปนี้:
ส่วนหัว, ส่วนท้าย, บทความ, ส่วน, NAV, เมนู, hGroup {
แสดง: บล็อก;
-
ถึงกระนั้นก็คือยังไม่ทราบว่าองค์ประกอบเหล่านี้คืออะไรดังนั้นจึงไม่สนใจรูปแบบเหล่านี้และจำเป็นต้องใช้รหัสต่อไปนี้เพื่อแก้ปัญหานี้:
Document.createElement (บทความ);
Document.createElement (ส่วนท้าย);
document.createElement (ส่วนหัว);
Document.createElement (HGroup);
Document.createElement (NAV);
document.createElement (เมนู);
12. ชื่อกลุ่ม (HGroup)
สมมติว่าเว็บไซต์มีชื่อและแท็กคำบรรยายที่จะทำเครื่องหมายด้วยแท็ก <H1> และ <H2> ตามลำดับ ไม่มีทางใน HTML4 ที่สามารถอธิบายความสัมพันธ์ระหว่างทั้งสองกับความสัมพันธ์เชิงความหมายที่ดี นอกจากนี้เมื่อใช้ H2 เพื่อแสดงชื่ออื่น ๆ บนหน้าเว็บมีปัญหาเพิ่มเติมในแง่ของลำดับชั้น การใช้องค์ประกอบชื่อกลุ่ม Hgroup เราสามารถรวบรวมชื่อเหล่านี้เข้าด้วยกันโดยไม่ส่งผลกระทบต่อโครงร่างทั้งหมดของเอกสาร
<ส่วนหัว>
<hgroup>
<H1> เรียกคืนเพจแฟน ๆ </h1>
<H2> เฉพาะสำหรับผู้ที่ต้องการความทรงจำตลอดชีวิต </h2>
</hgroup>
</header>
13. คุณลักษณะที่ต้องการ
แบบฟอร์มอนุญาตให้มีคุณสมบัติที่จำเป็นใหม่โดยระบุว่าจำเป็นต้องป้อนข้อมูลเฉพาะหรือไม่ คุณสามารถประกาศแอตทริบิวต์นี้ในสองวิธีต่อไปนี้ตามการตั้งค่าของคุณเองสำหรับการเขียนโค้ด:
<ประเภทอินพุต = ชื่อข้อความ = จำเป็นต้องใช้บางส่วน>
หรือเข้มงวดมากขึ้น:
<ประเภทอินพุต = ชื่อข้อความ = บางอย่างจำเป็น = จำเป็น = ต้องการ>
รหัสทั้งสองบรรทัดด้านบนงาน หลังจากใช้รหัสบรรทัดนี้และเบราว์เซอร์รองรับแอตทริบิวต์ที่ต้องการจะไม่ส่งแบบฟอร์มว่างเปล่า นี่คือตัวอย่างง่ายๆและเรายังเพิ่มแอตทริบิวต์ตัวยึด:
<วิธีการฟอร์ม = โพสต์การกระทำ =>
<label for = someInput> ชื่อของคุณ: </lable>
<ประเภทอินพุต = ข้อความข้อความ = ชื่อ someInput = someInput placeholder = Douglas Quaid ต้องการ>
<button type = submit> go </button>
</form>
หากอินพุตว่างเปล่าแบบฟอร์มจะไม่ถูกส่งโดยเน้นกล่องข้อความ
14. แอตทริบิวต์ออโต้โฟกัส
ในทำนองเดียวกันด้วย HTML5 โซลูชั่น JavaScript ไม่จำเป็นต้องใช้เพื่อแก้ปัญหาการโฟกัสอัตโนมัติอีกต่อไป หากควรเลือกอินพุตหรือมุ่งเน้นตอนนี้เราสามารถใช้คุณสมบัติ AutoFocus ของ HTML
<ประเภทอินพุต = ชื่อข้อความ = someInput placeholder = Douglas Quaid Autofocus ที่ต้องการ>
15. การสนับสนุนเสียง
เราไม่จำเป็นต้องพึ่งพาปลั๊กอินของบุคคลที่สามอีกต่อไปเพื่อให้เสียง HTML5 จัดเตรียมองค์ประกอบเสียง <Audio> ปัจจุบันมีเพียงเบราว์เซอร์ล่าสุดเท่านั้นที่รองรับ HTML5 Audio ณ จุดนี้จะเป็นการดีกว่าที่จะให้ความเข้ากันได้ย้อนหลัง
<audio autoplay = การควบคุมการเล่นอัตโนมัติ = การควบคุม>
<Source Src = file.ogg />
<ต้นทาง src = file.mp3″ />
<a href = file.mp3″> ดาวน์โหลดไฟล์นี้ </a>
</เสียง>
เมื่อพูดถึงรูปแบบเสียงทั้ง Mozilla และ Webkit ไม่ได้ให้การสนับสนุนอย่างเต็มที่ Firefox ต้องการดูไฟล์. O.OGG และเบราว์เซอร์ WebKit รองรับส่วนขยาย. mp3 ที่พบมากที่สุดเท่านั้น ซึ่งหมายความว่าคุณควรสร้างเสียงสองเวอร์ชันอย่างน้อยก็จนถึงตอนนี้ เมื่อ Safari โหลดหน้าเว็บมันไม่รู้จักไฟล์รูปแบบ. OGG และจะถูกข้ามและย้ายไปยังเวอร์ชัน MP3 โปรดทราบว่า IE ไม่รองรับและ Opera 10 หรือต่ำกว่ารองรับไฟล์. wav เท่านั้น