• :一大波赠书活动正式来袭!满足条件的小伙伴每人赠送一本书,只限前100名!小伙伴们赶紧到碗里来!查看详情

2.1 元素的id和class

id和class是HTML元素中两个最基本的公共属性。

一、元素的id属性

id属性被赋予了标识页面元素的唯一身份。如果一个页面出现了多个相同id属性取值,CSS选择器或者JavaScript就会因为无法分辨要控制的元素而最终报错。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/css_reset.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="first">绿叶学习网</div>
    <p id="first">绿叶学习网</p>
</body>
</html>

说明:

上面HTML代码是错误的,因为在同一个HTML页面中,不允许出现两个相同的id。不过要注意一下,在不同页面是可以出现相同id的元素。

二、元素的class属性

class,顾名思义,就是“类”。它采用的思想跟其他C、Java等编程语言的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同的class具有相同的CSS样式。

如果你要为两个元素或者两个以上元素定义相同的样式,建议使用class属性。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/css_reset.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="first">绿叶学习网</div>
    <p class="first">绿叶学习网</p>
</body>
</html>

说明:

这段HTML代码是正确的,因为在同一个HTML页面中,允许相同的元素或者不同的元素设置相同的class属性,以便我们可以统一对具有相同的class属性的元素定义相同的CSS样式。

id和class就像你的身份证号和姓名,身份证号是全国唯一的,id号也就是唯一的,class(类名)就是姓名,两个人的姓名就有可能一样。

此外,需要注意一下:

  • (1)一个标签可以同时定义多个class;
  • (2)id也可以写成name,区别在于name是HTML中的标准,而id是XHTML中的标准,现在网页的标准都是使用id,所以大家尽量不要用name属性;
:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

(5)常见问题:绿叶学习网常见问题解答

回到顶部