You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Hướng dẫn cách để ẩn bất kỳ một dữ liệu nào trong HTML khi bạn muốn

Hướng dẫn cách để ẩn bất kỳ một dữ liệu nào trong HTML khi bạn muốn

Chúng ta sẽ cùng học đến việc ẩn dữ liệu trong HTML nhé!

Xem thêm bài viết

Chào các bạn! Chúng ta đã học cách để sử dụng thẻ Div một cách thật hiệu quả trong những bài học trước. Ở bài học này chúng ta sẽ tìm hiểu xem làm thế nào thì mới có thể ẩn thẻ Div trong HTML. Trong nhiều trường hợp, việc ẩn thẻ Div là một nhu cầu hợp lý. Thế nên cũng không có gì lạ khi bạn cần đến những thứ vũ khí lợi hại hơn để thực hiện ẩn thẻ Div trong HTML.

Mặc dù ẩn thẻ Div trong HTML là một chuyện khá cần thiết nhưng trong HTML bạn không thể làm được điều này. Một phần là vì bạn không có đủ “vũ khí để thực hiện. Để thực hiện việc ẩn thẻ Div một cách trơn tru bạn cần nhiều thứ vũ khí lợi hại hơn là HTML. Chúng có liên kết mật thiết với những khoá học sau. Những khoá học mà sau khi học xong bạn có thể thực hiện một cách nhanh chóng nhất.

Muốn thực hiện ẩn thẻ Div bạn cần biết những kỹ thuật nào?

Thật sự là rất nhiều kỹ thuật. Bạn có thể thực hiện bằng kỹ thuật jQuery hoặc JavaScript. Sau khi thực hiện các đoạn mã ở phần này xong thì bạn sẽ thực hiện tiếp một đoạn mã khác tại CSS. Cuối cùng chúng ta phải viết một đoạn mã vào HTML. Như thế chúng ta mới có thể tiến hành ẩn thẻ Div. Nghe qua là thấy nhiêu khê và mệt mỏi rồi.Bằng kỹ thuật HTML không thì rất khó để bạn có thể thực hiện được việc ẩn thẻ. Thực sự sẽ khá mệt mỏi đây. Tuy HTML không thể giúp bạn ẩn thẻ Div nhưng bù lại HTML có thể giúp bạn ẩn nội dung trong HTML mà bạn không muốn chúng xuất hiện nữa. Kỹ thuật này dựa vào một thuộc tính có tên là Display trong CSS. Chúng ta sẽ mượn tạm thuộc tính để thực hiện việc này trong HTML.

Cú pháp thuộc tính Display

<style>

Tên thẻ {

Display: None;

}

</style>

 

Tên thẻ chính là tên phần tử mà bạn muốn ẩn chúng. Có thể là thẻ P, thẻ H,…Sau Display là dấu hai chấm để chuẩn bị áp dụng giá trị vào thuộc tính này. Ở đây sẽ  là giá trị None do bạn muốn ẩn nội dung của trang HTML. Tạm thời chúng ta chỉ biết đến giá trị None mà thôi. Trong bài học CSS bạn sẽ được học những bài về việc tuỳ biến thẻ Display trong CSS.

Ví dụ

 Chúng ta sẽ thử ẩn đoạn văn trong phần Giới thiệu dự án. Chúng ta sẽ đặt thuộc tính class cho đoạn văn đó. Trong thẻ Style chúng ta sẽ sử dụng kí tự . để biểu thị đang trang trí cho một thẻ Class.

<!doctype html>
<html>

<head>
    <title>Trang web giới thiệu ẩm thực sáng tạo</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay" />
    <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn" />
    <style>
        .vgthieu {
            display: none;
        }
    </style>

</head>

<body>
    <nav>
        <a href="try.html" class="main-menu">Trang chủ</a> |
        <a href="thuc-don.html" class="main-menu">Thực Đơn</a> |
        <a href="lien-he.html" class="main-menu">Liên Hệ</a>
    </nav>
    

    <h1>Ẩm thực 47 ngõ đường phố Sài Gòn</h1>
    <nav id="gola">
        <a href="#gthieu" class="main-top">Giới thiệu dự án</a> |
        <a href="#muc-tieu" class="main-top">Mục tiêu dự án</a> |
        <a href="#diem-nhan" class="main-top">Điểm nhấn dự án</a>
    </nav>
   
    
    <pre>
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường.
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá.
                    Muốn ăn món Thái, 
                            Có ngay! 
                    Muốn ăn món Hàn, 
                            Hãy nhìn bên kia đường! 
                    Muốn ăn thịt nướng, 
                            Đi thêm vài bước nữa! 
                    Muốn ăn món Nhật, 
                            Ghé đối diện! 
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn
                    Những buổi tối không ngủ 
                        Ngắm nhìn đường phố nhộp nhịp
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà. 
                Sài Gòn là nơi của những ly cà phê đặc biệt. 
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau. 
                Có một Sài Gòn rất khác... 
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </pre>
        
        <h1>Khám phá Sài Gòn ngay nào</h1>
        <center><a href="thuc-don.html"><button class="button1">Khám phá ngay</button></a></center>
        <div>
        <a><h2 id="gthieu">Giới thiệu dự án</h2></a>
        <p>Dự án được thự chiện bởi một nhóm bạn trẻ có niềm đam mê với ẩm thực nơi họ sinh ra. Chúng tôi luôn phát triển dự án theo đúng tôn chỉ "Ngon-bổ-rẻ". Chúng tôi luôn muốn mang đến cho bạn những trải nghiệm ẩm thực chỉ có ở Sài Gòn không nơi đâu có được. </p>
        <p>Nếu như bạn biết được một ngày nào đó chính bạn cũng sẽ có cảm giác ấn tượng đến khó phai với bất cứ thứ gì mà bạn đãn từng sinh ra tại đây</p>
        <a id="muc-tieu"><h2>Mục tiêu dự án</h2></a>
        <p>Chúng tôi muốn hoàn thành trọn vẹn bộ bản đồ ẩm thực Sài Gòn theo từng quận huyện khác nhau. Hiện chúng tôi đã có bản đồ của hai huyện ngoại thành thành phố.</p>
        <a id="diem-nhan"><h2>Điểm nhấn dự án</h2></a>
        <p>Món ăn đường phố thường bị gắn mác là kém vệ sinh. Nhưng chúng tôi muốn mang đến một trải nghiệm khác biệt hơn dành cho bạn. Một trải nghiệm thức ăn đường phố rẻ nhưng hợp vệ sinh.</p>
        </div>
        <a href="form.html" target="_blank"><button class="button2">THEO DÕI THÔNG TIN CỦA CHÚNG TÔI</button></a>
</body>

</html>

Kết quả ví dụ

Lúc chưa chèn thêm thuộc tính Display

Khi đã chèn thêm thuộc tính Display

Bằng cách này bạn đã áp dụngđể ẩn một nội dung mà bạn không cần thiết phải hiển thị trên HTML. Hoặc bạn không thích câu nói đó. Hoặc là trang web chưa đến mùa thực hiện chiến dịch. Ví thế mà bạn rất cần đến thuộc tính Display trong CSS. Chúng ta vẫn có thể áp dụng một cách bình thường vào HTML thông qua thẻ Style. Bạn cần phải luyện tập một chút đấy. Chúc các bạn học vui!

 




Đặt câu hỏi cho bài viết này ?