คำอธิบายและการใช้แท็ก HTML5 ใหม่

ความคิดเห็น: HTML 5 เป็นมาตรฐานเครือข่ายใหม่โดยมีวัตถุประสงค์เพื่อแทนที่ HTML 4.01, XHTML 1.0 และ DOM ระดับ HTML มาตรฐาน HTML

HTML 5 มีองค์ประกอบและคุณลักษณะใหม่ที่สะท้อนเว็บไซต์การใช้งานสมัยใหม่ทั่วไป บางคนมีความคล้ายคลึงกับแท็ก <div> และ <span> แต่มีความหมายบางอย่างเช่น <vain> (บล็อกการนำทางเว็บไซต์) และ <footer> แท็กนี้จะเอื้อต่อการจัดทำดัชนีเครื่องมือค้นหาอุปกรณ์หน้าจอขนาดเล็กและผู้พิการทางสายตา นอกจากนี้ยังมีคุณสมบัติใหม่สำหรับองค์ประกอบการท่องเว็บอื่น ๆ ผ่านอินเทอร์เฟซมาตรฐานเช่นแท็ก <Audio> และ <Video>

แท็ก HTML 4 ที่ล้าสมัยบางตัวจะถูกยกเลิกรวมถึงที่ใช้อย่างหมดจดเป็นเอฟเฟกต์การแสดงผลเช่น <font> และ <center> เนื่องจากพวกเขาถูกแทนที่ด้วย CSS นอกจากนี้ยังมีพฤติกรรมเครือข่ายบางอย่าง (ผ่าน) ผ่าน DOM

มาดูการใช้แท็กใหม่บางอย่างที่จัดทำโดย HTML 5 และความแตกต่างจาก HTML 4

แท็ก <Saticor> กำหนดเนื้อหาภายนอก ตัวอย่างเช่นบทความใหม่จากผู้ให้บริการข่าวภายนอกไม่ว่าจะมาจากบล็อกหรือจากฟอรัม หรือมาจากแหล่งข้อมูลภายนอกอื่น ๆ

html5: <บทความ> </บทความ>

html4: <div> </div>

แท็ก <side> กำหนดเนื้อหาอื่นนอกเหนือจากบทความ เนื้อหาของกันควรเกี่ยวข้องกับเนื้อหาของบทความ

HTML5: เนื้อหาของ <side> นอกเหนือจากนั้นเป็นเนื้อหาอิสระ แต่ควรเกี่ยวข้องกับเนื้อหาของเอกสาร </side>

HTML4: <div> เนื้อหาเป็นอิสระ แต่ควรเกี่ยวข้องกับเนื้อหาของเอกสาร </div>

แท็ก <oadio> กำหนดเสียงเช่นเพลงหรือสตรีมเสียงอื่น ๆ

html5: <audio src = someaudio.wav> เบราว์เซอร์ของคุณไม่รองรับแท็กเสียง </เสียง>

html4: <object type = application/ogg data = someaudio.wav> <param name = src value = someaudio.wav> </object>

แท็ก <sanvas> กำหนดกราฟิกเช่นแผนภูมิและภาพอื่น ๆ องค์ประกอบ HTML นี้ออกแบบมาสำหรับกราฟิกเวกเตอร์ไคลเอ็นต์ มันไม่ได้ดำเนินการด้วยตัวเอง แต่นำเสนอ API การวาดภาพไปยังไคลเอนต์ JavaScript เพื่อเปิดใช้งานสคริปต์เพื่อวาดทุกสิ่งที่คุณต้องการวาดลงบนผืนผ้าใบ

html5: <canvas id = mycanvas width = 200 ความสูง = 200> </anvas>

html4: <data object = inc/hdr.svg type = image/svg+xml width = 200 ความสูง = 200> </jobch>

แท็ก <sommand> กำหนดปุ่มคำสั่งเช่นปุ่มตัวเลือกกล่องกาเครื่องหมายหรือปุ่ม

html5: <คำสั่ง onclick = cut () label = cut>

HTML4: ไม่มี

แท็ก <Tatalist> กำหนดรายการข้อมูลเพิ่มเติม ใช้กับองค์ประกอบอินพุตเพื่อสร้างรายการแบบหล่นลงของค่าอินพุต

HTML5: <Datalist> </tatalist>

HTML4: ดู Combobox

แท็ก <inate> กำหนดรายละเอียดขององค์ประกอบที่ผู้ใช้สามารถดูหรือซ่อนได้โดยคลิก ใช้กับ <gelend> เพื่อสร้างชื่อของรายละเอียด ผู้ใช้และรายละเอียดสามารถเปิดหรือปิดได้เมื่อคลิกที่ชื่อ

html5: <betice> </รายละเอียด>

html4: <dl style = display: hidden> </dl>

แท็ก <Embed> กำหนดเนื้อหาที่ฝังอยู่เช่นปลั๊กอิน

html5: <ฝัง src = horse.wav />

html4: <object data = flash.swf type = application/x-shockwave-flash> </ject>

แท็ก <potcaption> กำหนดชื่อขององค์ประกอบรูป องค์ประกอบ Figcaption ควรวางไว้ที่ตำแหน่งขององค์ประกอบลูกแรกหรือครั้งสุดท้ายขององค์ประกอบรูป

html5: <รูป> <potcaption> prc </pigcaption> </migure>

HTML4: ไม่มี

แท็ก <รูป> ใช้เพื่อรวมองค์ประกอบ ใช้องค์ประกอบ <potcaption> เพื่อเพิ่มชื่อไปยังกลุ่มองค์ประกอบ

HTML5: <รูป> <Potcaption> PRC </figcaption> <p> สาธารณรัฐประชาชนจีนเกิดในปี 1949 ... </p> </pige>

html4: <d1> <h1> prc </h1> <p> สาธารณรัฐประชาชนจีนเกิดในปี 1949 ... </p> </dl>

แท็ก <footer> กำหนดส่วนท้ายของส่วนหรือเอกสาร โดยทั่วไปจะมีชื่อของผู้สร้างวันที่สร้างเอกสารและ/หรือข้อมูลการติดต่อ

html5: <footer> </ooter>

html4: <div> </div>

แท็ก <ส่วนหัว> กำหนดส่วนหัวของส่วนหรือเอกสาร

html5: <ส่วนหัว> </header>

html4: <div> </div>

แท็ก <Hgroup> ใช้เพื่อรวมชื่อของหน้าเว็บหรือส่วน

html5: <Hgroup> </hgroup>

html4: <div> </div>

แท็ก <seygen> กำหนดคีย์การสร้าง

HTML5: <KeyGen>

HTML4: ไม่มี

<mark> ส่วนใหญ่จะใช้เพื่อนำเสนอข้อความที่ต้องเน้นไปที่ผู้ใช้ แอปพลิเคชันทั่วไปของแท็ก <mark> คือการเน้นคำค้นหาคำหลักไปยังผู้ใช้ในผลการค้นหา

html5: <mark> </kark>

html4: <span> </span>

แท็ก <เมตร> กำหนดน้ำหนักและมาตรการ ใช้เฉพาะตัวชี้วัดที่มีค่าสูงสุดและค่าต่ำสุดที่รู้จัก ขอบเขตของตัวชี้วัดจะต้องกำหนดไม่ว่าจะเป็นในข้อความขององค์ประกอบหรือในแอตทริบิวต์ Min/Max

html5: <เมตร> </meter>

HTML4: ไม่มี

แท็ก <AV> กำหนดส่วนของลิงค์การนำทาง

html5: <av> </av>

html4: <ul> </ul>

แท็ก <Output> กำหนดเอาต์พุตประเภทต่าง ๆ เช่นเอาต์พุตของสคริปต์

html5: <output> </utput>

html4: <span> </span>

<progress> กระบวนการเรียกใช้แท็ก คุณสามารถใช้แท็ก <progress> เพื่อแสดงกระบวนการใช้เวลานานใน JavaScript

html5: <progress> </progress>

HTML4: ไม่มี

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

HTML5: <Ruby> HAN <rt> <rp> (</rp> ㄏㄢˋ <rp>) </rp> </rt> </ruby>

HTML4: ไม่มี

แท็ก <RT> กำหนดการตีความหรือการออกเสียงของตัวละคร (การออกเสียงภาษาจีนหรืออักขระ)

HTML5: <Ruby> HAN <rt> ㄏㄢˋ </rt> </ruby>

HTML4: ไม่มี

<ruby> ความคิดเห็นของแท็ก Ruby (การออกเสียงภาษาจีนหรืออักขระ)

HTML5: <Ruby> HAN <rt> <rp> (</rp> ㄏㄢˋ <rp>) </rp> </rt> </ruby>

HTML4: ไม่มี

แท็ก <section> กำหนดส่วน (ส่วนส่วน) ในเอกสาร ตัวอย่างเช่นบทส่วนหัวส่วนท้ายหรือส่วนอื่น ๆ ของเอกสาร

html5: <section> </section>

html4: <div> </div>

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

html5: <source>

html4: <param>

แท็ก <summary> มีชื่อขององค์ประกอบรายละเอียดซึ่งอธิบายข้อมูลรายละเอียดเกี่ยวกับเอกสารหรือส่วนเอกสาร องค์ประกอบสรุปควรเป็นองค์ประกอบลูกแรกขององค์ประกอบรายละเอียด

html5: <betice> <summary> html 5 </summary> เอกสารนี้สอนทุกสิ่งที่คุณต้องเรียนรู้เกี่ยวกับ html 5. </petials>

HTML4: ไม่มี

แท็ก <time> กำหนดวันที่หรือเวลาหรือทั้งสองอย่าง

html5: <time> </time>

html4: <span> </span>

แท็ก <video> กำหนดวิดีโอเช่นคลิปภาพยนตร์หรือสตรีมวิดีโออื่น ๆ

html5: <video src = movie.ogg controls = controls> เบราว์เซอร์ของคุณไม่รองรับแท็กวิดีโอ </video>

html4: <object type = video/ogg data = movie.ogv> <param name = src value = movie.ogv> </object>