# 目標 - 嘮叨的話 - 計算機基礎知識 - 軟件開發流程 - 前端核心技術 - 互聯網原理 - HTML初步認識 # 嘮叨的話 >整套全棧體系寫完,應該分為三個階段, 前端基礎,前端進階,和全棧框架. ## 循序漸進,腳踏實地 第一階段是前端基礎, 內容都是后期日常工作中最基礎最本能需要的東西.切記扎實基礎. 基礎內容包含如下三部分: 1. HTML 2. CSS 3. JavaScript 這也是網頁的"三大劍客",最核心的技能! ## 學習看文檔 生活中技藝的學習起步階段都是學習前人的經驗. 我們計算機編程更是如此, 現有的知識體系先學習,學懂, 精通后靈活的組合現有的技術就能創造新的東西了. 兩個前端手冊網站(也叫API幫助文檔),必須推薦下. W3School: [W3School](http://www.w3school.com.cn/) 菜鳥教程: [菜鳥教程](http://www.runoob.com/) ## 練習再練習 成才的關鍵我想可能只是"唯手熟爾" # 計算機基礎知識 >使用電腦看電影,打游戲應該是我們普通人最熟悉的了,可即將成為一個專業程序員還是需要簡單的為大家整理下必備的技能. ## 文件和文件夾管理 - 熟練掌握文件和文件夾的管理 1. 創建 2. 刪除 3. 重命名 ( 快捷鍵 F2) 4. 復制 (Ctrl +C) 5. 剪切 (Ctrl +X ) 不多說 (^__^) 大家都會. - 熟練掌握"文件擴展名/后綴名" 的意義 在window下,所有的文件名都有兩部分組成,語法: 文件名.擴展名 比如 *.jsp 是圖片格式, *.mp3 是音樂格式, *.doc 是word文檔,*.txt 是文本格式 `一般,操作系統是不顯示擴展名的,需要我們自己設置` 我以win7舉例: 雙擊計算機-->工具---文件夾選項-- 查看---去掉勾選:"隱藏已知文件擴展名"  win8 更簡單哦,自己琢磨或百度下! - 會使用桌面,知道"快捷方式"的概念 注意,桌面是一個特殊的文件,位置在: `C:\Users\Administrator\Desktop`,所以后期重做系統的時候移動要記得備份桌面的重要數據哦,不然會丟失文件的! 快捷方式是:程序快速打開的一個入口,雙擊就能直接打開程序,任意的軟件或文件夾都可以創建快捷方式.下面是為 畫圖,在做桌面創建一個快捷方式  所有快捷方式,都有一個小箭頭圖標.就是一個快捷入口,所以刪除這個圖標,程序還在.  ## 特殊按鍵和快捷鍵 鍵盤上出除了字母,數字以外,還有一些特殊的功能按鍵: ctrl, shift, alt tab 等 - Ctrl 是英文 `control` 控制的意思,. 單獨按沒有作用,要和其他按鍵一起才有作用比如:ctrl+C ,同時按住 ctrl鍵 和 C 鍵, 這是復制功能. ctrl+V 是粘貼 - Shift 是英文 `Shift` 換擋的意思, 按下這個按鈕,打字母,打出的就是大寫字母. - Alt 是 `alternate` 調整的意思. 和ctrl 一樣,自己沒啥用,需要和其他按鍵一起按下才有用.比如 alt+F4 標示關閉當前窗口. 老板來了,正在玩游戲可以按alt+F4 快速關閉窗口 - Tab: 是 `Table` 制表符的意思,寫文檔時按下此鍵盤可以自動縮進一些空格! 又比如:在word中同時打開兩個文檔可以用 ctrl+tab 鍵在兩個文檔之間切換 必須熟悉以下快捷鍵 > ctrl+c 復制 ctrl+v 粘貼 ctrl+x 剪切（就是移動文件，在原來的文件夾ctrl+x一個文件，然后在新文件夾中ctrl+v粘貼） ctrl+tab 切換（具體切換什么，要看是什么軟件） alt+F4 關閉程序 F2 重命名 F5 刷新，比如看網頁的時候，想刷新網頁，按f5 ctrl+z 撤銷，就是這一步干錯了，就ctrl+z撤銷 windows+E 打開資源管理器 windows+D 顯示桌面 > ## 打字速度 打字速度是必備的素養！ 1） 嚴禁二指神功，必須養成正確的指法；比如打`{`時，要按住`shift+[`。 正確的按鍵方法，是左手小拇指按住左邊的`shift`鍵，右手中指按`[`鍵。 2） 金山打字通。前幾天內容,簡單,沒啥事兒就用`金山打字通`練習打字。 不要練習中文打字，只練習英文打字就行了。英文文章一定要練習到`每分鐘100字`以上 一定把打英文速度提上來,不然跟不上老師講課節奏的! # 軟件開發流程 >開發流程中我們就處于中間環節,將設計師的網頁圖片轉化為代碼,然后交給后臺程序員,由他們編寫服務器端代碼,講頁面上的靜態數據替換為動態數據! 我們需要和設計師溝通,需要和產品經理溝通,需要和后臺工程師溝通!  設計師會給我們一張網頁設計圖,這僅僅是一張圖片哦,不能點的!  而我們前端工程師需要把它變成這樣.......,以下大家看到的是網頁"源代碼",瀏覽器打開網頁按F12可以查看到  # 我們主要學習哪些內容?  - HTML 語言：負責網頁的結構，又稱語義層 - CSS 語言：負責網頁的樣式，又稱視覺層 - JavaScript 語言：負責網頁的邏輯和交互，又稱邏輯層或交互層  # 互聯網的原理 > 上網就是請求數據 ## 上網就是請求數據 網頁上的內容,怎么就被我們看到了? 什么是上網? 我們通過一個實驗看以下. 我們每個人電腦都有一個神秘的文件夾,`C:\Users\Administrator\AppData\Local\Microsoft\Windows\Temporary Internet Files` 這個文件夾角`臨時文件夾` 我們清空這個文件夾中的全部內容  當我們打開IE瀏覽器時,我們看幾個網頁.結果,這個文件夾中又多了很多東西:  上網時,是有真實的物理文件傳輸的,所以我們經常感覺第二次打開頁面比第一次快,因為第一次打開網頁時,所有的圖片等都已經保存過了.所以也能解釋,為什么每次360都能清理一堆垃圾. 我們現在可以回答剛才的問題了 '上網就是什么': 上網就是請求數據,就是文件傳輸. >服務器上存放著網頁相關的文件,包括 html文件,css文件,js文件,圖片等,當我們打開瀏覽器,輸入網址,我們的計算機就會對這些文件發出HTTP請求.服務器接到請求后會把這些文件通過HTTP協議,傳輸到我們的計算機中(保存在臨時文件夾中),謝謝文件,講在我們計算機本地的瀏覽器,進行 渲染,呈遞. 也就是說，本來人家文件好好的在服務器上睡大覺，你一輸入網址，就把這些文件傳輸到本地計算機來了。這些文件在本地的計算機中，進行渲染。 ## 服務器Service - 服務器就是計算機，只不過比咱們用的筆記本的配置牛逼了很多，并且24小時不斷電，不關機。 - 服務器上存儲著網頁的相關文件。一旦有訪問者瀏覽網站，服務器就將發送這些文件給訪問者。 - 服務器一旦關機，網站就無法訪問了。 - 服務器的更多知識，我們在Ajax課上將深入學習。基礎課程我們只需要知道，上述知識即可。  ## 瀏覽器  瀏覽器是安裝在客戶的電腦里面的，是一個軟件，能夠讓用戶上網。 瀏覽器眾多而且有版本之分，有瀏覽器兼容問題，我們的課程將詳細介紹瀏覽器兼容問題。 ## HTTP >超文本傳輸協議，Hypertext Transfer Protocol。 這是一個文件的傳輸協議，我們上網的時候，所有的文件都是通過HTTP這個協議，從服務器上傳輸到客戶的電腦里面的。 現在，我們只需要知道這些即可，我們的Ajax課程上，將詳細講解HTTP這個東西哦~ `承諾一下，如果大家學習勁頭足，我會抽時間講如何購買www域名和空間` 現在我們必須要樹立一個思想，就是每一個網址，都對應著確定的服務器上的文件。 比如網址： http://www.zzy.com/1.html 就是服務器上面的1.html文件 http://www.zzy.com/ 看似沒有精確到一個文件，但是有一個規定，就是index.html是默認的首頁文件。 index就是英語“目錄”的意思。 http://www.zrgk.com/aaa/b.html 服務器上面有一個aaa文件夾，這個文件夾里面有一個b.html文件。  >上面都沒聽懂沒事，就記住： 網頁是真實物理的文件。并且一個網頁是很多的物理文件組成的：html文件、圖片文件、js文件、css文件。這些文件要通過特殊軟件才能上傳到服務器上。然后就能讓用戶看了。用戶通過瀏覽器，訪問網址，服務器上面的文件就會通過http請求悄悄地傳輸到用戶的電腦中的臨時文件夾中，在用戶的電腦中執行、渲染、呈遞 > # HTML初步認識 ## 認識什么是純文本文件txt windows中自帶一個軟件，叫做記事本。記事本保存的文檔格式就是txt格式，就是英語text的縮寫。術語上，稱呼這個文件叫做“純文本文件”。 我們現在要花15分鐘，好好研究憑什么這個txt文件叫做“純文本文件”。 我們做了一個小實驗，`發現doc這個文件能夠保存內容和樣式，字有紅的、藍的。傳給大家看，是一樣的。` 但是txt格式有點不同：  `txt文件，只能保存文本內容，是無法記錄文本樣式的。` 所以，doc和txt存儲同樣的內容，doc比txt大.  > 純文本文件就是這樣的文件： 1） 只有文本，沒有樣式； 2） 用記事本等純文本編輯器可讀，不是亂碼 html、css、js都是純本文的。 > ## HTML是負責描述文檔語義的語言 >HTML是英語HyperText Markup Language的縮寫，超文本標記語言。 .html,或.htm 就是網頁的格式。 現在，來制作我們人生中第一個網頁， 新建一個txt文件：  也就是說，html本質上和txt沒有任何區別，他們都是純文本文件。 我們強行把這個文件的拓展名，從txt更改為html，我們會發現小圖標就變成瀏覽器的小圖標了：  在“打開方式”中，用記事本可以編輯它。 現在要養成 `編輯器里面編輯 → 保存ctrl+s → 瀏覽器里面刷新F5` 的習慣。  html到底干嘛用的，看下面的例子：  純文本txt文件是不能描述文檔的語義的，文檔中不知道誰是主標題，誰是副標題，誰是段落。所以html應運而生。 下面就是一個html文件的演示，就是通過html標簽對兒，來給文本增加語義： ``` <h1>Angelababy簡介</h1> <h2>基本信息</h2> <p>楊穎（Angelababy），1989年2月28日出生于上海，13歲時移居香港，中國影視女演員。</p> <p>2009年主演電影《全城熱戀》。2012年，憑借愛情片《第一次》獲得第十三屆華語電影傳媒大獎“最受矚目女演員獎”。2013年1月，《南都娛樂周刊》舉辦新生代四小花旦的評選活動，楊穎以總分70分的綜合得分與劉詩詩、楊冪、倪妮共同當選為新一代“四小花旦”；同年在徐克導演的影片《狄仁杰之神都龍王》中擔任女主角，并且獲得第21屆北京大學生電影節最受歡迎女演員獎；4月，Angelababy主演電視劇《大漢情緣之云中歌》。2014年加盟綜藝節目《奔跑吧兄弟》并主演電影版；同年主演顧長衛導演的電影《微愛之漸入佳境》，票房突破2.8億。2015年5月參演好萊塢電影《獨立日2》；7月，主演電影《擺渡人》。 </p> <h2>早年經歷</h2> <p>1989年2月28日，Angelababy出生在上海，中文名楊穎。楊穎自小隨家人到上海定居，在上海的演藝學校學演戲及跳舞。13歲時，楊穎回香港加入了Talent Bang，還擔任Viva Club Disney主持。</p> <h2>個人生活</h2> <p>2015年5月27日，黃曉明和Angelababy（楊穎）在青島民政局領證完婚。</p> <p>2015年10月8日，黃曉明和Angelababy在上海展覽中心正式舉辦婚禮。上午8點，Angelababy工作室曝光了一兩人的婚紗照，照片中，兩人以巴黎地標建筑為背景，浪漫親吻。</p>` ``` ``` html提供了很多標簽對兒，可以給文本增加不同的語義。比如： <h1> </h1>標簽對兒，主標題。 <h2> </h2>標簽對兒，二級標題。 <p> </p> 標簽對兒，普通段落。 ```` >現在的業界的標準，網頁技術嚴格的三層分離：html就是負責描述頁面的語義；css負責描述頁面的樣式；js負責描述頁面的動態效果的。 所以，html不能讓文字居中，不能更改文字字號、字體、顏色。因為這些都是屬于樣式范疇，都是css干的事兒；html不能讓盒子運動起來，因為這些屬性行為范疇，都是js干的事兒。 html只能干一件事兒，就是通過標簽對兒，給文本增加語義。這是html唯一能做的。 `html中，除了語義，其他什么都沒有。` html是一個純本文文件（就是用txt文件改名而成），用一些標簽來描述文字的語義，這些標簽在瀏覽器里面是看不到的，所以稱為“超文本”，所以就是“超文本標記語言”了。 所以，接下來，我們肯定要學習一堆html中的標簽對兒，這些標簽對兒能夠給文本不同的語義。 ``` 標簽對兒是由起始標簽和結束標簽組成的： <h1>Angelababy簡介</h1> <h1> 起始標簽 </h1> 結束標簽 比如，面試的時候問你，h1標簽有什么作用？ 正確答案：給文本增加主標題的語義 錯誤答案：給文字加粗、加黑、變大 ````` # html結構和開發工具 一款合適的開發工具能加快我們的開發效率! 可以根據自己習慣任意選擇! 百度網盤下載地址: 工作中常用開發工具分兩大類： 1. 小巧的:文本編輯器 Notepad++, Sublime[推薦使用] 3. 大型軟件 IDE(集成開發環境) 圖形界面操作簡單,可集成大量插件! 提示豐富! Hbuilder[國產,開源免費推薦使用] VSCode: 微軟,開源免費,可看源碼 [推薦使用] WebStorm: 這個收費! 打開太慢!  [點我從官網下載](http://www.dcloud.io/) 網盤地址：https://pan.baidu.com/s/1sjAi8D8gZZzbWrCjAleg9A 密碼：hgzl  骨架抽象出來 ``` <html> <頭> 中文字符集 <標題>標題</標題> </頭> <主體> 各種標簽 ,用戶可見內容 </主體> </html> ``` head標簽中，描述網頁的配置；body中的內容，才是用戶可以看見的內容。 # 總結 - 踏實,練習,學看API - 計算機基礎知識 - 軟件開發流程 - 前端核心技術 - 互聯網原理 - HTML初步認識 # Good End !!!