首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >不使用<div>,只使用语义标记,这真的是最好的吗?

不使用<div>,只使用语义标记,这真的是最好的吗?
EN

Stack Overflow用户
提问于 2010-03-08 11:11:48
回答 3查看 1.9K关注 0票数 4

我在谷歌搜索的网上发现了这个

参见这里的文章:http://www.thatcssguy.com/limit-your-divs/

看他的最终版面:http://www.nodivs.com/

一些文章的引文

1

当我限制div的使用时,包括IE6和IE7在内的所有主要浏览器都会将站点呈现得几乎完美。或者只需要很少的修复。

2

它很神奇,但是证明了div和表是布局所必需的。

我们应该试着建立这样的网站吗?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2010-03-08 11:14:34

本文就如何避免“分割”提出了一些好的观点,即在语义上更合适的元素中使用div元素。但这一点:

当我限制div的使用时,包括IE6和IE7在内的所有主要浏览器都会将站点呈现得几乎完美。或者只需要很少的修复。

完全是胡扯。DIVs是非常有效的容器元素,在很多情况下都是有意义的。只有在语义上更合适的元素(如菜单之类的无序列表中的ul、标题的h1 h2 h3、有序列表的ol )中,使用div才是错误的,因为使用table进行布局通常是错误的。

你提到的这个网站的作者公然滥用dl (定义列表)等其他元素作为div元素的代名词,这和滥用divs作为ul ol的代名词一样愚蠢。看看W3C对ul、ol和dl列表的定义,自己考虑这些元素是否应该像作者所使用的那样执行布局任务。

据我所见,不使用div使网站呈现更好的跨浏览器的暗示完全是骗人的。如果我错了,请纠正我,但我想不出有一个例子是正确的。

票数 9
EN

Stack Overflow用户

发布于 2010-03-08 11:45:36

他的观点是在元素上使用样式,而不是在div中自动包装它们:

代码语言:javascript
复制
<ul class="navList">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

而不是

代码语言:javascript
复制
<div class="navList">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
</div>

但是,当他使用绝对定位将一个h1与一个h2覆盖起来以创建他的头部时,他就失去了我。

可维护性和干净的代码一样重要。当我看到一个名为"header“的div时,我知道与此相反的是什么:

代码语言:javascript
复制
   <h1 class="border"><a href="#" id="logo">Welcome to NoDivs.com</a></h1>

    <h2 class="border">Contact NoDivs.com <span>1-888-1485</span></h2>

他也不去实践他的说教。任何使用“间隔”div在div之间添加填充物的人都不应该谈论分裂的危险。:)

票数 3
EN

Stack Overflow用户

发布于 2010-03-08 11:27:43

你引述了这篇文章,但作者本人在评论中说:

不使用DIVs会使站点呈现更可靠的跨浏览器。您正在删除代码中的一个元素,该元素可能是浏览器的源,但显示不正确。删除变量,您将看到更少的问题。

因此:为标题切换div并不会改变呈现的可靠性(本文暗示了这一点,但作者并不这么认为),但是删除不必要的嵌套div元素对此有所帮助,但作为一个良好的HTML层,您应该始终这样做;

只要记住,只要有可能,你就应该防止分裂炎,并且使用语义正确的标记可以帮助你的搜索引擎优化工作和可访问性、业力等等。

编辑:

好吧,大家都知道,分裂症是不好的。让我们看看这篇文章的标记:

代码语言:javascript
复制
<body>
    <div id="page">
        <div id="header">
            <h1 id=logo">(some stuff)</h1>
            <ul id="nav1">navi</ul>
        </div>
        <div id="columns">
            (Content)
        </div>
        <div class="box6">
             <div class="top"></div>
             <div class="spacer">                 
                 <div class="col3">
                 </div>
                 <div class="col3">
                 </div>
                 <div class="col3 last">
                 </div>
                 <br class="fix">
             </div>
             <div class="bot"></div>
         </div>

        <div id="footer">
            (Footer Content)
        </div>
    </div>
    (Script tags)
</body>

让我们看看:<div id="page">margin: 0 auto;对页面进行居中。将此样式应用于<body>,您可以删除一个div。<div class="box6">的全部内容并不完全没有div,而且绝对没有必要。其余的:你自己去看看。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2400823

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档