位置:首页 > 软件操作教程 > 编程开发 > HTML > 问题详情

HTML5 使用id和class

提问人:刘团圆发布时间:2020-11-20

■知识点

    HTML是简单的文档标识语言,不是界面语言。文档结构大部分使用<div>标签来完成,为了能够识别不同的结构,一般通过定义id或class给它们赋予额外的语义,给CSS样式提供有效的“钩子”。

    ■实例设计

    【示例1】构建一个简单的列表结构,并给它分配一个id,自定义导航模块。

<ul id="nav">

    <lix<a href="#">首页</a></li>

    <li><a href="#">关于</a></li>

    <lix<a hzef="#">联系</a></li>

</ul>

    使用id标识页面上的元素时,id名必须是唯一的。id可以用来标识持久的结构性元素,例如主导航或内容区域;id还可以用来标识一次性元素,如某个链接或表单元素。

    在整个网站上,id名应该应用于语义相似的元素以避免混淆。例如,如果联系人表单和联系人详细信息在不同的页面上,那么可以给它们分配同样的id名contact,但是如果在外部样式表中给它们定义样式,就会遇到问题,因此使用不同的id名(如contact_form和contact_details)就会简单得多。

    与id不同,同一个class可以应用于页面上任意数量的元素,因此class非常适合标识样式相同的对象。例如,设计一个新闻页面,其中包含每条新闻的日期。此时不必给每个日期分配不同的id,而是可以给所有日期分配类名date。

    对于class名称,也是如此。例如,如果定义所有错误消息以红色显示,不要使用类名red,而应该选择更有意义的名称,如error或feedback。

    【示例2】在实际设计中,class被广泛使用,这就容易产生滥用现象。例如,很多初学者把所有的元素上添加类,以便更方便地控制它们。这种现象被称为“多类症”,在某种程度上,这和使用基于表格的布局一样糟糕,因为它在文档中添加了无意义的代码。

    <hl class=" news Head" >标题新闻 </hl>

    <p class="newsText">新闻内容</p>

    <p>...</p>

    <p class="newsText"><a href="news.php" class=”newsLink">更多</a></p>

    【示例3】在上面示例中,每个元素都使用一个与新闻相关的类名进行标识。这使新闻标题和正文可以采用与页面其他部分不同的样式。但是,不需要用这么多类来区分每个元素。可以将新闻条目放在一个包含框中,并加上类名news,从而标识整个新闻条目。然后,可以使用包含框选择器识别新闻标题或文本。

    <div class="news">

    <hl>标题新闻</hl>

    <p>新闻内容</p>

    <P>...</p>

    <p><a href="news.php">更多</a></p>

    </div>

    以这种方式删除不必要的类有助于简化代码,使页面更简洁。过度依赖类名是不必要的,只需要在不适合使用id的情况下对元素应用类,而且尽可能少使用类。实际上,创建大多数文档常常只需要添加几个类。如果初学者发现自己添加了许多类,那么这很可能意味着自己创建的HTML文档结构有问题。

继续查找其他问题的答案?

发表评论(共0条评论)
请自觉遵守互联网相关政策法规,评论内容只代表网友观点,发表审核后显示!

2021年国家电网校园招聘考试直播课程通关班

  • 讲师:刘萍萍 / 谢楠
  • 课时:160h
  • 价格 4580

特色双名师解密新课程高频考点,送国家电网教材讲义,助力一次通关

配套通关班送国网在线题库一套

课程专业名称
讲师
课时
查看课程

2020年解放军文职招聘考试全程直播课

杜老师139课时试听目录

2021级国家电网招聘考试管理专业知识精讲班直播课

黎老师160小时试听目录

2021级国家电网招聘考试其它工学类专业题海练习班直播课

贺老师160小时试听目录

2021级国家电网招聘考试金融专业知识精讲班直播课

钟老师140小时试听目录

2021级国家电网招聘考试计算机专业知识精讲班直播课

杜老师160小时试听目录

2021级国家电网招聘考试通信专业知识精讲班直播课

李老师350小时试听目录

2021级国家电网招聘考试财会专业知识精讲班直播课

王老师120小时试听目录

2021级国家电网招聘考试研究生题海班直播课程

严老师180小时试听目录

2021级国家电网招聘考试研究生电气专业知识精讲班直播课

彭老师160小时试听目录

2021级国家电网招聘考试本科电气专业考前押题班录播课

蒋老师168h试听目录

2021级国家电网招聘考试本科电气专业题海训练班直播课

谷老师165小时试听目录

2021级国家电网招聘考试本科电气专业知识精讲班直播课

严老师160小时试听目录

2021级国家电网招聘考试专科电气专业考前押题班直播课

王老师150小时试听目录

2021级国家电网招聘考试专科电气专业知识题海训练直播课

杨老师146小时试听目录

2021级国家电网招聘考试专科电气专业知识精讲班直播课

崔老师180小时试听目录

2020年湖南中烟公司招聘考试技术工人二岗直播课

刘老师140小时试听目录

2020年湖南中烟公司招聘考试生成车间工人考试直播课

王老师125小时试听目录

2020年湖南中烟公司招聘考试技术工人一岗直播课

李老师140小时试听目录

2020年湖南中烟公司招聘直播课程(协议班)

崔莹莹168h试听目录

2020湖南农村信用社招聘笔试培训(协议保过班)

谢楠200h试听目录

2020军队文职招聘考试面试培训(协议保过班)

刘萍萍124h试听目录

2021国家电网招聘考试录播视频课程

  • 讲师:崔莹莹 / 刘萍萍
  • 课时:180h
  • 价格 3580

特色解密新课程高频考点,免费学习,助力一次通关

配套全套国网视频课程免费学习

课程专业名称
讲师
课时
查看课程

2021级国家电网招聘考试管理类专业知识精讲班录播课

王老师150小时试听目录

2021级国家电网招聘考试其它工学类专业题海练习班录播课

谷老师148小时试听目录

2021级国家电网招聘考试其它工学类专业知识精讲班录播课

夏老师150小时试听目录

2021级国家电网招聘考试其它专业题海练习班录播课

刘老师125小时试听目录

2021级国家招聘考试其它专业题海练习班录播课

李老师140小时试听目录

2021级国家电网招聘考试其它专业知识精讲班录播课

贾老师120小时试听目录

2021级国家电网招聘考试金融专业知识精讲班录播课

王老师140小时试听目录

2021级国家电网招聘考试通信专业知识精讲班录播课

黄老师188小时试听目录

2021级国家电网招聘考试计算机专业知识精讲班录播课

谷老师120小时试听目录

2021级国家电网招聘考试财会专业考前押题班录播课

夏老师15小时试听目录

2021级国家电网招聘考试财会专业题海练习班录播课

杨老师180小时试听目录

2021级国家电网招聘考试财会专业知识精讲班录播课

蒋老师156小时试听目录

2021级国家电网招聘考试研究生电气考前押题班录播课

谷老师12小时试听目录

2021级国家电网招聘考试研究生电气专业题海练习班录播课

李老师170小时试听目录

2021级国家电网招聘考试研究生电气专业知识精讲班录播课

崔老师150试听目录

2021级国家电网招聘考试本科电气专业考前押题班录播课

王老师120小时试听目录

2021级国家电网招聘考试本科电气题海练习班录播课

王老师158小时试听目录

2021级国家电网招聘考试本科电气专业知识精讲班录播课

谷老师170小时试听目录

2021级国家电网招聘考试专科电气专业考前押题班录播课

蒋老师12小时试听目录

2021级国家电网招聘考试专科电气专业题海练习班录播课

崔老师150小时试听目录

2021级国家电网招聘考试专科电气专业知识精讲班录播课

王老师180小时试听目录

在线题库
在线报名
  • 报考专业:
    *(必填)
  • 姓名:
    *(必填)
  • 手机号码:
    *(必填)
返回顶部