整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
络编程之Span标签。
同学们好，今天我将为大家分享Span标签的相关知识。Span标签是一种无意义的行内元素，没有任何实际效果。如果不加CSS，它和不加文字没有任何区别。但是，它非常重要，因为它可以方便地对元素进行分组，以不同的样式显示。
先来看看今天的示例效果。在这个网页上，我使用了CSS和JS分别演示了Span标签的效果。现在，一共有两行文字，第一行中的无语义和元素加上了Span标签，可以看到它们有蓝色并且加粗。但除此之外，这句话和普通文字没有任何区别。
第二行中，我使用JS代码实现了对Span标签动态数字的变化。点击0时，每隔100毫秒，0的数字开始自动加1。再次点击时，数字暂停增加。如果继续点击，数字又开始增加。现在，让我们来看一下实现代码。Span标签和div标签一样，也是一种无属性的包围标签。它的常用属性包括ID、style、class，用法和写法与div相同。但是，Span标签更多地用于对文字的操作。
虽然您可以像使用div一样使用CSS来设置CSS，但总感觉怪怪的。实际上，这应该被称为XHTML和CSS布局。Span标签没有固定的格式，只有当它应用CSS时才会产生视觉上的变化。如果不对Span应用CSS，那么Span标签中的文本与其他文本没有任何视觉上的差异。它主要是提供了将部分文字独立出来的方式，可以替代以前的Font标签。Span标签的实用性主要体现在CSS和JS上，它的用法很简单，一眼就能看懂。还有时间，简单介绍一下控制JS的代码。ID是命名onclick是鼠标点击事件。当点击这个Span时，将调用setclock函数。通过b变量控制是暂停还是开始增加数字。如果b为假，将开始调用SpanC函数。如果b为真，将清除计时器并暂停。
今天的分享就到这里。请记住Span标签的用法和写法。所有的案例和相关文档都可以向我索取。我们下期再见。如果您想学习网络编程、服务端编程、数据库或算法，请关注我们。
TML5的结构化标签，对搜索引擎更友好
li 标签对不利于搜索引擎的收录，尽量少用
banner图片一般拥有版权，不需要搜索引擎收录，因此可以使用ul + li
<samp></samp>可用于浅色副标题
display:inline-block; 每个导航块存在水平间隙，解决方法是在父元素上添加font-size:0;
sublime安装csscomb插件
选中css代码，ctrl+shift+c 自动整理好代码
排序前：
排序后：
此时存在多余的空行
解决方法：
安装cssformat插件，对代码执行edit->cssformat->expanded 即可删除空行
选中单句样式前面的空白部分（即tab空位）
然后alt+f3 会统一选中所有tab留白
按一次删除，再按一次删除，再空一格
此时这个效果：
然后按向下箭头，按向左箭头，按删除一次，再加个空格
此时效果
再向下箭头，再删除
此时效果
css样式代码美化完毕。
新标签元素的浏览器兼容解决：
header,nav,section,aside,article,footer{display: block;}最后晒出所有代码
index.html
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<a href="#"><img src="cat-little.jpg"></a>
<nav>
<a href="#" class="active">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
</nav>
</div>
</header>
<section class="banner">
<ul>
<li class="left"><img src="banner1.jpg"></li>
<li class="active"><img src="banner3.jpg"></li>
<li class="right"><img src="banner2.jpg"></li>
</ul>
</section>
<section class="main">
<aside>
<h1>左边<samp>标题</samp></h1>
<dl>
<dt>小标题</dt>
<dd class="text">文字内容哦~</dd>
<dd class="pic"><img src="p1.jpg"></dd>
</dl>
<dl>
<dt>小标题</dt>
<dd class="text">文字内容哦~</dd>
<dd class="pic"><img src="p2.jpg"></dd>
</dl>
<dl>
<dt>小标题</dt>
<dd class="text">文字内容哦~</dd>
<dd class="pic"><img src="p3.jpg"></dd>
</dl>
</aside>
<article>
<h1>右边<samp>标题</samp></h1>
<p>这是右边文章内容哦~</p>
<img src="qrt.jpg">
<p>这是右边文章内容哦~</p>
</article>
</section>
<footer>
<div class="container">
<p>版权信息</p>
<span>
<img src="b1.jpg">
<img src="b2.jpg">
<img src="b3.jpg">
</span>
</div>
</footer>
</body>
</html>style.css
* { font-size: 14px; margin: 0; padding: 0; border: none;}
a { text-decoration: none;}
ul { list-style: none;}
/*浏览器兼容解决*/
header,nav,section,aside,article,footer{display: block;}
/*头部*/
header { width: 100%; height: 60px; background-color: #000;}
.container { width: 1200px; margin: 0 auto;}
.container > a { display: block; float: left; width: 150px; height: 60px; padding-left: 10px;}
.container > a img { height: 40px; padding-top: 10px;}
nav { font-size: 0; float: right; padding-right: 10px;}
nav > a { font-size: 16px; line-height: 60px; display: inline-block; width: 100px; height: 60px; cursor: pointer; text-align: center; color: #fff;}
nav > a:first-child { background: rgb(212, 1, 18);}
nav > a:nth-child(2) { background: rgb(254, 184, 0);}
nav > a:nth-child(3) { background: rgb(120, 185, 23);}
nav > a:nth-child(4) { background: rgb(242, 124, 1);}
nav > a:last-child { background: rgb(1, 127, 203);}
nav > a:hover, nav > a.active { padding-bottom: 5px;}
/*banner*/
.banner { background: #ccc;}
.banner ul { position: relative; width: 1200px; height: 400px; margin: 0 auto; padding-top: 100px;}
.banner ul li { position: absolute; z-index: 1; top: 0; bottom: 0; overflow: hidden; width: 500px; height: 250px; margin: auto;}
.banner ul li img { overflow: hidden; width: 100%;}
.banner ul li.active { z-index: 2; right: 0; /*设置水平居中*/ left: 0; width: 600px; height: 300px;}
.banner ul li.left { /*设置在左边*/ left: 0;}
.banner ul li.right { /*设置在右边*/ right: 0;}
/*主体部分*/
.main { width: 1200px; height: 350px; margin: 0 auto;}
aside { float: left; width: 600px;}
article { float: right; width: 600px;}
.main h1 { font-size: 24px; font-weight: lighter; margin: 20px 0;}
.main h1 samp { color: #7d7d7d;}
aside img { height: 70px;}
aside dl { position: relative; margin-bottom: 10px;}
aside dl dt { position: absolute; top: 0; left: 90px;}
aside dd.pic { overflow: hidden; width: 70px; height: 70px;}
aside dd.text { position: absolute; top: 20px; left: 90px;}
article > img { overflow: hidden; height: 130px;}
article > p { margin-bottom: 10px;}
/*底部*/
footer { background-color: #000;}
footer > .container { width: 1200px; height: 60px; margin: 0 auto;}
footer > .container > p { line-height: 60px; float: left; color: #fff;}
footer > .container > span { float: right;}
footer > .container > span > img { width: 25px; height: 25px; margin-left: 10px; padding-top: 17px; cursor: pointer; opacity: .7;}
footer > .container > span > img:hover { opacity: 1;}
/*# sourceMappingURL=style.css.map */效果图
原文链接：https://www.cnblogs.com/chenyingying0/p/12250255.html
喜欢小编的可以点个赞关注小编哦，小编每天都会给大家分享文章。
我自己是一名从事了多年的前端老程序员，小编为大家准备了新出的前端编程学习资料，免费分享给大家！
如果你也想学习前端，可以观看【置顶】文章。也可以私信【1】 领取最新前端练手实战项目
大多数 HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
html程序员们都知道的<div> 和 <span>，你知道吗？
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
定义和用法
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
定义和用法
<span> 标签被用来组合文档中的行内元素。
如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此。
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
HTML:
<p class="tip"><span>提示：</span>... ... ...</p>
CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}
希望以上可以解决你们心中的一些疑惑，其中可能会有不对的地方或是需要改进的地方，欢迎留言纠正。感觉还不错欢迎关注收藏转载哦
*请认真填写需求信息，我们会在24小时内与您取得联系。
