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