摘要：搞嵌入式的要學習一點前端嗎？那么前端是什么？是網頁是網站嗎？是也不全是。前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，最新的高級版本HTML5、CSS3，以及SVG等。

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

一個完整的網頁由三部分組成，就是我們上面說的：

HTML:網頁的內容結構。簡單

CSS：網頁的視覺效果。簡單

JavaScript：網頁的交互處理。難點，主要學這個

只會html 然后學了css 最后加上了js

一、網頁的顯示過程

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

其實這就是我們做一個網站的大致思路。最根本的還是要學會如何在本地寫一個網頁。初學者肯定有畏難情緒，但是如果你動氣手來會發現其實沒有那么難的。

二、開發工具選擇

記事本可以開發一個網頁嗎？

答案：可以。

但是有很多的缺點。創建文件后，需要手動將文件后綴名修改為htm口沒有顏色標識、沒有智能提示、無法調試程序。

專業的前端開發工具有Webster、Sublime Text、Visual Studio Code、Atom、BUilder、Intel IDEA、Dreamweaver口智能提示、高亮識別、語法檢測、集成環境、開發效率高。

Webstorn優點：集成開發工具，包羅萬象。缺點：重(占用系統資源多)，收費

VSCode優點：輕(相當于—一個編輯器），免費。缺點：需要安裝一些插件來輔助開發

vscode

三、安裝插件

安裝插件

右側圖標最后一項，Extensions，查找需要的插件

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

安裝插件

工具配置

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

基礎階段建議縮進4個空格

進階階段開始慢慢習慣2個空格

四、代碼編寫

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

首先看到的文字信息都是用html寫得，這些圖標信息，表格都是因為加入了css樣式，最后的櫻花動圖效果是因為加入了js的效果。

如何制作這樣的一個網頁效果了？

新建一個.html文件

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

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

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

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

name屬性name屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。

http-equiv屬性http-equiv顧名思義，相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。

五、常用元素

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

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

代碼標簽



紅色部分就是代碼標簽的顯示效果

不要覺得很復雜，其實在編譯器中這些格式以及標簽都不需要你自己去一個一個敲，會有自動補齊的功能，比如

編寫個人簡介

代碼



顯示效果

編寫關于我和技能

添加css樣式

css樣式我們可以自己寫，當然也可以引用別人寫好的樣式。我們這里引用的是bootstrap框架的樣式，Bootstrap是最受歡迎的HTML、CSS和JS框架，用于開發響應式布局、移動設備優先的WEB項目。

如何添加呢？

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

沒有引入css



引入了css

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

加上了圖像信息

好了一個基本的網頁已經做好了。當然一般來說我們如果在網上看到一個非常好看的網頁，可以右鍵查看網頁源代碼，就可以用獲取網頁的相關信息。

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

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

審核編輯：劉清