ความคิดเห็น: HTML5 มีคุณสมบัติใหม่มากมาย รหัสใหม่ ดีมาก. มาสรุปกันเลย สำหรับการอ้างอิงเท่านั้น
1. doctype ใหม่แม้ว่าเบราว์เซอร์จะไม่เข้าใจประโยคนี้ แต่ก็จะแสดงผลตามโหมดมาตรฐาน
2. องค์ประกอบรูป
ใช้ <pige> และ <potcaption> เพื่อแสดงภาพความหมายที่มีชื่อเรื่อง
<รูป>
<img src = path/to/image alt = เกี่ยวกับ image/>
<Figcaption>
<p> นี่คือภาพของสิ่งที่น่าสนใจ </p>
</figcaption>
</pige>
3. นิยามใหม่ <small>
<small> ได้รับการนิยามใหม่และตอนนี้ใช้เพื่อแสดงการจัดเรียงขนาดเล็กเช่นประกาศลิขสิทธิ์ที่ด้านล่างของเว็บไซต์
4. ลบแอตทริบิวต์ประเภทในลิงก์และแท็กสคริปต์
5. เพิ่ม/ไม่มีวงเล็บ
HTML5 ไม่ต้องการให้แอตทริบิวต์จะต้องอ้างถึงและปิดหรือไม่ แต่ขอแนะนำให้เพิ่มราคาและแท็กปิด
6. ทำให้เนื้อหาของคุณแก้ไขได้เพียงเพิ่มคุณสมบัติที่เป็นที่ชื่นชอบ
7. อินพุตอีเมล
หากเราตั้งค่าประเภทของอินพุตเป็นอีเมลเบราว์เซอร์จะตรวจสอบว่าอินพุตเป็นประเภทอีเมลหรือไม่ แน่นอนว่าเราไม่สามารถพึ่งพาการตรวจสอบส่วนหน้าเท่านั้นและส่วนหลังจะต้องมีการตรวจสอบที่สอดคล้องกัน
8. ตัวยึดตำแหน่ง
ความหมายของแอตทริบิวต์อินพุตนี้คือไม่จำเป็นต้องใช้ JavaScript เพื่อสร้างผลกระทบของตัวยึดตำแหน่ง
9. ที่เก็บข้อมูลท้องถิ่น
ใช้ที่เก็บข้อมูลในท้องถิ่นเพื่อจัดเก็บชิ้นส่วนข้อมูลขนาดใหญ่บนไคลเอนต์อย่างถาวร (เว้นแต่จะถูกลบอย่างแข็งขัน) ปัจจุบันเบราว์เซอร์ส่วนใหญ่สนับสนุนพวกเขาแล้ว คุณสามารถตรวจสอบว่า window.localstorage มีอยู่ก่อนที่จะใช้หรือไม่
10. ส่วนหัวและส่วนท้ายแบบความหมาย
11. คุณสมบัติฟอร์ม HTML5 เพิ่มเติม
12. IE และ HTML5
โดยค่าเริ่มต้นองค์ประกอบ HTML5 ใหม่จะแสดงผลแบบอินไลน์ แต่สามารถใช้วิธีการต่อไปนี้ได้
มันแสดงในโหมดบล็อก
ส่วนหัว, ส่วนท้าย, บทความ, ส่วน, NAV, เมนู, hGroup {
แสดง: บล็อก;
-
น่าเสียดายเช่นไม่สนใจสไตล์เหล่านี้และสามารถแก้ไขได้เช่นนี้:
Document.createElement (บทความ);
Document.createElement (ส่วนท้าย);
document.createElement (ส่วนหัว);
Document.createElement (HGroup);
Document.createElement (NAV);
document.createElement (เมนู);
13. HGroup
มันมักจะใช้เพื่อรวมชุดของชื่อในส่วนหัวเช่น
<ส่วนหัว>
<hgroup>
<H1> เรียกคืนเพจแฟน ๆ </h1>
<H2> เฉพาะสำหรับผู้ที่ต้องการความทรงจำตลอดชีวิต </h2>
</hgroup>
</header>
14. แอตทริบิวต์ที่ต้องการ
คุณสมบัติที่ต้องการกำหนดว่าจำเป็นต้องมีอินพุตคุณสามารถประกาศได้เช่นเดียวกับด้านล่าง
<ประเภทอินพุต = ชื่อข้อความ = จำเป็นต้องใช้บางส่วน>
หรือ
<ประเภทอินพุต = ชื่อข้อความ = บางอย่างจำเป็น = จำเป็น = ต้องการ>
15. คุณสมบัติโฟกัสอัตโนมัติ
เช่นเดียวกับความหมายของมันคือการมุ่งเน้นไปที่กล่องอินพุต
<ประเภทอินพุต = ชื่อข้อความ = someInput placeholder = Douglas Quaid Autofocus ที่ต้องการ>
16. การสนับสนุนเสียง
HTML5 มีแท็ก <oadio> คุณไม่จำเป็นต้องแสดงเสียงตามปลั๊กอินของบุคคลที่สามอีกต่อไป เบราว์เซอร์ที่ทันสมัยส่วนใหญ่ให้การสนับสนุนเสียง HTML5 แต่ก็ยังต้องให้การประมวลผลความเข้ากันได้บ้างเช่น
<audio autoplay = การควบคุมการเล่นอัตโนมัติ = การควบคุม>
<Source Src = file.ogg /> <! - ff–>
<Source Src = file.mp3″ /> <! - WebKit–>
<a href = file.mp3″> ดาวน์โหลดไฟล์นี้ </a>
</เสียง>
17. การสนับสนุนวิดีโอ
เช่นเดียวกับเสียงแท็ก <video> ให้การสนับสนุนสำหรับวิดีโอ เนื่องจากเอกสาร HTML5 ไม่ได้ระบุการเข้ารหัสเฉพาะสำหรับวิดีโอเบราว์เซอร์จึงตัดสินใจว่าการเข้ารหัสที่จะสนับสนุนซึ่งนำไปสู่ความไม่สอดคล้องกันมากมาย Safari และ IE รองรับรูปแบบการเข้ารหัส H.264, Firefox และ Opera สนับสนุนรูปแบบการเข้ารหัส Theora และ Vorbis เมื่อใช้วิดีโอ HTML5 คุณต้องให้ทั้งสองอย่าง:
<วิดีโอควบคุมล่วงหน้า>
<Source SRC = cohagenphonecall.ogv type = video/ogg; codecs = 'vorbis, theora' />
<Source SRC = cohagenphonecall.mp4″ type = video/mp4; 'codecs =' avc1.42e01e, mp4a.40.2 ' />
<p> เบราว์เซอร์ของคุณเก่า <a href = cohagenphonecall.mp4″> ดาวน์โหลดวิดีโอนี้แทน </a> </p>
</video>
18. วิดีโอล่วงหน้า
คุณสมบัติการโหลดล่วงหน้านั้นง่ายอย่างที่มันหมายถึงอย่างแท้จริงและคุณต้องตัดสินใจว่าคุณต้องการโหลดวิดีโอล่วงหน้าหรือไม่เมื่อหน้าโหลด
<วิดีโอล่วงหน้า>
19. แสดงการควบคุมวิดีโอ
<วิดีโอควบคุมการโหลดล่วงหน้า>
20. การแสดงออกปกติ
เนื่องจากแอตทริบิวต์รูปแบบเราสามารถใช้นิพจน์ทั่วไปในมาร์กอัปโดยตรง
<form action = method = post>
<label for = username> สร้างชื่อผู้ใช้: </lable>
<ประเภทอินพุต = ชื่อข้อความ = ชื่อผู้ใช้ = ชื่อผู้ใช้ PlaceHolder = 4 <> 10″ pattern = [A-za-Z] {4,10} AutoFocus ที่ต้องการ>
<button type = submit> go </button>
</form>
21. การสนับสนุนการตรวจจับแอตทริบิวต์
นอกเหนือจาก Modernizr แล้วเรายังสามารถใช้ JavaScript เพื่อตรวจจับได้ว่าคุณสมบัติบางอย่างได้รับการสนับสนุนเช่น:
<script>
if (! 'pattern' ใน document.createElement ('input')) {
// ทำการตรวจสอบด้านไคลเอนต์/เซิร์ฟเวอร์
-
</script>
22. มาร์คองค์ประกอบ
พิจารณาองค์ประกอบ <mark> เป็นการเน้น เมื่อฉันเลือกย่อหน้าของข้อความเอฟเฟกต์มาร์กอัปของ JavaScript บน HTML ควรเป็นดังนี้:
<h3> ผลการค้นหา </h3>
<p> พวกเขาถูกขัดจังหวะหลังจาก Quato พูดว่า <mark> เปิดใจของคุณ </kar> </p>
23. เมื่อใดควรใช้ <div>
HTML5 ได้แนะนำองค์ประกอบมากมายดังนั้นเรายังต้องใช้ DIV หรือไม่? คุณสามารถใช้ div เมื่อไม่มีองค์ประกอบที่ดีกว่า
24. ต้องการใช้ HTML5 ตอนนี้หรือไม่?
อย่ารอปี 2022 พร้อมใช้งานตอนนี้เพียงแค่ทำ
25. อะไรคือ HTML5
1) SVG
2) CSS3
3) ตำแหน่งทางภูมิศาสตร์
4) การจัดเก็บไคลเอนต์
5) เว็บซ็อกเก็ต
26. คุณสมบัติข้อมูล
<div id = mydiv data-custom-attr = ค่าของฉัน> bla bla </div>
ใช้ใน CSS:
<style>
H1: โฮเวอร์: หลังจาก {
เนื้อหา: attr (การตอบสนองต่อข้อมูล-การตอบสนอง);
สี: สีดำ;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0;
-
</style>
<h1 data-hover-response = ฉันบอกว่าอย่าแตะต้องฉัน!> อย่าแตะต้องฉัน </h1>
27. องค์ประกอบเอาต์พุต
องค์ประกอบ <Output> ใช้เพื่อแสดงผลการคำนวณและยังมีแอตทริบิวต์เช่นฉลาก
28. ใช้อินพุตช่วงเพื่อสร้างสไลเดอร์
ประเภทช่วงที่อ้างอิงโดย HTML5 สามารถสร้างตัวเลื่อนซึ่งยอมรับคุณสมบัติขั้นต่ำ, สูงสุด, ขั้นตอนและค่า
คุณสามารถใช้ CSS ': ก่อนและ: หลังจากแสดงค่าของขั้นต่ำและสูงสุด
<อินพุตประเภท = ช่วงชื่อ = ช่วง min = 0″ max = 10″ step = 1″ value =>
อินพุต [type = range]: ก่อน {เนื้อหา: attr (min); Padding-Right: 5px;
-
อินพุต [type = range]: หลังจาก {content: attr (สูงสุด); Padding-Left: 5px;}