整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML文件中，有些標(biāo)簽會被經(jīng)常用到，可能有人覺得太基礎(chǔ)，就不認(rèn)真對待，但是我可以負(fù)責(zé)任的告訴你，越基礎(chǔ)的往往越重要。這次重點(diǎn)學(xué)一學(xué)標(biāo)題、段落和鏈接等基礎(chǔ)標(biāo)簽。
為了不重復(fù)粘貼HTML代碼，咱們來個(gè)約定，除了第一次出現(xiàn)完整的HTML文件的頁面結(jié)構(gòu)之外，之后只現(xiàn)新增的標(biāo)簽內(nèi)容，你自己將新的內(nèi)容，添加到HTML文件中，進(jìn)行效果驗(yàn)證。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第3個(gè)HTML文件</title>
</head>
<body>
<!--這是一個(gè)完整的HTML頁面結(jié)構(gòu),常用標(biāo)簽放在這個(gè)注釋后面即可-->
</body>
</html>在HTML中，標(biāo)題從一級到六級，對應(yīng)標(biāo)簽為<h1>到<h6>，字體逐步變小。屬性為align(對齊方式)，屬性值為left(左對齊，默認(rèn)）、right(右對齊)和center(居中對齊)。
<h1 align="center">一級標(biāo)題</h1>
<h2 align="center">二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h4 align="left">四級標(biāo)題</h4>
<h5 align="right">五級標(biāo)題</h5>
<h6 align="right">六級標(biāo)題</h6>輸出結(jié)果
<p> 標(biāo)簽定義段落。瀏覽器解析到<p>標(biāo)簽時(shí)，會自動在其前后創(chuàng)建一些空白。<p>標(biāo)簽的屬性也是align。其實(shí)為了HTML文件統(tǒng)一布局，很少會用align來指定位置，大多數(shù)是用CSS統(tǒng)一指定。
<p>老陳說編程，除了說編程，</p>
<p>還有程序員的愛情與友情，</p>
<p>那是不可能的。</p>輸出結(jié)果
在網(wǎng)頁發(fā)的文字多時(shí)，好多人習(xí)慣性會使用分割線。在HTML，用<hr/>單標(biāo)簽就可以實(shí)現(xiàn)分割線。而換行，則用<br/>標(biāo)簽。<hr>標(biāo)簽屬性有表示位置的align、高度的的size和寬度width三個(gè)屬性，其中size和width的單位是像素，但如果用到這些屬性的話，推薦用CSS。
<hr size="1"/>
小舅子要結(jié)婚了，丈母娘跟我借了10萬塊錢做彩禮，結(jié)果婚事談崩了。<br/>
今天公司急用錢，我向丈母娘要那10萬塊錢。<br/>
丈母娘說：借你這10萬塊錢是干啥用的？<br/>
我說：給小舅子結(jié)婚用啊！<br/>
丈母娘說：那婚結(jié)成了嗎？<br/>
我說：沒結(jié)成。<br/>
丈母娘大聲罵道：婚都沒結(jié)成你還有臉來要錢！<br/>
突然感覺丈母娘這話說的沒什么毛病啊！
<hr size="1"/>輸出結(jié)果
無序列表<ul>標(biāo)簽，可用粗體圓點(diǎn)標(biāo)記一個(gè)項(xiàng)目的列表；有序列表<ol>標(biāo)簽使用數(shù)字進(jìn)行標(biāo)記，而列表項(xiàng)用<li>標(biāo)簽實(shí)現(xiàn)。有關(guān)列表的屬性，不是被H5拋棄，就是不被推薦，所以......。
<p>
程序員最喜歡做的三件事
<ul>
<li>編程</li>
<li>開發(fā)</li>
<li>敲代碼</li>
</ul>
程序員最喜歡的三個(gè)美女
<ol>
<li>潘金蓮</li>
<li>楊貴妃</li>
<li>楊八妹</li>
</ol>
</p>輸出結(jié)果
<a>標(biāo)簽定義超鏈接，用于從一個(gè)頁面鏈接到另一個(gè)頁面。最重要的屬性是 href和target， href指定鏈接的目標(biāo)(網(wǎng)頁地址)，target指定打開窗口的模式，_blank：打開新窗口，_parent：在父窗口中打開，_self：默認(rèn)，當(dāng)前頁面跳轉(zhuǎn)，_top：在當(dāng)前窗體打開鏈接，并替換當(dāng)前的整個(gè)窗體。
在沒點(diǎn)擊鏈接之前，你先看一下鏈接內(nèi)容的字體顏色，點(diǎn)擊鏈接之后，你再看一下，你就會發(fā)現(xiàn)，鏈接內(nèi)容的顏色會有所變化。
(1) 未被訪問的鏈接帶有下劃線而且是藍(lán)色的;
(2) 已被訪問的鏈接帶有下劃線而且是紫色的;
(3) 活動鏈接帶有下劃線而且是紅色的。
<a href="demo1.html">去到老陳說HTML的第1個(gè)Demo中</a>輸出結(jié)果
好了，有關(guān)html基礎(chǔ)標(biāo)簽的內(nèi)容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。
一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒錯(cuò)的。
#前端##HTML##程序員##編程##CSS#
本文我們將深入探討JavaScript的各種數(shù)據(jù)類型，包括基本數(shù)據(jù)類型、引用數(shù)據(jù)類型、特殊數(shù)據(jù)類型以及數(shù)據(jù)類型轉(zhuǎn)換，我們將會從概念解釋、重難點(diǎn)分析以及案例說明三個(gè)層面來全面剖析這些數(shù)據(jù)類型。
在JavaScript中，數(shù)據(jù)類型用于表示不同種類的數(shù)據(jù)值。了解JavaScript數(shù)據(jù)類型是編寫高質(zhì)量代碼的基礎(chǔ)。本章將深入介紹JavaScript的主要數(shù)據(jù)類型及其特性。
數(shù)字類型用于表示數(shù)字值，包括整數(shù)和浮點(diǎn)數(shù)。JavaScript使用64位浮點(diǎn)數(shù)來表示所有數(shù)字，無論是整數(shù)還是小數(shù)。這意味著JavaScript可以處理非常大和非常小的數(shù)字。通俗來說，數(shù)字類型就是我們數(shù)學(xué)中學(xué)到的數(shù)字，正數(shù)、負(fù)數(shù)、整數(shù)、小數(shù)等等。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)據(jù)類型</title>
</head>
<body>
<script>
let age = 20 // 正整數(shù)
let pi = 3.14 // 小數(shù)
let fushu = -40 // 負(fù)數(shù)
//typeof是用于檢測數(shù)據(jù)類型
document.write(typeof age) // 結(jié)果為 number
document.write(typeof pi) // 結(jié)果為 number
document.write(typeof fushu) // 結(jié)果為 number
</script>
</body>
</html>字符串類型用于表示文本數(shù)據(jù)，用引號（單引號或雙引號）括起來。JavaScript中的字符串是不可變的，也就是說一旦被創(chuàng)建，就無法修改。單引號和雙引號沒有本質(zhì)上的區(qū)別，推薦使用單引號。
注意事項(xiàng)：
案例：
let name = "謐夜星球";
let str = '你好,JavaScript!';布爾類型用于表示邏輯值，即真（true）或假（false）。布爾類型非常有用，我們可以使用它們來進(jìn)行條件判斷和控制程序流程。
案例：
let isActive = true;
let isFinished = false;Null用于表示空值或不存在的對象。當(dāng)我們想要明確地表達(dá)一個(gè)變量沒有值時(shí)，可以使用Null。
案例：
let person = null;Undefined表示未賦值的變量或不存在的屬性。當(dāng)我們聲明變量但尚未給它賦值時(shí)，它的默認(rèn)值為Undefined。
案例：
let age;
console.log(age); // 輸出undefined引用數(shù)據(jù)類型是基于對象的，用于存儲和操作復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。
對象是JavaScript中最常見的數(shù)據(jù)類型之一，它是一組鍵值對的集合。每個(gè)鍵都是一個(gè)字符串（或符號），而值可以是任何數(shù)據(jù)類型，包括其他對象。
案例：
let person = {
name: "謐夜",
age: 25,
gender: "male"
};數(shù)組是一種有序集合，可以存儲多個(gè)值。JavaScript中的數(shù)組可以包含不同數(shù)據(jù)類型的元素，并且可以根據(jù)需要?jiǎng)討B(tài)調(diào)整大小。
案例：
let fruits = ["apple", "banana", "orange"];函數(shù)是一種可重復(fù)使用的代碼塊，可以接收參數(shù)并返回結(jié)果。JavaScript中的函數(shù)是一等公民，可以將它們存儲在變量中、作為參數(shù)傳遞給其他函數(shù)，并從函數(shù)中返回它們。
案例：
function add(a, b) {
return a + b;
}日期用于表示時(shí)間和日期。JavaScript提供了內(nèi)置的Date對象，用于處理日期和時(shí)間相關(guān)的操作。
案例：
let today = new Date();注：JavaScript 中變量的值決定了變量的數(shù)據(jù)類型。
在JavaScript編程中，數(shù)據(jù)類型轉(zhuǎn)換是非常常見的操作。JavaScript會根據(jù)需要自動進(jìn)行類型轉(zhuǎn)換，但有時(shí)我們需要顯式地控制類型轉(zhuǎn)換以確保程序的正確性。
某些運(yùn)算符被執(zhí)行時(shí)，系統(tǒng)內(nèi)部自動將數(shù)據(jù)類型進(jìn)行轉(zhuǎn)換，這種轉(zhuǎn)換稱為隱式轉(zhuǎn)換。JavaScript在這些操作中會自動進(jìn)行隱式類型轉(zhuǎn)換，以滿足操作的要求，但可能會導(dǎo)致一些意想不到的結(jié)果，因此在運(yùn)算時(shí)需要格外小心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)據(jù)類型-隱式轉(zhuǎn)換</title>
</head>
<body>
<script>
let num1 = 20 // 數(shù)值
let num2 = '23' // 字符串
// 結(jié)果為 2023
// 原因是將數(shù)值 num1 轉(zhuǎn)換成了字符串，相當(dāng)于 '20'
// 然后 + 將兩個(gè)字符串拼接到了一起
console.log(num + num2)
// 結(jié)果為 -3
// 原因是將字符串 num2 轉(zhuǎn)換成了數(shù)值，相當(dāng)于 23，即20-23=-3
console.log(num - num2)
</script>
</body>
</html>//布爾值的隱式轉(zhuǎn)換
let num = 10;
if (num) {
// num被轉(zhuǎn)換為布爾值，條件為true
}在一些情況下，我們需要明確地將一個(gè)數(shù)據(jù)類型轉(zhuǎn)換為另一個(gè)。JavaScript提供了一些函數(shù)和操作符來進(jìn)行顯式類型轉(zhuǎn)換。
使用String()函數(shù)或toString()方法將值轉(zhuǎn)換為字符串。
let num = 42;
let str = String(num); // "42"使用Number()函數(shù)將值轉(zhuǎn)換為數(shù)值。
let str = "3.14";
let num = Number(str); // 3.14使用Boolean()函數(shù)將值轉(zhuǎn)換為布爾值。
let num = 0;
let bool = Boolean(num); // false這兩個(gè)函數(shù)用于將字符串轉(zhuǎn)換為整數(shù)和浮點(diǎn)數(shù)。
let strInt = "42";
let intNum = parseInt(strInt); // 42
let strFloat = "3.14";
let floatNum = parseFloat(strFloat); // 3.14一些操作符在執(zhí)行時(shí)會觸發(fā)類型轉(zhuǎn)換，例如加號操作符 +。
let num = 42;
let str = "10";
let result = num + str;
// 結(jié)果為 "4210"編寫程序時(shí)過度依靠系統(tǒng)內(nèi)部的隱式轉(zhuǎn)換是不嚴(yán)謹(jǐn)?shù)模?//因?yàn)殡[式轉(zhuǎn)換規(guī)律并不清晰，大多是靠經(jīng)驗(yàn)總結(jié)的規(guī)律。
//為了避免因隱式轉(zhuǎn)換帶來的問題，通常根邏輯需要對數(shù)據(jù)進(jìn)行顯示轉(zhuǎn)換。在進(jìn)行類型轉(zhuǎn)換時(shí)，我們需要注意一些常見的陷阱。以下是一些常見的陷阱及其解決方法：
空字符串轉(zhuǎn)換為數(shù)字：當(dāng)把空字符串轉(zhuǎn)換為數(shù)字時(shí)，其結(jié)果為0。如果你希望得到NaN或其他非數(shù)字的結(jié)果，可以使用isNaN()函數(shù)進(jìn)行檢查。
非數(shù)字字符串轉(zhuǎn)換為數(shù)字：當(dāng)把非數(shù)字字符串轉(zhuǎn)換為數(shù)字時(shí)，其結(jié)果可能是一個(gè)NaN。可以使用isNaN()函數(shù)進(jìn)行檢查，或者使用強(qiáng)制類型轉(zhuǎn)換（如parseFloat()）來避免這種情況。
0與空字符串的比較：在JavaScript中，0和空字符串""并不相同。0是一個(gè)數(shù)字，而""是一個(gè)字符串。因此，在進(jìn)行比較操作時(shí)需要格外小心。
var num = 0; // num 的類型為 Number
var str = ""; // str 的類型為 String
console.log(num == ""); // 輸出 false，因?yàn)?0 和 "" 的類型不同
console.log(num === ""); // 輸出 false，因?yàn)?0 和 "" 的類型和值都不同
console.log(num != ""); // 輸出 true，因?yàn)?0 和 "" 的類型不同
console.log(num !== ""); // 輸出 true，因?yàn)?0 和 "" 的類型和值都不同比較操作中的陷阱：在進(jìn)行比較操作時(shí)，不同的比較運(yùn)算符可能會產(chǎn)生不同的結(jié)果。例如，"=="運(yùn)算符會進(jìn)行類型比較，"==="運(yùn)算符會進(jìn)行值和類型比較。因此，在使用比較運(yùn)算符時(shí)需要確保比較的類型和期望的結(jié)果一致。
在進(jìn)行比較操作時(shí)，我們需要根據(jù)實(shí)際的需求選擇合適的比較運(yùn)算符。如果只關(guān)心值的大小，那么使用"=="運(yùn)算符即可；如果關(guān)心值和類型的匹配性，那么可以使用"==="運(yùn)算符。
為了編寫出穩(wěn)定、高效的JavaScript代碼，以下是一些關(guān)于數(shù)據(jù)類型轉(zhuǎn)換的最佳實(shí)踐：
021年你需要知道的HTML標(biāo)簽和屬性
Web開發(fā)人員都在廣泛的使用HTML。無論你使用什么框架或者選擇哪個(gè)后端語言，框架在變，但是HTML始終如一。盡管被廣泛使用，但還是有一些標(biāo)簽或者屬性是大部分開發(fā)者不熟知的。雖然現(xiàn)在有很多的模版引擎供我們使用，但是樂字節(jié)教育的老師和我們說還是需要盡可能的熟練掌握HTML內(nèi)容，就像CSS一樣。
在我看來，最好盡可能使用HTML特性來實(shí)現(xiàn)我們的功能，而不是使用JavaScript實(shí)現(xiàn)相同的功能，盡管我承認(rèn)編寫HTML可能會是重復(fù)的和無聊的。
盡管許多開發(fā)人員每天都在使用HTML，但他們并沒有嘗試改進(jìn)自己的項(xiàng)目，也沒有真正利用HTML的一些鮮為人知的特性。
下面這5個(gè)通過HTML標(biāo)簽/屬性實(shí)現(xiàn)的功能我覺得需要了解一下：
圖片懶加載
圖片懶加載可以幫助提升網(wǎng)站的性能和響應(yīng)能力。圖片懶加載可以避免立即加載那些不在屏幕中立即顯示的圖片素材，當(dāng)用戶滾動臨近圖片時(shí)再去開始加載。
換言之，當(dāng)用戶滾動到圖片出現(xiàn)時(shí)再進(jìn)行加載，否則不加載。這就降低了屏幕內(nèi)容展示過程中的圖片素材的請求數(shù)量，提升了站點(diǎn)性能。
往往我們都是通過javascript來實(shí)現(xiàn)的，通過監(jiān)聽頁面滾動事件來確定加載對應(yīng)的資源。但是，在不完全考慮兼容性的場景下，我們其實(shí)可以直接通過HTML來直接實(shí)現(xiàn)。
注：本篇的提到的標(biāo)簽和屬性的兼容性需要大家根據(jù)實(shí)際場景來選取是否使用
可以通過為圖片文件添加loading="lazy"的屬性來實(shí)現(xiàn):
輸入提示
當(dāng)用戶在進(jìn)行輸入搜索功能時(shí)，如果能夠給出有效的提示，這會大大提升用戶體驗(yàn)。輸入建議和自動完成功能現(xiàn)在到處可見，我們可以使用Javascript添加輸入建議，方法是在輸入框上設(shè)置事件偵聽器，然后將搜索到的關(guān)鍵詞與預(yù)定義的建議相匹配。
其實(shí)，HTML也是能夠讓我們來實(shí)現(xiàn)預(yù)定義輸入建議功能的，通過<datalist>標(biāo)簽來實(shí)現(xiàn)。需要注意的是，使用時(shí)這個(gè)標(biāo)簽的id屬性需要和input元素的list屬性一致。
Picture標(biāo)簽
你是否遇到過在不同場景或者不同尺寸的設(shè)備上面的時(shí)候，圖片展示適配問題呢？我想大家都遇到過。
針對只有一個(gè)尺寸的圖片素材的時(shí)候，我們往往可以通過CSS的object-fit屬性來進(jìn)行裁切適配。但是有些時(shí)候需要針對不同的分辨率來顯示不同尺寸的圖片的場景的時(shí)候，我們是否可以直接通過HTML來實(shí)現(xiàn)呢？
HTML提供了<picture>標(biāo)簽，允許我們來添加多張圖片資源，并且根據(jù)不同的分辨率需求來展示不同的圖片。
我們可以定義不同區(qū)間的最小分辨率來確定圖片素材，這個(gè)標(biāo)簽的使用有些類似<audio>和<video>標(biāo)簽。
Base URL
當(dāng)我們的頁面有大量的錨點(diǎn)跳轉(zhuǎn)或者靜態(tài)資源加載時(shí)，并且這些跳轉(zhuǎn)或者資源都在統(tǒng)一的域名的場景時(shí)，我們可以通過<base>標(biāo)簽來簡化這個(gè)處理。
例如，我們有一個(gè)列表需要跳轉(zhuǎn)到微博的不同大V的主頁，我們就可以通過設(shè)置來簡化跳轉(zhuǎn)路徑
<base>標(biāo)記必須具有href和target屬性。
頁面重定向（刷新）
當(dāng)我們希望實(shí)現(xiàn)一段時(shí)間后或者是立即重定向到另一個(gè)頁面的功能時(shí)，我們可以直接通過HTML來實(shí)現(xiàn)。
我們經(jīng)常會遇到有些站點(diǎn)會有這樣一個(gè)功能，“5s后頁面將跳轉(zhuǎn)”。這個(gè)交互可以嵌入到HTML中，直接通過<meta>標(biāo)簽，設(shè)置http-equiv="refresh"來實(shí)現(xiàn)
這里content屬性指定了重定向發(fā)生的秒數(shù)。值得一提的是，盡管谷歌聲稱這種形式的重定向和其他的重定向方式一樣可用，但是使用這種類型的重定向其實(shí)并不是那么的優(yōu)雅，往往會顯得很突兀。
因此，最好在某些特殊的情況下使用它，比如在長時(shí)間用戶不活動之后再重定向到目標(biāo)頁面。
后記
HTML和CSS是非常強(qiáng)大的，哪怕我們僅僅使用這兩種技術(shù)也能創(chuàng)建出一些奇妙的網(wǎng)站。雖然它們的使用量很大很普遍，還是有很多的開發(fā)者并沒有真正的深入了解他們，還有很多的內(nèi)容需要我們深入的去學(xué)習(xí)和理解，實(shí)踐，有很多的技巧等待著我們?nèi)グl(fā)現(xiàn)。
文章轉(zhuǎn)載至樂字節(jié)
最后給大家推薦幾個(gè)b站超詳細(xì)的Java自學(xué)課：
Servlet入門教程BV1D5411373E
Vue、Vuejs教程，BV19V41177od
SpringBoot+Vue項(xiàng)目實(shí)戰(zhàn)BV1o64y117qQ
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
