HTML--圖像

時間 2019-11-20

標籤 html 圖像欄目 HTML 简体版

原文原文鏈接

直接上代碼，以下html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <img src="http://192.168.2.67:8080/Resource/caren/User/1000000001/20151102162609468bg.png" width="128" height="128">
</body>
</html>

圖像標籤<img>和源屬性src測試

HTML中，圖像由<img>標籤訂義，<img>是個空標籤，它只有開始標籤，沒有閉合標籤。url

要在頁面上顯示圖像，咱們須要使用源屬性(src)，源屬性的值是圖像的URL地址。
code

定義圖像的語法是htm

<img src="url"/>

url指定圖像存儲的位置。圖片

2.替換文本屬性(Alt)utf-8

alt屬性用來爲圖片定義一串可替換的文本。替換的內容是由用戶自定義的。it

<img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" width="128" height="128" alt="圖片加載失敗，請稍後再試" />

3.背景圖片class

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body background="file:///D:/caren/User/1000000001/20151102162609468bg.png">
    <h2>測試背景圖片</h2>
    <p>若是圖片小於背景頁面，圖像會重複顯示</p>
</body>
</html>

圖片以下file

4.在文字中排列圖片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <h2>未設置對齊方式的圖像，默認是底部</h2>
    <p>圖像 <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png"> 在文本中</p>
    <h2>已設置對齊方式的圖像</h2>
    <p>圖像 <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" align="bottom"> 在文本中，設置圖像屬性爲bottom</p>
    <p>圖像 <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" align="middle"> 在文本中，設置圖像屬性爲middle</p>
    <p>圖像 <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" align="top"> 在文本中，設置圖像屬性爲top</p>
</body>
</html>

5.圖像顯示在左右邊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <p>
        圖像屬性設置爲left，圖像顯示在文字的左邊
        <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" width="30" height="20" align="left">
    </p>
        圖像屬性設置爲right，圖像顯示在文字的右邊
        <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" width="30" height="20" align="right">
    <p>
    </p>
</body>
</html>

6.調整圖像尺寸

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <p>
        圖像屬性寬高30/20
        <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" width="30" height="20">
    </p>
    <p>
        圖像屬性寬高90/60
        <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" width="90" height="60">
    </p>
    <p>
        圖像屬性寬高180/120
        <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" width="180" height="120">
    </p>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。