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** 是HTML中最常见的两种元素,它们在网页布局与样式控制方面扮演着重要角色。 - **div**:是一个块级元素,通常用来作为容器,它可以包含段落、...
对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更适合构建页面的大块结构。理解它们的特性并合理运用,是提高HTML和CSS技能的关键。在实际开发中,应遵循语义化原则...
HTML只是赋予内容的手段,大部分HTML标签都有其意义(标签p创建段落,h1标签创建标题等等)的,然而span和div标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,...
如: 测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</span> 提示:如果不对DIV元素定义任何CSS属性,其显示效果将行将于P元素。 因为DIV与SPAN...
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 ...
* 内联元素:`<span>` 标记是一个内联元素,不像块状元素(如:`div` 标记、`p` 标记等)那样有换行的效果。 * 无显示效果:如果不对 `<span>` 元素应用样式,使用 `<span>` 标记没有任何的显示效果。 设置 id 或 ...
内联元素包括像span、img、input等,而块级元素如div、h3、p等则不受其影响。 在介绍的示例中,使用了CSS选择器#test*来指定id为test的div元素内所有子元素应用vertical-align:middle属性。这里的#test*表示选择id...
常见的块元素有`<div>`、`<p>`等。 - **内联元素**:默认情况下,内联元素不会占据单独的一行,而是与其他内联元素或文本一起出现在同一行上。例如`<span>`、`<a>`等。 **示例**: ```html <div style="background-...
<p>价格:¥99</p> </div> ``` 这里`<div>`作为一个产品容器,包含了一个链接到产品详情页的`<a>`标签,同时有图片和文字描述。 综上所述,“html div的运用”涉及到网页布局、样式控制、交互设计等多个方面...
<div class="edit" style="display: none"> <div class="edit-bg"></div> ... <p><span>图书编号:</span><input type="text" name="id"></p> <p><span>图书名称:</span><input type="text
通过这个例子可以看到,只有当p标签的父元素既是一个div标签,又有title这个class时,这个p标签内的内容才会被"div.title p"这个选择器选中,并应用相应的CSS样式。 在实际应用中,使用这种包含关系选择器可以非常...
<p>这里是弹出对话框的内容</p> </div> </div> ``` 接下来,我们使用jQuery来控制这个弹出模式的DIV。当触发特定事件(如点击按钮)时,通过`.show()`方法将对话框显示出来,通过`.hide()`方法将其隐藏。 ```...
#### 五、DIV与SPAN的区别 - **DIV**:块级元素,可以设置宽度和高度,通常用于布局。 - **SPAN**:行内元素,不支持设置宽度和高度,主要用于文本内容的修饰。 #### 六、CSS兼容性问题 - **CSS Hack**:针对不同...
CSS+JS 实现 DIV 层的展开折叠效果 本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式,用户可以点击按钮来展开或折叠内容。 HTML 结构 首先,我们需要...
1. **块级元素与行内元素**:`<div>`是块级元素,它会占据一整行,可以包含多个行内元素如`<p>`、`<span>`、`<a>`等,也可以包含其他块级元素。 2. **CSS样式**:通过CSS,可以对`<div>`进行各种样式设置,如背景、...
<div id="level"><span>Level:</span><span class="level">1</span></div> <div id="score"><span>Score:</span><span class="score">0</span></div> 暂停 <p>控制:</p> <p>← 向左移动</p> <p>→ 向右移动</p...
在网页设计中,`div` 和 `css` 是构建页面布局和样式的重要工具,而模态窗口(Modal Window)则是用户界面设计中的一个常见元素。模态窗口是一种弹出式的对话框,它会覆盖住主页面,使得用户必须先与模态窗口交互...