Các thẻ liên quan đến hiển thị mã, trích dẫn và danh sách

Bài viết này giải thích các thẻ liên quan đến hiển thị mã, trích dẫn và danh sách.

Điều này giải thích cách viết mã nguồn, trích dẫn, chú thích và danh sách trong HTML.

YouTube Video

Thẻ liên quan đến hiển thị mã

Thẻ <code>

1Inline code example: <code>let x = 10;</code>

• Thẻ <code> là một phần tử nội tuyến được sử dụng để chỉ ra mã hoặc đoạn trích chương trình trong tài liệu HTML.
• Mặc định, nó được hiển thị bằng font chữ đơn cách, giúp cải thiện khả năng đọc mã.

Thẻ <pre>

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>

• Thẻ <pre> được sử dụng để hiển thị văn bản theo định dạng gốc trong một tài liệu HTML. Sử dụng thẻ này giữ lại khoảng trắng và ngắt dòng trong văn bản, duy trì định dạng gốc của nó. Nó chủ yếu được sử dụng để hiển thị nội dung cần duy trì định dạng, chẳng hạn như mã chương trình, thơ, hoặc nghệ thuật văn bản.

    function hello() {
        console.log("Hello, world!");
    }
    

1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>

• Trong thẻ <pre>, các khoảng trắng được giữ nguyên, vì vậy nếu có khoảng trắng trước thẻ đóng, một dòng trống sẽ xuất hiện ở cuối như trong ví dụ này.

Thẻ <samp>

1Sample system output: <samp>Error: Invalid input.</samp>

• Thẻ <samp> là thẻ HTML được sử dụng để đại diện cho đầu ra của một chương trình máy tính. Nó được sử dụng để chỉ ra đầu ra hoặc thông điệp từ một chương trình hoặc hệ thống.

Thẻ <kbd>

1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>

• Thẻ <kbd> là thẻ HTML được sử dụng để đại diện cho đầu vào của người dùng. Nó được sử dụng để chỉ ra đầu vào bàn phím hoặc đầu vào lệnh, chẳng hạn như các phím tắt.

Thẻ <var>

1Variable example: <var>x</var> = 5;

• Thẻ <var> được sử dụng để đại diện cho các biến trong một chương trình hoặc phương trình. Nó được sử dụng để nhấn mạnh tên biến hoặc các biến trong công thức toán học.

Thẻ được sử dụng cho trích dẫn, v.v.

Thẻ <blockquote>

1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>

• Thẻ <blockquote> được sử dụng để đại diện cho các trích dẫn dài hoặc văn bản từ nguồn khác, và thường được hiển thị ở mức khối.

Thẻ <q>

1This is a short quote: <q>Short quote example.</q>

• Thẻ <q> là một phần tử nội tuyến được sử dụng để đại diện cho các trích dẫn ngắn. Thẻ này có thể được sử dụng để đánh dấu một phần văn bản hoặc một câu là một trích dẫn. Văn bản được bao quanh trong thẻ <q> thường được hiển thị với dấu ngoặc kép. Thẻ <q> cũng có thể được lồng vào nhau. Trong trường hợp này, các loại dấu ngoặc kép khác nhau thường được sử dụng cho trích dẫn bên trong.

Thẻ <cite>

1Reference to a book: <cite>The Great Gatsby</cite>

• Thẻ <cite> là một phần tử nội tuyến được sử dụng để chỉ ra nguồn của một trích dẫn hoặc tham khảo. Nó chủ yếu được sử dụng để chỉ ra nguồn gốc của một tác phẩm, chẳng hạn như tiêu đề của các tác phẩm, bài báo, tài liệu, trang web hoặc sách.

Thẻ <address>

1<address>123 Main Street, Springfield, USA</address>

• Thẻ <address> được sử dụng để đại diện cho thông tin liên hệ liên quan đến tác giả hoặc chủ sở hữu của một tài liệu hoặc phần. Thẻ này thường chứa địa chỉ email, số điện thoại, địa chỉ thực và thông tin tương tự.

Thẻ <time>

1<time datetime="2024-12-04">December 4, 2024</time>

• Thẻ <time> được sử dụng để biểu thị một thời điểm cụ thể, một khoảng thời gian hoặc một khoảng thời gian lặp lại. Thẻ này có thể bao gồm ngày và giờ để cung cấp ý nghĩa ngữ nghĩa cho tài liệu.

Thẻ <data>

1<data value="2024">Current Year</data>

• Thẻ <data> được sử dụng để liên kết nội dung dễ đọc đối với con người với các giá trị có thể hiểu được cho máy móc. Thẻ này hữu ích để đánh dấu dữ liệu theo cách có thể dễ dàng xử lý bởi các chương trình.

Thẻ <details> và <summary>

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>

• Thẻ <details> tạo một tiện ích có thể thu gọn và mở rộng được. Bằng cách sử dụng với thẻ <summary>, bạn có thể thiết lập một phần có thể nhấp để hiển thị thêm chi tiết, thường được sử dụng cho các mục hiển thị tương tác như 'Đọc thêm'.

Các thẻ được sử dụng để hiển thị danh sách

Thẻ <ul>

1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>

• Đây là một thẻ được sử dụng để tạo danh sách không có thứ tự. Mỗi mục trong danh sách được định nghĩa bằng thẻ <li>. Theo mặc định, một dấu chấm đen được hiển thị trước mỗi mục trong danh sách.

Thẻ <ol>

1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>

• Thẻ này được sử dụng để tạo danh sách có thứ tự. Mỗi mục trong danh sách được định nghĩa bằng thẻ <li>. Theo mặc định, các con số được hiển thị để chỉ ra thứ tự của các mục.

Thẻ <dl>

1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>

• Thẻ này được sử dụng để tạo danh sách các cặp bao gồm thuật ngữ và định nghĩa, hoặc tên và chi tiết. Các mục trong danh sách được định nghĩa bằng thẻ <dt> và <dd>. Thuật ngữ hoặc tên được viết trong thẻ <dt>, và định nghĩa hoặc giải thích được viết trong thẻ <dd>.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video