整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ndroid 中文版：http://www.apiref.com/android-zh/index.html
Bootstrap3 教程：http://www.apiref.com/bootstrap3-zh/index.html
Bootstrap4 教程：http://www.apiref.com/bootstrap4-zh/index.html
CSS 手冊(cè)：http://www.apiref.com/css-zh/index.htm
C語(yǔ)言：http://www.apiref.com/c-zh/index.html
Hibernate 5：http://www.apiref.com/hibernate5/overview-summary.html
Java 11 中文版：http://www.apiref.com/java11-zh/index.html
Java 13：http://www.apiref.com/java13/index.html
jQuery 手冊(cè)：http://www.apiref.com/jquery-zh/index.html
MyBatis：http://www.apiref.com/mybatis/index.html
PHP：http://www.apiref.com/php/index.html
PHP 中文版：http://www.apiref.com/php-zh/index.html
Python 中文版：http://www.apiref.com/python-zh/index.html
Spring 5：http://www.apiref.com/spring5/index.html
到前端技術(shù)，不少朋友一定會(huì)感到有些陌生。但其實(shí)，前端，你每天都在接觸。
你正在使用的APP，你正在瀏覽的網(wǎng)頁(yè)，這些你能看到的界面，都屬于前端。
而前端最重要的三大技術(shù)，HTML，CSS，JavaScript，則是每一個(gè)前端開發(fā)者必須具備的技能。
掌握這些技能，你可以快速地做出一個(gè)酷炫的APP界面或者一個(gè)簡(jiǎn)單大方的網(wǎng)站頁(yè)面。因此，就讓我們一起來(lái)快速學(xué)習(xí)一下這三門技術(shù)吧。
以下內(nèi)容節(jié)選自實(shí)驗(yàn)樓訓(xùn)練營(yíng)課程《Vue.js 和 Node.js 構(gòu)建內(nèi)容發(fā)布系統(tǒng)》。
本實(shí)驗(yàn)主要介紹一下前端的基礎(chǔ)知識(shí)，對(duì)比認(rèn)識(shí)一下各個(gè)框架的代碼編寫方式，并介紹我們本次技術(shù)選型的主要思路。對(duì)于前端三大技術(shù) HTML、CSS、JavaScript，簡(jiǎn)單的介紹了基本情況和常用語(yǔ)法。中間介紹了現(xiàn)代框架的一些情況，并通過(guò)實(shí)際的案例，用代碼直觀的認(rèn)識(shí)一下各種框架的實(shí)現(xiàn)方式。最后分析一下項(xiàng)目的技術(shù)選型。
本節(jié)我們簡(jiǎn)單介紹一下前端最基礎(chǔ) HTML, CSS, JavaScript 三駕馬車。雖然本課程預(yù)設(shè)的讀者為零基礎(chǔ)開發(fā)者，但是前端開發(fā)一定會(huì)這三種技術(shù)的運(yùn)用有要求。建議抽空學(xué)習(xí) 《 Web 前端工程師路徑》 中的階段 1 甚至階段 2。這里僅做語(yǔ)法介紹和基本使用的概覽。
在此之前先認(rèn)識(shí)一下實(shí)驗(yàn)環(huán)境。實(shí)驗(yàn)環(huán)境和 VS Code 使用體驗(yàn)基本一致。你可以啟動(dòng)一個(gè)終端，并在其中輸入 Linux 命令。
后面的命令無(wú)特殊說(shuō)明的都是在此終端命令行中輸入。大多數(shù)命令可以多開終端窗口分別執(zhí)行。
那么下面我們就快速的了解一下。
HTML 全稱超文本標(biāo)記語(yǔ)言，幾乎是從萬(wàn)維網(wǎng)和瀏覽器產(chǎn)生伊始就存在的。主要用于結(jié)構(gòu)化信息來(lái)方便瀏覽器展示。
以標(biāo)簽對(duì)作為主要特征，如<p>這是一個(gè)段落</p>。這些標(biāo)簽會(huì)被瀏覽器解析成不同的模塊，比如 p 標(biāo)簽就是一個(gè)段落，img 標(biāo)簽就是一個(gè)圖片，a 標(biāo)簽就是一個(gè)超鏈接，標(biāo)簽名不區(qū)分大小寫。
立刻就來(lái)嘗試一下吧。首先通過(guò)命令行新建一個(gè) demo 目錄：
mkdir demo然后命令行進(jìn)入 demo 目錄：
cd ./demo新建一個(gè) hello.html 文件，可以在實(shí)驗(yàn)環(huán)境左邊的瀏覽框內(nèi)在 demo 上右鍵選擇 New File 然后命名為 hello.html；或者也可在命令行終端輸入 touch hello.html，同樣是新建文件。
在其中輸入以下內(nèi)容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>標(biāo)題</title>
</head>
<body>
正文
</body>
</html>然后右擊文件選擇 Open With → Preview。
看到了嗎？其實(shí)我們就是新建了一個(gè) .html 后綴的文本文件，然后瀏覽器就可以將其中的內(nèi)容展示出來(lái)。你也可以在自己的桌面上新建一個(gè)，然后使用瀏覽器打開看看效果。
這里嵌套代碼的縮進(jìn)格式是為了美觀和可讀性，并無(wú)嚴(yán)格要求。
head 標(biāo)簽中是一些暫時(shí)無(wú)需用到的頭部信息，渲染的主體是 body 標(biāo)簽。下面我們修改 body 標(biāo)簽里面的內(nèi)容，填入一些常用標(biāo)簽來(lái)直觀感受一下。
<body>
<h1>頁(yè)面標(biāo)題</h1>
<div>一個(gè)塊容器</div>
<div>又一個(gè)塊容器</div>
<p>這里是段落了，間距變大</p>
<div>一個(gè)塊容器</div>
<div>
<div>
多層嵌套：
<div>內(nèi)部第一個(gè)</div>
<div>內(nèi)部第二個(gè)</div>
</div>
</div>
</body>保存之后切換到瀏覽標(biāo)簽看一看，有沒(méi)有感覺(jué)被忽悠了？嵌套沒(méi)嵌套根本沒(méi)體現(xiàn)出來(lái)，就像 Word 里排了一下版，按了幾個(gè)回車。
因?yàn)槲覀儧](méi)有對(duì)顯示樣式進(jìn)行修改，那是 CSS 的事。HTML 主要管內(nèi)容的組織結(jié)構(gòu)。
這里有一點(diǎn)針對(duì)學(xué)習(xí)的小建議，本課程中給到的全部代碼請(qǐng)手動(dòng)輸入，忘記復(fù)制和粘貼快捷鍵。
而且最好不要機(jī)械的一個(gè)字符一個(gè)字符照著抄，盡量看過(guò)一行或一小段代碼之后，靠短暫的印象去輸出，別怕出錯(cuò)，只有過(guò)腦子并輸出實(shí)踐，才是最快掌握一項(xiàng)技能的捷徑。
以上兩句話是本課程中最有價(jià)值內(nèi)容之一。
下面我們接著修改剛才的代碼，再給 body 中添加幾個(gè)常用標(biāo)簽。每次修改和保存之后記得到預(yù)覽頁(yè)看看樣式的變化。
<h4>4 級(jí)標(biāo)題</h4><ul>
<li>
HTML
</li>
<li>
CSS
</li>
<li>
JavaScript
</li>
</ul><div>
<a href="https://www.shiyanlou.com" target="_blank"
>點(diǎn)擊超鏈接跳轉(zhuǎn)至實(shí)驗(yàn)樓首頁(yè)</a
>
</div><div>
<img
src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg"
alt=""
width="200"
/>
</div>最后的鏈接標(biāo)簽 a 和圖片標(biāo)簽 img 出現(xiàn)了標(biāo)簽屬性，屬性為 attr="value" 格式，可以給標(biāo)簽增加更豐富的信息。
同時(shí) img 標(biāo)簽還是一個(gè)單標(biāo)簽，不需要在后面添加 </img> 配合使用。
至此對(duì) HTML 的簡(jiǎn)要介紹告一段落。
互聯(lián)網(wǎng)上看到的各種五彩繽紛網(wǎng)頁(yè)都是由這些 HTML 組成的，但是為什么我們寫的這么難看？下一節(jié)我們就要學(xué)習(xí)一下如何用 CSS 美化頁(yè)面。
CSS 全稱層疊樣式表，是專門用來(lái)修飾 HTML 樣式的一種語(yǔ)言。我們修改一下上節(jié)的 hello.html 文件來(lái)直觀感受一下。
內(nèi)部代碼塊引入
在 head 標(biāo)簽內(nèi)部增加以下 style 代碼塊：
<head>
<meta charset="UTF-8" />
<title>標(biāo)題</title>
<style type="text/css">
div {
border: 1px solid blue;
padding: 2px;
margin: 10px;
}
</style>
</head>這是再切換到預(yù)覽頁(yè)，發(fā)現(xiàn)沒(méi)那么平鋪直敘了。
這就是 CSS 的第一種引入方式，HTML 內(nèi)置代碼塊。
大括號(hào)外面的 div 是標(biāo)簽選擇器，這里選中了本頁(yè)面中的所有 div 元素。大括號(hào)里面是屬性名與賦值，屬性名都是固定的關(guān)鍵字，并已規(guī)定好了值的類型和可選范圍。
讀代碼也就大概知道了，我們將 div 的邊框設(shè)置為 1 像素寬、固體（單線型）、藍(lán)色，填充（內(nèi)邊距）2 像素，邊緣空白（外邊距）10 像素。現(xiàn)在可以練習(xí)調(diào)整一下各個(gè)數(shù)字，預(yù)覽看看發(fā)生了什么？
再說(shuō)點(diǎn)題外話，懂一些英文對(duì)程序員來(lái)說(shuō)非常必要，除了可以憑感覺(jué)就讀懂沒(méi)學(xué)過(guò)的代碼，還可以在面向 Google 編程、面向 Stack Overflow 編程、面向 Github Issues 編程時(shí)游刃有余。
外部文件引入
然后我們?cè)僭囈幌峦獠课募?，?hello.html 的同級(jí)目錄新建 hello.css，輸入以下內(nèi)容保存：
div {
color: green;
border: 2px dotted red;
}然后修改 hello.html，在 style 標(biāo)簽后面增加一行 link 標(biāo)簽，添加引入類型和地址：
<style type="text/css">
div {
border: 1px solid blue;
padding: 2px;
margin: 10px;
}
</style>
<link rel="stylesheet" href="hello.css" />預(yù)覽看看，文字顏色變?yōu)榫G色，邊框的樣式也被更新為 2 像素寬、點(diǎn)線型紅色。
同樣是 div 選擇器，為什么邊框的樣式被覆蓋了呢？注意 CSS 在同樣條件下會(huì)后面代碼覆蓋前面，可以嘗試交換 link 標(biāo)簽和 style 標(biāo)簽塊的順序看看。
行間樣式
最后一種叫行間樣式，這個(gè)結(jié)構(gòu)更簡(jiǎn)單。修改 hello.html 中的 <div>內(nèi)部第一個(gè)</div> 為
<div style="margin: 60px 0 10px 30px ;color:purple;">內(nèi)部第一個(gè)</div>樣式覆蓋前兩種方式了，因?yàn)樾虚g樣式的優(yōu)先級(jí)較高。這里涉及到選擇器權(quán)重，先給一個(gè)簡(jiǎn)單公式了解一下。
!important > 行間樣式 > ID > class | 偽類 | 屬性選擇 > 標(biāo)簽 > 繼承 | 通配符。
多個(gè)選擇器作用時(shí)權(quán)重相加。這里算 CSS 里有點(diǎn)復(fù)雜的部分，暫時(shí)不展開。
這里還有個(gè)小知識(shí)點(diǎn)是內(nèi)外邊距 margin 和 padding 接受的完整的值是四個(gè)，順序固定為“上 右 下 左”。如果省略參數(shù)則從末尾計(jì)算對(duì)向合并。比如：
CSS 先講這么多，雖然沒(méi)有把我們的頁(yè)面變多好看，但最起碼知道努力的方向了。
制作 JavaScript 的快速入門簡(jiǎn)直非常傷腦筋。比起前兩種技術(shù) HTML 和 CSS，這是貨真價(jià)實(shí)的編程語(yǔ)言了。
也是我們后面要用到的 Vue.js 和 Node.js 中的根基，一下子又很難講很多，所以還是希望同學(xué)們能重視起來(lái)系統(tǒng)學(xué)習(xí)一下，最起碼讀到后面的代碼時(shí)不至于陷入“這是啥這又是啥”的窘境。
來(lái)段代碼直觀認(rèn)知一下，還是先內(nèi)部代碼塊引入。
在 hello.html 的 head 標(biāo)簽內(nèi)增加一個(gè)代碼塊：
<link rel="stylesheet" href="./hello.css">
<script>
let message="字符串提示";
function showMSG(msg) {
alert(msg);
}
</script>修改 hello.html 的 h1 標(biāo)簽為：
<h1 onclick="showMSG(message)">頁(yè)面標(biāo)題</h1>保存預(yù)覽，點(diǎn)擊“頁(yè)面標(biāo)題”，會(huì)彈出提示框。
JavaScript 代碼加載之后就會(huì)執(zhí)行，不存在編譯階段。行末的分號(hào)絕大多數(shù)時(shí)候可以省略。
我們先定義了一個(gè)變量 message，并賦值為“字符串提示”。定義變量關(guān)鍵字原是 var，ES6 新增關(guān)鍵字 let 有更清晰的作用域，可替代使用。
學(xué)習(xí) JavaScript 經(jīng)常會(huì)碰到 ES6、ES7 之類的名詞，實(shí)際上是 ECMAScript 標(biāo)準(zhǔn)的版本號(hào)的意思?？梢院?jiǎn)單理解為新版標(biāo)準(zhǔn)為 JavaScript 添加特定新特性。
然后我們定義了一個(gè)函數(shù) showMSG，并添加一個(gè)形參 msg。在函數(shù)體內(nèi)部調(diào)用瀏覽器彈框方法，顯示 msg 的值。function 是定義函數(shù)的關(guān)鍵字，暫時(shí)先把它當(dāng)做一個(gè)功能封閉的盒子，當(dāng)函數(shù)調(diào)用時(shí)，執(zhí)行函數(shù)體內(nèi)的代碼。
調(diào)用部分是先給 h1 標(biāo)簽添加了 onclick 點(diǎn)擊事件，被點(diǎn)擊時(shí)觸發(fā) showMSG(message)，也就是把 message 傳給了 msg。
之后再試一下調(diào)用外部 js 文件，新建 demo.js 文件，寫入下面內(nèi)容并保存。
message="修改一下字符串";然后修改 hello.html 文件，在 script 代碼塊后面增加一行：
<script src="./demo.js"></script>這次保存預(yù)覽，點(diǎn)擊“頁(yè)面標(biāo)題”，可以看到彈窗的文字變了。這個(gè)演示了 script 代碼塊在頁(yè)面可以同時(shí)存在多個(gè)，也是順序調(diào)用，而且互相之間可以直接訪問(wèn)。文件命名也沒(méi)有要求，希望不會(huì)逼死強(qiáng)迫癥。
JavaScript 就是為什么網(wǎng)頁(yè)可以做那么多交互的源頭了。掌握起來(lái)任重道遠(yuǎn)。
以上內(nèi)容節(jié)選自實(shí)驗(yàn)樓訓(xùn)練營(yíng)課程《Vue.js 和 Node.js 構(gòu)建內(nèi)容發(fā)布系統(tǒng)》。
這三門前端技術(shù)先了解到這里，想要更深入學(xué)習(xí)如何使用前端技術(shù)構(gòu)建內(nèi)容發(fā)布系統(tǒng)，比如做個(gè)高逼格的博客，搭建一個(gè)交流社區(qū)，或者為企業(yè)制作官網(wǎng)等，可以訪問(wèn)實(shí)驗(yàn)樓官網(wǎng)，搜索《Vue.js 和 Node.js 構(gòu)建內(nèi)容發(fā)布系統(tǒng)》這門課。
課程會(huì)提供完整的虛擬機(jī)環(huán)境，手把手教大家如何從頭構(gòu)建實(shí)現(xiàn)一個(gè)前后端分離的內(nèi)容發(fā)布系統(tǒng)，包括了前端頁(yè)面、后端服務(wù)、數(shù)據(jù)庫(kù)等。
在沒(méi)有調(diào)試器的情況下寫 JavaScript 是有難度的。
您的代碼中也許包含了語(yǔ)法錯(cuò)誤，或者邏輯錯(cuò)誤，這些都難以診斷。
通常，如果 JavaScript 代碼包含錯(cuò)誤，也不會(huì)發(fā)生任何事情。不會(huì)有錯(cuò)誤消息，并且不會(huì)有任何可供查找錯(cuò)誤的指示信息。
通常，每當(dāng)你嘗試編寫新的 JavaScript 代碼，就可能發(fā)生錯(cuò)誤。
查找編程代碼中的錯(cuò)誤被稱為代碼調(diào)試。
調(diào)試并不簡(jiǎn)單。但幸運(yùn)地是，所有現(xiàn)代瀏覽器都有內(nèi)置的調(diào)試器。
內(nèi)置的調(diào)試器可打開或關(guān)閉，強(qiáng)制將錯(cuò)誤報(bào)告給用戶。
通過(guò)調(diào)試器，您也可以設(shè)置斷點(diǎn)（代碼執(zhí)行被中斷的位置），并在代碼執(zhí)行時(shí)檢查變量。
通常通過(guò) F12 鍵啟動(dòng)瀏覽器中的調(diào)試器，然后在調(diào)試器菜單中選擇“控制臺(tái)”。
如果您的瀏覽器支持調(diào)試，那么您可以使用 console.log() 在調(diào)試窗口中顯示 JavaScript 的值：
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a=5;
b=6;
c=a + b;
console.log(c);
</script>
</body>
</html>
親自試一試
提示：請(qǐng)?jiān)L問(wèn)我們的 JavaScript Console 參考手冊(cè)，獲取更多有關(guān) console.log() 方法的信息。
在調(diào)試窗口中，您可在 JavaScript 代碼中設(shè)置斷點(diǎn)。
在每個(gè)斷點(diǎn)中，JavaScript 將停止執(zhí)行，以使您能夠檢查 JavaScript 的值。
在檢查值之后，您可以恢復(fù)代碼執(zhí)行。
debugger 關(guān)鍵詞會(huì)停止 JavaScript 的執(zhí)行，并調(diào)用（如果有）調(diào)試函數(shù)。
這與在調(diào)試器中設(shè)置斷點(diǎn)的功能是一樣的。
如果調(diào)試器不可用，debugger 語(yǔ)句沒(méi)有效果。
如果調(diào)試器已打開，此代碼會(huì)在執(zhí)行第三行之前停止運(yùn)行。
var x=15 * 5;
debugger;
document.getElementbyId("demo").innerHTML=x;
親自試一試
通常，您在瀏覽器中通過(guò) F12 鍵啟用調(diào)試，并在調(diào)試器菜單中選擇“控制臺(tái)”。
否則請(qǐng)按照以下步驟：
調(diào)試是測(cè)試、找到并減少計(jì)算機(jī)程序中 bug（錯(cuò)誤）的過(guò)程。
歷史上首個(gè)已知的計(jì)算機(jī) bug 是一只卡在電子器件中的真實(shí)的蟲子（一種昆蟲）。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
