前端基本知識(shí)介紹
一.前端三劍客
1.前導(dǎo)
（1）HTML,CSS,JS都是單獨(dú)的語言；
（2）HTML,CSS,JS構(gòu)成前端技術(shù)基礎(chǔ)；
2.三劍客的分工
（1）HTML：負(fù)責(zé)網(wǎng)頁的架構(gòu)；
（2）CSS：負(fù)責(zé)網(wǎng)頁的樣式，美化；
（3）JavaScript（JS）：負(fù)責(zé)網(wǎng)頁的行為；
二.VsCode的介紹與配置
1.vscode的介紹
vscode 全稱為 Visual Studio Code ，是?款免費(fèi)開源的現(xiàn)代化輕量級(jí)代碼編輯器，?持?乎所有主流的開發(fā)語?的語法?亮、智能代碼補(bǔ)全、?定義快捷鍵、括號(hào)匹配和顏?區(qū)分、代碼?段、代碼對(duì)? Diff、GIT命令 等特性，?持插件擴(kuò)展，并針對(duì)??開發(fā)和云端應(yīng)?開發(fā)做了優(yōu)化。
3.vscode的使用
3.1 圖形界面操作
3.3 常用插件
我們通常需要代碼提示我們輔助編寫，這個(gè)時(shí)候就涉及到VSCODE提供的一系列的插件插件安裝在 Extension 中，點(diǎn)擊即可看到一個(gè)搜索按鈕，可以輸入關(guān)鍵字搜索自己想要的插件。如圖：
前端開發(fā)推薦安裝的幾個(gè)插件：
1. jshint ： js 代碼規(guī)范檢查。
2. Beautify ：?鍵美化代碼的插件。
3. Javascript(ES6) code snippets ： ES6 語法提示。
4. Auto Rename Tag ：?動(dòng)重命名標(biāo)簽。標(biāo)簽都是成對(duì)出現(xiàn)的，開始標(biāo)簽修改了，結(jié)束標(biāo)簽
也會(huì)跟著修改。
5. Auto Close Tag ：?動(dòng)閉合標(biāo)簽。針對(duì)?些?標(biāo)準(zhǔn)的標(biāo)簽，這個(gè)插件還是很有?的。
6. vscode-icons ：可選。提供了很多類型的?件夾 icon ，不同類型的?件夾使?不同的
icon ，會(huì)讓?件查找更直觀。
7. open in browser ：可選。右鍵可以選擇在默認(rèn)瀏覽器中打開當(dāng)前??。
三.HTML基礎(chǔ)標(biāo)簽
HTML基礎(chǔ)知識(shí)
1.HTML為何物？
HTML是超文本標(biāo)記語言（Hyper Text Markup Language）是用來描述網(wǎng)頁的一種語言。
注意：HTML不是一種編程語言，而是一種標(biāo)記語言。
簡(jiǎn)單來說，HTML文件也可以直接稱為網(wǎng)頁，瀏覽器的作用就是讀取HTML文件，并且以網(wǎng)頁的形式去展示它們。
2.標(biāo)簽介紹
HTML標(biāo)簽是由尖括號(hào)包圍起來的關(guān)鍵詞，如<html></html>。
單標(biāo)簽與雙標(biāo)簽
（1）雙標(biāo)簽書寫規(guī)則：<雙標(biāo)簽名稱>內(nèi)容</雙標(biāo)簽名稱>，例如<html>內(nèi)容</html>；
（2）單標(biāo)簽書寫規(guī)則：<單標(biāo)簽名稱/>，例如<br/>;
3.HTML屬性
HTML屬性指的是標(biāo)簽屬性，HTML標(biāo)簽可以擁有屬性，給相關(guān)的HTML元素提供更多的信息。
注意：
（1）一個(gè)HTML標(biāo)簽可有多個(gè)屬性；
（2）屬性寫在HTML元素的開始標(biāo)簽；
（3）屬性總是以名稱/鍵值對(duì)的形式出現(xiàn)，比如：class="method";
4.HTML標(biāo)簽骨架
<!DOCTYPE html> ：向?yàn)g覽器聲明當(dāng)前的?檔類型是 html
<html></html> ：是??當(dāng)中最?的標(biāo)簽，我們稱之為根標(biāo)簽
<head></head> ：為??的頭部，它??的內(nèi)容主要?來定義??標(biāo)簽及給瀏覽器查看的
?些信息
<meta charset="UTF-8"> ： 定義??的編碼為UTF- 8
<title></title> ：為??標(biāo)題標(biāo)簽，它?的內(nèi)容會(huì)顯示在瀏覽器的標(biāo)簽?上
<body></body> ：為??主體標(biāo)簽，它??的內(nèi)容都會(huì)顯示在瀏覽器的??窗?區(qū)域
基本的HTML標(biāo)簽
1.HTML標(biāo)題標(biāo)簽
HTML的文章標(biāo)題標(biāo)簽，如：<h1></h1>~<h6></h6>分六個(gè)級(jí)別，效果一次減少，并且每個(gè)標(biāo)題都是獨(dú)占一行空間。
如：
注意：沒有<h7></h7>標(biāo)簽；
2.換行與空格
2.1空格問題
 ；表示一個(gè)空格；
如：
2.2換行問題
<br/>表示換行；
如：
擴(kuò)展：對(duì)于HTML語言，沒有嚴(yán)格的語義，即<br>與<br/>或者<br? ? >瀏覽器都可以識(shí)別出來。
?html1.0~5.0 ?xhtml(嚴(yán)格) 五大瀏覽器聯(lián)合更新自己的版本HTML5(不嚴(yán)格)
3.HTML段落
3.1段落標(biāo)簽介紹
HTML段落是通過<p></p>標(biāo)簽進(jìn)行定義的。
如：
作用：（1）雖然p標(biāo)簽的文字顯示外觀來看，和普通文字沒有區(qū)別，但是它獨(dú)占一行；
? ? ? ? ? ?（2）標(biāo)簽語義化，便于定位；
3.2標(biāo)簽語義化
在合適的地方顯示合理的標(biāo)簽，搜索引擎也偏好于標(biāo)簽語義化做的更好的頁面。
4.字體加粗與傾斜及刪除效果
4.1加粗標(biāo)簽
（1）<b></b>為加粗標(biāo)簽；
（2）<strong></strong>為加粗標(biāo)簽；
如：
區(qū)別：b標(biāo)簽為簡(jiǎn)單加粗；strong為加粗效果+特別強(qiáng)調(diào)效果；
4.2傾斜
（1）<i></i> 為傾斜標(biāo)簽；
（2）<em></em>也可實(shí)現(xiàn)傾斜；
如：
區(qū)別：em標(biāo)簽的語義更強(qiáng)一些。i為傾斜了，em為又傾斜了。
4.3刪除
<s></s> 刪除效果；
<del></del> 刪除效果；
如：
注意：這兩個(gè)標(biāo)簽沒有任何語義區(qū)別，而w3c則說明s標(biāo)簽要被del標(biāo)簽替代；
5.圖片標(biāo)簽
<img scr="" alt="" width="" height="" title="">
（1）src:表示資源,圖?加載的名字
（2）width(寬),height(?):設(shè)置圖?的??。
（3）title:?標(biāo)懸停在圖?上的提示?字
（4）alt:
? ? ? ? ? ? ? ? 圖?沒有被正常加載時(shí)顯示
? ? ? ? ? ? ? ? ??閱讀器讀取此內(nèi)容
如：
6.超鏈接
6.1超鏈接使用
超鏈接：點(diǎn)擊頁面發(fā)生跳轉(zhuǎn)；
使用標(biāo)簽為：<a href=""></a>
其中href為：跳轉(zhuǎn)的網(wǎng)址；
如：
6.2空鏈接
空鏈接：在href中指定為#號(hào)即可；
作用：（1）暫時(shí)不知道點(diǎn)擊之后跳轉(zhuǎn)到哪里，使用空鏈接占位；
? ? ? ? ? ?（2）刷新界面；
<a href="#"></a>
