大家好，我是理想國。
一、回顧上堂課
《零基礎學編程第5課：Html元素的樣式屬性》
上堂課我們教了Html元素中的樣式屬性。
在元素的開始標籤中，插入樣式屬性代碼" style= "" "，即可自定義這個元素的樣式外觀。不同的樣式屬性，可以用封號「 ; 」區分開。
一段示範代碼：
<p style="font-size: 12px;">一年之際在於<strong style="font-size: 16px; color: green;">春</strong>，一日之際在於<strong style="font-size: 16px; color: blue;">晨</strong>。</p>
在網頁上顯示為：
作業一：
參考答案如下：
attribute - 屬性
family - 家族
style - 樣式，風格
variant - 多樣的，變化
weight - 重量
size - 尺寸
decoration - 裝飾
italic - 斜體
small-caps - 小寫
normal - 正常
bold - 粗體
underline - 下劃線
作業二：
我曾經問過自己，你最喜歡的男人是不是我，現在我已經不想再知道啦。
如果有一天我忍不住問起，你一定要騙我，就算你心裡有多麼不願意，也不要告訴我你最喜歡的人不是我。
參考答案如下：
<p style="font-size: 16px;">我曾經問過自己，你最喜歡的男人<strong>是不是</strong>我，<span style="font-style: italic;">現在我已經不想再知道啦</span>。</p>
<p style="font-size: 16px;"><span style="text-decoration: underline;">如果有一天我忍不住問起</span>，你一定要<span style="color: red;">騙我</span>，就算你心裡有多麼不願意，也不要告訴我你<span style="font-size: 20px; color: green;">最喜歡</span>的人不是我。</p>
網頁上表現為：
這個作業做起來，是不是有同學傷腦筋了，不知道怎樣把文字變成斜體或是下劃線？放入<p></p>中，會自動變成一行。那怎樣子才能在同一行中做成某些文字斜體或下劃線呢？
參考答案中我用的是<span></span>。細心的同學應該發現了，在《零基礎學編程第4課：Html的讀法是從內到外》中的作業一的講解中，我稍微提到過了<span></span>。這道作業就是特意考驗下同學們對之前的講解有沒有用心，會不會舉一反三，或是說會不會對課堂上一些新鮮的，沒有講透的內容去自行查資料學習。
二、span的用法
這堂課，我們就來好好講講span。
<span></span>是Html中非常常用的元素，我們在很多網站上經常看到。同學們可以看下面的示例自行體會，順便對上堂課講的樣式屬性做一些鞏固。
比如：
加粗：
<p>麵條還是<span style="font-weight: bold;">粗</span>一點好吃。</p>
加顏色：
<p>香蕉還沒有變<span style="color: yellow;">黃</span>最好不要吃。</p>
高亮：
<p>天空是<span style="background-color: blue;">藍色</span>的。</p>
下劃線：
<p>火車如果沒有<span style="text-decoration:underline; ">軌道</span>就會亂跑。</p>
隱身：
<p>你不是目中無人，而是<span style="display: none;">一葉障目</span>。</p>
變大：
<p>《皇室戰爭》中個子最高的應該是<span style="font-size: 72px;">巨人</span>。</p>
變小：
<p>《皇室戰爭》中個子最小的應該是<span style="font-size: 2px;">骷髏</span>。</p>
除了突出某些文字外，<span></span>還可以在網頁上變成一個漂亮的圖形，比如下面這段代碼：
<span style="background-color: #659be0; font-size: 14px; font-weight: 300; padding: 3px 6px; color: #fff;"> 立減20元折扣 </span >
把上面這段代碼放入到「閱讀原文」中的Html編輯器上，輸出框就會出現如下圖形：
如上圖所示，我們可以用<span></span>來創建一個折扣標籤。
三、課堂小結
本堂課隆重地介紹了<span></span>以及講解了他的用法。
<span></span>不僅可以在一段文字中突出某些特定文字，還可以單獨使用去突出網頁上的信息。
這裡，我們順便學習一下這堂課新引入的一些概念：
四、作業
看下面截圖，請自行寫出代碼去實現截圖中的元素。請把代碼寫在本頁留言中。寫完代碼後，點擊「閱讀原文」，把你的代碼複製粘貼到<HTML>Body的方框中，看看自己的代碼是否能得出這段文字，並且截圖到群裡。
看到這裡，發現自己還沒有入群，也就是還沒有報名的朋友，如果你想要報名這個0基礎編程教學，請參考《期待已久的編程教學開課了》，有報名方式以及我的聯繫方式。
覺得本文還可以的話，
可以給理想國打賞0.99元。
讓理想國跟家人好交待，
理想國的時間花去哪兒了。