คอร์ส IT พื้นฐาน HTML 015_คุณสมบัติใหม่ของ HTML5

คุณสมบัติใหม่ของ HTML5

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

คุณสมบัติใหม่ที่น่าสนใจของ HTML5:

• องค์ประกอบ canvas สำหรับการวาดภาพ
• องค์ประกอบ video และ audio สำหรับการเล่นสื่อ
• การรองรับที่ดีขึ้นสำหรับการจัดเก็บออฟไลน์ในเครื่อง
• องค์ประกอบเนื้อหาพิเศษใหม่ เช่น article, footer, header, nav, section
• ตัวควบคุมฟอร์มใหม่ เช่น calendar, date, time, email, url, search

<canvas>

องค์ประกอบ HTML5 <canvas> ใช้สำหรับการวาดกราฟิกในหน้าเว็บ องค์ประกอบ <canvas> ใช้ API การวาดภาพแบบ JavaScript และสามารถใช้สำหรับสร้างกราฟิกต่างๆ รวมถึงแผนภูมิ กราฟิก แอนิเมชัน เป็นต้น

ตัวอย่าง:

1
<canvas width="500" height="500">
2
    เบราว์เซอร์ของคุณไม่รองรับแท็ก HTML5 canvas
3
</canvas>
4
<script>
5
    const canvas = document.querySelector("canvas");
6
    // รับบริบทการวาดภาพ
7
    const ctx = canvas.getContext("2d");
8
    // วาดวงกลม
9
    ctx.beginPath();
10
    ctx.arc(250, 250, 100, 0, 2 * Math.PI);
11
    ctx.fillStyle = "yellow";
12
    ctx.fill();
13
</script>

ผลลัพธ์:

<svg>

องค์ประกอบ SVG HTML5 ใช้สำหรับสร้างกราฟิก SVG ในหน้าเว็บ กราฟิก SVG เป็นกราฟิกเวกเตอร์ที่ใช้ XML เป็นพื้นฐาน สามารถขยายได้โดยไม่สูญเสียคุณภาพ และเหมาะสมกับวัตถุประสงค์ต่างๆ รวมถึง:

องค์ประกอบ SVG ประกอบด้วย:

• องค์ประกอบ <svg>: กำหนดองค์ประกอบรากของกราฟิก SVG
• องค์ประกอบ <path>: กำหนดรูปร่างเส้นทาง
• องค์ประกอบ <rect>: กำหนดรูปร่างสี่เหลี่ยมผืนผ้า
• องค์ประกอบ <circle>: กำหนดรูปร่างวงกลม
• องค์ประกอบ <ellipse>: กำหนดรูปร่างวงรี
• องค์ประกอบ <line>: กำหนดเส้นตรง
• องค์ประกอบ <polygon>: กำหนดรูปหลายเหลี่ยม
• องค์ประกอบ <polyline>: กำหนดเส้นหัก
• องค์ประกอบ <text>: กำหนดข้อความ
• องค์ประกอบ <g>: กำหนดกลุ่ม ใช้สำหรับจัดกลุ่มองค์ประกอบ SVG เข้าด้วยกัน
• องค์ประกอบ <defs>: กำหนดคุณสมบัติทั่วไป สามารถใช้กับองค์ประกอบ SVG หลายตัว

ตัวอย่าง:

1
<svg width="500" height="500">
2
  <circle cx="250" cy="250" r="100" fill="yellow" />
3
</svg>

ผลลัพธ์:

SVG และ Canvas เป็นเครื่องมือสำหรับสร้างกราฟิกในหน้าเว็บ ทั้งสองมีข้อดีและข้อเสียของตัวเอง เหมาะสมกับสถานการณ์ที่แตกต่างกัน

SVG เป็นกราฟิกเวกเตอร์ที่ใช้ XML เป็นพื้นฐาน สามารถขยายได้โดยไม่สูญเสียคุณภาพ ซึ่งหมายความว่ากราฟิก SVG สามารถแสดงผลในขนาดใดก็ได้โดยไม่สูญเสียคุณภาพ กราฟิก SVG ยังสามารถจัดการและทำแอนิเมชันโดยใช้ CSS และ JavaScript ได้

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

ความแตกต่างเฉพาะระหว่าง SVG และ Canvas:

• SVG เหมาะสำหรับสถานการณ์:

  • กราฟิกที่ต้องการการขยายโดยไม่สูญเสียคุณภาพ เช่น ไอคอน โลโก้ ภาพประกอบ
  • กราฟิกที่ต้องการจัดการและทำแอนิเมชันโดยใช้ CSS และ JavaScript

• Canvas เหมาะสำหรับสถานการณ์:

  • สถานการณ์ที่ต้องการสร้างกราฟิกที่ซับซ้อน เช่น เกม แอนิเมชัน
  • สถานการณ์ที่ต้องการการดำเนินการที่ซับซ้อนโดยใช้ JavaScript

ฟอร์ม HTML5

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

องค์ประกอบฟอร์มใหม่:

• องค์ประกอบ <datalist>: รายการตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับองค์ประกอบ <input>

ตัวอย่าง:

1
<label for="browser">เลือกเบราว์เซอร์:</label>
2
<input list="browsers" id="browser" name="browser" autocomplete="off">
3
<datalist id="browsers">
4
  <option value="Chrome">
5
  <option value="Firefox">
6
  <option value="Safari">
7
  <option value="Edge">
8
  <option value="Opera">
9
</datalist>

ผลลัพธ์:

คุณสมบัติฟอร์มใหม่:

• คุณสมบัติ autocomplete ของ <form> / <input>: ระบุว่า form หรือฟิลด์ input ควรมีฟังก์ชันการเติมข้อความอัตโนมัติ เมื่อผู้ใช้เริ่มพิมพ์ในฟิลด์เติมข้อความอัตโนมัติ เบราว์เซอร์ควรแสดงตัวเลือกการกรอกในฟิลด์นั้น

ตัวอย่าง:

1
<form action="demo-form.php" autocomplete="on">
2
  นามสกุล: <input type="text" name="fname"><br>
3
  ชื่อ: <input type="text" name="lname"><br>
4
  อีเมล: <input type="email" name="email" autocomplete="off"><br>
5
  <input type="submit">
6
</form>

ผลลัพธ์:

ประเภท input ใหม่:

1
<form action="/submit" method="post">
2
  <label for="name">ชื่อ:</label>
3
  <input type="text" id="name" required />
4
  <br>
5
  <label for="email">ที่อยู่อีเมล:</label>
6
  <input type="email" id="email" required />
7
  <br>
8
  <label for="birthday">วันเกิด:</label>
9
  <input type="date" id="birthday" required />
10
  <br>
11
  <label for="phone">หมายเลขโทรศัพท์:</label>
12
  <input type="tel" id="phone" required />
13
  <br>
14
  <input type="submit" value="ส่ง" />
15
</form>

ผลลัพธ์:

[!สรุป]