HTML 标签 HTML <b>字体加粗 标签HTML <big> 大号字体 标签HTML <em> 强调标签HTML <strong> 重要事务标签HTML <dfn>定义实例标签HTML <code> 计算机代码 标签HTML <samp> 计算机输出 标签HTML <kbd> 用户输入 标签HTML <var> 变量 标签HTML <cite> 作品标题 标签HTML <i> 字体斜体 标签HTML <small> 侧记 标签HTML <sup>上标 标签HTML <sub>下标 标签HTML <ins>插入 标签HTML <del>删除 标签HTML <s>删除 标签HTML <strike> 删除标签HTML <u>下划线 标签HTML <tt>打印机文字 标签HTML <pre>预格式化的文本 标签HTML <abbr>缩写体 标签HTML <acronym>首字母缩写 标签HTML <address>联系信息 标签HTML <bdo>覆盖文本方向 标签HTML <blockquote> 长引用 标签HTML <q> 短引用 标签HTML <link> 外部资源 标签HTML <style> 样式标签HTML <title> 标题标签HTML <base>文档根 URL标签HTML <meta> 元数据标签HTML <script> 脚本标签HTML <noscript> 不支持脚本标签HTML <command> 定义命名标签HTML <head> 头部标签HTML <map> 图像映射标签HTML <img> 图像标签HTML <area> 图像映射区域标签HTML <a> 超链接标签HTML <div>块标签HTML <span>局部布局标签HTML <form> 表单 标签HTML <optgroup>选项组 标签HTML <option>选项 标签HTML <select> 下拉列表 标签HTML <datalist> 选项列表 标签HTML <input> 表单交互 标签 HTML <textarea> 多行文本 标签HTML <button> 按钮 标签 HTML <legend> 分组标题 标签HTML <fieldset> 分组 标签 HTML <label> 标识 标签 HTML <h1><h2><h3><h4><h5><h6>标题 标签HTML <hr> 水平线 标签HTML <ol> 有序列表 标签 HTML <li> 列表项 标签HTML <ul> 无序列表 标签HTML <dl>描述列表 标签HTML <dt>描述列表项目名 标签HTML <dd>描述列表子项目 标签HTML <output>输出 标签 HTML <p>段落 标签HTML <table>表格 标签HTML <tr>表格行 标签HTML <th>表标题 标签HTML <td>表单元格 标签HTML <caption>表名称 标签HTML <col>列属性 标签HTML <colgroup>列组合 标签HTML <thead>表格表头 标签HTML <tbody>表格主体 标签HTML <tfoot>表格底部 标签HTML <br>换行 标签HTML <object>对象 标签HTML <iframe>标签HTML <header> 区域页眉 标签HTML <footer> 区域页脚 标签HTML 参考手册 HTML 全局属性HTML 事件属性HTML 世界语言代码缩略词ascii码对照表HTML 完整的 ISO-8859-1 参考手册HTML 符号实体参考手册HTML 字符集HTML URL编码表HTML Canvas 参考手册

HTML <span>局部布局标签

<span>在行内定义一个区域,也就是一行内可以被<span>划分成好几个区域,从而实现某种特定效果。一般使用在文字的处理方面居多。

案例

我在地球,来自中国

<p>我在<span style="color:blue;font-weight:bold">地球</span>,来自<span style="color:blue;font-weight:bold">中国</span></p>

span标签

注意span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。

span与div区别

<span>在CSS定义中属于一个行内元素,而<div>是块级元素,span随内容而占用高宽空间(紧贴内容),而一对div标签却占用一行。我们可能通俗地理解为<div>为大容器,大容器当然可以放一个小容器了,<span>就是小容器。

span布局

利用span标签和css实现单行文字和时间两端对齐。

span布局

<!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>

span布局

代码解释

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设置靠右浮动

支持浏览器

ChromeIEFirefoxsafarioprea

全局属性

<span>标签支持HTML 全局属性

事件属性

<span>标签支持HTML 事件属性