注意：手機（APP）打開，內容顯示更佳，不會的私聊博主即可
想要拿代碼或加入學習計劃（** 博主會監督你并且教你寫文章 **）的拉到最下面（PC端Web打開）加博主即可，目錄也在最下面。

參加1_bit博主前端學習計劃發文時再頭部記得機上本專欄鏈接，示例如下：

我已加入 1_bit 博主的免費前端 站起來 學習計劃，專欄鏈接：https://blog.csdn.net/a757291228/category_11609526.html

一、表格的使用

1.1 文字樣式

🐶1_bit：上一節咱們學習了表格的樣式，這一節咱們來學習文字和圖片的樣式。上一節我們通過表格知道了樣式設定需要通過一些特定的屬性，在這一節，文字的樣式和圖片的樣式也是通過對應的屬性進行更改的。

👸小媛：通過上一節的學習我覺得我已經知道了樣式的使用，只要知道屬性和對應值的給予基本上就可以了。

🐶1_bit：是這樣的，咱們現在已經學習過了標題標簽 h，咱們只需要給一個屬性 align 就可以使其對其，例如居中 center、左對齊 left、右對齊 right，就如同以下示例所示。

<h1 align="center">張小凡的有趣人生</h1>
<p align="center">我的人生很有趣啊很有趣啊很有趣呀很有趣...要說怎么有趣呢就是很有趣很有趣很有趣...</p>

🐶1_bit：此時這個頁面內容將會居中顯示。

👸小媛：是不是也可以設置 left、right 屬性？

🐶1_bit：對的，是不是很簡單？

👸小媛：是的。

1.2 字體

🐶1_bit：我們還可以設置字體，使用 face 屬性，例如如下示例。

<h1 align="center">張小凡的有趣人生</h1>
<p align="center"><font face="黑體">我的人生很有趣啊很有趣啊很有趣呀很有趣...要說怎么有趣呢就是很有趣很有趣很有趣...</font>
</p>

👸小媛：咦？這個 font 是什么標簽？

🐶1_bit：這個 font 是字體標簽，咱們可以使用 font 標簽設置其內部文本的字體、顏色、大小，例如下面這個示例。

<h1 align="center">張小凡的有趣人生</h1>
<p align="center"><font face="黑體" size="5" color="red">我的人生很有趣啊很有趣啊很有趣呀很有趣...要說怎么有趣呢就是很有趣很有趣很有趣...</font>
</p>

👸小媛：哇，明白了，感覺可以做彩虹色的文本顯示了。

🐶1_bit：哈哈哈，你可以試試。咱們還可以設置上標 sup標簽 和下標 sub標簽，例如下面代碼示例。

<h1 align="center">張小凡的有趣人生</h1>
<p align="center"><font face="黑體" size="5" color="red">我的人生很有趣啊很有趣啊很有趣呀很有趣...要說怎么有趣呢就是很有趣很有趣很有趣...</font><p>我的快樂就像<font color>快樂<sup>999</sup>*高興<sub>999</sub></font>一樣</p>
</p>

👸小媛：哈哈哈，很有意思，我學會了。

1.3 刪除線、斜體、加粗

🐶1_bit：當然還可以使用刪除線標簽 s 、斜體標簽 i 以及加粗標簽 b。

<h1 align="center">張小凡的有趣人生</h1>
<p align="center"><font face="黑體" size="5" color="red">我的人生很有趣啊很有趣啊很有趣呀很有趣...要說怎么有趣呢就是很有趣很有趣很有趣...</font><p>我的快樂就像<font color>快樂<sup>999</sup>*高興<sub>999</sub></font>一樣</p><p>我的快樂就像<s><font color>快樂<sup>999</sup>*高興<sub>999</sub></s></font><b>一樣</b><i>一樣</i></p>
</p>

1.4 不換行

👸小媛：還有什么文字的操作方法嗎？

🐶1_bit：還可以設置某行不換行，使用 nobr 標簽，其中 br 標簽是換行，那么 nobr 就是不換行，例如。

<h1 align="center">張小凡的有趣人生</h1><p align="center"><font face="黑體" size="5" color="red"><nobr>我的人生很有趣啊很有趣啊很有趣呀很有趣...要說怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要說怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要說怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要說怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要說怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要說怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要說怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要說怎么有趣呢就是很有趣很有趣很有趣...</nobr></font><p>我的快樂就像<font color>快樂<sup>999</sup>*高興<sub>999</sub></font>一樣</p><p>我的快樂就像<s><font color>快樂<sup>999</sup>*高興<sub>999</sub></s></font><b>一樣</b><i>一樣</i></p></p>

👸小媛：明白了。

🐶1_bit：那么接下來咱們就看看圖片標簽的使用方法吧。

👸小媛：好勒。

二、圖片

2.1 基礎圖片標簽的使用

接下來咱們就開始學習圖片標簽 img 的使用吧。

好勒，之前已經有過一點的學習了。

圖片標簽是使用 img，能夠使用常規的圖片格式，例如 jpg、gif、png等，一張簡單的圖片顯示如下示例。

<img src="./img/1.png">

其中 src 表示當前圖片的來源，其值是對應的路徑。一般來說如果沒有限制整個圖片的寬高，那么將會使圖片在網頁中呈現原圖比例大小的顯示，有時候在網頁中過大，此時可以給予 height 和 width 高寬設置具體的大小，例如如下示例。

<img width="100" height="100" src="./img/1.png">

2.2 圖片邊框

那可以加邊框嗎？

當然可以了，例如如下示例使用 border 為圖片增加邊框。

<img border="10" width="100" height="100" src="./img/1.png">

2.3 圖片水平垂直距離

如果有多張圖片我們可以設置其圖片的 水平間距 hspace 或者 垂直間距 vspace，例如如下代碼。

<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/1.png">
<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/1.png">
<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/1.png">
<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/1.png">
<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/1.png">
<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/1.png">
<img vspace="60" hspace="60" border="10" width="300" height="300" src="./img/1.png">
<img vspace="60" hspace="60" border="10" width="300" height="300" src="./img/1.png">
<img vspace="60" hspace="60" border="10" width="300" height="300" src="./img/1.png">
<img vspace="60" hspace="60" border="10" width="300" height="300" src="./img/1.png">
<img vspace="60" hspace="60" border="10" width="300" height="300" src="./img/1.png">
<img vspace="60" hspace="60" border="10" width="300" height="300" src="./img/1.png">

我突然想起來有時候鼠標移動到圖片上將會顯示文字這個怎么做？

2.4 圖片懸浮文本

這個只需要添加一個 title 標簽就可以了，例如如下示例。

<img title="別看了這是一張圖片" hspace="60" vspace="60" border="10" width="300" height="300" src="./img/1.png">

明白了，還有一個，我記得有時候圖片顯示不出來會顯示一個文字，這個怎么做？
這個只需要加一個 alt 屬性就可以了，例如如下示例。

<img alt="飛機" title="別看了這是一張圖片" hspace="60" vspace="60" border="10" width="300" height="300" src="./img/1.png">

原來如此。

2.5 圖片文本對齊

咱們圖片和文字一起出現的時候還可以添加對應的對齊方式，例如如下代碼示例。

<p>top 對齊——文字之中<img align="top" alt="飛機" title="別看了這是一張圖片" hspace="60" vspace="60" border="10" width="50" height="50" src="./img/1.png">出現了一張圖片
</p><p>middle 對齊——文字之中<img align="middle" alt="飛機" title="別看了這是一張圖片" hspace="60" vspace="60" border="10" width="50" height="50" src="./img/1.png">出現了一張圖片
</p><p>bottom 對齊——文字之中<img align="bottom" alt="飛機" title="別看了這是一張圖片" hspace="60" vspace="60" border="10" width="50" height="50" src="./img/1.png">出現了一張圖片
</p>

原來如此，明白了。

目錄

【前端就業課 第一階段】HTML5 零基礎到實戰（九）列表
【前端就業課 第一階段】HTML5 零基礎到實戰（八）表單詳解
【前端就業課 第一階段】HTML5 零基礎到實戰（七）文字及圖片樣式
【前端就業課 第一階段】HTML5 零基礎到實戰（六）表格詳解
【前端就業課 第一階段】HTML5 零基礎到實戰（五）基礎元素
【前端就業課 第一階段】HTML5 零基礎到實戰（四）偽類與偽元素
【前端就業課 第一階段】HTML5 零基礎到實戰（三）一篇文CSS基礎入門
【前端就業課 第一階段】HTML5 零基礎到實戰（二）超鏈接
【前端就業課 第一階段】HTML5 零基礎到實戰（一）基礎代碼結構詳解