标签

2017-11-14 19:21:22来源:CSDN作者:weixin_39480464人点击

分享

 HTML只是赋予内容的手段,大部分HTML标签都有其意义(如<p>标签创建段落,<h1>标签创建标题等),然而<span>标签和<div>标签没有实际上的意义,但实际上,与CSS结合起来后,应用范围就非常广泛了。

 它们被用来组合成一大块的HTML代码并赋予一定的信息,大部分的用类属性class和标记属性id与元素联系起来。

1、<span>标签和<div>标签的相同之处

 <span>标签和<div>标签非常类似,是HTML中组合用的标签,可以作为插入CSS这类风格的容器,或插入class.id等语法内容的容器。

<div id="client-boyera" class="client">    <p><span class="client-title">client information:</span></p>    <table class="client-data">        <tr>            <th>last name:</th>            <td>boyera</td>        </tr>        <tr>            <th>first name:</th>            <td>stephane</td>        </tr>        <tr>            <th>tel:</th>            <td>0431-123456</td>        </tr>    </table></div>

2、<span>标签和<div>标签的区别

 div(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而span是行内元素,span的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用span。

 从功能角度来说,<div>一般用来做布局,而<span>标签用来做文字的效果,尤其是标题和链接的效果,所以我们经常会看见诸如<h1 class=”…”><span>…</span></h1>之类的代码。

 不过,**块级元素和行内元素也不是一成不变的,只要给块元素定义display:inline,块元素便成为内嵌元素;同样,给内嵌元素定义display:block后,内嵌元素便成为块元素。**block和inline的区别主要有内容模型(Content model)、格式(formatting)和Directionality(如何处理两种语言混合在一起的Unicode码)。

 例如:<div>…</div>是块,<span>…</span>是行,块里可以含行,即div里可以有span行。
 </div>显示时(分块结束处),系统自动换行,而</span>不换行。

 例如,当使用<div>标签时,代码如下。

<p>aaaaaaaa<div>bbbbbbb</div><div>ccccccc</div></p>

运行结果:

aaaaaaaabbbbbbbccccccc

 当使用<span>标签时,代码如下。

<p>aaaaaaaa<span>bbbbbbb</span><span>ccccccc</span></p>

运行结果:

aaaaaaaabbbbbbbccccccc

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台