首页 / HTML / CSS与HTML常见的使用误区

CSS与HTML常见的使用误区

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS与HTML常见的使用误区，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2399字，纯文字阅读大概需要4分钟。

内容图文

这次给大家带来CSS与HTML常见的使用误区，CSS与HTML使用的注意事项有哪些，下面就是实战案例，一起来看一下。

误区一.多p症 

<p class="nav">
    <ul>
       <li><a href="/home/">Home</a></li>
       <li><a href="/about/">About</a></li>
       <li><a href="/concact/">Concact</a></li>
    </ul>
</p>

上述使用使用多余的p标签现状，就称为“多p症”，理应简化成下

<ul class="nav">
      <li><a href="/home/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/concact/">Concact</a></li>
</ul>

误区二.多类class症 注意点class可以应用于页面任意多个元素，非常适合标识内容类型或其他相似的条目

一段新闻（新闻标题、新闻详情内容）

<h1 class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1>
<p class="news-head">Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

上述类名使用news-head与news-text 就称为"多类症"表现，不需要这么多的类区分元素样式

最好使用p（pision）代表部分而不是没有语义（大多数人误解p无语义！！！），实际上p可以将文档划分为几个有意义的区域.

类名news从而识别整个新闻条目。然后可以使用层叠（cascade）样式识别新闻标题、文本，理应修改如下

<p class="news">
    <h1>Elastic Layout Example—View Source for the HTML and CSS</h1>
    <p>Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</p>

span 对行内元素进行分组或标识

<h2> Andy wins an Oscar for his cameo in Iron Man</h2>
<p>Public and on <span class="date">Februray 22nd, 2009</span>
    By <span class="author">Harry Knowles</span>
</p>

误区三.id使用误区 用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素（如主导航、内容区域）

/*大量的使用id,很难找到唯一名称混乱*/
#andy, #rich, #jeremy, #james-box, #sophie {
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
}
/*只需一个普通类替代它*/
.staff {
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
}

用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素（如主导航、内容区域）

CSS与HTML常见的使用误区 - 文章图片

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

百度贴吧的3D翻牌效果

css3实现动画自行车效果

以上就是CSS与HTML常见的使用误区的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS与HTML常见的使用误区全部内容，希望文章能够帮你解决CSS与HTML常见的使用误区所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/412305.html

来源：【匿名】