Thẻ <blockquote> HTML

Định nghĩa và cách sử dụng

<blockquote> thẻ quy định phần trích dẫn từ nguồn khác.

Trình duyệt thường sẽ lề <blockquote> thẻ (xin xem ví dụ dưới đây để hiểu cách loại bỏ lề).

Giải thích chi tiết

<blockquote> thẻ định nghĩa trích dẫn.<blockquote> và </blockquote> Tất cả văn bản giữa các thẻ này sẽ được tách ra khỏi văn bản thông thường, thường có lề ở hai bên (tăng khoảng cách bên ngoài), và đôi khi được in nghiêng. Nghĩa là, trích dẫn có không gian riêng của nó.

Lưu ý:Vui lòng sử dụng <q>thẻ để thực hiện trích dẫn trong dòng (ngắn).

Xin xem thêm:

Hướng dẫn HTML DOM:Đối tượng Blockquote

Mô hình

Ví dụ 1

Phần trích dẫn từ nguồn khác:

<blockquote cite="http://www.worldwildlife.org/who/index.html">
Trong 50 năm qua, Tổ chức Bảo vệ Thiên nhiên Thế giới (WWF) đã luôn bảo vệ tương lai của tự nhiên.
Là tổ chức bảo vệ môi trường hàng đầu thế giới, WWF hoạt động ở 100 quốc gia và nhận được sự ủng hộ của 1,2 triệu thành viên ở Mỹ và gần 5 triệu người trên toàn thế giới.
</blockquote>

Thử ngay

Ví dụ 2

Sử dụng CSS để loại bỏ lề của phần blockquote:

<html>
<head>
<style>
blockquote {
  margin-left: 0;
}
</style>
</head>
<body>
<p>Đây là một câu trích dẫn từ trang web của Tổ chức Bảo vệ Thiên nhiên Thế giới:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
Trong 50 năm qua, Tổ chức Bảo vệ Thiên nhiên Thế giới (WWF) đã luôn bảo vệ tương lai của tự nhiên.
Là tổ chức bảo vệ môi trường hàng đầu thế giới, WWF hoạt động ở 100 quốc gia và nhận được sự ủng hộ của 1,2 triệu thành viên ở Mỹ và gần 5 triệu người trên toàn thế giới.
</blockquote>
</body>
</html>

Thử ngay

Thuộc tính

Thuộc tính Giá trị Mô tả
cite URL Định nghĩa nguồn trích dẫn.

Thuộc tính toàn cục

<blockquote> Thẻ cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<blockquote> Thẻ cũng hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị các giá trị mặc định sau <blockquote> Thành phần:

blockquote {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

Thử ngay

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ