時間：2023-07-05 00:21:01 | 來源：網(wǎng)站運營
時間：2023-07-05 00:21:01 來源：網(wǎng)站運營
前端三劍客 HTML、CSS、JavaScript 入門到上手：
在線咨詢
<html> <head> <title>第?個??</title> </head> <body> hello world </body></html>這三個標簽組成了一個html的主體，也是一個最簡單的頁面。每個標簽，都分成了開始標簽和結(jié)束標簽，是成對出現(xiàn)的，標簽之間可以嵌套。ctrl + / 快捷鍵可以快速注釋/取消注釋。
<!-- 我是注釋 -->注釋不會顯示在界面上，目的是提高代碼的可讀性。標題標簽有6個：<h1>...<h6> 數(shù)字越大，字體越小段落標簽是用 <p> 來定義的段落標簽保證了每一個段落是存在在一行的，并且距離下一個段落中間會空有一行的間距。下面我們用lorem生成一個隨機的比較長的字符串再來測試一下我們的<p>標簽的展示效果：段落標簽是用 <br> 來定義的和<p>不一樣的是，<br>他只會進行換行，不會分段使每段之間有一個空行，且 br 標簽是一個“單標簽”，只有開始標簽，沒有結(jié)束標簽。<a href="https://www.baidu.com">這是超鏈接，點擊跳轉(zhuǎn)到百度</a內(nèi)部鏈接<a href="htmlDemo1.html">跳轉(zhuǎn)到自己文件夾中的另外一個html網(wǎng)頁</a>空鏈接<a href="#">這是一個空連接</a>下載鏈接<a href = "cat.zip">點擊下載這個壓縮包 </a>錨點鏈接類似于目錄，點擊之后會跳轉(zhuǎn)到本頁面中的特定的位置。
表單標簽是用戶和頁面交互的重要手段，是要讓用戶來“輸入”的。form 標簽
用<form> </form>來創(chuàng)建一個表單標簽，借助 form 就可以允許用戶輸入一些信息，并且提交到 服務器 上。input 標簽
onclick表示在點擊元素的時候觸發(fā)，觸發(fā)的內(nèi)容就是 " " 里的代碼， 會被瀏覽器直接執(zhí)行。這里的alert就是彈出一個對話框。<button onclick="alert('hello HTML')">這是一個按鈕</button>來實現(xiàn)。每一個 html 元素(標簽)，都可以設置一個唯一的 id，在一個頁面中，id 的取值不能重復。select 標簽
通過這個 id 屬性，在 input 標簽設置選中框操作上搭配 label 標簽，實現(xiàn)通過點擊文字，也能選中的效果。
可以實現(xiàn)一個下拉菜單textarea 標簽
是一個可以指定多行編輯框的標簽
div 默認是一個塊級元素（獨占一行）前面的標簽，都是 “有語義” 的標簽，每個標簽都有一個明確的 “角色”；
span 默認是一個行內(nèi)元素（不獨占一行）
每一個 CSS 語句包含兩個部分：選擇器 + 應用的屬性
在某個標簽中，引入 style 屬性，來指定樣式
寫在 style 標簽中，嵌入到 html 內(nèi)部的樣式內(nèi)聯(lián)樣式只適合于特別簡單的情況，如果樣式比較復雜，不建議用這種寫法
把 CSS 代碼單獨提取出來，放到一個 .css 文件中，然后在 html 代碼里，通過 link 標簽，來引入該 CSS 文件。
選擇器的功能就是選中頁面的元素(標簽)
用 html 的一個標簽名寫的選擇器
在 CSS 代碼中創(chuàng)建一個類名，此時具有該類名的元素，都會應用上相關的 CSS 屬性
給被選中的元素(標簽)，設置個 id 屬性
直接選中頁面上的所有元素，一般最大的用途是 取消瀏覽器的默認樣式經(jīng)典寫法：
實現(xiàn)選擇器能夠選中 某個元素 里面的后代元素的方法，用多個選擇器組合使用
一種選擇器嵌套另外一種選擇器的方式
并列的寫多個選擇器
body { font-family: '微軟雅?'; font-family: 'Microsoft YaHei'; }② 字體大小p { font-size: 20px; }③ 字體粗細p { font-weight: bold; font-weight: 700; }④ 文字樣式/* 設置傾斜 */font-style: italic;/* 取消傾斜 */font-style: normal;color: red;color: #ff0000;color: rgb(255, 0, 0);在 rgb 中通過不同的分量拉不同的值，就能得到不同的顏色。rgba ：透明度。text-indent: [值];background-color: [指定顏?]② 背景圖片background-image: url(...);③ 背景平鋪background-repeat: [平鋪?式]background-size: length|percentage|cover|contain;<input type="button" value="點我一下" onclick="alert('haha')">注意, JS 中字符串常量可以使用單引號表示, 也可以 使用雙引號表示.<script> alert("haha");</script>3. 外部式<script src="hello.js"></script>alert("hehe");注意, 這種情況下 script 標簽中間不能寫代碼. 必須空著(寫了代碼也不會執(zhí)行).var name = 'zhangsan';var age = 20;var 是 JS 中的關鍵字, 表示這是一個變量.使用變量
= 在 JS 中表示 “賦值”, 相當于把數(shù)據(jù)放到內(nèi)存的盒子中. = 兩側(cè)建議有一個空格
每個語句最后帶有一個 ; 結(jié)尾. JS 中可以省略 ; 但是建議還是加上.
注意, 此處的 ; 為英文分號. JS 中所有的標點都是英文標點.
初始化的值如果是字符串, 那么就要使用單引號或者雙引號引起來.
初始化的值如果是數(shù)字, 那么直接賦值即可.
console.log(age); // 讀取變量內(nèi)容age = 30; // 修改變量內(nèi)容為啥動漫中的角色都是要先喊出技能名字再真正釋放技能?代碼示例: 彈框提示用戶輸入信息, 再彈框顯示.
就是因為變量要先聲明才能使用.
var name = prompt("請輸入姓名:");var age = prompt("請輸入年齡:");var score = prompt("請輸入分數(shù)");alert("您的姓名是: " + name);alert("您的年齡是: " + age);alert("您的分數(shù)是: " + score);也可以把三個輸出內(nèi)容合并成一次彈框var name = prompt("請輸入姓名:");var age = prompt("請輸入年齡:");var score = prompt("請輸入分數(shù)");alert("您的姓名是: " + name + "/n" + "您的年齡是: " + age + "/n" + "您的分數(shù)是: " + score + "/n");+ 表示字符串拼接, 也就是把兩個字符串首尾相接變成一個字符串./n 表示換行JavaScript 中還支持使用 let 定義變量. 用法和 var 基本類似. 用法上的差異此處暫時不討論.理解 動態(tài)類型
var a = 10; // 數(shù)字var b = "hehe"; // 字符串隨著程序運行, 變量的類型可能會發(fā)生改變.var a = 10; // 數(shù)字a = "hehe"; // 字符串這一點和 C Java 這種靜態(tài)類型語言差異較大.C, C++, Java, Go 等語言是靜態(tài)類型語言. 一個變量在創(chuàng)建的時候類型就確定了, 不能在運行時發(fā)生改變.
如果嘗試改變, 就會直接編譯報錯.
var a = 07; // 八進制整數(shù), 以 0 開頭var b = 0xa; // 十六進制整數(shù), 以 0x 開頭var c = 0b10; // 二進制整數(shù), 以 0b 開頭注意:各種進制之間的轉(zhuǎn)換, 不需要手工計算, 直接使用計算器即可.特殊的數(shù)字值
var max = Number.MAX_VALUE;// 得到 Infinityconsole.log(max * 2);// 得到 -Infinityconsole.log(-max * 2);// 得到 NaNconsole.log('hehe' - 10);注意:1 / Infinityconsole.log(isNaN(10)); // falseconsole.log(isNaN('hehe' - 10)); // truevar a = "haha";var b = 'hehe';var c = hehe; // 運行出錯如果字符串中本來已經(jīng)包含引號咋辦?var msg = "My name is "zhangsan""; // 出錯var msg = "My name is /"zhangsan/""; // 正確, 使用轉(zhuǎn)義字符. /" 來表示字符串內(nèi)部的引號. var msg = "My name is 'zhangsan'"; // 正確, 搭配使用單雙引號var msg = 'My name is "zhangsan"'; // 正確, 搭配使用單雙引號轉(zhuǎn)義字符/n///'/" /tvar a = 'hehe';console.log(a.length);var b = '哈哈';console.log(b.length);結(jié)果:42單位為字符的數(shù)量var a = "my name is ";var b = "zhangsan";console.log(a + b);注意, 數(shù)字和字符串也可以進行拼接var c = "my score is ";var d = 100;console.log(c + d);注意, 要認準相加的變量到底是字符串還是數(shù)字console.log(100 + 100); // 200console.log('100' + 100); // 100100boolean 原本是數(shù)學中的概念 (布爾代數(shù)).Boolean 參與運算時當做 1 和 0 來看待.
在計算機中 boolean 意義重大, 往往要搭配條件/循環(huán)完成邏輯判斷.
console.log(true + 1);console.log(false + 1)這樣的操作其實是不科學的. 實際開發(fā)中不應該這么寫.var a;console.log(a)undefined 和字符串進行相加, 結(jié)果進行字符串拼接console.log(a + "10"); // undefined10undefined 和數(shù)字進行相加, 結(jié)果為 NaNconsole.log(a + 10);var b = null;console.log(b + 10); // 10console.log(b + "10"); // null10注意:null 和 undefined 都表示取值非法的情況, 但是側(cè)重點不同.
null 表示當前的值為空. (相當于有一個空的盒子)
undefined 表示當前的變量未定義. (相當于連盒子都沒有)
&& 與: 一假則假|| 或: 一真則真! 非& 按位與| 按位或~ 按位取反^ 按位異或<< 左移>> 有符號右移(算術右移)>>> 無符號右移(邏輯右移)// 形式1if (條件) { 語句}// 形式2if (條件) { 語句1} else { 語句2}// 形式3if (條件1) { 語句1} else if (條件2) { 語句2 } else if .... { 語句...} else { 語句N} 條件 ? 表達式1 : 表達式2條件為真, 返回表達式1 的值. 條件為假, 返回表達式2 的值.注意, 三元表達式的優(yōu)先級是比較低的.
switch (表達式) { case 值1: 語句1; break; case 值2: 語句2: break; default: 語句N;}用戶輸入一個整數(shù), 提示今天是星期幾var day = prompt("請輸入今天星期幾: ");switch (parseInt(day)) { case 1: console.log("星期一"); break; case 2: console.log("星期二"); break; case 3: console.log("星期三"); break; case 4: console.log("星期四"); break; case 5: console.log("星期五"); break; case 6: console.log("星期六"); break; case 7: console.log("星期日"); break; default: console.log("輸入有誤");}while (條件) { 循環(huán)體;}執(zhí)行過程:var num = 1;while (num <= 10) { console.log(num); num++;}代碼示例2:計算 5 的階乘var result = 1;var i = 1;while (i <= 5) { result *= i; i++;}console.log(result)var i = 1;while (i <= 5) { if (i == 3) { i++; continue; } console.log("我在吃第" + i + "個李子"); i++;}我在吃第1個李子我在吃第2個李子我在吃第4個李子我在吃第5個李子代碼示例:找到 100 - 200 中所有 3 的倍數(shù)var num = 100;while (num <= 200) { if (num % 3 != 0) { num++; // 這里的 ++ 不要忘記! 否則會死循環(huán). continue; } console.log("找到了 3 的倍數(shù), 為:" + num); num++;}var i = 1;while (i <= 5) { if (i == 3) { break; } console.log("我在吃第" + i + "個李子"); i++;}我在吃第1個李子我在吃第2個李子代碼示例: 找到 100 - 200 中第一個 3 的倍數(shù)var num = 100;while (num <= 200) { if (num % 3 == 0) { console.log("找到了 3 的倍數(shù), 為:" + num); break; } num++;}// 執(zhí)行結(jié)果找到了 3 的倍數(shù), 為:102for (表達式1; 表達式2; 表達式3) { 循環(huán)體}for (var num = 1; num <= 10; num++) { console.log(num);}**代碼示例2:**計算 5 的階乘var result = 0;for (var i = 1; i <= 5; i++) { result *= i;}console.log("result = " + result);// Array 的 A 要大寫var arr = new Array();使用字面量方式創(chuàng)建 [常用]var arr = [];var arr2 = [1, 2, 'haha', false]; // 數(shù)組中保存的內(nèi)容稱為 "元素"注意: JS 的數(shù)組不要求元素是相同類型.var arr = ['小豬佩奇', '小豬喬治', '小羊蘇西'];console.log(arr);console.log(arr[0]);console.log(arr[1]);console.log(arr[2]);arr[2] = '小貓凱迪';console.log(arr);如果下標超出范圍讀取元素, 則結(jié)果為 undefinedconsole.log(arr[3]); // undefinedconsole.log(arr[-1]); // undefined注意: 不要給數(shù)組名直接賦值, 此時數(shù)組中的所有元素都沒了.相當于本來 arr 是一個數(shù)組, 重新賦值后變成字符串了.
var arr = ['小豬佩奇', '小豬喬治', '小羊蘇西'];arr = '小貓凱迪';var arr = [9, 5, 2, 7];arr.length = 6;console.log(arr);console.log(arr[4], arr[5]);2. 通過下標新增var arr = [];arr[2] = 10;console.log(arr)此時這個數(shù)組的 [0] 和 [1] 都是 undefinedvar arr = [9, 5, 2, 7, 3, 6, 8];var newArr = [];for (var i = 0; i < arr.length; i++) { if (arr[i] % 2 != 0) { newArr.push(arr[i]); }}console.log(newArr);var arr = [9, 5, 2, 7];// 第一個參數(shù)表示從下表為 2 的位置開始刪除. 第二個參數(shù)表示要刪除的元素個數(shù)是 1 個arr.splice(2, 1);console.log(arr);// 結(jié)果[9, 5, 7]arr.length, length 使用的時候不帶括號, 此時 length 就是一個普通的變量(稱為成員變量, 也叫屬性)// 創(chuàng)建函數(shù)/函數(shù)聲明/函數(shù)定義function 函數(shù)名(形參列表) { 函數(shù)體 return 返回值;}// 函數(shù)調(diào)用函數(shù)名(實參列表) // 不考慮返回值返回值 = 函數(shù)名(實參列表) // 考慮返回值function hello() { console.log("hello");}// 如果不調(diào)用函數(shù), 則沒有執(zhí)行打印語句hello();// 調(diào)用函數(shù)hello();// 定義函數(shù)function hello() { console.log("hello");}sum(10, 20, 30); // 302.如果實參個數(shù)比形參個數(shù)少, 則此時多出來的形參值為 undefinedsum(10); // NaN, 相當于 num2 為 undefined. JS 的函數(shù)傳參比較靈活, 這一點和其他語言差別較大. 事實上這種靈活性往往不是好事.var add = function() { var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum;}console.log(add(10, 20)); // 30console.log(add(1, 2, 3, 4)); // 10console.log(typeof add); // function此時形如 function() { } 這樣的寫法定義了一個匿名函數(shù), 然后將這個匿名函數(shù)用一個變量來表示.JS 中函數(shù)是一等公民, 可以用變量保存, 也可以作為其他函數(shù)的參數(shù)或者返回值.
// 全局變量var num = 10;console.log(num);function test() { // 局部變量 var num = 20; console.log(num);}function test2() { // 局部變量 var num = 30; console.log(num);}test();test2();console.log(num);// 執(zhí)行結(jié)果10203010創(chuàng)建變量時如果不寫 var, 則得到一個全局變量.function test() { num = 100;}test();console.log(num);// 執(zhí)行結(jié)果100另外, 很多語言的局部變量作用域是按照代碼塊(大括號)來劃分的, JS 在 ES6 之前不是這樣的.if (1 < 2) { var a = 10;}console.log(a);var num = 1;function test1() { var num = 10; function test2() { var num = 20; console.log(num); } test2();}test1();// 執(zhí)行結(jié)果20執(zhí)行 console.log(num) 的時候, 會現(xiàn)在 test2 的局部作用域中查找 num. 如果沒找到, 則繼續(xù)去 test1 中查找. 如果還沒找到, 就去全局作用域查找.在 ES6 中也引入了 class 關鍵字, 就能按照類似于 Java 的方式創(chuàng)建類和對象了.2. JavaScript 對象不區(qū)分 “屬性” 和 “方法”
List<String> list = new ArrayList<>()然后我們可以寫一個方法:void add(List<String> list, String s) { list.add(s); }我們不必關注 list 是 ArrayList 還是 LinkedList, 只要是 List 就行. 因為 List 內(nèi)部帶有 add 方法.function add(list, s) { list.add(s)}add 對于 list 這個參數(shù)的類型本身就沒有任何限制. 只需要 list 這個對象有 add 方法即可. 就不必像 Java 那樣先繼承再重寫繞一個圈子.原出處：CSDN
原作者：阿布～
原文鏈接：https://blog.csdn.net/weixin_46448719/article/details/124383884
關鍵詞：入門
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
