Java Web的學習是需要一定的計算機基礎的，主要有前端基礎和Java基礎和一定的網絡基礎，這些基礎知識還是需要掌握到一定的程度的。
今天我們先來一起看下前端基礎，主要包含HTML(超文本標記語言)，CSS(層疊樣式表)，JavaScript。
首先，前端知識有什麼疑惑，可以到w3School中查看，鏈接。
1.超文本標記語言–HTML
HTML是英文Hyper Text Markup Language的縮寫，中文譯爲“超文本標記語言”，其主要作用是通過HTML標記對網頁中的文本、圖片、聲音等內容進行描述。
HTML是爲“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種標記語言。 即使現在Web發展飛速，但是瀏覽器上展示的網頁還是基於HTML的，前端的開發也離不開HTML，下面我們來一起簡單的回顧一下知識。
1.1 HTML結構
一個HTML頁面主要有兩部分組成，第一部分爲最開始的文檔類型標記，其次爲html根標記，每個標記基本上都是成對出現的，比如<html></html>，根標記中有head和body兩個部分，頁面上顯示的內容主要是在body部分。當然標記也有單獨出現的，比如<br />，<input />。
1.2文本控制標籤
1.3圖像標籤
1.4表格標籤
1.5表單標籤
其中method屬性用於設置表單數據的提交方式，其取值爲GET或POST，其中，GET爲默認值，這種方式提交的數據將顯示在瀏覽器的地址欄中，保密性差且有數據量限制，而使用POST提交方式不但保密性好，還可以提交大量的數據，所以開發中通常使用POST方式提交表單。
關於Get和Post的區別，更詳細的可以參考下面這篇文章。
type屬性爲其最基本的屬性，取值有多種，用來指定不同的控件類型，主要如下圖所示。除type屬性外，控件還可以定義很多其他屬性，其中，比較常用的如id、name、value、size，它們分別用來指定input控件的ID值、名稱、控件中的默認值和控件在頁面中的顯示寬度。
1.6列表標籤
1.7超鏈接標籤
target屬性用於指定頁面的打開方式，其取值有_self和_blank，其中_self爲默認值，意爲在原窗口打開，_blank爲在新窗口打開。
1.8div標籤
div可以說是我們最常用的一種標籤了，<div>標記簡單而言就是一個區塊容器標記，可以將網頁分割爲獨立的、不同的部分，以實現網頁的規劃和佈局。在HTML頁面中，它以<div>開頭，並以</div>結尾，在<div>與</div>之間可以容納段落、標題、圖像等各種網頁元素，也就是說大多數HTML標記都可以嵌套在<div>標記中，並且<div>還可以嵌套多層<div>。
在一個div中，裏面的內容可以相對獨立，但是如果嵌套的div也可以集成父div的一些樣式，並且可以對每個div單獨設置樣式，學好並用好div是非常有必要的。
2.層疊樣式表–CSS
CSS 是 Cascading Style Sheet 的縮寫，譯作“層疊樣式表單”，是用於(增強)控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。在實際開發中，主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。示例如下：
關於css我們主要講解一些樣式屬性和選擇器（即如何把樣式加到目標標籤上）。下面是一些常用的樣式屬性。
對於css選擇器主要有id選擇器、類選擇器、標記選擇器和屬性選擇器：
當然還有其他更多的樣式和別的選擇器，我們這裏因爲篇幅有限，只介紹幾種最常見的。
還有就是，頁面中使用css有三種方式：1.嵌入式，在html中使用style標籤包裹，一般寫在head中；2.內聯式，直接寫在標籤中，使用style屬性，樣式之間使用分號分隔；3.鏈接式，在HTML中使用link標籤引入。這三種方式的優先級是內聯>嵌入>鏈接，也符合了就近原則。
3.JavaScript基礎
這部分主要分爲兩部分來介紹，首先介紹文檔對象模型（DOM），然後簡單的介紹下JS的語法，最後演示下JS的使用。
3.1DOM基礎
DOM是Document Object Model（文檔對象模型）的簡稱，是W3C組織推薦的處理可擴展標誌語言的標準編程接口，它可以以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構。
W3C中將DOM標準分爲3個不同的部分：核心DOM、XML DOM和HTML DOM，其中核心 DOM 是針對任何結構化文檔的標準模型，XML DOM是針對XML文檔的標準模型，而HTML DOM是針對HTML文檔的標準模型。
每個元素被稱爲一個節點，直接位於一個節點之下的節點被稱爲該節點的子節點（childNode），直接位於一個節點之上的節點被稱爲該節點的父節點（parentNode），具有相同父節點的兩個節點稱爲兄弟節點（siblingNode），DOM也稱爲DOM樹，其結構是樹狀結構。
我們可以通過下列兩種方式獲得節點。
在頁面中可以通過dom獲取節點，並控制節點，如獲取節點的值、設置節點的值，如下圖的操作:
3.2JavaScript基礎
頁面中引入JS分爲兩種方式，一是頁面上嵌入，使用script標籤包裹；二是鏈接式，通過link標籤引入外部js文件。
下圖爲js中的一些基本數據類型：
但是，js是一種弱類型語言，統一使用var來創建命令，在聲明變量時，不需要指定變量的類型，變量的類型將根據變量的賦值來確定。不像Java等強類型，創建一個變量時需要指明變量的類型，但是js這樣也會帶來一個問題，就是變量值的判斷問題，需要前後端做好約束，不能隨意更改。其變量定義語法如下：
js中的運算符和別的語言中的一致，主要包含算術運算符（+, -, *, /, ++, --, %等），比較運算符（>, <, ==, ===等），複製運算符（=，+=，-=等），邏輯運算符（!, ||, &&等），位運算符（&, |, ~, ^, >>, <<, >>>等），還有唯一的三元運算符條件運算符（?:）。
js中語法結構也同樣是分爲三種：順序結構、條件結構、循環結構。
對於順序結構我們就不提了，條件語句就是if和else、else if的組合，其語法如下：
- 使用 if 來規定要執行的代碼塊，如果指定條件爲 true
- 使用 else 來規定要執行的代碼塊，如果相同的條件爲 false
- 使用 else if 來規定要測試的新條件，如果第一個條件爲 false
其使用實例如下：
條件結構還有switch，其用法和Java基本相同，語法如下：
循環結構也和Java中的語法類似，主要有for、while、do while。我們簡單的瞭解下for的用法：
3.3JS的使用
如果說一個網頁頁面是一個花園，Html就是花園中信息的載體，比如玫瑰花、月季花、狗尾巴草等；CSS就是一個個神奇的魔法，可以讓玫瑰編程白色、紅色、紫色等等等；而JavaScript可以說是整個花園的魔法師了，他可以在花園裏變出新的花朵，也可以讓某些花變得無影蹤，還可以通過控制css讓紅色的花變爲粉色，下面讓我們看下js的簡單用法和強大功能。
首先就是定義函數了，js也可以像Java一樣定義函數，供頁面中調用。其語法如下：
定義好的函數可以在標間中新增onclick屬性綁定，還可以在js中進行調用。
通過js在頁面上新增、刪除節點：
我們可以通過chrom瀏覽器的開發者工具（F12或者右擊->檢查）查看頁面上的html結構變化。
也可以通過js來控制標籤的樣式，語句如下，style後跟的爲css的樣式屬性。
document.getElementById('div').style.color = "red"
又到了分隔線以下，本文到此就結束了，本文內容全部都是由博主自己進行整理並結合自身的理解進行總結，如果有什麼錯誤，還請批評指正。
Java web這一專欄會是一個系列博客，喜歡的話可以持續關注，如果本文對你有所幫助，還請還請點贊、評論加關注。
有任何疑問，可以評論區留言。