前端程式設計概述-HTML-CSS-JavaScript
2020-12-16
概述
前後端開發目前比較流行的是BS 架構，這裡B(Browser)指瀏覽器--前端，S（Server）指伺服器--後端。
前端程式設計目前主要用到的技術包括HTML/JSP +CSS +JavaScript（JS）
JSP是在前後端不分離時候用的比較多，目前主流是前後端分離的框架，所以這裡講HTML +CSS +JavaScript (JS)
網頁主要由三部分組成： 結構（ Structure） 、 表現（ Presentation） 和行為（ Behavior）
HTML —— 結構， 決定網頁的結構和內容（ “是什麼”）
CSS —— 表現（ 樣式） ， 設定網頁的表現樣式（ “什麼樣子”）
JavaScript（ JS） —— 行為， 控制網頁的行為（ “做什麼”）
執行環境：
瀏覽器：
大部分瀏覽器都支援。前端目前都是執行在瀏覽器之上進行展示等。
Chrome、IE、FireFox等
前端開發工具：
Visual Studio Code、hbuilder、sublime text3、WebStorm、Atom、Dreamweaver CC等
其實只要是文字編輯器就可以了，只是沒有這些工具方便。這些工具聽過了很多邊界開發功能，如程式碼提示、補全、自動檢錯等。
前端程式設計：
我們做前端開發，首先就是要定框架，整體框架是什麼樣的，這是我們要先設計 html，
之後我們定義每一塊的樣式，就要設計 css，
最後才是設計網頁的行為JS。
總之就是先設計好HTML和CSS，在做JS。
在系統的講解如何編寫前端程式碼之前，我們先簡單介紹一下怎麼快速入門，先分別介紹一下這3塊。
HTML
html最基本的架子如下：html標籤一般都是 <>開始，</>結束，例如 <html> </html>。
html就是用這種結構一層套一層。
其中 html的註釋是：<!--HTML註釋-->。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>標題</title> </head><body> </body> </html>
包括一個頭部<!DOCTYPE html>，以及<html> </html>整體，該整體中又包含頭和身體兩部分，其中頭 <head></head>，身體 <body></body>。
要學會HTML，主要是瞭解常用的一些標籤，包括 div, p, ul, li, form, input, button, ol, table, h1, h2, h3, h4, h5, h6, a, select, dl, dt, dd, th, td等
說到這裡，我們提前講一下如何引入CSS和JS，包括在程式碼內和程式碼外部引入，當然也可以直接在標籤中指定樣式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標題</title> <!-- 這是註釋 --> <!-- 引入第三方JS --> <script src="./js/jquery.min.js"></script> <!-- 引入自己的JS --> <script src="./js/myjs.js"></script> <!-- 引入自己的CSS --> <link rel="stylesheet" type="text/css" href="./css/mycss.css"> </head> <body>
<!-- 直接在標籤中指定CSS樣式 --> <div style="background-color: red;"> </div> <style type="text/css"> /* 內部CSS樣式 */ </style> <script type="text/javascript"> // 具體的程式碼 </script> </body> </html>
注意：引入JS和CSS既可以在head中，也可以在body中，也可以引入好多個。但是他會按照從上往下的順序去解釋，即後面的相同標籤的屬性不同的話，後面會覆蓋之前的。
CSS
學習CSS，首先要知道CSS的基礎語法，參考https://www.runoob.com/css/css-tutorial.html。
CSS的註釋是： /*CSS註釋*/ 。
CSS主要包括兩大類，一類是HTML的標籤，一類是該標籤的樣式規則。
基礎語法如下：
/* 這裡對應HTML的div標籤，表示該HTML的所有div標籤背景色紅色 */ div { /* 設定背景色為紅色 */ background-color: red; }
舉個例子：
首先是沒有css限定的html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body> <div>1</div> </body> </html>
用Google瀏覽器執行結果如下：
這裡我們修改一下程式碼，加上css樣式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body> <div>1</div> <style type="text/css"> /* 內部CSS樣式 */ div { background-color: red; } </style> </body> </html>
瀏覽器執行結果如下：
關於標籤：這裡主要是標籤的選擇，即我們怎麼對一類標籤或者特定的某個標籤選擇出來。之後再進行樣式設計。
這裡重點學習選擇器，參考https://www.runoob.com/cssref/css-selectors.html
其中比較關鍵的是class選擇器和id選擇器。class屬性可以包含多個，但id有且僅有一個。
關於樣式：
其中比較關鍵的是：
1）知道CSS盒子模型 ，包括內容、padding、border、margin等
2）知道CSS的position、dispaly、float
3）知道不同的標籤有自己的樣式
4) 知道CSS的其他屬性
CSS盒子模型如下所示：