網(wǎng)站出現(xiàn)風(fēng)險(xiǎn)如何處理東莞企業(yè)網(wǎng)站模板建站
前言
🌟🌟本期講解關(guān)于HTML+CSS+JavaScript的基礎(chǔ)知識(shí)，小編帶領(lǐng)大家簡(jiǎn)單過(guò)一遍~~~
🌈感興趣的小伙伴看一看小編主頁(yè)：GGBondlctrl-CSDN博客
🔥 你的點(diǎn)贊就是小編不斷更新的最大動(dòng)力 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
🎆那么廢話不多說(shuō)直接開整吧~~
?
目錄
1.HTML?
1.1什么是HTML
1.2HTML的基本結(jié)構(gòu)
1.3HTML的快速入門
1.4HTML常見的標(biāo)簽
1.段落標(biāo)簽
2.圖片標(biāo)簽
3.超鏈接標(biāo)簽
4.input標(biāo)簽
5.?語(yǔ)義標(biāo)簽: div&span?
2.CSS?
2.1什么是CSS
2.2CSS基礎(chǔ)結(jié)構(gòu)
2.3CSS選擇器
1.標(biāo)簽選擇器
2.class選擇器
3.id選擇器
4.通配符選擇器?
5.復(fù)合選擇器
2.4常用的CSS
1.color
2.font-size
3.外邊距與內(nèi)邊距
3.JavaScript
3.1什么是JavaScript
3.2JavaScript的基礎(chǔ)語(yǔ)法
3.3使用JQuery操作JavaScript
1.引入對(duì)應(yīng)的庫(kù)
2.jQuery的基礎(chǔ)語(yǔ)法知識(shí)
4.總結(jié)
1.HTML?
1.1什么是HTML
HTML(Hyper Text Markup Language), 超?本標(biāo)記語(yǔ)?.
超?本: ??本要強(qiáng)?. 通過(guò)鏈接和交互式?式來(lái)組織和呈現(xiàn)信息的?本形式. 不僅僅有?本, 還可能包含圖?, ?頻, 或者?已經(jīng)審閱過(guò)它的學(xué)者所加的評(píng)注、補(bǔ)充或腳注等等.
標(biāo)記語(yǔ)?: 由標(biāo)簽構(gòu)成的語(yǔ)?（注意在后面經(jīng)常會(huì)使用到這個(gè)標(biāo)簽）
?例如以下：
<h1>我是?級(jí)標(biāo)題</h1>
<h2>我是?級(jí)標(biāo)題</h2>
<h3>我是三級(jí)標(biāo)題</h3>這里的h1,h2就是標(biāo)簽；?
1.2HTML的基本結(jié)構(gòu)
小編這里使用的就是idea進(jìn)行的前端HTML的編寫，一般來(lái)說(shuō)這里的結(jié)構(gòu)就是如下所示的：
<html><head><title>第?個(gè)??</title></head><body>hello world</body>
</html>?解釋：
? html 標(biāo)簽是整個(gè) html ?件的根標(biāo)簽(最頂層標(biāo)簽)
? head 標(biāo)簽中寫??的屬性.
? body 標(biāo)簽中寫的是??上顯?的內(nèi)容
? title 標(biāo)簽中寫的是??的標(biāo)題
這里的title就是標(biāo)簽，如下所示：
這個(gè)就是頁(yè)面的標(biāo)題，所以這里一般可以自己進(jìn)行規(guī)定名稱；
1.3HTML的快速入門
這里的HTML的基本結(jié)構(gòu)就是如下所示的：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body>這是一個(gè)頁(yè)面內(nèi)容
</body>
</html>解釋：
? <!DOCTYPE html> 稱為 DTD (?檔類型定義), 描述當(dāng)前的?件是?個(gè) HTML5 的?件.
? <html lang="en"> 其中 lang 屬性表?當(dāng)前??是?個(gè) "英語(yǔ)??". 這?暫時(shí)不?管. (有些
瀏覽器會(huì)根據(jù)此處的聲明提?是否進(jìn)??動(dòng)翻譯).
? <meta charset="UTF-8"> 描述??的字符編碼?式. 沒有這??可能會(huì)導(dǎo)致中?亂碼.
小編認(rèn)為我們所后端開發(fā)的不用過(guò)于深究這里的問(wèn)題，不用“鉆牛角尖”?
這里在瀏覽器上進(jìn)行運(yùn)行觀察如下所示：
當(dāng)然這里的頁(yè)面的標(biāo)簽小編這里是截取不到了；
1.4HTML常見的標(biāo)簽
1.段落標(biāo)簽
在HTML中, 段落, 換?符, 空格都會(huì)失效, 如果需要分成段落, 需要使?專?的標(biāo)簽
所以專門的段落標(biāo)簽就是如下：
<p>這是?個(gè)段落</p>
<p>這是?個(gè)段落</p>注意：
? p 標(biāo)簽描述的段落, 前?沒有縮進(jìn). (未來(lái) CSS 會(huì)學(xué))
? ?動(dòng)根據(jù)瀏覽器寬度來(lái)決定排版.
? html 內(nèi)容?尾處的換?, 空格均?效.
? 在 html 中?字之間輸?的多個(gè)空格只相當(dāng)于?個(gè)空格.
? html 中直接輸?換?不會(huì)真的換?, ?是相當(dāng)于?個(gè)空格
2.圖片標(biāo)簽
<img src="rose.jpg">注意這里的圖片的來(lái)源就是這個(gè)程序的文件的目錄下，這是直接路徑
3.超鏈接標(biāo)簽
? href: 必須具備, 表?點(diǎn)擊后會(huì)跳轉(zhuǎn)到哪個(gè)??.
? target: 打開?式. 默認(rèn)是 _self. 如果是 _blank 則?新的標(biāo)簽?打開
<a href="http://www.baidu.com">百度</a>4.input標(biāo)簽
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">?注意：
各種輸?控件, 單??本框, 按鈕, 單選框, 復(fù)選框.
? type(必須有), 取值種類很多, button, checkbox, text, file, image, password, radio 等.
? name: 給 input 起了個(gè)名字. 尤其是對(duì)于 單選按鈕, 具有相同的 name 才能多選?.
? value: input 中的默認(rèn)值.
? checked: 默認(rèn)被選中. (?于單選按鈕和多選按鈕)
5.?語(yǔ)義標(biāo)簽: div&span?
<div><span>咬?貓</span>
</div>
<div><span>兔總裁</span>
</div>
<div><span>阿葉君</span>
</div>注意：
div 標(biāo)簽, division 的縮寫, 含義是 分割
span 標(biāo)簽, 含義是跨度
就是兩個(gè)盒?. ?于??布局
? div 是獨(dú)占??的, 是?個(gè)?盒?.
? span 不獨(dú)占??, 是?個(gè)?盒?
以上就是比較基礎(chǔ)的HTML的理解，由于小編是后端開發(fā)為目的的，一般來(lái)說(shuō)就是看懂前端的代碼就行，所以總結(jié)的不是很到位，所以對(duì)這部分感興趣的uu可以擴(kuò)展一下?
2.CSS?
2.1什么是CSS
CSS 能夠?qū)??中元素位置的排版進(jìn)?像素級(jí)精確控制, 實(shí)現(xiàn)美化??的效果. 能夠做到??的樣式和結(jié)構(gòu)分離.
CSS前 -> CSS修飾后：
2.2CSS基礎(chǔ)結(jié)構(gòu)
選擇器 + {?條/N條聲明}
? 選擇器決定針對(duì)誰(shuí)修改 (找誰(shuí))
? 聲明決定修改啥. (?啥)
? 聲明的屬性是鍵值對(duì). 使? ; 區(qū)分鍵值對(duì), 使? : 區(qū)分鍵和值.
代碼如下：
<style>p {/* 設(shè)置字體顏? */color: red;/* 設(shè)置字體?? */font-size: 30px;}
</style>
<p>hello</p>注意:
? CSS 要寫到 style 標(biāo)簽中(后?還會(huì)介紹其他寫法)
? style 標(biāo)簽可以放到??任意位置. ?般放到 head 標(biāo)簽內(nèi)
2.3CSS選擇器
CSS 選擇器的主要功能就是選中??指定的標(biāo)簽元素. 選中了元素, 才可以設(shè)置元素的屬性.
就好? SC2, War3 這樣的游戲, 需要先選中單位, 再指揮該單位?動(dòng).
CSS選擇器主要分以下?種:
1. 標(biāo)簽選擇器
2. class選擇器
3. id選擇器4. 復(fù)合選擇器
5. 通配符選擇器?
代碼如下：
<div class="font32">我是?個(gè)div, class為font32</div>
<div class="font32">我是?個(gè)div, class為font32</div>
<div><a href="#">我是?個(gè)div</a></div>
<ul><li>aaa</li><li>bbb</li><li><a href="#">ccc</a></li>
</ul>
<ol><li>1111</li><li>2222</li><li>3333</li>
</ol>
<button id="submit">提交</button>其中的標(biāo)簽的選擇器就是如下所示的：
1.標(biāo)簽選擇器
a {color: red;
}2.class選擇器
.font32 {font-size: 32px;
}注意：這里是有一個(gè)點(diǎn)的；
?個(gè)類可以被多個(gè)標(biāo)簽使?, ?個(gè)標(biāo)簽也能使?多個(gè)類(多個(gè)類名要使?空格分割, 這種做法可以讓
3.id選擇器
#submit {color: red;
}注意：id 是唯?的, 不能被多個(gè)標(biāo)簽使? (是和 類選擇器 最?的區(qū)別)
4.通配符選擇器?
* {color: red;
}注意:置??所有元素, 顏?為紅?
5.復(fù)合選擇器
ul li a {color: blue;
}注意：這里的的標(biāo)簽是有先后順序的，不能調(diào)換順序
2.4常用的CSS
1.color
.text1{color: red;
}顏?有如下?種表達(dá)?式:
? 英?單詞,如red,blue
? rgb代碼的顏? 如rgb(255,0,0)
? ?六進(jìn)制的顏? 如#ff00ff?
2.font-size
.text1{font-size: 32px;
}設(shè)置的是這個(gè)字體的大小
3.外邊距與內(nèi)邊距
?padding: 內(nèi)邊距, 設(shè)置內(nèi)容和邊框之間的距離.內(nèi)容默認(rèn)是頂著邊框來(lái)放置的. ? padding 來(lái)控制這個(gè)距離；
margin：外邊距, 設(shè)置元素和元素之間的距離.
圖示如下：
內(nèi)外邊距的概念是相對(duì)的，具體是取決于參考的物體；
<style>span{border: red double 2px;margin-left: 20px;margin-right: 20px;}</style>這里只列舉了margin這個(gè)外邊距的概念，意思就是左右邊距是20像素
3.JavaScript
3.1什么是JavaScript
JavaScript (簡(jiǎn)稱 JS), 是?個(gè)腳本語(yǔ)?, 解釋型或即時(shí)編譯型的編程語(yǔ)?. 雖然它是作為開發(fā)Web??的腳本語(yǔ)??出名，但是它也被?到了很多?瀏覽器環(huán)境中
這里的語(yǔ)言主要是用作交互的操作，他與HTML和CSS的關(guān)系如下所示：
解釋具體：
? HTML: ??的結(jié)構(gòu)(?)
? CSS: ??的表現(xiàn)(?)
? JavaScript: ??的?為(魂)
具體的代碼格式如下：
<body><script>alert("Hello JavaScript!")</script>
</body>?此時(shí)進(jìn)行輸出就是如下所示：
可以看到此時(shí)的我們就可以進(jìn)行點(diǎn)擊交互了；
3.2JavaScript的基礎(chǔ)語(yǔ)法
var ：早期JS中聲明變量的關(guān)鍵字, 作?域在該語(yǔ)句的函數(shù)內(nèi) var name = 'zhangsan';
let ：ES6 中新增的聲明變量的關(guān)鍵字, 作?域?yàn)樵撜Z(yǔ)句所在的代碼塊內(nèi)let name = 'zhangsan';
const： 聲明常量的，聲明后不能修改 const name = 'zhangsan';
var name = 'zhangsan';
var age = 20;可以看到這里的var可以是字符串，也可以是整型；
所以直接計(jì)入函數(shù)的學(xué)習(xí)，關(guān)于JavaScript的函數(shù)方法的寫法具體是如下所示的：
function hello() {console.log("hello");
}
// 如果不調(diào)?函數(shù), 則沒有執(zhí)?打印語(yǔ)句
hello();這是第一種的寫法，就是function加上方法的名字，然后具體的操作，調(diào)用就是直接方法名字即可
var add = function() {var sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add);這就是第二種寫法，將add變量作為sum的返回的值，然后再進(jìn)行調(diào)用操作；
對(duì)象的創(chuàng)建和調(diào)用：
具體的代碼如下所示：
var student = {name: '蔡徐坤',height: 175,weight: 170,sayHello: function() {console.log("hello");}
};
// 1. 使? . 成員訪問(wèn)運(yùn)算符來(lái)訪問(wèn)屬性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使? [ ] 訪問(wèn)屬性, 此時(shí)屬性需要加上引號(hào)
console.log(student['height']);
// 3. 調(diào)??法, 別忘記加上 ()
student.sayHello();這就是主要的對(duì)象的創(chuàng)建的方式，還用一種就是通過(guò)new來(lái)創(chuàng)建對(duì)象，但是小編不推薦這種寫法，那么通過(guò)new對(duì)象來(lái)進(jìn)行操作的方式如下：
var student = new Object(); // 和創(chuàng)建數(shù)組類似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();3.3使用JQuery操作JavaScript
1.引入對(duì)應(yīng)的庫(kù)
點(diǎn)擊進(jìn)入之后，點(diǎn)擊任何版本的都是沒有問(wèn)題的，但是在進(jìn)入每個(gè)小版本的時(shí)候，建議使用minified這個(gè)；
然后進(jìn)行復(fù)制：
補(bǔ)充：
uncompressed : ?壓縮版本(易讀, 但是?件較?, 傳輸速度慢)
minified: 壓縮版(不易讀, ?件?, 性能?, 開發(fā)中推薦)
slim: 精簡(jiǎn)瘦?版, 沒有Ajax和?些特效
slim minified : slim 的壓縮版?
那么最后，就可以粘貼到我們代碼中了，代碼如下：
<body>
<script src="jquery.js"></script></body>?但是為啥小編這里是這么短？？因?yàn)樾【帉⑦@個(gè)保存到本地了，然后直接放在項(xiàng)目的文件夾里了，如下所示：
這樣的好處就是：放在當(dāng)前項(xiàng)?中. 引?外部地址, 會(huì)有外部地址不能訪問(wèn)的?險(xiǎn)
那么操作的方式如下：
先點(diǎn)擊復(fù)制https的網(wǎng)址入口，然后進(jìn)入這個(gè)頁(yè)面：
?可以看到此時(shí)就是內(nèi)部的源碼，然后再次右擊鼠標(biāo)進(jìn)行另存為到我們寫的代碼的目錄下：
可以發(fā)現(xiàn)此時(shí)，我們?cè)诖a中就是這個(gè)jQuery的文件了，那么我們就可以使用這個(gè)jQuery來(lái)操作JavaScript了；
2.jQuery的基礎(chǔ)語(yǔ)法知識(shí)
jQuery 語(yǔ)法是通過(guò)選取 HTML 元素, 并對(duì)選取的元素執(zhí)?某些操作
$(selector).action()注意：
$() 是?個(gè)函數(shù), 它是 jQuery 提供的?個(gè)全局函數(shù), ?于選擇和操作 HTML 元素.
? Selector 選擇器, ?來(lái)"查詢"和"查找" HTML 元素
? action 操作, 執(zhí)?對(duì)元素的操作
那么具體的實(shí)例操作就是如下：
<button type="button">點(diǎn)我消失</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>$(document).ready(function(){$('button').click(function(){$(this).hide();});});</script>這就是一個(gè)點(diǎn)擊交互，然后按鍵消失的操作；
解釋：等文件加載完畢后點(diǎn)擊了這個(gè)按鈕就會(huì)觸發(fā)一個(gè)方法，這個(gè)方發(fā)就會(huì)導(dǎo)致消失的操作；
這里的事件就是點(diǎn)擊操作的事件，但是還有其他的事件如下：
?檔就緒事件(完成加載) $(document).ready(function)
點(diǎn)擊事件 $(selector).click(function)
雙擊事件 $(selector).dblclick(function)元素的值發(fā)?改變 $(selector).change(function)
?標(biāo)懸停事件 $(selector).mouseover(function)
當(dāng)然還有這個(gè)如何獲取這個(gè)元素的內(nèi)容
text() 設(shè)置或返回所選元素的?本內(nèi)容
html() 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)簽）
val() 設(shè)置或返回表單字段的值
代碼如下所示：
<body>
<script src="jquery.js" ></script>
<input type="button" value="點(diǎn)擊消失按鈕"><div id="test"><span>你好</span></div>
<input type="text" value="hello">
<script>$(document).ready(function () {var html = $("#test").html();console.log("html內(nèi)容為:"+html);var text = $("#test").text();console.log("?本內(nèi)容為:"+text);var inputVal = $("input").val();console.log(inputVal);});
</script>
</body>
那么此時(shí)的輸出就是如下所示的：
此時(shí)可以看到，當(dāng)我們進(jìn)入瀏覽器的控制臺(tái)的時(shí)候，可以發(fā)現(xiàn)html內(nèi)容包含了標(biāo)簽，而文本內(nèi)容就只有文本，不包含其他的標(biāo)簽；
當(dāng)然這里還有其他的操作，例如添加，刪除，以及CSS屬性的操作；小編就不再過(guò)多的演示了；這里還有一個(gè)猜數(shù)字的前端小游戲，小編將代碼放在下面的gitee里了；
4.總結(jié)
小編本期主要講解了關(guān)于前端三劍客的基礎(chǔ)認(rèn)知：HTML+CSS+JavaScript的基礎(chǔ)知識(shí)；但是講解的不是很仔細(xì)需要擴(kuò)展的小伙伴可以額外去學(xué)習(xí)學(xué)習(xí)哦；
猜數(shù)字小游戲代碼在test6：前端基礎(chǔ)知識(shí): 前端知識(shí)了解
🌅🌅🌅~~~~最后希望與諸君共勉，共同進(jìn)步！！！
💪💪💪以上就是本期內(nèi)容了， 感興趣的話，就關(guān)注小編吧。
? ? ? ? ? ? ? ? ?😊😊??期待你的關(guān)注~~~