首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

HTML标记<div>和<span>之间有什么区别？

作者：雯颜哥_135 | 2023-09-04 12:28
如何解决《HTML标记<div>和<span>之间有什么区别？》经验，为你挑选了7个好方法。

我想问用于显示的使用一些简单的例子

和.我已经看到它们都用来标记一个id或一个页面的一部分class,但是我有兴趣知道是否有时候一个优先于另一个.



1> Chris Marast..：

div是一个块元素,span是内联的.

这意味着要在语义上使用它们,div应该用于包装文档的各个部分,而跨度应该用于包装文本,图像等的一小部分.

例如:

This a large main division, with a small bit of spanned text!

请注意,将块级元素放在内联元素中是违法的,因此:

Some text that 
I want
 to mark up

......是非法的.

编辑:从HTML5开始,一些块元素可以放在一些内联元素中.有关非常清晰的列表,请参阅此处的MDN参考.以上仍然是非法的,因为只接受措辞内容,并且

是流内容.

你问了一些具体的例子,所以从我的保龄球网站BowlSK中取出一个:

好的,发生了什么？在我的页面顶部,我有一个逻辑部分,"标题".由于这是一个部分,我使用div(具有适当的id).在其中,我有几个部分:用户栏和实际页面标题.标题使用适当的标签h1.用户栏是一个部分,包含在一个部分中div.在其中,用户名包含在a中span,以便我可以更改样式.正如你所看到的,我还在span标题中包含了大约2个字母 - 这允许我在样式表中更改它们的颜色.

另请注意,HTML5包含一组广泛的新元素,用于定义常见的页面结构,例如文章,部分,导航等.HTML 5工作草案的第4.4节列出了它们,并提供了有关其用法的提示.HTML5仍然是一个工作规范,所以没有什么是"最终的",但是任何这些元素都在任何地方都是非常值得怀疑的.如果你想在一些旧版本的IE中设置这些元素的样式,你需要使用javascript hack - 你基本上需要document.createElement在源中指定任何元素之前创建每个元素之一.有很多库会为你解决这个问题 - 快速谷歌搜索出现了html5shiv.

"语义学(来自希腊语sēmantiká,中性复数sēmantikós)[1] [2]是对意义的研究.它侧重于能指之间的关系,如词,短语,符号和符号,以及它们代表什么,它们的指示词".能指"div"和"span"肯定代表某种东西.HTML规范很好地分析了块和内联元素的含义.http://www.w3.org/TR/html401/struct/global.html#h-7.5.3.HTML5草案甚至将它们放在不同的组中 - 分组内容和文本级语义.http://dev.w3.org/html5/spec/Overview.html
你让我在"div是一个块元素,span是内联的.":)
@apnerve他们仍然在该块中具有语义,而内联元素对于文档流来说意味着不同的东西,无论是从解析角度还是从"阅读此源来弄清楚正在发生的事情"的角度来看.
你不能在语义上使用`div`和`span`,因为它们没有任何意义.`div`是无意义的通用块级元素,而`span`是无意义的通用内联元素.
Chris,你的文本中有一个错误:即使你将span的样式设置为"block",将它包装在块级元素周围仍然是*非法的!
如果您提供aria标准非抽象角色之一作为值的`role`属性，则绝对可以在语义上使用div和span。通常首选使用适当的语义HTML元素，但是有些角色（至今）还没有相应的HTML元素，例如“工具栏”。还有一些HTML语义没有相应的角色（例如`<dl>`）。HTML5中出现的许多语义元素都是从角色属性开始的，因此从语义上讲，您可能会争辩说使用诸如<div role =“ toolbar”>`之类的东西已经领先于游戏。

2> AmbroseChape..：

仅仅为了完整起见,我邀请你这样思考:

HTML中定义了许多块元素(前后换行符),以及许多内联标记(没有换行符).

但是在现代HTML中,所有元素都应该具有含义:a

是段落,a

  • 是列表项等等,我们应该使用正确的标记用于正确的目的 - 而不是像我们过去那样使用
    内容是否为引用缩进.

    所以,当你会怎么做是没有意义的,以你想要做的事？400px宽的色谱柱没有意义,是吗？您只希望您的文本列宽400像素,因为这适合您的设计.

    出于这个原因,他们增加了两个元素为HTML:通用或无意义的元素

    和,否则,人们会回到滥用其确实具有意义的元素.

    这是一个恰当的解释.我想知道为什么这不被接受为答案.
    因为它在页面太远了
    仅仅因为没有接受好的答案,并不意味着你不能投票.+1是有用的澄清.
    很高兴知道,但它没有回答原始问题,因为它没有解释div和span元素之间的差异.

    3> Brian..：

    这里已有很好的详细解答,但没有可视化的例子,所以这里有一个简单的例子:

    div和span之间的差异

    是一个块标记,而是一个内联标记.

    它们对布局有不同的影响,即使没有CSS!这是我第一次看到这个!
    谢谢你在视觉上解释像我这样的新手:-)

    4> Jason Buntin..：

    是一个块级元素,是一个内联元素.

    如果你想用一些内联文本做一些事情,那就是要走的路,因为它不会引入断言

    .

    正如其他人所指出的那样,每一个都隐含着一些语义,最重要的是,a

    意味着文档中的逻辑划分,类似于文档的某个部分或某些内容,la:

    
   
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis congue vehicula purus.
    
   
    Nam eget magna nec sapien fringilla euismod. Donec hendrerit.

    我知道你可以用CSS修改它,但这引入了另一种技术.HTML可以独立存在,当它发生时,div不是内联的,并不是纯粹的形式.

    5> Konrad Rudol..：

    克里斯的回答中已经提到了真正重要的区别.但是,对每个人来说,影响并不明显.

    作为内联元素,可能只包含其他内联元素.因此,以下代码是错误的:

    This is a paragraph

    以上代码无效.要包装块级元素,必须使用另一个块级元素(例如

    ).另一方面,
    可能仅用于块级元素合法的地方.

    此外,这些规则在(X)HTML中修复,并且CSS规则的存在不会改变它们!所以下面的代码也错了!

    Still wrong
    

    Just as wrong

    @Faizan那有什么关系？这也是错误的:并非每个浏览器都会为此标记生成一致的结果.根据您使用的文档类型(以及浏览器),这甚至可能根本不运行,而是导致验证错误.
    "在你所做的事情上要保守,在接受的事情上保持自由"http://en.wikipedia.org/wiki/Robustness_principle
    欢迎来到汤食堂.使用无效HTML的浏览器是高度优化的原因,但挑剔的HTML解析器不是常态.每一个值得盐的浏览器(即与那里的'HTML'兼容)都使用某种'汤'型(内部)库来使它变得可口.

    6> user34660..：

    隐含"块元素"的意义,但从未明确说明.如果我们忽略所有理论(理论是好的),那么以下是一个实用的比较.下列:

    This paragraph has a span.
    

    This paragraph 
    has
     a div.

    生产:

    This paragraph has a span.

This paragraph

has
a div.

    这表明,不仅要一个div 不使用内联的,它根本不会产生预期的影响.



    7> Eric R. Rath..：

    如其他答案中所述,默认情况下div将呈现为块元素,同时span将在其上下文中内联呈现.但两者都没有任何语义价值; 它们的存在允许您将样式和标识应用于任何给定的内容.使用样式,你可以做一个div像一个行为span,反之亦然.

    其中一个有用的样式div是inline-block

    例子:

      http://dustwell.com/div-span-inline-block.html

      CSS显示:内联vs内联块

    inline-block在游戏网络项目中,我已经习以为常.

    如果它们没有语义价值,那么它们只会有一个.一个是块级划分 - 另一个是内联跨度
    推荐阅读
    devbox
    雯颜哥_135
    这个屌丝很懒，什么也没留下！
    关注作者
    Tags | 热门标签
    RankList | 热门文章
    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有