【前端】2017年12月11日 和前端的第一次接觸

前端開發要學習的知識大致可分爲兩類:
一:工具類
ps、編輯器、瀏覽器、編輯器的各種插件、瀏覽器的各種插件等。
二:語言類

前端開發的核心語言分爲三個,分別是:

html<!--超文本標記語言-->  結構
css<!--層疊樣式表-->    樣式
JavaScript<!--腳本語言-->   行爲
用房子來比喻的話是房子主體是用html來完成,只有毛坯房。而加上了css的話即給房子進行了精裝修。

什麼是標記?
標記即我們做了一個標識,標記語言即當我們把一些特定的英文單詞或者是一些英文字母放在標記中,就給這個標記賦予了一定的語義。比如

<html></html>
<></><!--雙標記.雙標籤-->
</><!--單標記,單標籤-->

我的第一個網頁

<html>
    <head>
    <meta charest="utf-8"><!--讓瀏覽器認識中文-->
        <title>我是頭</title><!--網頁標題-->
    </head>
    <body><!--網頁主體-->
        我是身體。
    </body>
</html>

css:
在毛坯房中給某一塊劃分區域,並用div確定區域的大小和樣式
示例:

<div>我是身體</div>

在上述代碼中,我們已經給“我是身體”這句話劃分了一塊區域,只是還沒有給這塊區域進行大小和樣式的控制。
那麼我們現在開始給這塊區域進行樣式的調整。
比如我們現在覺得這四個字非常佔地方,小小的四個字要用很大的空間纔夠他容納。那麼我們給他分配他合適的活動區域。

<div style="width:100px;height:100px;background:red;">我是身體</div>

這樣我們就給他分配了一塊寬100像素,高100像素,背景顏色爲紅色的區域。
【前端】2017年12月11日 和前端的第一次接觸
那麼,我們現在知道了什麼叫樣式,那什麼叫層疊樣式呢?
在div標籤中,我們可以一直不停的給他疊加很多樣式,從寬高,到顏色,到邊框,這些樣式一層一層的疊加在這個區域內,如果有兩個以上相同的樣式時,則以後面的樣式爲準。就像蓋被子一樣,我們蓋兩層一樣大的被子,那麼在被子外面我們看到的肯定是最外面的那層被子顏色而不是裏面的被子顏色。
示例:

<div style="width: 100px;height: 100px;background: red;border: 10px solid yellow; text-align: center;line-height: 100px;transition: 10s;width:200px">我是身體</div>

上面這段代碼中,有兩個width,那麼在展示的時候,以最後面的樣式爲準。

js:
我們的網頁,不單單要好看,還要有一些交互的行爲,比如我們把鼠標移動到一級菜單欄,會顯示出二級菜單欄可供人們進行點擊,也會有一些顏色上的改變,這些就需要用js來進行實現。還是用房子來作比喻的話,js就相當於家電,比如你打開空調的開關,空調就可以開始制熱製冷,你打開電視,電視就會播放畫面可供觀看等。
還是用上面的代碼來進行示例:

<div style="width:100px;height:100px;background:red;transition:1s;" onclick="this.style.width='400px'">

至此。我們就完成了一個最最基本的頁面。

上面這段代碼即表示,鼠標在點擊區域後,一秒內,區域的寬從100px變成400px。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章