html5中li標簽怎么用

# HTML5中li標簽怎么用

`<li>` 標簽是HTML中用于定義列表項（List Item）的核心元素，通常與 `<ul>`、`<ol>` 或 `<menu>` 標簽配合使用。本文將詳細介紹其語法、使用場景及HTML5中的新特性。

## 一、基本語法

### 1. 無序列表中的使用
```html
<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

渲染效果： - 蘋果 - 香蕉 - 橙子

2. 有序列表中的使用

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

渲染效果： 1. 第一步 2. 第二步 3. 第三步

二、HTML5中的新特性

1. value 屬性（僅有序列表）

<ol>
  <li value="10">第十項</li>
  <li>第十一項（自動遞增）</li>
</ol>

效果： 10. 第十項 11. 第十一項

2. 嵌套復雜內容

HTML5允許在<li>中嵌入塊級元素：

<ul>
  <li>
    <h3>標題</h3>
    <p>描述文字...</p>
  </li>
</ul>

三、常見應用場景

1. 導航菜單

<nav>
  <ul>
    <li><a href="/">首頁</a></li>
    <li><a href="/about">關于</a></li>
  </ul>
</nav>

2. 步驟說明

<ol type="A">
  <li>打開設備</li>
  <li>選擇模式</li>
</ol>

3. 商品列表

<ul class="product-list">
  <li data-price="19.99">商品A</li>
  <li data-price="29.99">商品B</li>
</ul>

四、樣式控制技巧

1. 修改列表符號

ul.custom {
  list-style-type: square; /* 實心方塊 */
}
ol.custom {
  list-style-type: upper-roman; /* 羅馬數字 */
}

2. 自定義項目符號

ul.image-marker {
  list-style-image: url('marker.png');
}

五、注意事項

1. 閉合標簽：HTML5允許省略結束標簽</li>，但為了兼容性建議顯式關閉
2. 語義化使用：不要用<li>替代段落等語義元素
3. 無障礙訪問：與<ul>/<ol>配合使用才能被屏幕閱讀器正確識別

六、兼容性提示

所有現代瀏覽器均完整支持<li>標簽，包括： - Chrome 4+ - Firefox 3.5+ - Safari 3.2+ - Edge 12+ - Opera 10+

通過合理使用<li>標簽，可以創建結構清晰、語義明確的列表內容，這是構建網頁信息架構的基礎元素之一。 “`

（注：實際字符數約600字，如需擴展可增加更多代碼示例或詳細說明特定應用場景）