KHÓA HỌC HTML – BÀI 7 – TRÍCH DẪN – MÃ CODE – GHI CHÚ

HTML Quotation and Citation Elements

Tên thẻ	Mô tả
<abbr>	Xác định 1 từ viết tắt.
<address>	Xác định thông tin liên hệ của tác giả bài viết
<bdo>	Định chiều của văn bản?
<blockquote>	Xác định 1 đoạn văn được trích dẫn từ 1 trang khác
<cite>	Xác định tiêu đề công việc
<q>	Xác định 1 đoạn trích dẫn ngắn

Trích dẫn

Here is a quote from WWF's website:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Thẻ <q> dùng cho trích dẫn ngắn

Trình duyệt thường thêm dấu nháy đôi bao quanh thẻ <q>

Ví dụ:

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

Thẻ <blockquote> dùng trích dẫn

Thẻ <blockquote> dùng để trích dẫn từ nguồn trang khác

Trình duyệt thường thụt dòng cho đoạn văn bao quanh bởi thẻ <blockquote>

Ví dụ:

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.</blockquote>

Thẻ <abbr> dùng chú thích các từ viết tắt

Phần chú thích này sẽ không hiển thị ra ngoài trình duyệt, chỉ có các công cụ tìm kiếm thấy.

Ví dụ:

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

Thẻ <address> dùng thêm thông tin liên hệ

Thẻ <address> dùng xác định thông tin tác giả của 1 bài viết.

Nội dung trong thẻ <address> thường in nghiêng. Hầu hết trình duyệt sẽ thêm đường gạch trước và sau nội dung này.

Ví dụ:

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA</address>

Thẻ <cite> dùng cho tiêu đề Công Việc

Trình duyệt thường hiển thị in nghiêng cho thẻ này.

Ví dụ:

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

Thẻ <bdo> đảo chiều text

Chỉ có trình duyệt hiểu điều này??

Ví dụ:

<bdo dir="rtl">This text will be written from right to left.</bdo>

Các thẻ hiển thị CODE máy tính

Thẻ	Mô tả
<code>	Xác định 1 đoạn mã lập trình
<kbd>	Xác định dữ liệu tập từ bàn phím.
<samp>	Xác định dữ liệu xuất ra màn hình.
<var>	Xác định 1 biến số
<pre>	Xác định 1 đoạn văn định dạng sẵn

Mã máy tính

<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;</code>

Định dạng đoạn mã máy tính

HTML thường dùng các ký tự có kích cỡ và khoảng trắng khác nhau.

Trong khi các thẻ <kbd>, <samp>, và <code> dùng kích cỡ và khoảng trắng cố định.

Thẻ <kbd> dùng cho dữ liệu nhập từ bàn phím

Ví dụ:

<kbd>File | Open...</kbd>

Kết quả:

File | Open...

---

Thẻ <samp> dùng cho dữ liệu xuất ra màn hình

Ví dụ:

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

Kết quả:

demo.example.com login: Apr 12 09:10:17 Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189

Thẻ <code> dùng hiển thị CODE

Ví dụ:

<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>

Kết quả:

var x = 5;

var y = 6; 

document.getElementById("demo").innerHTML = x + y;

Để thẻ <code> giữ lại các ký tự khoảng trắng và xuống hàng ta bao bên ngoài bằng thẻ <pre>

Ví dụ:

<pre>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
</pre>

Kết quả:

var x = 5; 

var y = 6; 

document.getElementById("demo").innerHTML = x + y;

Thẻ <var> dùng cho biến số

Ví dụ:

Einstein wrote: <var>E</var> = <var>m</var><var>c</var>².

Kết quả:

Einstein wrote: E = mc2.

Thẻ chú thích

Cú pháp:

<!-- Write your comments here -->

Dùng để ghi chú, trình duyệt sẽ bỏ qua phần nội dung trong thẻ này.

Ví dụ:

<!-- This is a comment -->
<p>Đây là 1 đoạn văn.</p>
<!-- Remember to add more information here -->

Ta cũng có thể dùng phần chú thích để tìm lỗi của HTML.

Ví dụ:

<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">

Thẻ chú thích có điều kiện

Ví dụ:

<!--[if IE 9]>
    .... some HTML here ....
<![endif]-->

Thẻ chú thích có điều kiện này sẽ thực thi vài thẻ HTML nếu trình duyệt là IE9.

Tác giả: #drM

Nguồn: Sưu Tầm