The post Quy ước và phong cách viết HTML5 appeared first on WebVN.
]]>Bạn có bao giờ tự hỏi: liệu phong cách viết mã cũng như cú pháp mà mình sử dụng trong HTML đã thực sự theo đúng chuẩn hay chưa?
Từ năm 2000 đến 2010, rất nhiều lập trình viên đã chuyển cách viết từ HTML sang XHTML. Tại sao? Vì XHTML giúp các lập trình viên phải viết mã một cách hợp lệ và chính xác.
HTML5 có cách viết tự do hơn nên bạn phải tự xây dựng và rèn cho mình một phong cách viết mã theo đúng chuẩn.
Viết mã một cách thông minh
Một hiệu quả dễ thấy của những lập trình viên thông minh là người khác có thể dễ dàng hiểu và sử dụng (đối với các bộ máy phân tích) mã HTML của họ.
Như tổ chức web thế giới W3C đã định nghĩa một trang web có ý nghĩa là một trang web “Cho phép dữ liệu được chia sẻ và tái sử dụng trên các ứng dụng, các doanh nghiệp và cộng đồng”. Trong tương lai, những bộ máy tìm kiếm và phân tích có thể sẽ muốn đọc trang HTML của bạn. Sử dụng cú pháp gần với chuẩn XHTML sẽ là một lựa chọn thông minh.
Thao khảo: XHTML và HTML
Sử dụng đúng DOCTYPE
Luôn khai báo doctype ở dòng đầu tiên của trang:
<!DOCTYPE html>
Nếu bạn muốn đồng nhất với các thẻ khác trong trang, bạn có thể sử dụng cách viết thường:
<!doctype html>
Viết thường tên các thẻ
HTML5 cho phép bạn có thể kết hợp cả viết thường và viết hoa tên các thẻ.
Chúng tôi khuyến khích bạn viết thường tên các thẻ, bởi vì:
- Kết hợp cả viết thường và viết hoa là cách viết rất tệ
- Viết thường gần nhất với chuẩn XHTML
- Viết thường nhìn mã nguồn sẽ gọn gàng và rõ ràng hơn
- Viết thường dễ viết hơn
Cách viết tệ:
<SECTION> <p>Đây là nội dung.</p> </SECTION>
Cách viết rất tệ
<Section> <p>Đây là nội dung.</p> </SECTION>
Cách viết TỐT
<section> <p>Đây là nội dung.</p> </section>
Luôn sử dụng thẻ đóng
Trong HTML5, bạn không cần sử dụng thẻ đóng cho tất cả các thẻ (ví dụ thẻ <p>).
Nhưng, chúng tôi khuyến khích bạn nên sử dụng thẻ đóng:
Cách viết tệ:
<section> <p>Đây là nội dung. <p>Đây là nội dung. </section>
Cách viết TỐT:
<section> <p>Đây là nội dung.</p> <p>Đây là nội dung.</p> </section>
Đóng thẻ rỗng
Trong HTML5, bạn có thể tùy ý đóng những thẻ rỗng (thẻ rỗng là những thẻ không có thẻ đóng).
Bạn được phép viết:
<meta charset="utf-8">
và cũng được phép viết như thế này:
<meta charset="utf-8" />
Dấu gạch chéo (/) là bắt buộc nếu bạn sử dụng thẻ trong XHTML và XML.
Nếu bạn muốn những phần mềm đọc XML có thể hiểu được trang của bạn, tốt nhất là hãy sử dụng cách đóng thẻ.
Viết thường tên các thuộc tính
HTML5 cho phép bạn có thể kết hợp cả viết thường và viết hoa tên các thuộc tính.
Chúng tôi khuyến khích bạn viết thường tên các thuộc tính, bởi vì:
- Kết hợp cả viết thường và viết hoa là cách viết rất tệ
- Viết thường gần nhất với chuẩn XHTML
- Viết thường nhìn mã nguồn sẽ gọn gàng và rõ ràng hơn
- Viết thường dễ viết hơn
Cách viết nhìn rất xấu:
<div CLASS="menu">
Nhìn thoáng, gọn gàng:
<div class="menu">
Sử dụng ngoặc cho giá trị thuộc tính
HTML5 cho phép bạn viết giá trị thuộc tính mà không cần dấu ngoặc.
Chúng tôi khuyến khích bạn nên sử dụng dấu ngoặc cho giá trị thuộc tính:
- Bạn phải sử dụng dấu ngoặc nếu giá trị thuộc tính có chứa dấu cách
- Lúc dùng ngoặc, lúc không dùng ngoặc không phải là một phong cách tốt
- Những giá trị trong ngoặc dễ đọc và dễ phân biệt hơn
Trong ví dụ dưới đây, thuộc tính class sẽ không hoạt động như mong muốn do giá trị có chứa dấu cách
<table class=table striped>
Cách viết đúng
<table class="table striped">
Thuộc tính trong thẻ <img>
Luôn sử dụng thuộc tính alt khi bạn chèn ảnh vào website. Điều này rất quan trọng nếu ảnh không thể hiển thị vì một lý do nào đó.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Luôn quy định kích cỡ khi sử dụng ảnh. Nó sẽ không làm website của bạn bị co dãn trong quá trình tải trang do trình duyệt đã dành sẵn không gian cho ảnh trước đó.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Dấu cách và dấu bằng
Bạn có thể sử dụng dấu cách ở 2 đầu dấu bằng:
<link rel = "stylesheet" href = "styles.css">
Nhưng nếu không sử dụng dấu cách sẽ làm cho mã nguồn dễ dọc hơn và các thuộc tính trở nên tách bạch, rõ ràng hơn:
<link rel="stylesheet" href="styles.css">
Tránh code dài trên một dòng
Khi bạn sử dụng một công cụ lập trình HTML, nếu có một dòng code quá dài bạn sẽ phải trượt thanh cuốn sang phải hoặc sang trái để xem hết. Điều này không thuận tiện chút nào.
Hãy cố gắng tránh những dòng code dài hơn 80 ký tự.
Lùi đầu dòng và cách dòng
Không thêm dòng trống vào mã nguồn nếu không cần thiết.
Để dễ đọc, chỉ thêm dòng trống để tách các khối code lớn hoặc phân cách hợp lý giữa các thẻ.
Để dễ đọc, bạn có thể sử dụng 2 dấu cách để lùi đầu dòng.
Đừng thêm dòng trống hoặc dấu cách khi không cần thiết, nhất là khi gặp những dòng code ngắn hoặc những đoạn code liên quan đến nhau.
Cách dòng và lùi đầu dòng như ví dụ dưới đây là không cần thiết:
<body>
<h1>Những thành phố nổi tiếng</h1>
<h2>Tokyo</h2>
<p>
Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo
và là đô thị đông nhất trên thế giới.
</p>
</body>Cách viết tốt hơn:
<body> <h1>Những thành phố nổi tiếng</h1> <h2>Tokyo</h2> <p>Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo và là đô thị đông nhất trên thế giới.</p> </body>
Đối với bảng:
<table>
<tr>
<th>Tên</th>
<th>Miêu tả</th>
</tr>
<tr>
<td>A</td>
<td>Miêu tả về A</td>
</tr>
<tr>
<td>B</td>
<td>Miêu tả về B</td>
</tr>
</table>Đối với danh sách
<ol> <li>London</li> <li>Paris</li> <li>Tokyo</li> </ol>
Thiếu thẻ <html> và <body>?
Trong chuẩn HTML5, bạn có thể không cần dùng thẻ <html> và thẻ <body>.
Đoạn mã nguồn dưới đây hoàn toàn hợp lệ trong HTML5:
<!DOCTYPE html> <head> <title>Tiêu đề trang</title> </head> <h1>Đề mục lớn</h1> <p>Nội dung trang</p>
Chúng không không khuyến khích bạn bỏ thẻ <html> và thẻ <body>.
Thẻ <html> là thẻ gốc của trang, bạn có thể sử dụng để khai báo ngôn ngữ trang đang dùng:
<!DOCTYPE html> <html lang="vi-VN">
Việc khai báo ngôn ngữ rất quan trọng đối với các bộ máy tìm kiếm và các ứng dụng khi truy cập website của bạn.
Việc bỏ thẻ <html> và <body> có thể thể làm treo DOM và phần mềm XML.
Thiếu thẻ <body> có thể gây ra lỗi trong những trình duyệt cũ (như IE9).
Thiếu thẻ <head>?
Trong chuẩn HTML5, bạn có thể không cần dùng thẻ <head>.
Mặc định, trình duyệt sẽ tự động thêm thẻ <head> trước thẻ <body>.
Bạn có thể bỏ thẻ <head> để giảm sự phức tạp khi viết mã HTML:
<!DOCTYPE html> <html> <title>Tiêu để trang</title> <body> <h1>Đề mục lớn</h1> <p>Nội dung trang</p> </body> </html>
Thẻ bổ trợ
<title> là thẻ bắt buộc trong HTML5. Hãy đặt tiêu đề trang ý nghĩa nhất có thể:
<title>Cú pháp và phong cách viết mã HTML5</title>
Để đảm bảo các bộ máy tìm kiếm hiểu trang của bạn một cách chuẩn xác, hãy thiết lập ngôn ngữ và bộ mã hóa ký tự mà trang sử dụng ở ngay những dòng đầu tiên của trang:
<!DOCTYPE html> <html lang="vi-VN"> <head> <meta charset="UTF-8"> <title>Cú pháp và phong cách viết mã HTML5</title> </head>
Ghi chú trong HTML
Với những ghi chú ngắn chỉ trên một dòng, bạn chỉ việc sử dụng <!– ở đầu dòng và thẻ –> ở cuối dòng:
<!-- Đây là một ghi chú -->
Với những ghi chú dài, được viết trên nhiều dòng, bạn phải đặt cặp thẻ <!– và –> riêng trên 1 dòng:
<!-- Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài. -->
Những ghi chú dài sẽ dễ nhìn hơn nếu bạn thụt lùi đầu dòng bằng 2 dấu cách.
CSS
Bạn có thể sử dụng cú pháp đơn giản để liên kết với tệp tin CSS (không cần thiết phải sử dụng thuộc tính type):
<link rel="stylesheet" href="styles.css">
Trong CSS, những đoạn ngắn có thể gộp thành một dòng như thế này:
p.into {font-family: Verdana; font-size: 16em;}Những đoạn dài nên được viết thành nhiều dòng:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
- Đặt dấu mở ngoặc trên cùng dòng với thẻ cần trang trí.
- Sử dụng một dấu cách trước dấu ngoặc mở.
- Sử dụng 2 dấu cách để lùi đầu dòng các thuộc tính bên trong.
- Sử dụng dấu 2 chấm và một dấu cách để tách biệt phần thuộc tính và giá trị.
- Sử dụng dấu cách sau dấu phẩy hoặc dấu chấm phẩy.
- Sử dụng dấu chấm phẩy sau mỗi cặp “thuộc tính/giá trị”.
- Chỉ sử dụng dấu ngoặc cho giá trị nếu trong giá trị có chứa dấu cách.
- Đặt dấu ngoặc đóng ngoặc ở một dòng riêng biệt, phía trước không có dấu cách.
- Tránh sử dụng 80 ký tự trên cùng một dòng.
JavaScript
Bạn có thể sử dụng cú pháp đơn giản để liên kết với tệp tin JavaScript (không cần thiết phải sử dụng thuộc tính type):
<script src="myscript.js">
Truy cập vào các thành phần HTML bằng JavaScript
Hậu quả của việc sử dụng những kiểu HTML “bừa bãi” có thể dẫn đến các lỗi khi sử dụng JavaScript.
Ở ví dụ dưới đây cho thấy, cách đặt tên khác nhau sẽ có cách truy cập khác nhau trong JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <p id="Demo">Đây là nội dung 1.</p> <p id="demo">Đây là nội dung 2.</p> <script> // Chỉ có đoạn nội dung 2 bị ghi đè document.getElementById("demo").innerHTML = "XIN CHÀO."; </script> </body> </html> |
Viết thường tên các tệp tin
Hầu hết các máy chủ web (Apache, Unix) phân biệt viết hoa, viết thường khi truy cập tên tệp tin:
Một ảnh là london.jpg không thể truy cập được với tên là London.jpg.
Những máy chủ web khác (Microsoft, IIS) không phân biệt viết hoa, viết thường:
london.jpg có thể truy cập bằng tên London.jpg hoặc london.jpg.
Nếu bạn chuyển website từ một máy chủ không phân biệt viết hoa-viết thường sang một máy chủ phân biệt viết hoa-viết thường, có thể dẫn tới một vài lỗi nhỏ khiến cho website của bạn bị hỏng.
Để tránh dẫn tới những lỗi này, hãy luôn sử dụng viết thường cho tên tệp tin (nếu có thể).
Phần mở rộng của tệp tin
Các tệp tin HTML nên có phần mở rộng là .html (hoặc .htm).
Các tệp tin CSS nên có phần mở rộng là .css
Các tệp tin JavaScript nên có phần mở rộng là .js
Sự khác biệt giữa .htm và .html
Không có sự khác biệt nào giữa hai phần mở rộng .htm và .html. Trình duyệt và máy chủ sẽ làm việc với cả 2 phần mở rộng như là một trang HTML.
.htm là do “di truyền” từ hệ điều hành DOS đời đầu, khi mà phần mở rộng bị giới hạn là 3 ký tự.
.html là do “di truyền” của hệ điều hành Unix không bị giới hạn 3 ký tự.
Khác biệt về mặt kỹ thuật
Khi bạn truy cập vào một địa chỉ mà không có tên tệp tin (ví dụ https://webvn.com/), website sẽ tự động hiển thị tệp tin mặc định. Tệp tin mặc định phổ biến là index.html, index.htm, default.html và default.htm.
Nếu website của bạn đã được cấu hình tên tệp tin mặc định là “index.html”, bạn phải đặt tên tệp tin là “index.html”, không được đặt là “index.htm.”
Tuy nhiên, thông thường các website sẽ được cấu hình nhiều tệp tin mặc định thay vì một, thậm chí bạn có thể tự cấu hình bao nhiêu tệp tin mặc định mình muốn.
Dù vậy, phần mở rộng đầy đủ của một tệp tin HTML là .html và không có lý do gì để bạn không sử dụng phần mở rộng này.
The post Quy ước và phong cách viết HTML5 appeared first on WebVN.
]]>The post Chuyển từ HTML4 sang HTML5 appeared first on WebVN.
]]>| Cách viết trong HTML4 | Chuyển sang HTML5 |
|---|---|
| <div id="header"> | <header> |
| <div id="menu"> | <nav> |
| <div id="content"> | <section> |
| <div id="post"> | <article> |
| <div id="footer"> | <footer> |
Trang được viết theo HTML4
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>HTML4</title> <style> body { font-family:Verdana,sans-serif;font-size:0.8em; } div#header,div#footer,div#content,div#post { border:1px solid grey; margin:5px;margin-bottom:15px;padding:8px; background-color:white; } div#header,div#footer { color:white;background-color:#444;margin-bottom:5px; } div#content { background-color:#ddd; } div#menu ul { margin:0;padding:0; } div#menu ul li { display:inline; margin:5px; } </style> </head> <body> <div id="header"> <h1>Cộng đồng Web Việt</h1> </div> <div id="menu"> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content"> <h2>Tin tức</h2> <div id="post"> <h2>Tin mới</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div> <div id="post"> <h2>Tin mới</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div> </div> <div id="footer"> <p>© 2015 WebVN. Toàn quyền sở hữu.</p> </div> </body> </html> |
Chuyển Doctype sang HTML5
Chuyển doctype từ HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
sang doctype của HTML5
<!DOCTYPE html>
Chuyển bảng mã ký tự sang HTML5
Chuyển thông tin bảng mã ký tự từ HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
sang HTML5:
<meta charset="utf-8">
Thêm Shiv
Các thẻ có ý nghĩa trong HTML5 được hầu hết các trình duyệt hiện đại hỗ trợ.
Thêm vào đó, bạn có thể “dạy” cho những trình duyệt cũ cách để xử lý “những thẻ mới”.
Thêm tệp tin javascript Shiv để Internet Explorer các thẻ HTML5:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Thêm CSS cho các thẻ HTML5
Đây là CSS hiện tại trong HTML4:
div#header,div#footer,div#content,div#post {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
color:white;background-color:#444;margin-bottom:5px;
}
div#content {
background-color:#ddd;
}
div#menu ul {
margin:0;padding:0;
}
div#menu ul li {
display:inline; margin:5px;
}Chúng ta sẽ tạo thêm CSS cho các thẻ HTML dựa trên CSS cũ:
header,footer,section,article {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
Chuyển header, footer sang HTML5
Chúng ta sẽ chuyển thẻ <div> có id=”header” và id=”footer”:
<div id="header"> <h1>Cộng đồng Web Việt</h1> </div> . . . <div id="footer"> <p>© 2015 WebVN. Toàn quyền sở hữu.</p> </div>
sang sử dụng thẻ <header>, <footer> của HTML5:
<header> <h1>Cộng đồng Web Việt</h1> </header> . . . <footer> <p>© 2015 WebVN. Toàn quyền sở hữu.</p> </footer>
Chuyển sang thẻ <nav> trong HTML5
Chúng ta sẽ chuyển thẻ <div> có id=”menu”:
<div id="menu"> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div>
sang thẻ <nav> trong HTML5:
<nav> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </nav>
Chuyển sang thẻ <section> trong HTML5
Chúng ta sẽ chuyển thẻ <div> có id=”content”:
<div id="content"> . . . </div>
sang thẻ <section> trong HTML5:
<section> . . . </section>
Chuyển sang thẻ <article> trong HTML5
Chúng ta sẽ chuyển thẻ <div> có id=”post”:
<div id="post"> <h2>Tin mới</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div>
sang thẻ <article> trong HTML5:
<article> <h2>Tin mới</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </article>
Tới đây, chúng ta có thể tiến hành bỏ CSS cũ
div#header,div#footer,div#content,div#post {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
color:white;background-color:#444;margin-bottom:5px;
}
div#content {
background-color:#ddd;
}
div#menu ul {
margin:0;padding:0;
}
div#menu ul li {
display:inline; margin:5px;
}
Trang đã được chuyển sang HTML5
Cuối cùng, bạn có thể bỏ thẻ <head>. Thẻ này không cần thiết trong HTML5:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!DOCTYPE html> <html lang="en"> <title>HTML5</title> <meta charset="utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> body { font-family:Verdana,sans-serif;font-size:0.8em; } header,footer,section,article { border:1px solid grey; margin:5px;margin-bottom:15px;padding:8px; background-color:white; } header,footer { color:white;background-color:#444;margin-bottom:5px; } section { background-color:#ddd; } nav ul { margin:0;padding:0; } nav ul li { display:inline; margin:5px; } </style> <body> <header> <h1>Cộng đồng Web Việt</h1> </header> <nav> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </nav> <section> <h2>Tin tức</h2> <article> <h2>Tin mới</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </article> <article> <h2>Tin mới</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </article> </section> <footer> <p>© 2015 WebVN. Toàn quyền sở hữu.</p> </footer> </body> </html> |
Sự khác biệt giữa <article> <section> và <div>
Có một sự khác biệt hơi khó thấy trong chuẩn HTML5 giữa các thẻ <article> <section> và <div>.
Trong chuẩn HTML5, thẻ <section> được định nghĩa như là một khối gồm các nội dung liên quan.
Thẻ <article> được định nghĩa như là một thẻ bao gồm nội dung hoàn chỉnh, một khối khép kín.
Thẻ <div> được định nghĩa như là một khối bao gồm các thẻ con bên trong.
Vậy chúng ta phải hiểu thế nào đây?
Rất đơn giản, tùy thuộc vào nội dung bạn muốn thể hiện, bạn hãy linh hoạt sử dụng các thẻ.
Trong ví dụ bên trên chúng ta đã sử dụng thẻ <section> bao ngoài thẻ <article>.
Nhưng chúng ta cũng có thể sử dụng thẻ <article> với mục đích tương tự.
Dưới đây là một vài ví dụ bạn có thể linh hoạt sử dụng các thẻ:
Thẻ <article> trong thẻ <article>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5</title> <meta charset="utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> body {font-family: Verdana, sans-serif; font-size:0.8em;} header, nav, section, article, footer {border:1px solid grey; margin:5px; padding:8px;} nav ul {margin:0; padding:0;} nav ul li {display:inline; margin:5px;} </style> </head> <body> <header> <h1>Trang tin HTML5</h1> </header> <nav> <ul> <li>Tin tức</li> <li>Thể thao</li> <li>Thời tiết</li> </ul> </nav> <article> <h2>Các thành phố nổi tiếng</h2> <article> <h2>London</h2> <p>London là thủ đô của Nước Anh. Nó là thành phố đông dân nhất trong Vương Quốc liên hiệp Anh với một đô thị có diện tích hơn 13 triệu cư dân.p> </article> <article> <h2>Paris</h2> <p>Paris là thủ đô và là thành phố đông dân nhất của Pháp.</p> </article> <article> <h2>Tokyo</h2> <p>Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo và là đô thị đông nhất trên thế giới.</p> </article> </article> <footer> <p>© 2015 WebVN. Toàn quyền sở hữu.</p> </footer> </body> </html> |
Thẻ <div> trong thẻ <article>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5</title> <meta charset="utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> body {font-family: Verdana, sans-serif; font-size:0.8em;} header, nav, section, article, footer, div.city {border:1px solid grey; margin:5px; padding:8px;} nav ul {margin:0; padding:0;} nav ul li {display:inline; margin:5px;} </style> </head> <body> <header> <h1>Trang tin HTML5</h1> </header> <nav> <ul> <li>Tin tức</li> <li>Thể thao</li> <li>Thời tiết</li> </ul> </nav> <article> <h2>Các thành phố nổi tiếng</h2> <div class="city"> <h2>London</h2> <p>London là thủ đô của Nước Anh. Nó là thành phố đông dân nhất trong Vương Quốc liên hiệp Anh với một đô thị có diện tích hơn 13 triệu cư dân.p> </div> <div class="city"> <h2>Paris</h2> <p>Paris là thủ đô và là thành phố đông dân nhất của Pháp.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo và là đô thị đông nhất trên thế giới.</p> </div> </article> <footer> <p>© 2015 WebVN. Toàn quyền sở hữu.</p> </footer> </body> </html> |
Thẻ <div> trong thẻ <section> trong thẻ <article>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5</title> <meta charset="utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> body {font-family: Verdana, sans-serif; font-size:0.8em;} header, nav, article, footer, div.city, div.country {border:1px solid grey; margin:5px; padding:8px;} nav ul {margin:0; padding:0;} nav ul li {display:inline; margin:5px;} </style> </head> <body> <header> <h1>Trang tin HTML5</h1> </header> <nav> <ul> <li>Tin tức</li> <li>Thể thao</li> <li>Thời tiết</li> </ul> </nav> <article> <section> <h2>Các thành phố nổi tiếng</h2> <div class="city"> <h2>London</h2> <p>London là thủ đô của Nước Anh. Nó là thành phố đông dân nhất trong Vương Quốc liên hiệp Anh với một đô thị có diện tích hơn 13 triệu cư dân.p> </div> <div class="city"> <h2>Paris</h2> <p>Paris là thủ đô và là thành phố đông dân nhất của Pháp.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo và là đô thị đông nhất trên thế giới.</p> </div> </section> <section> <h2>Các quốc gia nổi tiếng</h2> <div class="country"> <h2>Nước Anh</h2> <p>London là thủ đô của Nước Anh. Nó là thành phố đông dân nhất trong Vương Quốc liên hiệp Anh với một đô thị có diện tích hơn 13 triệu cư dân.</p> </div> <div class="country"> <h2>Nước Pháp</h2> <p>Paris là thủ đô và là thành phố đông dân nhất của Pháp.</p> </div> <div class="country"> <h2>Nước Nhật Bản</h2> <p>Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo và là đô thị đông nhất trên thế giới.</p> </div> </section> </article> <footer> <p>© 2015 WebVN. Toàn quyền sở hữu.</p> </footer> </body> </html> |
The post Chuyển từ HTML4 sang HTML5 appeared first on WebVN.
]]>The post Các thẻ có ý nghĩa trong HTML5 appeared first on WebVN.
]]>Thẻ có ý nghĩa là gì?
Thẻ có ý nghĩa là những thẻ miêu tả rõ ràng mục đích sử dụng cả đối với trình duyệt lẫn lập trình viên.
Ví dụ về thẻ không có ý nghĩa: <div> và <span> – Không miêu tả rõ ràng nội dung trong thẻ.
Ví dụ về thẻ có ý nghĩa: <form>, <table> và <img> – Miêu tả rõ ràng nội dung bên trong thẻ.
Trình duyệt hỗ trợ
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Thẻ có ý nghĩa | Có | Có | Có | Có | Có |
Các thẻ có ý nghĩa trong HTML5 được hầu hết các trình duyệt hiện đại hỗ trợ.
Thêm vào đó, bạn có thể “dạy” cho những trình duyệt cũ cách để xử lý “những thẻ mới”.
Bạn có thể tìm hiểu thêm Trình duyệt hỗ trợ HTML5.
Thẻ có nghĩa mới trong HTML5
Rất nhiều website hiện tại đang thiết kế dựa trên những mã HTML như: <div class=”header”> <div id=”footer”> để định nghĩa khu vực đầu trang, chân trang.
HTML5 đã tạo ra những thẻ có ý nghĩa mới để quy định từng phần khác nhau trong trang web:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
Thẻ <section> trong HTML5
Thẻ <section> được sử dụng để tạo thành một khu vực bao gồm những nội dung giống nhau.
Dựa theo tài liệu về HTML5 của W3C thì: “Khu vực là một nhóm các nội dung có cùng chủ đề.”
Trang chủ của một website có thể đựa chia thành nhiều khu vực khác nhau như: giới thiệu, nội dung mới, thông tin liên hệ,…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <section> <h1>WWF</h1> <p>Quỹ Quốc Tế Bảo Vệ Thiên nhiên (WWF) là một tổ chức quốc tế chuyên làm việc về các vấn đề liên quan đến việc bảo tồn, nghiên cứu và phục hồi môi trường, trước đây có tên là Quỹ Động Vật Hoang Dã Thế giới. WWF đã được thành lập vào năm 1961.</p> </section> <section> <h1>Biểu tượng Gấu Trúc của WWF</h1> <p>Gấu Trúc đã được lựa chọn làm biểu tượng WWF. Logo Gấu Trúc nổi tiếng của WWF có nguồn gốc từ một chú gấu trúc có tên là Chi Chi đã được chuyển từ vườn thú Bắc Kinh đến Sở thú London vào cùng năm thành lập của WWF.</p> </section> </body> </html> |
Thẻ <article> trong HTML5
Thẻ <article> được sử dụng cho các nội dung khép kín, độc lập.
Nội dung trong thẻ <article> có ý nghĩa riêng biệt và có thể độc lập với những phần còn lại của website. Người dùng có thể đọc nội dung bên trong thẻ <article> mà không cần quan tâm tới những phần khác.
Bạn có thể sử dụng thẻ <article> trong:
- Bài viết của diễn đàn
- Bài viết của blog
- Bài viết của một trang báo
Thẻ trong thẻ
Trong chuẩn HTML5, thẻ <article> được sử dụng để tạo ra các khối nội dung hoàn chỉnh, khép kín.
Thẻ <section> được sử dụng để tạo ra nhóm các nội dung liên quan tới nhau.
Vậy, chúng ta có thể sử dụng những định nghĩa này để quyết định xem thẻ nào phải nằm bên trong thẻ nào hay không? Câu trả lời là: Không thể!
Trên Internet, bạn có thể tìm thấy rất nhiều trang HTML sử dụng thẻ <section> để chứa thẻ <article> và cũng rất nhiều trang sử dụng thẻ <article> để chứa thẻ <sections>.
Ngoài ra, bạn cũng có thể thấy những trang sử dụng thẻ <section> bên trong một thẻ <section> và thẻ <article> bên trong một thẻ <article>.
Thẻ <header> trong HTML5
Thẻ <header> được sử dụng cho phần đầu trang hoặc phần đầu của một thẻ.
Thẻ <header> nên được sử dụng để bao ngoài nội dung giới thiệu trang.
Bạn có thể sử dụng một vài thẻ <header> trong một trang HTML.
Ví dụ dưới đây sử dụng thẻ <header> bên trong một bài viết:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <article> <header> <h1>WWF làm gì?</h1> <p>Sứ mệnh của WWF:</p> </header> <p>Sứ mệnh của WWF là ngăn chặn sự xuống cấp môi trường tự nhiên của hành tinh chúng ta và xây dựng một tương lai trong đó con người sống hài hòa với thiên nhiên.</p> </article> </body> </html> |
Thẻ <footer> trong HTML5
Thẻ <footer> được sử dụng cho phần cuối trang hoặc hoặc phần cuối của một thẻ.
Thông thường thẻ <footer> dùng để chứa thông tin về tác giả, thông tin bản quyền, liên kết kết tới điều khoản sử dụng, thông tin liên hệ, v.vv.
Bạn có thể sử dụng một vài thẻ <footer> trong một trang HTML.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <footer> <p>Tác giả: Nguyễn Văn A</p> <p>Thông tin liên hệ: <a href="mailto:someone@example.com"> someone@example.com</a>.</p> </footer> </body> </html> |
Thẻ <nav> trong HTML5
Thẻ <nav> được sử dụng để chứa các liên kết điều hướng trong trang.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <nav> <a href="/hoc-html/">Học HTML</a> | <a href="/gioi-thieu-ve-html5/">HTML5</a> | <a href="/canvas-trong-html5/">Đồ họa HTML5</a> | <a href="/video-audio-trong-html/">Multimedia trong HTML5</a> </nav> </body> </html> |
Thẻ <aside> trong HTML5
Thẻ <aside> được sử dụng để chứa những thông tin bên cạnh nội dung chính.
Nội dung bên trong thẻ <aside> nên liên quan tới nội dung chính.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <p>Google có trụ sở tại Thung lũng Silicon.</p> <aside> <h4>Thung lũng Silicon</h4> <p>Thung lũng Silicon nằm ở phía Nam của vùng vịnh San Francisco tại phía Bắc California ở Mỹ.</p> </aside> </body> </html> |
Thẻ <figure> và <figcaption> trong HTML5
Nếu bạn để ý, trong những cuốn sách hay truyện thường hay có ghi chú ở dưới các bức ảnh.
Mục đích của ghi chú này là giải thích rõ nghĩa thêm cho bức ảnh.
Trong HTML5, ảnh và ghi chú có thể được đặt cùng nhau bên trong thẻ <figure>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <p>Bãi biển Mỹ Khê có chiều dài 900m, thuộc vào loại nhộn nhịp nhất trong số các bãi tắm của Đà Nẵng. Tạp chí kinh tế Mỹ - Forbes đã bình chọn bãi biển Đà Nẵng là một trong sáu bãi biển quyến rũ nhất hành tinh vào năm 2005.</p> <figure> <img src="/wp-content/uploads/2015/10/bien-my-khe.jpg" alt="Bãi biển Mỹ Khê, Đà Nẵng" width="302" height="216"> <figcaption>Bãi biển Mỹ Khê, Đà Nẵng nhìn từ trên cao.</figcaption> </figure> </body> </html> |
Tại sao sử dụng thẻ có ý nghĩa trong HTML5?
Trong HTML4, các lập trình viên phải tự tạo tên class hoặc ID hay dùng để trang trí CSS như:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, …
Điều này có thể khiến các công cụ tìm kiếm không thể xác định chính xác nội dung website.
Trong HTML5, những thẻ như: <header> <footer> <nav> <section> <article> làm cho mọi chuyện trở nên dễ dàng hơn rất nhiều với cả lập trình viên và các công cụ tìm kiếm.
The post Các thẻ có ý nghĩa trong HTML5 appeared first on WebVN.
]]>The post Thẻ mới trong HTML5 appeared first on WebVN.
]]>Các thẻ có ý nghĩa trong HTML5
HTML5 cung cấp các thẻ mới để bạn có thể tạo ra một cấu trúc trang tốt hơn:
| Thẻ | Miêu tả |
|---|---|
| <article> | Một bài viết trong trang |
| <aside> | Nội dung bên ngoài nội dung chính nhưng có tác dụng bổ trợ cho nội dung chính. |
| <bdi> | Quy định hướng của chữ từ trái sang phải hay từ phải sang trái |
| <details> | Thông tin chi tiết mà người dùng có thể xem hoặc ẩn đi |
| <dialog> | Tạo hộp thoại hoặc một cửa sổ |
| <figcaption> | Tạo chú thích cho thẻ <figure> |
| <figure> | Tạo nội dung khép kín như hình minh họa, biểu đồ, hình ảnh, v.v.. |
| <footer> | Phần cuối của một trang hoặc một khu vực trong trang |
| <header> | Phần đầu của một trang hoặc một khu vực trong trang |
| <main> | Nội dung chính của trang |
| <mark> | Đánh dấu hoặc làm nổi bật chữ |
| <menuitem> | Tạo một menu con mà người dùng có thể gọi ra từ một popup menu |
| <meter> | Tạo thước đo trong phạm vi định sẵn |
| <nav> | Khu vực dành cho các liên kết điều hướng trong trang |
| <progress> | Tạo thanh tiến trình công việc |
| <rp> | Nội dung thay thế trong trường hợp trình duyệt không hỗ trợ thẻ ruby |
| <rt> | Giải thích/phát âm của ký tự Đông Á |
| <ruby> | Chú thích ruby (dành cho kiểu chữ Đông Á) |
| <section> | Tạo một khu vực trong trang |
| <summary> | Tạo tiêu đề cho thẻ <details> |
| <time> | Hiển thị nội dung là ngày tháng/ thời gian |
| <wbr> | Quy định đoạn nội dung có thể xuống dòng để tránh hỏng giao diện |
Bạn có thể tìm hiểu thêm về Các thẻ có ý nghĩa trong HTML5
Các thẻ mới trong form
| Thẻ | Miêu tả |
|---|---|
| datalist | Tạo các lựa chọn gợi ý cho thẻ input |
| keygen | Tạo cặp khóa (key-pair) trong form |
| output | Hiển thị kết quả của một phép tính |
Bạn có thể tìm hiểu thêm về Các thẻ trong form HTML
Các kiểu input mới
| Kiểu input mới | Thuộc tính mới cho thẻ input |
|---|---|
|
|
Bạn có thể tìm hiểu thêm về các kiểu input cũ và mới trong bài Thẻ input trong HTML và Thuộc tính trong thẻ Input
Cú pháp cho thuộc tính trong HTML5
HTML5 cho phép bạn sử dụng 4 kiểu cú pháp dành cho thuộc tính.
Ví dụ dưới đây sẽ cho thấy những cú pháp khác nhau được sử dụng trong thẻ <input>:
| Kiểu | Ví dụ |
|---|---|
| Chỉ có tên thuộc tính | <input type="text" value="John" disabled> |
| Không có ngoặc | <input type="text" value=John> |
| Ngoặc kép | <input type="text" value="John Doe"> |
| Ngoặc đơn | <input type="text" value='John Doe'> |
Trong HTML5, tất cả 4 loại cú pháp đều có thể được sử dụng.
Đồ họa HTML5
| Thẻ | Miêu tả |
|---|---|
| <canvas> | Vẽ đồ họa sử dụng JavaScript |
| <svg> | Vẽ đồ họa sử dụng SVG |
Tìm hiểu thêm về Canvas trong HTML5
Tìm hiểu thêm về SVG trong HTML5
Các thẻ multimedia mới
| Thẻ | Miêu tả |
|---|---|
| <audio> | Chèn âm thanh, âm nhạc vào website |
| <embed> | Nhúng các ứng dụng bên ngoài vào website (như plug-in) |
| <source> | Nguồn để phát <video> và <audio> |
| <track> | Tạo phụ đề, chữ chạy trong khi phát <video> và <audio> |
| <video> | Chèn video hoặc một bộ phim vào website |
Tìm hiểu thêm về Video trong HTML5
Tìm hiểu thêm về Audio trong HTML5
The post Thẻ mới trong HTML5 appeared first on WebVN.
]]>The post Trình duyệt hỗ trợ HTML5 appeared first on WebVN.
]]>Trình duyệt hỗ trợ HTML5
HTML5 được tất cả các trình duyệt hiện đại hỗ trợ.
Ngoài ra, những “thẻ lạ” mà trình duyệt chưa hiểu được, nó sẽ coi như là một thẻ inline (xem thêm Block và Inline trong HTML).
Chính vì thế, bạn có thể “dạy” các trình duyệt cũ hiểu các thẻ mới của HTML5.
Định nghĩa các thẻ HTML5 như thẻ block
HTML5 định nghĩa 8 thẻ có ý nghĩa (semantic) mới. Tất cả những thẻ này đều là thẻ block.
Để đảm bảo các thẻ này vẫn hoạt động đúng trong các trình duyệt cũ, bạn có thể thiết lập thuộc tính CSS display là block như sau:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Thêm các thẻ mới vào HTML
Bạn có thể thêm bất kỳ thẻ mới nào vào HTML với 1 thủ thật như dưới đây.
Ví dụ thêm một thẻ là <newtag> và HTML và hiển thị style cho thẻ đó:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>Thêm thẻ mới vào HTML</title> <script>document.createElement("newtag")</script> <style> newtag{ display:block; background-color:#ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <h1>Đề mục</h1> <p>Nội dung trang</p> <newtag>Đây là nội dung trong thẻ mới của HTML</newtag> </body> </html> |
Đoạn JavaScript document.createElement(“newtag”) được thêm vào chỉ để phục vụ cho IE.
Vấn đề với Internet Explorer
Bạn có thể sử dụng giải pháp được mô tả ở trên cho tất cả các thẻ mới của HTML5, nhưng:
Nhưng rất may là tác giả Sjoerd Visscher đã tạo ra một tệp tin JavaScript làm cho trình duyệt IE hỗ trợ HTML5 được gọi là “shiv”:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Đoạn mã ở trên chỉ dành cho trình duyệt Internet Explorer phiên bản 8 trở về trước. Với các trình duyệt khác hoặc phiên bản Internet Explorer cao hơn, chỉ coi đây là một đoạn ghi chú mà thôi.
Sử dụng SHIV
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Trang trí HTML5</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> </head> <body> <h1>London</h1> <article> London là thủ đô của Nước Anh. Nó là thành phố đông dân nhất trong Vương Quốc Anh với một đô thị có diện tích hơn 13 triệu cư dân. </article> </body> </html> |
Đường dẫn đến shiv phải được để trong thẻ <head> vì Internet Explorer cần phải biết tất cả các thẻ mới trước khi đọc chúng.
Khung của một trang HTML5
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!DOCTYPE html> <html lang="vi"> <head> <title>Khung của trang HTML5</title> <meta charset="utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> body {font-family: Verdana, sans-serif; font-size:0.8em;} header,nav, section,article,footer {border:1px solid grey; margin:5px; padding:8px;} nav ul {margin:0; padding:0;} nav ul li {display:inline; margin:5px;} </style> </head> <body> <header> <h1>Khung của trang HTML5</h1> </header> <nav> <ul> <li><a href="/keo-tha-trong-html5/">Kéo thả trong HTML5</a></li> <li><a href="/geolocation-dinh-vi-vi-tri-trong-html5/">Định vị trong HTML5</a></li> <li><a href="/canvas-trong-html5/">Canvas trong HTML5</a></li> </ul> </nav> <section> <h1>Các thành phố nổi tiếng</h1> <article> <h2>London</h2> <p>London là thủ đô của Nước Anh. Nó là thành phố đông dân nhất trong Vương Quốc Anh với một đô thị có diện tích hơn 13 triệu cư dân.</p> </article> <article> <h2>Paris</h2> <p>Paris là thủ đô và là thành phố đông dân nhất của Pháp.</p> </article> <article> <h2>Tokyo</h2> <p>Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo và là đô thị đông nhất trên thế giới.</p> </article> </section> <footer> <p>© 2015 WebVN. Toàn quyền sở hữu.</p> </footer> </body> </html> |
The post Trình duyệt hỗ trợ HTML5 appeared first on WebVN.
]]>The post Giới thiệu về HTML5 appeared first on WebVN.
]]>Trong HTML5, khai báo DOCTYPE rất đơn giản:
<!DOCTYPE html>
Khai báo bảng mã hóa ký tự (charset) cũng rất dễ dàng:
<meta charset="UTF-8">
Ví dụ về HTML5:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tiêu đề của trang</title> </head> <body> Nội dung trang </body> </html>
Thành phần mới trong HTML5
Các thành phần mới được người dùng sử dụng phổ biến trong HTML5:
Các thẻ có ý nghĩa: <header>, <footer>, <article> và <section>.
Các thuộc tính điều kiện trong form: number, date, time, calendar và range.
Các thẻ về đồ họa: <svg> và <canvas>.
Các thẻ multimedia: <audio> và <video>.
API mới trong HTML5
Các API mới và được yêu thích nhất trong HTML5:
- Application Cache – Lưu trữ tài nguyên tạm thời HTML5
- Geolocation – Định vị vị trí trong HTML5
- Drag/Drop – Kéo thả trong HTML5
- Local Storage – Lưu trữ dữ liệu trong HTML5
- SSE – Server-Sent Event – Tự động cập nhật nội dung trong HTML5
- Web Worker – JavaScript chạy ngầm trong HTML5
Các thẻ bị loại bỏ trong HTML5
Các thẻ HTML4 dưới đây sẽ bị bỏ đi trong HTML5:
| Thẻ bị loại bỏ | Thay thế bằng |
|---|---|
| <acronym> | <abbr> |
| <applet> | <object> |
| <basefont> | CSS |
| <big> | CSS |
| <center> | CSS |
| <dir> | <ul> |
| <font> | CSS |
| <frame> | |
| <frameset> | |
| <noframes> | |
| <strike> | CSS |
| <tt> | CSS |
Lịch sử HTML
Kể từ những ngày đầu tiên ra đời website cho đến nay, đã có rất nhiều các phiên bản của HTML được tạo ra:
| Phiên bản | Năm |
|---|---|
| Tim Berners-Lee tạo ra www (world wide web) | 1989 |
| Tim Berners-Lee tạo ra HTML | 1991 |
| Dave Raggett phác thảo HTML+ | 1993 |
| Tổ chức HTML Working cho ra đời định nghĩa HTML 2.0 | 1995 |
| W3C giới thiệu HTML 3.2 | 1997 |
| W3C giới thiệu HTML 4.01 | 1999 |
| W3C giới thiệu XHTML 1.0 | 2000 |
| Lần đầu tổ chức WHATWG ra mắt dự thảo HTML5 | 2008 |
| Tổ chức WHATWG đưa HTML5 trở thành "Tiêu chuẩn sống" | 2012 |
| HTML5 chính thức được tổ chức web thế giới W3C chấp nhận | 2014 |
Tim Berners-Lee tạo ra “World Wide Web” vào năm 1989 và mạng Internet vào những năm 1990.
Từ năm 1991 đến 1998, HTML phát triển từ phiên bản 1 đến phiên bản 4.
Năm 2000, tổ chức World Wide Web Consortium (W3C) giới thiệu XHTML 1.0.
Với cú pháp rất nghiêm ngặt, XHTML buộc các lập trình viên phải viết code một cách hợp lệ và “đúng đắn “.
Năm 2004, W3C quyết định phát triển XHTML và dừng phát triển HTML. Tổ chức WHATWG chính thức được thành lập để phát triển HTML phù hợp với cách mà Web được sử dụng, trong khi vẫn tương thích với các phiên bản cũ hơn của HTML.
Trong giai đoạn những năm 2004-2006, tổ chức WHATWG đã nhận đươc sự ủng hộ từ các nhà phát triển các trình duyệt lớn.
Năm 2006, W3C tuyên bố họ sẽ ủng hộ WHATWG.
Năm 2008, dự thảo HTML5 lần đầu tiên được phát hành.
Năm 2012, WHATWG và W3C quyết định tách ra:
Tổ chức WHATWG sẽ phát triển HTML như là một “Tiêu chuẩn sống”.
“Tiêu chuẩn sống” có nghĩa là không bao giờ hoàn thiện và đẩy đủ nhưng sẽ luôn luôn được cập nhật và cải tiến. Các chức năng mới có thể được thêm vào, nhưng những chức năng cũ không thể bị bỏ đi.
Bộ Tiêu chuẩn sống WHATWG đã được xuất bản năm 2012 và liên tục được cập nhật.
Tổ chức W3C sẽ phát triển một định nghĩa về tiêu chuẩn cho HTML5 và XHTML5, như là một “bản sao” của WHATWG.
“Giới thiệu về HTML5” của W3C đã được xuất bản ngày 28 tháng 10 năm 2014.
The post Giới thiệu về HTML5 appeared first on WebVN.
]]>The post SSE – Server-Sent Event trong HTML5 appeared first on WebVN.
]]>Server-Sent Event – Thông điệp một chiều
Trước kia, nếu muốn cập nhật một thay đổi nào đó (vd: tỷ giá, tin tức mới,…) từ máy chủ, bạn phải viết một đoạn mã kết nối tới máy chủ yêu cầu cập nhật -> máy chủ phản hồi -> bạn cập nhật thông tin vừa phản hồi. Với server-sent event, máy chủ sẽ gửi thông tin cập nhật một cách tự động.
Ví dụ ứng dụng: Cập nhật về like hay status mới của bạn bè trên Facebook/Twitter, cập nhật giá cổ phiếu, kết quả thể thao, v.vv…
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính | |
|
|
|
|
|---|---|---|---|---|---|
| SSE | 6.0 | 6.0 | Không hỗ trợ | 5.0 | 11.5 |
Nhận thông báo cập nhật
EventSource được sử dụng để nhận thông báo cập nhật từ server-sent event:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body> <h1>Nhận cập nhật từ máy chủ</h1> <div id="result"></div> <script> if(typeof(EventSource) !== "undefined") { var source = new EventSource("/demo/demo_sse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + "<br>"; }; } else { document.getElementById("result").innerHTML = "Rất tiếc, trình duyệt của bạn không hỗ trợ server-sent event..."; } </script> </body> </html> |
Giải thích ví dụ:
- Tạo mới đối tượng EventSource với tham số là địa chỉ nhận cập nhật (trong ví dụ là: “/demo/demo_sse.php”)
- Sự kiện onmessage sẽ được kích hoạt nếu có cập nhật mới
- Khi sự kiện onmessage xảy ra, hiển thị dữ liệu vừa nhận được vào thẻ có id=”result”
Kiểm tra trình duyệt hỗ trợ Server-Sent Event
Trong ví dụ ở trên, chúng ta có sử dụng đoạn mã để kiểm tra trình duyệt có hỗ trợ server-sent event hay không:
if(typeof(EventSource) !== "undefined") {
// Trình duyệt hỗ trợ Server-sent event!
// Viết tiếp mã...
} else {
// Rất tiếc! Trình duyệt không hỗ trợ server-sent event..
}
Đoạn mã trên máy chủ
Để ví dụ bên trên hoạt động, website của bạn phải có khả năng gửi cập nhật (có thể sử dụng PHP hoặc ASP).
Bạn cần thiết lập “Content-Type” là “text/event-stream”.
Viết mã bằng PHP (demo_sse.php):
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: Thời gian trên máy chủ hiện tại là: {$time}\n\n";
flush();
?>Viết bằng ASP:
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>Giải thích:
- Thiết lập “Content-Type” có giá trị “text/event-stream”
- Thiết lập để trình duyệt không lưu trữ tạm thời (không cache)
- Hiển thị thông tin cần gửi (Luôn luôn bắt đầu bằng “data: “)
- Gửi dữ liệu đi
EventSource
Trong ví dụ bên trên chúng ta đã sử dụng sự kiện onmessage để nhận thông điệp. Ngoài ra, còn có một số sự kiện chúng ta cũng có thể sử dụng:
| Sự kiện | Miêu tả |
|---|---|
| onopen | Xảy ra khi đã mở xong kết nối tới máy chủ |
| onmessage | Xảy ra khi nhận thông điệp mới |
| onerror | Xảy ra khi có lỗi |
The post SSE – Server-Sent Event trong HTML5 appeared first on WebVN.
]]>The post Web Worker trong HTML5 appeared first on WebVN.
]]>Web Worker là gì?
Bình thường, khi bạn chạy một đoạn mã JavaScript trong trang HTML, trang sẽ không phản hồi bất kỳ thao tác nào của bạn cho tới khi đoạn mã chạy xong.
Web worker là một đoạn mã JavaScript chạy ngầm, độc lập với các đoạn mã khác, hoàn toàn không làm ảnh hưởng tới hiệu suất của trang. Trong khi web worker đang chạy ngầm, bạn có thể làm bất kỳ điều gì bạn muốn: nhấn chuột, bôi đen nội dung, v.v..
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính | |
|
|
|
|
|---|---|---|---|---|---|
| Web Worker | 4.0 | 3.5 | 10.0 | 4.0 | 11.5 |
Ví dụ về Web Worker
Dưới đây là ví dụ đơn giản về web worker, nó được chạy ngầm để đếm số:
Số đã đếm được:
Kiểm tra trình duyệt hỗ trợ Web Worker
Trước khi khởi tạo, bạn nên kiểm tra xem trình duyệt của người dùng có hỗ trợ web worker hay không:
if(typeof(Worker) !== "undefined") {
// Trình duyệt hỗ trợ Web worker!
// Viết tiếp các mã javascript
} else {
// Rất tiếc! Trình duyệt không hỗ trợ Web Worker..
}
Tạo tệp tin Web Worker
Bây giờ, bạn hãy tạo một tệp tin JavaScript. Nội dung của tệp tin này chúng ta sẽ dùng để đếm số, bạn lưu lại với tên là “demo_workers.js”:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();Phần quan trọng nhất của đoạn mã bên trên là hàm postMessage() – nó được sử dụng để gửi nội dung ngược lại trang HTML mà chúng ta đang chạy.
Lưu ý: Thông thường web worker không sử dụng để thực hiện những đoạn mã đơn giản như thế này mà thường dùng cho những công việc phức tạp hơn, chuyên sâu hơn.
Tạo Web Worker
Chúng ta đã có một tệp tin javascript, công việc tiếp theo là gọi nó vào trang HTML.
Đoạn mã dưới dây sẽ kiểm tra xem chúng ta đã chạy Web Worker hay chưa, nếu chưa – nó sẽ tạo ra một web worker mới và chạy đoạn mã được chứa trong tệp tin “demo_workers.js”:
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}Với đoạn mã trên chúng ta đã có thể gửi và nhận nội dung từ web worker.
Chúng ta sẽ thêm sự kiện “onmessage” để nhận các thông điệp từ web worker.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};Khi web worker gửi nội dung về trang HTML, đoạn mã trên sẽ tự động được chạy. Nội dung gửi được lưu trữ trong event.data.
Dừng Web Worker
Khi web worker được khởi tạo, nó sẽ liên tục lắng nghe các thông điệp (ngay cả khi đã chạy xong đoạn mã javascript) tới khi bị dừng.
Để dừng web worker, giải phóng tài nguyên cho trình duyệt và máy tính, bạn sử dụng hàm terminate():
w.terminate();
Sử dụng lại Web Worker
Nếu bạn thiết lập biến Web Worker thành “undefined”, bạn có thể tái sử dụng nó sau khi bị dừng:
w = undefined;
Ví dụ hoàn chỉnh về Web Worker
Dưới đây là ví dụ hoàn chỉnh, bao gồm các bước mà chúng ta đã thực hiện ở trên:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <body> <p>Số đã đếm được: <output id="result"></output></p> <button onclick="startWorker()">Chạy Worker</button> <button onclick="stopWorker()">Dừng Worker</button> <p><strong>Lưu ý:</strong> Internet Explorer 9 và các phiên bản trở về trước không hỗ trợ Web Worker.</p> <script> var w; function startWorker() { if(typeof(Worker) !== "undefined") { if(typeof(w) == "undefined") { w = new Worker("/resources/demo_workers.js"); } w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "Rất tiếc, trình duyệt của bạn không hỗ trợ Web Worker..."; } } function stopWorker() { w.terminate(); w = undefined; } </script> </body> </html> |
Web Worker và DOM
Web worker được viết trong các tệp tin JavaScript, chúng sẽ không thể truy cập vào các đối tượng sau đây trong JavaScript:
- Đối tượng window
- Đối tượng document
- Đối tượng parent
The post Web Worker trong HTML5 appeared first on WebVN.
]]>The post Application Cache trong HTML5 appeared first on WebVN.
]]>Application Cache là gì?
Application Cache là tính năng mới trong HTML5, cho phép website có khả năng lưu trữ tài nguyên tạm thời trên trình duyệt và truy cập vào những tài nguyên đó mà không cần tới kết nối internet.
Application cache giúp cho website của bạn có 3 lợi thế:
- Duyệt web offline – người dùng vẫn có thể truy cập website của bạn dù không kết nối internet
- Tốc độ – những tài nguyên được lưu trữ tạm thời trên trình duyệt giúp web tải nhanh hơn
- Giảm tải cho máy chủ – trình duyệt sẽ chỉ tải những tài nguyên mới từ máy chủ
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính | |
|
|
|
|
|---|---|---|---|---|---|
| Application Cache | 4.0 | 3.5 | 10.0 | 4.0 | 11.5 |
Ví dụ về cache
Ví dụ dưới đây sẽ cho bạn thấy cách hoạt động của application cache:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html manifest="/resources/demo_html.appcache"> <body> <script src="/resources/demo_time.js"></script> <p id="timePara"><button onclick="getDateTime()">Nhấn vào đây để lấy thời gian</button></p> <p><img src="/wp-content/uploads/2014/10/wvnlogo.png" width="200" height="72"></p> <p>Mở <a href="https://webvn.com/run-example/?pid=2168" target="_blank">trang này</a>, sau đó ngắt kết nối internet hoặc chọn chế độ duyệt web offline và tải lại trang. Đoạn mã javascript dùng để lấy thời gian và logo WebVN vẫn hiển thị bình thường.</p> </body> </html> |
Căn bản về application cache
Để kích hoạt application cache, bạn sử dụng thuộc tính manifest trong thẻ <html>:
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
Các trang có sử dụng thuộc tính manifest sẽ được trình duyệt lưu trữ để người dùng truy cập lần sau. Nếu thuộc tính manifest không được thiết lập, trang sẽ không được lưu trữ.
Khuyến khích sử dụng tập tin manifest có phần mở rộng là: “.appcache”
Tập tin Manifest
Application Cache được kiểm soát bởi một tệp tin gọi là manifest, tệp tin này chứa danh sách những tài nguyên cần được lưu trữ để sử dụng khi người dùng không có kết nối mạng.
Tệp tin manifest gồm 3 phần:
- CACHE MANIFEST – Danh sách tài nguyên trong phần này sẽ được lưu trữ trên trình duyệt sau lần truy cập đầu tiên của người dùng
- NETWORK – Danh sách tài nguyên trong phần này sẽ không được lưu trữ trên trình duyệt
- FALLBACK – Danh sách tài nguyên trong phần này quy định: nếu một trang không thể truy cập được sẽ tự động chuyển sang trang dự phòng
CACHE MANIFEST
Cú pháp sử dụng phần CACHE MANIFEST:
CACHE MANIFEST /theme.css /logo.gif /main.js
Tệp tin manifest ở trên liệt kê 3 tài nguyên gồm: một tệp tin CSS, một ảnh GIF và một tệp tin JavaScript. Khi tệp tin manifest được tải, trình duyệt sẽ tự động tải ba tệp tin từ website và lưu trữ. Nếu người dùng mất kết nối internet, những tệp tin này sẽ được truy cập để phục vụ người dùng.
NETWORK
Phần NETWORK như trong ví dụ dưới đây quy định địa chỉ “login.asp” sẽ không được lưu trữ, khi người dùng mất kết nối, địa chỉ này cũng sẽ không thể hoạt động:
NETWORK: login.asp
Bạn có thể sử dụng dấu hoa thị để quy định tất cả các tài nguyên/tệp tin không được lưu trữ trên trình duyệt, bắt buộc phải có kết nối internet khi truy cập:
NETWORK: *
FALLBACK
Phần FALLBACK trong ví dụ dưới đây quy định: trong trường hợp không có kết nối internet, tệp tin “offline.html” sẽ được đưa ra để phục vụ thay thế cho tất cả các tệp tin trong thư mục /html/:
FALLBACK: /html/ /offline.html
Lưu ý: Địa chỉ đầu tiên là tài nguyên, địa chỉ thứ 2 là trang thay thế khi không có kết nối internet.
Cập nhật cache
Khi tài nguyên website của bạn đã được lưu trữ, chúng sẽ chỉ cập nhật khi một trong những điều dưới đây xảy ra:
- Người dùng xóa cache trên trình duyệt
- Tệp tin manifest được chỉnh sửa (xem bên dưới)
- Application cache được lập trình để cập nhật
Ví dụ đầy đủ về manifest
CACHE MANIFEST # 2015-09-02 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html
Lưu ý khi dùng Application Cache
Thật cẩn thận với những tài nguyên bạn muốn trình duyệt lưu trữ thông qua Application Cache.
Một khi tài nguyên được lưu trữ, trình duyệt sẽ chỉ hiển thị phiên bản được lưu trữ, ngay cả khi bạn đã thay đổi tài nguyên đó trên website. Để chắc chắn trình duyệt sẽ cập nhật những tài nguyên này, bạn cần phải thay đổi tệp tin manifest.
Lưu ý: Mỗi trình duyệt sẽ quy định dung lượng giới hạn để lưu trữ tài nguyên của bạn (một số trình duyệt quy định giới hạn lưu trữ là 5MB cho mỗi website).
The post Application Cache trong HTML5 appeared first on WebVN.
]]>The post Local Storage – Lưu trữ dữ liệu trong HTML5 appeared first on WebVN.
]]>Local Storage là gì? Lưu trữ cục bộ là gì?
Với việc sử dụng local storage (hay còn gọi là lưu trữ cục bộ), ứng dụng web có thể lưu trữ dữ liệu trực tiếp trên trình duyệt của người dùng.
Trước khi HTML5 ra đời, dữ liệu web được lưu trữ vào cookie và những dữ liệu này đều được gửi kèm mỗi khi trình duyệt gửi yêu cầu tới máy chủ. Local Storage an toàn hơn cookie và có thể chứa khối lượng dữ liệu lớn mà không làm ảnh hưởng tới hiệu suất của website.
Không giống cookies, Local Storage có giới hạn lưu trữ lớn hơn rất nhiều (ít nhất là 5MB) và những dữ liệu này không cần phải gửi tới máy chủ trong quá trình trao đổi dữ liệu giữa trình duyệt với máy chủ.
Tất cả các trang từ cùng một nguồn (cùng tên miền và giao thức), có thể lưu trữ và truy cập vào cùng một khu vực dữ liệu.
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính | |
|
|
|
|
|---|---|---|---|---|---|
| Local Storage | 4.0 | 3.5 | 8.0 | 4.0 | 11.5 |
Các kiểu lưu trữ trong Local Storage
Local storage cung cấp 2 kiểu lưu trữ dữ liệu trên máy người dùng:
- window.localStorage – Lưu trữ dữ liệu không giới hạn thời gian
- window.sessionStorage – Chỉ lưu trữ dữ liệu trong một phiên làm việc (dữ liệu sẽ bị xóa khi người dùng đóng cửa sổ trình duyệt)
Trước khi sử dụng local storage, bạn nên kiểm tra trình duyệt của người dùng có hỗ trợ localStorage và sessionStorage hay không:
if(typeof(Storage) !== "undefined") {
// Có thể sử dụng localStorage/sessionStorage.
} else {
// Trình duyệt không hỗ trợ Local storage.
}
localStorage
localStorage được sử dụng để chứa những dữ liệu không giới hạn thời gian. Những dữ liệu này sẽ không bị xóa khi người dùng đóng cửa sổ trình duyệt.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body> <div id="result"></div> <script> // Kiểm tra trình duyệt có hỗ trợ local storage không if (typeof(Storage) !== "undefined") { // Lưu trữ localStorage.setItem("website", "webvn.com"); // Lấy dữ liệu document.getElementById("result").innerHTML = localStorage.getItem("website"); } else { document.getElementById("result").innerHTML = "Rất tiếc, trình duyệt của bạn không hỗ trợ local storage..."; } </script> </body> </html> |
Giải thích ví dụ:
- Tạo một localStorage với tên là “website” và giá trị là “webvn.com”
- Lấy giá trị của localStorage có tên là “website” và chèn vào thẻ có id=”result”
Ví dụ bên trên có thể được viết theo cách khác như sau:
// Lưu trữ
localStorage.website = "webvn.com";
// Lấy dữ liệu
document.getElementById("result").innerHTML = localStorage.website;Cú pháp để xóa “website” trong localStorage như sau:
localStorage.removeItem("website");Lưu ý: Cả tên và giá trị đều được lưu dưới dạng chuỗi ký tự. Bạn nhớ chuyển đổi chúng nếu muốn sử dụng sử dụng ở định dạng khác (ví dụ kiểu số).
Ví dụ dưới đây dùng để đếm số lần mà người dùng đã nhấn vào nút. Lúc này, giá trị lưu trữ cần phải được chuyển đổi sang kiểu số trước khi sử dụng:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <script> function clickCounter() { if(typeof(Storage) !== "undefined") { if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount)+1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "Bạn đã nhấn vào nút trên " + localStorage.clickcount + " lần."; } else { document.getElementById("result").innerHTML = "Rất tiếc, trình duyệt của bạn không hỗ trợ Local Storage..."; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">Nhấn vào đây!</button></p> <div id="result"></div> <p>Nhấn vào nút bên trên để thấy cách ví dụ hoạt động.</p> <p>Đóng cửa sổ trình duyệt và thử lại. Bạn sẽ thấy số lần nhấp vào nút sẽ được tiếp tục tăng thay vì đếm lại từ đầu.</p> </body> </html> |
sessionStorage
sessionStorage hoạt động giống như localStorage ngoại trừ việc nó chỉ lưu trữ dữ liệu trên một phiên làm việc. Dữ liệu sẽ bị xóa khi người dùng đóng cửa sổ trình duyệt.
Ví dụ dưới đây cũng sử dụng để đếm số lần người dùng đã nhấn vào nút, nhưng kết quả chỉ được lưu trong phiên làm việc hiện tại:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <script> function clickCounter() { if(typeof(Storage) !== "undefined") { if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "Bạn đã nhấn vào nút trên " + sessionStorage.clickcount + " lần trong phiên làm việc này."; } else { document.getElementById("result").innerHTML = "Rất tiếc, trình duyệt của bạn không hỗ trợ Local Storage..."; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">Nhấn vào đây!</button></p> <div id="result"></div> <p>Nhấn vào nút bên trên để thấy cách ví dụ hoạt động.</p> <p>Đóng cửa sổ trình duyệt và thử lại. Bạn sẽ thấy kết quả trong phiên làm việc trước sẽ bị xóa đi.</p> </body> </html> |
The post Local Storage – Lưu trữ dữ liệu trong HTML5 appeared first on WebVN.
]]>