Tìm hiểu cấu trúc cơ bản của HTML 5

Admin

Administrator
Thành viên BQT
#1
Tìm hiểu cấu trúc cơ bản của HTML 5

Bài viết này mình sẽ giới thiệu đến các bạn các quy tắc cơ bản của HTML5 xem nó có khác gì so với các phiên bản HTML cũ không nhé.

Các Từ Viết Tắt Thông Dụng
  • API: Application programming interface – Giao diện lập trình ứng dụng
  • CSS3: Cascading style sheet version 3 – Bảng định kiểu xếp chồng phiên bản 3
  • GUI: Graphical user interface – Giao diện người dùng đồ họa
  • HTML: Hypertext Markup Language – Ngôn ngữ đánh dấu siêu văn bản
  • HTML5: HTML phiên bản 5
  • SQL: Structured Query Language – Ngôn ngữ truy vấn có cấu trúc
  • UI: User interface – Giao diện người dùng
Các thẻ mới trong HTML5 có tính hấp dẫn cao, bao gồm cả vai trò và cách sử dụng của chúng. Các phiên bản trước của HTML thường dùng các thẻ không có gì nổi bật cả. Tuy nhiên, HTML5 có các nhãn trực quan, có khả năng mô tả cao. Nó cung cấp các nhãn nội dung phong phú ngay lập tức xác định nội dung. Ví dụ, thẻ <div> đã được bổ sung bằng các thẻ <section> và <article>. Ngoài ra các thẻ <video>, <audio>, <canvas>, và <figure> cũng đưa ra sự mô tả chính xác hơn về các kiểu nội dung cụ thể.

HTML5 Cung Cấp
  • Các thẻ mô tả chính xác những gì chúng được thiết kế để chứa đựng.
  • Tăng cường khả năng truyền thông trên mạng.
  • Cải thiện khả năng lưu trữ chung.
  • Các trình làm việc trên nền Web (Web Workers) để chạy các quá trình nền.
  • Giao diện WebSocket để thiết lập kết nối liên tục giữa các ứng dụng cư trú và máy chủ.
  • Truy vấn dữ liệu đã được lưu trữ tốt hơn.
  • Cải thiện tốc độ nạp và lưu trang.
  • Hỗ trợ cho CSS3 để quản lý giao diện người dùng đồ họa (GUI), có nghĩa là HTML5 có thể được định hướng nội dung.
  • Cải thiện xử lý biểu mẫu trình duyệt.
  • Một API cơ sở dữ liệu dựa trên-SQL cho phép lưu trữ cục bộ, phía máy khách..
  • Canvas và video, để thêm đồ họa và video mà không cần cài đặt các plug-in của bên thứ ba.
  • Đặc tả Geolocation API (API định vị toàn cầu), sử dụng khả năng định vị của máy điện thoại thông minh để kết hợp các dịch vụ và các ứng dụng đám mây di động.
  • Các biểu mẫu cải tiến làm giảm nhu cầu phải tải về mã JavaScript, cho phép truyền thông hiệu quả hơn giữa các thiết bị di động và các máy chủ điện toán đám mây.
DOCTYPE
Đối với các phiên bản HTML cũ hơn, phần DOCTYPE này yêu cầu được khai báo khá dài. Bởi lẽ HTML được dựa trên SGML( Standard Generalized Markup Language) và vì thế nên chúng cần một tham chiếu đến DTD.
Mã:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Còn đối với HTML5, bạn chỉ cần khai báo DOCTYPE đơn giản như sau.
Mã:
<!DOCTYPE html>
Character Encoding(Mã hóa ký tự)
Để sử dụng các ngôn ngữ khác ngoài tiếng Anh bên trong trang web của mình, chúng ta cần dùng đến việc mã hóa ký tự. Đối với việc sử dụng tiếng Việt, chúng ta sẽ dùng hệ mã hóa utf-8.
Mã:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Thẻ <script>
Chèn các đoạn mã javascript hoặc vbscript bên ngoài hoặc ngay trong tài liệu.
Mã:
<script type="text/javascript" src="file.js"></script>
Thẻ <link>
Chèn các liên kết ngoài(chủ yếu là các tập tin CSS).
Mã:
<link rel="stylesheet" type="text/css" href="file.css">
Khai báo tài liệu HTMl5
Như đã nói, cấu trúc một file HTML5 không quá khác so với HTML4 hoặc (X)HTML. Tuy nhiên như đã đề cập, HTML5 có hỗ trợ một hệ thống các thẻ (phần tử) mới cho người dùng. Vì thế, cấu trúc một file HTML5 cơ bản hoàn chỉnh sẽ như sau.
Mã:
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Your Website</title>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li>Menu</li>
            </ul>
        </nav>
    </header>

    <section>
        <article>
            <header>
                <h2>Title</h2>
                <p>Posted on <time datetime="2014-01-03">2014-01-03</time></p>
            </header>
            <p>Pellentesque habitat netus fames ac turpis egestas.</p>
        </article>

        <article>
            <header>
                <h2>Article title</h2>
                <p>Posted on <time datetime="2014-01-03">2014-01-03</time></p>
            </header>
            <p>Pellentesque habitant senectus et netus et ma.</p>
        </article>     
    </section>

    <aside>
        <h2>About section</h2>
        <p>Donec eu libero sit amet quam egestas semper.</p>
    </aside>

    <footer>
        <p>Copyright 2014 Your name</p>
    </footer>
</body>
</html>
Hy vọng sau khi xem bài viết này các bạn sẽ hiểu cơ bản về cấu trúc một tài liệu HTML5 như thế nào.

Chúc các bạn thành công.


Nguồn: tuhocphp.com​
 
Top