跳到主要内容

HTML 标识（id）属性

使用 HTML id属性以指定 HTML 元素的唯一 ID。 在同一个页面中，ID应该是唯一的。

使用 id 属性​

id属性指定唯一 ID 的 HTML 元素。属性的值在 HTML 页面中必须是唯一的。

id属性用于指向到样式表中的特定样式声明。它也被JavaScript用来访问和使用特定ID操作元素。

id 在CSS中声明样式的语法是：井后（#）后跟一个 id 的名称。 然后，在大括号 {} 中定义 CSS 属性。

如下：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #navbar {
                background-color: green;
                color: white;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <div id="navbar">
            导航条
        <div>
    </body>
</html>
about:blank
提示

ID 名称区分大小写！

ID 名称必须至少包含一个 字符，不能以数字开头，并且不得包含空格（空格、制表符、 等）。

类和 ID 之间的区别​

一个类名可以由多个 HTML 元素使用，而ID名在页面内只能由一个元素使用：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #navbar {
                background-color: green;
                color: white;
                padding: 20px;
            }
            .btn {
                color: black;
                margin-left: 10px;
                padding: 5px 20px;
                border: 1px solid #dddddd;
                background-color: #ffffff;
                font-size: 16px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="navbar">
            导航条
        <div>
        <p>
            <button class="btn">按钮1</button>
            <button class="btn">按钮2</button>
        </p>
    </body>
</html>

about:blank

链接锚点定位​

链接锚点允许用户跳转到网页的特定部分。

如果页面很长，锚点定位会很有用。

若要使用锚点定位，必须先创建锚点，然后添加链接到锚点。

当单击链接时，页面将滚动到链接的锚点。

<html>
    <head>
        <style>
            p { height: 300px; }
        </style>
    </head>
    <body>
        <a href="#c5">跳转到第五章</a>
        <h2 id="c1">第一章</h2>
        <p>第一章 正文</p>
        <h2 id="c2">第二章</h2>
        <p>第二章 正文</p>
        <h2 id="c3">第三章</h2>
        <p>第三章 正文</p>
        <h2 id="c4">第四章</h2>
        <p>第四章 正文</p>
        <h2 id="c5">第五章</h2>
        <p>第五章 正文</p>
    </body>
</html>
about:blank

在 JavaScript 中使用​

JavaScript 也可以使用id属性来执行特定ID元素的操作。 JavaScript 可以使用getElementById()或querySelector()方法访问具有特定 id 的元素

<script>
let navbar = document.getElementById('navbar');
// 或(需要在id名称前加#号)
let navbar = document.querySelector('#navbar');
</script>

HTML 参考​

名称描述