html id属性

作者：热血震荡发布日期:2025-12-19 浏览:111

<!DOCTYPE html>
<html>
<head>
    <title>HTML id 属性示例</title>
    <style>
        /* 使用 id 选择器来设置特定元素的样式 */
        #header {
            background-color: lightblue;
            padding: 10px;
            text-align: center;
        }

        #footer {
            background-color: lightgray;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>

    <!-- 使用 id 属性为页面中的不同部分指定唯一的标识符 -->
    <div id="header">
        <h1>这是页面的头部</h1>
    </div>

    <p id="intro">欢迎来到我的网站！</p>

    <div id="footer">
        <p>这是页面的底部</p>
    </div>

    <script>
        // 使用 JavaScript 操作带有 id 的元素
        document.getElementById('intro').innerHTML = "欢迎再次光临！";
    </script>

</body>
</html>

解释说明：

id 属性：用于为 HTML 元素指定一个唯一的标识符。每个页面中 id 的值必须是唯一的，不能重复。
CSS 中使用 id 选择器：通过 #header 和 #footer 这样的选择器，可以针对特定的元素应用样式。
JavaScript 中操作 id 元素：通过 document.getElementById() 方法可以获取并操作具有特定 id 的元素，例如修改其内容或样式。

上一篇：html

下一篇：html超链接怎么跳转到指定的页面