`

span div及p的区别

    博客分类:
  • html
阅读更多

 

span div及p的区别

 

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

它们被用来组合一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来,见CSS中级指南的类和id选择符。

span和div的不同之处在于span是内联的,用在一小块的内联HTML中,前后不断行。

div(想想division是什么意思)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码。

   p(段落)元素是块级的,前后断行,而且还要再隔一行.相当于断两行。

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

 

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

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

   这是做法比再加一个span比较好。

   你所需要记住的是,span和div 是“无意义”的标签。

分享到:
评论

相关推荐

    div和span的区别

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

    CSS里元素初始化文件html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,

    对css里的元素如:html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, ...

    浅谈Span和Div的区别

    总结而言,Span和Div的主要区别在于它们的默认行为和用途:Span适用于内联内容的样式调整,而Div更适合构建页面的大块结构。理解它们的特性并合理运用,是提高HTML和CSS技能的关键。在实际开发中,应遵循语义化原则...

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

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

    div与span的区别和使用示例

    如: 测试<div style="display:inline"&gt;紧跟前面的"测试"显示</div&gt;<span style="display:block"&gt;这里会另起一行显示</span&gt; 提示:如果不对DIV元素定义任何CSS属性,其显示效果将行将于P元素。 因为DIV与SPAN...

    python 3利用BeautifulSoup抓取div标签的方法示例

    blog_level = div.find('span', {'id': 'comp_901_grade'}).find('img')['real_src'] print(f"博客等级: {blog_level}") # 提取博客积分 blog_points = div.find('span', {'id': 'comp_901_score'}).text ...

    HTML5&CSS3网页制作:span标记.pptx

    * 内联元素:`&lt;span&gt;` 标记是一个内联元素,不像块状元素(如:`div` 标记、`p` 标记等)那样有换行的效果。 * 无显示效果:如果不对 `&lt;span&gt;` 元素应用样式,使用 `&lt;span&gt;` 标记没有任何的显示效果。 设置 id 或 ...

    关于div中img,span垂直居中的问题

    内联元素包括像span、img、input等,而块级元素如div、h3、p等则不受其影响。 在介绍的示例中,使用了CSS选择器#test*来指定id为test的div元素内所有子元素应用vertical-align:middle属性。这里的#test*表示选择id...

    div的position属性

    常见的块元素有`&lt;div&gt;`、`&lt;p&gt;`等。 - **内联元素**:默认情况下,内联元素不会占据单独的一行,而是与其他内联元素或文本一起出现在同一行上。例如`&lt;span&gt;`、`&lt;a&gt;`等。 **示例**: ```html &lt;div style="background-...

    html div的运用

    &lt;p&gt;价格:¥99&lt;/p&gt; &lt;/div&gt; ``` 这里`&lt;div&gt;`作为一个产品容器,包含了一个链接到产品详情页的`&lt;a&gt;`标签,同时有图片和文字描述。 综上所述,“html div的运用”涉及到网页布局、样式控制、交互设计等多个方面...

    图书管理系统.rar

    &lt;div class="edit" style="display: none"&gt; &lt;div class="edit-bg"&gt;&lt;/div&gt; ... &lt;p&gt;&lt;span&gt;图书编号:&lt;/span&gt;&lt;input type="text" name="id"&gt;&lt;/p&gt; &lt;p&gt;&lt;span&gt;图书名称:&lt;/span&gt;&lt;input type="text

    CSS selector:div.title p代表的是什么意思(通俗易懂)

    通过这个例子可以看到,只有当p标签的父元素既是一个div标签,又有title这个class时,这个p标签内的内容才会被"div.title p"这个选择器选中,并应用相应的CSS样式。 在实际应用中,使用这种包含关系选择器可以非常...

    JQUERY弹出模式DIV

    &lt;p&gt;这里是弹出对话框的内容&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; ``` 接下来,我们使用jQuery来控制这个弹出模式的DIV。当触发特定事件(如点击按钮)时,通过`.show()`方法将对话框显示出来,通过`.hide()`方法将其隐藏。 ```...

    常见DIV+CSS问题集合与解决.docx

    #### 五、DIV与SPAN的区别 - **DIV**:块级元素,可以设置宽度和高度,通常用于布局。 - **SPAN**:行内元素,不支持设置宽度和高度,主要用于文本内容的修饰。 #### 六、CSS兼容性问题 - **CSS Hack**:针对不同...

    CSS+JS实现一个DIV层的展开折叠效果

    CSS+JS 实现 DIV 层的展开折叠效果 本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式,用户可以点击按钮来展开或折叠内容。 HTML 结构 首先,我们需要...

    网站div布局

    1. **块级元素与行内元素**:`&lt;div&gt;`是块级元素,它会占据一整行,可以包含多个行内元素如`&lt;p&gt;`、`&lt;span&gt;`、`&lt;a&gt;`等,也可以包含其他块级元素。 2. **CSS样式**:通过CSS,可以对`&lt;div&gt;`进行各种样式设置,如背景、...

    jQuery网页版俄罗斯方块游戏代码.zip

    &lt;div id="level"&gt;&lt;span&gt;Level:&lt;/span&gt;&lt;span class="level"&gt;1&lt;/span&gt;&lt;/div&gt; &lt;div id="score"&gt;&lt;span&gt;Score:&lt;/span&gt;&lt;span class="score"&gt;0&lt;/span&gt;&lt;/div&gt; 暂停 &lt;p&gt;控制:&lt;/p&gt; &lt;p&gt;← 向左移动&lt;/p&gt; &lt;p&gt;→ 向右移动&lt;/p...

    div css窗口 模态窗口

    在网页设计中,`div` 和 `css` 是构建页面布局和样式的重要工具,而模态窗口(Modal Window)则是用户界面设计中的一个常见元素。模态窗口是一种弹出式的对话框,它会覆盖住主页面,使得用户必须先与模态窗口交互...

Global site tag (gtag.js) - Google Analytics