công ty thiết kế website tốt nhất

HTML5: 7 tính năng, mẹo và kỹ thuật mới bạn cần biết 06/05/2020

HTML5: 7 tính năng, mẹo và kỹ thuật mới bạn cần biết

Posted by Admin in HTML5
4632
Một số điểm mới có cho HTML5 :
 
  • Các tính năng mới phải dựa trên HTML, CSS, DOM, và JavaScript
  • Giảm thiếu nhu cầu sử dụng các plugins bên ngoài (chẳng hạn Flash)
  • Xử lý lỗi tốt hơn
  • Thêm các thể đánh dấu mới để dần thay thế cho các mã lập trình
  • HTML5 hoạt động độc lập
  • Quá trình phát triển được chia sẻ rộng rãi.
     
Và bây giờ chúng ta hãy cùng tìm hiểu 7 tính năng, mẹo và kỹ thuật mới có trong HTML5 là gì nhé.
 
1. Doctype
 
Khi thiết kế web bạn có thể ghi nhớ được toàn bộ đoạn mã khai báo XHTML DOCTYPE trong phiên bản html cũ dưới đây không?
 
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
 
Hay
 
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”  “http://www.w3.org/TR/html4/strict.dtd”>
 
Tất nhiên là không ! Và khi chuyển sang phiên bản HTLM5 việc khai báo của bạn sẽ trở nên đơn giản hơn rất nhiều với chị một dòng mã:
 
<!DOCTYPE html>
 
Trong thực tế, Doctype không thực sự cần thiết cho HTML5. Tuy nhiên, nó được sử dụng cho các trình duyệt hiện tại, hoặc những trình duyệt cũ, khi chúng vẫn còn yêu cầu khai báo định rõ kiểu tài liệu là gì. Các trình duyệt không hiểu rằng thẻ DOCTYPE đơn giản là sẽ làm cho các thẻ đánh dấu trở nên quy chuẩn hơn thôi. Vì vậy, không cần lo lắng, hãy vứt bỏ những cảnh báo và nắm lấy DOCTYPE HTML5 mới.
 
2. Những thành phần minh họa
 
Cùng xem qua đoạn mã sau:
 
<img src=”path/to/image” alt=”About image” /> 
<p>Image of Mars. </p>
 
Như các bạn thấy, không dễ dàng hoặc đúng ngữ nghĩa để kết hợp chú thích trong thẻ <p> với các yếu tố hình ảnh. HTML5 đã sữa chữa điều này bằng việc cho ra đời thẻ <figure>.  Khi kết hợp với phần tử <figcaption> chúng ta có thể đã  kết hợp đúng ngữ nghĩa các chú thích với các hình ảnh của mình.
 
Hãy xem đoạn mã html5 dưới đây:
 
<figure> 
<img src=”path/to/image” alt=”About image” /> 
<figcaption> 
<p>This is an image of something interesting. </p> 
</figcaption> 
</figure>
 
3. Định nghĩa lại thẻ  <small>
 
Cách đây không lâu, việc sử dụng phần tử thẻ <small> được áp dụng để tạo ra những tiêu đề phụ liên quan đến biểu trưng. Nó thật sự là một phần tử trình bày hữu dụng! Tuy nhiên, ngày nay cách làm trên đã không còn đúng nữa và phần tử <small> đã được định nghĩa lại, thích hợp hơn để sửa dụng trong việc định nghĩa những nội dung nhỏ. Bạn hãy hình dung một cách đơn giản nếu có một thông tin bản quyền nằm ở cuối chân trang web thì theo quy định trong HTML5 chúng ta sẽ sử dụng thẻ <small> để bao gói thông tin này.
 
The small element now refers to “small print.”
 
4. Không còn thuộc tính Type trong thẻ Script và Link
 
Trong những phiên bản html trước đây trong thẻ <script> và <link> bạn cần khai báo thêm thuộc tính type cho chúng. Ví dụ như đoạn mã dưới đây.
 
<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
<script type=”text/javascript” src=”path/to/script.js”></script>
 
Thực sự việc khai báo thuộc tính này là không cần thiết. Vì hai thẻ trên đã hàm ý rằng chúng là các thẻ tham chiếu đến stylesheets và các tập mã lệnh. Như vậy, chúng ta có thể hoàn toàn loại bỏ thuộc tính type cho cả hai thẻ này. Ví dụ:
 
<link rel=”stylesheet” href=”path/to/stylesheet.css” />
<script src=”path/to/script.js”></script>
 
5. Cần có trích dẫn hay không?
 
Nghe giống như đây là một câu hỏi. Tuy nhiên, bạn hãy nhớ HTML5 không phải là XHTML. Bạn không phải đặt các thuộc tính trong những dấu ngoặc kép nếu bạn không muốn. Và bạn cũng không cần phải đóng các thẻ phần tử. Chẳng có gì là không đúng với cách làm như vậy, nếu nó giúp cho bạn cảm thấy thoải mái hơn trong công việc của mình. Tôi nhận thấy điều này là đúng với chính mình.
 
<p id=someId> Start the reactor.
 
6. Bổ sung thuộc tính ContentEditable
 
Những trình duyệt hiện đại có một thuộc tính tiện lợi được gọi là “contenteditable”. Và đúng như tên gọi của nó, thuộc tính này cho phép người dùng có thể chinh sửa bất cứ nội dung text nào được chứa trong một phần tử (thẻ) html, bao gồm cả những phần tử con của nó. Có nhiều cách ứng dụng với thuộc tính này, bao gồm cả một ứng dụng đơn giản như tạo một danh sách công việc phải làm, hay lưu lại nội dung mà bạn đã chỉnh sửa, v.v…
 
Xem đoạn mã dưới đây:
 
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable=”true”>
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>
 
Thuộc contenteditable gồm có 3 giá trị là False – nội dung không thể được sửa đổi, True -  nội dung có thể sửa đổi, và Inherit – Mặc định, là giá trị true hay false phụ thuộc vào phần tử cha chứa nó. Bạn có thể bổ sung thuộc tính này vào bất kỳ phần tử (thẻ) nào trong một tài liệu HTML. Xem một trang demo mà LNT cung cấp để hiểu rõ hơn về thuộc tính này.
 
7. Email input
 
Nếu chúng ta áp dụng một kiểu “email” cho các form inputs, chúng ta có thể hướng dẫn trình duyệt chỉ cho phép các chuỗi phù hợp với cấu trúc địa chỉ email hợp lệ. Đây chính là cách xây dựng các form xác nhận. Chúng ta có thể không thể tin cậy 100% điều này đã được thực hiện chưa. Trong các trình duyệt cũ mà không hiểu kiểu “email” này , chúng sẽ rơi vào tình trạng chỉ là một hộp văn bản thông thường.
 
Cũng cần lưu ý rằng tất cả các trình duyệt hiện tại vẫn còn chưa đáng tin cậy về sự hỗ trợ cho các phần tử và thuộc tính mới. Ví dụ, Opera dường như có hỗ trợ kiểm tra tính hợp lệ của email, miễn là thuộc tính tên được xác định cụ thể. Tuy nhiên, nó không hỗ trợ thuộc tính placeholder.

Blog