Web前端開發——HTML之HTML標籤(Ⅲ)img

目錄

1. img標籤格式

2. img圖片路徑

3. 幾種相對路徑

4. 案例

4.1 效果圖

4.2 組織形式

4.3 代碼


1. img標籤格式

插入圖像時使用 img標籤,img標籤是單個標籤,格式爲:

<img src="路徑+文件名" alt="路徑無效時要顯示的文字">

2. img圖片路徑

路徑可分爲相對圖片路徑和絕對路徑

絕對路徑:以根目錄爲基準,如:<img src = “C:/site/logo.gif” />

相對路勁:以該文檔所在位置爲基準,如:<img src = “logo.gif” />

3. 幾種相對路徑

 

 

4. 案例

4.1 效果圖

4.2 組織形式

4.3 代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My site</title>
</head>
<body>
    <h3>常用站點</h3>
    <p>
        <img src="images\ifeng.png" alt="鳳凰網">
        <a href="https://www.ifeng.com/">鳳凰</a>
    </p>
    <p>
        <img src="images\sina.png" alt="新浪網">
        <a href="https://www.sina.com.cn/">新浪</a>
    </p>
    <p>
        <img src="images\sohu.png" alt="搜狐網">
        <a href="http://www.sohu.com/">搜狐</a>
    </p>
    <p>
        <img src="images\baidu.png" alt="百度網">
        <a href="https://www.baidu.com/">百度</a>
    </p>
</body>
</html>

注:img標籤和a標籤一樣,需要放在p標籤內纔會換行

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章