Alternatively, jump to the second page for a roundup of sectioning elements you can use to accurately define page structure and each element’s role, and a selection of inline elements to use instead of .
Bạn muốn khám phá thêm một số API? . Hoặc giữ mọi thứ đơn giản với một người xây dựng trang web. Tuy nhiên trang web của bạn phức tạp, bạn sẽ cần lưu trữ web tốt. [opens in new tab], HTML APIs [opens in new tab] and Google APIs [opens in new tab]. Or keep things simple with a website builder. However complex your site, you'll need decent web hosting.
01.
[mở trong tab mới]- Sử dụng nó để. Hiển thị cửa sổ bật lên hoặc cửa sổ phương thức mà không có chi phí
- Đọc [mở trong tab mới]
Một mẫu thiết kế phổ biến trên web là có thêm màn hình cửa sổ để cung cấp thêm thông tin hoặc tùy chọn cho một tương tác phức tạp. Thêm xác nhận như một bước bổ sung cũng là một cách hay để khiến người dùng biết rằng hành động của họ sẽ có hậu quả
Các cửa sổ này đã tồn tại trong nhiều năm nhờ sự trợ giúp của các thư viện như Bootstrap hoặc jQuery UI. Mặc dù chúng có thể dễ triển khai, nhưng chúng thường yêu cầu tập lệnh nặng và kiểu dáng bổ sung để phù hợp với giao diện của trang web mà chúng được triển khai.
One of the few elements added in HTML5.2 is . This new, semantic element is designed to denote a supplementary, interactive component that displays out of the main flow of the document.
Dialog Content
The element itself is designed to be as simple to use as possible. Any content within the tags will become part of the window and do not appear on the page by default. When the element has the open attribute applied, it then appears centred based on where it appears in the DOM.
Mặc dù các hộp thoại có thể yêu cầu phản hồi nhưng người dùng vẫn có thể điều hướng trang mà không cần phải tương tác với nó. Cửa sổ phương thức tương tự như hộp thoại, nhưng có mục đích yêu cầu người dùng thực hiện một hành động trước khi tiếp tục. Điều này làm cho nó hữu ích cho các hành động có khả năng phá hoại, chẳng hạn như xóa tài khoản
const dialog = document.
getElementById["modal"];
dialog.showModal[];Cửa sổ phương thức chỉ có thể được kích hoạt bằng JavaScript. Sau khi mở, cửa sổ
xuất hiện hoàn toàn ở giữa màn hình của người dùng và làm mờ phần còn lại của trang. Cách duy nhất để đóng nó là nhấn phím thoát hoặc gọi phương thức đóng trên phần tử.
Việc triển khai phương thức không bản địa thường quên nội dung đằng sau phương thức. Đối với người dùng bàn phím, trình duyệt của họ có thể bắt đầu tập trung và tương tác với các phần tử bên dưới phương thức không thể nhìn thấy. Các phương thức gốc làm cho phần còn lại của nội dung bị trơ, đảm bảo tiêu điểm nằm trong cửa sổ trước khi bị loại bỏ
Hỗ trợ trình duyệt hiện chỉ giới hạn ở các trình duyệt Internet Chrome, Opera và Samsung. Vì các trình duyệt không được hỗ trợ xử lý các phần tử không xác định như [mở trong tab mới] để giải quyết vấn đề.
02. &
[mở trong tab mới]- Sử dụng chúng để. Hiển thị/ẩn nội dung dưới tiêu đề có thể thu gọn mà không cần sử dụng JS
- Đọc [mở trong tab mới] và [mở trong web docs
Đàn accordion là một mẫu giao diện người dùng phổ biến. Nó phục vụ như một cách để phù hợp với nội dung có khả năng dài trong một không gian nhỏ, với điều kiện chỉ một số nội dung cần hiển thị ngay lập tức. Chúng hoạt động tốt nhất cho một mục lục, một tập hợp các câu hỏi thường gặp hoặc bất kỳ thông tin đi kèm nào khác, chẳng hạn như chỉ đường đến một địa điểm
While many libraries exist to help solve this problem, it can also be achieved without any JavaScript at all. Content can be hidden inside a element and therefore be toggled visible when clicked.
Heading
Some extremely long content…
Each element denotes a single collapsible area. Any content inside that block will be hidden by default until the 'Details' heading is clicked.
Adding an open attribute will expand the block. This can also be triggered through JavaScript as a way to reveal certain information to the user, such as an answer to a specific question. Adding a to the top of the block will replace the default heading to the contents of that element. That heading then becomes interactive, which makes the contents inside keyboard accessible.
While it can have almost any value, adding other interactive or clickable elements such as or will override the collapsing behaviour and break the element. Multiple elements can also be nested without issue. This could make it useful for nesting sub-links or hiding supplementary information within a block.
According to the specification, should be limited to additional information or controls rather than anything considered important to read. In some instances, a more semantic element such as for key-value pairs may be more suitable.
Both and are available in all browsers apart from Edge and IE. For these, information will display expanded by default, or a JavaScript fallback can be used.
03.
[mở trong tab mới]- Sử dụng nó để. Đáp ứng các chế độ xem khác nhau và phục vụ nội dung chuyên biệt
- Đọc tài liệu web [mở trong tab mới]
Khi hình ảnh cần phản hồi nhanh, đôi khi chỉ đơn giản là thay đổi kích thước hình ảnh tại các điểm ngắt nhất định là không đủ. Trên màn hình lớn hơn, hình ảnh có thể hiển thị bị méo và khối nhưng trên màn hình nhỏ hơn, hình ảnh có thể tải xuống lớn hơn nhiều so với yêu cầu
Khi hình ảnh được sử dụng cho mục đích thông tin, sẽ có ý nghĩa hơn khi hiển thị hình ảnh được điều chỉnh đặc biệt cho một loại hoặc kích thước màn hình nhất định. Ví dụ: màn hình lớn hơn có thể được hưởng lợi từ sơ đồ được chú thích đầy đủ, trong khi màn hình nhỏ hơn có thể sử dụng nhãn màu thay thế