在html網頁中如何插入圖片（1）

在編寫的網頁中插入圖片，可以使瀏覽網頁的用戶獲得更好的體驗結果，那么如

安在網頁中插入一個圖片那，本年夜神就來給大師具體講解下，在網頁中若何插入

一張圖片。

東西/原料

windows記事本（肆意一個版本即可）
Sublime(也是一種記事本)
肆意一個瀏覽器即可（這里利用Google Chrome瀏覽器）

方式/步調

1
1.如圖所示，我們新建一個記事本，并將記事本的名字改為“插入圖片.html”
，并回車鍵確定，以使文件轉化為瀏覽器可以打開的html網頁文件。
2
2..如圖所示，我們在這個html文件上鼠標右擊，在彈出的下拉列表中，我們依
次選擇“打開體例（H）”再選擇“選擇默認法式（C）...”然后鼠標點擊確定
打開此項。
3
3..如圖所示，在這個選擇法式的對話框中，我們選擇“Sublime Test”這個程
序，打開這個html文件。
4
4..如圖所示，我們輸入html5的聲明標簽為—<！DOCTYPE html>，以告訴瀏覽器
我們編寫的是一個html5的網頁。
5
5.如圖所示，我們依次先用<html>這個標簽包住網頁的本家兒體，這個是必需的。
6
6..如圖所示，我們接下來我們在里面依次編寫html5網頁的頭部標簽—
<head></head>這一對標簽。
7
7如圖所示，我們再編寫本家兒體部門的標簽—<body>和</body>。（html標簽一般
是當作對呈現的好比：<head>和</head>這一對。）
8
8.如圖所示，我們先插入一個<title>標簽，為這個網頁設置一個題目，題目為
“插入圖片”。
9
9.如圖所示，我們為了時我們的網頁在各瀏覽器中不呈現亂碼問題，我們設置我
們網頁的編碼體例為utf-8，如許就可以避免呈現亂碼的問題（utf-8為萬國碼，
可以幾乎編碼息爭碼地球上所有的文字）。
10
10.如圖所示，我們寫一個<img>標簽用于插入圖片，在src屬性中寫入圖片的地址
，在alt中寫入這個圖片的描述。<img />是自竣事標簽。（標簽格局一般是：<
標簽名屬性=“”屬性=“”... >如許的）。
11
11.如圖所示，我們再寫個沒有圖片的標簽，以便展示再沒有圖片時alt描述帶來
的感化。（因為有時因為網速等原因，會使圖片無法展示出來，這是用圖片描述
來取代一下，就不至于很空白了。）
12
12.如圖所示，我們鼠標右擊在彈出的下拉列表選擇，在“瀏覽器中打開”，我
們就可以看到我們編寫的網頁了。
13
13.如圖所示，我們看到第一個是圖片正常顯示的結果，第二張是圖片展示不了
的環境下，也有alt的描述，不至于很空白。
14
14.如圖所示，我們給這個先前沒有圖片準確地址的圖片，寫一個準確的資本地
址。我們再給這張圖片設置下標簽的屬性，設置圖片的寬度width=“500”,設置
圖片的高度height=“900”。
15
15.如圖所示，我們看到圖片準確的顯示了，可是圖片有些變形，這就是申明我
們可以隨意設置圖片的寬度和高度，瀏覽器也會去顯示，不會管設置的圖片是否
變形的。（若是我們需要設置可以只設置高度或者寬度肆意一個，另一個讓其按
比例放年夜或縮小就ok了，這個瀏覽器就可以幫我們做如許的自順應的。）
16
16.如圖所示，我們可以在<img>圖片標簽的屬性src屬性中寫入相對路徑還可以
寫入絕對路徑，還可所以收集路徑，都是ok的。
17
16.這是本教材的源碼，供給大師參考哦！

<!DOCTYPE html>

<html>

<head>

<title>hui插入圖片演示</title>

<meta charset="utf-8" />
</head>

<body>

<img src="C:\Users\Administrator\Desktop\英語單詞年夜闖關\戰機.png"
alt="年夜神的飛機" />

<img src="#" alt="年夜神的飛機" />

<img src="C:\Users\Administrator\Desktop\英語單詞年夜闖關\戰機.png"
alt="年夜神的飛機" width="500" height="900" />

</body>
</html>
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
?繼續進修點擊查看下面持續經驗?
?在html網頁中若何建立一個內聯框架 (2)?
https://jingyan.baidu.com/article/6525d4b18a9fb8ac7d2e94b1.html
?在html網頁中若何在圖片上加一個鏈接（3）?
https://jingyan.baidu.com/article/11c17a2cd059cdf446e39dd3.html
?html中若何引入外部css文件和外部js文件（4）?
https://jingyan.baidu.com/article/e9fb46e135a4b97521f766d8.html
?網頁中塊元素和內聯元素區分（5）?
https://jingyan.baidu.com/article/455a99506cc368a167277841.html
?網頁中常用選擇器的利用（6）?
https://jingyan.baidu.com/article/e73e26c06979b524adb6a7cc.html
?網頁中的兒女選擇器和子元素選擇器（7）?
https://jingyan.baidu.com/article/546ae185cab3621149f28cc3.html
?網頁中偽類選擇器的利用（8）?
https://jingyan.baidu.com/article/4d58d5416f39099dd4e9c0c7.html
?CSS的偽類利用（9）?
https://jingyan.baidu.com/article/c1465413e1d3700bfdfc4c42.html
?CSS屬性選擇器利用（10）?
https://jingyan.baidu.com/article/2fb0ba40f3eefa00f3ec5f73.html
?CSS子元素的偽類利用（11）?
https://jingyan.baidu.com/article/7082dc1c35cdbbe40a89bdef.html
?CSS兄弟元素選擇器（12）?
https://jingyan.baidu.com/article/fdffd1f8669086f3e98ca192.html
?CSS否認偽類利用（13）?
https://jingyan.baidu.com/article/915fc414ac8a4c51394b2094.html
?CSS樣式的擔當介紹（14）?
https://jingyan.baidu.com/article/546ae185ca61621149f28c95.html
?CSS選擇器優先級介紹（15）?
https://jingyan.baidu.com/article/375c8e19f5fd8c25f3a2296e.html
?CSS偽類選擇器的挨次介紹（16）?
https://jingyan.baidu.com/article/a65957f43eca0424e67f9b3b.html
(??ˇ?ˇ?)
＃〓§〓〓〓〓〓§〓〓〓〓〓〓§〓〓〓〓〓§〓＃
　　↓　　　　　↓　　　　　　↓　　　　　↓
　☆★☆　　　☆★☆　　　　☆★☆　　　☆★☆
☆　祝　☆　☆　你　☆　　☆　幸　☆　☆　福　☆
　☆★☆　　　☆★☆　　　　☆★☆　　　☆★☆
　　↓　　　　　↓　　　　　　↓　　　　　↓
　　※　　　　　※　　　　　　※　　　　　※