1、HTML和CSS

學習Web肯定要知道靜態資源和動態資源：
那什麼是靜態資源？每個用戶看到的內容都相同的資源稱之爲靜態資源，比如網站首頁就是靜態資源，採用的技術有HTML、CSS、JS、JQury；
那什麼是動態資源？每個用戶看到的內容都不相同的稱之爲動態資源，比如購物車，採用的技術有JSP、Servlet、PHP、.net等。
瀏覽器端只能放靜態資源，而且只有上面這四種技術的靜態資源，像IMG圖像、音頻和視頻這三種靜態資源只有在服務器纔有，當然服務器除了包含靜態資源還包括動態資源。
瀏覽器和服務器之間通過HTTP協議連接，需要注意的是服務器存儲的數據是有限的，所以如果想要存儲更多的數據必須要放到新的地方，即數據庫，常見的數據庫有MySQL、Oracle等，在JavaWeb階段，服務器和數據庫之間通過JDBC連接。
初學Web肯定要知道C/S和B/S，前者是客戶端/服務器系統，典型的例子是英雄聯盟等大型遊戲需要先下載軟件即客戶端才能玩，這種系統優點是畫面清晰、用戶體驗高，但缺點就是更新需要停機；後者是瀏覽器/服務器系統，典型的例子是網頁遊戲，這種系統優點是方便，但缺點是畫面模糊、需要靠網速。二者互補，沒有更好之分，但隨着網速越來越快，B/S是趨勢。
首先聊下HTML和CSS這兩種靜態資源：
一、HTML
1、HTML是什麼？（What）
英文全稱是Hyper Text Markup Language，即超文本標記語言。
什麼是超文本？除本文之外的有圖片（IMG）、音頻和視頻。
既然是語言，那是什麼語言？標籤語言。
上面這些解釋都太官方，實際上HTML就是一個由標籤組成的文檔，和一般文檔不同的是這種文檔用瀏覽器打開會自動解析成頁面，這種文檔的後綴名是.html或者.htm，一般推薦是前者。
2、HTML怎麼用？（How）
A、基本結構
既然HTML是由標籤組成的文檔，那想要使用HTML肯定要會使用裏面的標籤，比如第一個標籤就是（大小寫均可，W3C推薦用小寫，未來強制用小寫，具體可以參考菜鳥教程），這個標籤用來介紹這個文檔類型是HTML，接下來是標籤對，裏面放具體內容，內容主要由標籤對和標籤對組成，這兩部分裏面可以放各種標籤對，比如h標籤表示標題、p標籤表示段落和a標籤表示超鏈接等。
B、基本語法
既然HTML也是一種語言，那肯定有語法，HTML語法主要體現在兩個方面，一是標籤寫成標籤對的形式，由起始標籤和結束標籤組成；二是在起始標籤裏可以添加標籤屬性，比如<起始標籤屬性名=屬性值></結束標籤>。
需要注意的是標籤還可以寫成自閉標籤的形式，比如br/是換行符的意思；hr/是畫出一條線的意思（這兩個自閉標籤中/也可以省略）。
還需要注意的是HTML中多個空格、製表符和回車都會合併成一個空格在頁面中顯示，所以如果想要弄成多個空格，在HTML中是使用&nbsp。
C、HTML標籤
（1）標題標籤
從 h1、h2一直到h6這6級。
（2）列表標籤
有ol標籤對錶示有序列表和ul標籤對錶示無序列表這兩種，不管是ol還是ul，列表內具體元素用li標籤對。
（3）圖片標籤
img標籤對錶示圖片，裏面屬性src表示圖片路徑，alt表示替代圖片出現的文字。
（4）超鏈接標籤
a標籤對錶示超鏈接，用於回到頂部或者跳轉到其他頁面，如何回到頂部？創建一個包含id或者name屬性的a標籤對；如何跳轉到其他頁面？在href屬性裏填寫要跳轉的網址即可。
這個標籤不僅可以使用CSS選擇器中的基本選擇器，而且還經常使用高級選擇器，比如僞元素選擇器中的:hover，即鼠標移到該元素之上但沒有點擊該元素時會對該元素樣式進行改變。
（5）表格標籤
table標籤對錶示表格，其中tr標籤對錶示行，td標籤對錶示列，結合行可以弄出單元格，注意和br還有hr區分。
（6）表單標籤
form標籤對錶示表單，但是隻有這個標籤對是不會出現內容，還需要通過一個子標籤input輸入框纔可以，所以表單裏input是重點！需要注意的是input標籤對可以自閉。
知道了input標籤，那屬性有哪些？首先是action+method；其中action表示form表單提交的地址，method表示提交方式，提交方式一共有七種，常用的是get、post這兩種。
還有就是表示姓名、密碼的type+name，姓名和密碼區別在前者使用的type屬性是text，後者是password，注意寫好這兩個後最好用br換行。
怎麼理解type和name？前者是顯示在頁面的類型，後者是提交到服務器拼接參數前的名稱，比如姓名的name一般是username、密碼的name一般是password。

如果是性別這種需要顯示男女的除了type+name，還有value，而且這裏type屬性是radio。

性別採用的單選框，如果是愛好這種多選框，採用什麼屬性？CheckBox。

如果是選擇地點的下拉框怎麼辦？使用select標籤對。

當然還有submit標籤對用於提交表單。
綜上所述，HTML主要知道是什麼和怎麼用即可，而怎麼用裏主要是基本結構、基本語法、常用的標籤對，其中常用標籤對裏的form表單是重點，當然還有HTML文本格式化標籤，比如b表示粗體文本、small表示小號字、strong表示加重語氣、sub表示下標字和sup表示上標字等。
二、CSS

1、CSS是什麼？
提到CSS，不得不提div標籤對，那爲什麼會出現div和css？
因爲HTML常用標籤對裏的表格標籤太死板，特別是複雜場景非常不適合，所以採用div（就是有些複雜場景下使用tr表示行，td表示列，這樣太死板，所以用div來劃分區域），但改一個個div也比較麻煩，所以把樣式提取出來批量修改，也就是css。
那div和css具體是什麼？
A、div盒子模型
div是盒子模型中的一種，還有span和p，這三種標籤對分別屬於塊級元素（每個元素獨立一行）、行級
元素（多個元素在同一行）、塊級元素（也是每個元素獨立一行，p標籤對就是前面提到的段落）。
B、css是層疊樣式表
層疊樣式表的作用是可以批量修改頁面中大量標籤，特別是一些需要進行相同修改的標籤樣式，如果一個個修改肯定麻煩。
2、CSS怎麼用？
1）如何引入CSS？
使用CSS的前提肯定是引入，引入CSS有四種方式：行內式、嵌入式、鏈接式和導入式
（1）行內式

（2）嵌入式

（3）鏈入式

（4）導入式

總結：前兩種是寫在HTML裏，後面兩種是外部引入，最常用的是第三種。
2）CSS選擇器
使用CSS其實就是使用CSS選擇器，CSS選擇器分爲基本選擇器和擴展選擇器兩大類：
（1）基本選擇器
標籤選擇器：針對一類標籤
ID選擇器：針對某一個特定的標籤使用
類選擇器：針對你想要的所有標籤使用
A、標籤選擇器：

如上圖所示，選擇了p標籤對作爲標籤選擇器，其實所有標籤都可以作爲選擇器，而且無論在哪裏都可以用，如果選擇了這個標籤，那所有同名的標籤都會選中。
B、ID選擇器
ID選擇器是用#來定義，ID名自定義。

C、類選擇器
類選擇器用圓點.來定義，類名自定義。

如果是隻想選擇p元素的center呢？在.center前面加上p即可。
總結：標籤選擇器直接用標籤名，不需要自定義名稱，這是CSS最基本的選擇器，雖然方便，但如果想把大量標籤設置成一樣的樣式，那標籤選擇器就比較麻煩，所以一般用id或者class。
那到底是用id還是class？
儘可能的用class，除非特殊情況用id，因爲id是js用的，js通過id屬性得到標籤，所以css儘量不要用id，不然js會很彆扭，還有就是默認有id的元素會有動態效果。
（2）高級選擇器：
基本選擇器只針對單一元素，而高級選擇器是可以對元素進行組合，比如：
A、後代選擇器：用空格隔開

B、子元素選擇器：用大於號隔開

後代選擇器和子元素選擇器看起來一樣？如果是一代是一樣的，但如果是兒子的兒子即孫子，那就不一樣，則前者生效，後者無效。
C、並集選擇器（分組選擇器）：用逗號隔開，即結合上面三個基本選擇器，如
#id,class1,span{
}
D、僞元素選擇器：其實就是在html中預先定義好的一些選擇器，稱之爲僞元素，這是CSS的專業術語。
比如:link是未點擊的狀態；:visited是被點擊過的狀態；:active是被鼠標點擊着的狀態；:hover 鼠標移動到元素之上但是仍然未點擊的狀態。
比如：

注：
1、如下所示是CSS3新增屬性：

那怎麼理解這個屬性？這要從塊級元素的盒子大小說起：
通常一個塊級元素實際所佔寬高度=外邊距（margin）+ 邊界寬度(border-width) + 內邊距（padding）+ 高度（height） / 寬度（width）
如果設置了border-box，實際所佔寬高度 = 設置的高度（height）/ 設置的寬度（width）+ 外邊距（margin）
所以margin是外邊框屬性
2、a標籤
a標籤是用於超鏈接，裏面有href屬性，後面跟網址。
a標籤本來就是行內元素，所以默認是橫向排列的。