HTML img標簽和超鏈接標簽詳細介紹
發(fā)布時間：2025-06-20 17:00:45 作者：椰椰椰耶 
我要評論
我要評論文章介紹了HTML中img標簽的使用,包括src屬性（指定圖片路徑）、相對/絕對路徑區(qū)別、alt替代文本、title提示、寬高控制及邊框設置等，本文主要給大家介紹HTML img標簽和超鏈接標簽的相關知識，感興趣的哦朋友一起看看吧
img 標簽
img 是一個單標簽
src 屬性
img 標簽必須搭配 src 使用（指定圖片的路徑）
相對路徑：
./xxx.png./img/xxx.png../xxx.png
絕對路徑：
- 圖片路徑
- 網絡上的圖片資源
<html>
<head>
圖片插入演示
</head>
<body>
<p>
<strong>
相對路徑下插入圖片：
</strong>
在本目錄下：<img src="cloud.png">
<br/>
在本目錄文件夾中：<img src="img/cloud.png">
<br/>
<strong>
絕對路徑下插入圖片：
</strong>
<br/>
輸入圖片路徑：<img src="D://My Computer/cloud.png">
<br/>
網絡上的圖片資源：<img src="https://stricky-1319251483.cos.ap-chongqing.myqcloud.com/stricky/pic/202409111630616.png">
</p>
</body>
</html>alt 屬性
- 當文本不能正確顯示的時候，就會顯示一個賦給
alt用來替換的文字 alt后面的文案，是只有當圖片加載出錯的時候才會顯示，如果圖片加載成功，則不會顯示
<html>
<head>
<title>這是 img 其他屬性演示</title>
</head>
<body>
<p>
白云圖片：<img src="cloud.pnggg" alt="白云圖片加載出現問題">
</p>
</body>
</html>
title 屬性
- 提示文本，鼠標放到圖片上，就會有提示
<html>
<head>
<title>這是 img 其他屬性演示</title>
</head>
<body>
<p>
白云圖片：<img src="cloud.png" alt="白云圖片加載出現問題"
title="這是一張美麗的白云圖片">
</p>
</body>
</html>
width/height 屬性
- 控制寬度高度
- 高度和寬度一般改一個就行，另外一個會等比例縮放，否則圖片就會失衡
<html>
<head>
<title>這是 img 其他屬性演示</title>
</head>
<body>
<p>
白云圖片：<img src="cloud.png" alt="白云圖片加載出現問題"
title="這是一張美麗的白云圖片" wight="200px">
</p>
</body>
</html>px代表像素，就是圖片上許多的亮點。像素越大，圖片就越大
border 屬性
加上邊框，參數是寬度的像素，但是一般是使用 CSS 來設定
<html>
<head>
<title>這是 img 其他屬性演示</title>
</head>
<body>
<p>
白云圖片：<img src="cloud.png" alt="白云圖片加載出現問題"
title="這是一張美麗的白云圖片" wight="200px" border="10px">
</p>
</body>
</html>border 后面跟邊框的大小
- 標簽后面的屬性順序是沒有要求的，順序對顯示結果沒有影響
- 每個屬性之間用 空格 或者 回車 隔開都可以
value都寫在“”里面
超鏈接標簽：a
href：必須具備，表示點擊后會跳轉到哪個頁面target：代表打開方式，默認是_self，直接在原頁面打開新頁面；如果是_blank，則用新的標簽頁打開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>href 演示</title>
</head>
<body>
<a >點擊跳轉百度</a>
<a ><img src="baidu.png" border="5px"></a>
<a href="#">跳轉到當前頁面</a>
</body>
</html>
#是一個占位符，仍然是當前地址- 前兩個都是直接跳轉到百度，第三個仍然是留在當前網頁
表格標簽
table標簽：表示整個表格tr：表示表格的一行td：表示一個單元格th：表示表頭單元格，會居中加粗thead：表格的頭部區(qū)域（注意和th區(qū)分，范圍是比th要大的）tbody：表格得到主體區(qū)域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px" width="800" height="400" cellspacing="0"
cellpadding="50" align="center">
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>王五</td>
<td>女</td>
<td>18</td>
</tr>
</table>
</body>
</html>border：控制邊框粗細width、width：控制表格大小cellspacing：控制單元格之間的距離，默認是2像素cellpadding：控制內容距離邊框的距離，默認是1像素align：控制表格相對于周圍元素的對齊方式
表格標簽有一些屬性，可以用于設置大小邊框等，但是一般使用
CSS方式來設置。這些屬性都要放到table標簽中
align是表格相對于周圍元素的對齊方式，align="center"（不是內部元素的對齊方式）border表示邊框，1表示有邊框（數字越大，邊框越粗），""表示沒邊框.cellpadding：內容距離邊框的距離，默認1像素cellspacing：單元格之間的距離，默認為2像素width / height：設置尺寸
注意： 這幾個屬性vscode都提示不出來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px" width="800" height="400" cellspacing="0"
cellpadding="50" align="center">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>王五</td>
<td>女</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>一般把表頭的信息放在 thead 中，表格信息放在 tbody 中
合并單元格
將需要合并的單元格數量直接加在 td 后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px" width="800" height="400" cellspacing="0"
cellpadding="50" align="center">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td rowspan="2">男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<!-- <td>男</td> -->
<td>19</td>
</tr>
<tr>
<td colspan="2">王五/女</td>
<!-- <td>女</td> -->
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>- 合并列就用
rowspan；合并行就用colspan - 后面的數字就是要和并的單元格數量
- 合并后，被合并的單元格附近的單元格會被擠開，要將其給注釋掉
到此這篇關于HTML img標簽和超鏈接標簽的文章就介紹到這了,更多相關html img標簽和超鏈接標簽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
- 這篇文章主要介紹了HTML圖片img標簽的相關資料,需要的朋友可以參考下2017-06-21
- html中 img標簽顯示圖片中心的方法目前知道三種，下面小編把他分享到腳本之家平臺，需要的朋友參考下2017-04-13
- 這篇文章主要介紹了HTML/XHTML中img圖像標簽的基本用法,文中列出了img標簽的一些常用屬性,需要的朋友可以參考下2016-03-06
- HTML的img標簽：alt屬性和title屬性，很多人看來對這兩個屬性感到迷惑，所以我寫下我的想法，如何去用它們2014-02-20
- <a>是超鏈接標簽，什么是超鏈接呢？這篇文章主要介紹了HTML超鏈接a標簽的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-21
- 這篇文章主要介紹了HTML中的超鏈接標簽使用教程,包括郵件鏈接的使用方法,需要的朋友可以參考下2016-07-08
- 這篇文章主要介紹了XHTML中的超鏈接標簽使用教程,包括錨鏈接和鏈接相對地址用法的介紹,需要的朋友可以參考下2016-03-06
html超鏈接a標簽的href跳轉跟onclick之間執(zhí)行順序示例介紹
html超鏈接a標簽的href跳轉跟onclick之間執(zhí)行關系：如果onclick返回false，則a不進行跳轉，如果onclick返回true，則a跳轉，感興趣的朋友可以了解下本文2014-01-07