<span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。一般使用在文字的处理方面居多。
我在地球，来自中国
<p>我在<span style="color:blue;font-weight:bold">地球</span>，来自<span style="color:blue;font-weight:bold">中国</span></p>
 | span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。 |
<span>在CSS定义中属于一个行内元素，而<div>是块级元素，span随内容而占用高宽空间（紧贴内容），而一对div标签却占用一行。我们可能通俗地理解为<div>为大容器，大容器当然可以放一个小容器了,<span>就是小容器。
利用span标签和css实现单行文字和时间两端对齐。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>炫代码(www.xuandaima.com)</title>
</head>
<style>
ul,li{ padding:0; margin:0;list-style:none; }
ul{ width:400px; padding:10px;border:1px solid #000}
ul li{ line-height:30px; height:30px; text-align:left}
ul li a{ float:left; width:300px; height:30px; overflow:hidden}
ul li span{ float:right}
</style>
</head>
<body>
<ul>
<li><a href="#">PHP教程列表</a><span>2019-07-11</span></li>
<li><a href="#">HTML教程列表</a><span>2019-07-07</span></li>
</ul>
</html>ul,li{ padding:0; margin:0;list-style:none; }确定ul和li默认CSS样式，比如li前面间隔与无序圆点效果
ul{ width:400px; padding:10px;border:1px solid #000}便于观察效果对ul设置宽度和边框，设置padding避免内容与Ul太紧贴。
ul li{ line-height:30px; height:30px; text-align:left}设置Li高度，和内容垂直居中，设置内容靠左显示
ul li a{ float:left; width:300px; height:30px; overflow:hidden}对li里的li a设置靠左浮动，设置宽度和高度，以及设置隐藏超出宽度高度的内容。避免内容溢出
ul li span{ float:right}对span设置靠右浮动
<span>标签支持HTML 全局属性
<span>标签支持HTML 事件属性
