Các phần tử mới trong HTML5 - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Các phần tử mới trong HTML5

Front-end

HTML5

CSS

jquery

Bootstrap

Json

JavaScript

Theme

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên HTML

Hướng dẫn CSS

CSS3

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

Dưới đây là danh sách các phần tử HTML5 mới và mô tả về ứng dụng của chúng.

Phần tử ngữ nghĩa / cấu trúc mới

HTML5 cung cấp các phần tử mới cho cấu trúc tài liệu tốt hơn:

Thẻ Mô tả
 <article>  định nghĩa một bài viết trong tài liệu
 <aside>  xác định nội dung bên cạnh nội dung trang
 <bdi>  cô lập một phần của văn bản có thể được định dạng theo một hướng khác với văn bản bên ngoài nó
 <details>  xác định chi tiết bổ sung mà người dùng có thể xem hoặc ẩn
 <dialog>  xác định một hộp thoại hoặc cửa sổ
 <figcaption>  định nghĩa phụ đề cho một phần tử <figure>
 <figure>  định nghĩa nội dung độc lập
 <footer>  xác định một chân trang cho một tài liệu hoặc một phần
 <header>  định nghĩa tiêu đề cho một tài liệu hoặc một phần
 <main>  xác định nội dung chính của tài liệu
 <mark>  định nghĩa văn bản được đánh dấu
 <menuitem>  định nghĩa một mục lệnh / menu mà người dùng có thể gọi từ popup
 <meter>  xác định một phép đo vô hướng trong phạm vi đã biết (một thước đo)
 <nav>  định nghĩa liên kết điều hướng
 <progress>  đại diện cho quá trình hoạt động của một tác vụ
 <rp>  xác định điều gì sẽ hiển thị trong các trình duyệt không hỗ trợ các chú thích
 <rt>  xác định cách giải thích / phát âm các ký tự (đối với kiểu chữ của Đông Á)
 <ruby>  định nghĩa một chú thích ​​(đối với kiểu chữ của Đông Á)
 <section>  định nghĩa một phần trong một tài liệu
 <summary>  định nghĩa một tiêu đề có thể nhìn thấy cho một phần tử <details
 <time>  xác định ngày tháng / thời gian
 <wbr> định nghĩa một đường ngắt dòng

Các phần tử form mới

Thẻ  Mô tả
 <datalist>  chỉ định một danh sách các tùy chọn được xác định trước cho các dữ liệu đầu vào
 <keygen>  xác định trường tự sinh key-pair (đối với các biểu mẫu)
 <output>  xác định kết quả tính toán

Các kiểu nhập vào mới

 Kiểu nhập vào mới Thuộc tính nhập vào mới
 color  autocomplete
 date  autofocus
 datetime  form
 datetime-local  formaction
 email  formenctype
 month  formmethod
 number  formnovalidate
 range  formtarget
 search  height and width
 tel  list
 time  min and max
 url  multiple
 week  pattern (regexp)
 placeholder
 required
 step

Cú pháp thuộc tính mới trong HTML5

HTML5 cho phép bốn cú pháp khác nhau cho thuộc tính. Ví dụ này thể hiện các cú pháp khác nhau được sử dụng trong thẻ <input>:

 Kiểu nhập  Ví dụ
 Empty  <input type=”text” value=”John” disabled>
 Unquoted  <input type=”text” value=John>
 Double-quoted  <input type=”text” value=”John Doe”>
 Single-quoted  <input type=”text” value=’John Doe’>

Trong HTML5, tất cả bốn cú pháp có thể được sử dụng, tùy thuộc vào những gì cần thiết cho thuộc tính.

Đồ họa trong HTML5

Thẻ  Mô tả
 <canvas>  vẽ đồ hoạ thông qua scripting (thường là JavaScript)
 <svg>  Vẽ đồ hoạ vectơ

Các phần tử media mới

 Thẻ Mô tả
 <audio>  xác định nội dung âm thanh
 <embed>  định nghĩa vùng chứa cho một ứng dụng bên ngoài (không phải HTML)
 <source>  xác định nhiều tài nguyên đa phương tiện cho các phần tử media (<video> và <audio>)
 <track>  xác định đường dẫn văn bản cho các phần tử media (<video> và <audio>)
 <video>  xác định video hoặc phim

 

Tham khảo thêm 2 khóa học hữu ích do giảng viên quốc tế trường FPT Arena giảng dạy: