span元素的实际应用

当一些文本的样式与其他文本是不同的时候，我们会对这些文本用span标签

比如这个“特价优惠”，我们会用span标签

以下是部分代码

<dl>
						<dt>配 送：</dt>
						<dd>“精品鲜花”限送35个城市的市区及近郊：北京、上海、广州、深圳、天津、重庆、大连、青岛、苏州、厦门，及其他省会城市（西宁、拉萨除外）</dd>
					</dl>
					
					<dl>
					  <dt>说明：</dt>
						<dd><span style="color:#FF6600;">特价优惠</span></dd>
					</dl>
					
					<dl id="tips">
						<dt>小贴士：</dt>
						<dd>5月6日-9日配送,请选择右边的母亲节预订价 ↓↓↓</dd>
						<dt> </dt>
					</dl>

在w3school中对span标签也有这么一段描述：

还有一种情况，好像图文并排的时候也会用到span元素，我不是很理解

<div class="bd">
			<div class="bd-l">
		        <span class="banner-box"><a href="product/1073017.html" target="_blank"><img src="pimg/banner_song.jpg" height="438" width="243" /></a></span>
                <span><a class="banner-link" href="yongshenghua/" target="_blank">永生花专区 >></a></span>
                </div>
</div>

.bd {
	background-color: #CCC;
	margin-bottom: 0px;
	height: 650px;
}
.bd .bd-l .banner-box {
	display: block;
}

.bd .bd-l .banner-link {
  font-family: tahoma, arial, 'Hiragino Sans GB', '\5FAE\8F6F\96C5\9ED1', sans-serif;
  font-size: 18px;
  line-height: 48px;
  display: block;
  width: 194px;
  height: 52px;
  margin: 70px auto;
  text-align: center;
  color: #fff;
  border: 2px solid #fff;
}

效果如下

图文并排，并且每一行的文字应用的样式都是不一样的时候，又或者说在链接元素<a>里图文并排的时候，更经常用span元素

<li>
	<a href="http://www.hua.com/product/1071001.html" target="_blank">
	    <span class="img-box" href="product/1071001.html">
		 <img src="./鲜花网_中国鲜花礼品网-中国鲜花网,鲜花速递网站,网上订花送花上门,鲜花快递网上花店_files/1071001.jpg_220x240.jpg" height="240" width="220">
	    </span>
	    <span class="product-title">礼品 · 3D水晶内雕玫瑰花</span>
	    <p class="price">
			<span class="price-sign">￥</span>
			<span class="price-num">106</span>
	    </p>
	</a>
</li>

运行的效果如下: