Danh sách thường 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à những danh sách. 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à các danh sách lồng ghép.
HTML cung cấp cho chúng ta một số cách khác nhau để đá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 mô tả (<dl>). Các mục trong danh sách (<li>) được lồng vào 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 chi tiết về nội dung mô tả <dd>.. Chúng tôi sẽ trình bày tất cả các nội dung 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 chủ đề này được thảo luận trong biểu mẫu HTML.
Trong trình đơn và danh sách không theo 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ự, thường đứng sau bộ đếm tăng dần như một số hoặc chữ cái. Bạn có thể kiểm soát hoặc đảo ngược thứ tự đánh số và dấu đầu dòng 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ự sẽ được thêm số hoặc dấu đầu dòng ở đầu. Nhưng ngay cả khi không muốn các danh sách dưới dạng 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ó các hộp đánh dấu thay vì dấu đầu dòng hoặc các câu hỏi đúng và sai trong bài kiểm tra trắc nghiệm. Đối với tất cả các danh sách này không có dấu đầu dòng, bạn nên sử dụng phần tử danh sách HTML.
Danh sách không theo thứ tự
Phần tử <ul> là phần tử mẹ của các 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ử mục trong danh sách <li>. Hãy tạo một danh sách máy. Chúng tôi 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ọ rằng):
Theo mặc định, mỗi mục trong danh sách không có thứ tự sẽ được thêm vào trước một dấu đầu dòng. Danh sách không có thứ tự không có thuộc tính riêng cho từng 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ặt hàng 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.
Tuy nhiên, "dấu đầu dòng" trong trường hợp này là số trong 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ó ba thuộc tính cụ thể theo phần tử: type, reversed và start.
Thuộc tính type liệt kê sẽ quy định kiểu đá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ể sử dụng a, A, i hoặc I cho 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 tài liệu mã, thuộc tính list-style-type ghi đè giá trị của thuộc tính type, nhưng khi viết tài liệu có kiểu số là quan trọng, chẳng hạn như trong tài liệu pháp lý, bạn cần thêm type vào.
Thuộc tính boolean reversed, nếu được đưa vào, sẽ đảo ngược thứ tự của các số, từ số lớn nhất đến số thấp 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>, </ol> đóng là bắt buộc.
Chúng ta có thể lồng các danh sách, nhưng phải lồng các danh sách này vào một mục trong 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 chính thức giới thiệu phần tử này. 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 làm phần tử con của một trong các phần tử này và không hợp lệ ở bất cứ nơi nào khác.
Quy cách không yêu cầu đóng mục danh sách vì mục này sẽ ngầm đóng khi trình duyệt gặp phải 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 không bắt buộc, nhưng 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 để lưu một số byte, hãy đóng thẻ <li>. Việc này giúp mã của bạn dễ đọc hơn và
sẽ cảm ơn bạn trong tương lai. Sẽ dễ dàng hơn để đóng tất cả các phần tử hơn là nhớ xem thẻ nào cần đóng và thẻ nào có thẻ đóng không bắt buộc.
Chỉ có duy nhất 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 các danh sách hoặc trình đơn không có thứ tự. Thao tác này sẽ ghi đè giá trị bắt đầu của <ol> nếu có xung đột.
value là số 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ừ tập hợp giá trị, trừ phi mục đó cũng có thuộc tính value được đặt. Giá trị này không nhất thiết phải theo thứ tự; mặc dù nếu không theo thứ tự thì vẫn có lý do chính đáng.
Khi bạn kết hợp reversed trên <ol> với thuộc tính value trên các mục trong danh sách, trình duyệt sẽ thiết lập <li> đó thành giá trị được cung cấp, sau đó đếm ngược cho <li> đứng trước và đếm ngược cho các giá trị đứ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 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ả việc này bằng bộ đếm CSS cung cấp nội dung đã tạo cho phần tử giả ::marker.
Nếu số chỉ đơn thuần là biểu diễn, 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, 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 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, nghĩa là bất kỳ phần tử nào tìm thấy trong phần 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ừ đó chia phần nội dung.
Chúng tôi có một vài danh sách không có thứ tự trong MLW. Các giáo viên trong phần người hướng dẫn sẽ là một danh sách, cũng như máy của học viên trong phần đánh giá. Người hướng dẫn <ul> có hai <li>: mỗi giáo viên có một <li>. 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, <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 thẻ đều chứa một hình ảnh, một dấu ngoặc kép và một đoạn văn dài 3 dòng với 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. The Russians had nothing to do with it. This has
<span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇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 nhau nào, nhưng trang web này có. Trong chương đầu tiên của loạt bài viết này, Tổng quan về HTML, phần thành phần chính có hai tiểu mục. Trong mục lục là một danh sách không có thứ tự, có một danh sách không có thứ tự được lồng vào nhau, trong đó có các đường 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ì thành phần con duy nhất của <ul> là <li> nên bạn sẽ thấy danh sách lồng nhau được lồng trong <li>, 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, nhưng việc xoá giao diện danh sách bằng CSS, bao gồm cả tuỳ chọn cài đặ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 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 các phần tử ngữ nghĩa vì việc này không cần thiết. Và thường thì bạn cũng không cần thêm một 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 người dùng sẽ được hưởng lợi từ việc biết có bao nhiêu mục trong danh sách.
Danh sách nội dung mô tả
Danh sách mô tả là một phần tử danh sách mô tả (<dl>) chứa một loạt từ khoá mô tả (<dt>) trở lên và thông tin chi tiết về nội dung mô tả (<dd>). Tên ban đầu của 3 thành phần 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 mức sống.
Tương tự như danh sách có thứ tự và không theo thứ tự, chúng có thể được lồng vào nhau. Không giống như danh sách có thứ tự và không theo thứ tự, danh sách này bao gồm 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 kèm theo lịch sử sự nghiệp 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>, chứa một nhóm các từ khoá. Trong trường hợp này, "điều khoản" là tên học viên (được chỉ định bằng phần tử <dt>, cùng với nội dung mô tả cho từng học kỳ) (trong trường hợp này là mục tiêu nghề nghiệp của từng học viên) được chỉ định bằng các phần tử <dd>.
Danh sách mô tả này không thực sự là một phần của 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 khiến tên của các thành phần trở nên chung chung hơn.
Khi tạo một danh sách các thuật ngữ và định nghĩa hay 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ự, nội dung 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ò khác được phép. Vai trò ngầm ẩn của <dd> là definition 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 hợp lý vì <dl> không phải lúc nào cũng là một danh sách. Nhưng khi trường hợp này được chấp nhận, nó sẽ chấp nhận các vai trò list và group.
Thông thường, bạn sẽ gặp phải 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 mô tả không phải lúc nào cũng giống nhau và không nhất thiết phải khớp với các cặp từ khoá với nội dung mô tả. Bạn có thể có nhiều với một hoặc một với nhiều, chẳng hạn như một từ trong từ điển có nhiều định nghĩa.
Mỗi <dt> liên kết với ít nhất một <dd> và mỗi <dd> liên kết với ít nhất một <dt>. Mặc dù có thể sử dụng bộ kết hợp đồng cấp liền kề hoặc bộ chọn quan hệ :has() để 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ể thêm <div> 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). <dl> thực sự có thể có một vài phần tử 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ó bất kỳ thuộc tính riêng của phần tử nào.
Giờ bạn đã hiểu về đường liên kết và danh sách, hãy cùng kết hợp hai khái niệm này để 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.
Có hợp lệ để đưa <h2> vào một mục trong danh sách không?
Chọn 3 phần tử xác định các loại danh sách.
<il><ol><ul><dl>