整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML DOM 允許 JavaScript 對(duì) HTML 事件作出反應(yīng)。
實(shí)例
Mouse Over Me
Click Me
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)簽的使用有些類似<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ù)。值得一提的是，盡管谷歌聲稱這種形式的重定向和其他的重定向方式一樣可用，但是使用這種類型的重定向其實(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入門教程BV1D5411373E
Vue、Vuejs教程，BV19V41177od
SpringBoot+Vue項(xiàng)目實(shí)戰(zhàn)BV1o64y117qQ
事件” 一詞，在不同的領(lǐng)域中，所表示的含義則不同，那么在JavaScript中的事件所表達(dá)的意思是什么？今天小編將為大家?guī)?lái)大數(shù)據(jù)編程入門：JavaScript事件。
HTML事件是指發(fā)生在HTML元素上的事情，比如按下確定按鈕，選擇某個(gè)單選按鈕或者復(fù)選框等。每一種控件有自己可以識(shí)別的事件，比如單擊、雙擊等事件。
在HTML頁(yè)面中使用JavaScript時(shí)，JavaScript可以觸發(fā)這些事件。
HTML事件可以是瀏覽器行為或用戶行為。
以下是HTML事件的示例：
① HTML頁(yè)面已完成加載
② 當(dāng)HTML輸入字段更改時(shí)
③ 單擊HTML按鈕
通常，當(dāng)事情發(fā)生時(shí)，你可以做一些事情。
觸發(fā)事件的對(duì)象稱為事件發(fā)送者；接收事件的對(duì)象稱為事件接收器。
JavaScript可以在觸發(fā)事件時(shí)執(zhí)行一些代碼。
可以向HTML元素添加事件屬性，并使用JavaScript代碼添加HTML元素。
單引號(hào)：
<some-HTML-element some-event='JavaScript 代碼'>
雙引號(hào)：
<some-HTML-element some-event="JavaScript 代碼">
在以下示例中，onclick屬性（帶有代碼）被添加到按鈕（button）元素中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按鈕事件</title>
</head>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">現(xiàn)在的時(shí)間是?</button>
<p id="demo"></p>
</body>
</html>
運(yùn)行結(jié)果：
在上面的示例中，JavaScript代碼將修改id=“demo”元素的內(nèi)容。
在下一個(gè)示例中，代碼將修改自身元素的內(nèi)容（使用 this.innerHTML）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件演示</title>
</head>
<body>
<button onclick="this.innerHTML=Date()">現(xiàn)在的時(shí)間是?</button>
</body>
</html>
運(yùn)行結(jié)果：
注意：Javascript代碼通常是幾行代碼。更常見(jiàn)的是通過(guò)事件屬性調(diào)用，比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件演示</title>
</head>
<body>
<p>點(diǎn)擊按鈕執(zhí)行 <em>displayDate()</em> 函數(shù).</p>
<button onclick="displayDate()">點(diǎn)這里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
運(yùn)行結(jié)果：
下面的列表中列出了一些常見(jiàn)的HTML事件：
事件 | 描述 |
oncharge | 改變HTML元素 |
onclick | 用戶點(diǎn)擊HTML元素 |
onmouseover | 用戶將鼠標(biāo)移到HTML元素上 |
onmouseout | 用戶將鼠標(biāo)移開(kāi)HTML元素 |
onkeydown | 用戶按下鍵盤按鍵 |
onload | 瀏覽器已完成頁(yè)面的加載 |
事件可用于處理表單驗(yàn)證、用戶輸入、用戶行為和瀏覽器操作：
① 加載頁(yè)面時(shí)觸發(fā)的事件
② 關(guān)閉頁(yè)面時(shí)觸發(fā)的事件
③ 用戶單擊按鈕執(zhí)行操作
④ 驗(yàn)證用戶輸入的合法性
等等...
有幾種方法可以執(zhí)行JavaScript事件代碼：
① HTML事件屬性可以直接執(zhí)行JavaScript代碼
② HTML事件屬性可以調(diào)用JavaScript函數(shù)
③ 你可以為HTML元素指定自己的事件處理程序
④ 你可以防止這種情況發(fā)生。
等等...
以上就是關(guān)于大數(shù)據(jù)編程入門：JavaScript事件的全部?jī)?nèi)容了，希望這篇文章可以幫助到大家~
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
