`
FengShen_Xia
  • 浏览: 279402 次
  • 性别: Icon_minigender_1
  • 来自: 东方水城
社区版块
存档分类
最新评论

Span和Div的区别

    博客分类:
  • Jsp
阅读更多

HTML只是赋予内容的手段,大部分HTML标签都有其意义(标签p创建段落,h1标签创建标题等等)的,然而span和div标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,它们被用得十分广泛。
它们被用来组合一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来,见CSS中级指南的类和id选择符。

span和div的不同之处在于span是内联的,用在一小块的内联HTML中,而div(想想division是什么意思)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码。

<div id=”scissors”> <p>This is <span class=”paper”>crazy</span></p> </div>

  

在实践中,div,特别是span不应该滥用,尽管有其他相左的意见。比如,你要强调单词“crazy”和加粗类“paper”,可能会用这样的代码:
Webjx.Com

<div id=”scissors”> <p>This is <strong class=”paper”>crazy</strong></p> </div> 

 

网页教学网这是做法比再加一个span比较好。
 
对于类class和标识id没有线索?别担心,在CSS中级指南中会接触到它们。你所需要记住的是,span和div 是“无意义”的标签。

分享到:
评论

相关推荐

    div和span的区别

    ### div和span的区别详解 #### 一、基本概念 **div** 和 **span** 是HTML中最常见的两种元素,它们在网页布局与样式控制方面扮演着重要角色。 - **div**:是一个块级元素,通常用来作为容器,它可以包含段落、...

    网页设计中的Span和Div的区别

    在网页设计中,HTML元素是构建页面结构的基本单位,其中`&lt;span&gt;`和`&lt;div&gt;`是最常用的两种元素,但它们在用途和表现形式上有着显著的区别。 首先,`&lt;span&gt;`是一个内联元素(inline element)。它的主要作用是用于...

    浅谈Span和Div的区别

    在HTML语言中,`&lt;span&gt;` 和 `&lt;div&gt;` 是两种非常基础且重要的元素,它们主要的作用在于组织和格式化页面内容。虽然它们看似无实际意义,但与CSS结合使用时,能够实现丰富的页面布局和样式控制。下面我们将深入探讨这...

    div中加入span右对齐后出现换行显示两种解决思路

    后来我无意中发现有个东西叫&lt;span&gt;,比如实现模块的效果就可以:&lt;div class=portlet align=left&gt;文章&lt;span&gt;编辑&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;;当然我们还需要一个CSS文件去控制span的样式: 复制代码代码如下: .portlet span { ...

    css教程:网页中Span和Div的区别

    HTML只是赋予内容的手段,大部分HTML标签都有其意义(标签p创建段落,h1标签创建标题等等)的,然而span和div标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,...

    大家需要掌握的 html下SPAN和DIV的区别

    在本文中,我们将深入探讨SPAN和DIV元素的区别,并且通过一个实例来说明它们的不同。 首先,让我们来了解一下SPAN元素。SPAN元素是一个行内元素,它的主要作用是提供一个可以应用样式的容器。SPAN元素可以包含其他...

    深入理解DIV和SPAN的区别

    本文将深入探讨`div`和`span`的区别,以及如何利用CSS的`display`属性进行转换。 首先,`div`(Division)是一个块级元素,它在页面上表现为一个独立的块,其宽度默认占据100%的父容器宽度,并且每个`div`元素之间...

    SPAN和DIV,Class与ID的区别汇总

    SPAN 和 DIV 的区别 SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用...

    SPAN元素和DIV元素有的区别

    ### SPAN元素与DIV元素的区别 #### 前言 在网页设计中,合理使用不同的HTML元素对于构建清晰、逻辑性强的页面结构至关重要。其中,`&lt;div&gt;` 和 `&lt;span&gt;` 是两种非常基础且常用的元素。本文将详细介绍这两种元素的...

    网页中Span和Div的区别

    在实际使用中,`&lt;span&gt;` 和 `&lt;div&gt;` 经常与CSS结合,通过类(class)和标识符(id)选择器来实现更精细的样式控制。类选择器允许我们为一组元素定义共享的样式,而标识符选择器则用于唯一标识一个元素,这样我们就...

    span掉落的演示代码

    标题“span掉落的演示代码”和描述中的问题,集中在`display:block-inline`这一属性上,它涉及到的是如何在保持元素内联特性的基础上,使它们具有块级元素的某些特性,比如占据一整行。 首先,我们需要理解CSS的`...

    div与span之间有什么区别

    在HTML中,`&lt;div&gt;`和`&lt;span&gt;`是最常用的两种元素,它们在网页布局和样式控制中扮演着重要角色。然而,它们有着本质的区别,...总的来说,理解和掌握`&lt;div&gt;`与`&lt;span&gt;`的区别及其应用场景,是进行高效网页开发的基础。

    html标签例如img,div,span等基本标签的使用

    div 标签可以添加其他属性,如 id 属性和 class 属性,用于指定元素的 ID 和样式。 例如: ```html &lt;div id="header" class="header"&gt;这是头部&lt;/div&gt; ``` div 标签可以包含其他 HTML 元素,如文本、图像、超链接...

    div与span的区别和使用示例

    2.块元素和行内元素也不是一成不变的,通过定义CSS的display属性值可以互相转化,如: 测试<div style="display:inline"&gt;紧跟前面的"测试"显示</div&gt;<span style="display:block"&gt;这里会另起一行显示</span&gt; ...

    js+div+span实现树型结构

    综上所述,使用js、div和span实现的树型结构具有较高的灵活性,适合小规模项目或学习用途。然而,在大型项目中,可能需要更专业、功能更完善的库,如jQuery UI、AngularJS的ngTree、Vue的vuetree等,它们提供了更...

    12-div和span标签.html

    12-div和span标签.html

Global site tag (gtag.js) - Google Analytics