HTML 5

Tham khảo

https://nguyenvanhieu.vn/hoc-20-kien-thuc-thu-vi-ve-html/?fbclid=IwAR1JpRv2qL-ZIZdjF4FnheAUTTAOWB6YAucmnb1OMgirEFLkpjFl_-3Q770

Có gì mới trong HTML5?

HTML5 Cấu trúc mới

HTML5 nhận ra rằng các trang Web có cấu trúc (structure) , giống như các sách có cấu trúc hoặc các tài liệu XML khác. Nói chung, các thành phần trong web bao gồm navigation,  body content, sidebar content plus headers, footers, và các thành phần khác . HTML 5 đã tạo thẻ để hỗ trợ các yếu tố đó của trang.

• Để xác định các phần sections (section) của trang
• Xác định tiêu đề header (header) của trang
• Xác định chân trang footer (footer) của một trang
• Xác định điều hướng navigation (nav) trên trang
• Xác định bài viết (article) hoặc nội dung chính (primary content) trên một trang
• Xác định nội dung bổ sung như thanh bên sidebar (aside) trên trang
• Xác định hình ảnh (image) chú thích một bài viết

HTML 5 Hỗ trợ trang động mới

HTML 5 được phát triển để giúp các nhà phát triển ứng dụng web, do đó, có rất nhiều tính năng mới để giúp dễ dàng tạo các trang HTML động:

• Content menu - HTML 5 sẽ hỗ trợ việc tạo và sử dụng các menu nội dung trong các trang web và ứng dụng
• href is not required on a tag - Điều này cho phép bạn sử dụng thẻ với các tập lệnh và trong các ứng dụng web mà không cần một nơi để gửi neo đó
• async attribute - Điều này được thêm vào thẻ script để cho trình duyệt biết rằng tập lệnh sẽ được tải không đồng bộ để nó không làm chậm tải và hiển thị phần còn lại của trang.
• Provides details about an element - Điều này sẽ giống như các mẹo công cụ trong các ứng dụng không phải Web.

Ngày 5. Định nghĩa options sử dụng thẻ datalist

Ngày 6. Tạo các thành phần có thể thu gọn với HTML5

Bạn biết gì về Lập Trình Không Khó?

Lập Trình Không Khó là một hệ thống đào tạo lập trình phi lợi nhuận. Các bạn có thể vào website, kênh youtube của hệ thống để tham gia các bài học miễn phí 100%

Website: http://nguyenvanhieu.vn/

Youtube: http://youtube.com/LapTrinhKhongKho

Ngày 7. Responsive hình ảnh với srcset

Ngày 8. Bảng tra cứu về HTML (HTML Cheatsheet)

https://htmlcheatsheet.com/
https://developer.mozilla.org/enUS/docs/Learn/HTML/Cheatsheet
https://websitesetup.org/html5-periodical-table/

Ngày 10. Làm nổi bật một phần văn bản

The goal isn't to live forever, the goal is to create something that will.
― Chuck Palahniuk, Diary

Ngày 11. Cho phép kéo thả bất kỳ thành phần HTML nào

Drag and Drop me on the other side!

Ngày 12. Thẻ progress và thẻ meter

1. Thẻ progress

• Hiển thị thanh tiến trình giúp bạn thấy tiến trình hoàn thành của một nhiệm vụ.⁣⁣
• Nó có 2 thuộc tính max và value
• Không có thuộc tính min, giá trị min luôn luôn là 0.

2. Thẻ meter

• Có thể hiển thị cả giá trị thập phân trong phạm vi khai báo trước.
• Nó không chỉ hiển thị tiến trình, mà còn cho ta thấy các cảnh báo ở các mức giá trị khác nhau
• Bao gồm các thuộc tính: min, max, high, low, optimum

Download Progress
Temperature Meter:

Ngày 17. Color picker và Date picker

Choose Color:
Choose date:

Phần tử <picture>

HTML5 có thêm phần tử <picture> để thêm sự linh hoạt khi xác định nguồn ảnh.
Phần tử <picture> gồm số các phần tử <source>, mỗi phần tử tham chiếu tới các nguồn ảnh khác nhau. Bằng cách này trình duyệt sẽ chọn ảnh hợp với cách xem và/hoặc thiết bị hiện tại nhất.
Mỗi phần tử <source> có các thuộc tính mô tả khi nào thì hợp ảnh nào nhất. Trình duyệt sẽ dùng phần tử <source> đầu tiên hợp với giá trị thuộc tính, bỏ qua các phần tử <source> sau.
Hiển thị ảnh hoa hồng nếu khung nhìn tối thiểu là 650px và ảnh hoa trắng nếu tối thiểu là 465px.

Lưu ý: Luôn dùng phần tử <img> làm phần tử con cuối cùng trong phần tử <picture>. Phần tử <img> được các trình duyệt không hỗ trợ phần tử <picture> sử dụng, hoặc nếu không thẻ nào phù hợp.