Cách ẩn thẻ trong html

Question

Thuộc tính toàn cầu

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

7 là một thuộc tính liệt kê cho biết rằng trình duyệt không được hiển thị nội dung của phần tử. Ví dụ: nó có thể được sử dụng để ẩn các thành phần của trang không thể sử dụng được cho đến khi quá trình đăng nhập hoàn tất

Nội dung chính Show

Sự mô tả
Trạng thái ẩn
Trạng thái ẩn cho đến khi tìm thấy
Sử dụng cho đến khi tìm thấy

Thử nó

Sự mô tả

Thuộc tính

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

7 đượ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

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

7

từ khóa

<span hidden="until-found">I'm hidden until found</span>

1

Có hai trạng thái được liên kết với thuộc tính

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

7. trạng thái ẩn và trạng thái ẩn cho đến khi tìm thấy

Một chuỗi rỗng hoặc từ khóa
```
I'm hidden
I'm also hidden
I'm hidden too!
```
7, đặt phần tử ở trạng thái ẩn. Ngoài ra, các giá trị không hợp lệ đặt thành phần ở trạng thái ẩn
Từ khóa
```
I'm hidden until found
```
1 đặt phần tử ở trạng thái ẩn cho đến khi tìm thấy

Do đó, tất cả những điều sau đây đặt phần tử ở trạng thái ẩn

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

Phần sau đây đặt phần tử thành trạng thái ẩn cho đến khi tìm thấy

<span hidden="until-found">I'm hidden until found</span>

Không được sử dụng thuộc tính

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

7 để ẩn nội dung chỉ trong một bản trình bày. Nếu nội dung nào đó được đánh dấu là ẩn, thì nội dung đó sẽ bị ẩn khỏi tất cả các bản trình bày, chẳng hạn như trình đọc màn hình

Các phần tử ẩn không nên được liên kết từ các phần tử không ẩn. Ví dụ: sẽ không chính xác nếu sử dụng thuộc tính

<span hidden="until-found">I'm hidden until found</span>

6 để liên kết đến một phần được đánh dấu bằng thuộc tính

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

7. Nếu nội dung không áp dụng hoặc không liên quan, thì không có lý do gì để liên kết với nó

Tuy nhiên, sẽ ổn nếu sử dụng thuộc tính ARIA

<span hidden="until-found">I'm hidden until found</span>

8 để tham chiếu đến các mô tả bị ẩn. Mặc dù ẩn các mô tả ngụ ý rằng bản thân chúng không hữu ích, nhưng chúng có thể được viết theo cách hữu ích trong ngữ cảnh cụ thể được tham chiếu từ phần tử mà chúng mô tả

Tương tự, một phần tử canvas có thuộc tính

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

7 có thể được sử dụng bởi một công cụ đồ họa theo kịch bản làm bộ đệm ngoài màn hình và một điều khiển biểu mẫu có thể tham chiếu đến một phần tử biểu mẫu ẩn bằng cách sử dụng thuộc tính biểu mẫu của nó

Các phần tử con của một phần tử ẩn vẫn đang hoạt động, có nghĩa là các phần tử tập lệnh vẫn có thể thực thi và các phần tử biểu mẫu vẫn có thể gửi

Trạng thái ẩn

Trạng thái ẩn cho biết rằng phần tử hiện không liên quan đến trang hoặc phần tử đó đang được sử dụng để khai báo nội dung để các phần khác của trang sử dụng lại và không được hiển thị trực tiếp cho người dùng. Trình duyệt sẽ không hiển thị các phần tử ở trạng thái ẩn

Các trình duyệt web có thể triển khai trạng thái ẩn bằng cách sử dụng

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

0, trong trường hợp đó, phần tử sẽ không tham gia vào bố cục trang. Điều này cũng có nghĩa là việc thay đổi giá trị của thuộc tính CSS

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

1 trên một phần tử ở trạng thái ẩn sẽ ghi đè trạng thái. Chẳng hạn, các phần tử có kiểu dáng

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

2 sẽ được hiển thị bất chấp sự hiện diện của thuộc tính

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

7

Trạng thái ẩn cho đến khi tìm thấy

Ở trạng thái ẩn cho đến khi tìm thấy, phần tử bị ẩn nhưng nội dung của nó sẽ có thể truy cập được bằng tính năng "tìm trong trang" của trình duyệt hoặc điều hướng phân đoạn. Khi các tính năng này gây ra cuộn đến một phần tử trong cây con ẩn cho đến khi tìm thấy, trình duyệt sẽ

kích hoạt sự kiện

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

4 trên phần tử ẩn

xóa thuộc tính

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

7 khỏi phần tử

cuộn đến phần tử

Điều này cho phép nhà phát triển thu gọn một phần nội dung nhưng làm cho phần đó có thể tìm kiếm và truy cập được thông qua điều hướng phân đoạn

Lưu ý rằng các trình duyệt thường triển khai ẩn cho đến khi tìm thấy bằng cách sử dụng

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

6. Điều này có nghĩa là không giống như các phần tử ở trạng thái ẩn, các phần tử ở trạng thái ẩn cho đến khi tìm thấy sẽ có các hộp được tạo, nghĩa là

phần tử sẽ tham gia bố cục trang
lề, đường viền, phần đệm và nền cho phần tử sẽ được hiển thị

Ngoài ra, phần tử cần phải bị ảnh hưởng bởi ngăn chặn bố cục để được tiết lộ. Điều này có nghĩa là nếu phần tử ở trạng thái ẩn cho đến khi tìm thấy có giá trị

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

1 là

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

8,

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

9 hoặc

<span hidden="until-found">I'm hidden until found</span>

40, thì phần tử đó sẽ không được hiển thị bằng điều hướng tìm trong trang hoặc phân đoạn

ví dụ

Sử dụng cho đến khi tìm thấy

Trong ví dụ này chúng ta có

Ba yếu tố

<span hidden="until-found">I'm hidden until found</span>

41. Cái thứ nhất và cái thứ ba không bị ẩn, trong khi cái thứ hai có các thuộc tính

<span hidden="until-found">I'm hidden until found</span>

42 và

<span hidden="until-found">I'm hidden until found</span>

43

Một liên kết có mục tiêu là đoạn

<span hidden="until-found">I'm hidden until found</span>

44

Phần tử ẩn cho đến khi tìm thấy có đường viền chấm đỏ và nền màu xám

Chúng tôi cũng có một số JavaScript lắng nghe sự kiện

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

4 kích hoạt phần tử ẩn cho đến khi tìm thấy. Trình xử lý sự kiện thay đổi nội dung văn bản của hộp

HTML

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

<span hidden="until-found">I'm hidden until found</span>

4

CSS

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

2

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

3

JavaScript

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

4

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

5

Kết quả

Lưu ý rằng mặc dù nội dung của phần tử bị ẩn nhưng phần tử vẫn có hộp được tạo, chiếm không gian trong bố cục và có nền và đường viền được hiển thị

Nhấp vào nút "Chuyển đến nội dung ẩn" sẽ điều hướng đến phần tử ẩn cho đến khi tìm thấy. Sự kiện

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>