摘要：搞嵌入式的要學習一點前端嗎？那么前端是什么？是網頁是網站嗎？是也不全是，前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺代碼實作，包括基本的HTML和CSS以及JavaScript/ajax，最新的高級版本HTML5、CSS3，以及SVG等，
所以對編程人員來說，搞電子嵌入式的，如果會一點HTML、CSS、JS，你就算的上前端開發人員了，雖然小編不是計算機科班出身，但是以一個外行人來看前端與理解，更能使大家更加理解前端，
一個完整的網頁由三部分組成，就是我們上面說的：
- HTML:網頁的內容結構，簡單
- CSS：網頁的視覺效果，簡單
- JavaScript：網頁的互動處理，難點，主要學這個
一、網頁的顯示程序
一般要把網頁在檔案在本地電腦上面寫好之后，打包部署到服務器上面，比如阿里云服務器、騰訊云服務器上面，之后服務器會提供給你一個獨立的IP地址，之后再買個域名，將域名決議到服務器的IP地址是上面，我們就可以在任意一個有網路的地方訪問域名，就可以在瀏覽器上面顯示我們之前寫好的網頁了，
其實這就是我們做一個網站的大致思路，最根本的還是要學會如何在本地寫一個網頁，初學者肯定有畏難情緒，但是如果你動氣手來會發現其實沒有那么難的，
二、開發工具選擇
記事本可以開發一個網頁嗎？
答案：可以，但是有很多的缺點，創建檔案后，需要手動將檔案后綴名修改為htm口沒有顏色標識、沒有智能提示、無法除錯程式，
專業的前端開發工具有Webster、Sublime Text、Visual Studio Code、Atom、BUilder、Intel IDEA、Dreamweaver口智能提示、高亮識別、語法檢測、集成環境、開發效率高，
- Webstorn
優點：集成開發工具，包羅萬象，缺點：重(占用系統資源多)，收費 - 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中的內容其實就是各個引數的變數值，
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
五、常用元素
HTML提供了大量元素，每一個元素都有特定的用途，保證了網頁的豐富多樣性，
一個網頁并不是所有的元素都要用到，比如我們這個簡歷的網頁就是用了很少的元素，
不要覺得很復雜，其實在編譯器中這些格式以及標簽都不需要你自己去一個一個敲，會有自動補齊的功能，比如
撰寫個人簡介
撰寫關于我和技能
添加css樣式
css樣式我們可以自己寫，當然也可以參考別人寫好的樣式，我們這里參考的是bootstrap框架的樣式，Bootstrap是最受歡迎的HTML、CSS和JS框架，用于開發回應式布局、移動設備優先的WEB專案，
如何添加呢？
也就是說在我們的head標簽中引入下面這句代碼就可以了，
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
可以看到引入了css的鏈接之后顯示效果非常好看，載加上影像鏈接
<!-- <div class="col-md-4">
<img class="rotation img" src="https://cdn.jsdelivr.net/gh/Yafine/Yafine-imgs/images/xiaoshidi.jpg" alt="author.jpg" width="200px" height="200px" style="opacity: 0.6;border: 1px solid #080808;;border-radius: 50%;">
</div> -->
好了一個基本的網頁已經做好了，當然一般來說我們如果在網上看到一個非常好看的網頁，可以右鍵查看網頁源代碼，就可以用獲取網頁的相關資訊，
然后將其復制下來，保存到本地，只要后綴名是.html，就可以打開網頁，這樣看起來，如果你在網上看到一張好看圖片就可以右鍵查看源代碼，找到后綴名是.jpg、.png、.gif就可以保存了，同樣視頻也是一樣的，不過有些加過密就沒辦法了，
總結：本篇主要是針對小白，沒有將具體的標簽用法，只是了解一下html和css以及js是啥，對于一個網頁的起到什么作用，多掌握一門技能，為自己放棄嵌入式改行做前端打一個基礎，
網頁資源原始碼，已經上傳到gitee倉庫，需要的可以自行下載
https://gitee.com/zhiguoxin/Wechat-Data.git
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/297551.html
標籤：其他