Danh sách

Đây là 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, dự án đầu tiên có thể là tạo một danh sách mua sắm hoặc danh sách việc cần làm. Đó là những danh sách. Bài kiểm tra trắc nghiệm thường được đánh số là các câu hỏi: nhiều câu trả lời có thể trả lời cho mỗi câu hỏi là các danh sách lồng nhau.

HTML cung cấp cho chúng tôi một số cách khác nhau để đánh dấu danh sách. Có danh sách theo thứ tự (<ol>), danh sách không theo thứ tự (<ul>) và danh sách 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 theo thứ tự. Trong danh sách nội dung mô tả, bạn sẽ thấy các cụm từ mô tả (<dt>) và nội dung mô tả chi tiết <dd>. Chúng tôi sẽ đề cập đến tất cả các câu hỏi đó tại đây.

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

Trong các trình đơn và danh sách không theo thứ tự, các mục danh sách thường được hiển thị bằng cách sử dụng dấu đầu dòng. Trong các danh sách được sắp xếp theo thứ tự, các hành động này thường đứng sau bằng bộ đếm tăng dần, chẳng hạn như một số hoặc chữ cái. Có thể kiểm soát hoặc đảo ngược các dấu đầu dòng và thứ tự đá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 theo thứ tự được thêm bằng số hoặc dấu đầu dòng. Nhưng ngay cả khi bạn 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 thi trắc nghiệm. Bạn nên sử dụng các phần tử danh sách HTML đối với tất cả các danh sách không có dấu đầu dòng.

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 danh sách <li> mục. Hãy tạo một danh sách các máy. Chúng ta sử dụng danh sách không theo 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 danh sách không theo thứ tự sẽ được thêm dấu đầu dòng ở đầu. Danh sách không theo thứ tự không có thuộc tính phần tử cụ thể nào. 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 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> hay mục trong danh sách. "Dấu đầu dòng" nhưng trong trường hợp này, lại là các con số thuộc vô số 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 thông qua thuộc tính type.

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

Thuộc tính type được liệt kê giúp thiết lập kiểu đánh số. Có 5 giá trị hợp lệ cho type, giá trị mặc định là 1 cho số, nhưng bạn cũng có thể sử dụng a, A, i hoặc I cho các chữ cái viết hoa 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 mã lập trình, thuộc tính list-style-type ghi đè giá trị của thuộc tính type khi viết tài liệu có loại số là quan trọng, ví dụ như trong các tài liệu pháp lý, bạn cần bao gồm type.

Thuộc tính boolean reversed (nếu có) sẽ đảo ngược thứ tự của các số, đi 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 nhập </ol> đóng.

Chúng ta có thể lồng các danh sách, nhưng các danh sách này phải được lồng vào 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 đã sử dụng phần tử <li> nhưng chưa ra mắt chính thức phần tử này. Phần tử <li> có thể là phần tử con trực tiếp của một phần tử không theo thứ tự danh sách (<ul>), danh sách có thứ tự (<ol>) hoặc trình đơn (<menu>). <li> phải được lồng làm phần tử con của một trong các phần tử sau và không hợp lệ ở bất kỳ nơi nào khác.

Quy cách không yêu cầu bạn phải đóng một mục trong danh sách vì mục này sẽ ngầm đóng khi trình duyệt gặp <li> tiếp theo thẻ mở hoặc thẻ đóng danh sách bắt buộc: </ul>, </ol>, </menu>. Mặc dù thông số kỹ thuật không yêu cầu, và một số công ty nội bộ các phương pháp hay nhất cho thấy bạn không nên đóng các mục danh sách để tiết kiệm một số byte, hãy đóng thẻ <li>. Giúp mã của bạn dễ đọc hơn và bản thân tương lai của bạn sẽ cảm ơn bạn. Bạn sẽ dễ dàng đóng tất cả các phần tử hơn là chỉ 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 đó 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 theo thứ tự. Tham số này sẽ ghi đè giá trị bắt đầu của <ol> nếu có xung đột.

value là số mục danh sách trong một danh sách có thứ tự. Với các mục danh sách tiếp theo, hãy tiếp tục đánh số từ trừ phi mục đó cũng có tập hợp thuộc tính value. Giá trị không nhất thiết phải theo thứ tự; nếu không theo thứ tự, nên 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 được cung cấp, sau đó đếm ngược cho các <li> đứng trước và đếm ngược cho các giá trị đứng sau. Nếu mục danh sách thứ hai có thuộc tính giá trị, bộ đếm sẽ được đặt lại tại mục danh sách thứ hai đó và giá trị tiếp theo sẽ giảm đi 1.

Bạn cũng có thể kiểm soát tất cả những hoạt động 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ố này chỉ mang tính trình bày, hãy sử dụng CSS. Nếu việc đánh số có ý nghĩa quan trọng về mặt ngữ nghĩa hoặc có ý nghĩa khác, hãy sử dụng các thuộc tính này.

Cho đến thời điểm này, chúng ta đã xem xét các mục danh sách chỉ chứa các nút văn bản. Mục danh sách có thể chứa tất cả nội dung luồng, nghĩa là bất kỳ là phần tử tìm thấy trong phần nội dung mà có thể được lồng làm phần tử con trực tiếp của <body>, bao gồm cả tiêu đề, theo đó phân đoạn nội dung.

Chúng tôi có một số danh sách không theo thứ tự trong MLW. Các giáo viên trong phần người hướng dẫn là một danh sách, cũng như máy học của học viên trong các bài đánh giá . Người hướng dẫn <ul> có hai <li>: một trang 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:

<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á, tức là 3 <li>. Mỗi tệp chứa một hình ảnh, một khối trích dẫn và một đoạn ba dòng với hai 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. The Russians had nothing to do with it. This has
    <span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Việc lồng các 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 ghép nào, nhưng trang web này có. Trong chương đầu tiên của loạt video này, Tổng quan về HTML, phần các phần tử chính có hai phần phụ. Trong mục lục, là một danh sách không theo thứ tự, có một phần danh sách không theo thứ tự có liên kết đến hai phần sau:

<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 sẽ được tìm thấy trong <li> chứ không bao giờ được lồng trực tiếp trong <ol> hoặc <ul>.

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

Danh sách nội dung mô tả

Danh sách nội dung mô tả là phần tử danh sách nội dung mô tả (<dl>) có chứa một loạt (không hoặc nhiều hơn) cụm từ mô tả (<dt>) và chi tiết mô tả (<dd>). Tên gốc của ba thành phần này là "danh sách định nghĩa", "thuật ngữ định nghĩa", và "định nghĩa". Tên gọi đã thay đổi theo mức sống.

Tương tự như danh sách có thứ tự và không theo 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à không có thứ tự, danh sách 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 mẹ. Các phần tử <dt> và <dd> là phần tử con của <dl>.

Chúng ta có thể tạo một danh sách máy móc dựa trên quá trình làm việc và kỳ vọng của chúng. Danh sách nội dung mô tả học viên, được biểu thị bằng <dl>, bao gồm một nhóm điều khoản—trong trường hợp này là "điều khoản" là tên của các học viên — được chỉ định bằng phần tử <dt>, cùng với thông tin mô tả đối với mỗi học kỳ (trong trường hợp này là mục tiêu nghề nghiệp của từng sinh viên) được xác định bằng các phần tử <dd>.

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

Khi bạn tạo danh sách các thuật ngữ và định nghĩa/nội dung mô tả của các thuật ngữ đó hoặc danh sách các cặp khoá-giá trị tương tự nhau, phần mô tả sẽ liệt kê các phần tử cung cấp ngữ nghĩa thích hợp. Vai trò ngầm ẩn của <dt> là term, trong đó listitem là một vai trò được phép khác. Vai trò ngầm ẩn 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 ẩn. Điều này cũng hợp lý vì <dl> không phải lúc nào cũng là danh sách. Nhưng khi được chấp nhận, vai trò list và group sẽ được chấp nhận.

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

Mỗi <dt> có ít nhất một <dd> liên kết, và mỗi <dd> có ít nhất một <dt> liên kết. Mặc dù có thể sử dụng bộ kết hợp đồng cấp liền kề hoặc quan hệ :has() bộ chọn để nhắm mục tiêu số lượng biến số của các phần tử này với CSS. Nếu cần, bạn có thể thêm <div> là phần tử con của <dl> và là phần tử mẹ của một hoặc nhiều phần tử <dt> hay <dd> (hoặc cả hai). <dl> thực sự có thể có một vài con khác: cho 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 riêng.

Giờ bạn đã hiểu về đường liên kết và danh sách, hãy kết hợp chúng lại với nhau để tạo thao tác.

Kiểm tra kiến thức

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