HTML 5.1 คุณสมบัติใหม่และตัวอย่างแอปพลิเคชันของคุณสมบัติใหม่และแอปพลิเคชัน

อย่างที่เราทราบกันดีว่า HTML5 เป็นของ Wanwei Network Alliance (W3C) ในเดือนพฤศจิกายน 2559 W3C อัปเดตมาตรฐานการออกกำลังกายระยะยาว HTML 5 ซึ่งเป็นการอัปเดตเล็ก ๆ ครั้งแรกใน 2 ปี คุณสมบัติการใช้งาน HTML 5.1 ที่เสนอในขั้นต้นจำนวนมากได้ถูกลบออกเนื่องจากข้อบกพร่องในการออกแบบและขาดการสนับสนุนจากผู้ผลิตเบราว์เซอร์

แม้ว่าจะมีองค์ประกอบและการปรับปรุงฟังก์ชั่นบางอย่าง แต่ก็ถูกนำไปใช้ใน HTML 5.1 แต่ก็ยังคงเป็นการอัปเดตเล็กน้อย องค์ประกอบใหม่เหล่านี้บางส่วนรวมถึงป้ายกำกับรวม

W3C และจุดเริ่มต้นของการพัฒนาร่าง HTML 5.2 คาดว่าจะได้รับการปล่อยตัวเมื่อปลายปี 2560 สิ่งที่เราต้องการนำเสนอที่นี่คือลักษณะการทำงานใหม่และการปรับปรุงฟังก์ชั่นที่แนะนำในเวอร์ชัน 5.1 คุณไม่จำเป็นต้องย้าย JavaScript เพื่อใช้คุณสมบัติเหล่านี้ ไม่ใช่เบราว์เซอร์ทั้งหมดที่รองรับคุณสมบัติเหล่านี้ดังนั้นคุณควรตรวจสอบเพื่อตรวจสอบการสนับสนุนของเบราว์เซอร์ก่อนที่จะใช้กับสภาพแวดล้อมการผลิต

คนส่วนใหญ่ที่ใช้ target = '_ blank' ไม่ทราบข้อเท็จจริงที่น่าสนใจ-ฉลากที่เพิ่งเปิดใหม่สามารถเปลี่ยน window.opener.location ไปยังหน้าการตกปลาเครือข่ายบางหน้า มันจะเป็นตัวแทนของคุณในหน้าเปิดเพื่อดำเนินการรหัส JavaScript ที่เป็นอันตราย เนื่องจากผู้ใช้เชื่อว่าหน้าเปิดนั้นปลอดภัยพวกเขาจะไม่สงสัย

เพื่อกำจัดปัญหานี้อย่างสมบูรณ์ HTML 5.1 ได้มาตรฐานการใช้คุณสมบัติ REL = Noopner ที่ได้มาตรฐานโดยการแยกบริบทของเบราว์เซอร์ rel = noopener สามารถใช้ในแท็ก <a> และ <rea>

 <a href =# target = _blank roth = noopner> ลิงค์ต้องการสร้างปัญหาอีกต่อไป </a>

แท็ก <potcaption> แสดงถึงชื่อหรือตำนานที่เกี่ยวข้องกับองค์ประกอบ <migure> ซึ่งมักจะใช้เป็นคอนเทนเนอร์สำหรับองค์ประกอบภาพเช่นรูปภาพแผนภูมิภาพประกอบ ในรุ่น HTML ต้น <Figcaption> สามารถใช้เป็นรุ่นแรกหรือสุดท้าย <รูป> sub -label เท่านั้น HTML5.1 ได้ผ่อนคลายขีด จำกัด นี้และตอนนี้คุณสามารถใช้ <potcaption> ได้ทุกที่ในคอนเทนเนอร์ <mige>

 <Ratlicle> <H1> พาดหัวของข่าว/รูปในปัจจุบัน> <p> นี่คือการปรับขึ้นของราคาน้ำมันในสองเดือนและที่สามในกรณีของดีเซลในหนึ่งสัปดาห์

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

Element.ForCespellCheck () จะบังคับให้ตัวแทนผู้ใช้รายงานการสะกดคำและข้อผิดพลาดไวยากรณ์ที่ตรวจพบในองค์ประกอบข้อความแม้ว่าผู้ใช้จะไม่มุ่งเน้นการป้อนข้อมูลในองค์ประกอบ

 <p spellcheck = true> <label> ชื่อ: <อินพุต spellCheck = false id = textbox> </label> </p>

HTML เวอร์ชันใหม่ช่วยให้คุณสร้างองค์ประกอบ <potion> ที่ว่างเปล่า มันอาจเป็นส่วนย่อยของ <ptgroup>, <Patalist> หรือ <SELECT> องค์ประกอบ คุณจะพบว่าคุณสมบัตินี้สามารถช่วยได้เมื่อออกแบบตารางผู้ใช้ฝ่ายเดียว -เป็นมิตร

คุณสมบัติของตัวแปรบูลีนที่อนุญาตให้ใช้งาน FullScreen ที่พัฒนาขึ้นสำหรับเฟรมช่วยให้คุณสามารถควบคุมได้ว่าเนื้อหาสามารถแสดงผ่านหน้าจอได้หรือไม่โดยใช้เมธอด RequestFullScreen () ตัวอย่างเช่นเราใช้ iframes ที่ฝังอยู่ใน YouTube เป็นตัวอย่าง คุณต้องตั้งค่าคุณสมบัติที่อนุญาตให้ใช้งานเพื่อให้ผู้เล่นแสดงวิดีโอเต็มรูปแบบ

 <atadicle> <ส่วนหัว> <p> <img src =/usericons/16235> <b> fred flintstone </b> </p> <p> <a href =/post/30934 r = บุ๊กมาร์ก> 12:44 <44 < /a> - <a href =#a.503439551> โพสต์ส่วนตัว </a> </p> </header> <p> <p> ตรวจสอบวิดีโอใหม่ของฉัน! >

HTML5.1 ช่วยให้คุณสามารถฝังส่วนหัวและส่วนท้ายในส่วนหัวอื่น คุณสามารถเพิ่มส่วนหัวหรือส่วนท้ายลงในองค์ประกอบหัวได้หากพวกเขามีตัวเองในเนื้อหาย่อหน้า หากคุณต้องการเพิ่มรายละเอียดอย่างละเอียดเช่น <section> และ <บทความ> แท็กไปยังองค์ประกอบย่อหน้าความหมายคุณลักษณะนี้จะมีประโยชน์มาก

ในรหัสต่อไปนี้ฉลาก <SaticorS> มีแท็ก <Eader> ซึ่งมีแท็ก <side> พร้อมแท็ก <weader>

 <Artader> <ส่วนหัว> <h2> บทเรียน: วิธีการปรุงไก่ </h2> <ต่อไป> <ส่วนหัว> <h2> เกี่ยวกับผู้แต่ง: Tom Haank </h2> <a href =./tomhank/> ติดต่อเขา! </a/p> </header> <p> ผู้เชี่ยวชาญในการทำอาหาร เข้าไปในกระเป๋าซิปด้านบนด้วยไก่และปิดผนึก

HTML เวอร์ชันใหม่ช่วยให้คุณสามารถเพิ่มรูปภาพความกว้างเป็นศูนย์ คุณลักษณะนี้สามารถใช้งานได้เมื่อภาพไม่จำเป็นต้องแสดงต่อผู้ใช้ หากองค์ประกอบ IMG มีการใช้งานอื่น ๆ มันไม่ได้เป็นเพียงภาพตัวอย่างเช่นเป็นส่วนหนึ่งของบริการในการคำนวณจำนวนการดูหน้าเว็บให้ใช้ 0 ค่าในคุณสมบัติความกว้างและความสูง สำหรับรูปภาพที่มีความกว้าง 0 ขอแนะนำให้ใช้แอตทริบิวต์ที่ว่างเปล่า

 <img src = theimagefile.jpg width = 0 ความสูง = 0 src = "/uploads/allimg/170217/22010Q544-0.jpg"/>
 วิธีการรายงานใหม่ () ช่วยให้คุณสามารถตรวจสอบแบบฟอร์มและรีเซ็ตผลลัพธ์และรายงานข้อผิดพลาดให้กับผู้ใช้ในตำแหน่งที่เหมาะสมของเบราว์เซอร์ ตัวแทนผู้ใช้สามารถรายงานกฎข้อ จำกัด มากกว่าหนึ่งข้อหากองค์ประกอบเดียวพบปัญหาหลายอย่างในเวลาเดียวกัน สำหรับสถานการณ์นี้อินพุตรหัสผ่านเป็นเนื้อหาที่ต้องเติม แต่ไม่กรอกและจะถูกระบุว่าเป็นข้อผิดพลาด
 <h2> การตรวจสอบแบบฟอร์ม </h2> <p> ป้อนรายละเอียด </p> <form> <dable> ประเภทอินพุตที่บังคับ = ชื่อรหัสผ่าน = รหัสผ่านที่ต้องการ/> </label> <button type = subm it> ส่ง </ปุ่ม > </form> <script> document.quryselector ('Form')
 6. บริบทของเบราว์เซอร์
 ใน HTML 5.1 คุณสามารถใช้เครื่องหมาย <เมนู> เพื่อกำหนดเมนูซึ่งมีองค์ประกอบ <Menuitem> หนึ่งองค์ประกอบขึ้นไปจากนั้นใช้คุณสมบัติ ContextMenu เพื่อผูกเข้ากับองค์ประกอบใด ๆ ID ขององค์ประกอบ <men> ควรสอดคล้องกับค่าของแอตทริบิวต์บริบทขององค์ประกอบที่เราต้องการเพิ่มเมนูบริบทลงไป
 แต่ละ <menuitem> สามารถมีหนึ่งในสามรูปแบบต่อไปนี้:
 ตัวเลือกวิทยุ -รับจากกลุ่ม;
 ช่องทำเครื่องหมาย -เลือกหรือยกเลิกตัวเลือก;
 คำสั่ง -execute การดำเนินการเมื่อคลิก
 <h2 contextmenu = popup-menu> คลิกขวาเพื่อรับการสาธิตเมนูบริบท type = command label = คำสั่ง onclick = การแจ้งเตือน ('คำเตือน')> ช่องทำเครื่องหมาย 2 </menuitem> <menuitem type = ชื่อวิทยุ = Group1> ปุ่มตัวเลือก A </menuitem t ype = ชื่อวิทยุ = Group1 ตรวจสอบ = True Button </menuitem> <menuitem type = depbox ปิดการใช้งาน> ปิดใช้งานรายการเมนู </menuitem> </menual>
 5. ใช้ตัวเลขสุ่มที่เข้ารหัสบนสคริปต์และสไตล์
 Cryptographic Nonce เป็นหมายเลขที่สร้างขึ้นแบบสุ่มซึ่งสามารถใช้ได้เพียงครั้งเดียวและสำหรับการร้องขอแต่ละหน้าจะต้องมีการสร้าง แอตทริบิวต์ nonce นี้สามารถใช้ในองค์ประกอบ <script> และ <style>
 โดยทั่วไปจะใช้ในกลยุทธ์ความปลอดภัยเนื้อหาของเว็บไซต์เพื่อพิจารณาว่าควรใช้รูปแบบและสคริปต์เฉพาะในหน้าหรือไม่ ในรหัสที่ให้ไว้ด้านล่างค่านี้ยากเข้ารหัส แต่ในสถานการณ์การใช้งานจริงค่านี้ถูกสร้างขึ้นแบบสุ่ม
 <script nonce = 'd3ne7uwp43bhr0e'> รหัส JavaScript </script>
 4. ความสัมพันธ์แบบย้อนกลับลำดับ
 แอตทริบิวต์ Rev ถูกกำหนดไว้ใน HTML4 แต่ไม่ปรากฏใน HTML5 W3C ตัดสินใจที่จะรวมคุณลักษณะ Rev ในองค์ประกอบ <a> และ <link> ความสัมพันธ์ระหว่างเอกสารการเชื่อมโยงปัจจุบันและย้อนกลับของการระบุแอตทริบิวต์ REV มันถูกรวมไว้เพื่อรองรับรูปแบบการทำเครื่องหมายโครงสร้างข้อมูลที่ใช้กันอย่างแพร่หลาย RDFA
 ลองใช้เอกสารสองฉบับเพื่อให้ตัวอย่าง
 // เอกสารที่มี URL บทที่ 1.html <link href = lesson2.html rel = next Rev = prev> // documente พร้อม URL บทที่ 2.html <link href = บทที่ 1.html = prev Rev = ถัดไป> roth = next Rev = prev>
 3. แสดง/ซ่อนข้อมูล
 องค์ประกอบใหม่ <petial> และ <summary> ช่วยให้คุณเพิ่มข้อมูลส่วนขยายลงในย่อหน้า คุณสามารถแสดงหรือซ่อนบล็อกข้อมูลเพิ่มเติมผ่านองค์ประกอบการคลิก โดยค่าเริ่มต้นข้อมูลเพิ่มเติมจะถูกซ่อนไว้
 ในรหัสคุณควรใส่เครื่องหมาย <summary> ลงในเครื่องหมาย <betice> ดังที่แสดงด้านล่าง หลังจากฉลาก <summary> คุณสามารถเพิ่มเนื้อหาอื่น ๆ ที่จะซ่อนอยู่
 <section> <h3> ข้อความแสดงข้อผิดพลาด </h3> <betice> <summary> ไฟล์นี้ไม่ได้ดาวน์โหลด Benload Du Du Network Error <dt> ขนาดไฟล์: </dt> <dd> 8 kb </dd> <dt> รหัสข้อผิดพลาด: </dt> <dd> 342a </dd> </dl> </รายละเอียด> </ส่วน>
 2. ประเภทรายการอินพุตเพิ่มเติม
 องค์ประกอบรายการอินพุต HTML ได้ขยายสามประเภทอินพุตทุกสัปดาห์เดือนและวันที่ local
 ตามชื่อแสดงองค์ประกอบสององค์ประกอบแรกอนุญาตให้ผู้ใช้เลือกค่าหนึ่งสัปดาห์และค่าหนึ่งเดือน ทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราว์เซอร์พวกเขาจะถูกแสดงในปฏิทินการวาดภาพที่แสดงช่วยให้คุณสามารถเลือกหนึ่งสัปดาห์หรือเดือนที่เฉพาะเจาะจงของปี
 DataTime-Local แสดงถึงโดเมนวันที่และเวลาอินพุต แต่ไม่มีการตั้งค่าโซนเวลา ข้อมูลของมันสามารถเลือกได้ในวิธีการที่คล้ายกันกับรายการอินพุตเดือนหรือสัปดาห์และเวลาสามารถป้อนเพียงอย่างเดียว
 <section> <h2> สัปดาห์เดือนและ dateTime-local </h2> <form action = action_page.php> เลือกหนึ่งสัปดาห์: <อินพุตประเภท = ชื่อสัปดาห์ = year_week> <อินพุต = ส่ง> </form> <สำหรับการดำเนินการ = action_page.php> วันเกิด (เดือนและปี): <ประเภทอินพุต = ชื่อเดือน = bdaymonth> <ประเภทอินพุต = ส่ง> </form> <form action = action_page.ph P> การเข้าร่วม (วันที่และเวลา): <ประเภทอินพุต = DateTime-Local Name = BdayTime> <อินพุตประเภท = ส่งค่า = ส่ง> </form> </section>
 1. ภาพการตอบสนอง
 W3C แนะนำลักษณะการทำงานบางอย่างและภาพการตอบสนองสามารถทำได้โดยไม่ต้องใช้ CSS พวกเขาคือ ...
 แอตทริบิวต์ภาพ srcset
 แอตทริบิวต์ SRCSET ช่วยให้คุณสามารถระบุแหล่งที่มาของภาพที่เป็นตัวเลือกหลายรายการซึ่งสอดคล้องกับความละเอียดพิกเซลที่แตกต่างกัน มันจะช่วยให้เบราว์เซอร์สามารถแสดงการใช้งานคุณภาพที่เหมาะสมตามอุปกรณ์ผู้ใช้ที่แตกต่างกัน ตัวอย่างเช่นเป็นการดีกว่าที่จะแสดงภาพความละเอียดต่ำสำหรับผู้ใช้ที่มีอุปกรณ์มือถือช้า
 คุณสามารถใช้คุณสมบัติ SRCSET และนำสัญลักษณ์การปรับเปลี่ยน X ของตัวเองเพื่ออธิบายอัตราส่วนพิกเซลของแต่ละภาพ
 <img src = clicks/low-res.jpg srcset = clicks/low-res.jpg 1x, clicks/medium-res.jpg 2x, Clicks/High-res.jpg 3x>
 นอกเหนือจากอัตราส่วนพิกเซลแล้วคุณยังสามารถเลือกใช้สัญลักษณ์การปรับเปลี่ยน W เพื่อระบุรูปภาพที่มีขนาดต่างกัน ในตัวอย่างต่อไปนี้ภาพความละเอียดสูงจะถูกกำหนดเป็นจอแสดงผลเมื่อความกว้างคือ 1600px
 <img src = clicks/low-res.jpg srcset = clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, Clicks/High-res.jpg 1600w>
 แอตทริบิวต์ภาพขนาด
 ส่วนใหญ่ผู้สร้างต้องการแสดงรูปภาพที่แตกต่างกันสำหรับขนาดหน้าจอที่แตกต่างกัน สามารถทำได้ด้วยแอตทริบิวต์ขนาด ช่วยให้คุณสามารถปรับความกว้างสำหรับขนาดของพื้นที่ที่แจกจ่ายไปยังการแสดงภาพจากนั้นใช้คุณสมบัติ SRCSET เพื่อเลือกภาพที่เหมาะสมเพื่อแสดง ตัวอย่างเช่น…
 <img src = clicks/low-res.jpg sizes = (max-width: 25em) 60vw, 100vw srcset = clicks/low-res.jpg 500w, คลิก/ปานกลาง res.jpg 1000w, คลิก/สูง-res.jpg 1600W>
 ที่นี่แอตทริบิวต์ขนาดกำหนด 100%ของความกว้างของภาพของหน้าต่างเมื่อหน้าต่างมากกว่า 25 EM หรือ 60%ของความกว้างมุมมองของมุมมองเมื่อน้อยกว่า 25EM
 องค์ประกอบภาพ
 องค์ประกอบรูปภาพช่วยให้คุณสามารถประกาศรูปภาพสำหรับขนาดหน้าจอที่แตกต่างกัน สิ่งนี้สามารถนำไปใช้งานได้โดยการห่อหุ้ม <IMG> ด้วยองค์ประกอบ <pictions> และอธิบายการเลือกตั้งย่อย <source> หลายตัว
 <Piction> การทำเครื่องหมายเพียงอย่างเดียวไม่แสดงอะไรเลย คุณได้รับการสันนิษฐานว่าแหล่งที่มาของภาพเริ่มต้นจะถูกประกาศเป็นค่าของแอตทริบิวต์ SRC และแหล่งภาพเพิ่มเติมจะถูกวางไว้ในแอตทริบิวต์ Scret
 <pictions> <Source Media = (Max-Width: 25EM) SRCSET = Clicks/Small/Low-res.jpg 1x, Clicks/Small/Medium-res.jpg 2x, clices/small/high-res.jp > <Source Media = (Max-Width: 60EM) SRCSET = Clicks/Large/Low-res.jpg 1x, Clicks/Large/Medium-res.jpg 2x, clices/large/high-res.jpg 3x> <img src = คลิก/ค่าเริ่มต้น/ปานกลาง- res.jpg> </piction>
 สรุป
 ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้