上一节:
下一节:

  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>
上一节:
下一节: