HTML常用基礎標簽：圖片與超鏈接標簽全解！

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

無論種子散落在何處

都會長出一棵樹

向著天空，掙扎生長

- 2024.03.15 -

HTML圖片標簽和超鏈接標簽是網(wǎng)頁開發(fā)中常用的兩種標簽，它們分別用于在網(wǎng)頁中插入圖片和創(chuàng)建超鏈接。

我們每天都在互聯(lián)網(wǎng)世界中與各種形式的信息打交道。你是否好奇過，當你點擊一篇文章中的圖片或鏈接時，是什么神奇的力量讓你瞬間跳轉(zhuǎn)到另一個頁面？

今天，就讓我們一起揭開HTML圖片標簽和超鏈接標簽的神秘面紗。

一、HTML圖片標簽

HTML圖片標簽是一種特殊的標記，它可以讓網(wǎng)頁顯示圖像。通過使用圖片標簽，我們可以在網(wǎng)頁上展示各種圖片，從而讓網(wǎng)頁更加生動有趣。

1、語法結(jié)構(gòu)

HTML圖片標簽的語法結(jié)構(gòu)非常簡單，只需要使用<img>標簽，并在其中添加src屬性，指定圖片的路徑即可。

例如：

<img src="image.jpg" alt="描述圖片的文字">

2、圖片格式

HTML支持多種圖片格式，包括JPEG、PNG、GIF等。不同的圖片格式具有不同的特點，可以根據(jù)需要選擇合適的格式。

3、圖片屬性

除了src屬性外，HTML圖片標簽還有其他一些常用的屬性，如：

alt屬性用于描述圖片的內(nèi)容，當圖片無法顯示時，會顯示該屬性的值；
width和height屬性用于設置圖片的寬度和高度；
title屬性用于設置鼠標懸停在圖片上時顯示的提示信息。

4、網(wǎng)絡圖片的插入

當需要插入網(wǎng)絡上的圖片時，可以將圖片的URL地址作為src屬性的值。例如：

<img src="https://www.example.com/images/pic.jpg" alt="示例圖片">

5、本地圖片的插入

當需要插入本地圖片時，可以將圖片的相對路徑或絕對路徑作為src屬性的值。

6、相對路徑與絕對路徑

在這里再給大家介紹兩個概念，相對路徑與絕對路徑，搞懂它們，我們在插入本地圖片時也能得心應手。

相對路徑：

相對于當前HTML文件所在目錄的路徑，包含Web的相對路徑（HTML中的相對目錄）。例如，如果圖片文件位于與HTML文件相同的目錄中，可以直接使用文件名作為路徑：

<img src="pic.jpg" alt="本地圖片">

絕對路徑：

圖片文件在計算機上的完整路徑（URL和物理路徑）。例如：

<img src="C:/Users/username/Pictures/pic.jpg" alt="本地圖片">

二、HTML超鏈接標簽

超鏈接標簽是HTML中另一個重要的元素，它可以實現(xiàn)網(wǎng)頁之間的跳轉(zhuǎn)。通過使用超鏈接標簽，我們可以將文本、圖片等內(nèi)容設置為可點擊的鏈接，方便用戶在不同頁面之間自由切換。

1、語法結(jié)構(gòu)

超鏈接標簽使用<a>標簽表示，需要在href屬性中指定鏈接的目標地址。

<a href="目標地址" title="標題">文本內(nèi)容</a>

例如：

<a href="https://www.ydcode.cn/">點擊訪問示例網(wǎng)站</a>

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例網(wǎng)站</title>
</head>
<body>
<h1>歡迎來到云端源想！</h1>
<p>這是一個簡單的HTML頁面，用于展示一個網(wǎng)站的結(jié)構(gòu)和內(nèi)容。</p>
<a href="https://www.ydcode.cn/">點擊訪問示例網(wǎng)站</a>
</body>
</html>

2、鏈接目標

超鏈接可以鏈接到不同的目標，包括其他網(wǎng)頁、電子郵件地址、文件下載等。通過設置href屬性的值，可以實現(xiàn)不同的鏈接目標。

3、鏈接屬性

超鏈接標簽還有一些其他常用的屬性，如：

target屬性用于設置鏈接打開的方式，可以選擇在新窗口或當前窗口打開鏈接；
title屬性用于設置鼠標懸停在鏈接上時顯示的提示信息；
rel屬性用于設置鏈接的關(guān)系，例如設置nofollow值可以告訴搜索引擎不要跟蹤該鏈接。

想要快速入門前端開發(fā)嗎？推薦一個前端開發(fā)基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結(jié)合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想

4、錨點鏈接標簽

錨點標簽用于在網(wǎng)頁中創(chuàng)建一個可以點擊的錨點，以便用戶可以通過點擊錨點跳轉(zhuǎn)到頁面中的其他部分。

錨點標簽的語法為：

<a name="錨點名稱"></a>

例如，可以在頁面中的一個段落前添加一個錨點：

<a name="section1"></a>
<p>這是一個段落。</p>

然后，可以在頁面的其他位置創(chuàng)建一個指向該錨點的超鏈接：

<a href="#section1">跳轉(zhuǎn)到第一節(jié)</a>

當用戶點擊“跳轉(zhuǎn)到第一節(jié)”鏈接時，頁面將滾動到名為“section1”的錨點所在的位置。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例網(wǎng)站</title>
</head>
<body>
<h1>歡迎來到云端源想！</h1>
<p><a href="#section1">跳轉(zhuǎn)到第一節(jié)</a></p>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<p>這是第三個段落。</p>
<a name="section1"></a>
<p>這是第一節(jié)的內(nèi)容。</p>
</body>
</html>

三、總結(jié)

HTML圖片標簽和超鏈接標簽是構(gòu)建網(wǎng)頁的兩個重要元素，它們不僅豐富了網(wǎng)頁的內(nèi)容，還為網(wǎng)頁添加了動態(tài)和互動性。

通過學習和掌握這兩個標簽的使用方法，我們可以創(chuàng)建更加豐富和互動的網(wǎng)頁，為用戶提供更好的瀏覽體驗。無論是展示精美的圖片，還是實現(xiàn)頁面之間的跳轉(zhuǎn)，HTML圖片標簽和超鏈接標簽都能幫助我們實現(xiàn)更多的創(chuàng)意和功能。

讓我們一起探索HTML的奇妙世界，創(chuàng)造出更加精彩的網(wǎng)頁吧！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內(nèi)容由：云端源想分享

級元素與內(nèi)聯(lián)元素的概念與區(qū)別

在HTML中，大多數(shù)元素都被定義為塊級元素或內(nèi)聯(lián)元素。

塊級元素通常會獨立成行，而內(nèi)聯(lián)元素會并排顯示。

在我們學過的元素中，

塊級元素如：<h> <p> <table>這些。

內(nèi)聯(lián)元素如<td><a><img>

下面我們通過練習來直觀看看他們的區(qū)別。

塊級元素展示，代碼如下：

<body>
  <h1>第一個網(wǎng)頁</h1><hr><h2>表格元素</h2><hr>
  <p>塊級元素與內(nèi)聯(lián)元素</p>
  <p>零基礎自學網(wǎng)頁制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如圖：

內(nèi)聯(lián)元素展示如下

示例代碼：這段代碼被我放在了</table>后面。

<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">殲20戰(zhàn)斗機</a>
<img src="img/戰(zhàn)斗機/image3.jpg" width = "200px"/>

效果如圖：

其中，<img>標簽中的width屬性規(guī)定了圖片的寬度為200px，也就是200像素。

HTML中，如果只對圖片的寬或高進行數(shù)值指定，那么未指定的數(shù)值會隨著指定數(shù)值進行等比例縮放！

熟知html元素是塊級還是內(nèi)聯(lián)對以后進行頁面布局有一定的指導意義。

<div>與<span>標簽

為了方便開發(fā)者對頁面內(nèi)容進行布局和調(diào)整，html開發(fā)者為html加入了專門的區(qū)塊元素<div></div>。

<div></div>是一個塊級元素，大家可以把它理解為一個容器，它本身是不會顯示在頁面上的。

比如這個！

筆者第一個漫畫作品

如果拋開畫面內(nèi)容，我們看到的是一堆對畫面進行分割的方格子。像這樣

<div></div>元素的作用就是對頁面進行了這樣的分割。

實際上我們的頁面布局都是基于這樣思路進行分割的，只是頁面上不會像漫畫一樣顯示外邊框而已。例如：

強制為其添加邊框分割：

大家看明白了嗎？<div></div>就是用來對頁面進行分割劃區(qū)域的。

通過給<div>標簽設置不同的id屬性，可以在css文件中對不同<div>區(qū)塊中的所有信息進行統(tǒng)一調(diào)整樣式的操作。

這是對塊級元素整體改變樣式的方法。

但是，如果我們想對一個塊級元素中的不同文字或圖片這些內(nèi)聯(lián)元素進行單獨操作怎么做呢？

html開發(fā)者為我們提供了<span></span>這樣的內(nèi)聯(lián)標簽。比如我們對<p>我有一個夢想</p>這個段落元素中的"夢想"兩個字進行變化顏色的操作，我們可以這樣寫：

通過對<span>指定不同的id或class屬性在CSS文件中對"夢想"二字進行改變顏色的操作而不會影響段落元素中的其他文字。

今天的內(nèi)容結(jié)束了，下一次我們建立一個新的頁面來簡單看看<div>元素的基本用法。

喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網(wǎng)頁制作

HTML是什么？——零基礎自學網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎自學網(wǎng)頁制作

HTML頁面中head標簽有啥用？——零基礎自學網(wǎng)頁制作

初識meta標簽與SEO——零基礎自學網(wǎng)頁制作

HTML中的元素使用方法1——零基礎自學網(wǎng)頁制作

HTML中的元素使用方法2——零基礎自學網(wǎng)頁制作

HTML元素中的屬性1——零基礎自學網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎自學網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎自學網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎自學網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網(wǎng)頁制作

封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎自學網(wǎng)頁制作

HTML表單元素初識1——零基礎自學網(wǎng)頁制作

HTML表單元素初識2——零基礎自學網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎自學網(wǎng)頁制作

HTML列表制作講解——零基礎自學網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎自學網(wǎng)頁制作

HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎自學網(wǎng)頁制作

avaScript奇淫技巧：20行代碼，實現(xiàn)屏幕錄像

本文展示一個技巧，可以給任何網(wǎng)站、網(wǎng)頁實現(xiàn)屏幕錄像功能。

即使你不是網(wǎng)站的管理者，也可以給它添加錄制功能。

方法如下：

第一步：

復制一段JS代碼，這段代碼是實現(xiàn)錄像功能的：

var body = document.body;
body.addEventListener("click",async function(){
var stream = await navigator.mediaDevices.getDisplayMedia({video: true});

var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";
var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});

//錄制
var chunks = [];
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})

//停止
mediaRecorder.addEventListener('stop', function(){
var blob = new Blob(chunks, {type: chunks[0].type});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'video.webm';
a.click();
})
//手動啟動
mediaRecorder.start()
});

第二步：

打開任意網(wǎng)站，比如JShaman官網(wǎng)：

然后調(diào)出“Web開發(fā)者工具”，并切換到“控制臺”。

第三步：

粘貼上面復制的JS代碼，并按下回車。

回車后會顯示出“undefined”：

第四步：

在網(wǎng)頁任意地方點擊鼠標，即可進行錄屏操作。

這時會彈出一個窗口，供選擇錄制范圍。

之后便開始錄制了。

當需要停止錄像時，點擊”停止共享”就可以了。

停止錄制后，剛剛錄制的內(nèi)容會自動保存成一個視頻文件：

打開便可播放：

在這整個過程中，最重要的是第一步中的JS代碼。

代碼可自行閱讀理解，大意是給document.body添加點擊事件，當點擊時，進行屏幕錄像。

所以，只要保存那段代碼，便可給任意網(wǎng)站添加錄像功能。

如果想要修改觸發(fā)條件，比如把鼠標點擊改為鼠標雙擊，只需修改addEventListener中的事件名稱即可。

例：改為雙擊：

var body = document.body;
body.addEventListener("dblclick",async function(){
var stream = await navigator.mediaDevices.getDisplayMedia({video: true});

var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";
var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});

//錄制
var chunks = [];
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})

//停止
mediaRecorder.addEventListener('stop', function(){
var blob = new Blob(chunks, {type: chunks[0].type});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'video.webm';
a.click();
})
//手動啟動
mediaRecorder.start()
});

如果在復制粘貼代碼時，不想讓別人看出你的代碼是什么意思，還可以對以上代碼進行混淆加密。

用JShaman對代碼進行加密：

得到加密代碼：

復制并使用這段代碼，使用跟之前一樣，但別人是無法理解代碼功能的。

使用：

最后，給出加密后的代碼，復制即可用，可用于任何網(wǎng)頁。

(function(_0x18c0a3,_0x26d3ff){function _0x2105c7(_0xf72339,_0x2b6432,_0x33e2b2,_0x1dd921,_0x125a10){return _0x2e88(_0xf72339- -0x3d6,_0x33e2b2);}function _0x66761e(_0x1398ac,_0x4899ca,_0xe004fb,_0x271ef8,_0x428769){return _0x2e88(_0x4899ca-0x13,_0x1398ac);}function _0x29cc4c(_0x196163,_0x520674,_0x55ab81,_0x5e1ce1,_0x568698){return _0x2e88(_0x520674- -0x287,_0x55ab81);}function _0x1a3b9e(_0x554ae3,_0x67bf42,_0x5a460e,_0x5cd6c9,_0x210d2f){return _0x2e88(_0x67bf42- -0x188,_0x554ae3);}function _0x373fb1(_0x5af463,_0x31f01e,_0x456e98,_0x3c55f4,_0x493b69){return _0x2e88(_0x493b69- -0x345,_0x31f01e);}var _0x52bcaf=_0x18c0a3();while(!![]){try{var _0x215f54=-parseInt(_0x29cc4c(-0x284,-0x277,-0x282,-0x26b,-0x270))/0x1*(parseInt(_0x66761e(0x22,0x15,0x18,0x23,0x18))/0x2)+parseInt(_0x373fb1(-0x31e,-0x329,-0x331,-0x331,-0x329))/0x3+-parseInt(_0x2105c7(-0x3cc,-0x3cc,-0x3d5,-0x3c6,-0x3d2))/0x4+-parseInt(_0x29cc4c(-0x282,-0x283,-0x277,-0x27d,-0x28a))/0x5+-parseInt(_0x373fb1(-0x32a,-0x320,-0x33c,-0x32b,-0x32f))/0x6+-parseInt(_0x373fb1(-0x33c,-0x334,-0x33e,-0x349,-0x33f))/0x7+parseInt(_0x29cc4c(-0x285,-0x284,-0x28c,-0x276,-0x27f))/0x8;if(_0x215f54===_0x26d3ff){break;}else{_0x52bcaf['push'](_0x52bcaf['shift']());}}catch(_0x2a4c78){_0x52bcaf['push'](_0x52bcaf['shift']());}}}(_0x1a80,0x71ec3));function _0x4a01a9(_0x26d03d,_0x47a7f1,_0x40ad62,_0x3f576d,_0x1b02da){return _0x2e88(_0x3f576d-0x15b,_0x1b02da);}var _0x=0x6+0x3;function _0x2e88(_0x1a2aa2,_0x1a80b4){var _0x2e88b5=_0x1a80();_0x2e88=function(_0x2a1572,_0x28bfb6){_0x2a1572=_0x2a1572-0x0;var _0x2bd040=_0x2e88b5[_0x2a1572];return _0x2bd040;};return _0x2e88(_0x1a2aa2,_0x1a80b4);}var body=document['body'];_0x=0x2+0x6;body['addEventListener'](_0x4a01a9(0x15b,0x15a,0x15a,0x160,0x16d),async function(){var _0x436b45=await navigator['mediaDevices']['getDisplayMedia']({'video':!![]});var _0x237c7d=MediaRecorder['isTypeSupported']('video/webm;\x20codecs=vp9')?'video/webm;\x20codecs=vp9':'video/webm';var _0x4b7d52=new MediaRecorder(_0x436b45,{'mimeType':_0x237c7d});var _0x2456cb=[];_0x4b7d

更多精彩文章：

JS奇淫技巧：數(shù)值的七種寫法

JavaScript奇淫技巧：隱寫術(shù)

JS奇淫技巧：alert有幾種寫法？

JavaScript奇淫技巧：變速齒輪

JavaScript奇淫技巧：收縮控制流

JavaScript奇淫技巧：按鍵精靈

JS奇淫技巧：一行賦值語句，能玩出多少花樣？

JavaScript奇淫技巧：命令行語法高亮

JavaScript奇淫技巧：清理無效的垃圾代碼

JavaScript奇淫技巧：利用數(shù)組加密并壓縮代碼

JavaScript奇淫技巧：壓縮并加密圖片

JavaScript奇淫技巧：把JS編譯成exe

JavaScript奇淫技巧：用try、catch實現(xiàn)JS代碼加密解密

JS小技巧：制作一個密碼保護的網(wǎng)頁

JavaScript黑暗技巧：變異的Eval

JS代碼混淆加密：JSON數(shù)據(jù)加密技巧

JS加密技術(shù)：平展控制流

奇思妙想之：用JS給圖片加口令

JavaScript黑暗技巧：禁止瀏覽器點擊“后退”按鈕

在線咨詢

上一篇：CKEDITOR – 支持WORD上傳的富文本編輯器
下一篇：「胖達分享」網(wǎng)頁中的圖片和html文檔的路徑

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商