HTML与CSS使用高频误区详解
程序员文章站
2022-05-06 08:32:24
...
误区一.多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; }
用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航、内容区域)
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
以上就是HTML与CSS使用高频误区详解 的详细内容,更多请关注其它相关文章!
推荐阅读
-
如何使用html5与css3完成google涂鸦动画
-
如何使用html5与css3完成google涂鸦动画
-
Asp.net MVC下使用Bundle合并、压缩js与css文件详解
-
Asp.net MVC下使用Bundle合并、压缩js与css文件详解
-
JavaScript 速成计划(杂项详解:JS操作HTML 与 CSS、异常、事件)!
-
jQuery HTML css()方法与css类实例详解
-
使用nodejs分离html文件里的js和css详解
-
HTML与CSS的CSS的基本使用
-
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
-
详解使用HTML5的classList属性操作CSS类