Cấu trúc danh sách, bảng và đa phương tiện

1. Tạo danh sách

Có hai loại danh sách chính trong HTML:

• Danh sách không có thứ tự (ul): Dùng để liệt kê các mục mà thứ tự không quan trọng.
• Danh sách có thứ tự (ol): Dùng khi thứ tự các mục là quan trọng.

Cú pháp và ví dụ danh sách không có thứ tự (ul)

Thuộc tính list-style-type cho phép thay đổi các kiểu bullet như:

• disc (mặc định) – Dấu chấm đen
• circle – Vòng tròn rỗng
• square – Hình vuông

<ul style="list-style-type: circle;">
    <li>Mục 1</li>
    <li>Mục 2</li>
</ul>

<ul style="list-style-type: square;">
    <li>Mục 3</li>
    <li>Mục 4</li>
</ul>
                

Cú pháp và ví dụ danh sách có thứ tự (ol)

Danh sách có thứ tự hỗ trợ nhiều kiểu đánh số thông qua thuộc tính type:

• 1 – Số thứ tự
• A – Chữ cái in hoa
• a – Chữ cái in thường
• I – Số La Mã in hoa
• i – Số La Mã in thường

<ol type="I">
    <li>Mục I</li>
    <li>Mục II</li>
</ol>

<ol type="a">
    <li>Mục a</li>
    <li>Mục b</li>
</ol>
                

2. Tạo bảng

Cú pháp bảng cơ bản

Bảng cơ bản bao gồm các thẻ:

• <table>: Khởi tạo bảng.
• <tr>: Tạo hàng.
• <th>: Tạo tiêu đề cột.
• <td>: Tạo ô dữ liệu.

<table>
    <tr>
        <th>Tên</th>
        <th>Tuổi</th>
    </tr>
    <tr>
        <td>An</td>
        <td>20</td>
    </tr>
</table>
                

Thuộc tính border, border-collapse, và width

border: Xác định độ dày và kiểu của đường viền bảng.
border-collapse: Hợp nhất các đường viền liền kề thành một.
width: Xác định chiều rộng của bảng.

<table border="1" style="border-collapse: collapse; width: 100%;">
    <tr>
        <th>Tên</th>
        <th>Tuổi</th>
    </tr>
    <tr>
        <td>An</td>
        <td>20</td>
    </tr>
</table>
                

Thuộc tính rowspan và colspan

Sử dụng rowspan để gộp nhiều hàng và colspan để gộp nhiều cột.

Bảng điểm theo môn của học sinh:

<table border="1" style="border-collapse: collapse;">
    <tr>
        <th rowspan="2">Học sinh</th>
        <th colspan="2">Điểm</th>
    </tr>
    <tr>
        <th>Toán</th>
        <th>Văn</th>
    </tr>
    <tr>
        <td>An</td>
        <td>8</td>
        <td>7</td>
    </tr>
    <tr>
        <td>Bình</td>
        <td>9</td>
        <td>6</td>
    </tr>
</table>
                

3. Tạo liên kết

Thẻ <a> dùng để tạo liên kết. Các thuộc tính chính bao gồm:

• href: Địa chỉ liên kết (có thể là tuyệt đối hoặc tương đối).
• target: Quy định cách mở liên kết (ví dụ: _blank mở trong tab mới).

Cú pháp tạo liên kết

<a href="https://nhpoj.net" target="_blank">
    Truy cập nhpoj.net
</a>

<a href="#section1">
    Đến phần cuối trang
</a>

<div id="section1">
    Đây là phần cuối trang.
</div>
        

4. Đa phương tiện

Ảnh với thuộc tính alt

Thuộc tính alt cung cấp văn bản thay thế cho ảnh khi ảnh không tải được.

<img src="https://nhpoj.net/static/img/logo.png"
         alt="Logo của nhpoj.net">
                

Video với nhiều thẻ source

Sử dụng nhiều thẻ source để hỗ trợ nhiều định dạng video khác nhau.

<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    Trình duyệt không hỗ trợ video.
</video>