HTML網(wǎng)頁編程之Span標(biāo)簽

絡(luò)編程之Span標(biāo)簽。

同學(xué)們好，今天我將為大家分享Span標(biāo)簽的相關(guān)知識。Span標(biāo)簽是一種無意義的行內(nèi)元素，沒有任何實(shí)際效果。如果不加CSS，它和不加文字沒有任何區(qū)別。但是，它非常重要，因?yàn)樗梢苑奖愕貙υ剡M(jìn)行分組，以不同的樣式顯示。

先來看看今天的示例效果。在這個(gè)網(wǎng)頁上，我使用了CSS和JS分別演示了Span標(biāo)簽的效果。現(xiàn)在，一共有兩行文字，第一行中的無語義和元素加上了Span標(biāo)簽，可以看到它們有藍(lán)色并且加粗。但除此之外，這句話和普通文字沒有任何區(qū)別。

第二行中，我使用JS代碼實(shí)現(xiàn)了對Span標(biāo)簽動態(tài)數(shù)字的變化。點(diǎn)擊0時(shí)，每隔100毫秒，0的數(shù)字開始自動加1。再次點(diǎn)擊時(shí)，數(shù)字暫停增加。如果繼續(xù)點(diǎn)擊，數(shù)字又開始增加。現(xiàn)在，讓我們來看一下實(shí)現(xiàn)代碼。Span標(biāo)簽和div標(biāo)簽一樣，也是一種無屬性的包圍標(biāo)簽。它的常用屬性包括ID、style、class，用法和寫法與div相同。但是，Span標(biāo)簽更多地用于對文字的操作。

雖然您可以像使用div一樣使用CSS來設(shè)置CSS，但總感覺怪怪的。實(shí)際上，這應(yīng)該被稱為XHTML和CSS布局。Span標(biāo)簽沒有固定的格式，只有當(dāng)它應(yīng)用CSS時(shí)才會產(chǎn)生視覺上的變化。如果不對Span應(yīng)用CSS，那么Span標(biāo)簽中的文本與其他文本沒有任何視覺上的差異。它主要是提供了將部分文字獨(dú)立出來的方式，可以替代以前的Font標(biāo)簽。Span標(biāo)簽的實(shí)用性主要體現(xiàn)在CSS和JS上，它的用法很簡單，一眼就能看懂。還有時(shí)間，簡單介紹一下控制JS的代碼。ID是命名onclick是鼠標(biāo)點(diǎn)擊事件。當(dāng)點(diǎn)擊這個(gè)Span時(shí)，將調(diào)用setclock函數(shù)。通過b變量控制是暫停還是開始增加數(shù)字。如果b為假，將開始調(diào)用SpanC函數(shù)。如果b為真，將清除計(jì)時(shí)器并暫停。

今天的分享就到這里。請記住Span標(biāo)簽的用法和寫法。所有的案例和相關(guān)文檔都可以向我索取。我們下期再見。如果您想學(xué)習(xí)網(wǎng)絡(luò)編程、服務(wù)端編程、數(shù)據(jù)庫或算法，請關(guān)注我們。

.什么是字體圖標(biāo)

可以看作一種特殊字體，其展示的是圖標(biāo)，而不再是文字，其擁有字體的特性，比如大小、顏色、透明效果、陰影等，字體圖標(biāo)加載快、不變形。也可以看作是矢量格式的圖標(biāo)。

2.字體圖標(biāo)常用免費(fèi)資源

（1）iconmoon字體圖標(biāo)庫：https://icomoon.io/app

（2）阿里iconfont字體圖標(biāo)庫：https://www.iconfont.cn/

（3）font-awesome字體圖標(biāo)庫：

3.字體圖標(biāo)使用步驟

以iconmoon為例

（1）選擇需要的圖標(biāo)并下載

1）在fonts文件夾下有四種類型的字體文件，每種字體文件兼容瀏覽器的種類不同

a）.tff格式（TrueTypeFont），美國蘋果公司和微軟公司共同開發(fā)的，在Windows和Mac操作系統(tǒng)中為默認(rèn)字體；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。

b）.woff格式（Web Open Font Format-Web開放字體格式），是一種網(wǎng)頁所采用的字體格式標(biāo)準(zhǔn)，使用zlib壓縮，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。

c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微軟設(shè)計(jì)用來在網(wǎng)頁使用的字體格式，是OpenType字體的壓縮格式，IE專用，IE4+支持該字體。

d）.svg格式（Scalable Vector Graphics-可縮放的矢量圖形），它是一種用XML定義的語言，用來描述二維矢量及矢量/柵格圖形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。

其他字體

e）.otf格式（Open Type Font），Microsoft和Adobe公司開發(fā)的，.otf格式比.ttf更為強(qiáng)大，可以把PostScript字體嵌入到TrueType中。

2）字體轉(zhuǎn)換

https://www.fontke.com/tool/convfont/

（2）字體圖標(biāo)的引入

1）把字體放到項(xiàng)目的相應(yīng)位置

將下載解壓后的fonts文件夾放到項(xiàng)目路徑下

2）在html頁面中引入字體

利用CSS的@font-face屬性，引入外部字體；

在style.css文件中有如下代碼，為固定用法，注意url中字體路徑，其它可以不變。

在html的style標(biāo)簽中引入如下代碼：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?8l3wc0');
  src:  url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
    url('fonts/icomoon.woff?8l3wc0') format('woff'),
    url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

3）為元素用該字體

span {
        font-family: "icomoon";
    }

4）為元素添加內(nèi)容

復(fù)制demo.html中需要的圖標(biāo)，如下，將其作為元素的內(nèi)容。

<span>?</span>

（3）新增字體圖標(biāo)的引入

當(dāng)利用iconmoon選用字體圖標(biāo)時(shí)，如果有新增的字體圖標(biāo)需要加入，則需要用到.json文件，如下，在原先選擇的基礎(chǔ)上，再選擇新選擇的字體圖標(biāo)，然后再下載使用。

HTML的世界里，一切都是由容器和內(nèi)容構(gòu)成的。容器，就如同一個(gè)個(gè)盒子，用來裝載各種元素；而內(nèi)容，則是這些盒子里的珍寶。理解了這一點(diǎn)，我們就邁出了探索HTML布局的第一步。

在HTML中，布局標(biāo)簽主要用于控制頁面的結(jié)構(gòu)和樣式。本文將介紹一些常用的布局標(biāo)簽及其使用方法，并通過代碼示例進(jìn)行演示。

一、理解布局的重要性

布局在我們前端開發(fā)中擔(dān)任什么樣的角色呢？想象一下，你面前有一堆散亂的積木，無序地堆放在那里。

而你的任務(wù)，就是將這些積木按照圖紙拼裝成一個(gè)精美的模型。HTML布局標(biāo)簽的作用就像那張圖紙，它指導(dǎo)瀏覽器如何正確、有序地顯示內(nèi)容和元素，確保網(wǎng)頁的結(jié)構(gòu)和外觀既美觀又實(shí)用。

下面我們就來看看在HTML中常用的基礎(chǔ)布局標(biāo)簽有哪些，如何使用這些布局標(biāo)簽完成我們的開發(fā)目標(biāo)。

二、常用的布局標(biāo)簽

1、div標(biāo)簽

div標(biāo)簽是一個(gè)塊級元素，它獨(dú)占一行，用于對頁面進(jìn)行區(qū)域劃分。它可以包含其他HTML元素，如文本、圖片、鏈接等。通過CSS樣式可以設(shè)置div的布局和樣式。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>

<div>這是一個(gè)div元素

</div>

</body>
</html>

運(yùn)行結(jié)果：

2、span標(biāo)簽

span標(biāo)簽是一個(gè)內(nèi)聯(lián)元素，它不獨(dú)占一行，用于對文本進(jìn)行區(qū)域劃分。它主要用于對文本進(jìn)行樣式設(shè)置，如字體、顏色等。與div類似，span也可以包含其他HTML元素。
示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .text {
    color: blue;
    font-size: 20px;
  }
</style>
</head>
<body>

<p>這是一個(gè)<span>span元素</span>。</p>

</body>
</html>

運(yùn)行結(jié)果：

3、table標(biāo)簽

table標(biāo)簽用于創(chuàng)建表格，它包含多個(gè)tr（行）元素，每個(gè)tr元素包含多個(gè)td（單元格）或th（表頭單元格）元素。

<table> 定義一個(gè)表格，<tr> 定義表格中的行，而 <td> 則定義單元格。通過這三個(gè)標(biāo)簽，我們可以創(chuàng)建出整齊劃一的數(shù)據(jù)表，讓信息的展示更加直觀明了。

需要注意的是：

<table>和</table>標(biāo)記著表格的開始和結(jié)束。
<tr>和</tr>標(biāo)記著行的開始和結(jié)束，幾組表示該表格有幾行。
<td>和</td>標(biāo)記著單元格的開始和結(jié)束，表示這一行中有幾列。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>
</body>
</html>

運(yùn)行結(jié)果：

4、form標(biāo)簽

<form>標(biāo)簽的主要作用是定義一個(gè)用于用戶輸入的HTML表單。這個(gè)表單可以包含各種輸入元素，如文本字段、復(fù)選框、單選按鈕、提交按鈕等。

<form>元素可以包含以下一個(gè)或多個(gè)表單元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>和<output>等。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  form {
    display: flex;
    flex-direction: column;
  }
</style>
</head>
<body>

<form>
  <label for="username">用戶名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密碼：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

</body>
</html>

運(yùn)行結(jié)果：

5、列表標(biāo)簽

1）無序列表

指沒有順序的列表項(xiàng)目
始于<ul>標(biāo)簽，每個(gè)列表項(xiàng)始于<li>
type屬性有三個(gè)選項(xiàng)：disc實(shí)心圓、circle空心圓、square小方塊。默認(rèn)屬性是disc實(shí)心圓。

示例代碼：

<!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--無序列表</title>
</head>
<body>
<ul>
<li>默認(rèn)的無序列表</li>
<li>默認(rèn)的無序列表</li>
<li>默認(rèn)的無序列表</li>
</ul>
<ul>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
</ul>
<ul>
<li type = "square">添加square屬性</li>
<li type = "square">添加square屬性</li>
<li type = "squaare">添加square屬性</li>
</ul>
</body>
</html>

運(yùn)行結(jié)果：

也可以使用CSS list-style-type屬性定義html無序列表樣式。

想要快速入門前端開發(fā)嗎？推薦一個(gè)前端開發(fā)基礎(chǔ)課程，這個(gè)老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！「鏈接」

2）有序列表

指按照字母或數(shù)字等順序排列的列表項(xiàng)目。
其結(jié)果是帶有前后順序之分的編號,如果插入和刪除一個(gè)列表項(xiàng)，編號會自動調(diào)整。
始于<ol>標(biāo)簽，每個(gè)列表項(xiàng)始于<li>。

示例代碼：

<ol>
<li>默認(rèn)的有序列表</li>
<li>默認(rèn)的有序列表</li>
<li>默認(rèn)的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1項(xiàng)</li>
<li>第2項(xiàng)</li>
<li>第3項(xiàng)</li>
<li value ="20">第四項(xiàng)</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1項(xiàng)</li>
<li>第2項(xiàng)</li>
<li>第3項(xiàng)</li>
</ol>

運(yùn)行結(jié)果：

同樣也可以使用CSS list-style-type屬性定義html有序列表樣式。

3）自定義列表

自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。
以<dl>標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以<dt>開始。每個(gè)自定義列表項(xiàng)的定義以<dd>開始。
用于對術(shù)語或名詞進(jìn)行解釋和描述，自定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號。
基本語法：

<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>

<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
</dl>

<dl>即“definition list（定義列表）”，
<dt>即“definition term（定義名詞）”，
而<dd>即“definition description（定義描述）”。

示例代碼：

<dl>
<dt>計(jì)算機(jī)</dt>
<dd>用來計(jì)算的儀器</dd>

<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置</dd>
</dl>

運(yùn)行結(jié)果：

以上就是HTML中常用的布局標(biāo)簽及其使用方法。在實(shí)際開發(fā)中，還可以結(jié)合CSS和JavaScript來實(shí)現(xiàn)更復(fù)雜的布局和交互效果。

掌握了這些HTML常用布局標(biāo)簽，你已經(jīng)擁有了構(gòu)建網(wǎng)頁的基礎(chǔ)工具。記住，好的布局不僅需要技術(shù)，更需要創(chuàng)意和對細(xì)節(jié)的關(guān)注。現(xiàn)在，打開你的代碼編輯器，開始你的布局設(shè)計(jì)之旅吧！

在線咨詢

上一篇：必練案例來啦！用HTML和CSS徒手畫哆啦A夢和小黃人
下一篇：Power Query抓取網(wǎng)絡(luò)數(shù)據(jù)的方法，CSV格式取URL

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML網(wǎng)頁編程之Span標(biāo)簽

.什么是字體圖標(biāo)

2.字體圖標(biāo)常用免費(fèi)資源

3.字體圖標(biāo)使用步驟

一、理解布局的重要性

二、常用的布局標(biāo)簽

1、div標(biāo)簽

2、span標(biāo)簽

3、table標(biāo)簽

4、form標(biāo)簽

5、列表標(biāo)簽

1）無序列表

2）有序列表

3）自定義列表

您的項(xiàng)目需求