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