https://www.cnblogs.com/yangfengwu/p/10852073.html
要學習小程序需要准備些一些基礎知識,下面是基礎知識的源碼鏈接.
https://gitee.com/yang456/LearnWebPage.git
我都是把基礎知識全部公開,我的首要目的是作為一個知識的傳播者,主要是讓大家去輕松入門,先幫到大部分大部分人..然后出售部分都是對基礎知識的整合,然后實現一個系統的功能(這都是項目上用的),因為我幫到這些人掙錢了,我的角色就相當於省去了他們的研發時間和研發成本,所以我才會收錢出售,然后關於定價:我一般系統教程的基礎篇會在成本價的基礎上加20-30左右(加了一頓飯錢....主要為了照顧學生),其余的都是在動態調整,因為會時不時的更新新的功能....所以大家才會看到基礎篇基本價格不會動,后期提高的只有后面的價格....
對於網頁呢!其實入門並不難,反而要比入門C語言還簡單,只要你不是傻子..都學的會...
后綴名字改為.html
網頁不需要解釋器,你自己寫的代碼只要按照網頁的規定來寫,瀏覽器自己去識別
現在寫個最簡單的...
讓網頁顯示 "文華" 兩個字
<html> <h1>文華</h1> </html>
運行一下
最簡單的網頁就完成了
<html>
這個之間寫代碼
</html>
其實主要是你想讓瀏覽器去識別你寫的程序,總得讓瀏覽器知道哪里是開始,哪里是結束
所以人家才這樣規定的
<h1>文華</h1>
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 style="color: red"> 文華1 </h1>
仔細看一下哈,定義這個文本的顏色的時候是在
<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個小燈來顯示這個字
大家可以看看我這篇文章,深入了解一下,咱屏幕到底是如何顯示的
https://www.cnblogs.com/yangfengwu/p/10274289.html
對了說一下哈,現在的代碼不規范...我只是先領着大家入門,后面遇到問題再在上面添加東西,添加的東西越多越不好理解..咱遇到再說
現在看增加一個點擊事件
點擊第一個文本,彈出一個對話框
首先說明
所有的事件函數要求在這個里面寫
<script>
XXXXX
</script>
現在給文本框添加上事件點擊事件
<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
https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.3e3b1deb80xzYz&id=569295486025
https://www.cnblogs.com/yangfengwu/p/10979101.html