整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
到前端技術(shù)，不少朋友一定會感到有些陌生。但其實，前端，你每天都在接觸。
你正在使用的APP，你正在瀏覽的網(wǎng)頁，這些你能看到的界面，都屬于前端。
而前端最重要的三大技術(shù)，HTML，CSS，JavaScript，則是每一個前端開發(fā)者必須具備的技能。
掌握這些技能，你可以快速地做出一個酷炫的APP界面或者一個簡單大方的網(wǎng)站頁面。因此，就讓我們一起來快速學(xué)習(xí)一下這三門技術(shù)吧。
以下內(nèi)容節(jié)選自實驗樓訓(xùn)練營課程《Vue.js 和 Node.js 構(gòu)建內(nèi)容發(fā)布系統(tǒng)》。
本實驗主要介紹一下前端的基礎(chǔ)知識，對比認(rèn)識一下各個框架的代碼編寫方式，并介紹我們本次技術(shù)選型的主要思路。對于前端三大技術(shù) HTML、CSS、JavaScript，簡單的介紹了基本情況和常用語法。中間介紹了現(xiàn)代框架的一些情況，并通過實際的案例，用代碼直觀的認(rèn)識一下各種框架的實現(xiàn)方式。最后分析一下項目的技術(shù)選型。
本節(jié)我們簡單介紹一下前端最基礎(chǔ) HTML, CSS, JavaScript 三駕馬車。雖然本課程預(yù)設(shè)的讀者為零基礎(chǔ)開發(fā)者，但是前端開發(fā)一定會這三種技術(shù)的運用有要求。建議抽空學(xué)習(xí) 《 Web 前端工程師路徑》 中的階段 1 甚至階段 2。這里僅做語法介紹和基本使用的概覽。
在此之前先認(rèn)識一下實驗環(huán)境。實驗環(huán)境和 VS Code 使用體驗基本一致。你可以啟動一個終端，并在其中輸入 Linux 命令。
后面的命令無特殊說明的都是在此終端命令行中輸入。大多數(shù)命令可以多開終端窗口分別執(zhí)行。
那么下面我們就快速的了解一下。
HTML 全稱超文本標(biāo)記語言，幾乎是從萬維網(wǎng)和瀏覽器產(chǎn)生伊始就存在的。主要用于結(jié)構(gòu)化信息來方便瀏覽器展示。
以標(biāo)簽對作為主要特征，如<p>這是一個段落</p>。這些標(biāo)簽會被瀏覽器解析成不同的模塊，比如 p 標(biāo)簽就是一個段落，img 標(biāo)簽就是一個圖片，a 標(biāo)簽就是一個超鏈接，標(biāo)簽名不區(qū)分大小寫。
立刻就來嘗試一下吧。首先通過命令行新建一個 demo 目錄：
mkdir demo然后命令行進入 demo 目錄：
cd ./demo新建一個 hello.html 文件，可以在實驗環(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。
看到了嗎？其實我們就是新建了一個 .html 后綴的文本文件，然后瀏覽器就可以將其中的內(nèi)容展示出來。你也可以在自己的桌面上新建一個，然后使用瀏覽器打開看看效果。
這里嵌套代碼的縮進格式是為了美觀和可讀性，并無嚴(yán)格要求。
head 標(biāo)簽中是一些暫時無需用到的頭部信息，渲染的主體是 body 標(biāo)簽。下面我們修改 body 標(biāo)簽里面的內(nèi)容，填入一些常用標(biāo)簽來直觀感受一下。
<body>
<h1>頁面標(biāo)題</h1>
<div>一個塊容器</div>
<div>又一個塊容器</div>
<p>這里是段落了，間距變大</p>
<div>一個塊容器</div>
<div>
<div>
多層嵌套：
<div>內(nèi)部第一個</div>
<div>內(nèi)部第二個</div>
</div>
</div>
</body>保存之后切換到瀏覽標(biāo)簽看一看，有沒有感覺被忽悠了？嵌套沒嵌套根本沒體現(xiàn)出來，就像 Word 里排了一下版，按了幾個回車。
因為我們沒有對顯示樣式進行修改，那是 CSS 的事。HTML 主要管內(nèi)容的組織結(jié)構(gòu)。
這里有一點針對學(xué)習(xí)的小建議，本課程中給到的全部代碼請手動輸入，忘記復(fù)制和粘貼快捷鍵。
而且最好不要機械的一個字符一個字符照著抄，盡量看過一行或一小段代碼之后，靠短暫的印象去輸出，別怕出錯，只有過腦子并輸出實踐，才是最快掌握一項技能的捷徑。
以上兩句話是本課程中最有價值內(nèi)容之一。
下面我們接著修改剛才的代碼，再給 body 中添加幾個常用標(biāo)簽。每次修改和保存之后記得到預(yù)覽頁看看樣式的變化。
<h4>4 級標(biāo)題</h4><ul>
<li>
HTML
</li>
<li>
CSS
</li>
<li>
JavaScript
</li>
</ul><div>
<a href="https://www.shiyanlou.com" target="_blank"
>點擊超鏈接跳轉(zhuǎn)至實驗樓首頁</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)簽增加更豐富的信息。
同時 img 標(biāo)簽還是一個單標(biāo)簽，不需要在后面添加 </img> 配合使用。
至此對 HTML 的簡要介紹告一段落。
互聯(lián)網(wǎng)上看到的各種五彩繽紛網(wǎng)頁都是由這些 HTML 組成的，但是為什么我們寫的這么難看？下一節(jié)我們就要學(xué)習(xí)一下如何用 CSS 美化頁面。
CSS 全稱層疊樣式表，是專門用來修飾 HTML 樣式的一種語言。我們修改一下上節(jié)的 hello.html 文件來直觀感受一下。
內(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ù)覽頁，發(fā)現(xiàn)沒那么平鋪直敘了。
這就是 CSS 的第一種引入方式，HTML 內(nèi)置代碼塊。
大括號外面的 div 是標(biāo)簽選擇器，這里選中了本頁面中的所有 div 元素。大括號里面是屬性名與賦值，屬性名都是固定的關(guān)鍵字，并已規(guī)定好了值的類型和可選范圍。
讀代碼也就大概知道了，我們將 div 的邊框設(shè)置為 1 像素寬、固體（單線型）、藍色，填充（內(nèi)邊距）2 像素，邊緣空白（外邊距）10 像素。現(xiàn)在可以練習(xí)調(diào)整一下各個數(shù)字，預(yù)覽看看發(fā)生了什么？
再說點題外話，懂一些英文對程序員來說非常必要，除了可以憑感覺就讀懂沒學(xué)過的代碼，還可以在面向 Google 編程、面向 Stack Overflow 編程、面向 Github Issues 編程時游刃有余。
外部文件引入
然后我們再試一下外部文件引入，在 hello.html 的同級目錄新建 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 像素寬、點線型紅色。
同樣是 div 選擇器，為什么邊框的樣式被覆蓋了呢？注意 CSS 在同樣條件下會后面代碼覆蓋前面，可以嘗試交換 link 標(biāo)簽和 style 標(biāo)簽塊的順序看看。
行間樣式
最后一種叫行間樣式，這個結(jié)構(gòu)更簡單。修改 hello.html 中的 <div>內(nèi)部第一個</div> 為
<div style="margin: 60px 0 10px 30px ;color:purple;">內(nèi)部第一個</div>樣式覆蓋前兩種方式了，因為行間樣式的優(yōu)先級較高。這里涉及到選擇器權(quán)重，先給一個簡單公式了解一下。
!important > 行間樣式 > ID > class | 偽類 | 屬性選擇 > 標(biāo)簽 > 繼承 | 通配符。
多個選擇器作用時權(quán)重相加。這里算 CSS 里有點復(fù)雜的部分，暫時不展開。
這里還有個小知識點是內(nèi)外邊距 margin 和 padding 接受的完整的值是四個，順序固定為“上 右 下 左”。如果省略參數(shù)則從末尾計算對向合并。比如：
CSS 先講這么多，雖然沒有把我們的頁面變多好看，但最起碼知道努力的方向了。
制作 JavaScript 的快速入門簡直非常傷腦筋。比起前兩種技術(shù) HTML 和 CSS，這是貨真價實的編程語言了。
也是我們后面要用到的 Vue.js 和 Node.js 中的根基，一下子又很難講很多，所以還是希望同學(xué)們能重視起來系統(tǒng)學(xué)習(xí)一下，最起碼讀到后面的代碼時不至于陷入“這是啥這又是啥”的窘境。
來段代碼直觀認(rèn)知一下，還是先內(nèi)部代碼塊引入。
在 hello.html 的 head 標(biāo)簽內(nèi)增加一個代碼塊：
<link rel="stylesheet" href="./hello.css">
<script>
let message = "字符串提示";
function showMSG(msg) {
alert(msg);
}
</script>修改 hello.html 的 h1 標(biāo)簽為：
<h1 onclick="showMSG(message)">頁面標(biāo)題</h1>保存預(yù)覽，點擊“頁面標(biāo)題”，會彈出提示框。
JavaScript 代碼加載之后就會執(zhí)行，不存在編譯階段。行末的分號絕大多數(shù)時候可以省略。
我們先定義了一個變量 message，并賦值為“字符串提示”。定義變量關(guān)鍵字原是 var，ES6 新增關(guān)鍵字 let 有更清晰的作用域，可替代使用。
學(xué)習(xí) JavaScript 經(jīng)常會碰到 ES6、ES7 之類的名詞，實際上是 ECMAScript 標(biāo)準(zhǔn)的版本號的意思。可以簡單理解為新版標(biāo)準(zhǔn)為 JavaScript 添加特定新特性。
然后我們定義了一個函數(shù) showMSG，并添加一個形參 msg。在函數(shù)體內(nèi)部調(diào)用瀏覽器彈框方法，顯示 msg 的值。function 是定義函數(shù)的關(guān)鍵字，暫時先把它當(dāng)做一個功能封閉的盒子，當(dāng)函數(shù)調(diào)用時，執(zhí)行函數(shù)體內(nèi)的代碼。
調(diào)用部分是先給 h1 標(biāo)簽添加了 onclick 點擊事件，被點擊時觸發(fā) showMSG(message)，也就是把 message 傳給了 msg。
之后再試一下調(diào)用外部 js 文件，新建 demo.js 文件，寫入下面內(nèi)容并保存。
message = "修改一下字符串";然后修改 hello.html 文件，在 script 代碼塊后面增加一行：
<script src="./demo.js"></script>這次保存預(yù)覽，點擊“頁面標(biāo)題”，可以看到彈窗的文字變了。這個演示了 script 代碼塊在頁面可以同時存在多個，也是順序調(diào)用，而且互相之間可以直接訪問。文件命名也沒有要求，希望不會逼死強迫癥。
JavaScript 就是為什么網(wǎng)頁可以做那么多交互的源頭了。掌握起來任重道遠。
以上內(nèi)容節(jié)選自實驗樓訓(xùn)練營課程《Vue.js 和 Node.js 構(gòu)建內(nèi)容發(fā)布系統(tǒng)》。
這三門前端技術(shù)先了解到這里，想要更深入學(xué)習(xí)如何使用前端技術(shù)構(gòu)建內(nèi)容發(fā)布系統(tǒng)，比如做個高逼格的博客，搭建一個交流社區(qū)，或者為企業(yè)制作官網(wǎng)等，可以訪問實驗樓官網(wǎng)，搜索《Vue.js 和 Node.js 構(gòu)建內(nèi)容發(fā)布系統(tǒng)》這門課。
課程會提供完整的虛擬機環(huán)境，手把手教大家如何從頭構(gòu)建實現(xiàn)一個前后端分離的內(nèi)容發(fā)布系統(tǒng)，包括了前端頁面、后端服務(wù)、數(shù)據(jù)庫等。
些程序員學(xué)編程走了不少的彎路，一段時間學(xué)Java，接著又換php。
結(jié)果呢，到頭來什么都沒有學(xué)好。
最近有個w3cschool粉絲問了這樣的一個問題：26歲跨行學(xué)前端靠譜嗎?
其實，這個主要還是看愛好以及是否適合。
就比如前端這三駕馬車，HTML+CSS+Javascript。html算是比較簡單的，如果學(xué)習(xí)html都覺得很吃力，那就別提后面JavaScript的學(xué)習(xí)啦!
不過，學(xué)html難免會遇到一些困惑，w3cschool給程序員小伙伴們解答一下常見的3大問題：
0、學(xué)html選什么書?
HTML是超文本標(biāo)記語言，沒有變量，沒有循環(huán)，沒有函數(shù)。
如果是零接觸的新手，推薦《HTML之路：XHTML和CSS最佳實踐指南》，它是國外著名網(wǎng)站HTML DOG中的精華內(nèi)容的集結(jié)。
然后就是看《Head first HTML&CSS》 這本神奇的入門書，看個兩三遍就會對html有個整體的印象。
1、選什么網(wǎng)上教程?
跟著Learn to code這個網(wǎng)站學(xué)html還是很有幫助的，完成任務(wù)會有徽章獎勵，可以調(diào)動學(xué)習(xí)積極性，不會感覺枯燥。
另外，W3Cschool網(wǎng)站上的HTML在線教程可以過一遍，了解每個標(biāo)簽以及屬性。
當(dāng)然，你還可以通過w3cschool app或者網(wǎng)站上的html編程微課學(xué)習(xí)。
html編程微課采用了游戲化編程實戰(zhàn)闖關(guān)，各種的小節(jié)測驗，幫助你快速打下基礎(chǔ)。
2、做什么項目實戰(zhàn)?
有不少學(xué)html的新手都會問要做什么項目呢?
其實，你覺得學(xué)到了一定的程度，便可以小試牛刀，譬如最簡單的就是搭一個博客，也可以做簡單的靜態(tài)展示類網(wǎng)頁。
一個平板電腦就可以解決你的所有需求。
2021年12月22日上午突發(fā)奇想，能否在平板電腦上打代碼呢？針對這一問題我進行了一些探索，可能會有人問手機不也可以隨時隨地打代碼嗎？為什么還需要平板呢？ 我給出的答案是手機固然能打代碼，但是連接鼠標(biāo)鍵盤十分不方便。平板的話橫屏即可當(dāng)作電腦使用，連接上鍵盤手機使用效果比手機好的太多太多。不多說廢話，下面發(fā)干貨。
首先，我使用的平板型號是華為matepad11，在應(yīng)用市場上搜索 Aidlux ，這個大家都會吧，安裝下載。打開運行之后呢，會出現(xiàn)這樣一個界面：
?
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
