Thẻ ẩn trong HTML là gì?

Question

Thuộc tính toàn cầu ẩn trong HTML5 là thuộc tính Boolean. Nó quy định rằng phần tử được nhắm mục tiêu có liên quan hơn nữa hay không đối với tài liệu HTML. Một ví dụ về việc sử dụng thuộc tính ẩn là nó có thể được sử dụng để che/khám phá bất kỳ nội dung cụ thể nào có trên trang web HTML không được phép trừ khi người dùng đã được xác thực. Cho đến lúc đó, các trình duyệt sẽ không hiển thị các phần tử có thuộc tính ẩn đang hoạt động (i. e. thuộc tính được thiết lập)

Nội dung chính Show

Sử dụng thuộc tính ẩn
Ví dụ về phần tử ẩn HTML
Những điểm quan trọng cần nhớ
Phần kết luận
Bài viết được đề xuất
Loại ẩn trong HTML là gì?
Việc sử dụng thuộc tính ẩn là gì?
Ý nghĩa ẩn trong mã là gì?
Làm cách nào để sử dụng ẩn trong HTML?

Sử dụng thuộc tính ẩn

Một cách sử dụng các thuộc tính ẩn như vậy có thể giống như ngăn người dùng nhìn thấy một phần tử cho đến khi một số điều kiện được đáp ứng (chẳng hạn như chọn một nút radio, v.v. ) sau đó, mã JavaScript có thể quy định lại thuộc tính ẩn, do đó làm cho phần tử hiển thị. Thuộc tính này không nên được sử dụng để ẩn nội dung chỉ cho một bản trình bày riêng lẻ;

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác

Nội dung bị ẩn không được liên kết với nội dung không bị ẩn hoặc nội dung liên quan đến nội dung bị ẩn nhưng vẫn đang hoạt động. Điều này đảm bảo rằng các phần tử biểu mẫu chưa thể được gửi và các phần tử tập lệnh chưa thể được thực thi. Tuy nhiên, Tập lệnh và Thành phần có thể đề cập đến bất kỳ nội dung nào bị ẩn trong một số ngữ cảnh khác

Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)

Giá bán
Xem các khóa học

Hơn 600 khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập trọn đời
4. 6 (85.265 xếp hạng)

It would be totally incorrect to utilize the attribute in a real-world scenario to connect to a section pronounced with a hidden attribute. If the linked content is neither relevant nor applicable, then there is no need to pack them together. As per the definition of the Hidden attribute, we can hide any content present within an HTML webpage using the hidden attribute and then JavaScript code can be used to access it afterwards. Target to hide an element can also be achieved by CSS with the property as display property (i.e. setting it to none) but using the hidden attribute is an easy approach.

Ghi chú. Việc thay đổi giá trị thuộc tính hiển thị CSS trên một phần tử có thuộc tính ẩn sẽ ghi đè hành vi của phần tử đó. Ví dụ: các phần tử được tạo kiểu là hiển thị. flex sẽ được hiển thị bất chấp sự hiện diện của thuộc tính ẩn

cú pháp

<element hidden> </element>

Ví dụ về phần tử ẩn HTML

Đưa ra dưới đây là các ví dụ về phần tử ẩn HTML

Ví dụ 1

Mã số

<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
</body>
</html>

đầu ra

Ví dụ #2

Mã số

<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">TOGGLE HIDDEN ELEMENTS</button>
<p id="p" hidden>This paragraph uses HTML5's             <code>hidde</code> element.</p>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {p.hidden = !p.hidden;ta.hidden = !ta.hidden;}, false);
</script>
</body>
</html>

đầu ra

Ví dụ #3 – Tính hữu ích của Thuộc tính

Theo định nghĩa của thuộc tính Hidden, chúng ta có thể ẩn bất kỳ nội dung nào có trong trang web HTML bằng thuộc tính hidden và sau đó mã JavaScript có thể được sử dụng để truy cập nội dung đó sau đó. Mục tiêu để ẩn một phần tử cũng có thể đạt được bằng CSS với thuộc tính là thuộc tính hiển thị (i. e. đặt nó thành không) nhưng sử dụng thuộc tính ẩn là một cách tiếp cận dễ dàng. Do đó, chúng ta có thể nói rằng nội dung có thuộc tính ẩn là một phần của DOM, nhưng người dùng không thể truy cập nội dung đó

In the below example, we’ll pick the part of a hidden element using JavaScript code:

Mã số

<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">DISPLAY HIDDEN TEXT</button>
<output id="op">(Hidden text will appear here)</output>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {op.innerHTML = ta.innerHTML;}, false);
</script>
</body>
</html>

đầu ra

Những điểm quan trọng cần nhớ

Đây là một số điểm quan trọng cần được biết rõ trước khi tương tác với thuộc tính ẩn

Nội dung có thể truy cập được ở độ phân giải và kích thước màn hình riêng biệt không được sử dụng thuộc tính ẩn để ẩn nội dung
Không nên sử dụng thuộc tính ẩn để ẩn/che các phần không nhìn thấy được của trình chuyển đổi nội dung hoặc thành phần tab
Phần tử không ẩn không được liên kết với phần tử ẩn
Các yếu tố được đánh dấu là ẩn vẫn có khả năng hoạt động
Nếu bạn muốn ẩn nội dung khỏi tất cả người dùng, hãy sử dụng thuộc tính ẩn HTML5 (cùng với hiển thị CSS. none đối với những trình duyệt chưa hỗ trợ ẩn). Không cần sử dụng aria-hidden

Phần kết luận

Dưới đây được đề cập là một số điểm chính mà bạn nên nhớ từ chủ đề này

Các trường hợp sử dụng phù hợp cho thuộc tính ẩn bao gồm

Nội dung chưa liên quan nhưng sau này có thể cần
Nội dung đã được sử dụng trước đây nhưng không còn cần thiết nữa
Nội dung có thể tái sử dụng và được nhiều phần khác của trang sử dụng theo kiểu mẫu
Tạo canvas ngoài màn hình làm bộ đệm vẽ

Các trường hợp sử dụng không phù hợp của thuộc tính ẩn bao gồm

Ẩn bảng trong hộp thoại theo thẻ
Ẩn nội dung trong một bản trình bày riêng lẻ trong khi dự định hiển thị nội dung đó ở những người khác

Ghi chú. Các phần tử bị ẩn không được liên kết với các phần tử không ẩn khác cho đến khi chúng có liên quan với nhau

Bài viết được đề xuất

Đây là hướng dẫn về phần tử ẩn HTML. Ở đây chúng ta thảo luận về giới thiệu, cách sử dụng các thuộc tính ẩn và các ví dụ về phần tử ẩn HTML. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

Loại ẩn trong HTML là gì?

The xác định trường nhập ẩn . Trường ẩn cho phép nhà phát triển web bao gồm dữ liệu mà người dùng không thể nhìn thấy hoặc sửa đổi khi biểu mẫu được gửi.

Việc sử dụng thuộc tính ẩn là gì?

Thuộc tính ẩn được sử dụng để chỉ ra rằng nội dung của một phần tử không được hiển thị cho người dùng . Thuộc tính này có thể nhận bất kỳ một trong các giá trị sau. một chuỗi rỗng. từ khóa ẩn.

Ý nghĩa ẩn trong mã là gì?

Đó là một chỉ báo ngữ nghĩa về trạng thái trong mã HTML . Nếu thuộc tính này được sử dụng thì trình duyệt sẽ không hiển thị các phần tử có thuộc tính ẩn được chỉ định. Thuộc tính ẩn có thể được nhìn thấy bằng cách sử dụng một số điều kiện hoặc JavaScript được sử dụng để xem nội dung ẩn.

Làm cách nào để sử dụng ẩn trong HTML?

Hoàn thành khóa học HTML/CSS 2022 . Để tạo nhận xét ẩn trong HTML, chúng tôi thêm --- thẻ và kết thúc nó bằng -- > . Bất cứ điều gì đến bên trong thẻ này nó bị ẩn.

programming html