องค์ประกอบ HTML 4.01 ต่อไปนี้ถูกลบไปแล้วใน HTML5 แม้ว่าเบราว์เซอร์ยังคงรองรับแท็กเหล่านี้ด้วยเหตุผลด้านความเข้ากันได้ แต่ขอแนะนำให้ใช้แท็กทางเลือกใหม่ ในทางกลับกัน เบราว์เซอร์เก่าไม่รองรับแท็กใหม่เพียงพอ ขึ้นอยู่กับโครงการ
1. องค์ประกอบที่สามารถแทนที่ได้ด้วย CSSองค์ประกอบเหล่านี้ได้แก่ เบสฟอนต์ ใหญ่ ตรงกลาง ฟอนต์ s ตี tt u องค์ประกอบเหล่านี้มีไว้สำหรับการแสดงหน้าเว็บเท่านั้น และเนื้อหาที่แสดงควรเสร็จสมบูรณ์โดย CSS
2.กรอบองค์ประกอบเหล่านี้ได้แก่ เฟรมเซ็ต เฟรม และโนเฟรม HTML5 ไม่รองรับเฟรมเฟรม แต่รองรับเฉพาะเฟรม iframe หรือใช้รูปแบบฝั่งเซิร์ฟเวอร์ที่ประกอบด้วยหลายหน้าที่สอดคล้องกับเพจ และลบสามแท็กด้านบนออก
3. องค์ประกอบที่รองรับโดยเบราว์เซอร์บางตัวเท่านั้นองค์ประกอบเหล่านี้ได้แก่ แอปเพล็ต, bgsound, กะพริบตา, กระโจม และแท็กอื่นๆ
4. องค์ประกอบอื่นๆ ที่ถูกยกเลิกยกเลิก rb, ใช้ ruby เพื่อแทนที่ตัวย่อ ใช้ abbr เพื่อแทนที่ abolition dir ใช้ ul เพื่อแทนที่ isindex ใช้การรวมกันของรูปแบบและการป้อนข้อมูลเพื่อแทนที่รายการ ใช้ pre เพื่อแทนที่ xmp ใช้โค้ดเพื่อแทนที่ abolition nextid ใช้ guids เพื่อยกเลิก plaintex ใช้ข้อความ/ plian (เนื้อหาที่ไม่ได้ฟอร์แมต) การทดแทนประเภท MIME
2. แท็กใหม่ 1. แท็กโครงสร้างใหม่ใน HTML4.01 div ถูกนำมาใช้กันอย่างแพร่หลายในสภาพแวดล้อมเค้าโครงต่างๆ โดยไม่มีคำจำกัดความที่ชัดเจน HTML5 กำหนดความหมายของ div สำหรับ SEO และแท็กโครงสร้างที่เพิ่มใหม่มีดังนี้:
ก) องค์ประกอบส่วนแสดงถึงบล็อกเนื้อหาในหน้า เช่น บท ส่วนหัว ส่วนท้าย หรือส่วนอื่น ๆ ของหน้า สามารถใช้ร่วมกับ h1, h2... และองค์ประกอบอื่นๆ เพื่อแสดงโครงสร้างเอกสาร ตัวอย่าง: <section>……</section> ใน HTML5; <div>……</div> ใน HTML4
b) องค์ประกอบบทความแสดงถึงเนื้อหาอิสระบนหน้าเว็บที่ไม่เกี่ยวข้องกับบริบท ตัวอย่างเช่นบทความ
c) องค์ประกอบด้านข้างแสดงถึงข้อมูลเสริมที่เกี่ยวข้องกับเนื้อหาขององค์ประกอบบทความ นอกเหนือจากเนื้อหาขององค์ประกอบบทความ
d) องค์ประกอบส่วนหัวแสดงถึงบล็อกเนื้อหาในหน้าหรือชื่อของทั้งหน้า
จ) องค์ประกอบ hgroup แสดงถึงการรวมกันของชื่อเรื่องของทั้งหน้าหรือบล็อกเนื้อหาในหน้า
f) องค์ประกอบส่วนท้ายแสดงถึงเชิงอรรถของทั้งหน้าหรือบล็อกเนื้อหาในหน้า โดยทั่วไปจะประกอบด้วยชื่อผู้สร้าง วันที่สร้าง และข้อมูลติดต่อของผู้สร้าง
g) องค์ประกอบ nav แสดงถึงส่วนลิงก์การนำทางของเพจ
h) องค์ประกอบรูปแสดงถึงเนื้อหาโฟลว์ที่เป็นอิสระ ซึ่งโดยทั่วไปจะแสดงถึงหน่วยอิสระในเนื้อหาโฟลว์หลักของเอกสาร ใช้องค์ประกอบ figcaption เพื่อเพิ่มคำบรรยายให้กับกลุ่มขององค์ประกอบรูป ตัวอย่างเช่น:
<figure> <figcaption>สาธารณรัฐประชาชนจีน</figcaption> <p>สาธารณรัฐประชาชนจีนเกิดเมื่อปี พ.ศ. 2492</p></figure>
การเขียนทั่วไปใน HTML4
<dl> <h1>prc</h1> <p>สาธารณรัฐประชาชนจีนเกิดในปี 1949</p> </dl>
ผลการวิ่ง:
2. เพิ่มองค์ประกอบใหม่อื่น ๆ2.1.เมตร
แสดงถึงค่าภายในช่วงเฉพาะ ซึ่งสามารถใช้สำหรับค่าจ้าง ปริมาณ เปอร์เซ็นต์ ฯลฯ ค่าสูงสุดหมายถึงค่าสูงสุด ค่าต่ำสุดคือค่าต่ำสุด และค่าหมายถึงมูลค่าปัจจุบัน
<เมตรสูงสุด=100 นาที=ค่า 0=60 สไตล์=ความกว้าง: 300px;></meter>
คุณสามารถใช้ js เพื่อควบคุมค่าตั้งแต่ 0 ถึง 100
2.2 เวลาเวลา. แสดงถึงค่าเวลา วันที่และเวลา เน้นเวลา: <เวลา>2015-10-6</time>
<เวลา>2015-10-6</เวลา>
เราเริ่มเรียนเวลา <เวลา>8:30</time> ทุกเช้า ฉันมีนัดวันที่ <time datetime=2017-02-14>วันวาเลนไทน์</time>
เนื่องจากแท็กนี้เป็นแท็กเชิงความหมาย จึงไม่มีเอฟเฟกต์พิเศษเมื่อดูบนเบราว์เซอร์ โดยพื้นฐานแล้วจะมีผลเหมือนกับไม่ได้ตั้งค่าแท็ก
2.3. ความคืบหน้าใช้เพื่อแสดงแถบความคืบหน้า
<h3>ความคืบหน้า</h3><ค่าความคืบหน้า=75 สูงสุด=100></ความคืบหน้า>
สูงสุด: ค่าสูงสุด, มูลค่าเมื่อเสร็จสิ้น
มูลค่า: มูลค่าปัจจุบัน
2.4 รายการข้อมูลแท็กนี้กำหนดรายการข้อมูลเสริม เมื่อใช้ร่วมกับองค์ประกอบอินพุต คุณสามารถสร้างรายการแบบเลื่อนลงของค่าอินพุตได้
เมื่อรวมกับอินพุต สามารถเลือกและอินพุตได้อย่างสมบูรณ์
<ประเภทอินพุต=รายการข้อความ=ประเทศ /><datalist id=ประเทศ> <option value=China></option> <option value=สหรัฐอเมริกา></option> <option value=Japan></option></datalist >2.5. องค์ประกอบเครื่องหมาย
ส่วนใหญ่จะใช้เพื่อนำเสนอข้อความที่ต้องเน้นหรือเน้นให้ผู้ใช้เห็น คำค้นหาจะถูกเน้นในผลลัพธ์การค้นหาแอปพลิเคชันทั่วไป HTML5<mark></mark>;HTML4 <span></span>.
2.6 องค์ประกอบทับทิมกำหนดความคิดเห็นทับทิม (พินอินหรือตัวอักษรจีน) ใช้กับแท็ก <ruby> และ <rt> องค์ประกอบ Ruby ประกอบด้วยอักขระตั้งแต่หนึ่งตัวขึ้นไป (ต้องมีคำอธิบาย/การออกเสียง) และองค์ประกอบ rt ที่ให้ข้อมูลนั้น รวมถึงองค์ประกอบ rp เสริมที่กำหนดเนื้อหาที่จะแสดงเมื่อเบราว์เซอร์ไม่รองรับ Ruby องค์ประกอบ.
2.7 องค์ประกอบ rtกำหนดการตีความหรือการออกเสียงของอักขระ (สัทศาสตร์สัทอักษรหรืออักขระภาษาจีน)
2.8 องค์ประกอบ RPใช้ในความคิดเห็น Ruby เพื่อกำหนดสิ่งที่แสดงโดยเบราว์เซอร์ที่ไม่รองรับองค์ประกอบ Ruby
2.9 องค์ประกอบ wbrแสดงถึงการแบ่งบรรทัดแบบนุ่มนวล ความแตกต่างจากองค์ประกอบ br: องค์ประกอบ br ระบุว่าต้องทำการขึ้นบรรทัดใหม่ที่นี่ wbr บ่งชี้ว่าเมื่อหน้าต่างเบราว์เซอร์หรือองค์ประกอบหลักกว้าง (เมื่อไม่จำเป็นต้องขึ้นบรรทัดใหม่) บรรทัดจะไม่เป็น ขาดแต่พอความกว้างไม่พอเส้นก็จะพันตรงนี้อัตโนมัติ
2.10 องค์ประกอบผืนผ้าใบกำหนดกราฟิก เช่น แผนภูมิและรูปภาพอื่นๆ องค์ประกอบ <canvas> เป็นเพียงคอนเทนเนอร์กราฟิก (canvas) และคุณต้องใช้สคริปต์ในการวาดกราฟิก
<canvas id=myCanvas></canvas><script type=text/javascript> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ; ctx.fillRect(0, 0, 80, 100);</script>2.11. องค์ประกอบคำสั่ง
แสดงถึงปุ่มคำสั่ง เช่น ปุ่มตัวเลือก กล่องกาเครื่องหมาย หรือปุ่ม องค์ประกอบคำสั่งจะมองเห็นได้ก็ต่อเมื่ออยู่ภายในองค์ประกอบเมนู มิฉะนั้นองค์ประกอบนี้จะไม่ปรากฏ แต่สามารถใช้เพื่อระบุแป้นพิมพ์ลัดได้
<menu> <command onclick=alert('Hello World')> คลิกฉัน!</command> </menu>2.12. แท็กรายละเอียด
ใช้เพื่ออธิบายรายละเอียดของเอกสารหรือบางส่วนของเอกสาร สามารถใช้ร่วมกับแท็กสรุปซึ่งสามารถกำหนดชื่อเรื่องเพื่อดูรายละเอียดได้ ชื่อเรื่องสามารถมองเห็นได้ และเมื่อผู้ใช้คลิกที่ชื่อเรื่อง รายละเอียดก็จะปรากฏขึ้น summary ควรเป็นองค์ประกอบย่อยแรกของรายละเอียด
2.14 แท็กดาต้าลิสต์กำหนดรายการตัวเลือก ใช้องค์ประกอบนี้ร่วมกับองค์ประกอบอินพุตเพื่อกำหนดค่าที่เป็นไปได้ของอินพุต รายการข้อมูลและตัวเลือกจะไม่แสดงขึ้น แต่เป็นเพียงรายการค่าอินพุตที่ถูกต้อง ใช้แอตทริบิวต์รายการขององค์ประกอบอินพุตเพื่อผูกรายการข้อมูล
2.15 แท็กเอาต์พุตกำหนดเอาต์พุตประเภทต่างๆ เช่น เอาต์พุตสคริปต์
<รูปแบบการกระทำ=form_action.asp method=get name=sumform> <ชื่อเอาท์พุท=sum></output> </form>2.16 แท็กเมนู
กำหนดรายการเมนู ใช้ป้ายกำกับนี้เมื่อคุณต้องการแสดงรายการตัวควบคุมแบบฟอร์ม หมายเหตุความแตกต่างจากเมนูนำทางใช้สำหรับการควบคุมแบบฟอร์มโดยเฉพาะ
3. แท็กมัลติมีเดียหากคุณต้องการเล่นเสียงและวิดีโอบนเพจ วิธีการที่เรามักใช้คือ:
ก) ฝัง
<ฝัง src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf' AllowFullScreen='true' quality='high' width='480' height='400' align=' กลาง' AllowScriptAccess='always' type='application/x-shockwave-flash'></embed><embed src=img/iceage4.mp4></embed>
b) ใช้โปรแกรมเล่นแฟลช
เช่นปลั๊กอินของบุคคลที่สามบางตัว flowplayer602
ส่วนประกอบมัลติมีเดีย HTML5 หมายถึงส่วนประกอบวิดีโอ (วิดีโอ) และส่วนประกอบเสียง (เสียง) ส่วนประกอบมัลติมีเดีย HTML5 สามารถฝังส่วนประกอบมัลติมีเดียได้โดยตรงบนเว็บเพจของคุณ โดยไม่ต้องใช้ปลั๊กอินของบริษัทอื่น เช่น Flash Player ความสามารถใหม่ของเบราว์เซอร์ในการให้การสนับสนุนวิดีโอแบบเนทีฟช่วยให้นักพัฒนาเว็บสามารถเพิ่มส่วนประกอบวิดีโอลงในเว็บไซต์ของตนได้ง่ายขึ้น โดยไม่ต้องอาศัยปลั๊กอินภายนอก เนื่องจากข้อจำกัดของเทคโนโลยี Flash ที่ Apple ใช้บน iPhone และ iPad ในปัจจุบัน ความสามารถของส่วนประกอบมัลติมีเดีย HTML5 จึงมีความสำคัญอย่างยิ่ง
3.1. แท็กวิดีโอใช้สำหรับเล่นวิดีโอ ภาพยนตร์
สูตรพื้นฐานของฉลากมีดังนี้:
<video width=800 height=600 Controls=controls poster=content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video /webm></source> <ความกว้างของวัตถุ= ความสูง= type=application/x-shockwave-flash data=myvideo.swf> <ชื่อพารามิเตอร์=ค่าภาพยนตร์=myvideo.swf /> <param name=flashvars value=autostart=true&file=myvideo.swf /> </object> เบราว์เซอร์ปัจจุบันไม่รองรับการเล่นวิดีโอโดยตรง คลิกที่นี่เพื่อดาวน์โหลดวิดีโอ: <a href=a.mp4>ดาวน์โหลด วิดีโอ</ a></วิดีโอ>
แหล่งที่มาคือแหล่งที่มาของวิดีโอซึ่งมีได้หลายประเภท เมื่อล้มเหลว แหล่งถัดไปจะถูกเลือกโดยหลักๆ แล้ว
Ogg = ไฟล์ Ogg พร้อมการเข้ารหัสวิดีโอ Theora และการเข้ารหัสเสียง Vorbis MPEG4 = ไฟล์ MPEG 4 พร้อมการเข้ารหัสวิดีโอ H.264 และการเข้ารหัสเสียง AAC WebM = ไฟล์ WebM พร้อมการเข้ารหัสวิดีโอ VP8 และการเข้ารหัสเสียง Vorbis
สังเกต:
<video src=img/a.mp4 Controls=controls poster=img/1.jpg>เบราว์เซอร์ของคุณเก่าเกินไป โปรดอัปเกรด ดาวน์โหลดวิดีโอ <a href=#>ที่อยู่</a></video>
เนื้อหา innerHTML ของแท็ก HTML5 ส่วนใหญ่เป็นเนื้อหาที่แสดงเมื่อเบราว์เซอร์ไม่รองรับแท็ก
ความแตกต่างระหว่างการเชื่อมโยงเหตุการณ์และการฟัง:
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>ความแตกต่างระหว่างการผูกเหตุการณ์และการตรวจสอบ</title> </head> <body> <button id=btnA>ปุ่ม A </button> <button id=btnB>ปุ่ม B</button> <script type=text/javascript> var btnA = document.getElementById(btnA); btnB = document.getElementById(btnB); btnA.onclick = function() { alert(คุณคลิก); } btnA.onclick = function() { alert(คุณคลิกอีกครั้ง); { alert(คุณคลิก); },false); btnB.addEventListener(คลิก,ฟังก์ชัน(เหตุการณ์){ alert(คุณคลิกอีกครั้ง); },false); </script> </body></html>
หลังจากเชื่อมโยงเหตุการณ์โดยใช้ชื่อเหตุการณ์ on การเชื่อมโยงจะเขียนทับเหตุการณ์ที่ถูกผูกไว้ก่อนหน้านี้ นั่นคือ เหตุการณ์ที่ถูกผูกไว้สุดท้ายจะมีผล
การใช้ addEventListener เพื่อเชื่อมโยงเหตุการณ์จะไม่ถูกเขียนทับ และสามารถเชื่อมโยงเหตุการณ์ที่เหมือนกันหลายเหตุการณ์เข้ากับองค์ประกอบเดียวในเวลาเดียวกันได้
ตัวอย่างคุณสมบัติและเหตุการณ์ของ API วิดีโอ:<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>แท็กวิดีโอ</title> </head> <body> <video id=videoIce width=800 height=600 Controls=Controls Poster =content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video/webm></source> <ความกว้างของวัตถุ= ความสูง= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value= autostart=true&file=myvideo.swf /> </object> เบราว์เซอร์ปัจจุบันไม่รองรับการเล่นวิดีโอโดยตรง คลิกที่นี่เพื่อดาวน์โหลดวิดีโอ: <a href=content/a.mp4>ดาวน์โหลดวิดีโอ</a> </video> <h2> <button onclick=play()>เล่น</button> <button onclick=pause()>หยุดชั่วคราว</button> <span id=msg></span> </h2> <ประเภทสคริปต์ =text/javascript> var videoIce=document.getElementById(videoIce); function play() { videoIce.play(); } ฟังก์ชั่นหยุดชั่วคราว() { videoIce.pause(); } videoIce.ontimeupdate = function() { document.getElementById(msg).innerHTML=videoIce.currentTime; } </script> </body></html>3.2. แท็กเสียง
เสียงสามารถรับรู้ถึงฟังก์ชั่นการเล่นเสียงและเพลง
<audio src=http://baidu/demo/test.mp3 การควบคุม >เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบเสียง</autio><audio src=content/a.mp3 Controls=controls autoplay=autoplay></audio>
คุณลักษณะหลายประการของแท็กเสียงจะเหมือนกับคุณลักษณะของวิดีโอ:
เล่นอัตโนมัติ: true|false หากเป็นจริง เสียงจะเล่นทันทีที่พร้อม การควบคุม: true|false หากเป็นจริง จะแสดงการควบคุม เช่น ปุ่มเล่น ให้กับผู้ใช้ สิ้นสุด: ค่าตัวเลขกำหนดตำแหน่งในสตรีมเสียงที่เครื่องเล่นหยุดเล่น ตามค่าเริ่มต้น เสียงจะเล่นจนจบ loopend: ค่าตัวเลขกำหนดตำแหน่งที่การเล่นวนซ้ำหยุดในสตรีมเสียง ค่าเริ่มต้นคือค่าของแอตทริบิวต์สิ้นสุด loopstart: ค่าตัวเลขกำหนดตำแหน่งเริ่มต้นของการเล่นแบบวนซ้ำในสตรีมเสียง ค่าเริ่มต้นคือค่าของแอตทริบิวต์เริ่มต้น จำนวนการเล่น: ค่าตัวเลขกำหนดจำนวนครั้งที่เล่นคลิปเสียง ค่าเริ่มต้นคือ 1 src: url URL ของเสียงที่กำลังเล่น start : ค่าตัวเลขกำหนดตำแหน่งในสตรีมเสียงที่เครื่องเล่นเริ่มเล่น ตามค่าเริ่มต้น เสียงจะเล่นที่จุดเริ่มต้น
แท็กย่อยแหล่งที่มาตัวอย่างการใช้องค์ประกอบแหล่งที่มาเป็นแท็กย่อยขององค์ประกอบมัลติมีเดีย:
<เสียง><แหล่งที่มา src='test.mp3 ' type='audio/mpeg'/><แหล่งที่มา src='test.ogg ' type='audio/ogg'/><แหล่งที่มา src='test.spx ' type='audio/ogg'/></audio>
เมื่อใช้องค์ประกอบแหล่งที่มา เบราว์เซอร์จะค้นหาตามลำดับในรายการจนกว่าจะพบรูปแบบไฟล์ที่สามารถเล่นได้ เมื่อพบแล้ว เบราว์เซอร์จะเล่นไฟล์และละเว้นองค์ประกอบอื่นๆ ที่ตามมา
API ของเสียงโดยพื้นฐานแล้วจะเหมือนกับของวิดีโอ ต่อไปนี้เป็นตัวอย่างของการปรับแต่งระดับเสียง:
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>แท็กเสียง</title> </head> <body> <h2>แท็กเสียง</h2> <audio src=content/ fcml.mp3 Controls=controls autoplay=autoplay id=mp3> <marquee><h2>เปลี่ยนเบราว์เซอร์ มันเก่าเกินไป</h2></marquee> </audio> <input type=range min=0 max=100 onchange=setVolume(this) /> <script type=text/javascript> function setVolume(obj){ document.getElementById(mp3).volume=obj.value*0.01; /สคริปต์> </body></html>
ปริมาณอยู่ระหว่าง 0-1 เท่านั้น
3.3 องค์ประกอบที่ฝังใช้ในการฝังเนื้อหา (รวมถึงสื่อต่างๆ) รูปแบบอาจเป็น Midi, Wav, AIFF, AU, MP3, แฟลช ฯลฯ
ตัวอย่าง: <embed src=flash.swf /> ตัวอย่างโค้ดใน HTML4 <object data=flash.swf type=application/x-shockwave-flash><object>
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network