2-STM32物聯網開發WIFI(ESP8266)+GPRS(Air202)系統方案微信小程序篇(學習網頁_1)

時間 2019-12-08

標籤 stm32 stm 聯網開發 wifi esp8266 esp gprs air202 air 系統方案微信程序學習網頁欄目無線简体版

原文原文鏈接

http://www.javashuo.com/article/p-gufjkavu-dd.htmlhtml

要學習小程序須要準備些一些基礎知識,下面是基礎知識的源碼連接.git

https://gitee.com/yang456/LearnWebPage.git 小程序

若是購買了微信小程序篇也能夠微信小程序

我都是把基礎知識所有公開,個人首要目的是做爲一個知識的傳播者,主要是讓你們去輕鬆入門,先幫到大部分大部分人..而後出售部分都是對基礎知識的整合,而後實現一個系統的功能(這都是項目上用的),由於我幫到這些人掙錢了,個人角色就至關於省去了他們的研發時間和研發成本,因此我纔會收錢出售,而後關於訂價:我通常系統教程的基礎篇會在成本價的基礎上加20-30左右(加了一頓飯錢....主要爲了照顧學生),其他的都是在動態調整,由於會時不時的更新新的功能....因此你們纔會看到基礎篇基本價格不會動,後期提升的只有後面的價格....瀏覽器

對於網頁呢!其實入門並不難,反而要比入門C語言還簡單,只要你不是傻子..都學的會...微信

後綴名字改成.html函數

網頁不須要解釋器,你本身寫的代碼只要按照網頁的規定來寫,瀏覽器本身去識別學習

如今寫個最簡單的...字體

讓網頁顯示 "文華" 兩個字網站

<html>
 <h1>文華</h1>
</html>

運行一下

最簡單的網頁就完成了

<html>
這個之間寫代碼
</html>

其實主要是你想讓瀏覽器去識別你寫的程序,總得讓瀏覽器知道哪裏是開始,哪裏是結束

因此人家才這樣規定的

h1 是告訴瀏覽器我是一個標籤,標籤顯示的內容是 "文華"

<h1>XXXX</h1> 其實這種方式寫也是告訴瀏覽器這個標籤哪裏是開始,哪裏是結束..

由於咱寫一個網頁可能用好多個標籤,其實關於標籤沒有什麼好說的,你們能夠這樣

也就是顯示個文本(只不過標籤號不同,顯示的文字大小不同),注意h6就到頭了

咱如今接着作,改變第一個文本的顏色爲紅色

<html>
 <h1 style="color: red"> 文華1 </h1>
 <h2>文華2</h2>
 <h3>文華3</h3>
 <h4>文華4</h4>
 <h5>文華5</h5>

 <h1>文華5</h1>
</html>

仔細看一下哈,定義這個文本的顏色的時候是在

<h1 XXXXXXX> 這個裏面寫

咱用的是style這個屬性,也就是風格,而後設置的裏面的顏色值是紅色,其實style裏面有不少提供修改的東西,咱只是修改了個顏色值,

這是第一篇咱是直接用記事本寫,其實後面咱用IDE軟件寫,這樣的話軟件還能提示,比較方便

有人會想..爲何要這樣寫呀 style="color: red" 你這樣寫全部的瀏覽器就認識你.....

若是你早生幾十年,若是你也有機會和能力參與開發網頁的組織,若是有可能你也定義個規定出來......你們就用你的規定...emmm

剛纔說了style裏面有好多東西,咱再修改下字體的大小,之間用 ; 隔開

<html>
 <h1 style="color: red;font-size: 80px"> 文華1 </h1>
 <h2>文華2</h2>
 <h3>文華3</h3>
 <h4>文華4</h4>
 <h5>文華5</h5>

 <h1>文華5</h1>
</html>

增長了 ;font-size: 80px  就是設置文字的大小是80像素
你們應該知道咱的屏幕都是一個一個的小燈
其實80像素就是說用80*80個小燈來顯示這個字
你們能夠看看我這篇文章,深刻了解一下,咱屏幕究竟是如何顯示的
http://www.javashuo.com/article/p-siiscioq-w.html

對了說一下哈,如今的代碼不規範...我只是先領着你們入門,後面遇到問題再在上面添加東西,添加的東西越多越很差理解..咱遇到再說

如今看增長一個點擊事件

點擊第一個文本,彈出一個對話框

首先說明

全部的事件函數要求在這個裏面寫

如今給文本框添加上事件點擊事件

<html>


<script>
    function click1() { //函數
        alert("顯示的內容");//彈出一個框
    }
</script>


 <h1 style="color: red;font-size: 80px" onclick="click1()"> 文華1 </h1>
 <h2>文華2</h2>
 <h3>文華3</h3>
 <h4>文華4</h4>
 <h5>文華5</h5>

 <h1>文華5</h1>
</html>

<h1 style="color: red;font-size: 80px"  onclick="click1()"> 文華1 </h1>
                        屬性和屬性之間用 空格 隔開

onclick="click1()"
就是說點擊這個文本的時候,調用 click1() 這個函數

function click1() { //函數
        alert("顯示的內容");//彈出一個框
    }

定義一個函數用 function 函數名(參數){}

其實 function 也就是個語法而已,人家這樣規定的,咱就這樣用


如今這篇再學最後一個知識點

有時候呀這個顯示的文字的內容可能隨時改變,因此呢咱就作一個這個功能,
點擊第一個標籤的時候,讓標籤的顏色變爲綠色,並且顯示的內容改成 楊
爲了能別的地方控制這個標籤,咱給這個標籤添加一個ID


而後咱就能夠

id1.style.color="green";//改變顏色
id1.innerHTML = "楊";//改變現實的內容

點擊一下

其實還有一種方式(和開發Android 差很少)

document.getElementById("ID的名字")


能夠參考這個
https://blog.51cto.com/maplebb/1953865

而後就改成了

<html>


<script>
    function click1() { //函數
        //alert("顯示的內容");//彈出一個框
        //document.getElementById("id1")

        //id1.style.color="green";//改變顏色
        //id1.innerHTML = "楊";//改變現實的內容

        document.getElementById("id1").style.color="green";//改變顏色
        document.getElementById("id1").innerHTML = "楊";//改變顯示的內容
    }
</script>


 <h1 style="color: red;font-size: 80px" onclick="click1()" id="id1"> 文華1 </h1>
 <h2>文華2</h2>
 <h3>文華3</h3>
 <h4>文華4</h4>
 <h5>文華5</h5>

 <h1>文華5</h1>
</html>

效果和上面的同樣,推薦這種...

你們本身去安裝這個軟件 WebStorm

後面的咱用這個IDE寫,主要是有提示比較方便快捷

源碼自行下載,就是上面的git 網址

推薦個學習的網站 http://www.w3school.com.cn/h.asp



http://www.javashuo.com/article/p-mmhfdkhh-gn.html