Bài viết này tham khảo những bài viết về Jeffey, Lucy và w3s, và vuốt nhẹ những phần mà truyền cảm hứng cho tôi
Gần đây tôi đang biến toàn bộ thời gian và nỗ lực để thành thạo kỹ năng front-end, tôi muốn nói rằng front-end đang tiến hóa rất nhanh, nhiều tiêu chuẩn và khuôn khổ mới ra mắt mỗi tháng. Thật khó để nắm bắt tất cả và trở thành một front-end chuyên gia, tuy nhiên giống như vương quốc động vật, vô cùng đa dạng, có quá nhiều thứ để nghiên cứu về các loài khác nhau, như tính độc lập và hành động . Nhưng tất cả các vật thể đều có cấu trúc cơ bản là tế bào. Và yêu cầu HTML, CSS, Javascript và HTTP chính là tế bào của mỗi trang web
Rất nhiều trang web có tuổi đời lên đến 10-20 tuổi được hỗ trợ bởi các trình duyệt lỗi thời và cả trình duyệt trên điện thoại đời mới, hỗ trợ nhiều trình duyệt và trình duyệt lỗi luôn là hai vấn đề lớn trong
Hiểu rõ HTML5 là hiểu rõ cấu trúc tạo từng tế bào của trang web, làm cho một trang web có thể nói, chuyển động, tương tác sống động như một con người
Tiêu đề mục
- Doctype kiểu mới
- Phần tử hình
- Unknown format type for Scripts and Links
- Linh hoạt hơn với "Dấu nháy kép"
- Thuộc tính chỉnh sửa
- Phần tử đánh dấu "Mark"
- Hỗ trợ âm thanh
- Hỗ trợ video
- Lưu trữ tại chỗ - Local Storage
- Thuộc tính nhập email
- Thuộc tính Placeholders [ăn trụ giữ chỗ he he]
- Thuộc tính yêu cầu
- Chú thích thuộc tính "Tự động lấy nét"
- Nhập theo mẫu
1. Doctype kiểu mới
Phiền Tiệc, khó nhớ như XHTML doctype
Thế tại sao ta không chuyển sang doctype HTML5. Bạn sẽ thấy cuộc đời đơn giản biết bao nhiêu – tin tôi đi. ]
2. Phần tử hình
HTML5 có thêm phần tử mới là và , vô cùng hiệu quả khi tạo ra 1 khối nội dung độc lập có thể kèm phụ đề, mà khối đó tách biệt khỏi dòng chảy chính của văn bản. Ta có thể di chuyển, loại bỏ khối nội dụng này mà không ảnh hưởng gì tới nội dung chính.
This is an image of something interesting.
3. Unknown format type for Scripts and Links
Bạn vẫn có thể thêm thuộc tính “kiểu-type” cho thẻ “liên kết” và “tập lệnh”
Hoặc có thể hiểu là cả 2 thẻ này đều liên quan đến “bảng định kiểu” và “tập lệnh” rồi không cần khai báo lại
4. Linh hoạt hơn với "Dấu nháy kép"
Bạn có thể sử dụng dấu nháy kép để đóng phần tử hoặc không cần thiết
Start the reactor.
Trong ví dụ này myClass và một sốId đã không cần thiết trong dấu nháy kép
5. Thuộc tính chỉnh sửa
Thuộc tính mới tên “contenteditable” được sử dụng để người dùng có thể chỉnh sửa nội dung đã chỉnh sửa trong phần tử
Ví dụ trên w3s
6. Phần tử đánh dấu "Mark"
Dùng thẻ nếu bạn muốn nổi bật phần văn bản của bạn.
Do not forget to buy milk today.
7. Hỗ trợ âm thanh
Chúng ta không còn phụ thuộc vào phần bổ trợ bên ngoài để chơi tệp âm thanh [như flash]
Phần tử trong HTML5 chuẩn hóa cách nhúng âm thanh vào một trang web. Với HTML 5, có 3 định dạng âm thanh được hỗ trợ là: MP3, Wav, Ogg.
________số 8Ví dụ trên w3s
8. Video hỗ trợ
Giống như phần tử , trước khi có HTML5 video chỉ có thể chạy nếu trình duyệt có gói bổ trợ [như flash].
Phần tử trong HTML5 chuẩn hóa cách để nhúng một video vào một trang web. Tuy nhiên, Safari và IE9 sẽ chấp nhận video với định dạng H.264 trong khi Firefox và Opera có thể dùng định dạng Theora và Vorbis. Chrome có thể dùng định dạng mp4 và Ogg.
Your browser does not support HTML5 video.
Ví dụ trên w3s
9. Lưu trữ tại chỗ - Local Storage
Với Local Storage, ứng dụng web có thể lưu dữ liệu tại chỗ trong trình duyệt của người dùng
Trước khi có HTML5, ứng dụng dữ liệu chỉ có thể lưu trong “cookie”, đi kèm trong mỗi lần ra lệnh yêu cầu tới máy chủ. Lưu trữ tại chỗ sẽ bảo mật hơn, một lượng lớn dữ liệu có thể lưu trữ tại chỗ mà không ảnh hưởng đến trang web hiệu quả
Cookies không giống nhau, giới hạn lưu trữ lớn hơn nhiều [ít nhất là 5MB] và thông tin sẽ không bao giờ gửi đến máy chủ
Lưu trữ tại chỗ là bản gốc [cho mỗi tên miền và giao thức]. Tất cả các trang, từ một bản gốc, có thể lưu trữ và truy cập dữ liệu hoàn toàn giống nhau
Ví dụ trên w3s
10. Thuộc tính nhập email
Nếu chúng ta áp dụng thuộc tính “email” cho một biểu mẫu đầu vào, chúng ta có thể thông báo cho trình duyệt chỉ chấp nhận chuỗi theo cấu trúc hợp lệ của địa chỉ email
Ví dụ trên w3s
11. Thuộc tính Placeholders - ăn bám giữ chỗ he he
Một đoạn văn bản Trình giữ chỗ là một đoạn chữ gợi ý, hiển thị sẵn trong một trường biểu mẫu khi nó chưa được nhập liệu
Trước đây, ta phải sử dụng JavaScript để tạo trình giữ chỗ cho các khung nhập văn bản. Nhưng giờ đây không cần JS nữa vì HTML5 có sẵn thuộc tính Placeholders cho anh em rồi, xài thôi
12. Thuộc tính yêu cầu
Yêu cầu thuộc tính là thuộc tính đúng/sai để xác định trường dữ liệu đã nhập hay chưa trước khi gửi đi biểu mẫu
13. Chú thích thuộc tính "Tự động lấy nét"
Chú ý thuộc tính tự động mới được giới thiệu trong HTML5 được sử dụng để tự động đặt con trỏ chuột vào phần tử nhập liệu khi trang web được tải
Ví dụ trên w3s
14. Nhập theo mẫu
Trước đây, nhà phát triển phải sử dụng Javascript và khó khăn trong việc viết nhanh một khung nhập mà có yêu cầu trước đối với nội dung. Trình duyệt sẽ tự động thông báo nếu nội dung được nhập không trùng với định dạng mẫu
Ví dụ trên w3s
Tham khảo
https. //mã số. tutplus. com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520
https. //thiết kế web. tutplus. com/tutorials/quick-tip-consider-wrapping-your-code-with-a-figure-element--cms-21646
Tác giả. Peter Chang, bản gốc. https. //hackernoon. com/html5-tutorial-for-new-examples-features-list-review-901f3aea2386