Tech Docs Station

Appearance

列表 ​

HTML 提供了三种列表类型：无序列表、有序列表和定义列表。

无序列表 ​

无序列表使用 <ul> 标签，列表项使用 <li> 标签：

html
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

列表样式 ​

可以通过 CSS 的 list-style-type 属性改变列表标记：

html
<ul style="list-style-type: disc;">
    <li>实心圆点（默认）</li>
</ul>

<ul style="list-style-type: circle;">
    <li>空心圆点</li>
</ul>

<ul style="list-style-type: square;">
    <li>实心方块</li>
</ul>

<ul style="list-style-type: none;">
    <li>无标记</li>
</ul>

有序列表 ​

有序列表使用 <ol> 标签：

html
<ol>
    <li>第一步：准备材料</li>
    <li>第二步：开始制作</li>
    <li>第三步：完成作品</li>
</ol>

type 属性 ​

指定编号类型：

html
<ol type="1">    <!-- 数字（默认） -->
    <li>第一项</li>
</ol>

<ol type="A">    <!-- 大写字母 -->
    <li>第一项</li>
</ol>

<ol type="a">    <!-- 小写字母 -->
    <li>第一项</li>
</ol>

<ol type="I">    <!-- 大写罗马数字 -->
    <li>第一项</li>
</ol>

<ol type="i">    <!-- 小写罗马数字 -->
    <li>第一项</li>
</ol>

start 属性 ​

指定起始编号：

html
<ol start="5">
    <li>从5开始</li>
    <li>这是6</li>
</ol>

reversed 属性 ​

倒序排列：

html
<ol reversed>
    <li>第三项</li>
    <li>第二项</li>
    <li>第一项</li>
</ol>

定义列表 ​

定义列表用于展示术语及其定义：

html
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于构建网页结构。</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，用于美化网页样式。</dd>
    
    <dt>JavaScript</dt>
    <dd>脚本语言，用于实现网页交互功能。</dd>
</dl>

嵌套列表 ​

列表可以相互嵌套：

html
<ul>
    <li>前端技术
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>后端技术
        <ol>
            <li>Java</li>
            <li>Python</li>
            <li>Node.js</li>
        </ol>
    </li>
</ul>

实践示例 ​

导航菜单 ​

html
<nav>
    <ul style="list-style-type: none; padding: 0;">
        <li style="display: inline; margin-right: 20px;">
            <a href="#">首页</a>
        </li>
        <li style="display: inline; margin-right: 20px;">
            <a href="#">产品</a>
        </li>
        <li style="display: inline; margin-right: 20px;">
            <a href="#">关于我们</a>
        </li>
        <li style="display: inline;">
            <a href="#">联系</a>
        </li>
    </ul>
</nav>

步骤指南 ​

html
<h2>如何制作咖啡</h2>
<ol>
    <li>准备材料
        <ul>
            <li>咖啡豆</li>
            <li>热水</li>
            <li>滤纸</li>
        </ul>
    </li>
    <li>研磨咖啡豆</li>
    <li>烧开水</li>
    <li>冲泡咖啡</li>
    <li>享用美味的咖啡</li>
</ol>

术语表 ​

html
<h2>Web 开发术语表</h2>
<dl>
    <dt>前端（Frontend）</dt>
    <dd>用户可见的界面部分，包括 HTML、CSS、JavaScript 等技术。</dd>
    
    <dt>后端（Backend）</dt>
    <dd>服务器端逻辑，处理数据存储、业务逻辑等。</dd>
    
    <dt>API（Application Programming Interface）</dt>
    <dd>应用程序接口，用于不同软件之间的通信。</dd>
    
    <dt>响应式设计（Responsive Design）</dt>
    <dd>使网页能够适应不同屏幕尺寸的设计方法。</dd>
</dl>

完整示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表示例</title>
</head>
<body>
    <h1>我的学习计划</h1>
    
    <h2>学习科目</h2>
    <ul>
        <li>编程语言
            <ol>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ol>
        </li>
        <li>开发工具
            <ul>
                <li>VS Code</li>
                <li>Git</li>
                <li>Chrome DevTools</li>
            </ul>
        </li>
    </ul>
    
    <h2>学习步骤</h2>
    <ol>
        <li>学习 HTML 基础</li>
        <li>学习 CSS 样式</li>
        <li>学习 JavaScript 编程</li>
        <li>完成实战项目</li>
    </ol>
    
    <h2>术语解释</h2>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
    </dl>
</body>
</html>