摘要：搞嵌入式的要學(xué)習(xí)一點(diǎn)前端嗎？那么前端是什么？是網(wǎng)頁是網(wǎng)站嗎？是也不全是。前端技術(shù)一般分為前端設(shè)計(jì)和前端開發(fā)，前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺設(shè)計(jì)，前端開發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax，最新的高級(jí)版本HTML5、CSS3，以及SVG等。

所以對(duì)編程人員來說，搞電子嵌入式的，如果會(huì)一點(diǎn)HTML、CSS、JS。你就算的上前端開發(fā)人員了。雖然小編不是計(jì)算機(jī)科班出身，但是以一個(gè)外行人來看前端與理解，更能使大家更加理解前端。

一個(gè)完整的網(wǎng)頁由三部分組成，就是我們上面說的：

HTML:網(wǎng)頁的內(nèi)容結(jié)構(gòu)。簡單

CSS：網(wǎng)頁的視覺效果。簡單

JavaScript：網(wǎng)頁的交互處理。難點(diǎn)，主要學(xué)這個(gè)

只會(huì)html 然后學(xué)了css 最后加上了js

一、網(wǎng)頁的顯示過程

一般要把網(wǎng)頁在文件在本地電腦上面寫好之后，打包部署到服務(wù)器上面，比如阿里云服務(wù)器、騰訊云服務(wù)器上面。之后服務(wù)器會(huì)提供給你一個(gè)獨(dú)立的IP地址。之后再買個(gè)域名，將域名解析到服務(wù)器的IP地址是上面，我們就可以在任意一個(gè)有網(wǎng)絡(luò)的地方訪問域名，就可以在瀏覽器上面顯示我們之前寫好的網(wǎng)頁了。

其實(shí)這就是我們做一個(gè)網(wǎng)站的大致思路。最根本的還是要學(xué)會(huì)如何在本地寫一個(gè)網(wǎng)頁。初學(xué)者肯定有畏難情緒，但是如果你動(dòng)氣手來會(huì)發(fā)現(xiàn)其實(shí)沒有那么難的。

二、開發(fā)工具選擇

記事本可以開發(fā)一個(gè)網(wǎng)頁嗎？

答案：可以。

但是有很多的缺點(diǎn)。創(chuàng)建文件后，需要手動(dòng)將文件后綴名修改為htm口沒有顏色標(biāo)識(shí)、沒有智能提示、無法調(diào)試程序。

專業(yè)的前端開發(fā)工具有Webster、Sublime Text、Visual Studio Code、Atom、BUilder、Intel IDEA、Dreamweaver口智能提示、高亮識(shí)別、語法檢測(cè)、集成環(huán)境、開發(fā)效率高。

Webstorn優(yōu)點(diǎn)：集成開發(fā)工具，包羅萬象。缺點(diǎn)：重(占用系統(tǒng)資源多)，收費(fèi)

VSCode優(yōu)點(diǎn)：輕(相當(dāng)于—一個(gè)編輯器），免費(fèi)。缺點(diǎn)：需要安裝一些插件來輔助開發(fā)

vscode

三、安裝插件

安裝插件

右側(cè)圖標(biāo)最后一項(xiàng)，Extensions，查找需要的插件

Chinese工具中文支持open in browser將htm頁面在瀏覽器中打開口Scope-Icons文件圖標(biāo)的樣式

安裝插件

工具配置

Auto save動(dòng)保存Font size修改代碼字體大小口Word Wrap代碼自動(dòng)換行口Render Whitespace空格的渲染方式(個(gè)人推薦）Tab Size代碼縮進(jìn)

基礎(chǔ)階段建議縮進(jìn)4個(gè)空格

進(jìn)階階段開始慢慢習(xí)慣2個(gè)空格

四、代碼編寫

在hexo的博客有個(gè)自我介紹的頁面，就以這個(gè)頁面為模板，講一下這個(gè)網(wǎng)頁是如何讓制作的，然后大家就可以制作出一樣漂亮的頁面了。

首先看到的文字信息都是用html寫得，這些圖標(biāo)信息，表格都是因?yàn)榧尤肓薱ss樣式，最后的櫻花動(dòng)圖效果是因?yàn)榧尤肓薺s的效果。

如何制作這樣的一個(gè)網(wǎng)頁效果了？

新建一個(gè).html文件

打開vscode，新建一個(gè)index.html的文空文件。然后輸入！+回車。

如果把html比作一個(gè)人，那么這個(gè)人就包含兩個(gè)部分，上半身和下半身。上半身是head，下半身是body。

更加形象的可以用這張圖表示。

所謂的頭，我們要告訴瀏覽器的我們這個(gè)html的一些相關(guān)信息，比如你用的什么編碼方式等。

name屬性name屬性主要用于描述網(wǎng)頁，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。

http-equiv屬性http-equiv顧名思義，相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。

五、常用元素

HTML提供了大量元素，每一個(gè)元素都有特定的用途，保證了網(wǎng)頁的豐富多樣性。

一個(gè)網(wǎng)頁并不是所有的元素都要用到，比如我們這個(gè)簡歷的網(wǎng)頁就是用了很少的元素。

代碼標(biāo)簽



紅色部分就是代碼標(biāo)簽的顯示效果

不要覺得很復(fù)雜，其實(shí)在編譯器中這些格式以及標(biāo)簽都不需要你自己去一個(gè)一個(gè)敲，會(huì)有自動(dòng)補(bǔ)齊的功能，比如

編寫個(gè)人簡介

代碼



顯示效果

編寫關(guān)于我和技能

添加css樣式

css樣式我們可以自己寫，當(dāng)然也可以引用別人寫好的樣式。我們這里引用的是bootstrap框架的樣式，Bootstrap是最受歡迎的HTML、CSS和JS框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的WEB項(xiàng)目。

如何添加呢？

也就是說在我們的head標(biāo)簽中引入下面這句代碼就可以了。

可以看到引入了css的鏈接之后顯示效果非常好看。載加上圖像鏈接

加上了圖像信息

好了一個(gè)基本的網(wǎng)頁已經(jīng)做好了。當(dāng)然一般來說我們?nèi)绻诰W(wǎng)上看到一個(gè)非常好看的網(wǎng)頁，可以右鍵查看網(wǎng)頁源代碼，就可以用獲取網(wǎng)頁的相關(guān)信息。

然后將其復(fù)制下來，保存到本地，只要后綴名是.html，就可以打開網(wǎng)頁。這樣看起來，如果你在網(wǎng)上看到一張好看圖片就可以右鍵查看源代碼，找到后綴名是.jpg、.png、.gif就可以保存了。同樣視頻也是一樣的，不過有些加過密就沒辦法了。

總結(jié)：本篇主要是針對(duì)小白，沒有講具體的標(biāo)簽用法。只是了解一下html和css以及js是啥，對(duì)于一個(gè)網(wǎng)頁的起到什么作用，多掌握一門技能。為自己放棄嵌入式改行做前端打一個(gè)基礎(chǔ)。

審核編輯：劉清