<blockquote>: Phần tử Trích dẫn khối
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phần tử <blockquote> trong HTML cho biết rằng văn bản được bao gồm là một trích dẫn mở rộng. Thông thường, điều này được hiển thị trực quan bằng cách thụt lề (xem Ghi chú để biết cách thay đổi). URL của nguồn trích dẫn có thể được cung cấp bằng thuộc tính cite, trong khi đại diện văn bản của nguồn có thể được cung cấp bằng phần tử <cite>.
Try it
<div>
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>
Words can be like X-rays, if you use them properly—they'll go through
anything. You read and you're pierced.
</p>
</blockquote>
<p>—Aldous Huxley, <cite>Brave New World</cite></p>
</div>
div:has(> blockquote) {
background-color: #ededed;
margin: 10px auto;
padding: 15px;
border-radius: 5px;
}
blockquote p::before {
content: "\201C";
}
blockquote p::after {
content: "\201D";
}
blockquote + p {
text-align: right;
}
Thuộc tính
Các thuộc tính của phần tử này bao gồm các thuộc tính toàn cục.
cite-
Một URL chỉ định tài liệu nguồn hoặc thông điệp cho thông tin được trích dẫn. Thuộc tính này nhằm chỉ đến thông tin giải thích ngữ cảnh hoặc tài liệu tham khảo cho trích dẫn.
Ghi chú sử dụng
Theo đặc tả, việc ghi nguồn cho trích dẫn, nếu có, phải được đặt bên ngoài phần tử <blockquote>.
Để thay đổi thụt lề áp dụng cho văn bản được trích dẫn, sử dụng các thuộc tính CSS margin-left và/hoặc margin-right, hoặc thuộc tính rút gọn margin.
Để bao gồm các trích dẫn ngắn hơn dưới dạng nội tuyến thay vì trong một khối riêng biệt, sử dụng phần tử <q> (Quotation).
Ví dụ
Ví dụ này minh họa cách sử dụng phần tử <blockquote> để trích dẫn một đoạn từ RFC 1149, A Standard for the Transmission of IP Datagrams on Avian Carriers.
<blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149">
<p>
Avian carriers can provide high delay, low throughput, and low altitude
service. The connection topology is limited to a single point-to-point path
for each carrier, used with standard carriers, but many carriers can be used
without significant interference with each other, outside early spring. This
is because of the 3D ether space available to the carriers, in contrast to
the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
avoidance system, which increases availability.
</p>
</blockquote>
Kết quả
Tóm tắt kỹ thuật
| Danh mục nội dung | Nội dung luồng, gốc phân mục, nội dung hữu hình. |
|---|---|
| Nội dung được phép | Nội dung luồng. |
| Bỏ qua thẻ | Không, cả thẻ mở và thẻ đóng đều bắt buộc. |
| Phần tử cha được phép | Bất kỳ phần tử nào chấp nhận nội dung luồng. |
| Vai trò ARIA ngầm định |
blockquote
|
| Vai trò ARIA được phép | Bất kỳ |
| Giao diện DOM | HTMLQuoteElement |
Thông số kỹ thuật
| Specification |
|---|
| HTML> # the-blockquote-element> |
Tương thích trình duyệt
Xem thêm
- Phần tử
<q>dùng cho trích dẫn nội tuyến. - Phần tử
<cite>dùng để trích dẫn nguồn. - The blockquote element qua heydonworks.com (2024)