Web前端開發(fā)基礎(chǔ)知識(shí)，設(shè)置網(wǎng)頁背景圖，如何在網(wǎng)頁中插入圖片

片

一、圖片的表現(xiàn)形式

當(dāng)我們?cè)谥谱黜撁娴臅r(shí)候，通常會(huì)遇到圖片的三種表現(xiàn)形式，如下：

1、內(nèi)容圖片

內(nèi)容圖片是頁面中真正的內(nèi)容，沒有內(nèi)容圖片，就無法完整的理解頁面內(nèi)容。如淘寶網(wǎng)上的商品展示圖片，這些圖片是網(wǎng)頁的一部分，它們能幫助你決定這個(gè)頁面的內(nèi)容是否是你需要的。

內(nèi)容圖片

2、布局圖片

布局圖片出現(xiàn)在頁面背景中，要想理解頁面的內(nèi)容，它們不是必須的。如蘋果官網(wǎng)的這個(gè)圖片，沒有這個(gè)圖片也能理解頁面上文字描述的內(nèi)容是什么意思。

布局圖片

3、交互圖片

圖中用紅色框起來的圖片會(huì)給你瀏覽頁面的時(shí)候帶來一些幫助，如搜索圖片，一看到就知道這里可以搜索想要的東西，購物車圖片可以看到選購的產(chǎn)品，箭頭圖片點(diǎn)擊可以看到更詳細(xì)的產(chǎn)品等。

交互圖片

二、創(chuàng)建內(nèi)容圖片

在HTML中我們用 img 標(biāo)簽創(chuàng)建圖片，英文是image的縮寫。

<img src="" alt="">

內(nèi)容圖片

img是空標(biāo)簽，沒有結(jié)束標(biāo)簽
src屬性的值是一個(gè)圖片的URL地址，地址可以是相對(duì)路徑，也可以是絕對(duì)路徑
alt屬性：填寫對(duì)這張圖片的簡單描述，增加圖片的可訪問性
圖片應(yīng)該被存放在單獨(dú)的文件夾中，如：images文件夾

三、創(chuàng)建布局圖片

布局圖片是在CSS中被創(chuàng)建出來的，使用CSS中的background屬性，如：

1）background-color 定義背景顏色，設(shè)置背景圖片時(shí)，要始終設(shè)置背景顏色，確保背景圖片沒有成功時(shí)會(huì)顯示一個(gè)背景顏色

2）background-image 可以指向一個(gè)相對(duì)路徑或者絕對(duì)路徑來添加圖片。

3）background-repeat可以設(shè)置背景是否平鋪在容器中，包含四個(gè)關(guān)鍵字：

background-repeat：repeat 可以設(shè)置背景圖片橫向和縱向都平鋪。
background-repeat：no-repeat 設(shè)置圖片不平鋪，圖片默認(rèn)顯示在容器的左上角
background-repeat：repeat-x 設(shè)置圖片只能在橫向平鋪
background-repeat：repeat-y 設(shè)置圖片只能在縱向平鋪

4）background-position 屬性可以控制背景圖片顯示在什么位置，包含兩個(gè)關(guān)鍵字，如：

background-position：top left 設(shè)置圖片顯示在容器的左上角，第一個(gè)關(guān)鍵字可以是top、center、bottom，第二個(gè)關(guān)鍵字可以是left、center、right

CSS中和背景相關(guān)的屬性可以簡寫在一行中，如：

background: #FF1298 url(images/logo.png) center right no-repeat;

首先是圖片的顏色color，image，position，repeat，CSS屬性能用簡寫就盡量用簡寫，簡寫比分開寫性能更高。

布局圖片

四、創(chuàng)建用戶交互圖片

Web上最常用的三種圖像格式

1）Jpeg 可以展示一張照片或者復(fù)雜圖像

可以表示多達(dá)1600萬種顏色，即所有的十六進(jìn)制顏色
不支持圖像透明
不支持動(dòng)畫
擴(kuò)展名為.jpg或.jpeg

2）png最適合展示網(wǎng)頁插畫、logo和網(wǎng)頁小圖標(biāo)

可以表示上百萬種不同顏色的圖像
包括png-8、png-24和png-32，取決于想表示多少種顏色
可以設(shè)置顏色透明
不支持動(dòng)畫
擴(kuò)展名為.png

3）gif適合展示網(wǎng)頁插畫、logo和網(wǎng)頁小圖標(biāo)

可以表示最多256種不同顏色
可以設(shè)置顏色透明
支持動(dòng)畫
擴(kuò)展名是.gif

建議：

復(fù)雜顏色的圖像和照片則要使用jpeg格式
動(dòng)態(tài)圖像要使用gif格式
png格式的透明圖片要比gif格式的更平滑
這三種圖像相對(duì)于其他格式的圖像文件比較小，適合web頁面高效展示

一般情況下用戶交互圖片都是一些小圖標(biāo)，所以使用png或gif作為用戶交互圖片；使用CSS的background屬性以背景圖片的形式為網(wǎng)頁添加用戶交互圖片；推薦把用戶交互圖片放在同一個(gè)文件中，可以提高網(wǎng)絡(luò)和服務(wù)器性能，如：

交互圖片

具體如何操作呢？后續(xù)教頭會(huì)通過視頻給大家詳細(xì)演示，請(qǐng)繼續(xù)關(guān)注。

SVG（Scalable Vector Graphics）是一種基于XML的2D矢量圖形格式，可以實(shí)現(xiàn)圖像的無損縮放和高清晰度顯示。在HTML中嵌入SVG圖像，可以使網(wǎng)頁更加生動(dòng)有趣，提高用戶體驗(yàn)

<svg width="54" height="54" class="c-nav--footer__svgicon c-slackhash" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M19.712.133a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386h5.376V5.52A5.381 5.381 0 0 0 19.712.133m0 14.365H5.376A5.381 5.381 0 0 0 0 19.884a5.381 5.381 0 0 0 5.376 5.387h14.336a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386" fill="#44BEDF">
</path>
<path d="M53.76 19.884a5.381 5.381 0 0 0-5.376-5.386 5.381 5.381 0 0 0-5.376 5.386v5.387h5.376a5.381 5.381 0 0 0 5.376-5.387m-14.336 0V5.52A5.381 5.381 0 0 0 34.048.133a5.381 5.381 0 0 0-5.376 5.387v14.364a5.381 5.381 0 0 0 5.376 5.387 5.381 5.381 0 0 0 5.376-5.387" fill="#2EB67D">
</path>
<path d="M34.048 54a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386h-5.376v5.386A5.381 5.381 0 0 0 34.048 54m0-14.365h14.336a5.381 5.381 0 0 0 5.376-5.386 5.381 5.381 0 0 0-5.376-5.387H34.048a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386" fill="#ECB22E">
</path>
<path d="M0 34.249a5.381 5.381 0 0 0 5.376 5.386 5.381 5.381 0 0 0 5.376-5.386v-5.387H5.376A5.381 5.381 0 0 0 0 34.25m14.336-.001v14.364A5.381 5.381 0 0 0 19.712 54a5.381 5.381 0 0 0 5.376-5.387V34.25a5.381 5.381 0 0 0-5.376-5.387 5.381 5.381 0 0 0-5.376 5.387" fill="#E01E5A">
</path>
</g>
</svg>

HTML頁面中嵌入其他頁面的方法

在自己的頁面中嵌入其他頁面是一個(gè)非常重要的操作，既能豐富自己的頁面樣式又能增強(qiáng)頁面的信息量。

舉個(gè)例子，如果打算在自己的頁面中插入一個(gè)視頻網(wǎng)站的視頻該怎么做呢？

假如我現(xiàn)在自己的頁面中嵌入這個(gè)視頻，

我只需要在視頻下側(cè)找到"分享"。

點(diǎn)擊之后出現(xiàn)這樣的對(duì)話框，如圖：

通過在我們的頁面中粘貼這段通用代碼就可以顯示這個(gè)視頻了。

代碼如下：

<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>

下面就寫到我們的頁面中試試吧。

首先復(fù)制"第一個(gè)網(wǎng)頁.html"文件，改名為"在頁面中嵌入頁面.html"保存，然后用記事本打開，修改<head></head>標(biāo)簽中的<title>第一個(gè)頁面</title>編輯為"在頁面中嵌入頁面"即可，完整代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在頁面中嵌入頁面</title>
  </head> 
  <body>
  <iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>
  </body>
  </html>

頁面效果如下：

怎么樣，是不是很神奇！

下面我們來分析一下這段代碼的含義。

首先要引入一個(gè)新標(biāo)簽<iframe>，HTML的使用手冊(cè)中翻譯為"框架"，說實(shí)話，這么翻譯初學(xué)者是不知所云的。這個(gè)框架元素的主要作用就是在自己的頁面中嵌入其他頁面。

在<iframe>標(biāo)簽中先指定路徑屬性即src。這里使用的是單引號(hào)，實(shí)際上只要是半角符號(hào)，單引號(hào)和雙引號(hào)都可以的。

然后設(shè)置長寬屬性，即width和height，大家可以嘗試改變數(shù)據(jù)看看。

frameborder可以為iframe的窗口指定一個(gè)邊框，大家可以嘗試把0改成1看看。大家注意哈，這里輸入30和輸入1是一樣的，因?yàn)檫@個(gè)屬性不是定義邊框的寬度，而是定義是否顯示邊框！在編程中叫做布爾值，0代表沒有邊框，1代表有邊框！和我們點(diǎn)燈的開關(guān)一樣！

如圖：多了個(gè)邊框出來。

最后'allowfullscreen'這個(gè)描述非常的奇葩，把它刪掉沒有任何影響。不曉得是干什么的，主要是也不符合html的語法（也可能是我沒見識(shí)）。如果有詳細(xì)了解的小伙伴歡迎留言指教，感激不盡。

下面我們嘗試修改一下src屬性，給它一個(gè)別的路徑看看。例如:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在頁面中嵌入頁面</title>
  </head> 
  <body>
  <iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'>
  </iframe>
  </body>
  </html>

需要注意的是，修改了src并保存文件之后要把原頁面關(guān)閉然后重新打開才可以正常顯示！

效果如下：

在瀏覽網(wǎng)頁時(shí)我們還經(jīng)常遇到這樣的情況，就是有一個(gè)獨(dú)立窗口顯示嵌套的頁面，上面有個(gè)標(biāo)題，一點(diǎn)擊就會(huì)跳到那個(gè)嵌入的頁面上，這個(gè)其實(shí)很簡答，使用一個(gè)<a></a>元素即可辦到，示例代碼如下:

<a href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作</a>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'></iframe>

頁面示例如下：

框架元素并沒有換行，所有我們可以推測出<iframe>標(biāo)簽實(shí)際上是個(gè)內(nèi)聯(lián)元素，如何讓它換行呢？

為<iframe>的style屬性中寫入display:block即可。這句代碼的意思是按照塊元素來顯示<iframe>內(nèi)容。

示例代碼如下：

<iframe height=498 width=510 style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'></iframe>

頁面效果如下：

是不是很有意思。

下面我們來介紹一個(gè)更有趣的玩法。如圖所示：

這個(gè)怎么做呢？

這就要介紹<iframe>標(biāo)簽中的另一個(gè)屬性：name（名字）

示例代碼如下：name="iframe"

<iframe name = "iframe" height=498 width=510style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>

這里講個(gè)題外話，如果大家了解中國古代的"請(qǐng)神術(shù)"的話就會(huì)知道這樣一個(gè)有趣的傳說，就是如果我們能叫出鬼神的名字就可以驅(qū)使它。

編程也是這樣，我們給函數(shù)或變量一個(gè)名字后，就可以隨時(shí)隨地的驅(qū)使它。

現(xiàn)在我們給<iframe>起了個(gè)名字叫做"iframe"，當(dāng)然您可以使用其他名字也沒問題，但要使用英文或漢語拼音命名，名字是英語字母組合最好。

有了名字之后，<a>標(biāo)簽就要驅(qū)使<iframe>標(biāo)簽來顯示自己路徑下的內(nèi)容，如何驅(qū)使呢？

大家還記得<a>標(biāo)簽中有一個(gè)target屬性嗎？只要讓target="iframename"即可！

也就是target="iframe"。示例代碼如下：大家要注意的是<a>標(biāo)簽也是內(nèi)聯(lián)元素，也需要添加display:block，不然也是排在一列顯示。

<a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作</a><!--第一個(gè)a鏈接的是頭條文章-->
<a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"> 殲20戰(zhàn)斗機(jī)百科</a><!--第二個(gè)a鏈接的是百度百科-->
<a style = "display:block;"target="iframe" href="image1.jpg">IT美女</a><!--第三個(gè)a鏈接的是本地圖片-->
<iframe name = "iframe" height=498 width=510style = "display:block;"></iframe>

只要我們?yōu)椴煌?lt;a>標(biāo)簽賦予target="iframe"的屬性，點(diǎn)擊這些<a>標(biāo)簽就可以在叫做"iframe"的框架元素中顯示自己的頁面。這時(shí)我們可以把<iframe>標(biāo)簽中的src屬性刪除掉，保存文件后，關(guān)閉測試網(wǎng)頁，再重新打開，效果如下:

初始狀態(tài)下，因?yàn)榭蚣茉刂械膕rc是空的，所以打開后是空白的。如果您覺得單調(diào)可以任意復(fù)制3個(gè)<a>中的一個(gè)href中的鏈接路徑給<iframe>的src屬性，打開就是相應(yīng)的標(biāo)簽。這個(gè)就不演示了，大家自己試試即可。

點(diǎn)擊第一個(gè)鏈接效果如下：

點(diǎn)擊第二個(gè)鏈接如下：

點(diǎn)擊第三個(gè)鏈接如下：

最后再強(qiáng)調(diào)一下，改完框架的src屬性后需要關(guān)閉頁面后重新打開才可以，刷新的話并不能正確顯示！切記！

今天的示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在頁面中嵌入頁面</title>
  </head> 
  <body>
  <a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作</a>
  <a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">殲20戰(zhàn)斗機(jī)百科</a>
<a style = "display:block;" target="iframe" href="image1.jpg">IT美女</a>
<iframe name = "iframe" height=498 width=510 style = "display:block;"></iframe>
</body>
</html>

今天的內(nèi)容結(jié)束了，明天我將會(huì)為大家介紹<object>和<embed>這兩個(gè)標(biāo)簽，它們可以在頁面中嵌入更多有趣的東西。

喜歡的小伙伴請(qǐng)關(guān)注我，閱讀中遇到任何問題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在線咨詢

上一篇：不要重復(fù)造輪子，2024 年前端開發(fā)必須了解的 7 種 CSS 框架
下一篇：HTML前端常用標(biāo)簽(復(fù)習(xí))

您的項(xiàng)目需求

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

整合營銷服務(wù)商