Có một số cách để trích dẫn nguồn hoặc phân biệt các trích dẫn từ văn bản xung quanh nó trong HTML. Hôm nay, chúng ta xem xét các Phần tử trích dẫn HTML:<blockquote> , <q> , <abbr> , <address> , <bdo> và <cite> . Mỗi trường hợp sử dụng riêng biệt - chúng tôi phân biệt giữa mỗi trường hợp và chỉ cho bạn cách sử dụng chúng trong đánh dấu của bạn.
Trích dẫn khối
<blockquote> phần tử được sử dụng cho văn bản được trích dẫn dài dòng, nhiều dòng. Phần tử được sử dụng để phân biệt chính đoạn trích dẫn với các đoạn văn xung quanh hoặc các phần tử HTML khác. Hãy xem ví dụ sử dụng soliloquy của một nhà viết kịch nổi tiếng nào đó:
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
blockquote p {
width: 80%;
margin: 0px 20px;
text-align: right;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquam adipisci at earum, optio consequatur et, alias corrupti voluptatum voluptates repellendus, tenetur suscipit qui nostrum totam veritatis doloremque laborum officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nostrum voluptate, perferendis amet hic totam perspiciatis excepturi. Nam earum, neque, in nihil magni aliquid id, iste deserunt tempore corporis eaque?</p>
<blockquote>
"To be, or not to be: that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them?..."
<p>—<em>Hamlet</em>, Act III, Scene I</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquam adipisci at earum, optio consequatur et, alias corrupti voluptatum voluptates repellendus, tenetur suscipit qui nostrum totam veritatis doloremque laborum officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nostrum voluptate, perferendis amet hic totam perspiciatis excepturi. Nam earum, neque, in nihil magni aliquid id, iste deserunt tempore corporis eaque?</p>
</body>
</html> q
<q> phần tử đặt dấu ngoặc kép xung quanh một câu trích dẫn ngắn. Đây là một phần tử nội dòng, giống như hoặc , nhưng dành cho dấu ngoặc kép. Nếu trích dẫn của bạn kéo dài nhiều dòng, bạn nên sử dụng để thay thế.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<p>
The mission statement for the Make-A-Wish Foundation is <q>Together, we create life-changing wishes for children with critical illnesses.</q>
</p>
</body>
</html> abbr
Đôi khi bạn muốn xác định một từ viết tắt mà không cần phải đưa nó vào trong quá trình viết của mình. Bạn làm điều đó với <abbr> nhãn. Nó cũng là một phần tử nội tuyến, tương tự như , hoặc . Xác định từ viết tắt của bạn bên trong thuộc tính title trong thẻ của bạn.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<abbr title="COrona VIrus Disease 2019">COVID-19</abbr> was first discovered in December 2019 in Wuhan, China.
</body>
</html> địa chỉ
Phần tử địa chỉ xác định thông tin liên hệ của người tạo, một người hoặc doanh nghiệp và bất kỳ thông tin nào sau đây:địa chỉ thực, địa chỉ email, liên kết mạng xã hội, số điện thoại, trang web cá nhân và các mục giống liên hệ khác.
Văn bản in nghiêng và có dấu ngắt dòng trước và sau khối địa chỉ.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<address>
Written for Career Karma by Christina Kopecky<br />
Other Articles: <a href="https://careerkarma.com/blog/author/christina-kopecky/">Career Karma Author Page</a><br/>
Twitter: <a href="https://twitter.com/cmvnk" target="_blank" rel="noopener noreferrer">@cmvnk</a><br />
Github: <a href="https://github.com/ckopecky" target="_blank" rel="noopener noreferrer">ckopecky</a><br />
</address>
</body>
</html> bdo
Khi làm việc với các ngôn ngữ đọc từ phải sang trái, bạn sẽ dễ dàng sử dụng thẻ hiển thị văn bản từ phải sang trái hơn là cố gắng tự làm điều đó. Sử dụng <bdo> phần tử để hiển thị văn bản bằng ghi đè hai hướng. Nó có một thuộc tính dir sẽ chỉ ra hướng. Giá trị mặc định là "ltr". “Rtl” sẽ hiển thị văn bản từ phải sang trái.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<bdo dir="rtl">This renders Right-to-Left</bdo><br />
<bdo>This renders Left-to-Right</bdo>
</body>
</html> trích dẫn
Phần tử trích dẫn là phần tử trích dẫn cuối cùng mà chúng ta nói đến ngày hôm nay. Thẻ cite xác định tiêu đề của một tác phẩm sáng tạo. Nó là một phần tử nội dòng và hiển thị ở dạng nghiêng.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>
<cite>Mona Lisa</cite>, Leonardo da Vinci <br />
<sup>The Louvre (since 1797)</sup>
</p>
</body>
</html> Kết luận
Hãy xem lại. Hôm nay chúng ta đã xem xét:
-
<blockquote>- được sử dụng cho các trích dẫn dài hơn -
<q>- được sử dụng cho các trích dẫn ngắn hơn không dài hơn một dòng -
<abbr>- được sử dụng để xác định các từ viết tắt trong văn bản của chúng tôi -
<address>- được sử dụng để xác định thông tin liên hệ cho người sáng tạo hoặc tác giả -
<bdo>- được sử dụng để kiểm soát xem văn bản được hiển thị từ trái sang phải hay từ phải sang trái -
<cite>- được sử dụng để xác định tiêu đề của một cái gì đó
Có nhiều phần tử trích dẫn và mỗi phần tử có trường hợp sử dụng của chúng. Đảm bảo sửa đúng (các) cái phù hợp cho dự án của bạn!