整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這里是云端源想IT，幫你輕松學IT”
嗨~ 今天的你過得還好嗎？
無論種子散落在何處
都會長出一棵樹
向著天空，掙扎生長
- 2024.03.15 -
HTML圖片標簽和超鏈接標簽是網頁開發(fā)中常用的兩種標簽，它們分別用于在網頁中插入圖片和創(chuàng)建超鏈接。
我們每天都在互聯(lián)網世界中與各種形式的信息打交道。你是否好奇過，當你點擊一篇文章中的圖片或鏈接時，是什么神奇的力量讓你瞬間跳轉到另一個頁面？
今天，就讓我們一起揭開HTML圖片標簽和超鏈接標簽的神秘面紗。
HTML圖片標簽是一種特殊的標記，它可以讓網頁顯示圖像。通過使用圖片標簽，我們可以在網頁上展示各種圖片，從而讓網頁更加生動有趣。
1、語法結構
HTML圖片標簽的語法結構非常簡單，只需要使用<img>標簽，并在其中添加src屬性，指定圖片的路徑即可。
例如：
<img src="image.jpg" alt="描述圖片的文字">2、圖片格式
HTML支持多種圖片格式，包括JPEG、PNG、GIF等。不同的圖片格式具有不同的特點，可以根據需要選擇合適的格式。
3、圖片屬性
除了src屬性外，HTML圖片標簽還有其他一些常用的屬性，如：
4、網絡圖片的插入
當需要插入網絡上的圖片時，可以將圖片的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中另一個重要的元素，它可以實現網頁之間的跳轉。通過使用超鏈接標簽，我們可以將文本、圖片等內容設置為可點擊的鏈接，方便用戶在不同頁面之間自由切換。
1、語法結構
超鏈接標簽使用<a>標簽表示，需要在href屬性中指定鏈接的目標地址。
<a href="目標地址" title="標題">文本內容</a>例如：
<a href="https://www.ydcode.cn/">點擊訪問示例網站</a>示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例網站</title>
</head>
<body>
<h1>歡迎來到云端源想！</h1>
<p>這是一個簡單的HTML頁面，用于展示一個網站的結構和內容。</p>
<a href="https://www.ydcode.cn/">點擊訪問示例網站</a>
</body>
</html>2、鏈接目標
超鏈接可以鏈接到不同的目標，包括其他網頁、電子郵件地址、文件下載等。通過設置href屬性的值，可以實現不同的鏈接目標。
3、鏈接屬性
超鏈接標簽還有一些其他常用的屬性，如：
想要快速入門前端開發(fā)嗎？推薦一個前端開發(fā)基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想
4、錨點鏈接標簽
錨點標簽用于在網頁中創(chuàng)建一個可以點擊的錨點，以便用戶可以通過點擊錨點跳轉到頁面中的其他部分。
錨點標簽的語法為：
<a name="錨點名稱"></a>例如，可以在頁面中的一個段落前添加一個錨點：
<a name="section1"></a>
<p>這是一個段落。</p>然后，可以在頁面的其他位置創(chuàng)建一個指向該錨點的超鏈接：
<a href="#section1">跳轉到第一節(jié)</a>當用戶點擊“跳轉到第一節(jié)”鏈接時，頁面將滾動到名為“section1”的錨點所在的位置。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例網站</title>
</head>
<body>
<h1>歡迎來到云端源想！</h1>
<p><a href="#section1">跳轉到第一節(jié)</a></p>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<p>這是第三個段落。</p>
<a name="section1"></a>
<p>這是第一節(jié)的內容。</p>
</body>
</html>HTML圖片標簽和超鏈接標簽是構建網頁的兩個重要元素，它們不僅豐富了網頁的內容，還為網頁添加了動態(tài)和互動性。
通過學習和掌握這兩個標簽的使用方法，我們可以創(chuàng)建更加豐富和互動的網頁，為用戶提供更好的瀏覽體驗。無論是展示精美的圖片，還是實現頁面之間的跳轉，HTML圖片標簽和超鏈接標簽都能幫助我們實現更多的創(chuàng)意和功能。
讓我們一起探索HTML的奇妙世界，創(chuàng)造出更加精彩的網頁吧！
我們下期再見！
END
文案編輯|云端學長
文案配圖|云端學長
內容由：云端源想分享
高興鐵鐵們能來看html網頁設計第二期~~~~撒花~~~~~
哎呀呀~實在是抱歉備注標簽我記錯了QAQ
<!--內容打這里-->這個才是備注標簽不是//
首先我們先來學習上節(jié)課留下的劇透，分別是:
有人就說了標題標簽上次劇透不就只有h1標簽嗎?
嘿嘿，其實他還有兄弟姐妹啦~
看圖，代碼是從上往下從左往右執(zhí)行的請記住這個順序哦~
還有,左邊是代碼右邊是網頁上面的效果哦~
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
<body>
<!--標題標簽是h1~h6-->
<h1>1</h1><!--最大-->
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6><!--最小-->
</body>
</html>
如圖所示，h1標簽是最大的，h6標簽是最小的
是不是很簡單呀,現在已經學會了一個知識點了哦~
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--千萬要記住內容是寫在標簽里面的哦~-->
<!--段落標簽是獨占一條的哦-->
<p>第一條p標簽</p>
<p>第二條p標簽</p>
<p>第三條p標簽</p>
</body>
</html>
鏈接標簽是什么?顧名思義就是一個鏈接看代碼：
<a href="https://www.baidu.com">百度</a>
href是什么東西啊？是a標簽的屬性啦~里面用來輸入你需要跳轉到的網頁的鏈接
屬性里面的東西是不會出現在網頁上面的出現的只有在a標簽里面的內容哦
當我點擊百度這兩個字后就給我跳轉到了我們href屬性里面的https://www.baidu.com
當然我們也可以跳轉到我們自己制作的網頁上面但要求是同一個項目下面的網頁
是不是很有趣~
看視頻:
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
視頻中我們點擊鏈接后就跳轉到了山這個網頁出現了一張山的圖片，是不是有點小意思~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="new_file3.html">跳轉到山的網頁</a><!--只有同一個項目下面的網頁才能相互跳轉-->
</body>
</html>
圖像標簽標簽如其意，就是用來上傳圖像的一個標簽~~
我們這里介紹一下img的兩個屬性:
<img src="img/OIP-C.jpg" alt="山"/>
src就是用來放圖片的地址的，他會根據地址去找圖片然后把圖片放到網頁上面。
alt有什么用啊就是當圖片顯示失敗的時候就會顯示alt里面的文字
看視頻:
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
我們把圖片的地址破壞后，就會顯示一個圖片錯誤的圖標和alt里面的內容
怎么拖圖片到img文件下，老師~~~我不知道
看視頻
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
嘿嘿就直接把文件拖進來就ok了是不是很簡單~
okk，好快啊怎么一下就學完了今天的知識點~~~
嘻嘻今天可是有作業(yè)的~
請根據下面的網頁仿寫一下:
完成后作業(yè)發(fā)再評論區(qū)哦，有什么不懂的可以留言包回答的。
加油呀，每天學一點爭取做出屬于自己的一個網頁~
上一期
維碼是一種便捷的信息傳遞方式，它可以將網址、文本、圖片等信息編碼在兩個四十個像素的方框中，讓用戶通過掃描二維碼來訪問對應的網站或應用。隨著互聯(lián)網的快速發(fā)展，二維碼被廣泛應用于各種領域，如電子商務、社交媒體、健康醫(yī)療、金融保險等。
在二維碼的生成制作方面，目前有許多開源的工具和商業(yè)平臺可供選擇。其中比較常用的有：Q碼、A碼、天行二維碼、瑞碼等。這些工具都具有簡單易用的界面和豐富的功能，可以生成各種類型的二維碼，包括方形、圓形、橢圓形、特殊形狀等。
點擊圖片跳轉鏈接是實現二維碼圖片鏈接的常見方法。通常，在二維碼的旁邊會有一個按鈕或鏈接，用戶點擊按鈕或鏈接就可以跳轉到對應的網站或應用。實現這個效果的方法有很多，其中比較常見的有：在二維碼中添加HTTP請求、在二維碼中添加JavaScript代碼、在二維碼中添加錨文本鏈接等。
在實現這些功能時，需要注意以下幾點：
1.確保二維碼的圖片質量高，這樣用戶才能清晰地看到內容。
2.確保鏈接的地址真實、可靠，這樣用戶才能放心地點擊鏈接。
3.確保鏈接的速度快，這樣用戶才能更快地加載頁面。
4.確保鏈接的兼容性，這樣不同瀏覽器和設備都能正常加載。
通過以上幾點，就可以制作出一個功能完善、用戶友好的二維碼圖片鏈接。同時也可以廣泛應用于各種領域，如電子商務、社交媒體、健康醫(yī)療、金融保險等，為用戶帶來更加便捷和高效的信息獲取方式。
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
