หมายเหตุการศึกษา HTML5: ความแตกต่างระหว่าง HTML5 และ HTML แบบดั้งเดิม

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

การเปลี่ยนแปลงที่กล่าวถึงในจุดความรู้นี้หมายถึงการเปลี่ยนแปลงที่กำหนดไว้ใน HTML4 ส่วนใหญ่ดังนี้:

1. อักขระนามสกุลไฟล์ (.html หรือ .htm) ของ HTML5 ยังคงไม่เปลี่ยนแปลงจากประเภทเนื้อหา (ข้อความ/HTML)

2. ใน HTML5 หากคุณจงใจไม่ใช้การประกาศเวอร์ชันเอกสารจะใช้กับ HTML ทุกรุ่น

3. เริ่มต้นจาก HTML5 ขอแนะนำให้ใช้ UTF-8 สำหรับการเข้ารหัสอักขระของไฟล์

4. HTML5 ทำให้มั่นใจได้ถึงความเข้ากันได้สูงสุดกับรุ่น HTML ก่อนหน้า

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

•องค์ประกอบที่ไม่ได้รับอนุญาตให้เขียนเครื่องหมายสิ้นสุดคือ: พื้นที่, ฐาน, br, col ......

•แท็กสิ้นสุด: Li, DT, DD, P, RT ...

•เครื่องหมายเริ่มต้นและเครื่องหมายสิ้นสุดสามารถละเว้นได้: html, หัว, ร่างกาย ...

•องค์ประกอบส่วนแสดงถึงบล็อกเนื้อหาในหน้าเช่นบทส่วนหัวส่วนท้ายหรือส่วนอื่น ๆ ของหน้า

•องค์ประกอบบทความแสดงถึงเนื้อหาของเนื้อหาอิสระในหน้าเว็บที่ไม่เกี่ยวข้องกับบริบทเช่นบทความในบล็อกหรือบทความในหนังสือพิมพ์

•องค์ประกอบนอกเหนือจากข้อมูลเสริมที่เกี่ยวข้องกับเนื้อหาขององค์ประกอบบทความนอกเนื้อหาขององค์ประกอบบทความ;

•องค์ประกอบส่วนหัวแสดงถึงชื่อของบล็อกเนื้อหาหรือทั้งหน้าในหน้า

•องค์ประกอบ HGroup ใช้เพื่อรวมชื่อของทั้งหน้าหรือบล็อกเนื้อหาในหน้า;

•องค์ประกอบส่วนท้ายแสดงถึงเชิงอรรถไปยังทั้งหน้าหรือบล็อกเนื้อหาในหน้า โดยทั่วไปแล้วมันจะมีชื่อของผู้สร้างวันที่สร้างและข้อมูลติดต่อผู้สร้าง

•องค์ประกอบ NAV หมายถึงส่วนหนึ่งของลิงก์นำทางในหน้า;

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

•องค์ประกอบเสียงกำหนดเสียงเช่นเพลงหรือสตรีมเสียงอื่น ๆ

•องค์ประกอบที่ฝังใช้เพื่อแทรกมัลติมีเดียต่างๆและรูปแบบสามารถเป็น MIDI, WAV, AU, MP3, ฯลฯ ;

•ควรใช้องค์ประกอบเครื่องหมายเพื่อนำเสนอข้อความที่ต้องใช้ทางสายตาซึ่งจำเป็นต้องเน้นหรือเน้นไปที่ผู้ใช้ แอปพลิเคชันทั่วไปคือการเน้นคำค้นหาการค้นหาไปยังผู้ใช้ในผลการค้นหา

•องค์ประกอบความคืบหน้าแสดงถึงกระบวนการทำงาน

•องค์ประกอบทับทิมหมายถึงคำอธิบายประกอบทับทิม (การออกเสียงภาษาจีนหรือตัวละคร)

•องค์ประกอบ RT แสดงถึงการตีความหรือการออกเสียงของตัวละคร (การออกเสียงภาษาจีนหรือตัวละคร)

•องค์ประกอบ RP ใช้ในความคิดเห็นทับทิมเพื่อกำหนดสิ่งที่แสดงในเบราว์เซอร์ที่ไม่รองรับองค์ประกอบทับทิม

•องค์ประกอบ WBR แสดงถึงการแบ่งสายซอฟต์และเมื่อความกว้างไม่เพียงพอให้หยุดพักสายที่นี่

•องค์ประกอบผ้าใบแสดงถึงกราฟิกเช่นแผนภูมิและภาพอื่น ๆ

•องค์ประกอบ Cammand แสดงปุ่มคำสั่งเช่นปุ่มตัวเลือกกล่องกาเครื่องหมายหรือปุ่ม

•องค์ประกอบรายละเอียดแสดงรายละเอียดที่ผู้ใช้ร้องขอและสามารถรับได้

•องค์ประกอบ DataGrid แสดงรายการข้อมูลเพิ่มเติมซึ่งแสดงในรูปแบบของรายการต้นไม้

•องค์ประกอบ keygen ระบุการสร้างคีย์

•องค์ประกอบเอาต์พุตแสดงถึงประเภทของเอาต์พุตที่แตกต่างกันเช่นเอาต์พุตของสคริปต์

•องค์ประกอบต้นทางกำหนดทรัพยากรสื่อสำหรับองค์ประกอบสื่อ (เช่น <video> และ <เสียง>)

•องค์ประกอบเมนูแสดงรายการเมนู

•ประเภทอีเมลระบุกล่องป้อนข้อความที่ต้องป้อนที่อยู่ e-main

•ประเภท URL ระบุกล่องป้อนข้อความที่ต้องป้อนในที่อยู่ URL

•ประเภทหมายเลขระบุกล่องป้อนข้อความที่ต้องป้อน

•ประเภทช่วงระบุว่ากล่องอินพุตข้อความที่ต้องป้อนภายในช่วงของค่าตัวเลขที่กำหนด

HTML5 มีกล่องข้อความอินพุตใหม่หลายกล่องสำหรับการเลือกวันที่และเวลา:

•วันที่ -เลือกวันเดือนและปี

•เดือน - เลือกเดือนและปี

•สัปดาห์ - เลือกสัปดาห์และปี

•เวลา - เลือกเวลา (ชั่วโมงและนาที)

• DateTime - เลือกเวลาวันเดือนปี (เวลา UTC)

• Datetime.local -Select Time, วันเดือน, เดือน, ปี (เวลาท้องถิ่น)

•สำหรับองค์ประกอบต่าง ๆ เช่น basefont, big, center, Font, S, Strike, TT และ U เนื่องจากฟังก์ชั่นของพวกเขาถูกนำมาใช้อย่างหมดจดเพื่อแสดงหน้าจอและ HTML5 สนับสนุนการแก้ไขฟังก์ชั่นการแสดงผลหน้าจอแบบครบวงจรในแผ่นสไตล์ CSS ดังนั้นองค์ประกอบเหล่านี้จึงถูกยกเลิก

•สำหรับองค์ประกอบเฟรมชุดองค์ประกอบเฟรมและองค์ประกอบ noframes เนื่องจากกรอบเฟรมมีผลกระทบเชิงลบต่อความพร้อมใช้งานของหน้าเว็บเฟรมเฟรมไม่ได้รับการสนับสนุนใน HTML5 อีกต่อไปและมีเพียงเฟรมเวิร์ก iframe เท่านั้น

•สำหรับแอปเพล็ต, bgsound, กะพริบ, กระโจมและองค์ประกอบอื่น ๆ เนื่องจากมีเพียงเบราว์เซอร์บางตัวเท่านั้นที่รองรับองค์ประกอบเหล่านี้โดยเฉพาะอย่างยิ่ง BGSOUND และองค์ประกอบปะรำซึ่งได้รับการสนับสนุนจาก Internet Explorer เท่านั้น วิธีการเขียนโปรแกรม

•ยกเลิกองค์ประกอบ RB และใช้องค์ประกอบทับทิมเพื่อแทนที่

•ยกเลิกองค์ประกอบตัวย่อและใช้องค์ประกอบ ABBR เพื่อแทนที่

•ยกเลิกองค์ประกอบ DIR และใช้องค์ประกอบ UL เพื่อแทนที่

•ยกเลิกองค์ประกอบ ISINDEX และแทนที่ด้วยองค์ประกอบฟอร์มและองค์ประกอบอินพุต

•ยกเลิกองค์ประกอบรายชื่อและใช้องค์ประกอบล่วงหน้าเพื่อแทนที่

•ยกเลิกองค์ประกอบ XMP และใช้องค์ประกอบรหัสเพื่อแทนที่

•ยกเลิกองค์ประกอบ NextId และใช้ GUIDS แทน

•ยกเลิกองค์ประกอบข้อความธรรมดาและใช้ประเภทข้อความ/MIME PLIAN เพื่อแทนที่

•เพิ่มแอตทริบิวต์ออโต้โฟกัสซึ่งช่วยให้องค์ประกอบสามารถโฟกัสได้โดยอัตโนมัติเมื่อหน้าจอเปิดโดยการระบุแอตทริบิวต์

•เพิ่มแอตทริบิวต์ PlaceHolder ซึ่งจะแจ้งการป้อนข้อมูลของผู้ใช้โดยแจ้งให้ผู้ใช้ทราบถึงสิ่งที่เขาสามารถป้อนได้

•เพิ่มแอตทริบิวต์แบบฟอร์มใหม่ประกาศว่ารูปแบบใดเป็นของและวางไว้ที่ใดก็ได้บนหน้าไม่ใช่ภายในแบบฟอร์ม

•เพิ่มแอตทริบิวต์ที่ต้องการซึ่งหมายความว่าผู้ใช้จะตรวจสอบเมื่อส่ง คุณต้องมีเนื้อหาอินพุตในองค์ประกอบเมื่อตรวจสอบ

•เพิ่มแอตทริบิวต์สื่อซึ่งระบุว่าทำไม URL เป้าหมายจึงได้รับการปรับให้เหมาะสมโดยสื่อ/อุปกรณ์ประเภทและสามารถใช้งานได้เมื่อแอตทริบิวต์ HREF มีอยู่;

•เพิ่มแอตทริบิวต์ Hreflang และแอตทริบิวต์ REL เพื่อรักษาความสอดคล้องกับองค์ประกอบ A และองค์ประกอบลิงค์

•แอตทริบิวต์สาธุคุณซึ่งระบุรายการที่จะแสดงตามลำดับย้อนกลับ

•เพิ่มแอตทริบิวต์ async ลงในองค์ประกอบสคริปต์ซึ่งกำหนดว่าสคริปต์จะดำเนินการแบบอะซิงโครนัสหรือไม่

•คุณลักษณะทั้งหมดที่สามารถแทนที่ด้วยแผ่นสไตล์ CSS จะถูกยกเลิก

•แอตทริบิวต์ฟุ่มเฟือยเช่น: เป้าหมายโปรไฟล์เวอร์ชัน ฯลฯ จะถูกยกเลิก

ใน HTML5 มีการเพิ่มแนวคิดใหม่ของ '' แอตทริบิวต์ทั่วโลก แอตทริบิวต์ทั่วโลกที่เรียกว่าหมายถึงคุณลักษณะที่สามารถใช้กับองค์ประกอบใด ๆ

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

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

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

•คุณสมบัตินี้เป็นคุณสมบัติใหม่ที่จัดทำโดย HTML 5 สำหรับองค์ประกอบอินพุต (type = text) และ textarea ซึ่งส่วนใหญ่จะดำเนินการตรวจสอบการสะกดและไวยากรณ์เกี่ยวกับเนื้อหาอินพุตของผู้ใช้ ค่าแอตทริบิวต์เป็นค่าบูลีน เมื่อเขียนคุณต้องประกาศอย่างชัดเจนว่าค่าแอตทริบิวต์เป็นจริงหรือเท็จ วิธีการเขียนมีดังนี้:

<! - วิธีการเขียนสองวิธีต่อไปนี้ถูกต้อง -> <textarea spellcheck = true> <input type = text cellcheck = false> <! - วิธีการเขียนสองวิธีต่อไปนี้ผิด -> <textarea spellcheck>

ใน HTML4 องค์ประกอบรองในแบบฟอร์มจะต้องเขียนภายในแบบฟอร์ม แต่ใน HTML5 พวกเขาสามารถเขียนได้ทุกที่บนหน้าและจากนั้นคุณลักษณะของฟอร์มจะถูกกำหนดให้กับองค์ประกอบและค่าแอตทริบิวต์คือ ID ของหน่วยแบบฟอร์ม

คัดลอกรหัส