Danh sách

bookmark_border Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Danh sách phổ biến hơn bạn nghĩ. Nếu bạn từng tham gia một lớp học lập trình, thì dự án đầu tiên có thể là tạo danh sách mua sắm hoặc danh sách việc cần làm. Đó là các danh sách. Các bài kiểm tra trắc nghiệm thường là danh sách câu hỏi được đánh số: nhiều câu trả lời có thể có cho mỗi câu hỏi là danh sách lồng nhau.

HTML cung cấp cho chúng ta một số cách để đánh dấu danh sách. Có danh sách có thứ tự (<ol>), danh sách không có thứ tự (<ul>) và danh sách nội dung mô tả (<dl>). Các mục trong danh sách (<li>) được lồng trong danh sách có thứ tự và danh sách không có thứ tự. Trong danh sách nội dung mô tả, bạn sẽ thấy các thuật ngữ mô tả (<dt>) và thông tin mô tả chi tiết <dd>.. Chúng tôi sẽ trình bày tất cả những thông tin này tại đây.

Trong biểu mẫu HTML, danh sách các phần tử <option> tạo nên nội dung của <datalist> <select> và <optgroup> trong <select>. Những điều này được thảo luận trong biểu mẫu HTML.

Trong trình đơn và danh sách không có thứ tự, các mục trong danh sách thường được hiển thị bằng dấu đầu dòng. Trong danh sách có thứ tự, các mục này thường đứng trước một bộ đếm tăng dần, chẳng hạn như số hoặc chữ cái. Bạn có thể kiểm soát hoặc đảo ngược thứ tự đánh dấu đầu dòng và đánh số bằng HTML hoặc CSS, hoặc cả hai.

Theo mặc định, các mục trong danh sách có thứ tự và không có thứ tự sẽ có tiền tố là số hoặc dấu đầu dòng. Nhưng ngay cả khi không muốn danh sách trông giống như danh sách, bạn vẫn muốn có một danh sách các mục, chẳng hạn như trong thanh điều hướng, danh sách việc cần làm có hộp đánh dấu thay vì dấu đầu dòng hoặc câu hỏi đúng và sai trong bài kiểm tra trắc nghiệm. Đối với tất cả những danh sách không có dấu đầu dòng này, bạn nên sử dụng các phần tử danh sách HTML.

Danh sách không theo thứ tự

Phần tử <ul> là phần tử mẹ cho danh sách các mục không theo thứ tự. Phần tử con duy nhất của <ul> là một hoặc nhiều phần tử <li> trong danh sách. Hãy tạo một danh sách máy. Chúng ta sử dụng danh sách không có thứ tự vì thứ tự không quan trọng (đừng nói với họ điều đó):

Theo mặc định, mỗi mục trong danh sách không có thứ tự đều có dấu đầu dòng ở phía trước. Danh sách không có thứ tự không có thuộc tính dành riêng cho phần tử. Bạn cần đóng danh sách bằng </ul>.

Danh sách theo thứ tự

Phần tử <ol> là phần tử mẹ cho danh sách các mục được sắp xếp theo thứ tự. Phần tử con duy nhất của <ol> là một hoặc nhiều phần tử <li> hoặc các mục trong danh sách. Tuy nhiên, "dấu đầu dòng" trong trường hợp này là số thuộc nhiều loại. Bạn có thể xác định loại này trong CSS bằng thuộc tính list-style-type hoặc bằng thuộc tính type.

<ol> có 3 thuộc tính dành riêng cho phần tử: type, reversed và start.

Thuộc tính được liệt kê type đặt loại đánh số. Có 5 giá trị hợp lệ cho type, giá trị mặc định là 1 cho các số, nhưng bạn cũng có thể dùng a, A, i hoặc I cho chữ cái viết thường và viết hoa hoặc chữ số La Mã. Thuộc tính list-style-type cung cấp nhiều giá trị hơn.

Mặc dù, như đã lưu ý trong codepen, thuộc tính list-style-type ghi đè giá trị của thuộc tính type, khi viết tài liệu mà loại số là quan trọng, chẳng hạn như với các tài liệu pháp lý, bạn cần phải thêm type.

Thuộc tính boolean reversed (nếu có) sẽ đảo ngược thứ tự của các số, từ số lớn nhất đến số nhỏ nhất. Thuộc tính start đặt giá trị bắt đầu. Giá trị mặc định là 1.

Tương tự như </ul>, bạn phải có </ol> đóng.

Chúng ta có thể lồng các danh sách, nhưng chúng phải được lồng trong một mục danh sách. Hãy nhớ rằng phần tử duy nhất có thể là phần tử con của <ul> hoặc <ol> là một hoặc nhiều phần tử <li>.

Mục trong danh sách

Chúng ta đã dùng phần tử <li> nhưng chưa giới thiệu chính thức. Phần tử <li> có thể là phần tử con trực tiếp của danh sách không có thứ tự (<ul>), danh sách có thứ tự (<ol>) hoặc trình đơn (<menu>). <li> phải được lồng dưới dạng phần tử con của một trong các phần tử này và không hợp lệ ở bất kỳ vị trí nào khác.

Quy cách không yêu cầu đóng một mục trong danh sách vì mục đó sẽ tự động đóng khi trình duyệt gặp thẻ mở <li> tiếp theo hoặc thẻ đóng danh sách bắt buộc: </ul>, </ol>, </menu>. Mặc dù quy cách này không yêu cầu và một số phương pháp hay nhất nội bộ của công ty cho thấy bạn không nên đóng các mục trong danh sách để tiết kiệm một số byte, nhưng bạn vẫn nên đóng thẻ <li>. Việc này giúp mã của bạn dễ đọc hơn và bạn sẽ cảm ơn chính mình trong tương lai. Việc đóng tất cả các phần tử sẽ dễ dàng hơn so với việc nhớ những thẻ cần đóng và những thẻ có thẻ đóng không bắt buộc.

Chỉ có một thuộc tính <li> dành riêng cho phần tử: value, một số nguyên. value chỉ hữu ích trên <li> khi <li> được lồng trong một danh sách có thứ tự và không có ý nghĩa đối với danh sách hoặc trình đơn không có thứ tự. Nếu có xung đột, tham số này sẽ ghi đè giá trị bắt đầu của <ol>.

value là số lượng mục trong danh sách theo thứ tự. Với các mục danh sách tiếp theo, hãy tiếp tục đánh số từ giá trị đã đặt, trừ phi mục đó cũng có một thuộc tính value được đặt. Giá trị không nhất thiết phải theo thứ tự; mặc dù nếu không theo thứ tự, thì phải có lý do chính đáng.

Khi bạn kết hợp reversed trên <ol> với các thuộc tính value trên các mục trong danh sách, trình duyệt sẽ đặt <li> đó thành giá trị được cung cấp, sau đó đếm lên cho các <li> đứng trước và đếm xuống cho các <li> đứng sau. Nếu mục thứ hai trong danh sách có một thuộc tính giá trị, bộ đếm sẽ được đặt lại tại mục thứ hai trong danh sách đó và giá trị tiếp theo sẽ giảm đi một.

Bạn cũng có thể kiểm soát tất cả những điều này bằng bộ đếm CSS để cung cấp nội dung được tạo cho phần tử giả ::marker. Nếu số chỉ mang tính trình bày, hãy sử dụng CSS. Nếu việc đánh số có ý nghĩa về mặt ngữ nghĩa hoặc có ý nghĩa theo cách khác, hãy sử dụng các thuộc tính này.

Cho đến nay, chúng ta đã xem xét các mục trong danh sách chỉ chứa các nút văn bản. Các mục trong danh sách có thể chứa tất cả nội dung luồng, tức là mọi phần tử có trong nội dung có thể được lồng dưới dạng phần tử con trực tiếp của <body>, bao gồm cả tiêu đề, từ đó phân chia nội dung.

Chúng tôi có một số danh sách không có thứ tự trong MLW. Giáo viên trong phần người hướng dẫn là một danh sách, cũng như các máy của học viên trong phần đánh giá. Đối tượng <ul> có hai <li>: một cho mỗi giáo viên. Trong mỗi <li>, chúng ta có một hình ảnh và một đoạn văn:

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

Phần bài đánh giá có 3 bài đánh giá, nên có 3 <li>. Mỗi phần chứa một hình ảnh, một trích dẫn dạng khối và một đoạn văn gồm 3 dòng có 2 dấu ngắt dòng.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it.</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Việc lồng danh sách trong danh sách cũng rất phổ biến. Mặc dù MLW không có danh sách lồng nhau, nhưng trang web này thì có. Trong mô-đun đầu tiên của loạt bài này, Tổng quan về HTML, phần tử chính có 2 phần phụ. Trong mục lục (một danh sách không có thứ tự), có một danh sách không có thứ tự lồng nhau chứa các đường liên kết đến 2 phần này:

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

Vì phần tử con duy nhất của <ul> là <li>, nên danh sách lồng nhau được tìm thấy trong <li>, không bao giờ trực tiếp trong <ol> hoặc <ul>.

Trong ví dụ cuối cùng này, có thể bạn đã nhận thấy role="list" được đưa vào <ul>. Mặc dù vai trò ngầm định của cả <ul> và <ol> đều là list, nhưng việc xoá giao diện danh sách bằng CSS, bao gồm cả việc đặt display: grid hoặc list-style-type: none có thể khiến VoiceOver (trình đọc màn hình iOS và MacOS) xoá ngữ nghĩa ngầm định trong Safari. Đây là tính năng chứ không phải lỗi. Nhìn chung, bạn không nên thêm thuộc tính vai trò khi sử dụng các phần tử ngữ nghĩa vì điều này là không cần thiết. Ngoài ra, bạn thường không cần thêm một số vào danh sách, trừ phi người dùng thực sự cần biết đó là danh sách, chẳng hạn như khi người dùng sẽ được lợi nếu biết có bao nhiêu mục trong danh sách.

Danh sách mô tả

Danh sách mô tả là một phần tử danh sách mô tả (<dl>) chứa một chuỗi (không hoặc nhiều hơn) thuật ngữ mô tả (<dt>) và thông tin mô tả (<dd>). Tên ban đầu của 3 phần tử này là "danh sách định nghĩa", "thuật ngữ định nghĩa" và "định nghĩa định nghĩa". Tên đã thay đổi trong tiêu chuẩn sống.

Tương tự như danh sách có thứ tự và danh sách không có thứ tự, các danh sách này có thể được lồng vào nhau. Không giống như danh sách có thứ tự và danh sách không có thứ tự, các đối tượng này được tạo thành từ các cặp khoá/giá trị. Tương tự như <ul> và <ol>, <dl> là vùng chứa gốc. Các phần tử <dt> và <dd> là phần tử con của <dl>.

Chúng ta có thể tạo danh sách các máy móc cùng với lịch sử hoạt động và nguyện vọng của chúng. Danh sách mô tả về học viên, được biểu thị bằng <dl>, bao gồm một nhóm các thuật ngữ được chỉ định bằng phần tử <dt>, cùng với nội dung mô tả cho từng thuật ngữ do các phần tử <dd> chỉ định. Trong trường hợp này, "terms" là tên học viên và phần mô tả là mục tiêu nghề nghiệp của từng học viên

Danh sách nội dung mô tả này không thực sự thuộc trang MLW. Danh sách nội dung mô tả không chỉ dành cho các thuật ngữ và định nghĩa, đó là lý do tại sao tên của các phần tử được đặt theo cách chung chung hơn.

Khi tạo danh sách các thuật ngữ và định nghĩa hoặc nội dung mô tả của các thuật ngữ đó, hoặc các danh sách tương tự gồm các cặp khoá-giá trị, các phần tử danh sách nội dung mô tả sẽ cung cấp ngữ nghĩa phù hợp. Vai trò ngầm định của <dt> là term, trong đó listitem là một vai trò được phép khác. Vai trò ngầm định của <dd> là definition và không được phép có vai trò nào khác. Không giống như <ul> và <ol>, <dl> không có vai trò ARIA ngầm. Điều này là hợp lý vì <dl> không phải lúc nào cũng là một danh sách. Nhưng khi đó, nó sẽ chấp nhận vai trò list và group.

Thông thường, bạn sẽ gặp phải danh sách mô tả có số lượng phần tử <dt> và <dd> bằng nhau. Tuy nhiên, danh sách mô tả không phải lúc nào cũng là các cặp từ và nội dung mô tả khớp nhau và bạn không bắt buộc phải sử dụng các cặp này; bạn có thể có nhiều nội dung mô tả cho một từ hoặc một nội dung mô tả cho nhiều từ, chẳng hạn như một từ trong từ điển có nhiều định nghĩa.

Mỗi <dt> có ít nhất một <dd> được liên kết và mỗi <dd> có ít nhất một <dt> được liên kết. Mặc dù có thể sử dụng adjacent sibling combinator hoặc :has() relational selector để nhắm đến số lượng biến của các phần tử này bằng CSS, nhưng nếu cần, bạn có thể đưa <div> vào làm phần tử con của <dl> và phần tử mẹ của một hoặc nhiều phần tử <dt> hoặc <dd> (hoặc cả hai) được cho phép. <dl> thực sự có thể có một số phần tử con khác: bạn được phép lồng <div>, <template> hoặc <script>. Không có phần tử nào trong danh sách nội dung mô tả có thuộc tính dành riêng cho phần tử.

Giờ bạn đã hiểu về đường liên kết và danh sách, hãy kết hợp hai thành phần này để tạo thanh điều hướng.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về danh sách.