前端基本知識介紹

這篇具有很好參考價值的文章主要介紹了前端基本知識介紹。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

一.前端三劍客

1.前導

2.三劍客的分工

二.VsCode的介紹與配置

1.vscode的介紹

2.vscode的下載安裝

3.vscode的使用

3.1 圖形界面操作

3.3 常用插件

三.HTML基礎標簽

HTML基礎知識

1.HTML為何物？

2.標簽介紹

3.HTML屬性

4.HTML標簽骨架

基本的HTML標簽

1.HTML標題標簽

2.換行與空格

3.HTML段落

4.字體加粗與傾斜及刪除效果

5.圖片標簽

6.超鏈接

7.列表

8.布局標簽

9.表格標簽

10.表單標簽

四.CSS基礎選擇器

CSS介紹

CSS樣式表介紹

CSS基礎語法

CSS選擇器

選擇器介紹

基礎選擇器

復合選擇器

CSS引入方式

CSS引入方式介紹

內(nèi)部樣式表（嵌入式）

行內(nèi)樣式表

外部樣式表

五.JS基礎

Javascript介紹

1.js的介紹

2.js的由來

3.JavaScript組成

JavaScript基本語法

1.JavaScript的引入方式

2.js注釋

3.js的輸入輸出方法

4.變量?

5.數(shù)據(jù)類型

6.數(shù)據(jù)類型轉(zhuǎn)換

7.更多JS基礎

六.JS之DOM

1.DOM簡介

什么是DOM？

DOM樹

2.獲取元素

根據(jù)ID獲取

根據(jù)類名獲取

根據(jù)標簽名獲取

通過選擇器獲取

通過選擇器獲?。ǘ鄠€）

定位body標簽

定位html標簽

3.事件基礎

事件基礎介紹

代碼實現(xiàn)

其它的鼠標事件

4.操作元素

操作元素介紹

改變元素的內(nèi)容

操作元素屬性

操作表單元素

樣式屬性操作

更多js操作

一.前端三劍客

1.前導

（1）HTML,CSS,JS都是單獨的語言；

（2）HTML,CSS,JS構(gòu)成前端技術基礎；

前端...,前端基礎,前端,vscode,javascript

2.三劍客的分工

（1）HTML：負責網(wǎng)頁的架構(gòu)；

（2）CSS：負責網(wǎng)頁的樣式，美化；

（3）JavaScript（JS）：負責網(wǎng)頁的行為；

二.VsCode的介紹與配置

1.vscode的介紹

vscode 全稱為 Visual Studio Code ，是?款免費開源的現(xiàn)代化輕量級代碼編輯器，?持?乎所有主流的開發(fā)語?的語法?亮、智能代碼補全、?定義快捷鍵、括號匹配和顏?區(qū)分、代碼?段、代碼對? Diff、GIT命令等特性，?持插件擴展，并針對??開發(fā)和云端應?開發(fā)做了優(yōu)化。

2.vscode的下載安裝

(110條消息) Python爬蟲編程11——JS反爬_彩色的泡沫的博客-CSDN博客https://blog.csdn.net/qq_52914337/article/details/123771663?spm=1001.2014.3001.5501

3.vscode的使用

3.1 圖形界面操作

前端...,前端基礎,前端,vscode,javascript

3.3 常用插件

我們通常需要代碼提示我們輔助編寫，這個時候就涉及到VSCODE提供的一系列的插件插件安裝在 Extension 中，點擊即可看到一個搜索按鈕，可以輸入關鍵字搜索自己想要的插件。如圖：

前端...,前端基礎,前端,vscode,javascript

前端開發(fā)推薦安裝的幾個插件：

1. jshint ： js 代碼規(guī)范檢查。

2. Beautify ：?鍵美化代碼的插件。

3. Javascript(ES6) code snippets ： ES6 語法提示。

4. Auto Rename Tag ：?動重命名標簽。標簽都是成對出現(xiàn)的，開始標簽修改了，結(jié)束標簽

也會跟著修改。

5. Auto Close Tag ：?動閉合標簽。針對?些?標準的標簽，這個插件還是很有?的。

6. vscode-icons ：可選。提供了很多類型的?件夾 icon ，不同類型的?件夾使?不同的

icon ，會讓?件查找更直觀。

7. open in browser ：可選。右鍵可以選擇在默認瀏覽器中打開當前??。

三.HTML基礎標簽

HTML基礎知識

1.HTML為何物？

HTML是超文本標記語言（Hyper Text Markup Language）是用來描述網(wǎng)頁的一種語言。

注意：HTML不是一種編程語言，而是一種標記語言。

簡單來說，HTML文件也可以直接稱為網(wǎng)頁，瀏覽器的作用就是讀取HTML文件，并且以網(wǎng)頁的形式去展示它們。

2.標簽介紹

HTML標簽是由尖括號包圍起來的關鍵詞，如<html></html>。

單標簽與雙標簽

（1）雙標簽書寫規(guī)則：<雙標簽名稱>內(nèi)容</雙標簽名稱>，例如<html>內(nèi)容</html>；

（2）單標簽書寫規(guī)則：<單標簽名稱/>，例如<br/>;

3.HTML屬性

HTML屬性指的是標簽屬性，HTML標簽可以擁有屬性，給相關的HTML元素提供更多的信息。

注意：

（1）一個HTML標簽可有多個屬性；

（2）屬性寫在HTML元素的開始標簽；

（3）屬性總是以名稱/鍵值對的形式出現(xiàn)，比如：class="method";

4.HTML標簽骨架

<!DOCTYPE html>
<html lang="en">
 ? ?<head>
 ? ? ? ?<meta charset="UTF-8">
 ? ? ? ?<meta http-equiv="X-UA-Compatible" content="IE=edge">
 ? ? ? ?<meta name="viewport" content="width=device-width, initialscale=1.0">
 ? ? ? ?<title>Document</title>
 ? ?</head>
 ? ?<body>
 ? ?</body>
</html>

<!DOCTYPE html> ：向瀏覽器聲明當前的?檔類型是 html

<html></html> ：是??當中最?的標簽，我們稱之為根標簽

<head></head> ：為??的頭部，它??的內(nèi)容主要?來定義??標簽及給瀏覽器查看的

?些信息

<title></title> ：為??標題標簽，它?的內(nèi)容會顯示在瀏覽器的標簽?上

<body></body> ：為??主體標簽，它??的內(nèi)容都會顯示在瀏覽器的??窗?區(qū)域

基本的HTML標簽

1.HTML標題標簽

HTML的文章標題標簽，如：<h1></h1>~<h6></h6>分六個級別，效果一次減少，并且每個標題都是獨占一行空間。

如：

<h1>?號標題</h1> 
<h2>?號標題</h2> 
<h3>三號標題</h3> 
<h4>四號標題</h4> 
<h5>五號標題</h5>
 <h6>六號標題</h6>

注意：沒有<h7></h7>標簽；

2.換行與空格

2.1空格問題

&nbsp；表示一個空格；

如：

hello&nbsp;world

2.2換行問題

<br/>表示換行；

如：

hello
<br/>
world

擴展：對于HTML語言，沒有嚴格的語義，即<br>與<br/>或者<br? ? >瀏覽器都可以識別出來。

?html1.0~5.0 ?xhtml(嚴格) 五大瀏覽器聯(lián)合更新自己的版本HTML5(不嚴格)

前端...,前端基礎,前端,vscode,javascript

3.HTML段落

3.1段落標簽介紹

HTML段落是通過<p></p>標簽進行定義的。

如：

<h2>今?學習內(nèi)容：</h2>
<p>學了標題標簽</p>

作用：（1）雖然p標簽的文字顯示外觀來看，和普通文字沒有區(qū)別，但是它獨占一行；

? ? ? ? ? ?（2）標簽語義化，便于定位；

3.2標簽語義化

在合適的地方顯示合理的標簽，搜索引擎也偏好于標簽語義化做的更好的頁面。

4.字體加粗與傾斜及刪除效果

4.1加粗標簽

（1）<b></b>為加粗標簽；

（2）<strong></strong>為加粗標簽；

如：

普通?字
<b>我是加粗?字1</b> 
<strong>我是加粗?字2</strong>

區(qū)別：b標簽為簡單加粗；strong為加粗效果+特別強調(diào)效果；

4.2傾斜

（1）<i></i> 為傾斜標簽；

（2）<em></em>也可實現(xiàn)傾斜；

如：

普通?字 
<i>我是i</i> 
<em>我是em</em>

區(qū)別：em標簽的語義更強一些。i為傾斜了，em為又傾斜了。

4.3刪除

<s></s> 刪除效果；

<del></del> 刪除效果；

如：

原價:<s>998</s> 
現(xiàn)值:9.98
<br> 
原價:<del>999</del> 
現(xiàn)價:9.98

注意：這兩個標簽沒有任何語義區(qū)別，而w3c則說明s標簽要被del標簽替代；

5.圖片標簽

（1）src:表示資源,圖?加載的名字

（2）width(寬),height(?):設置圖?的??。

（3）title:?標懸停在圖?上的提示?字

（4）alt:

????????????????圖?沒有被正常加載時顯示

??????????????????閱讀器讀取此內(nèi)容

如：

<img src="Logo2.png" alt="加載中" width="500" height="500" title="?標懸停在圖?上的提示?字">

6.超鏈接

6.1超鏈接使用

超鏈接：點擊頁面發(fā)生跳轉(zhuǎn)；

使用標簽為：<a href=""></a>

其中href為：跳轉(zhuǎn)的網(wǎng)址；

如：

<a >點擊我可以打開百度</a>

target=”_blank"：在其它窗口打開新連接；

<a  target="_blank">點擊我可以打開百度,并且打開新 的窗?</a>

6.2空鏈接

空鏈接：在href中指定為#號即可；

作用：（1）暫時不知道點擊之后跳轉(zhuǎn)到哪里，使用空鏈接占位；

? ? ? ? ? ?（2）刷新界面；

<a href="#"></a>

7.列表

列表標簽可分為：無序列表和有序列表。

7.1無序列表

使用標簽：<ul><li></li><li></li><li></li></ul>

注意：

（1）ul標簽可以嵌套若干個li標簽；

（2）每一個li標簽代表著每一條數(shù)據(jù)；

（3）每個li標簽之間沒有順序；

如：

<ul>
 ? ?<li>python</li>
 ? ?<li>java</li>
 ? ?<li>go</li>
</ul>

7.2有序列表

使用標簽：<ol><li></li><li></li><li></li></ol>

注意：

（1）有序；

（2）且是ol開始的；

如：

<ol>
 ? ?<li>基礎班級</li>
 ? ?<li>測試</li>
 ? ?<li>python</li>
</ol>

8.布局標簽

8.1布局標簽的介紹

布局標簽沒有任何的語義，也沒有所謂的應用場景。

作用：劃分頁面區(qū)域，輔助頁面布局；

布局標簽為：

div標簽：<div></div> 大盒子，獨占一行；

span標簽：<span></span>小盒子，一行可以放多個；

<div>我是div</div> 
<div>我是div</div> 
<div>我是div</div> 
<div>我是div</div> 
<span>我是span</span> 
<span>我是span</span> 
<span>我是span</span> 
<span>我是span</span>

9.表格標簽

9.1表格標簽介紹

作用：展示數(shù)據(jù)非常整齊；

基本語法：

<table>
 ? ?<tr>
 ? ? ? ?<td></td>
 ? ?</tr>
</table>

（1）table標簽：定義表格標簽；

（2）tr標簽：定義表格中的行；

? ? ? ? ? ? ? ? th標簽：表格單元格；

? ? ? ? ? ? ? ? td標簽：定義表格中的單元格，必須嵌套其中；

9.2表格標簽的其他屬性

（1）align：表格對齊方式。如：left，center，right；

（2）border：表格邊框。如：1；

（3）cellpadding：單元邊沿與其內(nèi)容之間的空白，默認為1像素；

（4）cellspacing：單元格與單元格之間的空白，默認為2像素；

（5）width：設置表格寬度；

注意：需要寫在table標簽里；

9.3表格結(jié)構(gòu)標簽

表格結(jié)構(gòu)標簽：表格頭部和表格主體兩大部分；

? ? ? ? （1）表格頭部區(qū)域：<thead>標簽；

? ? ? ? （2）表格主體區(qū)域：<tbody>標簽；

作用：結(jié)構(gòu)就更加清晰，讓表格有更好的語義；

9.4合并單元格

（1）合并單元格方式

? ? ? ? 跨行合并：rowspan="合并單元格的個數(shù)"；

? ? ? ? 跨列合并：colspan="合并單元格的個數(shù)"；

（2）目標單元格

? ? ? ? 跨行：最上冊單元格為目標單元格，寫合并代碼；

? ? ? ? 跨列：最左側(cè)單元格為目標單元格，寫合并代碼；

（3）合并單元格步驟

? ? ? ? 1.先確定是跨行還是跨列合并；

? ? ? ? 2.找到目標單元格；

? ? ? ? 3.刪除多余單元格；

10.表單標簽

10.1表單標簽介紹

表單標簽我們可以直接稱為 form 標簽，標簽書寫如下：

（1）表單標簽：<form action=""></form>。form表單標簽里面就是所有用戶填寫的表單數(shù)據(jù)；

（2）屬性 action：把表單數(shù)據(jù)交給指定后臺程序去處理；

（3）屬性 method：傳遞數(shù)據(jù)時方式方法。

? ? ? ? ? ? ? ? 1.默認為post請求（隱式提交數(shù)據(jù)）；

? ? ? ? ? ? ? ? 2.get明文傳送數(shù)據(jù)；

如：

<form action="***.py" method="POST">
</form>

10.2輸入框與單選多選框

輸入框標簽（input標簽）：<input type="text">

（1）type：屬性指定輸入框內(nèi)容；

（2）type="text"：則是最普通的文本輸入框。為單行；

（3）type="password"：則為密碼輸入框。為單行；

? ? ? ? ? ? ? ? placeholder：給用戶提示（提升用戶體驗感的屬性），并且在為本域中都可以使用；

（4）type="radio"：單選框；

（5）type="checkbox"：為多選框；

如：

<!-- 填寫用戶名及密碼 -->
            <span>用戶名：</span>
            <input type="text" placeholder="請輸入用戶名">
            <br>
            <span>密碼：</span>&nbsp;&nbsp;&nbsp;
            <input type="password" placeholder="請輸入密碼">
            <br>
            <!-- 選擇信息：選擇 性別 愛好 -->
            <!-- 單選按鈕 -->
            <!-- 一組按鈕：他們倆都是來控制性別的,添加name屬性 -->
            <span>性別：</span>
            <input type="radio" name="gender">
            <span>男</span>
        
            <input type="radio" name="gender">
            <span>女</span>
            <br>
            <!-- 多選按鈕 -->
            <span>興趣愛好：</span>
            <!-- <input type="checkbox"> 睡覺
            <input type="checkbox"> 打游戲
            <input type="checkbox"> 女
            <input type="checkbox"> 羽毛球 -->
            <!-- 優(yōu)化:點擊文字也可以選中多選框 -->
            <input type="checkbox" id="sleep"> 
            <label for="sleep">睡覺</label>
            <input type="checkbox" id="playgame"> 
            <label for="playgame">打游戲</label>
            <input type="checkbox" id="liangnv"> 
            <label for="liangnv">女</label>
            <input type="checkbox" id="yumaoqiu"> 
            <label for="yumaoqiu">羽毛球</label>
            <br>

10.3下拉框

使用標簽：select為下拉框的標簽，嵌套若干個option標簽。其中每一個option為下拉框中的一個選項。

selected="selected"。表示默認選中狀態(tài)；

<select name="" id="">
 ? ?<option value=""></option>
</select> 123

如：

<select name="" id="">
 ? ?<option value="">北京</option>
 ? ?<option value="">上海</option>
 ? ?<option value="">?州</option>
 ? ?<option value="" selected="selected">深圳</option>
</select> <br>

10.4文本域

使用標簽：<textarea name="", cols="30" rows="10"></textarea>

（1）cols：列；

（2）rows：行；

建議： 
<textarea name="" id="" cols="30" rows="10"></textarea> 
<br>

10.5按鈕標簽

（1）普通按鈕：

? ? ? ? ? ? ? ? 標簽：input指定type="button"；

? ? ? ? ? ? ? ? 通過value屬性，指定按鈕的文字；

如：

普通按鈕： 
<input type="button" value="按鈕"> 
<br>

（2）重置按鈕：點擊重置按鈕就會將數(shù)據(jù)恢復到默認狀態(tài)；

? ? ? ? ? ? ? ? 標簽：input指定type="reset";

? ? ? ? ? ? ? ? 注意：重置按鈕自動會有重置的文字；

? ? ? ? ? ? ? ? 如果指定為value屬性，則顯示什么；

如：

重置按鈕：
<input type="reset" value="重置按鈕"> 
<br>

（3）提交按鈕：點擊提交按鈕可以讓表單提交給指定后臺處理；

? ? ? ? ? ? ? ? 標簽：input指定type="submit";

? ? ? ? ? ? ? ? 注意：提交按鈕自動會有提交的文字；

如：

提交按鈕：
<input type="submit" value="我是提交">

? ? ? ? ??

四.CSS基礎選擇器

CSS介紹

CSS樣式表介紹

CSS：(Cascading Style Sheets)指層疊樣式表(級聯(lián)樣式表、樣式表)，CSS是?種標記語?。

CSS的作?：

● 設置HTML??中?本內(nèi)容

● 圖?的外形

● 版?的布局和外觀顯示樣式

CSS基礎語法

CSS規(guī)則由兩個主要部分組成：選擇器以及一條或多條聲明。

如：選擇器{屬性名 1 :屬性值 1 ;屬性名 2 :屬性值 2 }

需求：給以下的p標簽的?本內(nèi)容的顏?，設置為紅?。

<p>我是紅?的p</p> 
<p>我是紅?的p</p> 
<p>我是紅?的p</p> 
<h4>我是h4</h4> 
<h4>我是h4</h4> 
<h4>我是h4</h4> 
<h4>我是h4</h4>

實現(xiàn)：

<head>
 ? ?<style>
 ? ? ? ?p{
 ? ? ? ? ? ?color: red;
 ? ? ? }
 ? ?</style>
</head> <body>
 ? ?<p>我是紅?的p</p>
 ? ?<p>我是紅?的p</p>
 ? ?<p>我是紅?的p</p>
 ? ?<h4>我是h4</h4>
 ? ?<h4>我是h4</h4>
 ? ?<h4>我是h4</h4>
 ? ?<h4>我是h4</h4>
</body

CSS選擇器

選擇器介紹

選擇器作用：就是選擇標簽用的；

選擇器分類：（1）基礎選擇器；（2）復合選擇器；

基礎選擇器

基礎選擇器介紹

基礎選擇器基本上都由單個選擇器組成，主要分為：

????????標簽選擇器

????????類選擇器

????????id選擇器

????????通配符選擇器

標簽選擇器

標簽選擇器：是指?HTML標簽名稱作為選擇器，按標簽名稱分類為??中某?類標簽指定統(tǒng)?的

CSS樣式。

語法：

標簽名{
 ? 屬性1：屬性值1;
 ? 屬性2：屬性值2;
 ? ...
}

標簽選擇器作?：標簽選擇器可以把某?類標簽全部選擇出來。

標簽選擇器優(yōu)點與缺點：

????????優(yōu)點：能快速為??中同類型的標簽統(tǒng)?設置樣式；

????????缺點：不能設計差異化樣式，只能選擇全部的當前標簽；

類選擇器

類選擇器：如果想要差異化選擇不同的標簽，單獨選?個或者某?個標簽，則可以使?類選擇器。

語法：

.類名{
 ? 屬性1：屬性值1;
}

注意：

????????不能使?標簽名字作為類名。如.div；

????????不要使?純數(shù)字、中?等命名，盡量使?英?字?來表示；

????????盡量的?名知意；

常?： 頭：header
內(nèi)容：content/container
尾：footer
導航：nav
側(cè)欄：sidebar
欄?：column
搜索：search
菜單：menu
...

類選擇器-多類名

類選擇器-多類名：簡單理解就是?個標簽有多個類屬性。

多類名的使??式

????????● 1 .在標簽class屬性中寫多個類名

????????● 2 .多個類名中間必須?空格分開

多類名開發(fā)中使?場景

????????● 可以把?些標簽元素相同的樣式(共同的部分)放到?個類??

????????● 這些標簽都可以調(diào)?這個公共的類，然后再調(diào)???獨有的類

id選擇器語法

id選擇器：可以為標有特定id的HTML元素指定特定的樣式。HTML元素以 id屬性來設置id選擇

器，CSS中id選擇器以"#"來定義。

語法：

#id名{
 ? 屬性1：屬性值1;
}

id選擇器與類選擇器的區(qū)別:

id選擇器的唯?性(只能調(diào)??次)，?般?于??唯?性元素上，通常與javascript結(jié)合使?。

類選擇器常?于修改樣式

通配符選擇器

通配符選擇器：使?"*"定義，它表示選取??中所有元素(標簽)。

語法：

*{
 ? 屬性1:屬性值1;
}

但?般我們很少??主動?它，?是前端開發(fā)避免??設置的樣式與瀏覽器的?帶樣式?jīng)_突。則會

使?以下代碼，事先清除所有的元素標簽的內(nèi)外邊距。

*{
 ? margin:0;
 ? padding:0;
}

復合選擇器

復合選擇器介紹

復合選擇器建?在基礎選擇器之上，是基礎選擇器進?組合形成的。復合選擇器可以是兩個或多個

基礎選擇器，以不同?式組合?成。

復合選擇器作用

可以更準確、更?效的選擇?標元素(標簽) 。

復合選擇器分類

? ? ? ? （1）后代選擇器

? ? ? ? （2）子選擇器

? ? ? ? （3）并集選擇器

? ? ? ? （4）偽類選擇器

后代選擇器

后代選擇器?稱為包含選擇器，當標簽發(fā)?嵌套時，內(nèi)層標簽就成為外層標簽的后代。我們就可以

通過后代選擇器選擇?元素??的?元素。

語法：

標簽1 標簽2{ 屬性名1:屬性值1; }

注意：

????????標簽1 與標簽 2 之間?定? 空格隔開

????????標簽1 是?級，標簽 2 是?級，最終選擇的是標簽 2

? ? ? ? 子級可以表示為：??、孫?等

????????標簽1 與標簽 2 可以是任意的基礎選擇器 ???????

子選擇器

?標簽選擇器(?選擇器)只能選擇作為某標簽的最近?級?標簽。

語法：

標簽1>標簽2{屬性值1:屬性名1;}

注意：

????????標簽1 與標簽 2 中間? ?于號隔開

????????標簽1 是?級，標簽 2 是?級。最終選擇的是標簽 2

????????標簽2 必須是親??，其孫?、重孫之類都不歸他管

并集選擇器

并集選擇器可以選擇多組標簽，同時為他們定義相同的樣式。通常?于集體聲明。

語法：

標簽1,標簽2{屬性1:屬性值1;}

注意：

????????英?狀態(tài)下的逗號

????????表示標簽 1 與標簽 2 都改了

????????通常?于集體聲明

????????任何形式的選擇器都可以作為并集選擇器的?部分。

偽類選擇器

偽類選擇器介紹：偽類選擇器?于向某些選擇器添加特殊的效果，?如給鏈接添加特殊效果?；蛘哌x擇第1 個...,第n 個標簽。

偽類選擇器書寫的最?的特點是?冒號表示，如 :hover 、 :first-child

偽類選擇器有?常多：

????????鏈接偽類

????????結(jié)構(gòu)偽類

鏈接偽類選擇器

????????a:link 選擇所有未被訪問的鏈接

????????a:visited 選擇所有已被訪問的鏈接

????????a:hover 選擇?標指針位于其上的鏈接

????????a:active 選擇活動鏈接(?標按下未彈起的鏈接)

注意：

????????1.為了確保?效，請按照LVHA的順序聲明： :link,:visited,:hover,:active

????????2.因為a鏈接在瀏覽器中具有默認樣式，所以我們實際?作中都需要給鏈接單獨指定樣式。

????????3.實際開發(fā)常?的是，先給a?個樣式，再?標經(jīng)過時給?個樣式。

focus偽類選擇器

:focus 偽類選擇器 ?于選取獲得焦點的表單元素

如：

<style>
 ? ?input:focus{
 ? ? ? ?background-color: pink;
 ? ? ? ?color: darkred;
 ? }
</style> 

<form action="">
 ? ?<input type="text">
 ? ?<input type="text">
 ? ?<input type="text">
</form>

CSS引入方式

CSS引入方式介紹

CSS樣式書寫的位置(或者引?的?式)，CSS樣式表可以分為三?類：

????????1.?內(nèi)樣式表(?內(nèi)式)

????????2.內(nèi)部樣式表(嵌?式)

????????3.外部樣式表(鏈接式)

內(nèi)部樣式表（嵌入式）

內(nèi)部樣式表：是寫在html??內(nèi)部，是將所有的CSS代碼抽取出來，單獨放到?個 <style> 標簽中。

????????● 理論上 <style> 標簽可以放在HTML?檔的任何地?，但?般會放在?檔的 <head> 標簽中；

????????● 通過這種?式，可以?便控制當前整個??中的元素樣式設置；

????????● 代碼結(jié)構(gòu)清晰，但是并沒有實現(xiàn)結(jié)構(gòu)與樣式完全分離(css還是再html中)；

行內(nèi)樣式表

?內(nèi)樣式表(內(nèi)聯(lián)樣式表)時在元素標簽內(nèi)部的style屬性中設定CSS樣式。適合于修改簡單樣式。

????????● style其實就是標簽屬性；

????????● 在雙引號中間，寫法要符合CSS規(guī)范；

????????● 可以控制當前的標簽設置樣式；

????????● 書寫繁瑣，并沒有體現(xiàn)出結(jié)構(gòu)與樣式相分離的思想。不推薦?量使?；

外部樣式表

外部樣式表的核?思想是：樣式單獨寫到CSS?件中，之后把CSS?件引?到HTML??中使?；

引??式為：

五.JS基礎

Javascript介紹

1.js的介紹

JavaScript簡稱js，是運行在客戶端的腳本語言，現(xiàn)在js也可以基于node.js技術進行服務器編程。

2.js的由來

javascript最開始是為了解決表單動態(tài)校驗，由布蘭登奇在1995年花10天完成了js設計；

前端...,前端基礎,前端,vscode,javascript

隨著后期發(fā)展，js可以實現(xiàn)：

??????????特效

????????服務端開發(fā)

????????桌?程序

????????APP

????????游戲開發(fā)

3.JavaScript組成

ECMAScript：ECMAScript規(guī)定了JS編程語法和基礎核?知識，是所有瀏覽器?商共同遵守的?套語法?業(yè)標準。

DOM：???檔對象模型，是W 3 C組織推薦的處理可擴展標記語?的標準編程接?。

BOM：瀏覽器對象模型，它提供了獨?于內(nèi)容的、可以與瀏覽器窗?進?互動的對象結(jié)構(gòu)。

JavaScript基本語法

1.JavaScript的引入方式

（1）行內(nèi)式；

（2）內(nèi)嵌式；

（3）外部文件；

1.1行內(nèi)式

<input type="button" value="btn1" onclick="alert('我是btn1')">

1.2內(nèi)嵌式

<head>
 ? ?<script>
 ? ? ? ?alert('?動彈出');
 ? ?</script>
</head>

1.3引入外部的js

<script src="my.js"></script>

2.js注釋

2.1單行注釋

// 快捷鍵：ctrl+/
// 單?注釋

2.2多行注釋

/*
 ? 2.多?注釋
 ? 2.多?注釋
 ? 2.多?注釋
*/

3.js的輸入輸出方法

3.1輸入

promot（"我是輸入框"）;

前端...,前端基礎,前端,vscode,javascript

3.2輸出

彈出警示框

alert（"我被強制彈出了"）；

前端...,前端基礎,前端,vscode,javascript

4.變量?

4.1變量的介紹

變量指的是程序內(nèi)存中申請的一塊存放數(shù)據(jù)的空間。

前端...,前端基礎,前端,vscode,javascript

4.2創(chuàng)建變量

（1）聲明變量；

（2）賦值；

var age;
age = 18;

注意：

????????1.更新變量(覆蓋)

????????2.可同時聲明多個變量，需使?英?下的逗號隔開

????????3.聲明變量的特殊情況

????????????????3.1 只聲明不賦值結(jié)果是：undefined

????????????????3.2 不聲明不賦值，直接使?，則報錯

????????????????3.3 不聲明直接賦值使?，結(jié)果是：可以使?，但是不提倡

4.3變量命名規(guī)則

????????1. 由字?，數(shù)字，下劃線，美元符號($)組成。

????????2. 嚴格區(qū)分??寫

????????3. 不能以數(shù)字開頭

????????4. 不能是關鍵字

????????5. 變量名盡量?名知意

????????6. 遵循駝峰命名法

5.數(shù)據(jù)類型

5.1為什么要有數(shù)據(jù)類型

在計算機中，不同的數(shù)據(jù)所需占用的存儲空間是不同的，為了便于把數(shù)據(jù)分成所需內(nèi)存大小不同的數(shù)據(jù)，充分利用存儲空間，于是定義了不同的數(shù)據(jù)類型。

5.2弱類型語言

js為弱類型語言（動態(tài)語言），所以不需要提前聲明變量類型，而是在程序運行過程中，類型會被自動確定。

java：

int num = 10;

js：

var num;
var num=10;

5.3基礎數(shù)據(jù)類型

基礎數(shù)據(jù)類型主要包括：

（1）Number

（2）String

（3）Boolean

（4）Undefined

（5）Null

Number：數(shù)字型，包含整數(shù)與浮點數(shù)。

var age=21;
var PI=3.14;

String：字符串類型，?成對雙引號或者成對單引號(推薦) 包裹。

var s='hello world';
var s1='hello world';

// 獲取字符串?度： string.length

Boolean：布爾值類型。如：true，false 等價于1 和0

var flag=true; ?// 布爾型
var flag2=false; // 布爾型

Undefined：未定義。在聲明變量之后未賦值的通常會有a=undefined

var variable;
console.log(variable); ? ? ?// undefined

Null：聲明了變量為空值

var space = null;

6.數(shù)據(jù)類型轉(zhuǎn)換

6.1查看數(shù)據(jù)類型

（1）使用 typeof 檢測數(shù)據(jù)類型；

（2）使用控制臺輸出的顏色識別，因為控制臺對于不同數(shù)據(jù)類型顏色不同；

? ? ? ? 數(shù)字型：紫色；

? ? ? ? 字符串型：黑色；

? ? ? ? 布爾型：藍色；

? ? ? ? undefined 跟 null 為淺灰色；

6.2數(shù)據(jù)類型轉(zhuǎn)換

數(shù)據(jù)類型轉(zhuǎn)換就是把一種數(shù)據(jù)類型的變量轉(zhuǎn)換為另一種數(shù)據(jù)類型。

其它類型轉(zhuǎn)字符串：

（1）toString()

（2）String

（3）加號拼接字符串

其它類型轉(zhuǎn)數(shù)字型：

（1）Number();

（2）parseint()；

（3）parseFloat();

7.更多JS基礎

JavaScript 教程 (w3school.com.cn)https://www.w3school.com.cn/js/index.asp

六.JS之DOM

1.DOM簡介

什么是DOM？

DOM也叫做文檔對象模型，是W3C組織推薦的處理可擴展標記語言（HTML）的標準編程接口；W3C已經(jīng)定義了一系列的DOM接口，可以通過DOM接口可以改變網(wǎng)頁的內(nèi)容，結(jié)構(gòu)，和樣式。

DOM樹

DOM樹主要分為三部分：

1.文檔：一個頁面就是一個文檔，DOM中使用 document 表示；

2.元素：頁面中的所有標簽都是元素，DOM中使用 element 表示；

3.節(jié)點：網(wǎng)頁中的所有內(nèi)容都是節(jié)點（標簽，屬性，文本，注釋等），DOM中使用 node 表示；

<html>
 ?<head>
 ? ?<title>DOM Tutorial</title>
 ?</head>
 ?<body>
 ? ?<h1>DOM Lesson one</h1>
 ? ?<p>Hello world!</p>
 ?</body>
</html>

前端...,前端基礎,前端,vscode,javascript

2.獲取元素

獲取元素主要有以下幾種方式：

（1）根據(jù)ID獲?。?/p>

（2）根據(jù)類名獲?。?/p>

（3）根據(jù)標簽名獲??；

（4）根據(jù)選擇器獲取；

根據(jù)ID獲取

使用方法 getElementById() 可以獲取帶有ID的元素對象。

（https://developer.mozilla.org/zh-CN/ 查看詳細說明?檔）

需求：通過 JS 獲取 id 為 index 的標簽；

<body>
 ? ?<div id="index">hello world</div>
</body>

?實現(xiàn)：

<body>
 ? ?<div id="index">hello world</div>
 ? ?<script>
 ? ? ? ?var variable = document.getElementById("index");
 ? ? ? ?console.log(variable);
 ? ? ? ?console.log(typeof variable);
 ? ? ? ?console.dir(variable);
 ? ?</script>
</body>

注意：<script>js代碼</script> 需寫在元素標簽下面。

根據(jù)類名獲取

使? getElementsByClassName('類名') ,根據(jù)類名獲取某些元素集合。

需求：獲取類名為 box 的所有標簽

<body>
 ? ?<div id="index">hello world</div>
 ? ?<div class="box">盒?</div>
 ? ?<div class="box">盒?</div>
</body>

實現(xiàn)：

<script>
 ? ?var boxs = document.getElementsByClassName('box')
 ? ?console.log(boxs);
</script>

根據(jù)標簽名獲取

使? getElementsByTagName() ?法返回?個包括所有給定標簽名稱的元素的HTML集合。

需求：獲取所有的li標簽

<body>
 ? ?<ul>
 ? ? ? ?<li>我是第?個li</li>
 ? ? ? ?<li>我是第?個li</li>
 ? ? ? ?<li>我是第三個li</li>
 ? ? ? ?<li>我是第四個li</li>
 ? ? ? ?<li>我是第五個li</li>
 ? ?</ul>
</body>

實現(xiàn)：

<script>
       var tag_var = document.getElementsByTagName("li");
       console.log(tag_var);
       for (ele of tag_var){
            console.log(ele);
         }
 ? 
</script>

注意：

（1）即使只有一個li標簽，通過該方式獲取的依然是偽數(shù)組。

（2）如果沒有一個li，通過該方式獲取的依然是空的偽數(shù)組。

需求2：獲取ol下面的li

<body>
 ? ?<div id="index">hello world</div>
 ? ?<ul>
 ? ? ? ?<li>我是第?個li</li>
 ? ? ? ?<li>我是第?個li</li>
 ? ? ? ?<li>我是第三個li</li>
 ? ? ? ?<li>我是第四個li</li>
 ? ? ? ?<li>我是第五個li</li>
 ? ?</ul>
 ? ?<ol id="ol">
 ? ? ? ?<li>ol下?的第?個li</li>
 ? ? ? ?<li>ol下?的第?個li</li>
 ? ? ? ?<li>ol下?的第三個li</li>
 ? ? ? ?<li>ol下?的第四個li</li>
 ? ? ? ?<li>ol下?的第五個li</li>
 ? ?</ol>
</body>

實現(xiàn)2：

<script>
 ?var ol = document.getElementsByTagName('ol');
 ?console.log(ol[0].getElementsByTagName('li'));
</script>

通過選擇器獲取

使? querySelector(' 選擇器 ') ,根據(jù)指定選擇器返回第?個元素對象。

需求：獲取第一個 class 為 box 的 div。

<body>
 ?<div class="box">盒?</div>
 ?<div class="box">盒?</div>
</body>

實現(xiàn)：

<body>
 ?<div class="box">盒?</div>
 ?<div class="box">盒?</div>
 ?<script>
 ? ?var firstBox = document.querySelector('.box');
 ? ?console.log(firstBox);
 </script>
</body>

需求2：獲取 id 為 nav 下的 ul 標簽。

<body>
 ?<div class="box">盒?</div>
 ?<div class="box">盒?</div>
 ?<div id="nav">
 ? ? ?<ul>
 ? ? ? ? ?<li>??</li>
 ? ? ? ? ?<li>產(chǎn)品</li>
 ? ? ?</ul>
 </div>
</body>

實現(xiàn)：

<script>
 ? ?var nav = document.querySelector('#nav>ul');
 ? ?console.log(nav);
</script>

通過選擇器獲?。ǘ鄠€）

通過選擇器選中所有的對象，則需要使? querySelectorAll(' 選擇器 ') ?法。

需求：獲取所有 class 為 box 的 div。

<script>
 ? ?var allBox = document.querySelectorAll('.box');
 ? ?console.log(allBox);
</script>

定位body標簽

使? document.body 定位 body 標簽。

<script>
 ? ?var bodyEle = document.body;
 ? ?console.log(bodyEle);
</script>

定位html標簽

使? document.documentElement 定義html標簽。

<script>
 ? ?var htmlEle = document.documentElement;
    console.log(htmlEle);
</script>

3.事件基礎

事件基礎介紹

事件基礎指的是??中的每個元素(標簽)都可以產(chǎn)?某些可以觸發(fā) JavaScript 的事件,然后去執(zhí)

?某些操作。

事件基礎三要素：

????????事件源

????????事件類型

????????事件處理程序

代碼實現(xiàn)

需求：點擊按鈕，彈出對話框。

<body>
 ? ?<button id="btn">按鈕</button>
 ? ?<script>
 ? ? ? ?var btn = document.getElementById('btn');
 ? ? ? ?btn.onclick = function(){
 ? ? ? ? ? ?alert('點我彈出');
 ? ? ? }
 ? ?</script>
</body>

其它的鼠標事件

● onclick ?標點擊觸發(fā)

● onmouseover ?標經(jīng)過觸發(fā)

● onmouseout ?標離開觸發(fā)

● onfocus 獲取?標焦點觸發(fā)

● onblur 失去?標焦點觸發(fā)

● onmousemove ?標移動觸發(fā)

● onmouseup ?標彈起觸發(fā)

● onmousedown ?標按下觸發(fā)

4.操作元素

操作元素介紹

JavaScript的DOM操作可以改變??內(nèi)容、結(jié)構(gòu)和樣式。我們可以利?DOM操作元素來改變元素

??的內(nèi)容、屬性等。

改變元素的內(nèi)容

語法：

● element.innerText 從起始位置到終?位置的內(nèi)容。

● element.innerHTML 起始位置到終?位置的全部內(nèi)容

使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>顯示當前系統(tǒng)時間</button>
    <div>某個時間</div>
    <p>讀者好帥！</p>
    <!-- 需求：點擊按鈕，div中文本內(nèi)容發(fā)生變化 -->
    <script>
        // // 1.獲取元素
        // var btn = document.querySelector("button");
        // var div_box = document.querySelector("div");
        // // 2.事件
        // btn.onclick = function(){
        //     // 3.改變div元素內(nèi)容
        //     div_box.innerText = "5月6日";
        // }

        // 1.拿到p標簽中的文本，進行重新賦值
        var p_var = document.querySelector("p");
        p_var.innerText = "我好帥！"
    </script>
</body>
</html>

操作元素屬性

我們還可以通過js操作元素屬性，如： src 、 href 、 title 、 alt ..

小案例：點擊按鈕實現(xiàn)登錄方式的轉(zhuǎn)換。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="count_login">賬號登錄</button>
    <button id="safe_login">安全登錄</button>
    <br>
    <img src="static/用戶名及密碼.png" alt="" title="請輸入用戶名及密碼">
    <script>
        // 1.獲取按鈕、圖片標簽
        var count_login = document.getElementById("count_login");
        var safe_login = document.getElementById("safe_login");
        var img = document.querySelector("img");
        // 2.事件 
        safe_login.onclick = function(){
            // 3.切換二維碼頁面 ->> 改變img的src屬性為二維碼圖片路徑
            img.src = "static/二維碼.png"
            img.title = "請打開微信掃描二維碼"
        }
        count_login.onclick = function(){
            img.src = "static/用戶名及密碼.png"
            img.title = "請輸入用戶名及密碼"
        }
    </script>
</body>
</html>

操作表單元素

表單樣式?較特殊，所以有些屬性需要專?處理。如：輸?框的內(nèi)容不是通過 innerHTML 完

成，?是 value 完成。

屬性： type 、 value 、 checked 、 selected 、 disabled

實現(xiàn)案例

????????需求1 ：點擊按鈕，則輸?框中的內(nèi)容變化。再點擊時，按鈕已被禁?。

????????需求2 ：點擊眼睛按鈕則明?，再點擊眼睛按鈕?切換為密?。

前端...,前端基礎,前端,vscode,javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 需求：點擊眼睛按鈕則明文，再點擊眼睛按鈕又切換為密文。 -->
    <div class="box">
        <label for="">
            <img src="static/明文.png" alt="" id="eye">
        </label>
        <input type="password" id="pwd">
    </div>
    <script>
        // 1.獲取元素
        var eye = document.getElementById("eye");
        var pwd = document.getElementById("pwd");
        // 2.綁定事件
        // 2.1 定義變量 標識狀態(tài)
        var flag = 0;  
        eye.onclick = function(){
            if (flag == 0){
                // 3.改圖片的src屬性，改type類型
                eye.src = "static/密文.png"
                pwd.type = "text"
                // 狀態(tài)切換
                flag = 1
            } else {
                // 3.改圖片的src屬性，改type類型
                eye.src = "static/明文.png"
                pwd.type = "password"
                // 狀態(tài)切換
                flag = 0
            }
        }
    </script>
</body>
</html>

樣式屬性操作

我們可以通過js修改元素的??、顏?、位置等樣式

????????● element.style ?內(nèi)樣式操作

????????● element.className 類名樣式操作

一.前端三劍客

1.前導

2.三劍客的分工

二.VsCode的介紹與配置

1.vscode的介紹

2.vscode的下載安裝

3.vscode的使用

3.1 圖形界面操作

3.3 常用插件

三.HTML基礎標簽

HTML基礎知識

1.HTML為何物？

2.標簽介紹

3.HTML屬性

4.HTML標簽骨架

基本的HTML標簽

1.HTML標題標簽

2.換行與空格

3.HTML段落

4.字體加粗與傾斜及刪除效果

5.圖片標簽

6.超鏈接

7.列表

8.布局標簽

9.表格標簽

10.表單標簽

四.CSS基礎選擇器

CSS介紹

CSS樣式表介紹

CSS基礎語法

CSS選擇器

選擇器介紹

基礎選擇器

復合選擇器

CSS引入方式

CSS引入方式介紹

內(nèi)部樣式表（嵌入式）

行內(nèi)樣式表

外部樣式表

五.JS基礎

Javascript介紹

1.js的介紹

2.js的由來

3.JavaScript組成

JavaScript基本語法

1.JavaScript的引入方式

2.js注釋

3.js的輸入輸出方法

4.變量?

5.數(shù)據(jù)類型

6.數(shù)據(jù)類型轉(zhuǎn)換

7.更多JS基礎

六.JS之DOM

1.DOM簡介

什么是DOM？

DOM樹

2.獲取元素

根據(jù)ID獲取

根據(jù)類名獲取

根據(jù)標簽名獲取

通過選擇器獲取

通過選擇器獲?。ǘ鄠€）

定位body標簽

定位html標簽

3.事件基礎

事件基礎介紹

代碼實現(xiàn)

其它的鼠標事件

4.操作元素

操作元素介紹

改變元素的內(nèi)容

操作元素屬性

操作表單元素

樣式屬性操作

更多js操作

相關文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

1.HTML為何物？

什么是DOM？