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標簽

您的項目需求