網頁的基本資訊：
<!DOCTYPE html>
DOCTYPE聲明：限制HTML文檔結構，檢驗是否符合相關WEB标準，同時告訴浏覽器，使用哪種規範來解釋這個文檔中的代碼。DOCTYPE聲明必須位于HTML文檔的第一行。
<title>标簽：描述網頁的标題。
<meta>标簽：使用該标簽描述網頁的摘要資訊，包括文檔内用類型，字元編碼資訊，搜尋關鍵字，網站提供的功能和服務的較長的描述等。
屬性：
gb2312:簡體中文，一般用于包含中文和英文的頁面。
ISO-885901：純英文，一般用于隻包含英文的頁面。
Big5:繁體，一般用于帶有繁體字的頁面。
UTF-8：國際性通用的字元編碼，同樣适用于中文和英文頁面。和gb2312編碼相比，國際通用性更好。
網頁基本标簽：
| <h1>~<h6> | 标題标簽 |
| <p></p> | 段落标簽 |
| <br/> | 換行标簽 |
| <hr/> | 水準線标簽 |
| <em></em> | 斜體标簽 |
| <strong></strong> | 字型加粗标簽 |
| <!--注釋内容--> | 注釋 |
| 空格 | |
| > | 大于号 |
| < | 小于号 |
| " | 引号 |
| © | 版權符号 |
圖像标簽的基本文法:
<imgsrc=”圖檔位址”alt=”圖像的替代文字” title=”滑鼠懸停提示文字”width=”圖檔寬度” height=”圖像高度”/>
超連結标簽的基本文法:
<ahref=”連結位址” target=”目标視窗位置”>連結文本或圖像</a>
href表示連結位址的路徑 target指定連結在哪個視窗打開，常用值有_self(自身視窗)，_blank（建立視窗）。
錨連結基本文法:
<aname=”marker”>目标位置乙</a> <a href=”#marker”>目前位置甲</a>
三種清單的文法：
| 無序清單 | <ul> <li>第一項</li> <li>第二項</li> </ul> |
| 有序清單 | <ol> <li>第一項</li> <li>第二項</li> </ol> |
| 定義清單 | <dl> <dt>标題1</dt> <dd>第一項</dd> <dt>标題2</dt> <dd>第一項</dd> </dl> |
表格的基本結構：
1. 單元格 :單元格是表格的最小機關，一個或多個單元格縱橫排列組成了表格。
2. 行 ：一個活多個單元格橫向堆疊形成行。
3. 列：由于表格單元格的寬度必須一緻，是以單元格縱向排列形成了列。
建立表格的步驟：
1. 建立表格标簽<table>…<table>。
2. 在表格标簽裡建立行标簽<tr>…<tr>,可以有多行。
3. 在第一行标簽<tr>…<tr>裡從建立單元格标簽<th>…<th>,用于建立表格标題。
4. 在行标簽<tr>…<tr>裡建立單元格标簽<td>…<td>,可以有多個單元格。
5. 為了顯示表格的輪廓，一般還需要設定<table>标簽的border邊框屬性，指定邊框寬度。
| 表格的基本文法 | <table> <tr> <th>第1個單元格的内容</th> <th>第2個單元格的内容</th> </tr> <tr> <td>第1個單元格的内</td> <td>第2個單元格的内</td> </tr> </table> |
| 表格的跨列 | <table> <tr> <td colspan=“所跨的列數”>單元格内容</td> </tr> </table> |
| 表格的跨行 | <table> <tr> <td rowspan=“所跨的行數”>單元格内容</td> </tr> </table> |
視訊元素：
1. video元素的基本文法：
<videocontrols>
<source src=“視訊路徑” type=“video/視訊格式”/>
</video>
2. audio元素的基本文法：
<audiocontrols>
<source src=“音頻路徑” type=“audio/音頻格式”/>
</audio>
controls屬性:提供播放，暫停，音量控制。
autoplay屬性：自動播放。
loop屬性：循環播放。
<iframe>架構的文法：
<iframesrc=“引用頁面位址” name=“架構辨別名” width=“架構寬度” height=“架構高度”></iframe>
<iframe>屬性的使用：
<ahref=“連結位址” target=“架構名”>連結文本或圖像</a>
清單樣式：
| list-style-type:none | 無樣式 |
| list-style-type:disc | 實心圓，預設類型 |
| list-style-type:circle | 空心圓 |
| list-style-type:square | 實心正方形 |
| list-style-type:decimal | 數字 |
<form>表單标簽及屬性：
| action屬性 | 當使用者點選送出後，資訊發送到web伺服器上，由action屬性指定的程式處理。如action屬性的值為空，則預設表單送出到本頁。 |
| method屬性 | 此屬性告訴浏覽器如何将資料發送給伺服器，指定向伺服器發送資料的方法。分别為 method（get） method（post） |
<input/>寫在<form>标簽内
其屬性有：
| type屬性:此屬性指定表單元素的類型 | 可用類型有 text(文本框), password（密碼框）, radio(單選框)，checkbox(複選框)，reset（重置按鈕），submit（送出按鈕），button（普通按鈕），image（圖檔按鈕），file（檔案域），email（郵件），url（網址），number（數字），range（滑塊），search（搜尋框），hidden（隐藏域） |
| disabled禁用屬性 |
| readonly隻讀屬性 |
| 其中數字和滑塊的類型屬性值有： min（規定允許的最小值），max（規定允許的最大值），step（規定合法的數字間隔）。 |
清單框标簽及文法：
<select>标簽必須至少包含一個<option>标簽
selected:表示預設選擇此項
<selectname=“指定清單名稱” size=“行數”>
<option value=“可選項的值” selected></option>
</select>
多行文本域标簽及文法：
<textareaname=“textarea” cols=“顯示的列數” rows=“顯示的行數”>
文本内容
</textarea>
滑鼠點選文字可選擇此選項的方法：
此方法配合選擇單選框或複選框使用
<labelfor=“male”>男</label>
<inputtype=“radio” name=“name” id=“male”>
表單資料驗證的方法：
| placeholder | 用于為input類型的文本框提供一種提示。在輸入為空時顯示，當文本框中寫入内容時消失。 |
| required | 用于規定文本框填寫内容不能為空。 |
| pattern | 用于驗證input類型文本框中使用者輸入的内容是否與自定義的正規表達式相比對。 |
CSS樣式：
| 行内樣式 | style做為屬性寫在标簽内 |
| 外部樣式表 | <style></style>做為标簽寫在<head>标簽内 |
| 外部樣式表 | 連結式文法： <link href=“css檔案路徑” rel=“stylesheet” type=“text/css”/> 導入式文法： <[email protected] url(“css檔案路徑”)--> |
連結式與導入式的差別：
1.<link/>标簽屬于XHTML範疇，而@import是css2.1中特有的。
2.使用<link/>連結的css是用戶端浏覽網頁時現将外部css檔案加載到網頁中，再進行編譯顯示，是以這種情況下顯示出來的網頁與使用者預期的效果一樣，即使網速再慢也是一樣的效果。
3.使用@import導入的css檔案，用戶端在浏覽網頁時現将HTML結構呈現出來，再把外部css檔案加載到網頁當中，當然最終的效果與使用<link/>連結檔案效果一樣，隻是當網速較慢時會先顯示沒有css統一布局的HTML網頁，這樣就會給使用者很不好的感覺。
綜上所述，可發現現在大多數網站都使用連結式外部樣式表方式引用css檔案。
樣式優先級：
行内樣式>内部樣式表>外部樣式表；遵循就近原則。
CSS基本選擇器：
| 标簽選擇器 | h1{ } |
| 類選擇器 | <h1 class=”a”> .a{ } |
| ID選擇器 | <h1 id=”a”> #a{ } |
基本選擇器的優先級：
ID選擇器>class類選擇器>标簽選擇器
CSS進階選擇器：
1. 層次選擇器：
| E F | 後代選擇器 |
| E>F | 子選擇器 |
| E+F | 相鄰兄弟選擇器 |
| E~F | 通用兄弟選擇器 |
2. 結構僞類選擇器：
| E：first-child | ul li:first-child選擇到ul下第一個li |
| E：last-child | ul li:last-child 選擇到ul下最後一個li |
| E: F:ntf-child(n) | ul li:nth-child(n)選擇到ul下指定位置的li |
| E:first-of-type | 指定父級并選擇其中這個元素第一次出現的位置 |
| E：last-of-type | 指定父級并選擇其中這個元素最後一次出現的位置 |
| E F：nth-of-type(n) | 指定父級并選擇其中這個元素的指定位置 |
3. 屬性選擇器：
| E[abc] | 選擇比對具有屬性abc的E元素 |
| E[abc=val] | 選擇比對具有屬性abc的E元素，并且屬性值為avl |
| E[abc^=val] | 選擇比對元素E，且E元素定義了屬性abc，其屬性值是以avl開頭的任意字元串 |
| E[abc$=val] | 選擇比對元素E，且E元素定義了屬性abc，其屬性值是以avl結尾的任意字元串 |
| E[abc*=val] | 選擇比對元素E，且E元素定義了屬性abc，其屬性值包含了val |
<span>标簽
可将<p>标簽内的某幾個字或某個詞選中，然後加載樣式使其突出顯示
字型樣式：
| font-family | 設定字型類型 |
| font-size | 設定字型大小 |
| font-style | 設定字型風格 |
| font-weight | 設定字型的粗細 |
文本屬性：
| color | 設定文本顔色 |
| text-align | 設定文本水準對齊 |
| text-indent | 設定首行文本的縮進 |
| line-height | 設定文本的行高 |
| text-decoration | 設定文本的裝飾 |
| text-shadow | 設定文本陰影 |
| vertical-align | 設定文字相對圖像垂直對齊 文字與圖檔必須在同一個<p>标簽内。 |
超連結僞類：
| a:link | 單擊通路前的超連結樣式 |
| a:visited | 單擊通路後的超連結樣式 |
| a:hover | 滑鼠懸浮其上的超連結樣式 |
| a:active | 單擊未釋放的超連結樣式 |
清單樣式：
| list-style-type:none | 無樣式 |
| list-style-type:disc | 實心圓，預設類型 |
| list-style-type:circle | 空心圓 |
| list-style-type:square | 實心正方形 |
| list-style-type:decimal | 數字 |
背景樣式：
| background-color | 背景顔色 |
| background-img | 背景圖檔 |
| background-position | 背景定位 no-repeat 讓背景圖檔隻出現一次 |
| linear-gradient | （position，color1，color2，……） 線性漸變 |
在CSS中，一個獨立的盒子模型由content（網頁内容），border（邊框），padding（内邊距），margin（外邊距）四部分組成。
border的三個屬性：
| border-color | 邊框顔色 |
| border-width | 邊框粗細 |
| border-style | 邊框樣式： none表示無邊框 dotted表示點線邊框 dashed表示虛線邊框 solid表示實線邊框 |
外邊距與内邊距：
| margin | 外邊距位于盒子邊框外，指與其它盒子之間的距離。 Margin{0px auto}可使盒子在父級容器中居中顯示 |
| padding | 内邊距用于控制内容與邊框之間的距離，以便精确控制内容在盒子中的位置。 |
盒子模型的計算方法：
盒子模型核心總尺寸=border（上下/左右）+padding（上下/左右）+内容寬度
Box-sizing拯救布局：
| Content-box | 預設值 盒子的寬度或高度=border+padding+（margin）+width/herght |
| Border-box | 盒子的高度或寬度等于元素内容的高度或寬度。 |
| inherit | 此值使元素繼承父元素的盒子模型模式 |
圓角邊框：
Border-radius可以通過設定四個角的屬性值實作圓形，半圓，橢圓或圓角矩形的顯示。
Box-shadow盒子陰影的屬性參數：
| Inset | 陰影類型 如不設定預設為外陰影。 設定了則表示為内陰影。 |
| x-offset | X軸位移，用來指定陰影的水準位移量，可以是正值或負值。 |
| y-offset | Y軸位移，用來指定陰影的垂直位移量，可以是正值或負值。 |
| Blur-radius | 陰影模糊半徑，代表陰影向外模糊的模糊範圍，隻能是正值。 |
| Color | 陰影顔色，指定繪制陰影時所使用的顔色。 |
Display屬性：
| block | 塊級元素預設值，元素會被顯示為塊級元素。 |
| inline | 行内元素預設值，元素會被顯示為行内元素。 |
| inline-block | 行内塊元素，元素具有行内元素的特性，也具有塊元素的特性。 |
| none | 設定元素不會被顯示 |
Float浮動屬性：
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| none | 預設值，元素不浮動。 |
Clear清除浮動屬性：
| left | 在左側不允許浮動元素 |
| right | 在右側不允許浮動元素 |
| both | 在左，右兩側都不允許浮動元素 |
| none | 預設值，允許浮動元素出現在兩側 |
解決父級邊框坍塌的方法：
| 浮動元素後面加空DIV | |
| 設定父元素的高度 | |
| 父級添加overflow屬性 | overflow屬性常見值 visible-預設值，内容不會被修剪，會呈現在盒子之外。 hidden-内容會被修剪，并且其餘内容是不可見的。 scroll-内容會被修剪，但是浏覽器會顯示滾動條一遍檢視其餘内容。 atuo-如果内容被修剪，則浏覽器會顯示滾動條一遍檢視其餘内容。 |
| 父級添加僞類after | 在CSS中添加代碼 如： Div{ Content:''; Display:block; Clear:both; } |
Inline-block和浮動的優點：
Display:inline-block可以讓元素排在一行，并且支援寬度和高度，添加該屬性的元素在标準文檔流中，不需要清除浮動。
Float可以讓元素排在一行并且支援寬度和高度，可以決定排列方向。
Inline-block和浮動的缺點：
Display:inline-block位置方向不可控制，會解析空格。
Float浮動以後元素脫離文檔流，會對周圍元素産生影響，必須在它的父級上添加清除浮動的樣式。
Position屬性：
| static | 預設值，沒有定位，元素按照标準文檔流進行布局 |
| relative | 相對定位，相對于它在原本的标準位置偏移指定的距離。相對定位的盒子仍在标準文檔流中，其後的盒子仍以标準文檔流方式對待它。 |
| absolute | 絕對定位，盒子的位置以包含它的盒子為基準進行偏移。絕對定位的盒子從标準文檔流中脫離。 |
| fixed | 固定定位，以浏覽器視窗為基準進行定位。當拖動浏覽器視窗的滾動條時，依然保持對象位置不變。 |
Z-index屬性用于調整元素定位時重疊層的上下位置。
設定層的透明度：
| opacity：x | X值為0~1，值越小越透明 |
| filter:alpha(opacity=x) | X值為0~100，值越小越透明 |
通常兩種方法都要設定，以适應所有浏覽器
CSS3變形：
| 2D位移 | transform:translate(tx,ty) tx表示X軸（橫坐标）移動的向量長度，正值則向X軸右邊移動，負值則向X軸左邊移動。 ty表示Y軸（縱坐标）移動的向量長度，正值則向Y軸右邊移動，負值則向Y軸左邊移動。 |
| 2D縮放 | transform:scale (sx,sy) 也可僅設定沿着X軸或Y軸方向縮放 scaleX（sx）表示隻設定X軸的縮放。 scaleY（sy）表示隻設定Y軸的縮放。 |
| 2D傾斜 | transform:skew (ax,ay) 也可僅設定沿着X軸或Y軸方向傾斜 skewX（ax）表示隻設定X軸的傾斜。 skewY（ay）表示隻設定Y軸的傾斜。 |
| 2D旋轉 | transform:rotate(a) 如a的取值為正值，元素順時針旋轉。 如a的取值為負值，元素逆時針旋轉。 |
CSS3過渡：
| 過渡屬性 | transition-property IDENT:指定的CSS屬性 all:指定所有元素支援，一般為了友善都會使用all |
| 過渡時間 | transition-duration 用來定義轉換動畫的時間長度。 |
| 過渡動畫函數 | transition-timing-function 常見方式： Ease：元素樣式過渡由快到慢（預設值） Linear：元素樣式過渡始終勻速 Ease-in：元素樣式過渡越來越快 Ease-out:元素樣式過渡越來越慢 Ease-in-out:元素樣式過渡先加速後減速 |
| 過渡延遲時間 | transition-delay 正值則為過了設定的時間才會觸發元素過渡效果 負值則為從設定的時間點開始顯示，之前的動作被截斷 |
過渡的觸發機制：
| 僞類觸發 | hover,active,focus,checked等 |
| 媒體查詢 | 可以通過@media屬性判斷裝置的尺寸，方向等。 |
| JavaScript | 用JavaScript腳本觸發 |
實際開發中僞類觸發使用較多！
CSS3動畫簡介：
| 設定關鍵幀 | 如：@keyframes spread |
| 調用關鍵幀 | animation:spread 2s linear infinite spread表示調用的是哪個元素 2s表示播放一次的時間 linear勻速變化 infinite表示動畫無限次播放 animation-direction動畫播放方向設定成alternate可以實作彈跳動畫。 |
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)