3 loại danh sách HTML và cách sử dụng chúng

Maya Patel included in Programming Html Web Development Web Design

2023-12-31 1587 words 8 minutes

Contents

Bài học chính

danh sách có thứ tự, không có thứ tự và mô tả.

Danh sách có thứ tự là một thành phần phổ biến trong HTML có thể được sắp xếp bằng cách sử dụng các giá trị số hoặc phi số được gọi là “loại danh sách có thứ tự”. Ngoài ra, các danh sách này có thể được điều chỉnh thêm với sự trợ giúp của nhiều thuộc tính khác nhau, chẳng hạn như thuộc tính “loại” cho phép các tùy chọn định dạng được cá nhân hóa, trong khi thuộc tính “bắt đầu” và “đảo ngược” cho phép điều chỉnh vị trí và hướng của mục ban đầu của danh sách tương ứng.

Danh sách không có thứ tự cung cấp một phương tiện để tổ chức và trình bày thông tin một cách ngắn gọn, nhóm các mục được kết nối lỏng lẻo hoặc không có thứ tự quan trọng cụ thể lại với nhau. Bạn có thể tinh chỉnh giao diện của các danh sách này bằng cách sử dụng Cascading Style Sheets (CSS) để sửa đổi kiểu dấu đầu dòng của chúng, có thể bao gồm việc thay đổi kích thước, hình dạng, màu sắc và vị trí của nó trong mục danh sách. Tính năng này cho phép các nhà thiết kế và nhà phát triển điều chỉnh danh sách không có thứ tự để phù hợp với nhiều thiết kế trực quan khác nhau trong khi vẫn duy trì định dạng dễ đọc cho người dùng.

Danh sách HTML đóng vai trò là thành phần cấu trúc cơ bản cho bất kỳ loại thông tin tương quan nào trên trang web. Bất kể người ta đang xây dựng menu điều hướng, sắp xếp các sản phẩm theo ưu đãi đặc biệt hay nỗ lực trưng bày dữ liệu phức tạp ở định dạng dễ hiểu hơn, những danh sách này chứng tỏ là công cụ không thể thiếu để hoàn thành nhiệm vụ trước mắt.

Tồn tại ba loại danh sách HTML chính, phục vụ cho các vai trò kiến trúc đặc biệt trong thiết kế và phát triển web.

Danh sách được yêu cầu

Danh sách thứ tự HTML là một phương tiện hiệu quả để tổ chức một loạt các phần tử có liên quan với nhau theo một trình tự cụ thể. Để xây dựng một danh sách như vậy, việc sử dụng

 <!-- Ordered list -->
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

Mã này hiển thị chế độ xem sau:

Điều quan trọng cần lưu ý là theo mặc định, danh sách có thứ tự tuân theo một dãy số. Tuy nhiên, người ta có thể linh hoạt thay đổi cách sắp xếp này thông qua việc sử dụng thuộc tính “loại”. Thuộc tính này cấp cho người dùng quyền kiểm soát yếu tố nào quyết định tổ chức của danh sách. Có nhiều tùy chọn khác nhau để chọn phương thức đặt hàng, bao gồm các ký tự chữ cái (cả chữ hoa và chữ thường), giá trị số hoặc thậm chí chữ số La Mã ở dạng viết hoa hoặc viết thường.

 <!-- Ordered list -->
<ol type="a">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

Việc kết hợp thuộc tính “loại” trong thành phần danh sách có thứ tự ("") sẽ mang lại bản trình bày trực quan được sửa đổi như minh họa bên dưới:

“bắt đầu”, xác định số lượng mục sẽ được hiển thị ở đầu danh sách; và"đảo ngược", đảo ngược thứ tự của danh sách để nó được hiển thị từ mục cuối cùng trước tiên.

Thuộc tính start cho phép bắt đầu sắp xếp các phần tử từ bất kỳ vị trí nhất định nào bằng cách sử dụng một giá trị số nguyên. Như một minh họa, khi kết hợp start="3" bên trong phần tử mà không chỉ định một loại cụ thể, nó sẽ bắt đầu sắp xếp danh sách từ chữ số ba. Trong trường hợp người ta chỉ định type="a" hoặc type="I" , nó sẽ bắt đầu đặt hàng tương ứng từ’c’hoặc’I'.

 <!-- Ordered list -->
<ol type="I" start="3">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

Đoạn mã trên hiển thị chế độ xem sau:

Thuộc tính"đảo ngược"cho phép sắp xếp lại các thành phần trong danh sách bằng cách chuyển đổi giá trị Boolean của nó, với cài đặt mặc định là sai.

 <!-- Ordered list -->
<ol reversed="true">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

Mã được cung cấp, khi được thực thi, sẽ hiển thị một bảng trên trình duyệt web với các tính năng và nội dung cụ thể như được mô tả bên dưới:html Tiêu đề bảng

Danh sách không có thứ tự

Danh sách không có thứ tự đóng vai trò là phương tiện hiệu quả để tổ chức và trình bày một số mục được kết nối về mặt khái niệm nhưng không yêu cầu một trình tự hoặc thứ hạng cụ thể. Thông thường, các trình duyệt web sử dụng các dấu đầu dòng để biểu thị từng phần tử trong một bộ sưu tập như vậy.

Để tạo một bảng thông báo phi cấu trúc bao gồm một loạt các mục, yêu cầu sử dụng các phần tử HTML (để biểu thị vùng chứa) và (cho mỗi danh sách), tương ứng.

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

Mã này hiển thị chế độ xem sau:

Hình thức thông thường của danh sách không có thứ tự được biểu thị bằng hình tròn được gọi là “đĩa”. Về mặt lịch sử, người ta có thể sử dụng thuộc tính “loại” để xác định cách trình bày trực quan của một danh sách không có thứ tự. Thật không may, thuộc tính cụ thể này đã bị coi là lỗi thời và không còn được hỗ trợ. Thay vào đó, chúng tôi đặc biệt khuyến khích sử dụng “thuộc tính kiểu danh sách CSS” có thể áp dụng rộng rãi để đạt được các tùy chỉnh mong muốn đối với danh sách không có thứ tự.

 <style>
ul { list-style-type: square; }
 </style>

Đoạn mã nói trên sửa đổi cách trình bày trực quan của thông tin được cung cấp bằng cách tạo cấu trúc HTML chứa nhiều phần tử div, trong đó mỗi phần tử được gán các thuộc tính khác nhau và chứa nội dung cụ thể.

Thuộc tính CSS list-style-type cho phép sử dụng nhiều kiểu dấu đầu dòng khác nhau, chẳng hạn như hình tròn, hình ảnh tùy chỉnh, biểu tượng và ký hiệu. Bằng cách sử dụng CSS để thay đổi cách sắp xếp các mục trong danh sách, người ta có thể tận dụng danh sách không có thứ tự để tạo các menu điều hướng.

Danh sách lồng nhau

Về bản chất, một danh sách lồng nhau bao gồm một phần tử từ một danh sách rộng hơn được bao gồm trong đó. Việc hình thành cấu trúc như vậy có thể đạt được thông qua sự kết hợp hài hòa của cả danh sách có thứ tự và không có thứ tự. Những cấu hình như vậy có khả năng mô tả các hệ thống phân cấp phức tạp với độ tinh vi cao hơn.

 <H3>Chicken Pasta Insturctions</H3>
<ol>
   <li>Boil pasta.</li>
   <li>
   Season chicken breast.
    <ul>
       <li>salt and pepper</li>
       <li>paprika</li>
       <li>garlic powder</li>
       <li>Italian seasoning</li>
     </ul>
  </li>
  <li>Heat olive oil in pot over medium-high heat.</li>
   <li>Add chicken breast to pan and cook for 5 minutes.</li>
   <li>Add heavy cream and parmesan cheese to empty pot.</li>
   <li>Add pasta and slice chicken to cream sauce.</li>
</ol>

Mã này hiển thị chế độ xem sau:

Danh sách mô tả

Thẻ HTML được sử dụng để xác định danh sách mô tả, bao gồm các thuật ngữ mô tả ( ) và các chi tiết tương ứng ( ). Định dạng có cấu trúc này cung cấp một tổ chức rõ ràng để trình bày thông tin theo cách phân cấp, nâng cao khả năng đọc và hiểu.

 <h3>Popular Laptops</h3>
<dl>
  <dt>MacBook Pro</dt>
   <dd>
     Provides up to 22 hours of battery life,
     has an advanced camera, and a magic keyboard with touch ID.
   </dd>

  <dt>MSI GS76 Stealth</dt>
   <dd>
    A powerful gaming laptop with supercharged graphics and customized keys.
   </dd>
</dl>

Đoạn mã trên hiển thị chế độ xem sau:

Sắp xếp nội dung của bạn bằng danh sách HTML phù hợp

Việc lựa chọn danh sách HTML được sử dụng trong nỗ lực phát triển web phải dựa trên thông tin dự định truyền tải tới người dùng. Bằng cách minh họa, khi tìm cách tạo ra một bài trình bày nối tiếp, chẳng hạn như các giai đoạn liên quan đến việc chuẩn bị một món ăn hoặc hoàn thành công việc nhà, một danh sách có thứ tự sẽ là thích hợp nhất.

Khi xem xét việc tổ chức nội dung không cần quy trình hoặc trình tự từng bước, chẳng hạn như dữ liệu thực tế hoặc định nghĩa, việc sử dụng danh sách phi cấu trúc có thể là một giải pháp thay thế thực tế hơn. Ngoài ra, trong trường hợp người ta tìm cách trình bày bản tóm tắt các thuật ngữ và giải thích tương ứng hoặc tổng hợp các truy vấn và phản hồi, việc sử dụng định dạng danh sách định nghĩa sẽ mang lại kết quả tối ưu.