Bài viết này đã được cập nhật để phản ánh trạng thái hiện tại của HTML5, được triển khai đầy đủ. Các ví dụ được liệt kê ở đây vẫn hợp lệ, nhưng bạn có thể muốn truy cập các danh mục hướng dẫn phát triển web của chúng tôi dành cho HTML và HTML5 để biết thêm thông tin mới nhất về các ví dụ mã và thực tiễn tốt nhất về phát triển web HTML
Có một số bài viết liệt kê một số tính năng quan trọng sắp ra mắt của HTML5, có thể hoạt động trên một số trình duyệt nhất định. Hướng dẫn dành cho nhà phát triển web này sẽ chỉ cho bạn cách bạn có thể sử dụng một số tính năng nhất định của HTML 5 NGAY BÂY GIỜ
Tính năng HTML5
Các tính năng HTML 5 hữu ích hiện nay bao gồm
- Công nhân web. Một số ứng dụng web sử dụng các tập lệnh nặng để thực hiện các chức năng. Công nhân web sử dụng các luồng nền riêng biệt để xử lý và nó không ảnh hưởng đến hiệu suất của trang web
- Băng hình. Bạn có thể nhúng video mà không cần plugin hoặc codec độc quyền của bên thứ ba. Video trở nên dễ dàng như nhúng một hình ảnh
- Tranh sơn dầu. Tính năng này cho phép nhà phát triển web kết xuất đồ họa một cách nhanh chóng. Như với video, không cần cắm
- Bộ đệm ứng dụng. Các trang web sẽ bắt đầu lưu trữ ngày càng nhiều thông tin cục bộ trên máy tính của khách truy cập. Nó hoạt động giống như cookie, nhưng khi cookie nhỏ, tính năng mới cho phép các tệp lớn hơn nhiều. Google Gears là một ví dụ tuyệt vời về điều này trong thực tế
- định vị địa lý. Được biết đến nhiều nhất để sử dụng trên thiết bị di động, định vị địa lý sắp ra mắt với HTML5
Nếu bạn muốn biết liệu có bất kỳ tính năng nào ở trên hoạt động trên một trình duyệt nhất định hay không, bạn có thể kiểm tra tính năng đó thông qua Modernizer. Thư viện JavaScript nhỏ này cũng rất tốt để phát hiện CSS3. Từ trang web Modernizer, “Modernizr là một thư viện JavaScript nhỏ và đơn giản giúp bạn tận dụng các công nghệ web mới nổi [CSS3, HTML 5] trong khi vẫn duy trì mức độ kiểm soát tốt đối với các trình duyệt cũ hơn có thể chưa hỗ trợ các công nghệ mới này. ”
Cú pháp Modernizer là trực quan
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
Simply insert the modernizr-1.1.js JavaScript file in your page and add a class of “no-js” in the element. You can then use the Modernizr JavaScript object and the various CSS classes it attaches to the html element. Here’s an example of how to do that:
Learning HTML5 Your web page here.
For those of you with a keen eye, you might have noticed the simplified
Nếu bạn vẫn đang sử dụng,
là loại tài liệu của bạn, bạn có thể đơn giản hóa và rút ngắn nó ngay bây giờ. Điều này hoạt động trong tất cả các trình duyệt. Bạn cũng có thể rút ngắn,
ĐẾN
Ngoài ra, bạn có thể rút ngắn tham chiếu đến CSS của mình từ
To Of course, that only works for embedded or inline style sheets. It does not work for external style sheets.
Nếu bạn sử dụng JavaScript trong trang web của mình, bạn cũng có thể rút ngắn cú pháp ở đó. Đây là mã gốc từ một phần của hộp tìm kiếm Google
Bạn có thể rút ngắn điều này bằng cách xóa “text/javascript”. Tôi đã kiểm tra tất cả những điều trên trong trang web cá nhân của mình và mọi thứ vẫn hoạt động trong Internet Explorer, Firefox và Chrome. Tôi đã nói điều đó trước đây và tôi sẽ nói lại lần nữa, đối với tôi, phần hay nhất của HTML5 là mã sạch hơn, đơn giản hơn và ngắn hơn. Về lâu dài, các trang web sẽ chạy nhanh hơn và mượt mà hơn bao giờ hết với ít khả năng mắc lỗi mã hóa hơn
Trong bài viết này, tôi sẽ đề cập đến những gì tôi nghĩ là 7 tính năng hàng đầu của HTML5. HTML5 đã được giới thiệu để hỗ trợ các tính năng khác nhau mà các trang web hiện đại yêu cầu. Vì không có thay đổi lớn nào trong mô hình lập trình của HTML nên HTML5 rất dễ áp dụng. HTML5 cũng tương thích ngược. Tôi đề cập đến việc nó tương thích ngược vì HTML5 được thiết kế theo cách mà các trình duyệt không hỗ trợ chúng có thể bỏ qua các cấu trúc này
tính tương thích của trình duyệt web
Dưới đây là danh sách các trình duyệt chính hỗ trợ hầu hết các tính năng của HTML5. Bạn cũng nên lưu ý rằng không phải tất cả các trình duyệt này đều hỗ trợ tất cả các tính năng của HTML5
- Google Chrome10. 0 trở lên
- Firefox 4. 0 trở lên
- Internet Explorer 8. 0 trở lên
7 tính năng hàng đầu
Hỗ trợ đa phương tiện
Tính năng đầu tiên và quan trọng nhất là hỗ trợ đa phương tiện trong HTML5. Có, HTML5 hỗ trợ cả tệp âm thanh và video được phát trong trình duyệt. Dưới đây là cú pháp mẫu để phát các tệp âm thanh và video tương ứng
Video & Âm thanh
Text to be displayed when the browser doesn't support the video goes here. Text to be displayed when the browser doesn't support the audio goes here.
Các loại phần tử đầu vào mới
Các yếu tố đầu vào đóng một vai trò quan trọng trong các ứng dụng web hướng dữ liệu. Các loại đầu vào giúp nhận đầu vào ở định dạng bắt buộc. Trong HTML5, một số loại đầu vào mới đã được thêm vào. Một số loại đầu vào hiện có là mật khẩu, tệp, v.v. Dưới đây là một số loại mới quan trọng và hữu ích được giới thiệu trong HTML5 cho điều khiển HTML đầu vào
- điện thoại
- url
- màu sắc
- ngày giờ
Canvas trong HTML5
Canvas là một khu vực hình chữ nhật, cho phép thực hiện các thao tác ở cấp độ pixel như vẽ đường thẳng, hộp, hình tròn, biểu diễn đồ họa, v.v. Giờ đây, HTML5 cung cấp hỗ trợ cho các vùng canvas. Dưới đây là một mã mẫu
Fallback content, when canvas is not supported by the browser.
Thuộc tính dữ liệu tùy chỉnh
HTML5 hiện cho phép bạn thêm các thuộc tính dữ liệu hợp lệ, giúp lưu trữ dữ liệu mà không ảnh hưởng đến giao diện người dùng của trang web. Các thuộc tính dữ liệu này có thể được thêm vào theo cách ẩn đối với người dùng và sau này có thể được sử dụng bởi JQuery hoặc các hàm JavaScript của bạn. Để làm cho thuộc tính dữ liệu tùy chỉnh của bạn hợp lệ, thuộc tính phải có tiền tố là từ “dữ liệu”
Nội dung có thể chỉnh sửa
Đây là một tính năng hay, cho phép người dùng cuối chỉnh sửa nội dung của điều khiển HTML. Loại tính năng này cho phép các nhà phát triển xây dựng các trang web bao gồm các phần như ghi chú, trình soạn thảo HTML, v.v. Tất cả những gì bạn cần làm là thêm thuộc tính có tên contentEditable=”true” vào điều khiển HTML
Click here to edit this content!
Tính năng này thực sự tiện dụng khi nó được kết hợp với một tính năng khác gọi là lưu trữ ngoại tuyến. Chủ đề về lưu trữ ngoại tuyến sẽ được đề cập trong một bài viết trong tương lai
Thuộc tính tự động lấy nét và giữ chỗ
Tính năng lấy nét tự động đạt được bằng cách thêm thuộc tính lấy nét tự động. Điều này cho phép điều khiển tự động lấy tiêu điểm khi tải trang
Trình giữ chỗ là một tính năng được hỗ trợ cho các trường nhập bằng cách thêm trình giữ chỗ thuộc tính. Tính năng này hiển thị giá trị được cung cấp cho thuộc tính giữ chỗ, chẳng hạn như dấu nước, cho đến khi tiêu điểm được chuyển đến điều khiển đầu vào
Trình xác thực phạm vi và trường bắt buộc
Chức năng của trường bắt buộc đạt được bằng cách sử dụng thuộc tính có tên "bắt buộc" trên các điều khiển đầu vào. Điều này đảm bảo rằng biểu mẫu sẽ không được đăng cho đến khi giá trị được nhập cho điều khiển đầu vào
Xác thực phạm vi đạt được thông qua việc chỉ định giá trị tối thiểu và tối đa cho điều khiển đầu vào cùng với loại hợp lệ. Điều này đảm bảo rằng biểu mẫu sẽ không được đăng cho đến khi giá trị được nhập cho điều khiển đầu vào nằm trong phạm vi
Phần kết luận
Tôi hy vọng bài viết này liệt kê đúng 7 tính năng hàng đầu của HTML5. Danh sách này hoàn toàn dựa trên suy nghĩ của tôi về các tính năng HTML5. HTML5 có nhiều tính năng thú vị hơn, mà tôi sẽ đề cập trong các bài viết sắp tới. Vui lòng sử dụng phần nhận xét để cho tôi biết bạn có đồng ý với danh sách 7 tính năng hàng đầu của tôi hay không