html 隐藏

作者：′残花败落° 发布日期:2026-02-07 浏览:95

<!-- 示例代码：隐藏 HTML 元素 -->

<!DOCTYPE html>
<html>
<head>
    <title>HTML 隐藏元素示例</title>
    <style>
        /* 使用 CSS 隐藏元素 */
        .hidden {
            display: none;
        }
    </style>
</head>
<body>

    <!-- 使用 CSS 类来隐藏元素 -->
    <p class="hidden">这个段落是隐藏的。</p>

    <!-- 使用 inline 样式来隐藏元素 -->
    <p style="display: none;">这个段落也是隐藏的。</p>

    <!-- 使用 JavaScript 来隐藏元素 -->
    <p id="hideMe">点击按钮后，这个段落会被隐藏。</p>
    <button onclick="document.getElementById('hideMe').style.display='none';">隐藏段落</button>

</body>
</html>

解释说明：

CSS 隐藏元素：通过定义一个 .hidden 类，并设置 display: none;，可以将应用该类的元素从页面中完全移除，不占用空间。
Inline 样式隐藏元素：直接在 HTML 标签中使用 style="display: none;" 也可以隐藏元素。
JavaScript 隐藏元素：通过 JavaScript 动态修改元素的样式属性（如 display），可以在用户交互时隐藏元素。

上一篇：html img标签

下一篇：html网页设计源代码