HTML5和CSS是在web開發(fā)中最為常見的兩種語言之一。其中HTML5可以創(chuàng)建網(wǎng)頁的結(jié)構(gòu)，而CSS負(fù)責(zé)美化網(wǎng)頁的外觀。但是，一篇完整的網(wǎng)頁不僅僅只有文字和顏色，還需要圖片的加入。接下來，將介紹如何使用HTML5和CSS來加入圖片。
<!DOCTYPE html>
<html>
<head>
<title>加入圖片</title>
<style>
img {
width: 50%;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>這是一張圖片</h1>
<img src="example.jpg" alt="例子"/>
</body>
</html>以上是一個簡單的網(wǎng)頁模板，其中<img>標(biāo)簽是插入圖片的關(guān)鍵。在這個例子中，圖片名為example.jpg，存儲在與HTML文件在同一文件夾下的位置。在<img>標(biāo)簽中，我們設(shè)置了圖片的alt屬性來標(biāo)識圖片的含義。此外，我們還使用了CSS來控制圖片在網(wǎng)頁中的大小和位置。通過設(shè)置width屬性，我們使圖片的寬度為網(wǎng)頁寬度的一半，讓圖片顯示得更加協(xié)調(diào)美觀。
如果我們想在網(wǎng)頁中插入多張圖片，我們可以使用相同的<img>標(biāo)簽來插入多個圖片。我們只需要更改圖片路徑和alt屬性即可。以下是一個簡單的例子，插入了三張圖片：
<!DOCTYPE html>
<html>
<head>
<title>多張圖片</title>
<style>
img {
width: 30%;
display: inline-block;
margin: 20px;
}
</style>
</head>
<body>
<h1>這是多張圖片</h1>
<img src="example1.jpg" alt="例子1"/>
<img src="example2.jpg" alt="例子2"/>
<img src="example3.jpg" alt="例子3"/>
</body>
</html>在這個例子中，我們通過使用display屬性，將圖片布局為同一行中的多個元素。通過設(shè)置margin屬性，我們可以讓圖片之間產(chǎn)生20px的間距，更加美觀。
總之，HTML5和CSS不僅能夠創(chuàng)建基礎(chǔ)的網(wǎng)頁結(jié)構(gòu)和美化網(wǎng)頁設(shè)計，還能像上述例子中一樣幫助我們輕松地插入圖片。通過學(xué)習(xí)和理解這些語言，我們可以輕松創(chuàng)建美觀合理的網(wǎng)頁，并為網(wǎng)站用戶帶來更好的用戶體驗。