Khóa học IT HTML Cơ bản 015_Tính năng mới HTML5

Tính năng mới HTML5

HTML5 là phiên bản mới nhất của HTML, giới thiệu nhiều thẻ, thuộc tính và chức năng mới, tăng cường đáng kể chức năng và tính tương tác của web.

Một số tính năng mới thú vị trong HTML5:

• Phần tử canvas để vẽ đồ họa
• Phần tử video và audio để phát phương tiện
• Hỗ trợ tốt hơn cho lưu trữ ngoại tuyến cục bộ
• Các phần tử nội dung đặc biệt mới như article, footer, header, nav, section
• Các điều khiển biểu mẫu mới như calendar, date, time, email, url, search

<canvas>

Phần tử <canvas> HTML5 được sử dụng để vẽ đồ họa trên trang web. Phần tử <canvas> dựa trên API vẽ JavaScript và có thể được sử dụng để tạo các loại đồ họa khác nhau, bao gồm biểu đồ, đồ họa, hoạt ảnh, v.v.

Ví dụ:

1
<canvas width="500" height="500">
2
    Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.
3
</canvas>
4
<script>
5
    const canvas = document.querySelector("canvas");
6
    // Lấy ngữ cảnh vẽ
7
    const ctx = canvas.getContext("2d");
8
    // Vẽ hình tròn
9
    ctx.beginPath();
10
    ctx.arc(250, 250, 100, 0, 2 * Math.PI);
11
    ctx.fillStyle = "yellow";
12
    ctx.fill();
13
</script>

Hiệu ứng:

<svg>

Phần tử SVG HTML5 được sử dụng để tạo đồ họa SVG trên trang web. Đồ họa SVG là đồ họa vector dựa trên XML, có thể thu phóng không mất chất lượng, phù hợp cho nhiều mục đích khác nhau:

Các phần tử SVG bao gồm:

• Phần tử <svg>: Định nghĩa phần tử gốc của đồ họa SVG.
• Phần tử <path>: Định nghĩa hình dạng đường dẫn.
• Phần tử <rect>: Định nghĩa hình dạng hình chữ nhật.
• Phần tử <circle>: Định nghĩa hình dạng hình tròn.
• Phần tử <ellipse>: Định nghĩa hình dạng hình elip.
• Phần tử <line>: Định nghĩa đường thẳng.
• Phần tử <polygon>: Định nghĩa đa giác.
• Phần tử <polyline>: Định nghĩa đường gấp khúc.
• Phần tử <text>: Định nghĩa văn bản.
• Phần tử <g>: Định nghĩa nhóm để nhóm các phần tử SVG lại với nhau.
• Phần tử <defs>: Định nghĩa thuộc tính toàn cục có thể áp dụng cho nhiều phần tử SVG.

Ví dụ:

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

Hiệu ứng:

SVG và Canvas đều là công cụ để tạo đồ họa trên trang web. Mỗi loại có ưu điểm và nhược điểm riêng, phù hợp cho các tình huống khác nhau.

SVG là đồ họa vector dựa trên XML, có thể thu phóng không mất chất lượng. Điều này có nghĩa là đồ họa SVG có thể hiển thị ở bất kỳ kích thước nào mà không mất chất lượng. Đồ họa SVG cũng có thể được thao tác và tạo hoạt ảnh bằng CSS và JavaScript.

Canvas là API vẽ dựa trên JavaScript, có thể tạo đồ họa bitmap. Điều này có nghĩa là đồ họa Canvas không thể thu phóng không mất chất lượng, nhưng có thể tạo đồ họa phức tạp hơn bằng JavaScript. Đồ họa Canvas cũng có thể được thao tác và tạo hoạt ảnh bằng JavaScript.

Sự khác biệt cụ thể giữa SVG và Canvas:

• SVG phù hợp cho:

  • Đồ họa cần thu phóng không mất chất lượng, như biểu tượng, logo, minh họa
  • Đồ họa cần thao tác và tạo hoạt ảnh bằng CSS và JavaScript

• Canvas phù hợp cho:

  • Các tình huống cần tạo đồ họa phức tạp, như trò chơi, hoạt ảnh
  • Các tình huống cần thao tác phức tạp bằng JavaScript

Biểu mẫu HTML5

HTML5 giới thiệu một số loại đầu vào và thuộc tính mới để tăng cường chức năng và khả năng sử dụng của biểu mẫu.

Các phần tử biểu mẫu mới:

• Phần tử <datalist>: Được sử dụng cho danh sách tùy chọn được xác định trước cho phần tử <input>.

Ví dụ:

1
<label for="browser">Chọn trình duyệt:</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>

Hiệu ứng:

Các thuộc tính biểu mẫu mới:

• Thuộc tính autocomplete <form> / <input>: Chỉ định xem biểu mẫu hoặc trường nhập có nên có chức năng tự động hoàn thành hay không. Khi người dùng bắt đầu nhập vào trường tự động hoàn thành, trình duyệt sẽ hiển thị các tùy chọn đã điền.

Ví dụ:

1
<form action="demo-form.php" autocomplete="on">
2
  Họ:<input type="text" name="fname"><br>
3
  Tên:<input type="text" name="lname"><br>
4
  Email:<input type="email" name="email" autocomplete="off"><br>
5
  <input type="submit">
6
</form>

Hiệu ứng:

Các loại input mới:

1
<form action="/submit" method="post">
2
  <label for="name">Họ tên:</label>
3
  <input type="text" id="name" required />
4
  <br>
5
  <label for="email">Địa chỉ email:</label>
6
  <input type="email" id="email" required />
7
  <br>
8
  <label for="birthday">Ngày sinh:</label>
9
  <input type="date" id="birthday" required />
10
  <br>
11
  <label for="phone">Số điện thoại:</label>
12
  <input type="tel" id="phone" required />
13
  <br>
14
  <input type="submit" value="Gửi" />
15
</form>

Hiệu ứng:

[!Tóm tắt]