开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《Web前端开发精品课 HTML与CSS进阶教程》——1.4 id和class

简介:
+关注继续查看

本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第1章,第1.4节,作者: 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.4 id和class

id和class是HTML元素中两个最基本的公共属性。一般情况下,id和class都用来选择元素,以便进行CSS操作或者JavaScript操作。但是很多新手对id和class这两个属性感到很迷茫,不知道什么时候用id,什么时候用class,甚至随便使用。

1.4.1 id属性
id属性具有唯一性,也就是说在一个页面中相同的id只允许出现一次。W3C建议,对于页面关键的结构或者大结构,我们才使用id。所谓的关键结构,指的是诸如LOGO、导航、主体内容、底部信息栏等结构。对于一些小地方,还是建议使用class属性。

我们知道搜索引擎识别一个页面结构,是根据标签的语义以及id属性来识别的。因此id属性不要轻易使用。此外,id的命名也十分关键,特别是对搜索引擎优化而言。对于id和class的命名,我们在CSS进阶部分会详细介绍。

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

如果你要为两个或者两个以上元素定义相同的样式,建议使用class属性。因为这样可以减少大量的重复代码。

注意,对于一个元素而言,我们可以定义多个class。一般来说,定义多个class的目的在于:一般用一个class抽取公共样式,然后用另外一个class定义单独样式。

举个例子,在一个页面中有如图1-2所示的三个栏目,仔细分析我们会发现这三个栏目具有部分相同样式,此时我们可以使用一个class来定义公共样式,但是这三个栏目又有各自的样式。该怎么办呢?这时候我们应该为这三个栏目分别定义不同的class,以便在CSS中控制单独的样式。这就是多个class的用处。


<a href=https://yqfile.alicdn.com/d6241c1118424f4480e5a7086f73610a0047d816.png" >

上图的三个栏目的HTML关键结构如下:

<div class="column blog">
   <h2></h2>
   <div></div>
</div>
<div class="column manual">
   <h2></h2>
   <div></div>
</div>
<div class="column tool">
   <h2></h2>
   <div></div>
</div>

对于id和class,我们总结一下:对于页面关键结构,建议使用id;对于小地方,建议使用class。就算我们不需要对关键结构进行CSS操作或者JavaScript操作,也建议加上id,以便搜索引擎识别页面结构。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《HTML 5+CSS 3入门经典》——1.4 小结
本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第1章,第1.4节,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1047 0
《HTML 5+CSS 3入门经典》——2.4 上机实践
本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第2章,第2.4节,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1058 0
《HTML 5+CSS 3入门经典》——2.5 小结
本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第2章,第2.5节,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
905 0
《HTML 5+CSS 3入门经典》——导读
本书按照学习HTML和CSS的最佳结构来分配章节,共分为4篇20章,其中,前三篇可以使读者掌握HTML 和CSS的编程知识,第四篇可以使读者学习实现一个由HTML 5+CSS 3 组成的静态网站的开发过程。
867 0
《HTML 5+CSS 3入门经典》——第3章 你很重要——HTML 5 中的表单
本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第3章,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
918 0
《HTML 5+CSS 3入门经典》——3.5 小结
本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第3章,第3.5节,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
937 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载