整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這里是云端源想IT，幫你輕松學IT”
嗨~ 今天的你過得還好嗎？
無論種子散落在何處
都會長出一棵樹
向著天空，掙扎生長
- 2024.03.15 -
HTML圖片標簽和超鏈接標簽是網頁開發中常用的兩種標簽，它們分別用于在網頁中插入圖片和創建超鏈接。
我們每天都在互聯網世界中與各種形式的信息打交道。你是否好奇過，當你點擊一篇文章中的圖片或鏈接時，是什么神奇的力量讓你瞬間跳轉到另一個頁面？
今天，就讓我們一起揭開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、鏈接屬性
超鏈接標簽還有一些其他常用的屬性，如：
想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想
4、錨點鏈接標簽
錨點標簽用于在網頁中創建一個可以點擊的錨點，以便用戶可以通過點擊錨點跳轉到頁面中的其他部分。
錨點標簽的語法為：
<a name="錨點名稱"></a>例如，可以在頁面中的一個段落前添加一個錨點：
<a name="section1"></a>
<p>這是一個段落。</p>然后，可以在頁面的其他位置創建一個指向該錨點的超鏈接：
<a href="#section1">跳轉到第一節</a>當用戶點擊“跳轉到第一節”鏈接時，頁面將滾動到名為“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">跳轉到第一節</a></p>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<p>這是第三個段落。</p>
<a name="section1"></a>
<p>這是第一節的內容。</p>
</body>
</html>HTML圖片標簽和超鏈接標簽是構建網頁的兩個重要元素，它們不僅豐富了網頁的內容，還為網頁添加了動態和互動性。
通過學習和掌握這兩個標簽的使用方法，我們可以創建更加豐富和互動的網頁，為用戶提供更好的瀏覽體驗。無論是展示精美的圖片，還是實現頁面之間的跳轉，HTML圖片標簽和超鏈接標簽都能幫助我們實現更多的創意和功能。
讓我們一起探索HTML的奇妙世界，創造出更加精彩的網頁吧！
我們下期再見！
END
文案編輯|云端學長
文案配圖|云端學長
內容由：云端源想分享
html圖像
在htmtl中,圖像由<img>標簽定義.<img>是空標簽,它只包含屬性,并且沒有閉合標簽.
要在頁面上顯示圖像,使用源屬性(src).源屬性的值是圖像的url地址(統一資源定位符).
定義圖像的語法是:
<img src="url"/>
url指存儲圖像的位置.
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" alt=" "/>
</body>
<html>
●如果圖像無法顯示,則alt屬性用來為圖像定義一串預備的可替換的文本.alt屬性是必需的.
height(高度)與width(高度)屬性用于設置圖像的高度與寬度.該屬性值可以以像素或百分比形式指定,默認單位為像素
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" height="100px" width="100px" alt=" "/>
<!--或者-->
<img src="logo.png" height="80%" width="80%" alt=" "/>
</body>
</html>
●<img>的border屬性規定圖像周圍的邊框的寬度.默認情況下,圖像是沒有邊框的
border屬性的屬性值的單位是像素.表示邊框的寬度
實例:帶有2個像素粗邊框的圖像.
<img src="logo.png" height="100px" width="100px" border="2" alt=" " />
二 html鏈接
html使用標簽<a>來設置超文本鏈接.
超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,你可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分.
在標簽<a>中,使用href(hyper text reference)屬性來描述鏈接的目標地址
鏈接的html代碼很簡單.格式如下:
<a href="url">鏈接文本</a>
上邊的代碼顯示為:鏈接文本(鏈接文本下面有下劃線)
●使用target屬性,你可以規定在何處打開鏈接文檔.如果給target屬性賦值_blank,將使鏈接在新窗口或新選項卡中打開.
<a href="url" target="_blank">鏈接文本</a>
三 html列表
無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記
無序列表使用<ul>標簽,與<li>標簽一起使用(unordered list)
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
瀏覽器顯示效果如下:
有序列表也是一列項目,列表項目使用數字進行標記.
有序列表始于<ol>標簽,每個列表項目始于<li>標簽.
<ol>
<li>咖啡</li>
<li>菜</li>
<li>牛奶</li>
</ol>
運行效果如下:
四 html表格
表格由<table>標簽定義.
每個表格均有若干行(由<tr>標簽定義,table row),每行被分割為若干單元格(由<td>標簽定義,table division)
下面是一個包含兩行兩列的表格:
<table border="2">
<tr>
<td>阿/td>
<td>平</td>
</tr>
<tr>
<td>加</td>
<td>油</td>
</tr>
</table>
運行效果:
程序開發過程中，我們始終要謹記的一點就是：程序是寫給人看的，不是寫給機器看的。任何項目開發，都必須要考慮到人員迭代，我們不能讓下一個接手你代碼的人，在看到你寫的代碼時會說出這樣的話，“這個代碼是人寫出來的嗎？可讀性太差了”。因此，我們必須遵循一定的規范，讓代碼的可讀性更強。
今天，我們就一起來看下前端開發過程所能涉及到的跟HTML有關的規范問題。
HTML5
在HTML文件中，推薦使用支持HTML5特性的文檔聲明，<!DOCTYPE html>。
首先是在文件的命名上，應當采用駝峰式命名，首字母小寫，后面每個單詞首字母大寫，而且對于具體的文件應當具有語義化，能夠給人一種直觀的感受這個文件的作用是什么。現在前端開發開發過程中都講求模塊化開發，甚至是組件化開發，在文件命名時更應該以模塊名或者組件名來命名。
例如在寫一個AngularJS應用時，由于會涉及到Controller，Service，Filter等概念，我們會分別建立一個文件，假如這個模塊的名字是庫存管理stockManage，我們可以這樣來命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
我們所說的語義化指的是使用具有語義化的標簽，在H5中添加了類似于header, nav, article, section, aside, footer等標簽，從單詞的意思上我們也很容易看出標簽的含義。
我們不推薦使用只有div標簽的頁面，例如
不推薦使用
而是應該使用以下這種帶有語義化的標簽。
推薦使用
img標簽是網頁用來顯示照片的標簽，在頁面所有標簽中占據的比例非常之高，但是在使用img標簽時也有下面需要注意的點。
給定width和height屬性
因為瀏覽器在加載圖片的過程中，需要先下載圖片，然后再解析圖片的高度和寬度，如果不給img元素設定高度和寬度，這樣在圖片加載過程中會不斷的計算，重排頁面的布局，在網絡不好的時候就會經常出現元素出現不規律移動的情況。因此給img元素設定width和height屬性是必要的。
alt屬性
img標簽的alt屬性表示的是在圖片無法顯示時，使用文字來代替顯示，它可以用在以下幾個場景中：
網路延遲太大
src屬性指定路徑出錯
瀏覽器禁用圖像
由于其有良好的信息提示效果，并且有助于網頁SEO效果，強烈建議在img標簽中使用alt屬性。
而且很重要的一點是img標簽的引入是需要呈現出與頁面相關的內容，其他情況應該使用CSS樣式實現。例如我們不推薦下面這種情況。
不推薦
而推薦使用下面這種情況
推薦使用
前端文件主要包括HTML頁面文件，CSS樣式文件和Javascript腳本文件。我們應該讓三者各司其職，在HTML中不應該出現CSS和JS表達式；在JS文件中，不應該出現大量的HTML和CSS代碼。在HTML文檔中應當盡量少的引入CSS和JS文件。為了保證文件的純凈，我們應當遵循下面的原則。
一個HTML文件應該只引入一個CSS文件
合理運用JS合并技術（Gulp, Webpack插件），保證引入JS文件不多于兩個
不使用行內腳本元素（<script>alert('Hello World')</script>）
不在標簽上使用style內聯樣式
不要使用style屬性
腳本加載在網頁加載過程中是一個很耗性能的過程，如果把JS文件放在head標簽里，它的加載會一直阻塞DOM的解析，造成頁面延遲。
因此現在講求的是腳本的異步加載過程，我們會使用到async關鍵字，考慮到瀏覽器的兼容性，我們推薦使用下面的方式加載腳本。
推薦方式
合理使用ID和錨點可以非常方便的實現當前頁面間的跳轉，現在越來越多的教程網頁由于是單頁面，經常會用到錨點跳轉。
對錨點知識還不了解的，可以看看我寫的這篇文章《神奇的html錨點，讓你的網頁在內部自由的跳轉》。
今天這篇文章主要總結了前端開發過程中的HTML規范問題，相信大家也或多或少遇到過，希望這篇文章能加深大家的認識。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
