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