Html&CSS簡介

**話說從今天開始,我們就要開始學習前端的內容啦！默默的問自己一句,有木有很開森！～
好,話不多說,接下來我們進入正題：**

首先,我們將以對Html和CSS的了解為目標,對此作一個簡介;
溯古貫今的扒一扒我們的整個學習歷程：

第一個問題將從我們學前端時學什么以及學完了能做什么來展開講述：

那么我們說,我們學完了能做什么呢？
哦,其實不論是我們學前端的、還是學Java、PHP的那幫哥們,我們的最終目的就是為了做軟件;
那么既然我們要開發軟件,首先我們得知道軟件是個什么樣子;

所以第二個問題我們將從軟件架構的角度來看一下軟件的樣子

因為是入門,所以上圖中的內容不得不詳盡的描述一下;當然,其實這些內容對我們來說也相當重要;
首先,軟件分為兩種架構:分別是基于 客戶端/服務器 的 C/S 架構和基于 瀏覽器/服務器 的 B/S架構;
    先說C/S架構:
        一般來說,我們平常使用的軟件都是C/S架構 - 比如說QQ、360、Office以及我們正在使用的XMind;
        先看C:
            C指的是客戶端,而所謂的客戶端也就是我們在電腦上看到的一個一個的圖形化界面實體,那么也就是說我們是通過客戶端來使用軟件的;
        再來看S:
            S指的是服務器;
            首先,就拿我們平時用的QQ來舉例,假如說沒有服務器或者干脆說沒網那么我們的消息就發不出去,軟件就不能用了;
            而服務器是用來處理業務邏輯的,我們要給某個人發消息,那么發給哪個人就是業務邏輯;
            那么其實我們發的消息是先發到了服務器上,然后服務器經過判斷以后再轉發給目標對象的;所以綜上所述,服務器也是不可或缺的;
            另外多提一點,服務器可不是裝在我們電腦里邊的,但是它究竟在哪兒的這個問題也不是我們需要關心的內容;
        說完了C/S架構是什么,接下來談一下C/S架構軟件的特點:
            首先,軟件使用前必須得安裝;
                即使不安裝,那么我們為了以后要使用這個軟件是不是至少也要把安裝包下載下來放到電腦的硬盤里是吧;
            另外,軟件更新的時候,服務器和客戶端需要同時更新;
                先來看我們使用的客戶端 - 是不是在我們使用軟件的時候可能時不時的碰到這么一種情況:軟件會提示我們下載更新;
                然后看服務器 - 既然客戶端要更新,那么肯定伴隨著原有功能的修改優化以及新功能的添加;那么我們又說這些功能的業務邏輯是由服務器來處理的,所以軟件更新的時候必然是客戶端和服務器同時更新的這么一種情況;
            然后,軟件不能跨平臺使用;
                先來解釋一個概念 - 平臺:平臺的意思就是操作系統,所以我們說不同的平臺說的就是像Windows、Linux、MacOS、Android以及IOS等不同的操作系統;
                不過你可能要問了,我的電腦上有QQ,而且我的Android手機上也有QQ不是？哈哈,其實我反過來問你,你電腦上的那個QQ能用在你的手機上了不？反之亦然;
                所以說如果要跨平臺使用軟件,是不是需要針對不同的平臺去開發這款軟件?可想而知的是,這樣開發成本也就越來越高了;
            最后,軟件客戶端和服務器通信時采用的是自有協議,相對來說比較安全;
                同樣的先解釋下什么是協議 - 其實協議就如同我們看諜戰片時地下黨同志間發電報用到的那個密碼本;
                有了這個密碼本,那么客戶端發送給服務器的消息,即使被截獲了那么對方也解析不出內容來呀？所以說,自有協議在安全性上就作了很好的保證;
    其次,對比來看B/S架構:
        首先,S同樣是指服務器;
        重點來看B:
            首先,B/S架構的軟件其實也是C/S,只不過B/S架構的軟件,我們使用瀏覽器作為軟件的客戶端;
            那么也就是說,我們是通過使用瀏覽器訪問網頁的方式來使用軟件的;
            到這里,有的同學可能就要問了,我們通過瀏覽器訪問的不是網站嗎？這咋搖身一變成軟件了呢？
                其實在早期我們的網站確實只能稱其為"網站",因為那個時候我們只能看只能瀏覽網頁;
                但是到了現在,就拿我們最最熟悉的淘寶這個網站來看,是不是我們不但能瀏覽網站上展示出來的商品,而且還能點擊查看詳情、下單購買并支付甚至是查看快遞到哪了呀～
                所以,現在的網站,早就超出了網站本身的概念,它上升到軟件的概念層次上也就不足為奇了;
                而且有很多像這樣的同類網站 - 比如京東、12306、知乎和新浪微博都能夠稱得上是基于B/S架構的軟件了;
        緊接著談一下B/S架構軟件的特點:
            首先,它不需要安裝;
                因為我們通常是這樣子去訪問網站的 - 打開瀏覽器->輸入網址->然后鍵入enter就可以訪問該網站了;這也就順應了上邊所說的我們是通過瀏覽器來訪問基于B/S架構的軟件的;
            其次,軟件更新時,客戶端不需要更新;
                因為我們能肯定,現在的淘寶網站,絕逼不是阿里開發的初版;而且,每次網站更新的時候, 它也并沒有提示我們讓我們刷新啥的來更新網站;而是我們每次打開網站的時候它就已經這樣了;
            然后最重要的一點,軟件可以跨平臺,只要系統中有瀏覽器,就可以使用;
                所以是不是極大的節省了開發成本？！
            最后補充一點:B/S架構的軟件,客戶端和服務器之間通信采用的是通用的HTTP協議,相對來說不安全;
                這里借用青島地鐵廣告一波先：知道您懂得,但是別忘了！
                首先,這個問題是不是一個可以解決的問題？這個協議不安全,但是我們是不是可以通過在代碼中加密的方式來提升軟件的安全性？
                另外,官方是不是又給我們提供了更加安全的https協議來使用？
                [別問我什么是https協議,我是不會告訴你它是基于http添加了一個安全套接字搞成的～]

上面說完了做什么,下面就是怎么做了 - 所以第三個問題,看一下軟件的開發流程

如上圖所示,先大致描述一下軟開流程:
    1. 網頁設計師根據需求設計網頁,要知道這一步得到的也僅僅是張圖片而已;
    2. 就是作為前端工程師的我們要做的事情了,即將第一步的圖片轉化成靜態網頁;
    3. 把我們寫好的靜態網頁交給后臺,變靜態網頁為動態網頁;
接下來說一下其中可能涉及到的其他問題:
    1. 前面說到我們需要把寫好的靜態網頁交給后臺,那么問題來了:假如說我們的代碼寫的足夠漂亮,結構、表現以及行為三者分離簡直連自己都能被折服;
       但是,我們知道,后臺那幫哥們一般都是一幫不太講究的人,怎么說呢,這要從他們怎么寫代碼來談,而他們寫代碼一般就是怎么方便怎么來,所以這常常導致了我們寫的很好的代碼到最后在他們手里被改的面目全非;
    2. 其實,上面說的只是傳統的前端工程師所采用的與后臺交接的方式;
       那么到了現在,為了避免這個問題,作為前端工程師的我們干脆就不再把代碼交給后臺工程師,而是我針對所要的數據給后臺工程師提需求,通過后臺工程師提供的接口來展示數據的一種方式了;
    3. 另外,我們知道我們在學習前端的過程中需要學習JavaScript這門語言,它用來處理頁面跟用戶的交互效果;除了它以外,還有一門語言叫做Node.js,那么它是js用來寫服務器的,那么我們前端正好會js,所以到現在我們就可以做到讓后臺那幫哥們徹底滾蛋了;
    4. 可想而知,如果想要達到這個技術水平,那對我們要求就會非常之高了,因為不但要求我們會寫頁面,而且又要會寫后臺代碼,除此以外還要會點設計;

那這就不免會引出第四個問題：前端技術好學嗎 ？

1. 我們選擇前端,可能就是因為覺得它好學;
2. 其實這是我們的一個誤區,因為我們覺得前端好學,其實是跟Java相比較來看的;
   我們說Java難,其實Java是入門難,只要入了門,那作為Java工程師的他們,往后的道路將會很平坦、一馬平川;
3. 而對于前端工程師的我們呢:
   首先,如前所述:我們需要和設計師以及后臺工程師做銜接,所以這兩方面的技術我們都要懂一些;
   另外,因為接下來我們開始寫頁面,而寫頁面的特點是所見即所得,所以我們會覺得很簡單、另外后面在學習CSS和JavaScript的時候也是如此,但是！越往后學就感覺越學不過來、越往后學越覺得難！
   其實這也是前端內容的一個特點,所以至此送給在座的各位一句砥礪人心的話:既然選擇了做程序猿我們就要不斷的學習,不斷的汲取知識！

先前說我們需要學習的內容有好多,所以接下來問題又來了 - 我們到底要學什么呢？

首先,根據W3C標準,一個網頁主要由三部分組成 - 結構、表現及行為;
1. W3C是用來定義網頁開發標準的一個組織;
2. 結構、表現及行為又對應了三種技術 - Html、CSS、JavaScript;
3. 接下來以人體為例貫釋下什么是網頁中的結構、表現及行為;
   3.1.結構類似于人體的骨架,定義了人體中的各個部分 - 頭、肩、胳膊、腿...
       而在網頁中Html用于定義網頁的標題、段落、圖片以及超鏈接, 它們就表達了網頁的結構;
   3.2.另外我們知道,人體光有骨架是不可行的,如果大街上走的都是一個一個骨架的話,想想都覺得慎得慌～
       所以,我們還需要給他貼上皮膚、穿上衣服打扮的好看一些;
       那么在網頁中CSS就用于描述它的表現 - 也就是我們所看見的東西,比如文字的大小、背景色...
   3.3.那么現在假如說人有了骨架、皮膚,穿上了衣服化好了妝,但是躺在床上不能動的話能不能行?當然不可以！至少還是挺嚇人的～
       所以,我們還需要讓他動起來～
       而我們在網頁中,使用JavaScript來處理用戶和瀏覽器之間的交互效果,比如說點擊按鈕彈出一個對話框、點擊按鈕顯示一個動畫...

那么緊接著總結一下我們本階段的學習內容～

這一階段,我們學習html和css的基礎知識,也就是們所說的so easy的那部分;
主要內容如下：
    1. Html
    2. CSS
    3. 網頁布局

另外,提一下這個階段過程中我們要用到的工具：

學習HTML和CSS開發我們不需要太復雜的工具尤其是前一階段，我們主要使用的工具有：
    1. 瀏覽器 - 火狐、IE、Chrome;
    2. 編輯器 - 記事本、NotePad++、HBuilder;
    3. 調試工具 - FrieBug;
    4. 圖片工具 - PhotoShop;

不要著急,這里借用我們”開大會”時老板的一個口頭禪 - 接下來我挑重點的說,再有個兩三分鐘吧,說完了我們下班～

前面我們提到了一個組織:W3C - 萬維網聯盟:
    萬維網聯盟World Wide Web Consortium;
    W3C專門為了定義網頁相關的標準而成立;
    W3C定義了網頁中的HTML、CSS、DOM、 HTTP、XML等標準;
另外,我們還需要了解的另外一個組織是 - WhatWG：
    網頁超文本應用技術工作小組(WHATWG);
    是一個以推動網絡HTML5標準為目的而 成立的組織。在2004年，由Opera、 Mozilla基金會和蘋果這些瀏覽器廠商組成;
    好,這些都是無關重要的內容,大家可以下班啦～