`
jiangzhenghua
  • 浏览: 600067 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML中div和span两个标签的区别

 
阅读更多

解决思路
最明显的区别是:DIV是块元素,SPAN是内嵌元素。块元素相当于内嵌元素在前后各加一个<br>换行。其实,块元素和行内元素也不是一成不变的,只要给块元素定义 display:inline,块元素就成了内嵌元素,同样地,给内嵌元素定义了display:block就成了块元素了。

具体步骤
代码示例:

<style>
div,span{border:1px solid #000;margin:2}
</style>
<div>div1</div><div>div2</div>
<span>span1</span><span>span2</span>
<br>
<div style="display:inline">div3</div>
<div style="display:inline">div4</div>
<span style="display:block">span3</span>
<span style="display:block">span4</span>

技巧:有些朋友会说DIV是层标签,其实HTML里是没有层这个说法的,只不过是为了易于理解,Dreamweaver里才这样写的,每个对象都可以成为“ 层”,只需要给对象定义position属性(值为absolute或relavite)。例如,要让图片成为“层”,可以这样写代码:

<img src="demo.gif" style="posibion:absolute;left:20;top:20">

分享到:
评论

相关推荐

    前端练习01-前端-HTML(div+span)

    在前端开发领域,HTML(HyperText Markup Language)是构建网页内容的基础语言,它定义了网页的结构和元素。本练习“前端练习01-前端-...在实际项目中,熟练运用这两个标签能够极大地提升网页设计的灵活性和可维护性。

    深入理解DIV和SPAN的区别

    在网页布局和设计中,`div` 和 `span` 是两个非常基础且重要的HTML标签,它们各自具有不同的特性和用途。本文将深入探讨`div`和`span`的区别,以及如何利用CSS的`display`属性进行转换。 首先,`div`(Division)是...

    HTML中div与span的区别(共同点与不同点)

    在HTML(超文本标记语言)中,`div` 和 `span` 是两种非常基础且重要的元素,它们在网页布局和内容格式化中扮演着至关重要的角色。了解它们的共同点和不同点对于网页设计和开发至关重要。 共同点: 1. **整体处理**...

    前端开发与实践- DIV与SPAN.pptx

    在前端开发中,`div` 和 `span` 是两个非常基础且重要的HTML标签,它们用于构建网页布局和组织内容。让我们深入探讨这两个元素以及与之相关的前端开发知识点。 首先,`div` 标签代表一个分区或节(division/section...

    浅谈Span和Div的区别

    下面我们将深入探讨这两个标签的区别以及它们在网页设计中的应用。 首先,`&lt;span&gt;` 标签是一个内联元素,它通常用于包裹页面中的一部分文本或者图像,以实现特定的样式或行为。内联元素不会在浏览器中自动换行,...

    网页中Span和Div的区别

    下面我们将详细探讨这两个标签的区别以及它们在实际应用中的作用。 首先,`&lt;span&gt;` 标签是一个内联元素(inline element)。它的主要用途是用于对文档中的某个小部分进行样式控制或行为添加,例如,对一句话中的...

    HTML中div和span比较_动力节点Java学院整理

    在HTML开发中,`&lt;div&gt;` 和 `&lt;span&gt;` 是两个非常基础但又极其重要的标签,它们通常用在网页布局和样式定义中。通过对比`&lt;div&gt;`和`&lt;span&gt;`的用法,我们可以更深入地理解它们各自的功能和适用场景。 首先,`&lt;div&gt;`标签...

    DIV和SPAN垂直居中对齐的实现方法

    首先,我们先了解DIV和SPAN这两个标签在HTML中的作用。DIV是一个块级元素,用于定义文档中的分区或节。而SPAN则是行内元素,用于对文档的某一部分内容进行分组。尽管它们在布局上具有不同的默认行为,但垂直居中的...

    完美html教程,里面包含两个ppt html课件,一个一个html标签库文档

    这个压缩包提供了一套完整的HTML学习资源,包括两个PPT课件和一个HTML标签库文档,非常适合初学者入门和提升HTML技能。 首先,我们来看"HTML基础.ppt"。这个PPT课件很可能是对HTML基本概念的介绍,涵盖了HTML的历史...

    div的dispaly:inline样式 和span的区别

    这意味着,在源代码中的多个连续换行在浏览器中可能只显示为一个空格,从而可能在两个`&lt;span&gt;`标签之间产生不可见的空格间隙,而对`&lt;div&gt;`标签的影响可能与`&lt;span&gt;`不同,因为`&lt;div&gt;`作为块级元素,默认不会忽略垂直...

    区别div和span、relative和absolute、display和visibility

    在网页设计和开发中,了解并正确使用HTML标签和CSS属性是至关重要的。今天我们将深入探讨容易混淆的三个概念:`div`与`span`、`relative`与`absolute`以及`display`与`visibility`。 1. `div`与`span`的区别: - `...

    HTML+CSS实用知识库分享

    双标签是指用两个标签符号来描述某个功能的标签,例如:&lt;body&gt; 我是body 。 HTML标签的语义化是指使用合适的标签来描述网页中的内容,使得搜索引擎和屏幕阅读器更容易理解网页的结构和内容。常见的语义化标签有标题...

    HTML静态页面的标签

    HTML 标签可以分为块级标签和行级标签两大类,块级标签用于定义网页的结构和布局,而行级标签用于定义网页中的行内元素。 HTML 静态页面的标签可以分为以下几类: 1. 标题标签:、、、、、,用于定义标题的大小和...

    HTML基本标签和代码示例

    HTML文件通常呈现出树形结构,根节点是`&lt;html&gt;`标签,它包含两个主要子节点:`&lt;head&gt;`和`&lt;body&gt;`。`&lt;head&gt;`标签用于存放元信息,如字符集设置(`&lt;meta charset="UTF-8"&gt;`)、页面描述(`)、关键词(`)和页面标题...

    整理HTML:id和class,div,span,内联和块元素,音频和视频标签的概念

    在HTML中,`id`和`class`是两种重要的选择器,用于为元素添加唯一的标识或分组多个元素。接下来,我们将深入探讨这些概念,以及`div`、`span`、内联和块元素,以及音频和视频标签。 1. `id`与`class`: - `id`:每...

    获取jsp中的所有某个标签中所有ID相同的元素

    然而,值得注意的是,`id`属性在HTML中应该是唯一的,即一个页面上不应该有两个或更多的元素具有相同的`id`。因此,这段代码实际上可能是在寻找具有相似`id`前缀的元素,而不是真正意义上的“相同ID”。如果确实需要...

    html标签大全

    18. `&lt;font&gt;` 和 `&lt;basefont&gt;`:这两个标签用来设置字体、大小和颜色,但在HTML5中已经不推荐使用,现在通常使用CSS来定义字体样式。 19. `&lt;big&gt;` 和 `&lt;small&gt;`:分别用于增大和减小字体大小,HTML5中也不再推荐...

Global site tag (gtag.js) - Google Analytics