世界杯欧洲区预选赛_世界杯足球几年一次 - chinaacecloud.com

列表 - 学习 Web 开发

冰岛世界杯- 2025-11-08 22:06:01

无序列表

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

豆浆

油条

豆汁

焦圈

每份无序的清单从

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

    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 下一页

        Help improve MDN

        Was this page helpful to you?

        Yes

        No

        Learn how to contribute

        This page was last modified on ⁨2025年4月30日⁩ by MDN contributors.

        View this page on GitHub • Report a problem with this content

最新发布