HTML网页编程之Span标签

络编程之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标签的用法和写法。所有的案例和相关文档都可以向我索取。我们下期再见。如果您想学习网络编程、服务端编程、数据库或算法，请关注我们。

天我们说下HTML标签中的div、span和图像标签。其实div和span是上一节就要讲的标签内容，但是当时时间比较晚了，就没有说。

<div>和<span>是没有语义的，就是一个盒子，用来装内容的。这和android开发中的font很像，也是一个个的盒子，将内部包起来。可以这么来写:

<div>这是头部</div> <span>我是内容</span> 两个都是双标签。

div是division的缩写，表示分割分区(竖着); span意为跨度、跨距(横着)。div单独占一行，实例如下: 理解为一个大盒子

看下HTML代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>我是一个div标签，我自己独占一行</div>

</body>

</html>

可以看到，写了两个<div>标签，一个占一行

<span>一行可以放很多个标签，理解为小盒子，举例如下:

代码如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>我是一个div标签，我自己独占一行</div>

<span>我是一个span标签</span>

</body>

</html>

效果如下:

接下来说一个很重要的标签---图像标签

HTML标签中，使用<img>标签用于定义HTML页面中的图像，是一个单标签。img是image的缩写，src是<img>标签的必须属性，用于指定图像文件的路径和文件名。属性，指的是属于这个图像标签的特性。对于图片，需要将图片和html文件放到一起。

代码图示：

代码如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

效果如下:

如果我们再加入同样的一行代码，看看显示(加上换行)

代码如图:

代码内容如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

效果如下:

可以看到<img src="xxx"> 后面不写 / 也是可以的，<br />后面不写斜杠也行，即使都是用单个的情况。src是source的缩写。

接下来说下图像标签的其他属性:

alt 替换文本，图像不能显示的文字

title 文本，提示文本，鼠标放到图像上，显示的文字，类似于 hover

width 像素，设置图像的宽度(和android中的差不多)

height 像素，设置图像的高度(和android中的差不多)

border 像素，设置图像的边框粗细

具体我们看下实例:

代码如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br />

alt替换文本，图像显示不出来的时候用文本代替<br />

</body>

</html>

看下展示效果:

发现 alt后替换文本并没有起作用，图像还是显示的。这是为什么呢？

其实原因很简单，就是先判断src后的图像是否存在，如果存在，就展示图像，如果不存在，就展示文本。上面语句中，图像的地址是正确的，所以会展示图像。可以将图像地址进行修改。我们再试下

代码如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br />

alt替换文本，图像显示不出来的时候用文本代替<br />

</body>

</html>

我们来看看效果，alt后的文本是否能展示

说明我们的测试是正确的。

2.title 提示文本

先看效果:

看下代码和代码展示：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

title提示文本<br />

<br />

</body>

</html>

好的，今天先到这里，一会我们继续。

一下html中文件标签和文本标签的使用

目的是学会使用，所以借助工具可以省好多时间

1.文件标签：构成html最基本的标签

html:html文档的根标签

head：头标签。用于引入html文档的一些属性。引入外部的一些资源

title：标题标签

body：体标签

<!DOCTYPE html>:html5中定义该文档是html

2.文本标签：和文本有关的标签

注释:<!-- 注释内容 –->

<h1> 到<h6>:标题标签自带换行的效果

<p>：表示段落的标签

<br>：换行标签<br/>和<br>的写法都不会报错

<hr>：显示一条水平线（也是一个自闭和标签）水平线有一些属性我们可以控制它的样式。hr里面表示高度是size而不是height.对齐方式默认是居中的。

<b>：字体加粗

<i>：斜体

<font>:字体标签（通过属性来修改字体的字号，大小，颜色，以及字体的样式）

<center>:文本居然标签

这里讲下网页下面的版权标签是如何写出来的。

3.图片标签：用来展示图片的（图片也是一个自闭合标签）

属性:src:用来指定图片的位置

什么都不写默认就是./的形式

../表示上一级目录

4.列表标签：

有序列表:ol,li(li表示的是列表的每一项)

无序列表:ul,li

5.链接标签：

a:定义一个超链接

属性：

href:指定访问资源的URL(统一资源定位符，就是路径的表示形式)

target：（是目标的意思）指定打开资源的方式

_self:在当前页面打开

_blank:在空白页面打开

6.表格标签：在HTML中的表格只有行的概念，没有列的概念，将表格以行的形式进行分割，然后再对行进行操作。

table:定义表格

width:表格的宽度

border:边框

cellpadding:单元格内容左对齐（定义内容和单元格的距离）

cellspacing:边框合并(定义单元格之间的距离，如果指定为0，单元格的线会合为一条)

bgcolor:背景色

align:表格的对齐样式

tr:定义行

bgcolor:背景色

align:表格的对齐样式(是用来修改文本的对齐方式的)

td:定义单元格

colspan:合并列

rowspan:合并行

th:定义表头单元格

<caption>:表格标题

<thread>:表示表格的头部分

<tbody>:表示表格的体部分

<tfoot>:表示表格的脚部分

7.块标签：div和span是结合css使用的

span:文本信息在一行显示，行内标签，内联标签(意思就是它不会换行)

div:是会换行的。每一个div占满一整行。块级别的标签

8.语义化标签：html5中为了提高程序的可读性，提高了一些标签

在线咨询

上一篇：HTML样式：好看的颜色字体是有方法的
下一篇：JavaScript如何获取当前日期和时间

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML网页编程之Span标签

您的项目需求