這里是云端源想IT,幫你輕松學(xué)IT”
嗨~ 今天的你過得還好嗎?
無論種子散落在何處
都會(huì)長(zhǎng)出一棵樹
向著天空,掙扎生長(zhǎng)
- 2024.03.15 -
HTML圖片標(biāo)簽和超鏈接標(biāo)簽是網(wǎng)頁開發(fā)中常用的兩種標(biāo)簽,它們分別用于在網(wǎng)頁中插入圖片和創(chuàng)建超鏈接。
我們每天都在互聯(lián)網(wǎng)世界中與各種形式的信息打交道。你是否好奇過,當(dāng)你點(diǎn)擊一篇文章中的圖片或鏈接時(shí),是什么神奇的力量讓你瞬間跳轉(zhuǎn)到另一個(gè)頁面?
今天,就讓我們一起揭開HTML圖片標(biāo)簽和超鏈接標(biāo)簽的神秘面紗。
HTML圖片標(biāo)簽是一種特殊的標(biāo)記,它可以讓網(wǎng)頁顯示圖像。通過使用圖片標(biāo)簽,我們可以在網(wǎng)頁上展示各種圖片,從而讓網(wǎng)頁更加生動(dòng)有趣。
1、語法結(jié)構(gòu)
HTML圖片標(biāo)簽的語法結(jié)構(gòu)非常簡(jiǎn)單,只需要使用<img>標(biāo)簽,并在其中添加src屬性,指定圖片的路徑即可。
例如:
<img src="image.jpg" alt="描述圖片的文字">
2、圖片格式
HTML支持多種圖片格式,包括JPEG、PNG、GIF等。不同的圖片格式具有不同的特點(diǎn),可以根據(jù)需要選擇合適的格式。
3、圖片屬性
除了src屬性外,HTML圖片標(biāo)簽還有其他一些常用的屬性,如:
4、網(wǎng)絡(luò)圖片的插入
當(dāng)需要插入網(wǎng)絡(luò)上的圖片時(shí),可以將圖片的URL地址作為src屬性的值。例如:
<img src="https://www.example.com/images/pic.jpg" alt="示例圖片">
5、本地圖片的插入
當(dāng)需要插入本地圖片時(shí),可以將圖片的相對(duì)路徑或絕對(duì)路徑作為src屬性的值。
6、相對(duì)路徑與絕對(duì)路徑
在這里再給大家介紹兩個(gè)概念,相對(duì)路徑與絕對(duì)路徑,搞懂它們,我們?cè)诓迦氡镜貓D片時(shí)也能得心應(yīng)手。
相對(duì)路徑:
相對(duì)于當(dāng)前HTML文件所在目錄的路徑,包含Web的相對(duì)路徑(HTML中的相對(duì)目錄)。例如,如果圖片文件位于與HTML文件相同的目錄中,可以直接使用文件名作為路徑:
<img src="pic.jpg" alt="本地圖片">
絕對(duì)路徑:
圖片文件在計(jì)算機(jī)上的完整路徑(URL和物理路徑)。例如:
<img src="C:/Users/username/Pictures/pic.jpg" alt="本地圖片">
超鏈接標(biāo)簽是HTML中另一個(gè)重要的元素,它可以實(shí)現(xiàn)網(wǎng)頁之間的跳轉(zhuǎn)。通過使用超鏈接標(biāo)簽,我們可以將文本、圖片等內(nèi)容設(shè)置為可點(diǎn)擊的鏈接,方便用戶在不同頁面之間自由切換。
1、語法結(jié)構(gòu)
超鏈接標(biāo)簽使用<a>標(biāo)簽表示,需要在href屬性中指定鏈接的目標(biāo)地址。
<a href="目標(biāo)地址" title="標(biāo)題">文本內(nèi)容</a>
例如:
<a href="https://www.ydcode.cn/">點(diǎn)擊訪問示例網(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>這是一個(gè)簡(jiǎn)單的HTML頁面,用于展示一個(gè)網(wǎng)站的結(jié)構(gòu)和內(nèi)容。</p>
<a href="https://www.ydcode.cn/">點(diǎn)擊訪問示例網(wǎng)站</a>
</body>
</html>
2、鏈接目標(biāo)
超鏈接可以鏈接到不同的目標(biāo),包括其他網(wǎng)頁、電子郵件地址、文件下載等。通過設(shè)置href屬性的值,可以實(shí)現(xiàn)不同的鏈接目標(biāo)。
3、鏈接屬性
超鏈接標(biāo)簽還有一些其他常用的屬性,如:
想要快速入門前端開發(fā)嗎?推薦一個(gè)前端開發(fā)基礎(chǔ)課程,這個(gè)老師講的特別好,零基礎(chǔ)學(xué)習(xí)無壓力,知識(shí)點(diǎn)結(jié)合代碼,邊學(xué)邊練,可以免費(fèi)試看試學(xué),還有各種輔助工具和資料,非常適合新手!點(diǎn)這里前往學(xué)習(xí)哦!云端源想
4、錨點(diǎn)鏈接標(biāo)簽
錨點(diǎn)標(biāo)簽用于在網(wǎng)頁中創(chuàng)建一個(gè)可以點(diǎn)擊的錨點(diǎn),以便用戶可以通過點(diǎn)擊錨點(diǎn)跳轉(zhuǎn)到頁面中的其他部分。
錨點(diǎn)標(biāo)簽的語法為:
<a name="錨點(diǎn)名稱"></a>
例如,可以在頁面中的一個(gè)段落前添加一個(gè)錨點(diǎn):
<a name="section1"></a>
<p>這是一個(gè)段落。</p>
然后,可以在頁面的其他位置創(chuàng)建一個(gè)指向該錨點(diǎn)的超鏈接:
<a href="#section1">跳轉(zhuǎn)到第一節(jié)</a>
當(dāng)用戶點(diǎn)擊“跳轉(zhuǎn)到第一節(jié)”鏈接時(shí),頁面將滾動(dòng)到名為“section1”的錨點(diǎn)所在的位置。
示例:
<!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>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
<p>這是第三個(gè)段落。</p>
<a name="section1"></a>
<p>這是第一節(jié)的內(nèi)容。</p>
</body>
</html>
HTML圖片標(biāo)簽和超鏈接標(biāo)簽是構(gòu)建網(wǎng)頁的兩個(gè)重要元素,它們不僅豐富了網(wǎng)頁的內(nèi)容,還為網(wǎng)頁添加了動(dòng)態(tài)和互動(dòng)性。
通過學(xué)習(xí)和掌握這兩個(gè)標(biāo)簽的使用方法,我們可以創(chuàng)建更加豐富和互動(dòng)的網(wǎng)頁,為用戶提供更好的瀏覽體驗(yàn)。無論是展示精美的圖片,還是實(shí)現(xiàn)頁面之間的跳轉(zhuǎn),HTML圖片標(biāo)簽和超鏈接標(biāo)簽都能幫助我們實(shí)現(xiàn)更多的創(chuàng)意和功能。
讓我們一起探索HTML的奇妙世界,創(chuàng)造出更加精彩的網(wǎng)頁吧!
我們下期再見!
END
文案編輯|云端學(xué)長(zhǎng)
文案配圖|云端學(xué)長(zhǎng)
內(nèi)容由:云端源想分享
在HTML中,大多數(shù)元素都被定義為塊級(jí)元素或內(nèi)聯(lián)元素。
塊級(jí)元素通常會(huì)獨(dú)立成行,而內(nèi)聯(lián)元素會(huì)并排顯示。
在我們學(xué)過的元素中,
塊級(jí)元素如:<h> <p> <table>這些。
內(nèi)聯(lián)元素如<td><a><img>
下面我們通過練習(xí)來直觀看看他們的區(qū)別。
塊級(jí)元素展示,代碼如下:
<body>
<h1>第一個(gè)網(wǎng)頁</h1><hr><h2>表格元素</h2><hr>
<p>塊級(jí)元素與內(nèi)聯(lián)元素</p>
<p>零基礎(chǔ)自學(xué)網(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>表格標(biāo)題</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)斗機(jī)</a>
<img src="img/戰(zhàn)斗機(jī)/image3.jpg" width = "200px"/>
效果如圖:
其中,<img>標(biāo)簽中的width屬性規(guī)定了圖片的寬度為200px,也就是200像素。
HTML中,如果只對(duì)圖片的寬或高進(jìn)行數(shù)值指定,那么未指定的數(shù)值會(huì)隨著指定數(shù)值進(jìn)行等比例縮放!
熟知html元素是塊級(jí)還是內(nèi)聯(lián)對(duì)以后進(jìn)行頁面布局有一定的指導(dǎo)意義。
<div>與<span>標(biāo)簽
為了方便開發(fā)者對(duì)頁面內(nèi)容進(jìn)行布局和調(diào)整,html開發(fā)者為html加入了專門的區(qū)塊元素<div></div>。
<div></div>是一個(gè)塊級(jí)元素,大家可以把它理解為一個(gè)容器,它本身是不會(huì)顯示在頁面上的。
比如這個(gè)!
筆者第一個(gè)漫畫作品
如果拋開畫面內(nèi)容,我們看到的是一堆對(duì)畫面進(jìn)行分割的方格子。像這樣
<div></div>元素的作用就是對(duì)頁面進(jìn)行了這樣的分割。
實(shí)際上我們的頁面布局都是基于這樣思路進(jìn)行分割的,只是頁面上不會(huì)像漫畫一樣顯示外邊框而已。例如:
強(qiáng)制為其添加邊框分割:
大家看明白了嗎?<div></div>就是用來對(duì)頁面進(jìn)行分割劃區(qū)域的。
通過給<div>標(biāo)簽設(shè)置不同的id屬性,可以在css文件中對(duì)不同<div>區(qū)塊中的所有信息進(jìn)行統(tǒng)一調(diào)整樣式的操作。
這是對(duì)塊級(jí)元素整體改變樣式的方法。
但是,如果我們想對(duì)一個(gè)塊級(jí)元素中的不同文字或圖片這些內(nèi)聯(lián)元素進(jìn)行單獨(dú)操作怎么做呢?
html開發(fā)者為我們提供了<span></span>這樣的內(nèi)聯(lián)標(biāo)簽。比如我們對(duì)<p>我有一個(gè)夢(mèng)想</p>這個(gè)段落元素中的"夢(mèng)想"兩個(gè)字進(jìn)行變化顏色的操作,我們可以這樣寫:
<p>我有一個(gè)<span>夢(mèng)想</span></p>
通過對(duì)<span>指定不同的id或class屬性在CSS文件中對(duì)"夢(mèng)想"二字進(jìn)行改變顏色的操作而不會(huì)影響段落元素中的其他文字。
今天的內(nèi)容結(jié)束了,下一次我們建立一個(gè)新的頁面來簡(jiǎn)單看看<div>元素的基本用法。
喜歡的小伙伴請(qǐng)關(guān)注我,閱讀中遇到任何問題請(qǐng)給我留言,如有疏漏或錯(cuò)誤歡迎大家斧正,不勝感激!
HTML序章(學(xué)習(xí)目的、對(duì)象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個(gè)HTML頁面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
avaScript奇淫技巧:20行代碼,實(shí)現(xiàn)屏幕錄像
本文展示一個(gè)技巧,可以給任何網(wǎng)站、網(wǎng)頁實(shí)現(xiàn)屏幕錄像功能。
即使你不是網(wǎng)站的管理者,也可以給它添加錄制功能。
方法如下:
復(fù)制一段JS代碼,這段代碼是實(shí)現(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();
})
//手動(dòng)啟動(dòng)
mediaRecorder.start()
});
打開任意網(wǎng)站,比如JShaman官網(wǎng):
然后調(diào)出“Web開發(fā)者工具”,并切換到“控制臺(tái)”。
粘貼上面復(fù)制的JS代碼,并按下回車。
回車后會(huì)顯示出“undefined”:
在網(wǎng)頁任意地方點(diǎn)擊鼠標(biāo),即可進(jìn)行錄屏操作。
這時(shí)會(huì)彈出一個(gè)窗口,供選擇錄制范圍。
之后便開始錄制了。
當(dāng)需要停止錄像時(shí),點(diǎn)擊”停止共享”就可以了。
停止錄制后,剛剛錄制的內(nèi)容會(huì)自動(dòng)保存成一個(gè)視頻文件:
打開便可播放:
在這整個(gè)過程中,最重要的是第一步中的JS代碼。
代碼可自行閱讀理解,大意是給document.body添加點(diǎn)擊事件,當(dāng)點(diǎn)擊時(shí),進(jìn)行屏幕錄像。
所以,只要保存那段代碼,便可給任意網(wǎng)站添加錄像功能。
如果想要修改觸發(fā)條件,比如把鼠標(biāo)點(diǎn)擊改為鼠標(biāo)雙擊,只需修改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();
})
//手動(dòng)啟動(dòng)
mediaRecorder.start()
});
如果在復(fù)制粘貼代碼時(shí),不想讓別人看出你的代碼是什么意思,還可以對(duì)以上代碼進(jìn)行混淆加密。
用JShaman對(duì)代碼進(jìn)行加密:
得到加密代碼:
復(fù)制并使用這段代碼,使用跟之前一樣,但別人是無法理解代碼功能的。
使用:
最后,給出加密后的代碼,復(fù)制即可用,可用于任何網(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實(shí)現(xiàn)JS代碼加密解密
JS小技巧:制作一個(gè)密碼保護(hù)的網(wǎng)頁
JavaScript黑暗技巧:變異的Eval
JS代碼混淆加密:JSON數(shù)據(jù)加密技巧
JS加密技術(shù):平展控制流
奇思妙想之:用JS給圖片加口令
JavaScript黑暗技巧:禁止瀏覽器點(diǎn)擊“后退”按鈕
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。