Tin mới

    Công nghệ thông tin

    HTML là gì? Hướng dẫn chi tiết cách hoạt động, cú pháp và ứng dụng

    Lương Đàm • 07/04/2025 06:02

    Tìm hiểu HTML từ A-Z: khái niệm, cách hoạt động, cú pháp cơ bản đến ứng dụng thực tế trong xây dựng và thiết kế trang web chuyên nghiệp.

    What is HTML?
    Mục lục

    HTML là gì?

    HTML (viết tắt của từ Hypertext Markup Language) hay Ngôn ngữ đánh dấu siêu văn bản. Sử dụng HTML để xây dựng và cấu trúc lại các thành phần trong website hoặc ứng dụng. HTML có thể được hỗ trợ bởi các công nghệ như CSS và các ngôn ngữ kịch bản giống như JavaScript.

    HTML không phải là ngôn ngữ lập trình, nghĩa là không thể tạo ra các chức năng “động” được. Giống như phần mềm Microsoft Word, HTML dùng để bố cục và định dạng trang web. Khi kết hợp với CSS và JavaScript, HTML trở thành một nền tảng vững chắc cho thế giới mạng. Các phần tử HTML được phân định bằng các tags, được viết bằng dấu ngoặc nhọn.

    Tóm tắt thông tin HTML

    • Phần mở rộng tên file: .html
    • Kiểu phương tiện: .html
    • Mã định danh (UT): public.html
    • Phát triển bởi: WHATWG
    • Phát hành lần đầu: 1993
    • Bản mới nhất: Living Standard
    • Dùng để chứa: Phần tử HTML
    • Được chứa bởi: Trình duyệt web
    • Được mở rộng từ: SGML
    • Được mở rộng thành: XHTML
    • Định dạng mở? Có
    • Website: html.spec.whatwg.org
    HTML For Beginners The Easy Way: Start Learning HTML & CSS Today »

    Lịch sử của HTML

    HTML được tạo ra bởi Tim Berners-Lee – nhà vật lý học tại trung tâm nghiên cứu CERN ở Thụy Sĩ. Ông là người nghĩ ra và viết siêu văn bản và hypertext trên Internet. Hypertext là văn bản chứa liên kết, cho phép người xem truy cập ngay lập tức.

    HTML ban đầu được công khai với tài liệu có tên “HTML Tags” vào năm 1991, gồm 18 phần tử đơn giản. Các phiên bản sau đều bổ sung thêm tag và attributes mới.

    Từ năm 1996, các phần tử HTML được duy trì bởi World Wide Web Consortium (W3C). Năm 2000, HTML trở thành tiêu chuẩn quốc tế. HTML5 được giới thiệu năm 2004 và hoàn thiện năm 2014, bổ sung thêm nhiều tag như

    ,
    ,
  • Nội dung nằm giữa hai thẻ

    • 3. Attributes

    Là các thuộc tính cung cấp thông tin bổ sung cho element, nằm trong thẻ mở và gồm:

    Ví dụ:

    Link

    Một số attribute phổ biến: href, src, class, id, alt,...

    How To Create and View a Website on Your Computer

    Bố cục HTML là gì?

    HTML bao gồm rất nhiều thẻ khác nhau, mỗi thẻ đảm nhiệm một vai trò cụ thể để xây dựng cấu trúc trang web hoàn chỉnh.

    Dưới đây là một ví dụ về cấu trúc HTML cơ bản của một trang web:

         Title of the page   
     
    Website Main Title
     
      
     
     
    Welcome to our website
     
    This is a paragraph with some introductory text about the website.
     
     
     
    About Us
     
    Information about the company or website.
     
     
     
    Contact Us
     
    Details on how to contact us.
     
     
     
     
    Copyright © 2023 Company Name

    Tag thông dụng trong HTML

    Dưới đây là một số thẻ phổ biến bạn sẽ gặp thường xuyên trong HTML:

    • : Khai báo kiểu dữ liệu HTML5
    • : Phần tử gốc bao toàn bộ nội dung
    • : Chứa thông tin meta, liên kết tài nguyên
    • </code>: Hiển thị tiêu đề trang trên tab trình duyệt</li><li><code><body></code>: Chứa nội dung hiển thị trên trang</li><li><code><h1></code> đến <code><h6></code>: Tiêu đề với 6 cấp độ</li><li><code><p></code>: Đoạn văn bản</li><li><code><a href=""></code>: Tạo liên kết</li><li><code><img src="" alt=""></code>: Hiển thị hình ảnh</li><li><code><ul></code>, <code><ol></code>, <code><li></code>: Tạo danh sách</li><li><code><div></code>: Thẻ khối bao nội dung</li><li><code><footer></code>, <code><header></code>, <code><nav></code>, <code><section></code>: Các phần phân vùng nội dung trang</li></ul><hr><h2 id="block-level-va-inline-tags-trong-html">Block-level và Inline Tags trong HTML</h2><h3 id="block-level-tags">Block-level Tags</h3><p>Các phần tử block-level chiếm toàn bộ chiều ngang của trang và luôn bắt đầu trên một dòng mới. Một số ví dụ phổ biến:</p><ul><li><code><html></code>, <code><head></code>, <code><body></code></li><li><code><div></code>, <code><p></code>, <code><h1></code> đến <code><h6></code></li><li><code><ul></code>, <code><ol></code>, <code><li></code></li><li><code><blockquote></code>, <code><section></code>, <code><article></code></li></ul><p>Ví dụ:</p><pre><code><ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </code></pre><h3 id="inline-tags">Inline Tags</h3><p>Các phần tử inline chỉ chiếm không gian cần thiết và không bắt đầu dòng mới. Thường được dùng để định dạng nội dung trong block-level. Ví dụ phổ biến:</p><ul><li><code><strong></code>, <code><em></code>, <code><a></code>, <code><span></code>, <code><img></code></li></ul><p>Ví dụ:</p><pre><code><a href="https://example.com">Visit Example</a> <img src="/images/example.jpg" alt="Example image"> </code></pre><hr><h2 id="phan-tu-html-la-gi">Phần tử HTML là gì?</h2><p>Một phần tử HTML bao gồm:</p><ul><li>Thẻ mở</li><li>Nội dung</li><li>Thẻ đóng</li></ul><p>Ví dụ:</p><pre><code><h1>Tiêu đề đầu tiên của tôi</h1> <p>Đoạn đầu tiên của tôi.</p> </code></pre><p><strong>Cấu trúc:</strong></p><table><thead><tr><th>Start tag</th> <th>Element content</th> <th>End tag</th></tr></thead><tbody><tr><td><code><h1></code></td><td>My First Heading</td><td><code></h1></code></td></tr><tr><td><code><p></code></td><td>My first paragraph.</td><td><code></p></code></td></tr><tr><td><code><br></code></td><td>none (không có nội dung)</td><td>không có</td></tr></tbody></table><p>Lưu ý: Một số phần tử như <code><br></code> là <strong>self-closing</strong> – không có thẻ kết thúc.</p><hr><figure><img src="https://daknong.1cdn.vn/2025/04/06/www.hostinger.com-tutorials-wp-content-uploads-sites-2-2018-11-_what-is-html-3.jpg" alt="What Is HTML? Hypertext Markup Language Basics for Beginners" data-src="https://daknong.1cdn.vn/2025/04/06/www.hostinger.com-tutorials-wp-content-uploads-sites-2-2018-11-_what-is-html-3.jpg" data-original="https://daknong.1cdn.vn/2025/04/06/www.hostinger.com-tutorials-wp-content-uploads-sites-2-2018-11-_what-is-html-3.jpg" data-src-mobile="" data-file-id="220071"></figure><h2 id="cau-truc-trang-html">Cấu trúc trang HTML</h2><p>Dưới đây là một ví dụ cấu trúc HTML đơn giản:</p><pre><code><html> <head> <title>Tiêu đề trang

      Đây là một tiêu đề

      Đây là một đoạn văn.

      Chỉ nội dung trong thẻ mới được hiển thị trên trình duyệt. Thẻ </code> sẽ hiển thị trên thanh tiêu đề hoặc tab trình duyệt.</p><hr><h2 id="su-khac-biet-giua-html-va-html5">Sự khác biệt giữa HTML và HTML5</h2><p>HTML5 là phiên bản mới nhất của HTML, được phát hành năm 2014. So với HTML cũ, HTML5 được bổ sung nhiều tính năng hiện đại hơn như:</p><ul><li><strong>Hỗ trợ video và audio</strong>: Cho phép chèn trực tiếp file media vào trang web bằng <code><audio></code> và <code><video></code></li><li><strong>Hỗ trợ SVG và MathML</strong>: Dễ dàng hiển thị đồ họa vector và công thức toán học</li><li><strong>Thẻ cấu trúc mới</strong>: Như <code><article></code>, <code><section></code>, <code><aside></code>, <code><header></code>, <code><footer></code> để mô tả rõ ràng bố cục và nội dung</li><li><strong>Kiểu form mới</strong>: Hỗ trợ các input như ngày/giờ, email, số điện thoại,...</li><li><strong>Loại bỏ một số thẻ cũ</strong>: Như <code>isindex</code>, <code>noframes</code>, <code>acronym</code>, <code>applet</code>, <code>basefont</code>, <code>dir</code>, <code>font</code>, <code>frame</code>, <code>frameset</code>, <code>big</code>, <code>center</code>, <code>strike</code>,...</li></ul><hr><h2 id="html-css-va-javascript-lien-quan-nhu-the-nao">HTML, CSS và JavaScript liên quan như thế nào?</h2><p>HTML là nền tảng cơ bản trong xây dựng website, đóng vai trò xác định cấu trúc nội dung. Tuy nhiên, để tạo ra một trang web hoàn chỉnh và sinh động cần kết hợp thêm:</p><ul><li><strong>CSS</strong>: Thiết kế giao diện như màu sắc, bố cục, hiệu ứng</li><li><strong>JavaScript</strong>: Tạo chức năng tương tác như slider, pop-up, menu động,...</li></ul><p>Sự kết hợp ba ngôn ngữ này sẽ tạo nên trải nghiệm người dùng tốt hơn, đáp ứng cả về thẩm mỹ lẫn chức năng.</p><hr><h2 id="cac-phan-mem-lap-trinh-html-pho-bien">Các phần mềm lập trình HTML phổ biến</h2><h3 id="1-visual-studio-code-vs-code">1. Visual Studio Code (VS Code)</h3><p>Công cụ lập trình miễn phí do Microsoft phát triển, tích hợp nhiều tính năng như gợi ý cú pháp, debug, tích hợp Git, dễ tùy biến giao diện.</p><h3 id="2-sublime-text">2. Sublime Text</h3><p>Ra đời năm 2008, hỗ trợ đa ngôn ngữ, giao diện đơn giản, tốc độ nhanh, dễ cài đặt plugin.</p><h3 id="3-php-designer">3. PHP Designer</h3><p>Hỗ trợ lập trình PHP và HTML, thiết kế web hiệu quả, giao diện dễ dùng, được sử dụng tại hơn 200 quốc gia.</p><h3 id="4-dreamweaver">4. Dreamweaver</h3><p>Phần mềm phổ biến trong giảng dạy, hỗ trợ kéo thả, viết mã HTML và các ngôn ngữ khác như PHP, ASP.NET.</p><h3 id="5-notepad">5. Notepad++</h3><p>Trình soạn thảo nhẹ, đơn giản, hỗ trợ nhiều ngôn ngữ như C++, Java, C#, XML,... phù hợp cho người mới bắt đầu.</p><hr><h2 id="vi-du-html-co-ban">Ví dụ HTML cơ bản</h2><pre><code><!DOCTYPE html> <html> <head> <title>Page Title

      My First Heading

      My first paragraph.

      Giải thích ví dụ trên

      • : Xác định đây là tài liệu HTML5
      • : Phần tử gốc bao toàn bộ tài liệu
      • : Chứa thông tin meta và tiêu đề trang
      • </code>: Hiển thị tiêu đề trên tab trình duyệt</li><li><code><body></code>: Chứa toàn bộ nội dung hiển thị trên trang</li><li><code><h1></code>: Tiêu đề chính</li><li><code><p></code>: Đoạn văn bản đầu tiên</li></ul><hr><h2 id="loi-ket">Lời kết</h2><p>Từ những thông tin trên, hy vọng bạn đã có cái nhìn đầy đủ hơn về HTML là gì, vai trò và cách hoạt động của nó trong lập trình web. Dù không phải ngôn ngữ lập trình, HTML vẫn là nền tảng không thể thiếu trong việc xây dựng website.</p><p>Hãy luyện tập thường xuyên để làm chủ HTML và sẵn sàng kết hợp cùng CSS, JavaScript để tạo nên những trang web hiện đại và chuyên nghiệp. Chúc bạn thành công!</p><div class="sc-empty-layer"></div> </article> </div> <div class="c-box is-margin-small h-show-pc"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-64"> <script type="text/javascript">try { if (typeof (pcdetailcuoibaiviet) != "undefined" && pcdetailcuoibaiviet !== null) { pcdetailcuoibaiviet.show(); } else { document.getElementById("zone-64").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!--end c-box__content--> </div> <div class="c-box is-margin-small h-show-mobile"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-85"> <script type="text/javascript">try { if (typeof (mbdetailcuoibaiviet) != "undefined" && mbdetailcuoibaiviet !== null) { mbdetailcuoibaiviet.show(); } else { document.getElementById("zone-85").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!--end c-box__content--> </div> <div class="c-box is-margin-small"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-121"> <script type="text/javascript">try { if (typeof (pcmbchitietcuoibai) != "undefined" && pcmbchitietcuoibai !== null) { pcmbchitietcuoibai.show(); } else { document.getElementById("zone-121").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> </div> <div class="c-box is-margin-small h-show-pc"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-89"> <script type="text/javascript">try { if (typeof (pcdetailcuoibai2) != "undefined" && pcdetailcuoibai2 !== null) { pcdetailcuoibai2.show(); } else { document.getElementById("zone-89").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> </div> <div class="c-box is-margin-small h-show-mobile"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-90"> <script type="text/javascript">try { if (typeof (mbchitietcuoibaiviet2) != "undefined" && mbchitietcuoibaiviet2 !== null) { mbchitietcuoibaiviet2.show(); } else { document.getElementById("zone-90").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> </div> <div class="c-box is-title-none is-margin-small"> <div class="c-box__content"> <div class="c-share-detail"> <ul> <li><a title="Chia sẻ Facebook" class="btn-facebook onecms__popup" href="https://www.facebook.com/sharer/sharer.php?u=https://baodaknong.vn/html-la-gi-huong-dan-chi-tiet-cach-hoat-dong-cu-phap-va-ung-dung-248502.html&display=popup&ref=plugin"><i class="icon12-facebook-f-white"></i>Chia sẻ Facebook</a></li> <li class="zalo-share-button h-show-pc" data-href="https://baodaknong.vn/html-la-gi-huong-dan-chi-tiet-cach-hoat-dong-cu-phap-va-ung-dung-248502.html" data-oaid="579745863508352884" data-layout="icon-text" data-color="blue" data-customize=true> <a class="btn-zalo" href="javascript:;" title="Chia sẻ Zalo"><i class="icon16-zalo-white"></i>Chia sẻ Zalo</a> </li> <li class="h-show-mobile"><a class="btn-zalo" href="intent:#Intent;action=android.intent.action.SEND;type=text/plain;S.android.intent.extra.SUBJECT=;S.android.intent.extra.TEXT=https://baodaknong.vn/html-la-gi-huong-dan-chi-tiet-cach-hoat-dong-cu-phap-va-ung-dung-248502.html?utm_source=zalo&utm_medium=zalomsg&B.hidePostFeed=true;B.backToSource=true;end" title="Chia sẻ Zalo"><i class="icon16-zalo-white"></i>Chia sẻ Zalo</a></li> <li><a title="In" class="onecms__popup" href="/print/248502.html"><i class="icon16-print"></i></a></li> </ul> </div> </div> </div> <div class="c-box is-title-none is-margin-small"> <div class="c-box__content"> <div class="c-widget-tags onecms_tags"> <ul> <li><a href="https://baodaknong.vn/html-ptag.html" title="HTML">HTML</a></li> </ul> </div> </div> </div> <div id="detail-news-other" class="c-box onecms_related"> <div class="c-box__title"> <h3 class="c-box__title__name">Bài liên quan</h3> </div> <div class="c-box__content"> <div class="c-template-list"> <ul> <li id="smart-ads"> <script type="text/javascript" src="https://s.eclick.vn/delivery/zone/22687.js"></script> </li> </ul> </div> </div> </div> <div class="c-box h-show-mobile onecms_related_mobile c-news-readmore-merge-mobile"> <div class="c-box__title is-decor"> <h3 class="c-box__title__name">Đọc tiếp</h3> <div class="c-box__title__decor"></div> </div> <div class="c-box__content"> <div class="c-news-topmore"></div> </div> </div> <div class="c-box is-margin-small"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-124"> <script type="text/javascript">try { if (typeof (pcmbtrenbinhluan) != "undefined" && pcmbtrenbinhluan !== null) { pcmbtrenbinhluan.show(); } else { document.getElementById("zone-124").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!--end c-box__content--> </div> <div class="c-comments onecms_load_view" data-action="comment"> <div class="c-comment-input onecms_comments"> <div class="form-group"> <textarea class="form-control txt_content" name="" placeholder="Vui lòng nhập tiếng Việt có dấu"></textarea> <em></em> </div> <button parentid="0" class="btn btn-primary btnSend">Gửi bình luận</button> <div class="message hidden" style="font-family: sans-serif;font-size: 18px;"> <p class="small"> Bình luận của bạn đã được gửi và sẽ hiển thị sau khi được duyệt bởi ban biên tập. <br> Ban biên tập giữ quyền biên tập nội dung bình luận để phù hợp với qui định nội dung của Báo. </p> </div> </div> <div class="c-comment-list onecms_comment_list"> </div><!-- c-comment-list --> </div> <!-- c-comments--> <div id="smart-ads" class="c-box is-margin-small"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <script type="text/javascript" src="https://s.eclick.vn/delivery/zone/22685.js"></script> </div> </div> </div> </div> <!--end c-box__content--> </div> <div class="c-box h-show-pc AdsBetweenContentPC" style="margin-bottom:10px"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-123"> <script type="text/javascript">try { if (typeof (pcdetailgiabaiviet) != "undefined" && pcdetailgiabaiviet !== null) { pcdetailgiabaiviet.show(); } else { document.getElementById("zone-123").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!-- c-box__content--> </div> <div class="c-box h-show-mobile AdsBetweenContentMB" style="margin-bottom:10px"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-122"> <script type="text/javascript">try { if (typeof (mbdetailgiabaiviet) != "undefined" && mbdetailgiabaiviet !== null) { mbdetailgiabaiviet.show(); } else { document.getElementById("zone-122").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!-- c-box__content--> </div> <div class="c-box is-margin-small h-show-pc"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-75"> <script type="text/javascript">try { if (typeof (pcdetailduoibinhluan) != "undefined" && pcdetailduoibinhluan !== null) { pcdetailduoibinhluan.show(); } else { document.getElementById("zone-75").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!--end c-box__content--> </div> <div class="c-box is-margin-small h-show-mobile"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-76"> <script type="text/javascript">try { if (typeof (mbdetailduoibinhluan) != "undefined" && mbdetailduoibinhluan !== null) { mbdetailduoibinhluan.show(); } else { document.getElementById("zone-76").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!--end c-box__content--> </div> <div class="c-box is-margin-small"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-93"> <script type="text/javascript">try { if (typeof (pcmbchitietduoibinhluan) != "undefined" && pcmbchitietduoibinhluan !== null) { pcmbchitietduoibinhluan.show(); } else { document.getElementById("zone-93").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!--end c-box__content--> </div> <div class="c-box is-margin-small"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-86"> <script type="text/javascript">try { if (typeof (pcdetalquangcaotudong1) != "undefined" && pcdetalquangcaotudong1 !== null) { pcdetalquangcaotudong1.show(); } else { document.getElementById("zone-86").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!--end c-box__content--> </div> <div class="c-box h-show-pc AdsBetweenContentPC" style="margin-bottom:10px"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-65"> <script type="text/javascript">try { if (typeof (pcdetailinpage) != "undefined" && pcdetailinpage !== null) { pcdetailinpage.show(); } else { document.getElementById("zone-65").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!-- c-box__content--> </div> <div class="c-box h-show-mobile AdsBetweenContentMB" style="margin-bottom:10px"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-84"> <script type="text/javascript">try { if (typeof (mbdetailgiuabaiviet) != "undefined" && mbdetailgiuabaiviet !== null) { mbdetailgiuabaiviet.show(); } else { document.getElementById("zone-84").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!-- c-box__content--> </div> <div class="c-banner-bottom-fixed is-pc"> <div class="c-banner-bottom-fixed__inner"> <div class="c-banner-bottom-fixed__close js-banner-bottom-fixed-close"><span>x</span></div> <div class="c-banner-bottom-fixed__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-91"> <script type="text/javascript">try { if (typeof (pcdetailqctudong4) != "undefined" && pcdetailqctudong4 !== null) { pcdetailqctudong4.show(); } else { document.getElementById("zone-91").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> </div> </div> <!--end c-banner-bottom-fixed--> <div class="c-banner-bottom-fixed is-mobile"> <div class="oneads" id="zone-92"> <script type="text/javascript">try { if (typeof (MBdetailqctudong4) != "undefined" && MBdetailqctudong4 !== null) { MBdetailqctudong4.show(); } else { document.getElementById("zone-92").remove(); } } catch (e) { }</script> </div> </div> <div class="oneads" id="zone-111"> <script type="text/javascript">try { if (typeof (quangcaotudongchitiet02) != "undefined" && quangcaotudongchitiet02 !== null) { quangcaotudongchitiet02.show(); } else { document.getElementById("zone-111").remove(); } } catch (e) { }</script> </div> <div class="c-box h-show-mobile c-banner-inpage" style="margin-bottom:10px"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-115"> <script type="text/javascript">try { if (typeof (mbdetailinpageseo) != "undefined" && mbdetailinpageseo !== null) { mbdetailinpageseo.show(); } else { document.getElementById("zone-115").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!-- c-box__content--> </div> <!--end c-box--> </div> </div> <div class="l-sidebar"> <div class="c-box h-show-pc"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> </div> </div> </div> </div> </div> <div id="detail-news-more-pc" class="c-box h-show-pc is-title-none onecms_load_view" data-view="RelatedArticlesForDetail" data-size="6" data-action="api/getrelatedarticles/248502/type/1?q="> <div class="c-box__title is-decor"> <h3 class="c-box__title__name">Đọc tiếp</h3> <div class="c-box__title__decor"></div> </div> <div class="c-box__content"> <div class="c-news-topmore"></div> </div> </div> <div class="js-sticky-scroll"> <div class="c-box is-margin-small h-show-pc"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-113"> <script type="text/javascript">try { if (typeof (pcdetailduoidoctiepnm) != "undefined" && pcdetailduoidoctiepnm !== null) { pcdetailduoidoctiepnm.show(); } else { document.getElementById("zone-113").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> </div> <div class="c-box is-margin-small h-show-pc"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-68"> <script type="text/javascript">try { if (typeof (pcdetailduoidoctiep) != "undefined" && pcdetailduoidoctiep !== null) { pcdetailduoidoctiep.show(); } else { document.getElementById("zone-68").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="c-container-wrapper"> <div class="c-homepage-repeat-content"> <div class="container is-max-width-xl"> <div class="l-content-flex"> <div class="c-box is-margin-small h-show-pc"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-118"> <script type="text/javascript">try { if (typeof (pcdetailtrenxemthem) != "undefined" && pcdetailtrenxemthem !== null) { pcdetailtrenxemthem.show(); } else { document.getElementById("zone-118").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!--end c-box__content--> </div> <div class="c-box is-margin-small h-show-mobile"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-119"> <script type="text/javascript">try { if (typeof (mbdetailtrenxemthem) != "undefined" && mbdetailtrenxemthem !== null) { mbdetailtrenxemthem.show(); } else { document.getElementById("zone-119").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <!--end c-box__content--> </div> <div class="l-main is-margin-bottom-mobile"> <div id="detail-news-more-category" class="c-box onecms_load_view fadeout" data-view="ChannelNormalForDetail-smart-ads" data-size="5" data-action="api/getarticlebychannel/329"> <h3 class="c-box__title"> <a class="c-box__title__name" title="Xem thêm" href="javascript:;"></a> </h3> <div class="c-box__content"> <div class="c-template-grid is-col-3-tablet is-title-first-mobile is-border is-col-line-tablet"> <ul> <li id="smart-ads"> <script type="text/javascript" src="https://s.eclick.vn/delivery/zone/22689.js"></script> </li> </ul> </div> </div> </div> <!-- c-box--> <div id="detail-news-hot" class="c-box onecms_load_view fadeout" data-view="GroupArticlesForDetail-smart-ads" data-size="6" data-action="api/getarticlehighlight"> <div class="c-box__title"> <h3 class="c-box__title__name">Nổi bật</h3> </div> <div class="c-box__content"> <div class="c-template-grid is-list-pc is-thumb-large is-title-first-mobile is-border is-last-line"> <ul></ul> </div> <div class="c-template-grid is-col-3-tablet is-title-first-mobile is-border is-col-line-tablet"> <ul> <li id="smart-ads"> <script type="text/javascript" src="https://s.eclick.vn/delivery/zone/22690.js"></script> </li> </ul> </div> </div> </div> <div class="c-box" id="detail-news-top"> <div class="c-box__title"> <div class="c-box__title__name">Mới nhất</div> </div> <div class="c-box__content"> <div class="c-template-grid is-list-pc is-border is-last-line is-title-first-mobile is-sapo-pc is-timeline" data-size="10"> <ul class="onecms_loading"></ul> <div class="loading_img" style="display: none;"> <div class="timeline-wrapper"> <div class="timeline-item"> <div class="animated-background"> <div class="background-masker header-top"></div> <div class="background-masker header-left"></div> <div class="background-masker header-right"></div> <div class="background-masker header-bottom"></div> <div class="background-masker header-2-left"></div> <div class="background-masker header-2-right"></div> <div class="background-masker header-2-bottom"></div> <div class="background-masker meta-left"></div> <div class="background-masker meta-right"></div> <div class="background-masker meta-bottom"></div> <div class="background-masker description-left"></div> <div class="background-masker description-right"></div> <div class="background-masker description-bottom"></div> <div class="background-masker description-2-left"></div> <div class="background-masker description-2-right"></div> <div class="background-masker description-2-bottom"></div> <div class="background-masker description-3-left"></div> <div class="background-masker description-3-right"></div> <div class="background-masker description-3-bottom"></div> </div> </div> </div> <div class="timeline-wrapper"> <div class="timeline-item"> <div class="animated-background"> <div class="background-masker header-top"></div> <div class="background-masker header-left"></div> <div class="background-masker header-right"></div> <div class="background-masker header-bottom"></div> <div class="background-masker header-2-left"></div> <div class="background-masker header-2-right"></div> <div class="background-masker header-2-bottom"></div> <div class="background-masker meta-left"></div> <div class="background-masker meta-right"></div> <div class="background-masker meta-bottom"></div> <div class="background-masker description-left"></div> <div class="background-masker description-right"></div> <div class="background-masker description-bottom"></div> <div class="background-masker description-2-left"></div> <div class="background-masker description-2-right"></div> <div class="background-masker description-2-bottom"></div> <div class="background-masker description-3-left"></div> <div class="background-masker description-3-right"></div> <div class="background-masker description-3-bottom"></div> </div> </div> </div> </div><!--end load more--> </div> <div class="c-more"><a href="javascript:;" title="Xem thêm">Xem thêm</a></div> </div> </div> </div> <!--end l-main--> <div class="l-sidebar"> <div class="c-box is-border bg-gray-light onecms_load_view fadeout" data-view="MostRead" data-size="5" data-action="api/getarticletopread/329" style="height:600px"> <div class="c-box__title"> <h3 class="c-box__title__name">Đọc nhiều</h3> </div> <div class="c-box__content"> <div class="c-news-topread"> <ul></ul> </div> </div> </div> <div class="c-box is-margin-small h-show-pc js-sticky-scroll"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> <div class="oneads" id="zone-117"> <script type="text/javascript">try { if (typeof (pcchitietduoidocnhieu) != "undefined" && pcchitietduoidocnhieu !== null) { pcchitietduoidocnhieu.show(); } else { document.getElementById("zone-117").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> </div> <div class="c-box is-margin-small h-show-pc"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> </div> </div> </div> </div> </div> <!--end c-box--> <div class="c-box is-margin-small h-show-pc"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="c-banner-item__box"> </div> </div> </div> </div> </div> <!--end c-box--> <div class="c-box is-margin-small h-show-mobile"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner"> <div class="oneads" id="zone-125"> <script type="text/javascript">try { if (typeof (mbchitietduoidocnhieu) != "undefined" && mbchitietduoidocnhieu !== null) { mbchitietduoidocnhieu.show(); } else { document.getElementById("zone-125").remove(); } } catch (e) { }</script> </div> </div> </div> </div> </div> <div class="c-box is-margin-small h-show-pc"> <div class="c-box__content"> <div class="c-banner-item is-custom-size"> <div class="c-banner-item__inner hapodigital"> </div> </div> </div> </div> </div> <!--end l-sidebar--> </div> <!--end l-content-flex--> </div> <!--end container--> </div> <!--end c-homepage-repeat-content--> </div> <div class="c-header-sticky is-mobile"> <div class="container"> <div class="c-logo"><a title="Báo Đắk Nông - Tin mới Đắk Nông, tin tức Tây Nguyên mới nhất, chính thống" href="/"><img class="lazy" data-src="https://daknong.1cdn.vn/assets/static/images/logo-small.png" src="https://daknong.1cdn.vn/assets/static/images/transparent.gif" alt="Báo Đắk Nông - Tin mới Đắk Nông, tin tức Tây Nguyên mới nhất, chính thống" title="Báo Đắk Nông - Tin mới Đắk Nông, tin tức Tây Nguyên mới nhất, chính thống" width="337" height="90"></a></div> <div class="c-sticky-cat"><a href="https://baodaknong.vn/cong-nghe/cong-nghe-thong-tin">Công nghệ thông tin</a></div> <div class="c-sticky-title">HTML là gì? Hướng dẫn chi tiết cách hoạt động, cú pháp và ứng dụng</div> <div class="c-share-scroll"> <ul class="clearfix"> <li><a title="Chia sẻ Facebook" class="onecms_popup" href="https://www.facebook.com/sharer/sharer.php?u=https://baodaknong.vn/html-la-gi-huong-dan-chi-tiet-cach-hoat-dong-cu-phap-va-ung-dung-248502.html&display=popup&ref=plugin"><i class="icon24-facebook-circle-gray"></i></a></li> <li class="zalo-share-button" data-href="https://baodaknong.vn/html-la-gi-huong-dan-chi-tiet-cach-hoat-dong-cu-phap-va-ung-dung-248502.html" data-oaid="579745863508352884" data-layout="icon-text" data-color="blue" data-customize=true> <button class="bg-zalo" type="button" aria-label="Chia sẻ Zalo"><span class="icon16-zalo-gray"></span></button> </li> </ul> </div> <div class="c-sticky-mobile"> <div class="c-sticky-mobile__left"> <button class="c-menu-expand js-menu-expand" type="button"><i class="icon24-menu-gray"></i></button> </div> <div class="c-sticky-mobile__right"> <div class="c-sticky-share"> <ul> <li> <button class="is-font-link js-font-horizontal" type="button" aria-label="Cỡ chữ"><i class="icon24-font-gray"></i><span class="is-text">Cỡ chữ</span></button> <div class="c-font-box-horizontal"> <span class="plus"><i class="icon24-plus-circle-gray"></i></span><span class="font">Mặc định</span><span class="minus"><i class="icon24-minus-circle-gray"></i></span> <button class="c-font-box-horizontal__close js-font-horizontal-close" type="button" aria-label="Đóng"><i class="icon12-close"></i></button> </div> </li> <li><button class="shareall" aria-label="Share Mobile"><i class="icon24-share-gray"></i></button></li> <li> <button class="js-scroll-comment" type="button" aria-label="Bình luận"> <i class="icon24-comment-gray"></i> </button> </li> </ul> </div> </div> </div> </div> </div> <div class="c-footer-space"></div> <div class="c-container-wrapper"> <div class="l-footer"> <div class="container"> <div class="c-footer-line"></div> <div class="c-footer-main"> <div class="c-footer-col is-col-1"> <div class="c-footer-logo"> <a title="Báo Đắk Nông - Tin mới Đắk Nông, tin tức Tây Nguyên mới nhất, chính thống" href="/"><img class="lazy" data-src="https://daknong.1cdn.vn/assets/static/images/logo-small.png" src="https://daknong.1cdn.vn/assets/static/images/transparent.gif" title="Báo Đắk Nông - Tin mới Đắk Nông, tin tức Tây Nguyên mới nhất, chính thống" alt="Báo Đắk Nông - Tin mới Đắk Nông, tin tức Tây Nguyên mới nhất, chính thống" width="337" height="90"></a> <div class="c-footer-logo__text">BÁO ĐẮK NÔNG ĐIỆN TỬ</div> </div> <div class="b-maincontent"> <p>Tổng biên tập: Vũ Ngọc Tú;</p> <p>Phó Tổng biên tập: Nguyễn Phi Long, Nguyễn Văn Hải</p> <p>Giấy phép số 139/GP-BTTTT do Bộ Thông tin và Truyền thông cấp ngày 17 tháng 03 năm 2022</p> <p>Bản quyền thuộc về Báo Đắk Nông điện tử.</p> <p>Nghiêm cấm sao chép khi chưa có văn bản đồng ý dẫn nguồn từ Báo Đắk Nông.</p> <p>Địa chỉ: Đường Trần Hưng Đạo, Thành phố Gia Nghĩa, tỉnh Đắk Nông</p> <p>Điện thoại: (02613) 544244 - 544476 - 544938. Fax: (02613) 544476</p> <p>Email: bdn@daknong.gov.vn, tsbaodaknong@gmail.com</p> </div> </div> <div class="c-footer-col is-col-2"> <div class="c-social"> <label>Kết nối chúng tôi tại:</label> <ul> <li><a target="_blank" title="Youtube Đắk Nông" href="https://www.youtube.com/@baodaknong2004"><i class="icon16-youtube"></i></a></li> <li><a target="_blank" title="Facebook Đắk Nông" href="https://www.facebook.com/DaknongBDN"><i class="icon16-facebook-circle"></i></a></li> </ul> </div> <div class="c-footer-menu"> <ul> <li> <a title="Chính trị" href="https://baodaknong.vn/chinh-tri">Chính trị</a> </li> <li> <a title="Thời sự" href="https://baodaknong.vn/thoi-su">Thời sự</a> </li> <li> <a title="Chính sách" href="https://baodaknong.vn/chinh-sach">Chính sách</a> </li> <li> <a title="Kinh tế" href="https://baodaknong.vn/kinh-te">Kinh tế</a> </li> <li> <a title="Văn hóa" href="https://baodaknong.vn/van-hoa">Văn hóa</a> </li> <li> <a title="Quốc phòng - An ninh" href="https://baodaknong.vn/quoc-phong-an-ninh">Quốc phòng - An ninh</a> </li> <li> <a title="Đời sống" href="https://baodaknong.vn/doi-song">Đời sống</a> </li> <li> <a title="Pháp luật" href="https://baodaknong.vn/phap-luat">Pháp luật</a> </li> <li> <a title="Công nghệ" href="https://baodaknong.vn/cong-nghe">Công nghệ</a> </li> <li> <a title="Văn nghệ" href="https://baodaknong.vn/van-nghe">Văn nghệ</a> </li> <li> <a title="Đất và người Đắk Nông" href="https://baodaknong.vn/dat-va-nguoi-dak-nong">Đất và người Đắk Nông</a> </li> <li> <a title="Video" href="https://baodaknong.vn/video">Video</a> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="c-powered"> <div class="container"> <div class="c-powered__text"> POWERED BY <a href="https://onecms.vn/" target="_blank"><span>ONE</span>CMS</a> - A PRODUCT OF <span>NEKO</span> </div> </div> </div> <div class="c-gotop js-gotop"><i class="icon24-angle-top"></i></div> <script src="https://daknong.1cdn.vn/assets/static/js/jquery-3.4.1.min.js"></script> <script src="https://daknong.1cdn.vn/assets/static/js/main.min.06032025.js?t=1105202509"></script> <script src="/script/ui-248502.js"></script> <script src="https://daknong.1cdn.vn/assets/restruct/js/snippets-custom.bundle.min.js?t=1105202509"></script> <script src="https://daknong.1cdn.vn/assets/restruct/js/custom.min.18032025.js?t=110520250959"></script> <script type="text/javascript">activeMenu('https://baodaknong.vn/cong-nghe/cong-nghe-thong-tin', 'https://baodaknong.vn/cong-nghe');</script> <!-- id.1cdn.vn --> <script> let ___id1cdn_js = document.createElement('script'); ___id1cdn_js.src = 'https://id.1cdn.vn/js?id=O-b63TBt6ZN0'; ___id1cdn_js.async = true; document.body.appendChild(___id1cdn_js); </script> <!-- / id.1cdn.vn --> <!-- The Modal --> <div class="popUp binhLuan binhluancomment" id="binhluanmodal"> <div onclick="closePopUp();" class="bg"></div> <div class="popupContent"> <div class="content"> <div class="title">Gửi bình luận</div> <div class="form"> <div class="box"> <input type="text" id="txt_Name" value="" placeholder="Họ và tên..." /> <label class="control-label help-block" for="txt_Name"> <em></em> </label> </div> <div class="box"> <input type="text" id="txt_Email" value="" placeholder="Email" /> <label class="control-label help-block" for="txt_Email"> <em></em> </label> </div> </div> <div class="btnClick"> <a onclick="closePopUp();" href="javascript://">Hủy</a> <a href="javascript://" class="btn_send_comment">Gửi</a> </div> </div> </div> </div> <script src="https://sp.zalo.me/plugins/sdk.js"></script> <script defer> window.addEventListener("DOMContentLoaded", function () { try { var iframes = document.querySelectorAll( 'iframe[src*="https://button-share.zalo.me"]' ); iframes.forEach(function (iframe) { iframe.setAttribute("title", "zalo share"); }); } catch (error) { // Handle any errors that occur during the execution of the code console.error("An error occurred:", error); } }); </script> <script type="text/javascript"> webControl.f_share = 'https://www.facebook.com/sharer/sharer.php?u=https://baodaknong.vn/html-la-gi-huong-dan-chi-tiet-cach-hoat-dong-cu-phap-va-ung-dung-248502.html'; webControl.publisherId = '248502'; webControl.channelId = '329'; webControl.loadmore_params = () => ( { type: '24h', keyword: '', publisherId: $('.onecms_loading li:last').attr('pid'), channelId: 329, eventId: 0, view: 'Newest' }); $(document).ready(function () { webControl.initLoadMore(); webControl.audioPlayer({ autoPlay: true, }); createBookForDetail("html-la-gi-huong-dan-chi-tiet-cach-hoat-dong-cu-phap-va-ung-dung"); }); $(".shareall").click(function (e) { e.preventDefault(); let _title = `HTML là gì? Hướng dẫn chi tiết cách hoạt động, cú pháp và ứng dụng`; let _text = _title; let _url = `https://baodaknong.vn/html-la-gi-huong-dan-chi-tiet-cach-hoat-dong-cu-phap-va-ung-dung-248502.html`; shareSomeContent(decodeHtmlEntity(_title), decodeHtmlEntity(_text), _url); }); //#log info begin var WebControl = WebControl || {}; WebControl.item_id = 248502; WebControl.item_published_time = "2025-04-07T06:02:01Z"; WebControl.item_title = "HTML là gì? Hướng dẫn chi tiết cách hoạt động, cú pháp và ứng dụng"; WebControl.item_tags = "HTML"; var _authorAlias = "Lương Đàm"; if (_authorAlias != "") { WebControl.item_authors = []; _authorAlias .split(",") .map((element) => element.trim()) .filter((element) => element !== "") .forEach((element) => { WebControl.item_authors.push({ author_id: 0, author_name: element, author_url: "" }); }); } WebControl.item_channel = { channel_id: 329, channel_name: "Công nghệ thông tin", channel_url: "https://baodaknong.vn/cong-nghe/cong-nghe-thong-tin" }; WebControl.item_channels = [ { channel_id: 327, channel_name: "Công nghệ", channel_url: "https://baodaknong.vn/cong-nghe" }, { channel_id: 329, channel_name: "Công nghệ thông tin", channel_url: "https://baodaknong.vn/cong-nghe/cong-nghe-thong-tin" } ]; //#log info end // #index now $.ajax({ url: '/api/indexnow', method: 'GET', data: { q: 'https://baodaknong.vn/html-la-gi-huong-dan-chi-tiet-cach-hoat-dong-cu-phap-va-ung-dung-248502.html' }, dataType: 'json', success: function (data) { if (data.success) { console.log(data.message); } else { console.log('Có vấn đề xảy ra: ' + data.message); } }, error: function (xhr, status, error) { console.error('Error:', error); console.log('Có lỗi xảy ra khi gửi request!'); } }); </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "NewsArticle" }, "headline": "HTML là gì? Hướng dẫn chi tiết cách hoạt động, cú pháp và ứng dụng", "description": "Tìm hiểu HTML từ A-Z: khái niệm, cách hoạt động, cú pháp cơ bản đến ứng dụng thực tế trong xây dựng và thiết kế trang web chuyên nghiệp.", "image": { "url": "https://daknong.1cdn.vn/thumbs/900x600/2025/04/06/www.oxfordwebstudio.com-user-pages-06.da-li-znate-sta-je-html-_sta-je-html.jpg" }, "datePublished": "2025-04-07T06:02:01+07:00", "dateModified": "2025-04-07T06:02:01+07:00", "author": { "@type": "Person", "name": "Lương Đàm" }, "publisher": { "@type": "Organization", "name": "baodaknong.vn", "logo": { "@type": "ImageObject", "url": "https://daknong.1cdn.vn/assets/static/images/logo.png" } } } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebPage", "name": "HTML là gì? Hướng dẫn chi tiết cách hoạt động, cú pháp và ứng dụng", "description": "Tìm hiểu HTML từ A-Z: khái niệm, cách hoạt động, cú pháp cơ bản đến ứng dụng thực tế trong xây dựng và thiết kế trang web chuyên nghiệp.", "publisher": { "@type": "Organization", "name": "Báo Đắk Nông điện tử" } } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "ImageObject", "url": "https://daknong.1cdn.vn/thumbs/1200x800/2025/04/06/www.oxfordwebstudio.com-user-pages-06.da-li-znate-sta-je-html-_sta-je-html.jpg", "height": "1200", "width": "800" } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "item": { "@id": "https://baodaknong.vn/cong-nghe", "name": "Công nghệ" } }, { "@type": "ListItem", "position": 2, "item": { "@id": "https://baodaknong.vn/cong-nghe/cong-nghe-thong-tin", "name": "Công nghệ thông tin" } } ] } </script> <script src="https://daknong.1cdn.vn/assets/restruct/js/authjs.min.js"></script> <!--modal--> <!-- Modal login--> <div class="modal modal-custom fade" id="modalLogin" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="c-auth-tabs"> <div class="c-auth-tabs__title"> <ul> <li class="active"><a href="#auth-tab1">Đăng nhập</a></li> <li><a href="#auth-tab2">Tạo tài khoản</a></li> <li style="display:none"><a id="lbtn-forgot" href="#auth-tab3">Lấy lại mật khẩu</a></li> </ul> </div> <div class="c-auth-tabs__container"> <div class="c-auth-tabs__pane is-current active" id="auth-tab1"> <div class="c-auth-box"> <div class="c-auth-box__left"> <label>Đăng nhập với email</label> <div class="c-auth-box__form"> <div class="form-group"> <input id="txt-signin-email" class="form-control form-control-lg" type="text" placeholder="Email"> </div> <div class="form-group form-group-icons"> <input id="txt-signin-password" class="form-control form-control-lg" type="password" placeholder="Mật khẩu"><span class="form-group-icon js-show-password"><i class="icon16-eye-black"></i></span> </div> <div class="form-group"> <button id="btn-signin" class="btn btn-primary btn-block btn-lg">Đăng nhập</button> <a class="btn btn-transparent btn-block" href="javascript:;" onclick="document.getElementById('lbtn-forgot').click()">Lấy lại mật khẩu</a> </div> </div> </div> <!--end c-auth-box__left--> <div class="c-auth-box__right"> <label>Đăng nhập với</label> <div class="c-auth-box__more"> <ul> <li><a class="btn btn-outline-primary btn-block btn-lg is-google btn-signin-google" href="javascript:;"><i class="icon20-google icon-left"></i>Google</a></li> <li><a class="btn btn-outline-primary btn-block btn-lg is-facebook btn-signin-facebook" href="javascript:;"><i class="icon20-facebook icon-left"></i>Facebook</a></li> <li><a class="btn btn-outline-primary btn-block btn-lg is-apple btn-signin-apple" href="javascript:;" style="display:none"><i class="icon20-apple icon-left"></i>Apple</a></li> </ul> </div> </div> <!--end c-auth-box__right--> </div> <!--end c-auth-box--> </div> <!--end c-auth-tabs__pane--> <div class="c-auth-tabs__pane" id="auth-tab2"> <div class="c-auth-box"> <div class="c-auth-box__left"> <label>Tạo tài khoản Báo Đăk Nông<br>Để sử dụng đầy đủ tính năng đọc báo</label> <div class="c-auth-box__form"> <div class="form-group"> <input id="txt-signup-email" class="form-control form-control-lg" type="text" placeholder="Nhập email"> </div> <div class="form-group form-group-icons"> <input id="txt-signup-password" class="form-control form-control-lg" type="password" placeholder="Mật khẩu"><span class="form-group-icon js-show-password"><i class="icon16-eye-black"></i></span> </div> <div class="form-group form-group-icons"> <input id="txt-signup-password2" class="form-control form-control-lg" type="password" placeholder="Nhập lại mật khẩu"><span class="form-group-icon js-show-password"><i class="icon16-eye-black"></i></span> </div> <div class="form-group"> <button id="btn-signup" class="btn btn-primary btn-block btn-lg">Tạo tài khoản</button> </div> </div> </div> <!--end c-auth-box__left--> <div class="c-auth-box__right"> <label>Đăng nhập với</label> <div class="c-auth-box__more"> <ul> <li><a class="btn btn-outline-primary btn-block btn-lg is-google btn-signin-google" href="javascript:;"><i class="icon20-google icon-left"></i>Google</a></li> <li><a class="btn btn-outline-primary btn-block btn-lg is-facebook btn-signin-facebook" href="javascript:;"><i class="icon20-facebook icon-left"></i>Facebook</a></li> <li><a class="btn btn-outline-primary btn-block btn-lg is-apple btn-signin-apple" href="javascript:;" style="display:none"><i class="icon20-apple icon-left"></i>Apple</a></li> </ul> </div> </div> <!--end c-auth-box__right--> <div class="c-auth-box__hint"> Khi bấm tạo tài khoản bạn đã đồng ý với quy định của tòa soạn </div> </div> <!--end c-auth-box--> </div> <!--end c-auth-tabs__pane--> <div class="c-auth-tabs__pane" id="auth-tab3"> <div class="c-auth-box"> <div class="c-auth-box__left"> <label>Lấy lại mật khẩu</label> <div class="c-auth-box__form"> <div class="form-group"> <input id="txt-forgot-email" class="form-control form-control-lg" type="text" placeholder="Nhập email để lấy lại mật khẩu"> </div> <div class="form-group"> <button id="btn-forgot" class="btn btn-primary btn-block btn-lg">Lấy lại mật khẩu</button> </div> </div> </div> <!--end c-auth-box__right--> </div> <!--end c-auth-box--> </div> <!--end c-auth-tabs__pane--> </div> <!--end c-auth-tabs__container--> </div> <!--end .c-auth-tabs--> </div> <!--end modal-body--> </div> <!--end modal-content--> </div> <!--end modal-dialog--> </div> <!-- Modal account--> <div class="modal modal-custom fade" id="modalAccount" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="c-auth-tabs"> <div class="c-auth-tabs__title"> <ul> <li class="active"><a href="#auth-tab1">Đổi mật khẩu tài khoản</a></li> </ul> </div> <div class="c-auth-tabs__container"> <div class="c-auth-tabs__pane is-current active" id="auth-tab1"> <div class="c-auth-box"> <div class="c-auth-box__left"> <div class="c-auth-box__form"> <div class="form-group form-group-icons"> <input id="txt-old-password" class="form-control form-control-lg" type="password" placeholder="Mật khẩu cũ"><span class="form-group-icon js-show-password"><i class="icon16-eye-black"></i></span> </div> <div class="form-group form-group-icons"> <input id="txt-new-password" class="form-control form-control-lg" type="password" placeholder="Mật khẩu mới"><span class="form-group-icon js-show-password"><i class="icon16-eye-black"></i></span> </div> <div class="form-group form-group-icons"> <input id="txt-new-password2" class="form-control form-control-lg" type="password" placeholder="Nhập lại mật khẩu mới"><span class="form-group-icon js-show-password"><i class="icon16-eye-black"></i></span> </div> <div class="form-group"> <button id="btn-change-password" class="btn btn-primary btn-block btn-lg">Cập nhật</button> </div> </div> </div> <!--end c-auth-box__left--> <div class="c-auth-box__right"> <h4>Đổi mật khẩu tài khoản của bạn</h4> <p>Bạn vui lòng nhập mật khẩu cũ và mật khẩu mới để hoàn tất</p> </div> <!--end c-auth-box__right--> </div> <!--end c-auth-box--> </div> <!--end c-auth-tabs__pane--> </div> <!--end c-auth-tabs__container--> </div> <!--end .c-auth-tabs--> </div> <!--end modal-body--> </div> <!--end modal-content--> </div> <!--end modal-dialog--> </div> <!--end modal--> <!-- Modal account avatar--> <div class="modal modal-custom fade" id="modalAccountAvatar" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="c-auth-tabs"> <div class="c-auth-tabs__title"> <ul> <li class="active"><a href="#auth-tab1">Đổi ảnh đại diện</a></li> </ul> </div> <div class="c-auth-tabs__container"> <div class="c-auth-tabs__pane is-current active" id="auth-tab1"> <div class="c-auth-box"> <div class="c-auth-box__left"> <div class="c-auth-box__form"> <div class="form-group text-center"> <img id="img-user-avatar" class="rounded-circle" style="max-width: 150px;" src=""> </div> <div class="form-group"> <input class="form-control-file border" type="file" onchange="encodeImageFileAsURL(this)"> </div> <div class="form-group"> <button id="btn-change-avatar" class="btn btn-primary btn-block btn-lg">Cập nhật</button> </div> </div> </div> <!--end c-auth-box__left--> <div class="c-auth-box__right"> <h4>Đổi ảnh đại diện</h4> <p>Bạn vui lòng chọn ảnh dung lượng không quá 300kb, kích thước không quá 500px</p> </div> <!--end c-auth-box__right--> </div> <!--end c-auth-box--> </div> <!--end c-auth-tabs__pane--> </div> <!--end c-auth-tabs__container--> </div> <!--end .c-auth-tabs--> </div> <!--end modal-body--> </div> <!--end modal-content--> </div> <!--end modal-dialog--> </div> <!--end modal--> </body> </html>