整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
大家可能都知道img標(biāo)簽是怎么設(shè)置默認(rèn)圖片的，但是你知道background-img是如何設(shè)置默認(rèn)圖片的嘛？
html中如何設(shè)置默認(rèn)圖片？
<img src="圖片的url地址" alt="圖片描述" onerror="this.src='默認(rèn)圖片的url地址'"/>
這里是應(yīng)用了img標(biāo)簽的onerror事件，當(dāng)加載失敗就用默認(rèn)圖片地址。但是這里可能出現(xiàn)如果默認(rèn)圖片地址也加載不出來(lái)，或者失敗，在IE內(nèi)核的瀏覽器下就會(huì)反復(fù)加載，出現(xiàn)死循環(huán)，最后造成堆棧溢出錯(cuò)誤。因此， 需要用下面兩種方法解決：
<img src="圖片的url地址" alt="圖片描述" onerror="this.src='默認(rèn)圖片的url地址';this.onerror=null"/>
html中如何設(shè)置默認(rèn)圖片？
background是可以設(shè)置多個(gè)背景圖片的，最前面的優(yōu)先級(jí)越高，所以如果javan1.jpg沒(méi)有就好顯示第二個(gè)javan2.jpg，如果還沒(méi)有就好顯示第三個(gè)javan3.jpg。
第一種：
background: url("javan1.jpg") 0 0 no-repeat,
url("javan2.jpg") 200px 0 no-repeat,
url("javan3.jpg") 400px 201px no-repeat;
第二種：
background-image: url("javan1.jpg"), url("javan2.jpg"), url("javan3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
需要注意的是：IE8及更早瀏覽器不支持CSS3 background-image，即不支持多背景和使用漸變作為背景圖像。
background-image: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );
上面這種CSS語(yǔ)法我們經(jīng)常見(jiàn)到，可能有人看不懂具體的意思，其實(shí)上面的些符號(hào)含義與正則表達(dá)式有很多一致之處：
水平漸變
{
background-image: linear-gradient(left, red 100px, yellow 200px);
}
CSS水平漸變
左上角漸變
{
background-image:linear-gradient(left top, red 100px, yellow 200px);
}
CSS左上角漸變
喜歡小編的點(diǎn)擊關(guān)注，了解更多資源！
全棧攻城獅-每日更新原創(chuàng)IT編程技術(shù)及日常實(shí)用視頻。
主要內(nèi)容：這是HTML課程的第五課，主要講解HTML的圖片和超鏈接。讓自己設(shè)計(jì)的網(wǎng)頁(yè)更加多元素。
在上節(jié)中主要講解了HTML的文字標(biāo)簽和格式標(biāo)簽。上篇請(qǐng)戳→→04程序員定要學(xué)HTML，字體段落標(biāo)簽介紹，60秒搞定
其實(shí)如果沒(méi)有記住也無(wú)所謂。畢竟這些標(biāo)簽都是HTML中比較常用的，在以后的相關(guān)的案例中也會(huì)使用。此系列教程主要講解HTML從基礎(chǔ)到精通。自己能夠設(shè)計(jì)一個(gè)完整的前端網(wǎng)頁(yè)項(xiàng)目。
程序員寫(xiě)代碼
在HTML中添加圖片其實(shí)很簡(jiǎn)單，就是添加一個(gè)img的標(biāo)簽。
圖片標(biāo)簽的語(yǔ)法
一般有src、alt、width、height四種屬性就夠用了。
效果：
圖片的顯示效果
src表示的是圖片的路徑，這里面的值應(yīng)該怎么寫(xiě)呢？
（1）html文件和圖片在相同一個(gè)文件夾下。
HTML文件和圖片文件在相同的目錄下，可以直接書(shū)寫(xiě)文件的名稱(chēng)。
寫(xiě)文件名的寫(xiě)法，如上面的HTML
（2）圖片在HTML文件所在目錄的文件夾內(nèi)：
如圖：
圖片文件在文件夾內(nèi)
此時(shí)需要加上文件夾名稱(chēng)，并加上“/”表示下層目錄：
下層目錄的圖片寫(xiě)法
（3）圖片文件在上層目錄
如果圖片在HTML文件所在的上層目錄，則需要寫(xiě)“..”表示向上一級(jí)。如圖：
上層目錄
超鏈接就是可以鏈接到某個(gè)資源的東西，比如我們打開(kāi)百度首頁(yè)搜索后，產(chǎn)生的就是超鏈接：
這些藍(lán)字超鏈接
這些藍(lán)色的文字標(biāo)題，我們點(diǎn)擊之后可以跳轉(zhuǎn)到新的網(wǎng)站。這就是超鏈接。下面我們自己寫(xiě)一個(gè)超鏈接：
超鏈接的寫(xiě)法
超鏈接預(yù)覽
超鏈接中的潮涌屬性包括：href（網(wǎng)頁(yè)地址）、title（說(shuō)明描述）、target（打開(kāi)網(wǎng)頁(yè)的位置）、name（名稱(chēng)）。
其中href支持帶有任何協(xié)議的連接。title是對(duì)超鏈接的說(shuō)明。
程序員
target包括四個(gè)值：
_blank
在新的窗口打開(kāi)連接
_self
在當(dāng)前窗口打開(kāi)超鏈接
_parent
在父窗口打開(kāi)超鏈接，這個(gè)后面會(huì)說(shuō)，不常用
_top
在整個(gè)窗口中打開(kāi)被鏈接文檔。
每天一個(gè)知識(shí)點(diǎn)，帶你邁向軟件編程大神，一起努力吧。
021年你需要知道的HTML標(biāo)簽和屬性
Web開(kāi)發(fā)人員都在廣泛的使用HTML。無(wú)論你使用什么框架或者選擇哪個(gè)后端語(yǔ)言，框架在變，但是HTML始終如一。盡管被廣泛使用，但還是有一些標(biāo)簽或者屬性是大部分開(kāi)發(fā)者不熟知的。雖然現(xiàn)在有很多的模版引擎供我們使用，但是樂(lè)字節(jié)教育的老師和我們說(shuō)還是需要盡可能的熟練掌握HTML內(nèi)容，就像CSS一樣。
在我看來(lái)，最好盡可能使用HTML特性來(lái)實(shí)現(xiàn)我們的功能，而不是使用JavaScript實(shí)現(xiàn)相同的功能，盡管我承認(rèn)編寫(xiě)HTML可能會(huì)是重復(fù)的和無(wú)聊的。
盡管許多開(kāi)發(fā)人員每天都在使用HTML，但他們并沒(méi)有嘗試改進(jìn)自己的項(xiàng)目，也沒(méi)有真正利用HTML的一些鮮為人知的特性。
下面這5個(gè)通過(guò)HTML標(biāo)簽/屬性實(shí)現(xiàn)的功能我覺(jué)得需要了解一下：
圖片懶加載
圖片懶加載可以幫助提升網(wǎng)站的性能和響應(yīng)能力。圖片懶加載可以避免立即加載那些不在屏幕中立即顯示的圖片素材，當(dāng)用戶滾動(dòng)臨近圖片時(shí)再去開(kāi)始加載。
換言之，當(dāng)用戶滾動(dòng)到圖片出現(xiàn)時(shí)再進(jìn)行加載，否則不加載。這就降低了屏幕內(nèi)容展示過(guò)程中的圖片素材的請(qǐng)求數(shù)量，提升了站點(diǎn)性能。
往往我們都是通過(guò)javascript來(lái)實(shí)現(xiàn)的，通過(guò)監(jiān)聽(tīng)頁(yè)面滾動(dòng)事件來(lái)確定加載對(duì)應(yīng)的資源。但是，在不完全考慮兼容性的場(chǎng)景下，我們其實(shí)可以直接通過(guò)HTML來(lái)直接實(shí)現(xiàn)。
注：本篇的提到的標(biāo)簽和屬性的兼容性需要大家根據(jù)實(shí)際場(chǎng)景來(lái)選取是否使用
可以通過(guò)為圖片文件添加loading="lazy"的屬性來(lái)實(shí)現(xiàn):
輸入提示
當(dāng)用戶在進(jìn)行輸入搜索功能時(shí)，如果能夠給出有效的提示，這會(huì)大大提升用戶體驗(yàn)。輸入建議和自動(dòng)完成功能現(xiàn)在到處可見(jiàn)，我們可以使用Javascript添加輸入建議，方法是在輸入框上設(shè)置事件偵聽(tīng)器，然后將搜索到的關(guān)鍵詞與預(yù)定義的建議相匹配。
其實(shí)，HTML也是能夠讓我們來(lái)實(shí)現(xiàn)預(yù)定義輸入建議功能的，通過(guò)<datalist>標(biāo)簽來(lái)實(shí)現(xiàn)。需要注意的是，使用時(shí)這個(gè)標(biāo)簽的id屬性需要和input元素的list屬性一致。
Picture標(biāo)簽
你是否遇到過(guò)在不同場(chǎng)景或者不同尺寸的設(shè)備上面的時(shí)候，圖片展示適配問(wèn)題呢？我想大家都遇到過(guò)。
針對(duì)只有一個(gè)尺寸的圖片素材的時(shí)候，我們往往可以通過(guò)CSS的object-fit屬性來(lái)進(jìn)行裁切適配。但是有些時(shí)候需要針對(duì)不同的分辨率來(lái)顯示不同尺寸的圖片的場(chǎng)景的時(shí)候，我們是否可以直接通過(guò)HTML來(lái)實(shí)現(xiàn)呢？
HTML提供了<picture>標(biāo)簽，允許我們來(lái)添加多張圖片資源，并且根據(jù)不同的分辨率需求來(lái)展示不同的圖片。
我們可以定義不同區(qū)間的最小分辨率來(lái)確定圖片素材，這個(gè)標(biāo)簽的使用有些類(lèi)似<audio>和<video>標(biāo)簽。
Base URL
當(dāng)我們的頁(yè)面有大量的錨點(diǎn)跳轉(zhuǎn)或者靜態(tài)資源加載時(shí)，并且這些跳轉(zhuǎn)或者資源都在統(tǒng)一的域名的場(chǎng)景時(shí)，我們可以通過(guò)<base>標(biāo)簽來(lái)簡(jiǎn)化這個(gè)處理。
例如，我們有一個(gè)列表需要跳轉(zhuǎn)到微博的不同大V的主頁(yè)，我們就可以通過(guò)設(shè)置來(lái)簡(jiǎn)化跳轉(zhuǎn)路徑
<base>標(biāo)記必須具有href和target屬性。
頁(yè)面重定向（刷新）
當(dāng)我們希望實(shí)現(xiàn)一段時(shí)間后或者是立即重定向到另一個(gè)頁(yè)面的功能時(shí)，我們可以直接通過(guò)HTML來(lái)實(shí)現(xiàn)。
我們經(jīng)常會(huì)遇到有些站點(diǎn)會(huì)有這樣一個(gè)功能，“5s后頁(yè)面將跳轉(zhuǎn)”。這個(gè)交互可以嵌入到HTML中，直接通過(guò)<meta>標(biāo)簽，設(shè)置http-equiv="refresh"來(lái)實(shí)現(xiàn)
這里content屬性指定了重定向發(fā)生的秒數(shù)。值得一提的是，盡管谷歌聲稱(chēng)這種形式的重定向和其他的重定向方式一樣可用，但是使用這種類(lèi)型的重定向其實(shí)并不是那么的優(yōu)雅，往往會(huì)顯得很突兀。
因此，最好在某些特殊的情況下使用它，比如在長(zhǎng)時(shí)間用戶不活動(dòng)之后再重定向到目標(biāo)頁(yè)面。
后記
HTML和CSS是非常強(qiáng)大的，哪怕我們僅僅使用這兩種技術(shù)也能創(chuàng)建出一些奇妙的網(wǎng)站。雖然它們的使用量很大很普遍，還是有很多的開(kāi)發(fā)者并沒(méi)有真正的深入了解他們，還有很多的內(nèi)容需要我們深入的去學(xué)習(xí)和理解，實(shí)踐，有很多的技巧等待著我們?nèi)グl(fā)現(xiàn)。
文章轉(zhuǎn)載至樂(lè)字節(jié)
最后給大家推薦幾個(gè)b站超詳細(xì)的Java自學(xué)課：
Servlet入門(mén)教程BV1D5411373E
Vue、Vuejs教程，BV19V41177od
SpringBoot+Vue項(xiàng)目實(shí)戰(zhàn)BV1o64y117qQ
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
