Unordered list (ul, li)
Basic Concepts of Unordered Lists
An unordered list (Unordered List) is a way in HTML to display a list of items, typically marked with bullets, squares, or other symbols. Unordered lists are defined using the <ul> tag, with each list item wrapped in an <li> tag.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
Syntax Structure of <ul> and <li> Tags
The <ul> tag can only contain <li> elements as direct children, but <li> elements can include other HTML elements internally:
<ul>
<li>
<h3>Fruits</h3>
<p>Fresh fruits</p>
</li>
<li>
<h3>Vegetables</h3>
<p>Organic vegetables</p>
</li>
</ul>
Styling Unordered Lists
By default, browsers add bullet styles to unordered lists, but these can be modified with CSS:
ul {
list-style-type: square; /* Square bullets */
}
ul.custom {
list-style-type: none; /* No markers */
padding-left: 0;
}
ul.custom li {
padding: 5px 0;
border-bottom: 1px solid #eee;
}
Nested Unordered Lists
Unordered lists can be nested to create hierarchical structures:
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
</ul>
</li>
</ul>
Practical Use Cases
Navigation Menu
<nav>
<ul class="nav-menu">
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About Us</a></li>
</ul>
</nav>
Feature List
<ul class="feature-list">
<li>
<span class="icon">✓</span>
<span>Fast Response</span>
</li>
<li>
<span class="icon">✓</span>
<span>24/7 Support</span>
</li>
</ul>
Accessibility Considerations
To enhance accessibility, ARIA attributes can be added:
<ul role="list">
<li role="listitem">Item 1</li>
<li role="listitem">Item 2</li>
</ul>
Browser Compatibility
All modern browsers fully support <ul> and <li> tags, including:
- Chrome
- Firefox
- Safari
- Edge
- Opera
Performance Optimization Tips
For large lists, consider virtual scrolling techniques:
// Example framework code for virtual scrolling
const virtualList = new VirtualScroll({
container: document.getElementById('list-container'),
items: largeDataSet,
renderItem: item => `<li>${item.name}</li>`
});
Comparison with Other List Types
Unlike ordered lists (<ol>), unordered lists do not indicate the order or importance of items:
<!-- Ordered list -->
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
<!-- Unordered list -->
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
Advanced Applications: Custom List Markers
CSS can be used to fully customize list markers:
ul.fancy {
list-style: none;
}
ul.fancy li::before {
content: "→";
color: #ff6b6b;
margin-right: 10px;
}
Lists in Responsive Design
Adjust list layouts for different screen sizes:
/* Vertical layout for small screens */
ul.responsive {
display: block;
}
/* Horizontal layout for large screens */
@media (min-width: 768px) {
ul.responsive {
display: flex;
gap: 20px;
}
}
Interaction with JavaScript
Dynamically manipulate unordered lists:
// Add a new item
const list = document.querySelector('ul');
const newItem = document.createElement('li');
newItem.textContent = 'New Item';
list.appendChild(newItem);
// Remove an item
list.removeChild(list.lastElementChild);
Importance of Semantics
While <div> elements can simulate lists, semantic tags are better for SEO and accessibility:
<!-- Not recommended -->
<div class="fake-list">
<div class="fake-item">Item 1</div>
<div class="fake-item">Item 2</div>
</div>
<!-- Recommended -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Internationalization Considerations
For right-to-left (RTL) languages, list marker positions adjust automatically:
<html dir="rtl">
<body>
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
</ul>
</body>
</html>
Print Style Optimization
Ensure lists maintain good formatting when printed:
@media print {
ul {
page-break-inside: avoid;
}
li {
page-break-inside: avoid;
}
}
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
下一篇：有序列表(ol, li)
