HTML id属性

  • HTML id属性

    id属性指定HTML元素的唯一ID(该值在HTML文档中必须是唯一的)。CSS和JavaScript可以使用id值来为具有指定id值的唯一元素执行某些任务。在CSS中,要选择具有特定id的元素,请写入#字符,后跟元素的id名称:
    <style>
                                    #myHeader {
                                        background-color: lightblue;
                                        color: #000;
                                        padding: 40px;
                                        text-align: center;
                                    } 
                                    </style>
    
                                    <h1 id="myHeader">欢迎来到蝴蝶教程</h1>
    
    尝试一下
    提示: id属性可用于任何 HTML元素。 注意: id值区分大小写。 注意: id值必须至少包含一个字符,并且不得包含空白字符(空格,制表符等)。
  • id和class属性的区别

    HTML元素只能有一个属于该单个元素的唯一ID,而类名可以由多个元素使用:
    <style>
                                            /* 这里只为id为 "myHeader" 的样式*/
                                            #myHeader {
                                                background-color: lightblue;
                                                color: green;
                                                padding: 40px;
                                                text-align: center;
                                            }
    
                                            /* 这里为类名是 "lang" 的元素的样式*/
                                            .lang {
                                                background-color: #000000;
                                                color: white;
                                                padding: 10px;
                                            } 
                                            </style>
    
                                            <!-- 唯一的元素使用 myHeader id -->
                                            <h1 id="myHeader">欢迎来到蝴蝶教程</h1>
    
                                            <!-- 多个元素使用 lang 类 -->
                                            <h2 class="lang">PHP</h2>
                                            <p>PHP是最好的语言.</p>
    
                                            <h2 class="lang">Java</h2>
                                            <p>php是最好的语言?</p>
    
                                            <h2 class="lang">Python</h2>
                                            <p>php是最好的语言!!</p>
    
    尝试一下
    提示: 您可以在我们的CSS教程获得更多的CSS知识。
  • 在JavaScript中使用id属性

    JavaScript可以使用getElementById()方法访问具有指定id属性的元素:
    <script>
                                    function displayResult() {
    
                                        document.getElementById("myHeader").innerHTML = "欢迎来到蝴蝶教程";
                                    }
    
                                    </script>
    <button onclick="displayResult();">显示标题</button>
                                    <h1 id="myHeader"></h1>
    
    尝试一下
    提示: 您可以在我们的JavaScript教程获得更多的JavaScript知识。
  • 使用id属性创建页面书签

    HTML书签用于允许读者跳转到网页的特定部分。 如果您的网页很长,书签会非常有用。 要创建书签,您必须先创建书签,然后添加一个链接。 单击链接后,页面将滚动到带有书签的位置。
    <!-- 首先,使用id属性创建书签: -->
    
                                            <!-- 比如说这里有章节1的很多内容,导致你在屏幕上很难翻到第二章节-->
                                            <h2 id="zhangjie2">章节2</h2>
                                            然后,在同一页面中添加指向书签的链接(“跳转到第2章”) 
    
                                            <!-- 假如这是一个悬浮在页面上的书签菜单 点击这个链接你就准确的跳到章节2 -->
                                            <a href="#zhangjie2">跳转到章节2</a>
    
    
                                            或者,从另一页面添加指向书签的链接(“跳转到第2章”):
    
                                            <a href="html_demo.html#zhangjie2">跳转到章节2</a>