Kết nối

[HTML/HTML5] Phần 36: Các phần tử mới trong HTML5

368 lượt xem 
 Cập nhật lần cuối: 24/04/2018 lúc 16:48:58
Thể loại: HTML/HTML5 

Các phần tử cấu trúc/ngữ nghĩa mới
HTML5 cung cấp nhiều phần tử mới để định nghĩa cấu trúc tài liệu:

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

Các phần tử Form mới
HTML5 cung cấp 2 phần tử form mới đó là:

  • datalist: Đặc tả một danh sách các lựa chọn trước cho các điều khiển đầu vào (input control)
  • output: Định nghĩa kết quả của một tính toán

Các dạng nhập liệu mới

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Các thuộc tính nhập liệu mới

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height và width
  • list
  • min và max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Các cú pháp thuộc tính mới
HTML5 cho phép 4 cú pháp khác nhau để thể hiện thuộc tính. Ví dụ thể hiện các cú pháp dùng cho thẻ input.

  • Rỗng: <input type=”text” value=”John” disabled>
  • Không nháy: <input type=”text” value=John>
  • Nháy đôi: <input type=”text” value=”John Doe”>
  • Nháy đơn: <input type=”text” value=’John Doe’>

Đồ họa HTML5
HTML5 cung cấp 2 phần tử đồ họa đó là canvas (vẽ đồ họa bằng Javascript) và svg (vẽ bằng vector đồ họa).

Các phần media mới
Một số phần tử media mới trong HTML5 như audio, embed, source, track và video giúp việc thể hiện âm thanh, hình ảnh và các đối tượng đa phương tiện dễ dàng hơn trên HTML5.

Kết luận: Bạn đã làm quen và nắm tất cả các thẻ mới trong HTML5. Hi vọng bạn có thể áp dụng các thẻ này trong quá trình thiết kế website.

Bình luận Facebook

2
Để lại bình luận

avatar
1000
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Các tác giả bình luận
[HTML/HTML5] Phần 37: Các phần tử ngữ nghĩa trong HTML5 | | Dam-mi-o[HTML/HTML5] Phần 35: Hỗ trợ trình duyệt HTML5 | | Dam-mi-o Các tác giả bình luận gần đây
  Theo dõi  
mới nhất cũ nhất được bình chọn nhiều nhất
Thông báo của
trackback

[…] [HTML/HTML5] Phần 36: Các phần tử mới trong HTML5 […]

trackback

[…] [HTML/HTML5] Phần 36: Các phần tử mới trong HTML5 – 05 tháng 04, 2018 lúc 4:37:25 Chiều […]