列表 - 学习 Web 开发

棋谱库 2026-06-22 18:19:44

无序列表

无序列表用于标记列表项目顺序无关紧要的列表——让我们以购物清单为例。

豆浆

油条

豆汁

焦圈

每份无序的清单从

    元素开始，需要包裹清单上所有被列出的项目：

    html

      豆浆

      油条

      豆汁

      焦圈

    然后就是用

  • （list item，列表项）元素把每个列出的项目单独包裹起来：

    html

    • 豆浆

    • 油条

    • 豆汁

    • 焦圈

    主动学习：标记无序列表

    尝试编辑下面的运行实例来创建一个 HTML 无序列表。

    实时输出

    可编辑代码

    按 ESC 退出编辑区域，按 Tab 可插入制表符 '\t'

    html {

    font-family: sans-serif;

    }

    h2 {

    font-size: 16px;

    }

    .a11y-label {

    margin: 0;

    text-align: right;

    font-size: 0.7rem;

    width: 98%;

    }

    body {

    margin: 10px;

    background: #f5f9fa;

    }

    const textarea = document.getElementById("code");

    const reset = document.getElementById("reset");

    const solution = document.getElementById("solution");

    const output = document.querySelector(".output");

    const code = textarea.value;

    let userEntry = textarea.value;

    function updateCode() {

    output.innerHTML = textarea.value;

    }

    const htmlSolution =

    "

      \n
    • 豆浆
      • \n
    • 油条
      • \n
    • 豆汁
      • \n
    • 焦圈
      • \n
    ";

    let solutionEntry = htmlSolution;

    reset.addEventListener("click", () => {

    textarea.value = code;

    userEntry = textarea.value;

    solutionEntry = htmlSolution;

    solution.value = "显示答案";

    updateCode();

    });

    solution.addEventListener("click", () => {

    if (solution.value === "显示答案") {

    textarea.value = solutionEntry;

    solution.value = "隐藏答案";

    } else {

    textarea.value = userEntry;

    solution.value = "显示答案";

    }

    updateCode();

    });

    textarea.addEventListener("input", updateCode);

    window.addEventListener("load", updateCode);

    // 阻止制表键跳出文本区域

    // 而是在光标位置输出制表符

    textarea.onkeydown = (e) => {

    if (e.code === "Tab") {

    e.preventDefault();

    insertAtCaret("\t");

    }

    if (e.code === "Escape") {

    textarea.blur();

    }

    };

    function insertAtCaret(text) {

    const scrollPos = textarea.scrollTop;

    let caretPos = textarea.selectionStart;

    const front = textarea.value.substring(0, caretPos);

    const back = textarea.value.substring(

    textarea.selectionEnd,

    textarea.value.length,

    );

    textarea.value = front + text + back;

    caretPos += text.length;

    textarea.selectionStart = caretPos;

    textarea.selectionEnd = caretPos;

    textarea.focus();

    textarea.scrollTop = scrollPos;

    }

    // 每次用户更新文本区域代码时，更新已保存的 userCode

    textarea.onkeyup = () => {

    // 我们只想在显示用户代码时保存状态，

    // 而不是保存解答，因此解答不会保存在用户代码上

    if (solution.value === "显示答案") {

    userEntry = textarea.value;

    } else {

    solutionEntry = textarea.value;

    }

    updateCode();

    };

    有序列表

    有序列表需要按照项目的顺序列出来——让我们以一组方向指示为例：

    沿这条路走到头

    右转

    直行穿过第一个十字路口

    在第三个十字路口处左转

    继续走 300 米，学校就在你的右手边

    这个标记的结构和无序列表一样，除了需要用

      元素而不是
        元素将所有项目包裹：

        html

        1. 沿这条路走到头

        2. 右转

        3. 直行穿过第一个十字路口

        4. 在第三个十字路口处左转

        5. 继续走 300 米，学校就在你的右手边

        主动学习：标记有序列表

        尝试编辑下面的示例来创建一个 HTML 有序列表：

        实时输出

        可编辑代码

        按 ESC 退出编辑区域，按 Tab 可插入制表符 '\t'

        html {

        font-family: sans-serif;

        }

        h2 {

        font-size: 16px;

        }

        .a11y-label {

        margin: 0;

        text-align: right;

        font-size: 0.7rem;

        width: 98%;

        }

        body {

        margin: 10px;

        background: #f5f9fa;

        }

        const textarea = document.getElementById("code");

        const reset = document.getElementById("reset");

        const solution = document.getElementById("solution");

        const output = document.querySelector(".output");

        const code = textarea.value;

        let userEntry = textarea.value;

        function updateCode() {

        output.innerHTML = textarea.value;

        }

        const htmlSolution = `

        1. 沿这条路走到头

        2. 右转

        3. 直行穿过第一个十字路口

        4. 在第三个十字路口处左转

        5. 继续走 300 米，学校就在你的右手边

        `;

        let solutionEntry = htmlSolution;

        reset.addEventListener("click", () => {

        textarea.value = code;

        userEntry = textarea.value;

        solutionEntry = htmlSolution;

        solution.value = "显示答案";

        updateCode();

        });

        solution.addEventListener("click", () => {

        if (solution.value === "显示答案") {

        textarea.value = solutionEntry;

        solution.value = "隐藏答案";

        } else {

        textarea.value = userEntry;

        solution.value = "显示答案";

        }

        updateCode();

        });

        textarea.addEventListener("input", updateCode);

        window.addEventListener("load", updateCode);

        // 阻止制表键跳出文本区域

        // 而是在光标位置输出制表符

        textarea.onkeydown = (e) => {

        if (e.code === "Tab") {

        e.preventDefault();

        insertAtCaret("\t");

        }

        if (e.code === "Escape") {

        textarea.blur();

        }

        };

        function insertAtCaret(text) {

        const scrollPos = textarea.scrollTop;

        let caretPos = textarea.selectionStart;

        const front = textarea.value.substring(0, caretPos);

        const back = textarea.value.substring(

        textarea.selectionEnd,

        textarea.value.length,

        );

        textarea.value = front + text + back;

        caretPos += text.length;

        textarea.selectionStart = caretPos;

        textarea.selectionEnd = caretPos;

        textarea.focus();

        textarea.scrollTop = scrollPos;

        }

        // 每次用户更新文本区域代码时，更新已保存的 userCode

        textarea.onkeyup = () => {

        // 我们只想在显示用户代码时保存状态，

        // 而不是保存解答，因此解答不会保存在用户代码上

        if (solution.value === "显示答案") {

        userEntry = textarea.value;

        } else {

        solutionEntry = textarea.value;

        }

        updateCode();

        };

        主动学习：标记我们的食谱

        到了这里，你拥有了所有你需要的信息来标记我们的食谱样例。你可以选择创建一份 text-start.html 起始文件的本地拷贝并在本地完成它，或者在下面的可编辑示例中进行。在本地做可能会更好，因为这样你就可以保存你正在做的工作，而如果你把它填到可编辑的例子中，在你下次打开页面时，它就会丢失。各有利弊吧。

        实时输出

        可编辑代码

        按 ESC 退出编辑区域，按 Tab 可插入制表符 '\t'

        html {

        font-family: sans-serif;

        }

        h2 {

        font-size: 16px;

        }

        .a11y-label {

        margin: 0;

        text-align: right;

        font-size: 0.7rem;

        width: 98%;

        }

        body {

        margin: 10px;

        background: #f5f9fa;

        }

        const textarea = document.getElementById("code");

        const reset = document.getElementById("reset");

        const solution = document.getElementById("solution");

        const output = document.querySelector(".output");

        const code = textarea.value;

        let userEntry = textarea.value;

        function updateCode() {

        output.innerHTML = textarea.value;

        }

        const htmlSolution =

        "

        \n
        培根
        \n
        整个世界的粘合剂。
        \n
        鸡蛋
        \n
        一块蛋糕的粘合剂。
        \n
        咖啡
        \n
        一种浅棕色的饮料。
        \n
        可以在清晨带来活力。
        \n
        ";

        let solutionEntry = htmlSolution;

        reset.addEventListener("click", () => {

        textarea.value = code;

        userEntry = textarea.value;

        solutionEntry = htmlSolution;

        solution.value = "显示答案";

        updateCode();

        });

        solution.addEventListener("click", () => {

        if (solution.value === "显示答案") {

        textarea.value = solutionEntry;

        solution.value = "隐藏答案";

        } else {

        textarea.value = userEntry;

        solution.value = "显示答案";

        }

        updateCode();

        });

        textarea.addEventListener("input", updateCode);

        window.addEventListener("load", updateCode);

        // 阻止制表键跳出文本区域

        // 而是在光标位置输出制表符

        textarea.onkeydown = (e) => {

        if (e.code === "Tab") {

        e.preventDefault();

        insertAtCaret("\t");

        }

        if (e.code === "Escape") {

        textarea.blur();

        }

        };

        function insertAtCaret(text) {

        const scrollPos = textarea.scrollTop;

        let caretPos = textarea.selectionStart;

        const front = textarea.value.substring(0, caretPos);

        const back = textarea.value.substring(

        textarea.selectionEnd,

        textarea.value.length,

        );

        textarea.value = front + text + back;

        caretPos += text.length;

        textarea.selectionStart = caretPos;

        textarea.selectionEnd = caretPos;

        textarea.focus();

        textarea.scrollTop = scrollPos;

        }

        // 每次用户更新文本区域代码时，更新已保存的 userCode

        textarea.onkeyup = () => {

        // 我们只想在显示用户代码时保存状态，

        // 而不是保存解答，因此解答不会保存在用户代码上

        if (solution.value === "显示答案") {

        userEntry = textarea.value;

        } else {

        solutionEntry = textarea.value;

        }

        updateCode();

        };

        技能测试！

        关于 HTML 基本语义元素的三篇文章已经读完，但你还记得最重要的信息吗？你可以找到一些进一步的测试，以验证你在继续前进之前已经保留了这些信息——参见技能测试：HTML 文本基础知识。

        总结

        列表就到此为止。接下来我们将进行更高层次的讨论。我们已经展示了如何实现一些单个页面的功能，但如何构建整个 HTML 页面呢？接下来将讨论文档结构。

        上一页 概述：使用 HTML 构建 Web 下一页

        帮助改进 MDN

        此页面对您有帮助吗？

        是

        否

        了解如何参与贡献

        此页面最后更新于 2026年5月29日，由 MDN 贡献者更新。

        在 GitHub 上查看此页面 • 报告此内容的问题

中美联合公报〔“上海公报”〕中国方面的声明
【行业深度】洞察2024：中国检验检测行业竞争格局及市场份额(附市场集中度、企业竞争力评价等)

最新发表

友情链接