揭密如何区分HTML中DIV和Span两标签

发布时间:2020-07-29编辑:脚本学堂
文中主要讲html中div与span两个常用标签的区别,至于哪些不同一一列在下面文章中,请同学们好好看看。

网页设计中,有个困惑,就是分不清什么地方会用到DIV什么情况用Span,标签DIV和Span的区别到底是什么?分享如下。

DIV和 Span元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。

大家讨论一下Html中DIV和Span的区别,如下所述:

DIV是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容。在网页中我们一般通过DIV来布局定位网页中的每个区块。

Span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上<Span></Span>标记可以通过在Span上定义样式来设定其内容的样式。

DIV和 Span元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。

两者最明显的区别在于DIV是块元素,而Span是行内元素。

所谓块元素,是另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代码你会有更形象的理解:

示例代码
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
        <title>CSS在线-示例</title>
        <style type="text/css"> </style>
  </head>
  <body>
  测试<Span>紧跟前面的"测试"显示</Span>
      <DIV>这里会另起一行显示</DIV>
  </body> 
 </html>

 不过,块元素和行内元素也不是一成不变的,可以通过定义CSS的display属性值可以互相转化

示例代码
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
          <title>CSS在线-示例</title>
          <style type="text/css">
   </style>
     </head>
     <body>
         测试
  <DIV style="display:inline">紧跟前面的"测试"显示</DIV>
  <Span style="display:block">这里会另起一行显示</Span>
</body
</html>

由于DIV与Span元素的特殊性,一般用于应用样式表,比如说用CSS定义为层,而需要分清的是块元素和行内元素的区别,再就是两者间的相互转化。
DIV一般用做渲染html 的容器,而Span指定内嵌文本容器。