一篇”水文“带你解剖HTML中的ID属性以及和Class属性的区别。

写在开篇

哈喽!我又来写”水文“了,回顾上篇讲到的class属性,那么class属性和本篇要讲的id属性有什么不一样呢?跟随笔者步伐,一一解剖。

HTML中的id属性

直接先上个例子,看看效果,然后我们逐一剖析一下。看下面代码:


    
        
        陪你复习巩固,攻破前端技能
        
    
    
        

彩虹运维技术栈社区,公众号ID:TtrOpsStack

我们会持续分享运维和运维开发领域相关的技术文章

一篇”水文“带你解剖HTML中的ID属性以及和Class属性的区别。_第1张图片

在上面的例子中,h2元素和p元素都通过id属性来作为HTML元素的唯一ID,引用元素ID属性的语法是在前面增加#号,注意到style标签了嘛?通过#id1和#id2来为h2和p元素设置了CSS属性呢。需要注意,id属性的值在,在HTML文档中必须是唯一的,并且它是对大小写敏感的,这个要注意哦!

Class属性和ID属性的区别

在上次的分享中,我们讲到了class属性,那么它跟id属性有啥区别呢?简而言之就是class是可共享的,id是唯一的。怎么说呢?也就是说同一个类名可以由多个HTML元素使用,而一个id名称只能由页面中的一个HTML元素使用。

下面我们来看小栗子,将id的名称设置为一样,看看会有啥奇怪的现象。代码如下:



    
        
        陪你复习巩固,攻破前端技能
        
    
    
        

彩虹运维技术栈社区,公众号ID:TtrOpsStack

我们会持续分享运维和运维开发领域相关的技术文章

效果图如下:

image.png

有发现到上面的问题嘛?有啥奇怪现象呢?现象就是在style中的第1个#id1的CSS样式属性没有生效,第2个#id1的CSS样式是生效了的。

我们再看一个例子对比一下



    
        
        陪你复习巩固,攻破前端技能
        
    
    
        

彩虹运维技术栈社区,公众号ID:TtrOpsStack

诚邀您的关注!

我们会持续分享运维和运维开发领域相关的技术文章

您的关注,就是我们坚持最大的动力

效果如下图:

一篇”水文“带你解剖HTML中的ID属性以及和Class属性的区别。_第2张图片

看效果图好像没啥毛病,但看下面的警告信息:

一篇”水文“带你解剖HTML中的ID属性以及和Class属性的区别。_第3张图片

HTML书签

html书签有什么用?当用书签之后,就会跳转到网页特定部分的内容。如果页面比较长,这个书签的功能就显得很有用了,比如跳到最后,回到最前。那么这个所谓的书签是如何实现的呢?是通过ID和链接来实现的,下面我们通过实战来剖析一下具体的用法。

看下面的小栗子:



    
        
        运维开发工程师,攻破前端技能。
    
    
        跳到最后

        

彩虹运维技术栈社区1,公众号ID:TtrOpsStack

诚邀您的关注,我们会持续分享运维和运维开发领域的技术文章

彩虹运维技术栈社区2,公众号ID:TtrOpsStack

诚邀您的关注,我们会持续分享运维和运维开发领域的技术文章

彩虹运维技术栈社区3,公众号ID:TtrOpsStack

诚邀您的关注,我们会持续分享运维和运维开发领域的技术文章

彩虹运维技术栈社区4,公众号ID:TtrOpsStack

诚邀您的关注,我们会持续分享运维和运维开发领域的技术文章

彩虹运维技术栈社区5,公众号ID:TtrOpsStack

诚邀您的关注,我们会持续分享运维和运维开发领域的技术文章

彩虹运维技术栈社区6,公众号ID:TtrOpsStack

诚邀您的关注,我们会持续分享运维和运维开发领域的技术文章

彩虹运维技术栈社区7,公众号ID:TtrOpsStack

诚邀您的关注,我们会持续分享运维和运维开发领域的技术文章

彩虹运维技术栈社区8,公众号ID:TtrOpsStack

诚邀您的关注,我们会持续分享运维和运维开发领域的技术文章

彩虹运维技术栈社区9,公众号ID:TtrOpsStack

诚邀您的关注,我们会持续分享运维和运维开发领域的技术文章

彩虹运维技术栈社区10,公众号ID:TtrOpsStack

诚邀您的关注,我们会持续分享运维和运维开发领域的技术文章

彩虹运维技术栈社区11,公众号ID:TtrOpsStack

诚邀您的关注,我们会持续分享运维和运维开发领域的技术文章

回到最前

一篇”水文“带你解剖HTML中的ID属性以及和Class属性的区别。_第4张图片

上面的例子中,当点击跳到最后,就可以看到效果了,不信您试试。嘿嘿!

在JavaScript中如何使用id属性?

上次我们class属性的时候,也有讲到js如何使用class属性。这次呢,我们讲讲js是如何使用id属性的。

我们先看小栗子,代码如下:



    
        
        运维开发工程师,攻破前端技能。
    
    
        

点击查看彩虹运维技术栈社区的微信公众号

下面,我们看看点击前和点击后的效果

点击前:

一篇”水文“带你解剖HTML中的ID属性以及和Class属性的区别。_第5张图片

点击后:

一篇”水文“带你解剖HTML中的ID属性以及和Class属性的区别。_第6张图片

在上述代码中,主要通过getElementById方法来获取元素id,关于js的使用,笔者后续会专门分享该专题。

写在最后

好了,因笔者时间和精力有限,本篇的分享就到此为止啦!希望本文能帮助到有需要的朋友。望多多关注我们,点赞,收藏、转发!

本文转载于(喜欢的盆友关注我们):
https://mp.weixin.qq.com/s/RI...

你可能感兴趣的:(html)