酷炫網頁制作之《HTML認識及基礎標簽使用》，分分鐘搞定

么是HTML

Hyper Text Markup Language, 超文本標記語言

標記又稱為標簽(Tag), 一般語法:

它可以有屬性(Attribute):

<tagName attributeName="value">, 如:

標簽也可以不成對地關閉:

HTML文檔由瀏覽器解釋并執行。

HTML文檔基本結構

<!DOCTYPE html> ----- 告訴瀏覽器用html5的標準來解釋和執行該網頁
<html>
<head> ---- 頭部, 可包含meta, title等標簽

</head>
<body> ---- 主體, 包含主要內容

</body>
</html>

title

網頁標題, 顯示在瀏覽器選項卡的標題欄上!

文本排版標簽

h1-h6: 內容標題標簽
p: 段落
br: 換行
hr: 水平線
strong: 粗體文本
em: 斜體文本
span: 無任何特殊樣式的文本
pre: 預格式標簽,其中的內容在頁面上帶格式渲染
small: 比當前字體小的文本

html特殊字符/轉義字符

空格
< 小于
> 大于
? 版權符
" 雙引號

html注釋

圖像標簽

<img
src="圖像地址"
title="鼠標懸停提示"
alt="圖像加載錯誤時的替代文本"
width="寬度"
height="高度"
/>

圖像地址分為2種:

1. 相對地址, 如: img/cc.jpg

2. 絕對地址, 如: http://img.bcd.com/2017/1644232421.jpg

超鏈接

<a href="鏈接地址" target="目標窗口">文本|圖片</a>

目標窗口:

_self: 目標頁面在當前窗口打開

_blank: 目標頁面在新窗口中打開

如果是在頁面具有frameset/frame/iframe的場景下:

_top: 在頂級窗口中打開

_parent: 在父級窗口中打開

_自定義名稱: 在指定的特定窗口中打開

三種用法:

1. 頁面間鏈接
<a href="page/login.html"></a>
2. 錨鏈接
<a href="#help"></a>
help是本頁面中一處id為help的標簽, 如: <p id="help">
或者:
help是通過a標簽命名的錨記, 如: <a name="help"></a>
3. 功能性鏈接
喚醒本地安裝的外部程序如 outlook/foxmail/qq/msn/aliwangwang...
<a href="mailto:abcdef@qq.com"></a>

div標簽

div是一個容器, 常用于頁面的布局

標簽的分類:

1. 塊級標簽/塊級元素
如: div, h1-h6, p, hr
特征: 獨占容器中的一行, 其寬度是容器的100%
2. 行級標簽/行級元素
如: span, img, strong, em, a

特征1: 多個行級元素可以同處一行, 其寬度由內容來撐開(auto)

特征2: 大部分行級元素設置其width/height無效

HBuilder常用快捷鍵

ctrl + D : 刪除當前行
ctrl + PgUp : 當前行上移
ctrl + PgDown : 當前行下移
ctrl + / : 注釋 | 取消注釋
ctrl + shift + F : 整理代碼格式
ctrl + C : 復制當前行
ctrl + X : 剪切當前行
ctrl + V : 粘貼
ctrl + Z : 撤消上一步操作
ctrl + S : 保存當前文件
ctrl + shift + S : 保存項目中全部文件
ctrl + Enter : 在當前行的下方插入新行
ctrl + shift + Enter : 在當前行的上方插入新行

以上知識能做的效果圖

部分效果

、web標準

web標準是網頁制作的標準，它不是一個標準，而是由一系列標準組成。

web標準包含了三個方面：結構（html）,表現(css),行為(javascript或js)

注：a）W3C—萬維網聯盟，制定了結構和表現的標準

b) ECMA—歐洲電腦廠商聯合會，制定了行為標準

二、html相關概念

1.html—超文本標記語言

2.xhtml—可擴展的超文本標記語言

3.html5—html的第五次重大修改

注：html和xhtml的區別

xhtml相對于html4.0并沒有增加新的標簽，只是語法要求更加嚴格，例如標簽名稱小寫，標簽必須閉合

三、DW常用快捷鍵

1.新建文件 ctrl+n

2.保存文件 ctrl+s

3.預覽網頁 F12

4.打開文件 ctrl+o

5.打開首選參數面板 ctrl+u

6.撤銷 ctrl+z

7.恢復 ctrl+y

8.查找和替換 ctrl+f

9.顯示或隱藏文件面板 F8

四、html基本結構

1.文檔聲明

作用：告知瀏覽器網頁使用哪種html或xhtml規范

h5的文檔聲明： <!doctype html> 或 <!DOCTYPE HTML> 或 <!DOCTYPE html>

2.網頁根標簽（根元素）：<html>…</html>

所有網頁的內容及標簽都要放置在html標簽之間

3.html中的內容分為兩大部分：head部分和body部分

a)head部分：主要用來設置字符編碼，網頁標題，關鍵詞，描述，引入一些外部css文件，js文件等

b)body部分：所有要在網頁中呈現的內容和放置內容的標簽都要放在body部分

注：常用字符編碼格式為utf-8,還有gbk,gb2312

五、html基本語法

1.常規標記

語法： <標記屬性=”屬性值” 屬性=”屬性值”></標記>

eg: <h3 class=”tit” id=”box”>前端開發</h3>

注：a）標記名稱要小寫

b) 屬性和屬性值用等號連接，屬性值要加雙引號

c)屬性和標記之間要加空格，多個屬性之間用空格隔開

d) 所有標點符號都必須是英文狀態下的

2.空標記

語法： <標記屬性=”屬性值” 屬性=”屬性值”/>

eg: <img src=”1.jpg” title=”圖片”/>

六、html常用標記

1.網頁內容標題

語法： <hx>標題內容</hx> (x為1-6)

eg: <h3>前端開發</h3>

注：h1-h6都有加粗效果，字體逐漸減小

2.段落文本

語法： <p>段落文本內容</p>

3.換行

語法：<br/>

4.空格（html轉義字符）

5.加粗文本

語法： <strong>加粗文本內容</strong>

<b>加粗文本內容</b>

6.傾斜文本

語法：<em>傾斜文本內容</em>

<i>傾斜文本內容</i>

7.水平分隔線

語法： <hr/>

8.上標和下標

語法：上標： <sup>上標</sup>

下標： <sub>下標</sub>

※9.無序列表

語法： <ul>

…

</ul>

10.有序列表

語法：<ol type=”a|A|I|i” start=”2″>

…

</ol>

擴展：type用來設置序號的類型

start用來設置索引值

11.自定義列表

語法： <dl>

…

</dl>

—————————————————

相對路徑的三種寫法：

a）當當前文件和目標文件在同一目錄下，寫法如下：目標文件名+擴展名

b）當當前文件和目標文件所在文件夾在同一目錄下，寫法如下：目標文件所在文件夾名/目標文件名+擴展名

c）當當前文件所在文件夾和目標文件所在文件夾在同一目錄下，寫法如下：

../目標文件所在文件夾名/目標文件名+擴展名

注: ../代表返回到上一級目錄

—————————————————

※12.圖片

語法： <img src=”圖片路徑” title=”提示信息” alt=”替換信息” width=”數值” height=”數值”/>

eg: <img src=”img/1.jpg” title=”前端開發” alt=”加載失敗” width=”100″ height=”100″/>

注：alt和title的區別

alt是當圖片由于某些原因無法正常加載時顯示的替換信息

title是當鼠標懸停在圖片上時顯示的提示信息

※13.超鏈接

語法： <a href=”鏈接地址” target=”_blank” title=”***”>鏈接文本或圖片</a>

eg: <a href=”http://www.baidu.com” target=”_blank”>百度一下</a>

<a href=”#”>新聞</a> 空鏈接

注：target=”_blank” 鏈接地址在新窗口打開

擴展：href和src的區別：

a）href表示超文本引用。用來建立當前元素和文檔之間的鏈接。常用的有：link、a

b）src是source的縮寫，src指向的內容會嵌入到文檔中當前標簽所在的位置。常用的有img，script

14.表格

作用：顯示數據

語法：<table border=”1″ cellspacing=”0″ cellpadding=”0″>

…

</tr>

…

</tr>

…

</table>

注：表格相關html標簽

1）table 用來定義一個表格

2）tr 定義表格的行

3）td 定義表格的列

4）th 定義表格的表頭(自動加粗居中)

5）caption 定義表格的標題

6）thead 定義表格的頁眉

7）tbody 定義表格的主體

8）tfoot 定義表格的頁腳

注：表格相關html屬性

a) border 設置表格的邊框

b) cellspacing 設置單元格之間的間距

c) cellpadding 設置內容和單元格之間的空隙

d) width 定義單元格的寬度和表格的寬度

e) height 定義單元格的高度或表格的高度

f) align 設置單元格內容的水平對齊方式 align=”left|center|right”

g) colspan 合并列（加在td上）

h) rowspan 合并行（加在td上）

表單

一、表單

作用：用來搜集用戶信息

語法： <form method=”get|post” action=”服務器端文件”>…</form>

注：所有的表單控件都要放置在form標簽之間

1.文本框

語法： <input type=”text” value=”***”/>

2.密碼框

語法：<input type=”password”/>

3.提交按鈕

語法： <input type=”submit” value=”登錄”/>

注：通過設置value屬性改變按鈕的默認文字內容

提交按鈕和要提交的表單內容必須放在一個form標簽中，才能提交

4.重置按鈕

語法：<input type=”reset”/>

注：重置按鈕必須放在form中才具備重置功能

5.單選按鈕

語法：<input type=”radio” name=”a” checked=”checked”/>

注：a)一組中的單選按鈕添加一致的name屬性值，才能達到多選其一的效果

b)設置checked=”checked”,在頁面加載完成后添加默認選中項

c)當屬性和屬性值相同時，可以省略屬性值

6.復選按鈕

語法： <input type=”checkbox” checked/>

注：checked屬性的設置同單選按鈕

7.下拉列表

語法：<select>

…

</select>

注：設置selected屬性改變默認選中項

8.文本域

語法：<textarea cols=”字符寬度” rows=”行數”></textarea>

擴展：禁止用戶隨意拖拽改變文本域的大小，設置如下：

textarea{resize:none;}

9.普通按鈕

語法： <input type=”button” value=”***”/>

注：普通按鈕不具備提交功能，一般結合js的onclick事件使用

普通按鈕上的默認文字內容為空，需要通過value屬性進行設置

注：disabled=”disabled” 設置表單控件為禁用狀態

◆ get和post的區別

1）get主要用來獲取數據，post主要用來向服務器發送數據

2）get發送數據時，信息會顯示在url地址欄中，post直接通過服務器發送，用戶看不到這個過程

3) get可以傳送的數據量較小，一般不能大于2kb，post可以傳送的數據量較大，理論上沒有限制

4) get安全性較低，post安全性較高

二、div

作用：無語義標簽，主要用來布局和劃分板塊

語法： <div>…</div>

三、span

語法： <span>…</span>

作用：

a)標簽沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。

b)span標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式

四、iframe框架

語法：<iframe src=”1.html表單.html” width=”800″ frameborder=”0″ scrolling=”auto”></iframe>

注：scrolling=”no” 隱藏或去掉iframe的滾動條

作用：創建包含另外一個文檔的內聯框架

五、html注釋

語法： <!–注釋內容–>

css基礎

一、css概念及特點

css—層疊樣式表

特點：實現了結構與表現相分離

作用：定義html元素如何在網頁中顯示

二、css基礎語法

css由選擇器和聲明兩大部分組成，聲明又是由屬性和屬性值組成。即：

選擇器{屬性:屬性值;}

eg: h1{color:red;}

注：a）聲明要放在花括號中,每條聲明結束要加分號

b) 屬性和屬性值用冒號連接

c) 建議一條聲明占一行

三、樣式表的創建

1.內聯樣式（行間樣式，行內樣式）

語法：<標記 style=”屬性:屬性值;”></標記>

eg: <h1 style=”color:red;”>前端開發</h1>

2.內部樣式（嵌入式樣式）

語法：<style type=”text/css”>

選擇器{屬性:屬性值;}

</style>

eg: <style type=”text/css”>

h1{color:red;}

</style>

注：style標簽一般放在head部分

3.外部樣式表

a）使用link標簽引入

首先創建一個后綴名為.css的文件

然后通過link標簽引入，語法如下：

注：rel是用來建立外部文件和本文件之間的關系

link標簽一般放在head部分

b)使用@import引入css文件

語法： @import “css文件路徑”;

★ link和@import引入外部樣式的區別 ★

1）link屬于html標簽，除了可以引入css文件以外，還可以引入其他文件，@import屬于css范疇，只能引入css文件（老祖宗的區別）

2）link引入的css文件和頁面同時加載，@import引入的css文件在頁面加載完成后載入（加載順序不同）

3）link引入css文件無兼容性問題，所有瀏覽器都支持，@import低版本瀏覽器不支持（瀏覽器支持不同）

4）link是html標簽，支持js改變dom，@import不支持（是否支持js改變dom）

四、樣式表的優先級

樣式表的優先級

采取就近原則，即離被設置的元素越近，優先級越高

當css屬性值中出現!important的時候，它的優先級最高即：

!important>內聯>內部>外部

五、css注釋

語法： /*注釋內容*/

六、css選擇器

1.id選擇器

語法：<標記 id=”id名”></標記>

#id名{屬性:屬性值;}

eg: <h1 id=”edu”>前端開發</h1>

#edu{color:red;}

注：a）id選擇器優先級最高，id名是唯一的，不能出現同名的id

b) id名命名要語義化，常見命名方法：

I.駝峰命名法 id=”mainLoginContent”

II.下劃線連接命名法 id=”main_login_con”

2.類選擇器(class選擇器)

語法：<標記 class=”類名”></標記>

.類名{屬性:屬性值;}

eg: <h1 class=”tit”>前端開發</h1>

.tit{color:red;}

注：可以給具有相同樣式的元素添加相同的class名

注：類名詞列表用法：

當一個元素即具有與其他元素相同的樣式，又有某一個樣式不同時，需要用到類名詞列表的方式

3.后代選擇器（包含選擇器）

語法：選擇符1 選擇符2{屬性:屬性值;}

eg: .box a{color:red;}

注：選擇符1和選擇符2必須滿足是包含與被包含的關系，才能使用后代選擇器

css核心屬性

一、字體類屬性

1.字體類型

語法： font-family:字體1,字體2,字體3;

eg: body{font-family:”Microsoft YaHei”,Arial;}

或 body{font-family:”微軟雅黑”,Arial;}

注：a）font-family設置多個字體時，用逗號分隔

b）中文字體要加雙引號，英文字體由多個單詞組成也要加雙引號

c）瀏覽器會優先識別字體1,如果找不到識別字體2，如果所列出的字體都無法識別，顯示瀏覽器默認字體

d）特殊字體一律用圖片

2.字體大小

語法：font-size:數值+單位;

eg: p{font-size:12px;}

注：a)字體大小一般設置偶數不設置奇數

b)瀏覽器默認字體大小為16px

c)字體大小單位有px,em,rem,pt等

注： font-size:16px; 等價于 font-size:medium;

3.字體加粗

語法：font-weight:normal(常規字體)|bold(加粗字體)|bolder(加粗字體)|100-900;

eg: h3{font-weight:normal;}

注：100-500為常規字體，600-900為加粗字體

4.字體傾斜

語法：font-style:normal(常規字體)|italic(傾斜)|oblique(傾斜);

5.字體是否大小寫

語法：font-variant:normal(常規字體)|small-caps(小型大寫字母字體);

注：主要針對英文起作用

6.font復合寫法

語法：font:style weight size family;

eg： font:12px/1.5 “微軟雅黑”;

上述代碼是指字體大小為12px，行高為字體大小的1.5倍，字體類型為微軟雅黑

注：在font的復合寫法中，size和family不可互換位置，也不可以和其他簡寫屬性互換位置

7.字體顏色

語法：color:顏色值;

注：顏色值的三種寫法：

a）十六進制寫法

color:#000; 黑色 color:#fff; 白色

b) rgb寫法

color:rgb(0,0,0); 黑色 color:rgb(255,255,255); 白色

c) 顏色單詞

color:black; color:white; color:red;

二、文本類屬性

1.文本水平對齊方式

語法：text-align:left(左對齊)|center(居中對齊)|right(右對齊)|justify(兩端對齊);

注：a）當需要讓容器中的文本或圖片等其他元素水平居中時，給父容器添加text-align:center;

b）justify兩端對齊主要針對英文

2.行高

語法：line-height:數值+單位;

eg: line-height:32px;

注：a）當單行文本的行高等于容器高時，可以實現單行文本在定高容器中垂直居中

b) line-height不允許設置負值

c) line-height的屬性值只寫數值不加單位時，代表行高為字體大小的多少倍

3.文本修飾

語法：text-decoration:none(沒有修飾)|underline(下劃線)|line-through(刪除線)|overline(上劃線);

eg: a{text-decoration:none;}

a:hover{text-decoration:underline;}

CSS盒模型

一、css盒模型的概念及組成

css盒模型的概念—css盒模型是css的基石，主要用來設置元素間的相互關系，每個html元素都有自己的盒模型。

css盒模型的組成—由content(主體),padding(補白，填充)，border(邊框)，margin(外邊距)組成。

1.content

語法：width:數值+單位;

height:數值+單位;

注：width和height的屬性值必須加單位

2.padding(content和border之間的區域)

a）設置一個值

padding:20px; 上，下，左，右均為20px

b）設置兩個值

padding:20px 5px; 上下為20px，左右為5px

c）設置三個值

padding:20px 5px 10px;上為20px，左右為5px，下為10px

d）設置四個值

padding:20px 5px 10px 0px;

順時針順序依次為：上20px，右5px，下10px,左0px

e) 還可以單獨設置某一個方向的padding值

eg: padding-left:20px; （left還可以更改為top，right，bottom）

注：

I.如果元素設置了寬高，設置padding后，要在原來寬高的基礎上減去設置的padding值，保證總寬高不變

II.padding不允許設置負值

III.背景可以延伸到padding區域

IV.當需要調整子元素在父元素中的位置關系時，可以通過給父元素設置padding來實現

容器溢出

一、容器溢出

語法：overflow:visible|hidden|scroll|auto|inherit;

visible 默認值，內容不會被裁剪，顯示在容器之外

hidden 內容會被裁剪，隱藏不可見

scroll 溢出部分的內容以滾動條的形式查看，如果沒有溢出，顯示默認的滾動條

auto 容器溢出時顯示滾動條

inherit 規定從父元素繼承overflow屬性值

還可以單獨設置某一個方向的溢出：

overflow-x:hidden|scroll|auto;

overflow-y:hidden|scroll|auto;

二、文本溢出

語法：text-overflow:clip(不顯示省略號)|ellipsis(顯示省略號);

三、單行文本省略號的設置

四個條件缺一不可：

（a）設置固定的寬度 width:value;

（b）設置文本強制在一行顯示 white-space:nowrap;

（c）設置容器溢出隱藏 overflow:hidden;

（d）設置文本溢出顯示省略號 text-overflow:ellipsis;

注：I.此方法只適用于單行文本省略號的設置，如果是多行文本顯示省略號可以使用js或由后端來處理

II.上述四個屬性必須給文本所在最近的父元素設置

元素類型及轉換

一、html元素類型

html元素分為三大類：塊元素，內聯元素，可變元素

注：也可將html元素分為這樣三類：塊元素，內聯元素，內聯塊狀元素

1.塊元素

常見塊元素：div,p,ul,ol,li,dl,dt,dd,form,table,tr,td,hr,h1,h2,h3,h4,h5,h6,fieldset

塊狀元素特點：

a) 塊狀元素以塊的形式顯示為一個矩形區域

b) 塊狀元素默認情況下，獨占一行，自上而下排列

c) 塊狀元素可以定義自己的寬度和高度，以及盒模型中的任意屬性（如margin，padding，border）

d) 塊狀元素可以作為一個容器容納其他的塊元素和內聯元素

2.內聯元素

常見內聯元素：a,span,strong,b,i,em,br,img,input,select,textarea

內聯元素特點：

a) 內聯元素沒有自己的形狀，也顯示為一個矩形區域

b) 內聯元素在一行逐個進行顯示

c) 內聯元素不能定義寬度和高度，以及與高度相關的一些屬性（margin-top,margin-bottom,padding-top,padding-bottom,line-height）

d) 內聯元素不能嵌套塊元素

常見內聯塊狀元素：img,input,select,textarea

內聯塊狀元素特點：

a) 即具有內聯元素特點，在一行逐個進行顯示

b) 又具有塊狀元素特點，可以定義寬度和高度，以及盒模型中的任意屬性

注：vertical-align屬性只針對內聯塊狀元素有效

3.可變元素

根據上下文關系決定元素類型，可變范圍塊元素和內聯元素

注：常用html元素默認有margin，padding的如下：

body 默認margin

h1-h6 默認margin

p 默認margin

ul 默認margin和padding

ol 默認margin和padding

dl 默認margin

dd 默認margin

td 默認padding

input 默認padding

textarea 默認padding

fieldset 默認padding和margin

二、元素類型轉換

語法：display:block|inline|inline-block|none|list-item;

a)block 將元素轉換為塊元素，是大部分塊元素的默認display屬性值

b)inline 將元素轉換為內聯元素，是內聯元素的默認display屬性值

c)inline-block 將元素轉換為內聯塊狀元素，是內聯塊狀元素的默認display屬性值（如img,input）

d)none 將元素隱藏不可見

e)list-item 將元素轉換為列表類型，是li的默認display屬性值

—————————————————

擴展：圖片默認有空隙：

方案一：給img添加display:block;

方案二：給img添加float屬性

—————————————————

注：當給元素設置了float后就相當于轉換成block

三、置換元素和非置換元素

1.置換元素

瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。

例如：根據img標簽的src屬性決定在網頁中顯示什么樣的圖片

根據input標簽的type屬性決定在網頁中顯示什么類型的input控件

2.非置換元素

除了置換元素，大部分html元素都是非置換元素，其內容直接顯示在瀏覽器中

（缺內容）

定位及錨點設置

一、常見的三種布局模型

1.流動模型（Flow）

元素沒有設置css樣式的布局，塊元素自上而下排列，內聯元素在一行逐個進行顯示

2.浮動模型（Float）

使用float屬性進行網頁布局，可以讓塊元素脫離文檔流在一行顯示，可以讓內聯元素設置寬高并且在一行顯示

3.層模型（Layer）

使用position定位屬性進行布局

二、定位布局

語法：position:static(默認值)|absolute(絕對定位)|relative(相對定位)|fixed(固定定位);

1.絕對定位

語法：position:absolute;

要成為絕對定位元素的參照物，必須滿足以下兩個條件：

a)參照物和絕對定位元素必須是包含與被包含關系

b)參照物必須具有定位屬性

如果找不到滿足以上兩個條件的父包含塊，那么絕對定位的參照物是瀏覽器窗口

注：元素的定位位置通過left,right,top,bottom屬性來進行設置

2.相對定位

語法：position:relative;

參照物：元素偏移前的位置

★相對定位和絕對定位的區別

a）參照物不同

絕對定位的參照物是離元素最近的具有定位屬性的父包含塊，相對定位的參照物是元素偏移前的位置

b) 是否會脫離文檔流

絕對定位會脫離文檔流，位置會被其他元素占據，相對定位不會脫離文檔流，原來的位置保留

3.固定定位

語法：position:fixed;

參照物：瀏覽器窗口或屏幕窗口

注：當給元素設置了固定定位后，元素會脫離正常的文檔流，位置會被其他元素占據

三、透明度設置

語法:opacity:數值; （取值范圍0-1,0為完全透明，1為完全不透明）

注：IE8及以下版本的IE瀏覽器不支持opacity屬性，兼容寫法如下：

filter:alpha(opacity=數值); （取值范圍0-100）

四、定位元素層疊屬性

語法：z-index:auto|number;

number 無單位的整數值，也可以設置負值

注：沒有設置z-index時，最后寫的對象優先顯示在上層，設置后，數值越大，層越靠上；

五、錨點鏈接

語法：

a）命名錨記：

<標記 id=”錨記名”></標記>

b）連接錨記名

eg: <h1 id=”one”>第一章 html基礎</h1>

—————————————————

擴展一：如何在網頁中插入flash

語法：<object width=”1000″ height=”500″>

</object>

擴展二：設置滾動字幕效果

語法：

滾動內容…

</marquee>

注：scrollamount用來設置滾動的速度，值越大速度越快

寬高自適應

一、寬度自適應

語法：width:100%;

注：給元素設置寬度100%將會繼承父元素的寬度

塊狀元素默認寬度為100%

注：寬度自適應主要應用在通欄效果中

二、高度自適應

語法：height:auto; 或不設置高度

注：容器的高度由里面內容來決定

三、最大，最小高度，最大，最小寬度

1.最小高度

語法：min-height:數值+單位;

注：IE6不識別min-height屬性，兼容寫法如下：

a）min-height:100px; _height:100px;

b）min-height:100px; height:auto!important; height:100px;

2.最大高度

語法：max-height:數值+單位;

3.最小寬度

語法：min-width:數值+單位;

注：塊狀元素設置min-width屬性時，需要將元素轉換為內聯塊狀元素

4.最大寬度

語法：max-width:數值+單位;

注：以上四組屬性IE6及以下版本瀏覽器都不識別

四、高度塌陷問題

描述：父元素高度自適應，子元素float后，導致父元素高度為0稱為高度塌陷問題

a）給父元素一個固定的高度

父元素{height:value;}

缺點：給父元素固定的高度違背了高度自適應的原則，不建議使用

b) 給父元素添加overflow:hidden;

優點：簡單

缺點：當子元素存在定位時，定位在父元素框之外的部分將會被隱藏掉

c) 在浮動的子元素末尾添加一個空div，并設置如下樣式：

.clear{clear:both;height:0;overflow:hidden;}

優點：兼容性好，所有瀏覽器都支持

缺點：在網頁中添加若干個無意義的div，容易造成代碼冗余

d）萬能清除浮動法

父元素:after{content:”;

display:block;

clear:both;

height:0;

overflow:hidden;

visibility:hidden;}

優點：解決了代碼冗余的問題，是官方推薦的解決高度塌陷問題的方法

五、偽元素

1. 元素:before

語法： .box:before{

content:”hello”;

font-size:30px;

color:red;

…

}

注：:before是在元素里面所有內容之前添加一個偽元素

2. 元素:after

語法：.box:after{

content:”world”;

font-size:30px;

color:green;

}

注： :after是在元素里面所有內容之后添加一個偽元素

注：I.無論偽元素內容是否為空，都必須添加content屬性

II.偽元素是一個內聯元素

六、元素隱藏不可見的兩種方式

1.display:none;

元素隱藏不可見，位置不保留（看不見，摸不著）

2.visibility:hidden;

元素隱藏不可見，位置保留(看不見，摸得著)

七、窗口高度自適應

首先設置：

html,body{height:100%;}

然后給元素設置：

元素{height:100%;}

注：窗口高度自適應主要應用于內容不滿一屏或者沒有內容body和html高度為0的情況

八、水平居中

1.如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置text-align:center;來實現的。

2.滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的

注：當元素設置了float，絕對定位，固定定位，左右margin為auto將會失效

3.不定寬塊狀元素水平居中

方案一：給子元素設置display:inline-block;給父元素設置text-align:center;

方案二：給父元素設置display:table; margin:0 auto;

注：display:table; 將元素轉換為表格形式

九、元素水平垂直都居中問題

1.定寬高元素在屏幕窗口水平垂直都居中，方法如下：

元素{

width:value;

height:value;

position:fixed;

left:50%;

top:50%;

margin-left:-width/2;

margin-top:-height/2;

}

2.不定寬高元素在屏幕窗口水平垂直都居中，方法如下：

元素{

position:fixed;

left:0;

top:0;

bottom:0;

right:0;

margin:auto;

}

3.不定寬高的子元素在父元素中水平垂直都居中，方法如下：

a）父元素{

position:relative;

}

子元素{

position:absolute;

left:0;

top:0;

bottom:0;

right:0;

margin:auto;

}

b）父元素{

display:table-cell;

text-align:center;

vertical-align:middle;

}

注：display:table-cell;將元素轉換為表格單元格形式

十、圓角效果

語法：border-radius:數值+單位;

注：border-radius:50%; (圓)

注：border-radius是css3新增的屬性，低版本IE瀏覽器不支持，需要使用背景圖片的方式來實現

常見兼容性問題

一、常見兼容性問題

1.雙倍浮動bug

描述：塊元素float后，又設置了橫向的margin，在IE6下顯示的margin比設置的margin值要大

解決方案：給浮動的塊元素添加display:inline;

2.表單元素行高不一致

解決方案：

方案一：給表單元素添加vertical-align:middle;

方案二：給表單元素添加float屬性

擴展：如何去掉表單元素的外邊框，方法如下：

input{outline:none;}

3.在IE6不能識別較小高度的容器（一般為10px）

解決方案：

a）給容器添加overflow:hidden;

b）給容器添加font-size:0; (如果容器高度為0時使用第一種解決方案)

4.超鏈接中的圖片在IE瀏覽器中有默認的邊框

解決方案：給img標簽添加border:0; 或 border:none;

5.min-height屬性IE6不識別

解決方案：

a）min-height:100px; _height:100px;

b）min-height:100px; height:auto!important; height:100px;

6.圖片默認有空隙

解決方案：

a）給img設置display:block;

b）給img設置float屬性

7.百分比bug

描述：父元素寬度100%，子元素寬度50%，在IE6下，50%+50%大于100%

解決方案：給右邊左浮動的子元素添加clear:right;

8.低版本IE瀏覽器不識別opacity屬性

解決方案：filter:alpha(opacity=數值);

9.鼠標指針bug

描述：cursor:hand;只有低版本的IE瀏覽器支持，其他瀏覽器都不支持

解決方案： cursor:pointer; 所有瀏覽器都支持，將鼠標指針改為手型

10.上下margin重疊問題

描述：當給上下兩個元素同時設置margin值時，只能識別其中較大的那個值、

解決方案：

a)margin-top和margin-bottom只設置其中一個值

b)給其中一個設置margin屬性的元素外層再嵌套一個盒子，并設置overflow:hidden;

11.假傳圣旨問題

描述：給子元素設置margin-top應用在了父元素上

解決方案：

1）把給子元素設置的margin-top改為給父元素設置padding-top

2）給父元素設置overflow:hidden;

3）給父元素設置float屬性

4）給父元素設置border-top:1px solid transparent;

注：transparent為透明

12.按鈕默認大小不一

解決方案：按照設計稿上按鈕的樣式設定寬高，或者使用背景圖

二、css hack(過濾器)

1.下劃線屬性過濾器

語法：選擇器{_屬性:屬性值;}

eg: .box{_background:red;}

注：只有IE6可以識別帶有下劃線的css屬性，其他瀏覽器都不識別

2.!important關鍵字過濾器

語法：選擇器{屬性:屬性值!important;}

eg: .box{background:yellow!important;background:blue;}

注：!important關鍵詞過濾器除IE6以外的其他瀏覽器都識別

添加!important關鍵詞的css屬性要放在標準css屬性之前

3.*屬性過濾器

語法：選擇器{*屬性:屬性值;}

eg: .box{*background:pink;}

注：*屬性過濾器只有IE6,IE7識別

語法：選擇器{屬性:屬性值;}

eg: .box{background:orange;}

注：是IE6,7,8,9都識別

5.>5.\0<

語法：選擇器{屬性:屬性值>語法：選擇器{屬性:屬性值\0;}<;}

eg: .box{background:black>eg: .box{background:black\0;}<;}

注：>注：\0是IE8及以上版本瀏覽器識別<>

三、五大瀏覽器內核

1.IE 內核：Trident

2.Mozilla Firefox(火狐) 內核：Gecko

3.Safari,Chrome 內核：Webkit

4.Opera(歐朋) 內核：Presto

5.由Google,Opera,software聯合開發的瀏覽器排版引擎內核：Blink

—————————————————

圖片整合

一、圖片整合的概念

圖片整合是指將多張背景圖片整合到一張背景圖中，通過background-position屬性實現圖片的定位技術。

二、圖片整合的優勢

將多張圖整合到一張圖中，減少了對服務器的請求次數，加快了頁面的加載速度，減小了圖片體積，從而達到了網站性能的優化。

注：圖片整合技術也稱為滑動門技術，雪碧圖，精靈圖

表單，表格高級

一、表單高級

表單的組成：表單域，表單控件，提示信息

1.表單域

2.表單控件

文本框： <input type=”text”/>

密碼框： <input type=”password”/>

提交按鈕： <input type=”submit” value=”login”/>

重置按鈕： <input type=”reset”/>

單選按鈕： <input type=”radio” name=”a”/>

復選按鈕：<input type=”checkbox” checked/>

下拉菜單： <select><option>a</option>…</select>

文本域： <textarea></textarea>

3.提示信息

放置在表單控件前后的文字內容叫做提示信息，我們經常將提示信息放置在一個label標簽中，語法如下：

a）點擊文字選中單選按鈕或復選按鈕

注：設置id屬性值和for屬性值一致產生關聯即可達到點擊文字選中按鈕的效果

b）通過給label標簽設置樣式達到一定的效果

注：label是一個內聯元素

4.表單字段集及表單字段集標題

語法： <fieldset>

表單控件…

</fieldset>

注：將form表單中的內容進行分組，并添加一個標題，在form中可以嵌套多個fieldset

5.上傳文件

語法： <input type=”file”/>

6.隱藏字段

語法： <input type=”hidden”/>

注：主要用于后端處理數據

7.圖像域

語法： <input type=”image” width=”數值” height=”數值” src=”圖片路徑”/>

注：用在提交按鈕位置的圖像，使得這幅圖像具有按鈕的功能

二、表格高級

1.合并相鄰單元格邊框(給table加)

語法： border-collapse:collapse(合并相鄰單元格邊框)|separate(邊框分開);

2.定義表格標題的位置(給table加)

語法：caption-side:top|bottom|left|right;

注：left和right只有火狐支持

3.設置單元格間距(給table加)

語法：border-spacing:數值+單位;

注：當設置了border-collapse:collapse;后，border-spacing將會失效

4.設置無內容單元格隱藏(給table加)

語法：empty-cells:show(顯示)|hide(隱藏);

5.表格布局算法(給table加)

語法：table-layout:auto|fixed(單元格寬度固定，不隨內容多少發生變化);

三、表格重要html屬性

1.合并列

colspan=”數值”

2.合并行

rowspan=”數值”

3.單元格內容水平對齊方式

align=”left|center|right”

4.單元格內容垂直對齊方式

valign=”top|middle|bottom”

5.分隔線

rules=”rows|cols|all|groups|none”

rows 行分隔線

cols 列分隔線

all 行分隔線和列分隔線

groups 組分隔線

none 沒有分隔線

注：表格行分組：<thead></thead> <tbody></tbody> <tfoot></tfoot>

表格列分組：<colgroup span=”數值”></colgroup>

注： span用來設置幾列為一組，默認一列為一組

四、css樣式重置

作用：CSS reset的作用是讓各個瀏覽器的CSS樣式有一個統一的基準

五、seo優化

seo—搜索引擎優化

◆ 站內優化

1.頁面主題優化

給網站添加一個有意義的標題

2.頁面頭部優化

給網站添加關鍵詞，描述

3.超鏈接優化

a）盡量少用或者不用flash設置超鏈接，seo無法識別flash中的超鏈接文字

b) 給a標簽添加title屬性，可以起到提示訪客的作用

c) 盡量避免使用圖片熱點鏈接

4.圖片優化

給img標簽添加title，alt屬性

5.網站地圖

給網站添加網站地圖或網站導航，方便瀏覽者快速找到有瀏覽的網頁信息

6.給網站添加友情鏈接

7.seo認為靜態頁面比動態頁面更有利于搜索引擎優化

8.避免”大體積”的頁面，代碼結構要合理

◆ 站外優化

1.百度推廣

2.流量分析

3.網站品牌建設

h5新標簽

一、h5新增結構性標簽

1.header 定義網頁的頭部

2.footer 定義網頁的底部

3.section 定義網頁的某一個區域

4.nav 定義網頁的導航部分

5.aside 定義網頁的側邊欄

6.article 定義網頁的一篇文章

7.hgroup 對網頁中的標題進行組合

8.figure 對網頁中的元素進行組合

9.figcaption 給figure組合添加一個標題

10.dialog 定義一個對話框

二、h5新增其他標簽

1.定義帶有記號的文本

語法： <ma rk>定義帶有記號的文本</mark>

2.定義已知范圍內的標量，測量

語法： <meter value=”10″ min=”1″ max=”100″></meter>

3.定義任務的進度或進程

語法： <progress value=”10″ min=”1″ max=”100″></progress>

三、音頻

語法： <audio controls autoplay loop>

…

Your browser does not support the element

</audio>

注：音頻相關html屬性

a）src 引入音頻文件路徑

b) controls 顯示音頻控制條

c) autoplay 設置自動播放

d) loop 設置循環播放

注：audio支持的音頻格式：mp3,ogg,wav

四、視頻

語法：<video controls width=”數值” height=”數值” autoplay controls poster=”圖片路徑”>

…

Your browser does not support the element

</video>

注：視頻相關html屬性

a）src 引入音頻文件路徑

b) controls 顯示音頻控制條

c) autoplay 設置自動播放

d) loop 設置循環播放

e) width 定義視頻區域的寬度

f) height 定義視頻區域的高度

g) poster 在視頻播放前或快進快退時顯示的一張圖片

注：video支持的視頻格式：mp4(mpeg4),ogg,webm

五、h5新增type屬性值

1.type=”email”

限制用戶輸入為email類型（必須含有@符，@符前后內容不能為空）

2.type=”url”

限制用戶輸入為url類型（必須含有http://,并且后面內容不能為空）

3.type=”number”

限制用戶輸入為number類型

eg: <input type=”number” min=”1″ max=”100″ value=”1″ step=”2″/>

注：min 設置最小值 max 設置最大值 step 設置每次遞增遞減的值

4.type=”range”

產生一個滑動條的表單

eg: <input type=”range” value=”1″ min=”0″ max=”100″/>

5.type=”color”

產生一個選擇顏色的面板

6.type=”date”

產生一個選擇日期的面板

7.type=”time”

產生一個選擇時間的面板

8.type=”month”

產生一個選擇年月的面板

9.type=”search”

產生一個具有搜索意義的表單

六、h5新增表單屬性

1.required 必填項，限制用戶輸入不能為空

eg: <input type=”text” required/>

2.placeholder=”默認提示信息內容” 給表單控件添加默認提示信息

eg: <input type=”text” placeholder=”請輸入用戶名”/>

3.autofocus 頁面加載完成后自動聚焦到某個input框

eg: <input type=”text” autofocus/>

4.pattern=”正則表達式” 按照設置的規則輸入內容

eg: <input type=”text” pattern=”^[a-zA-Z0-9]{6,16}$”/>

5.list 指定一個datalist，作為下拉提示單

eg: <input type=”search” list=”data”/>

…

</datalist>

注：type為search的input框的list屬性值必須和datalist標簽的id名一致才能實現搜索的功能

七.取消h5的表單驗證

語法： <form novalidate></form>

sublime常用快捷鍵

<!– sublime常用快捷鍵 –>

<!– 1.快速生成html基本模板 –>

<!– !+tab鍵 –>

<!– 2.添加或刪除注釋 –>

<!– ctrl+? –>

<!– <ul class=”uls”>

<li><a href=”#”>今天是2018年七月九號</a><span>2018-07-09</span></li>

</ul> –>

<!– 3.快速生成標記內容

標記.class名>子標記名稱*個數

ul.uls>li*6>a+span –>

css3選擇器

一、基本選擇器

1.通配符

*{margin:0; padding:0;}

2.元素選擇符（標簽選擇器）

h1{color:red;}

3.class選擇器（類選擇器）

.box{background:blue;}

4.id選擇器

#wraper{color:black;}

5.群組選擇器

ol,ul{list-style:none;}

二、層次選擇器（關系選擇器）

1.E F (后代選擇器或包含選擇器)

匹配E元素下所有子元素F

eg: .box a{color:red;}

匹配.box下所有子元素a

2.E>F (子代選擇器)

匹配E元素下第一級子元素F

eg: .box>a{color:red;}

匹配.box下第一級子元素a

3.E+F 相鄰兄弟選擇器

匹配E元素后面緊鄰的那個F元素(有且僅有一個)

eg: .box+h1{color:blue;}

匹配.box后面緊鄰的那一個h1

4.E~F 通用兄弟選擇器

匹配E元素后面所有的F元素(有可能匹配到多個)

eg: .box~h1{color:blue;}

匹配.box后面所有的h1元素

三、動態偽類選擇器

1.E:link 沒有被訪問過的狀態

2.E:visited 訪問過后的狀態

3.E:hover 滑過時的狀態

4.E:active 鼠標按下時的狀態

5.E:focus 光標聚焦到input框時的狀態

四、結構性偽類選擇器

1. :first-child 匹配每個父元素下第一個子元素

eg: .box a:first-child{color:red;}

匹配.box下第一個子元素a(此時，a必須是.box下的第一個子元素)

eg: .box :first-child{color:red;}

匹配.box下每個父元素下的第一個子元素

注： :first-child 《=》 :nth-child(1)

都是匹配父元素下的第一個子元素

2. :last-child 匹配每個父元素下最后一個子元素

eg: .box a:last-child{color:blue;}

匹配.box下最后一個子元素a(此時，a必須是.box下最后一個子元素)

eg: .box :last-child{color:blue;}

匹配.box下每個父元素下的最后一個子元素

注： :last-child 《=》 :nth-last-child(1)

都是匹配父元素下的最后一個子元素

3. :nth-child(n) 匹配父元素下的第n個子元素

eg: .box :nth-child(3){color:red;}

匹配.box下每個父元素下的第三個子元素

4. :nth-child(2n) 匹配父元素下的第偶數個子元素

eg: .tab tr:nth-child(2n){background:red;}

匹配.tab下第偶數個tr

注： :nth-child(2n) 《=》 :nth-child(even)

5. :nth-child(2n+1) 匹配父元素下第奇數個子元素

eg: .tab tr:nth-child(2n+1){background:blue;}

匹配.tab下第奇數個tr

注： :nth-child(2n+1) 《=》 :nth-child(odd)

6. :nth-last-child(n) 匹配父元素下倒著數第n個子元素

eg: .tab tr:nth-last-child(3){color:red;}

匹配.tab下倒數第三個子元素tr

——————————————————-

7. :first-of-type 匹配父元素下指定類型的第一個子元素

eg: .uls li:first-of-type{background:pink;}

匹配.uls下li這種類型的第一個子元素

注： :first-of-type 《=》 :nth-of-type(1)

都是匹配父元素下指定類型的第一個子元素

8. :last-of-type 匹配父元素下指定類型的最后一個子元素

eg: .uls li:last-of-type{background:yellow;}

匹配.uls下li這種類型的最后一個子元素

注：:last-of-type 《=》 nth-last-of-type(1)

都是匹配父元素下指定類型的最后一個子元素

9. :nth-of-type(n) 匹配父元素下指定類型的第n個子元素

eg: .uls li:nth-of-type(3){background:blue;}

匹配.uls下li這種類型的第3個子元素

10. :nth-last-of-type(n) 匹配父元素下指定類型的倒數第n個子元素

eg: .uls li:nth-last-of-type(3){background:orange;}

匹配.uls下li這種類型的倒數第三個子元素

——————————————————-

11. :only-child 匹配父元素下唯一一個子元素

12. :only-of-type 匹配父元素下指定類型的唯一一個子元素

13. :empty 匹配內容為空的元素(空格，回車換行都不能有)

14. :root 匹配根元素html

四、UI狀態偽類選擇器（主要針對form表單元素）

1. E:checked 匹配選中狀態的單選或復選按鈕

eg: input:checked+label{color:red;}

匹配選中狀態的input控件后面緊鄰的那個label標簽

2. E:enabled 匹配啟用狀態的表單元素

eg: input:enabled{border:1px solid red;}

3. E:disabled 匹配禁用狀態的表單元素

eg: input:disabled{background:gray;}

五、目標偽類選擇器

語法： E:target 匹配錨點鏈接連接到的那個元素

eg: p:target{display:block;}

當錨點鏈接連接到p標簽，應用display:block;

六、屬性選擇器

1. E[attr] 匹配含有attr屬性的E元素

eg: a[title]{text-decoration:none;}

匹配含有title屬性的a標簽

2. E[attr=value] 匹配含有attr屬性并且值為value的E元素

eg: a[title=前端]{color:black;}

匹配含有title屬性并且值為前端的a標簽

3. E[attr^=value] 匹配含有attr屬性并且值以value開頭的E元素

eg: a[href^=http]{font-size:12px;}

匹配含有href屬性并且屬性值以http開頭的a標簽

4. E[attr$=value] 匹配含有attr屬性并且值以value結尾的E元素

eg: a[href$=com]{color:blue;}

匹配含有href屬性并且屬性值以com結尾的a標簽

5. E[attr~=value] 匹配含有attr屬性并且屬性值列表中含有value這個詞的E元素

eg: a[title~=培訓]{color:red;}

匹配含有title屬性，并且屬性值列表中含有培訓這個詞的a標簽

6. E[attr*=value] 匹配含有attr屬性并且屬性值列表中含有value這個字的E元素

eg: a[title*=培訓]{color:yellow;}

匹配含有title屬性，并且屬性值列表中含有培訓兩個字的a標簽

7. E[attr|=value] 匹配含有attr屬性，并且值以value-開頭或值為value的E元素

eg: a[class|=link]{color:blue;}

匹配含有class屬性并且值以link-開頭或值為link的a標簽

七、否定偽類選擇器

語法： E:not(F) 匹配不滿足條件F的E元素

eg: li:not([class=lis]){color:red;}

匹配不滿足條件class=lis的li元素

八、語言偽類選擇器

語法： E:lang(val) 匹配指定了lang屬性，并且值為val的E元素

九、偽元素

1. E:before 在E元素所有內容之前添加一個偽元素

eg: .box:before{

content:”hello”;

font-size:32px;

…

}

2. E:after 在E元素所有內容之后添加一個偽元素

eg: .box:after{

content:””;

display:block;

clear:both;

height:0;

overflow:hidden;

visibility:hidden;

}

注：:after常用于清除浮動

偽元素是一個內聯元素

不管內容是否為空，都不能省略content

3. :first-line 匹配段落文本中的第一行

4. :first-letter 匹配段落文本中的第一個字符

5. ::selection 改變選中文字的效果

注：針對火狐內核的兼容寫法如下：

p::-moz-selection{color:red;}

十、漸進增強和優雅降級

1.漸進增強

一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。

eg: .box{ /*漸進增強寫法*/

-webkit-transition: all .5s;

-moz-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

2.優雅降級

一開始就構建站點的完整功能，然后針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。

eg: .box{ /*優雅降級寫法*/

transition: all .5s;

-webkit-transition: all .5s;

-moz-transition: all .5s;

-o-transition: all .5s;

}

注：css3屬性針對不同內核的兼容寫法：

對webkit內核 -webkit-

針對火狐內核 -moz-

針對opera內核 -o-

針對IE內核 -ms-

擴展：如何使用border實現三角的效果，方法如下：

元素{

width:0;

height:0;

border:3px solid transparent;

border-top-color:blue; /*top還可以根據需要更改為bottom,right,left*/

}

css3圓角，陰影

一、圓角

語法： border-radius:數值+單位;

1.設置一個值

border-radius:20px; 四個方向圓角都為20px

2.設置兩個值

border-radius:50px 10px; 左上，右下為50px,右上，左下為10px

3.設置三個值

border-radius:50px 0px 10px; 左上為50px,右上和左下為0,右下為10px

4.設置四個值

border-radius:0px 10px 30px 60px; 順時針方向依次為左上0，右上10，右下30，左下60

5.用/設置圓角

border-radius:50px/100px;

第一組值代表水平半徑為50px,/后的第二組值代表垂直半徑為100px

6.還可以單獨設置某一個方向的圓角

border-top-left-radius:10px;

注：border-top-left-radius:20px 50px; 水平半徑為20px,垂直半徑為50px

7.設置為圓

border-radius:50%;

二、多色彩邊框

語法： .box{-moz-border-top-colors:black red yellow;}

注：只有低版本的火狐瀏覽器支持

三、圖像邊框

1.設置圖像邊框的路徑

語法：border-image-source:url(圖片路徑);

2.設置圖像邊框的裁剪位置

語法：border-image-slice:數值;

注：a)設置數值專指像素

b) 如何需要中間部分顯示出來，需要添加fill

eg: border-image-slice:27 fill;

3.設置圖像邊框的平鋪屬性

語法：border-image-repeat:stretch|repeat|round;

a)stretch 默認值，圖像被拉伸

b)repeat 圖片默認平鋪，當碰到邊界時則會被截斷

c)round 圖片會根據邊框的尺寸動態調整圖片的大小直至正好可以鋪滿整個邊框。

eg: border-image-repeat:round stretch;

代表水平方向鋪滿，垂直方向拉伸

四、文本陰影

語法： text-shadow:水平偏移量垂直偏移量模糊度顏色值;

eg: text-shadow:5px 5px 3px black,8px 8px 5px #999;

注：a) 多組陰影的值用逗號分隔

b) 水平偏移量向右為正，向左為負，垂直偏移量向下為正，向上為負

c) 模糊度最小值為0，不允許設置負值

擴展：文字描邊，語法如下：

-webkit-text-stroke:3px blue;

五、盒陰影

語法：box-shadow:水平偏移量垂直偏移量模糊度擴展半徑顏色值;

eg: box-shadow:5px 5px 10px #333,8px 8px 12px #666;

注：盒陰影默認為外陰影，如果需要設置內陰影，寫法如下：

eg: box-shadow:inset 3px 3px 5px #333,inset 5px 5px 8px #666;

注：當設置了擴展半徑后，一般水平和垂直偏移量設置為0

eg: box-shadow:0px 0px 5px 10px red;

box-shadow:inset 0px 0px 5px 10px red;

css3彈性布局

一、分欄布局

1.設置欄數

語法： column-count:數值;

2.設置每欄的寬度

語法：column-width:數值+單位;

注：column-count和column-width設置其中一個屬性即可

3.設置欄間距

語法：column-gap:數值+單位;

4.設置欄分隔線

語法：column-rule:寬度 solid|dashed|dotted 顏色;

eg: column-rule:3px dashed blue;

5.設置是否跨欄顯示

語法：column-span:all(跨欄顯示)|none(不跨欄顯示);

注：該屬性給需要跨欄顯示的元素添加

二、彈性布局

語法：display:flex;

說明：

a) 當給元素設置了display:flex;該元素就成為了彈性盒

b) 當給父元素設置彈性盒后，子元素的float,clear,vertical-align將會失效

c) 我們把設置了display:flex;屬性的元素叫做flex容器，把里面的子元素叫做flex項目

d) 當給元素設置了彈性盒以后，隨之會產生兩根軸線：主軸和交叉軸

◆ Flex容器屬性

1.改變主軸的方向

語法：flex-direction:row|row-reverse|column|column-reverse;

row 默認值，主軸在水平方向，起點在左端

row-reverse 主軸在水平方向，起點在右端

column 主軸在垂直方向，起點在上沿

column-reverse 主軸在垂直方向，起點在下沿

2.設置flex項目是單行顯示還是多行顯示

語法：flex-wrap:nowrap|wrap|wrap-reverse;

nowrap 默認值，不換行

wrap 換行

wrap-reverse 與wrap相似，但是行的順序是倒過來的

3.flex-direction和flex-wrap的簡寫方式

語法：flex-flow:row nowrap;

4.設置主軸對齊方式

語法：justify-content:flex-start|flex-end|center|space-between|space-around;

flex-start 類似于左浮動

flex-end 類似于右浮動

center flex項目居中對齊

space-between flex項目兩端對齊，中間間隔相等

space-around flex項目兩側間隔相等

5.設置交叉軸對齊方式

語法：align-items:flex-start|flex-end|center|baseline|stretch;

flex-start 對齊交叉軸的起點

flex-end 對齊交叉軸的終點

center 以交叉軸為參考，居中對齊

baseline flex項目第一行文字基線對齊

stretch flex項目沒有設置高度或者為auto，將占滿整個父元素的高度

———————————————–

★ 如何使用flex布局實現不定寬高的元素在屏幕窗口水平垂直都居中，方法如下：

html,body{height:100%;}

body{display:flex;justify-content:center;align-items:center;}

★ 如何使用flex布局實現不定寬高的子元素在父元素中水平垂直都居中，方法如下：

父元素{display:flex;justify-content:center;align-items:center;}

———————————————–

6.設置多根軸線對齊方式(如果只有一根軸線，該屬性不起作用)

flex-start 對齊交叉軸的起點

flex-end 對齊交叉軸的終點

center 以交叉軸為參考，居中對齊

space-between 軸線兩端對齊，中間間隔相等

space-around 軸線間兩側間隔相等

stretch flex項目沒有設置高度或者高度為auto，將占滿整個父元素的高度

◆ Flex項目屬性

1.改變flex項目排列順序

語法：order:0|數值;

注：默認值為0,值越小越靠前

2.設置某個flex項目不同于其他flex項目的交叉軸對齊方式

語法：align-self:flex-start|flex-end|center|baseline|stretch;

注：屬性值的使用方法同align-items屬性

3.設置flex項目的放大比例

語法：flex-grow:0|數值;

注：flex-grow默認值為0即使存在剩余空間也不放大

4.設置flex項目的縮小比例

語法：flex-shrink:1|數值;

注：flex-shrink默認值為1,當flex容器剩余空間不足時，flex項目等比例縮小

注：flex-shrink:0; 即使flex容器空間不足，flex項目也不縮小

5.設置flex項目占據主軸的空間

語法：flex-basis:數值+單位;

注：flex-basis默認值為auto

6.flex-grow,flex-shrink,flex-basis的簡寫方式

語法：flex:0 1 auto; (默認值)

注：flex:1; 完整寫法：flex:1 1 0%;

主要應用在兩個方面：

a) 等比例分配空間

b) 將剩余空間分配給某個元素

三、響應式布局

概念—寫一套css樣式可以應用在多個終端設備

優點：可以同時適配多個終端，靈活性更強

缺點：工作量增加，會造成代碼冗余，加載時間加長

原理：媒體查詢

四、媒體查詢

1.外聯式媒體查詢

語法：

注：當屏幕窗口大于等于960px時，引用blue.css文件

當屏幕窗口小于等于960px時，引用red.css文件

2.內嵌式媒體查詢

語法：

@media screen and (min-width:320px) and (max-width:960px){

body{

background:red;

}

注：當屏幕窗口大于等于320px,小于等于960px時，body背景色為紅色

標準盒模型和怪異盒模型

一、標準盒模型和怪異盒模型

標準盒模型是由content,padding,border,margin四部分組成

怪異盒模型是由content,margin組成

標準盒模型的總寬度=width+左右padding+左右border+左右margin

標準盒模型的總高度=height+上下padding+上下border+上下margin

怪異盒模型的總寬度=width+左右margin

怪異盒模型的總高度=height+上下margin

注：當網頁沒有添加文檔聲明時，就會觸發某些瀏覽器(如IE6)的怪異模式

二、box-sizing常用屬性值有哪些及其含義？

1.box-sizing:border-box;

將標準盒模型轉換為怪異盒模型，總寬高不包括padding和border

2.box-sizing:content-box;

將怪異盒模型轉換為標準盒模型，總寬高包含padding和border

———————————————–

擴展：如何自定義字體

語法： @font-face{

font-family:字體名稱;

src:url(字體文件路徑);

}

body{

font-family:字體名稱;

}

css3移動端布局

一、移動端相關概念

1.屏幕尺寸

屏幕尺寸是指屏幕對角線的長度，單位為英寸，1英寸=2.54厘米

2.屏幕分辨率

屏幕分辨率是指橫縱方向上的像素點數，單位為px，1個像素點=1px

(這里的1px是指物理設備上的一個像素點)

常見移動端設備屏幕分辨率：

iphone6,6s,7,8 1334*750

iponee6plus,7plus,8plus 1920*1080

注：移動端設備一般為縱向像素*橫向像素

3.ppi

屏幕每英寸可以顯示的像素點數，即屏幕像素密度，單位為ppi

計算公式：

4.dpr

dpr是devicePixelRatio的簡寫，指物理像素與邏輯像素的比值

物理像素：屏幕分辨率

邏輯像素：寫在css文件中的像素值，即要顯示在設備上的像素值

常見設備dpr值：

iphone6,7,8 dpr=2

iphone6plus,7plus,8plus dpr=3

5.移動端meta設置

注：讓視圖窗口的寬度等于設備的寬度

快捷鍵：meta:vp+tab鍵

二、常見移動端布局方案

1.百分比布局(流式布局)

特點：文字流式，控件彈性，圖片等比例縮放

頂部和底部的bar不管分辨率怎么變，高度和位置都不變

案例：拉勾網

注：適用于內容較少比較簡單的移動端頁面

2.等比例縮放布局(rem布局)

特點：使用rem為主要單位進行頁面布局，很好的實現了在不同設備上頁面等比例縮放

案例：網易

注：適用于頁面內容較多較復雜的移動端頁面

3.混合布局

特點：混合布局是指將多種布局方式(如flex布局，圣杯布局，百分比布局等)融合在一起實現移動端的屏幕適配的方法

案例：淘寶網

三、移動端相關單位

1.px

像素，相對于屏幕分辨率而言

2.em

相對于父元素字體大小放大或縮小多少倍

1em = 16px

3.rem

相對于根元素字體大小放大或縮小多少倍

4.vw

vw是viewport width的縮寫，即視圖窗口的寬度

1vw = 視窗寬度的1%

vh是指視圖窗口的高度

vmin是vw和vh中較小值

vmax是vw和vh中較大值

css3基礎變形

一、css3基礎變形

語法： transform:rotate(旋轉)|scale(縮放)|skew(傾斜)|translate(位移);

1.旋轉(rotate)

a) rotateX(180deg) 沿x軸翻轉等價于 rotate3d(1,0,0,180deg)

b) rotateY(180deg) 沿y軸翻轉等價于 rotate3d(0,1,0,180deg)

c) rotateZ(180deg) 沿z軸翻轉等價于 rotate3d(0,0,1,180deg)

d) rotate(60deg) 不指定軸時，是2d空間的旋轉，正值為順時針，負值為逆時針

注：rotate旋轉的單位是deg

2.縮放(scale)

a) scaleX(1.5) 沿x軸縮放，默認值為1，不放大不縮小，大于1為放大，小于1為縮小

b) scaleY(1.5) 沿y軸縮放

c) scale(1.5) 沿x軸和y軸同時縮放

d) scale(-1.5) 先翻轉后縮放

3.傾斜(skew)

a) skewX(30deg) 沿x軸傾斜

b) skewY(-30deg) 沿y軸傾斜

c) skew(30deg) 不指定軸時，默認沿x軸傾斜

d) skew(30deg,30deg) x軸和y軸同時傾斜

skewX(30deg) skewY(30deg) x軸和y軸同時傾斜

注：兩種寫法傾斜效果不同

skew傾斜單位為deg

4.位移(translate)

a) translateX(100px) 沿x軸位移，向右為正，向左為負

b) translateY(-100px) 沿y軸位移，向下為正，向上為負

c) translateZ(100px) 沿z軸位移，向前為正，向后為負

d) translate(100px) 不指定軸時，默認沿x軸位移

e) translate(100px,100px) x軸和y軸同時位移

translateX(100px) translateY(100px)x軸和y軸同時位移

◆ 使用變形實現不定寬高元素在屏幕窗口水平垂直都居中，方法如下：

元素{

position:fixed;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

◆ 使用變形實現不定寬高的子元素在父元素中水平垂直都居中，方法如下：

父元素{

position:relative;

}

子元素{

position:absolute;

left:50%;

top:50%;

transform:translateX(-50%) translateY(-50%);

}

二、變形綜合

當多種變形方式綜合在一起時，順序不同，效果有可能不同，例如：

eg1: transform:rotate(360deg) scale(1.5);

transform:scale(1.5) rotate(360deg);

順序不同，效果相同

eg2: transform:translateX(300px) rotate(360deg);

transform:rotate(360deg) translateX(300px);

順序不同，效果不同

三、改變變形元素中心點位置

語法：transform-origin:left|center|right top|center|bottom;

四、設置元素的變形類型

語法：transform-style:flat(默認值)|preserve-3d;

flat 默認值，2d空間的變形

preserve-3d 3d空間的變形

五、透視，井深

語法：perspective:數值+單位;

eg: 父元素{perspective:1500px;}

eg: 子元素{transform:perspective(800px) rotateY(60deg);}

注：perspective主要用來設置元素3d效果的強度

transition過渡動畫

一、transition過渡動畫

語法：transition:過渡屬性過渡時間過渡方式過渡延遲時間;

eg: transition:all 1s;

1.transition-property(過渡屬性)

取值：

none 沒有屬性發生過渡

all 所有發生變化的屬性都添加過渡動畫

ident 指定發生過渡的屬性列表

eg: transition:transform 1s,background 2s,border-radius 3s;

2.transition-duration(過渡時間)

取值：

0 不執行過渡，直接看到結果

time 指定過渡時間，單位為s

3.transition-delay(過渡延遲時間)

取值：

0 不延遲，直接執行過渡動畫

正值按照設定的時間延遲執行過渡動畫

負值設定時間前的動畫將會被截斷

4.transition-timing-function(過渡方式)

取值：

ease 默認值

linear 勻速運動

ease-in 加速運動

ease-out 減速運動

ease-in-out 慢-快-慢

二、animation動畫

☆ 動畫關鍵幀

語法： @keyframes 動畫名稱{

0%{

屬性:屬性值;

}

50%{

屬性:屬性值;

}

…

100%{

屬性:屬性值;

}

@keyframes 動畫名稱{

from{

屬性:屬性值;

}

50%{

屬性:屬性值;

}

…

to{

屬性:屬性值;

}

———————————————–

語法： animation:動畫名稱動畫執行時間動畫延遲執行時間動畫播放次數動畫播放狀態;

1.animation-name(動畫名稱)

eg: animation:box_ani 1s;

注：此處的動畫名稱要和@keyframes中的動畫名稱一致

2.animation-duration(動畫執行一次所需時間)

取值：

0 動畫不執行

time 正數，單位為s或者ms

3.animation-delay(動畫延遲執行時間)

取值：

0 不延遲，動畫立即執行

正數按照設定的時間延遲執行動畫

負數設定時間前的動畫將會被截斷

4.animation-iteration-count(動畫播放次數)

取值：

number 自定義動畫執行次數，設置值可為0或正整數

infinite 無限循環播放

5.animation-play-state(設置對象動畫的狀態)

取值：

running 默認值，運動

paused 動畫暫停

6.animation-timing-function(對象動畫過渡類型)

取值：

ease

linear 勻速運動

ease-in

ease-out

ease-in-out

step-start 馬上轉跳到動畫結束狀態，或者轉跳到下一幀，中間沒有過渡

step-end 保持動畫開始時的狀態，直到動畫結束時，馬上轉跳到動畫結束狀態

steps(n,start|end) n代表動畫分幾步完成

7. animation-direction(設置對象動畫運動的方向)

取值：

normal 默認值，正常方向運動

reverse 與normal運動方向始終相反

alternate 正反方向交替運動，奇數次正方向，偶數次反方向

alternate-reverse 奇數次反方向，偶數次正方向

8.animation-fill-mode (設置對象動畫時間之外的狀態)

取值：

none 默認值，不設置時間之外的狀態

forwards 保持動畫結束時的狀態

backwards 保持動畫開始時的狀態

both 動畫遵循forwards和backwards兩個規則

擴展：

隱藏翻轉元素的背面，語法如下：backface-visibility:hidden;

css3背景，漸變，蒙版

一、背景切割

語法：background-clip:border-box|padding-box|content-box;

作用：設置背景在哪個區域可見

border-box 默認值.背景在邊框已經邊框以內的區域可見

padding-box 背景在padding區域和content區域可見

content-box 背景在content區域可見

二、背景原點

語法：background-origin:border-box|padding-box|content-box;

作用：設置背景圖原點的定位區域

padding-box 默認值，背景原點從padding區域開始

border-box 背景原點從border區域開始

content-box 背景原點從content區域開始

三、背景切割&背景原點

可以將背景切割和背景原點結合使用

eg: background-clip:content-box;

background-origin:border-box;

背景原點從border區域開始，背景在content區域可見

四、背景尺寸

語法：background-size:數值|100%|cover|contain;

1.length

該數值用來設置背景圖的寬度和高度，第一個值代表寬度，第二個值代表高度，如果省略第二個值，為auto,等比例縮放

eg: background-size:100px 200px; (背景圖有可能發生變形)

background-size:100px; (背景圖有可能超出容器,不會發生變形)

2.百分比

以容器的百分比來設置背景圖的寬度和高度

eg: background-size:100% 100%;(背景圖不會超出容器，但是背景圖有可能發生變形)

background-size:100%;(背景圖有可能超出容器，但是背景圖不會發生變形)

3.cover

把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像有可能超出容器，背景圖不會發生變形

eg: background-size:cover;

4.contain

把圖像擴展至最大尺寸，以使寬度和高度完全適應內容區域。背景圖像始終被包含在容器內,背景圖不會發生變形

五、rgba模式

語法： background:rgba(r,g,b,a); a代表透明度，取值范圍0~1

eg: background:rgba(0,0,0,.4);

注：rgba模式和opacity的區別：

a) 給容器添加opacity,容器中的文字和圖片也會跟隨透明

b) rgba模式只是給容器的背景添加一定的透明度，容器中的文本和圖片不會跟隨透明

———————————————–

擴展：hsla模式

語法： background:hsla(h,s,l,a);

h 色調，取值范圍0~360

s 飽和度，取值范圍0%~100%

l 亮度，取值范圍0%~100%

a 透明度，取值范圍0~1

———————————————-

六、線性漸變

語法： background:linear-gradient(漸變方向,顏色起始位置,顏色起始位置);

eg: background:linear-gradient(to right,red 0%,yellow 30%,blue 50%);

注：重復的線性漸變寫法如下：

background:repeating-linear-gradient(to right,red 0%,yellow 15%,blue 25%);

注：設置重復的線性漸變，必須指定漸變的位置

七、徑向漸變

語法：background:-webkit-radial-gradient(漸變中心點位置,漸變形狀漸變半徑長度,顏色起始位置,顏色起始位置);

eg: background:-webkit-radial-gradient(left top,circle closest-side,red 0%,yellow 10%);

注：重復的徑向漸變寫法：

background:-webkit-repeating-radial-gradient(center,red 0%,yellow 10%);

注：設置重復的徑向漸變，必須指定漸變的位置

———————————————–

擴展一蒙版

語法： -webkit-mask-image:url(圖片路徑)|使用漸變作為蒙版圖片; -webkit-mask-repeat:no-repeat|repeat-x|repeat-y|repeat;

-webkit-mask-position:center;

擴展二背景在文字區域可見

語法： -webkit-background-clip:text;

注：設置此屬性需要將文字顏色設置為透明，即 color:transparent;

擴展三：倒影

語法： -webkit-box-reflect:left|right|above(上)|below(下) 偏移量倒影漸變;

———————————————–

八、BFC

1.概念

BFC——block formatting context (塊級格式化上下文)

2.如何觸發BFC

a) 設置了float除none以外的值(left,right)

b) 設置了overflow除visible以外的值(hidden,scroll,auto)

c) 設置了display屬性(table-cell,inline-block,flex)

d) 設置position屬性(absolute,fixed)

3.BFC的作用

a) 解決上下margin重疊問題

給設置margin的元素外邊再嵌套一個父元素，并設置overflow:hidden;這樣就給里面的元素創建了一個塊級格式化上下文

b) 常用來清除浮動，解決高度塌陷問題

給父元素設置overflow:hidden;就給里面浮動的子元素創建了一個塊級格式化上下文，閉合了浮動

c) 用于實現多欄布局

與浮動元素相鄰的已生成BFC的元素不能與浮動元素互相覆蓋。利用該特性可以作為多欄布局的一種實現方式

概述

1.1 介紹

在項目開發過程中，有很多業務模塊的代碼是具有一定規律性的，例如controller控制器、service接口、service實現類、mapper接口、model實體類等等，這部分代碼可以使用代碼生成器生成，我們就可以將更多的時間放在業務邏輯上。

傳統的開發步驟：

創建數據庫和表根據表設計實體類 ? 編寫mapper接口 ? 編寫service接口和實現類 ? 編寫controller控制器 ? 編寫前端頁面 ? 前后端聯調

基于代碼生成器開發步驟：

創建數據庫和表 ? 使用代碼生成器生成實體類、mapper、service、controller、前端頁面 ? 將生成好的代碼拷貝到項目中并做調整 ? 前后端聯調

我們只需要知道數據庫和表相關信息，就可以結合模版生成各個模塊的代碼，減少了很多重復工作，也減少出錯概率，提高效率。

1.2 實現思路

（1）需要對數據庫表解析獲取到元數據，包含表字段名稱、字段類型等等

（2）將通用的代碼編寫成模版文件，部分數據需使用占位符替換

（3）將元數據和模版文件結合，使用一些模版引擎工具（例如freemarker）即可生成源代碼文件

2 Freemarker

2.1 介紹

FreeMarker 是一款模板引擎：即一種基于模板和要改變的數據，并用來生成輸出文本(HTML網頁，電子郵件，配置文件，源代碼等)的通用工具。它不是面向最終用戶的，而是一個Java類庫，是一款程序員可以嵌入他們所開發產品的組件。

模板編寫為FreeMarker Template Language (FTL)。它是簡單的，專用的語言，在模板中，你可以專注于如何展現數據，而在模板之外可以專注于要展示什么數據。

2.2 應用場景

（1）動態頁面

freemarker可以作為springmvc一種視圖格式，像jsp一樣被瀏覽器訪問。

（2）頁面靜態化

對于一些內容比較多，更新頻率很小，訪問又很頻繁的頁面，可以使用freemarker靜態化，減少DB的壓力，提高頁面打開速度。

（3）代碼生成器

根據配置生成頁面和代碼，減少重復工作，提高開發效率。

2.3 快速入門

（1）創建freemarker-demo模塊，并導入相關依賴

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.itheima</groupId>
    <artifactId>freemarker-demo</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.1.RELEASE</version>
    </parent>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
        <!-- freemarker -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>
        <!-- lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>
</project>

（2）application.yml相關配置

server:
  port: 8881 #服務端口
spring:
  application:
    name: freemarker-demo #指定服務名
  freemarker:
    cache: false #關閉模板緩存，方便測試
    settings:
      template_update_delay: 0 #檢查模板更新延遲時間，設置為0表示立即檢查，如果時間大于0會有緩存不方便進行模板測試
    suffix: .ftl #指定Freemarker模板文件的后綴名

（3）創建啟動類

package com.heima.freemarker;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class FreemarkerDemotApplication {
    public static void main(String[] args) {
        SpringApplication.run(FreemarkerDemotApplication.class,args);
    }
}

（4）創建Student模型類

package com.itheima.freemarker.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Date;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Student {
    private Integer id;
    private String name;//姓名
    private Integer age;//年齡
    private Date birthday;//生日
    private Float money;//錢包
}

（5）創建StudentController

package com.itheima.freemarker.controller;

import com.itheima.freemarker.entity.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.Date;

@Controller
@RequestMapping("student")
public class StudentController {

    @GetMapping("index")
    public String index(Model model){
        //1.純文本形式的參數
        model.addAttribute("name", "Freemarker");

        //2.實體類相關的參數
        Student student = new Student();
        student.setName("黑馬");
        student.setAge(18);
        model.addAttribute("stu", student);

        return "01-index";
    }
}

（6）在resources/templates下創建01-index.ftl模版文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首頁</title>
</head>
<body>
<b>普通文本 String 展示：</b><br/>
Hello ${name} <br>

<hr>
<b>對象Student中的數據展示：</b><br/>
姓名：${stu.name}<br/>
年齡：${stu.age}
<hr>
</body>
</html>

（7）測試

瀏覽器訪問 http://localhost:8881/student/index

效果如下

2.4 模版

2.4.1 基礎語法種類

（1）注釋，即<#-- -->，介于其之間的內容會被freemarker忽略

<#--我是一個freemarker注釋-->

（2）插值（Interpolation）：即 ${..} 部分,freemarker會用真實的值代替${..}

Hello ${name}

（3）FTL指令：和HTML標記類似，名字前加#予以區分，Freemarker會解析標簽中的表達式或邏輯。

<# >FTL指令</#>

（4）文本，僅文本信息，這些不是freemarker的注釋、插值、FTL指令的內容會被freemarker忽略解析，直接輸出內容。

<#--freemarker中的普通文本-->
我是一個普通的文本

2.4.2 if指令

if 指令即判斷指令，是常用的FTL指令，freemarker在解析時遇到if會進行判斷，條件為真則輸出if中間的內容，否則跳過內容不再輸出。

格式如下

<#if condition>
  ....
<#elseif condition2>
  ...
<#elseif condition3>   
  ...
<#else>
  ...
</#if>

需求：根據年齡輸出所處的年齡段

童年：0歲—6歲(周歲，下同) 少年：7歲—17歲青年：18歲—40歲中年：41—65歲老年：66歲以后

實例代碼：

（1）在01-index.ftl添加如下代碼

<#if stu.age <= 6>
童年
<#elseif stu.age <= 17>
少年
<#elseif stu.age <= 40>   
青年
<#elseif stu.age <= 65>   
中年
<#else>
老年
</#if>

（2）測試

瀏覽器訪問http://localhost:8881/student/index

效果如下

2.4.3 list指令

list指令時一個迭代輸出指令，用于迭代輸出數據模型中的集合

格式如下

<#list items as item>
    ${item_index + 1}------${item}-----<#if item_has_next>,</#if>
</#list>

迭代集合對象時，包括兩個特殊的循環變量：（1）item_index：當前變量的索引值。（2）item_has_next:是否存在下一個對象

item_index 和 item_has_nex 中的item為<#list items as item> 中as后面的臨時變量

需求：遍歷學生集合，輸出序號，學生id，姓名，所處的年齡段，是否最后一條數據

（1）在StudentController中增加方法

@GetMapping("list")
public String list(Model model) throws ParseException {
    List<Student> list = new ArrayList<>();

    list.add(new Student(1001,"張飛",15, null, 1000.11F));
    list.add(new Student(1002,"劉備",28, null, 5000.3F));
    list.add(new Student(1003,"關羽",45, null, 9000.63F));
    list.add(new Student(1004,"諸葛亮",62, null, 10000.99F));
    list.add(new Student(1005,"成吉思汗",75, null, 16000.66F));
    model.addAttribute("stus",list);

    return "02-list";
}

（2）在resources/templates目錄下創建02-list.ftl模版

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>列表頁面</title>
    <style>
        table{
            border-spacing: 0;/*把單元格間隙設置為0*/
            border-collapse: collapse;/*設置單元格的邊框合并為1*/
        }
        td{
            border:1px solid #ACBED1;
            text-align: center;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <td>序號</td>
        <td>id</td>
        <td>姓名</td>
        <td>所處的年齡段</td>
        <td>生日</td>
        <td>錢包</td>
        <td>是否最后一條數據</td>
    </tr>
    <#list stus as stu >
        <tr>
            <td>${stu_index + 1}</td>
            <td>${stu.id}</td>
            <td>${stu.name}</td>
            <td>
                <#if stu.age <= 6>
                    童年
                <#elseif stu.age <= 17>
                    少年
                <#elseif stu.age <= 40>   
                    青年
                <#elseif stu.age <= 65>   
                    中年
                <#else>
                    老年
                </#if>
            </td>
            <td></td>
            <td>${stu.money}</td>
            <td>
                <#if stu_has_next>
                否
                <#else>
                是
                </#if>
            </td>
        </tr>
    </#list>
</table>

<hr>
</body>
</html>

（2）測試

瀏覽器訪問http://localhost:8881/student/list

效果如下

2.4.4 include指令

include指令的作用類似于JSP的包含指令，用于包含指定頁，include指令的語法格式如下

<#include filename [options]></#include>

（1）filename：該參數指定被包含的模板文件（2）options：該參數可以省略，指定包含時的選項，包含encoding和parse兩個選項，encoding 指定包含頁面時所使用的解碼集，而parse指定被包含是否作為FTL文件來解析。如果省略了parse選項值，則該選項值默認是true

需求："早上好,尊敬的某某用戶!" 這句話在很多頁面都有用到，請合理設計！

（1）在resources/templates目錄下創建00-head.ftl模版，內容如下

早上好,尊敬的 ${name} 用戶!

（2）在resources/templates目錄下創建03-include.ftl模版，使用include引入00-head.ftl模版，內容如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>詳情頁</title>
</head>
<body>

<#include "00-head.ftl" />
<br>
歡迎來到黑馬程序員。

</body>
</html>

（3）在StudentController中增加方法

@GetMapping("include")
public String include(Model model) throws ParseException {
model.addAttribute("name", "黑馬");
return "03-include";
}

（4）測試

瀏覽器訪問http://localhost:8881/student/include

效果如下

2.4.5 assign指令

它用于為該模板頁面創建或替換一個頂層變量

<#assign name = "zhangsan" />

2.4.6 運算符

（1）算數運算符

FreeMarker表達式中完全支持算術運算,FreeMarker支持的算術運算符包括:

加法： +
減法： -
乘法： *
除法： /
求模 (求余)： %

（2）比較運算符

=或者==:判斷兩個值是否相等.
!=:判斷兩個值是否不等.
>或者gt:判斷左邊值是否大于右邊值
>=或者gte:判斷左邊值是否大于等于右邊值
<或者lt:判斷左邊值是否小于右邊值
<=或者lte:判斷左邊值是否小于等于右邊值

比較運算符注意

=和!=可以用于字符串、數值和日期來比較是否相等
=和!=兩邊必須是相同類型的值,否則會產生錯誤
字符串 "x" 、"x " 、"X"比較是不等的.因為FreeMarker是精確比較
其它的運行符可以作用于數字和日期,但不能作用于字符串
使用gt等字母運算符代替>會有更好的效果,因為 FreeMarker會把>解釋成FTL標簽的結束字符
可以使用括號來避免這種情況,如:<#if (x>y)>

（3）邏輯運算符

邏輯與:&&
邏輯或:||
邏輯非:!

邏輯運算符只能作用于布爾值,否則將產生錯誤。

2.4.7 空值處理

（1）缺失變量默認值使用 “!”

使用!要以指定一個默認值，當變量為空時顯示默認值
例： ${name!''}表示如果name為空顯示空字符串。
如果是嵌套對象則建議使用（）括起來
例： ${(stu.bestFriend.name)!''}表示，如果stu或bestFriend或name為空默認顯示空字符串。

（2）判斷某變量是否存在使用 “??”

用法為:variable??,如果該變量存在,返回true,否則返回false

例：為防止stus為空報錯可以加上判斷如下：

    <#if stus??>
        <#list stus as stu>
            ......
        </#list>
    </#if>

2.4.8 內建函數

內建函數語法格式： 變量+?+函數名稱

（1）求集合的大小

${集合名?size}

（2）日期格式化

顯示年月日: ${today?date} 顯示時分秒：${today?time} 顯示日期+時間：${today?datetime} 自定義格式化： ${today?string("yyyy年MM月")}

（3）內建函數c

model.addAttribute("point", 102920122);

point是數字型，使用${point}會顯示這個數字的值，每三位使用逗號分隔。

如果不想顯示為每三位分隔的數字，可以使用c函數將數字型轉成字符串輸出

${point?c}

（4）將json字符串轉成對象

一個例子：

其中用到了 assign標簽，assign的作用是定義一個變量。

<#assign text="{'bank':'工商銀行','account':'10101920201920212'}" />
<#assign data=text?eval />
開戶行：${data.bank}  賬號：${data.account}

（5）常見內建函數匯總

?html:html字符轉義
?cap_first: 字符串的第一個字母變為大寫形式
?lower_case :字符串的小寫形式
?upper_case :字符串的大寫形式
?trim:去掉字符串首尾的空格
?substring(from,to):截字符串  from是第一個字符的開始索引，to最后一個字符之后的位置索引，當to為空時，默認的是字符串的長度
?lenth: 取長度
?size: 序列中元素的個數
?int: 數字的整數部分（比如 -1.9?int 就是 -1）
?replace(param1,param2):字符串替換  param1是匹配的字符串 param2是將匹配的字符替換成指定字符

內建函數測試demo1

（1）在StudentController新增方法：

@GetMapping("innerFunc")
public String testInnerFunc(Model model) {
    //1.1 小強對象模型數據
    Student stu1 = new Student();
    stu1.setName("小強");
    stu1.setAge(18);
    stu1.setMoney(1000.86f);
    stu1.setBirthday(new Date());
    //1.2 小紅對象模型數據
    Student stu2 = new Student();
    stu2.setName("小紅");
    stu2.setMoney(200.1f);
    stu2.setAge(19);
    //1.3 將兩個對象模型數據存放到List集合中
    List<Student> stus = new ArrayList<>();
    stus.add(stu1);
    stus.add(stu2);
    model.addAttribute("stus", stus);
    // 2.1 添加日期
    Date date = new Date();
    model.addAttribute("today", date);
    // 3.1 添加數值
    model.addAttribute("point", 102920122);
    return "04-innerFunc";
}

（2）在resources/templates目錄下創建04-innerFunc.ftl模版頁面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>inner Function</title>
</head>
<body>

    <b>獲得集合大小</b><br>

    集合大小：${stus?size}
    <hr>


    <b>獲得日期</b><br>

    顯示年月日: ${today?date}       <br>

    顯示時分秒：${today?time}<br>

    顯示日期+時間：${today?datetime}<br>

    自定義格式化：  ${today?string("yyyy年MM月")}<br>

    <hr>

    <b>內建函數C</b><br>
    沒有C函數顯示的數值：${point} <br>

    有C函數顯示的數值：${point?c}

    <hr>

    <b>聲明變量assign</b><br>
    <#assign text="{'bank':'工商銀行','account':'10101920201920212'}" />
    <#assign data=text?eval />
    開戶行：${data.bank}  賬號：${data.account}

<hr>
</body>
</html>

（3）測試

瀏覽器訪問http://localhost:8881/student/innerFunc

效果如下

內建函數測試demo2

需求：遍歷學生集合，顯示集合總條數，id不要逗號隔開，顯示學生的生日（只顯示年月日），錢包顯示整數并顯示單位元，用戶姓名做脫敏處理（如果是兩個字第二個字顯示為星號，例如張三顯示為張*，如果大于兩個字，中間字顯示為星號，例如成吉思汗顯示為成*汗，諸葛亮顯示為諸*亮）

（1）修改StudentController中的list方法，

@GetMapping("list")
public String list(Model model) throws ParseException {
    DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    List<Student> list = new ArrayList<>();

    list.add(new Student(1001,"張三",15, dateFormat.parse("2007-10-01 10:00:00"), 1000.11F));
    list.add(new Student(1002,"李四",28, dateFormat.parse("1994-10-01 10:00:00"), 5000.3F));
    list.add(new Student(1003,"王五",45, dateFormat.parse("1977-10-01 10:00:00"), 9000.63F));
    list.add(new Student(1004,"趙六",62, dateFormat.parse("1960-10-01 10:00:00"), 10000.99F));
    list.add(new Student(1005,"孫七",75, dateFormat.parse("1947-10-01 10:00:00"), 16000.66F));
    model.addAttribute("stus",list);

    return "02-list";
}

（2）修改02-list.ftl模版

共${stus?size}條數據：輸出總條數

stu.id后面加?c：id不需要逗號分割

stu.birthday后面加?date：生日只輸出年月日

stu.money后面加?int：金額取整

姓名需要使用replace和substring函數處理

完整內容如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>列表頁面</title>
    <style>
        table{
            border-spacing: 0;/*把單元格間隙設置為0*/
            border-collapse: collapse;/*設置單元格的邊框合并為1*/
        }
        td{
            border:1px solid #ACBED1;
            text-align: center;
        }
    </style>
</head>
<body>
共${stus?size}條數據
<table>
    <tr>
        <td>序號</td>
        <td>id</td>
        <td>姓名</td>
        <td>所處的年齡段</td>
        <td>生日</td>
        <td>錢包</td>
        <td>是否最后一條數據</td>
    </tr>
    <#list stus as stu >
        <tr>
            <td>${stu_index + 1}</td>
            <td>${stu.id?c}</td>
            <td>
                <#if stu.name?length=2>
                    ${stu.name?replace(stu.name?substring(1), "*")}
                <#else>
                    ${stu.name?replace(stu.name?substring(1, stu.name?length-1), "*")}
                </#if>
            </td>
            <td>
                <#if stu.age <= 6>
                    童年
                <#elseif stu.age <= 17>
                    少年
                <#elseif stu.age <= 40>   
                    青年
                <#elseif stu.age <= 65>   
                    中年
                <#else>
                    老年
                </#if>
            </td>
            <td>${stu.birthday?date}</td>
            <td>${stu.money?int}元</td>
            <td>
                <#if stu_has_next>
                否
                <#else>
                是
                </#if>
            </td>
        </tr>
    </#list>
</table>

<hr>
</body>
</html>

（3）測試

瀏覽器訪問http://localhost:8881/student/list

效果如下

2.4.9 靜態化

（1）springboot整合freemarker靜態化文件用法

編寫springboot測試用例

package com.itheima.test;

import com.itheima.freemarker.FreemarkerDemoApplication;
import com.itheima.freemarker.entity.Student;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;

import java.io.FileWriter;
import java.io.IOException;
import java.util.*;

@SpringBootTest(classes = FreemarkerDemoApplication.class)
@RunWith(SpringRunner.class)
public class FreemarkerTest {

    //注入freemarker配置類
    @Autowired
    private Configuration configuration;

    @Test
    public void test() throws IOException, TemplateException {
        Template template = configuration.getTemplate("04-innerFunc.ftl");
        /**
         * 靜態化并輸出到文件中   參數1：數據模型     參數2：文件輸出流
         */
        template.process(getData(), new FileWriter("d:/list.html"));
        /**
         * 靜態化并輸出到字節輸出流中
         */
        //StringWriter out = new StringWriter();
        //template.process(getData(), out);
        //System.out.println(out.toString());
    }


    private Map getData(){

        Map<String,Object> map = new HashMap<>();

        Student stu1 = new Student();
        stu1.setName("小強");
        stu1.setAge(18);
        stu1.setMoney(1000.86f);
        stu1.setBirthday(new Date());

        //小紅對象模型數據
        Student stu2 = new Student();
        stu2.setName("小紅");
        stu2.setMoney(200.1f);
        stu2.setAge(19);

        //將兩個對象模型數據存放到List集合中
        List<Student> stus = new ArrayList<>();
        stus.add(stu1);
        stus.add(stu2);

        //向model中存放List集合數據
        map.put("stus",stus);


        //map數據
        Map<String,Student> stuMap = new HashMap<>();
        stuMap.put("stu1",stu1);
        stuMap.put("stu2",stu2);

        map.put("stuMap",stuMap);
        //日期
        map.put("today",new Date());

        //長數值
        map.put("point",38473897438743L);

        return map;

    }
}

（2）freemarker原生靜態化用法

package com.itheima.freemarker.test;

import com.itheima.freemarker.entity.Student;
import freemarker.cache.FileTemplateLoader;
import freemarker.cache.NullCacheStorage;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
import freemarker.template.TemplateExceptionHandler;

import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.util.*;

public class FreemarkerTest {

    public static void main(String[] args) throws IOException, TemplateException {
        //創建配置類
        Configuration CONFIGURATION = new Configuration(Configuration.VERSION_2_3_22);
        //設置模版加載路徑

        //ClassTemplateLoader方式：需要將模版放在FreemarkerTest類所在的包，加載模版時會從該包下加載
        //CONFIGURATION.setTemplateLoader(new ClassTemplateLoader(FreemarkerTest.class,""));

        String path = java.net.URLDecoder.decode(FreemarkerTest.class.getClassLoader().getResource("").getPath(),"utf-8");
        //FileTemplateLoader方式：需要將模版放置在classpath目錄下 目錄有中文也可以
        CONFIGURATION.setTemplateLoader(new FileTemplateLoader(new File(path)));

        //設置編碼
        CONFIGURATION.setDefaultEncoding("UTF-8");
        //設置異常處理器
        CONFIGURATION.setTemplateExceptionHandler(TemplateExceptionHandler.RETHROW_HANDLER);
        //設置緩存方式
        CONFIGURATION.setCacheStorage(NullCacheStorage.INSTANCE);
        //加載模版
        Template template = CONFIGURATION.getTemplate("templates/04-innerFunc.ftl");
        /**
         * 靜態化并輸出到文件中   參數1：數據模型     參數2：文件輸出流
         */
        template.process(getModel(), new FileWriter("d:/list.html"));
        /**
         * 靜態化并輸出到字節輸出流中
         */
        //StringWriter out = new StringWriter();
        //template.process(getData(), out);
        //System.out.println(out.toString());
    }


    public static Map getModel(){
        Map map = new HashMap();
        //1.1 小強對象模型數據
        Student stu1 = new Student();
        stu1.setName("小強");
        stu1.setAge(18);
        stu1.setMoney(1000.86f);
        stu1.setBirthday(new Date());
        //1.2 小紅對象模型數據
        Student stu2 = new Student();
        stu2.setName("小紅");
        stu2.setMoney(200.1f);
        stu2.setAge(19);
        //1.3 將兩個對象模型數據存放到List集合中
        List<Student> stus = new ArrayList<>();
        stus.add(stu1);
        stus.add(stu2);
        map.put("stus", stus);
        // 2.1 添加日期
        Date date = new Date();
        map.put("today", date);
        // 3.1 添加數值
        map.put("point", 102920122);
        return map;
    }
}

3 數據庫元數據

3.1 介紹

元數據（Metadata）是描述數據的數據。

數據庫元數據（DatabaseMetaData）就是指定義數據庫各類對象結構的數據。

在mysql中可以通過show關鍵字獲取相關的元數據

show status; 獲取數據庫的狀態
show databases; 列出所有數據庫
show tables; 列出所有表
show create database [數據庫名]; 獲取數據庫的定義
show create table [數據表名]; 獲取數據表的定義
show columns from <table_name>; 顯示表的結構
show index from <table_name>; 顯示表中有關索引和索引列的信息
show character set; 顯示可用的字符集以及其默認整理
show collation; 顯示每個字符集的整理
show variables; 列出數據庫中的參數定義值

也可以從 information_schema庫中獲取元數據，information_schema數據庫是MySQL自帶的信息數據庫，它提供了訪問數據庫元數據的方式。存著其他數據庫的信息。

select schema_name from information_schema.schemata; 列出所有的庫
select table_name FROM information_schema.tables; 列出所有的表

在代碼中可以由JDBC的Connection對象通過getMetaData方法獲取而來，主要封裝了是對數據庫本身的一些整體綜合信息，例如數據庫的產品名稱，數據庫的版本號，數據庫的URL，是否支持事務等等。

DatabaseMetaData的常用方法：

getDatabaseProductName：獲取數據庫的產品名稱
getDatabaseProductName：獲取數據庫的版本號
getUserName：獲取數據庫的用戶名
getURL：獲取數據庫連接的URL
getDriverName：獲取數據庫的驅動名稱
driverVersion：獲取數據庫的驅動版本號
isReadOnly：查看數據庫是否只允許讀操作
supportsTransactions：查看數據庫是否支持事務

3.2 搭建環境

（1）導入mysql依賴

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.47</version>
</dependency>

（2）創建測試用例

package com.itheima.test;

import org.junit.Before;
import org.junit.Test;

import java.sql.*;
import java.util.Properties;

public class DataBaseMetaDataTest {
    private Connection conn;

    @Before
    public void init() throws Exception {
        Properties pro = new Properties();
        pro.setProperty("user", "root");
        pro.setProperty("password", "123456");
        pro.put("useInformationSchema", "true");//獲取mysql表注釋
        //pro.setProperty("remarksReporting","true");//獲取oracle表注釋
        conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/?useUnicode=true&characterEncoding=UTF8", pro);
    }   
}

3.3 綜合信息元數據

（1）獲取數據庫元信息綜合信息

@Test
public void testDatabaseMetaData() throws SQLException {
    //獲取數據庫元數據
    DatabaseMetaData dbMetaData = conn.getMetaData();
    //獲取數據庫產品名稱
    String productName = dbMetaData.getDatabaseProductName();
    System.out.println(productName);
    //獲取數據庫版本號
    String productVersion = dbMetaData.getDatabaseProductVersion();
    System.out.println(productVersion);
    //獲取數據庫用戶名
    String userName = dbMetaData.getUserName();
    System.out.println(userName);
    //獲取數據庫連接URL
    String userUrl = dbMetaData.getURL();
    System.out.println(userUrl);
    //獲取數據庫驅動
    String driverName = dbMetaData.getDriverName();
    System.out.println(driverName);
    //獲取數據庫驅動版本號
    String driverVersion = dbMetaData.getDriverVersion();
    System.out.println(driverVersion);
    //查看數據庫是否允許讀操作
    boolean isReadOnly = dbMetaData.isReadOnly();
    System.out.println(isReadOnly);
    //查看數據庫是否支持事務操作
    boolean supportsTransactions = dbMetaData.supportsTransactions();
    System.out.println(supportsTransactions);
}

（2）獲取數據庫列表

@Test
public void testFindAllCatalogs() throws Exception {
    //獲取元數據
    DatabaseMetaData metaData = conn.getMetaData();
    //獲取數據庫列表
    ResultSet rs = metaData.getCatalogs();
    //遍歷獲取所有數據庫表
    while (rs.next()) {
        //打印數據庫名稱
        System.out.println(rs.getString(1));
    }
    //釋放資源
    rs.close();
    conn.close();
}

（3）獲取某數據庫中的所有表信息

@Test
public void testFindAllTable() throws Exception {
    //獲取元數據
    DatabaseMetaData metaData = conn.getMetaData();
    //獲取所有的數據庫表信息
    ResultSet rs = metaData.getTables("庫名", "%", "%", new String[]{"TABLE"});
    //拼裝table
    while (rs.next()) {
        //所屬數據庫
        System.out.println(rs.getString(1));
        //所屬schema
        System.out.println(rs.getString(2));
        //表名
        System.out.println(rs.getString(3));
        //數據庫表類型
        System.out.println(rs.getString(4));
        //數據庫表備注
        System.out.println(rs.getString(5));
        System.out.println("--------------");
    }
}

（4）獲取某張表所有的列信息

@Test
public void testFindAllColumns() throws Exception {
    //獲取元數據
    DatabaseMetaData metaData = conn.getMetaData();
    //獲取所有的數據庫某張表所有列信息
    ResultSet rs = metaData.getColumns("庫名", "%", "表名","%");

    while(rs.next()) {
        //表名
        System.out.println(rs.getString("TABLE_NAME"));
        //列名
        System.out.println(rs.getString("COLUMN_NAME"));
        //類型碼值
        System.out.println(rs.getString("DATA_TYPE"));
        //類型名稱
        System.out.println(rs.getString("TYPE_NAME"));
        //列的大小
        System.out.println(rs.getString("COLUMN_SIZE"));
        //小數部分位數,不適用的類型會返回null
        System.out.println(rs.getString("DECIMAL_DIGITS"));
        //是否允許使用null
        System.out.println(rs.getString("NULLABLE"));
        //列的注釋信息
        System.out.println(rs.getString("REMARKS"));
        //默認值
        System.out.println(rs.getString("COLUMN_DEF"));
        //是否自增
        System.out.println(rs.getString("IS_AUTOINCREMENT"));
        //表中的列的索引（從 1 開始
        System.out.println(rs.getString("ORDINAL_POSITION"));
        System.out.println("--------------");
    }
}

3.4 參數元數據

參數元數據（ParameterMetaData）：是由PreparedStatement對象通過getParameterMetaData方法獲取而來，主要是針對PreparedStatement對象和其預編譯的SQL命令語句提供一些信息，ParameterMetaData能提供占位符參數的個數，獲取指定位置占位符的SQL類型等等以下有一些關于ParameterMetaData的常用方法：

getParameterCount：獲取預編譯SQL語句中占位符參數的個數

@Test
public void testParameterMetaData() throws Exception {
    String sql = "select * from health.t_checkgroup where id=? and code=?";
    PreparedStatement pstmt = conn.prepareStatement(sql);
    pstmt.setString(1, "7");
    pstmt.setString(2, "0003");
    //獲取ParameterMetaData對象
    ParameterMetaData paramMetaData = pstmt.getParameterMetaData();
    //獲取參數個數
    int paramCount = paramMetaData.getParameterCount();
    System.out.println(paramCount);
}

3.5 結果集元數據

結果集元數據（ResultSetMetaData）：是由ResultSet對象通過getMetaData方法獲取而來，主要是針對由數據庫執行的SQL腳本命令獲取的結果集對象ResultSet中提供的一些信息，比如結果集中的列數、指定列的名稱、指定列的SQL類型等等，可以說這個是對于框架來說非常重要的一個對象。以下有一些關于ResultSetMetaData的常用方法：

getColumnCount：獲取結果集中列項目的個數
getColumnType：獲取指定列的SQL類型對應于Java中Types類的字段
getColumnTypeName：獲取指定列的SQL類型
getClassName：獲取指定列SQL類型對應于Java中的類型(包名加類名

@Test
public void testResultSetMetaData() throws Exception {
    String sql = "select * from health.t_checkgroup where id=?";
    PreparedStatement pstmt = conn.prepareStatement(sql);
    pstmt.setString(1, "7");
    //執行sql語句
    ResultSet rs = pstmt.executeQuery();
    //獲取ResultSetMetaData對象
    ResultSetMetaData metaData = rs.getMetaData();
    //獲取查詢字段數量
    int columnCount = metaData.getColumnCount();
    System.out.println("字段總數量："+ columnCount);
    for (int i = 1; i <= columnCount; i++) {
        //獲取表名稱
        System.out.println(metaData.getColumnName(i));
        //獲取java類型
        System.out.println(metaData.getColumnClassName(i));
        //獲取sql類型
        System.out.println(metaData.getColumnTypeName(i));
        System.out.println("----------");
    }
}

4 代碼生成器環境搭建

4.1 創建maven工程

創建maven工程并導入以下依賴

<properties>
    <java.version>11</java.version>
    <!-- 項目源碼及編譯輸出的編碼 -->
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <!-- 項目編譯JDK版本 -->
    <maven.compiler.source>11</maven.compiler.source>
    <maven.compiler.target>11</maven.compiler.target>
</properties>

<dependencies>
    <dependency>
        <groupId>org.freemarker</groupId>
        <artifactId>freemarker</artifactId>
        <version>2.3.23</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.47</version>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.8</version>
    </dependency>
    <dependency>
        <groupId>org.apache.commons</groupId>
        <artifactId>commons-lang3</artifactId>
        <version>3.10</version>
    </dependency>
</dependencies>

目錄結構如下

在線咨詢

上一篇：javascript教程 10例子
下一篇：Chrome 開發者工具的 11 個高級使用技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

酷炫網頁制作之《HTML認識及基礎標簽使用》，分分鐘搞定

么是HTML

HTML文檔基本結構

meta

title

文本排版標簽

html特殊字符/轉義字符

html注釋

圖像標簽

超鏈接

div標簽

HBuilder常用快捷鍵

概述

1.1 介紹

1.2 實現思路

2 Freemarker

2.1 介紹

2.2 應用場景

2.3 快速入門

2.4 模版

2.4.1 基礎語法種類

2.4.2 if指令

2.4.3 list指令

2.4.4 include指令

2.4.5 assign指令

2.4.6 運算符

2.4.7 空值處理

2.4.8 內建函數

2.4.9 靜態化

3 數據庫元數據

3.1 介紹

3.2 搭建環境

3.3 綜合信息元數據

3.4 參數元數據

3.5 結果集元數據

4 代碼生成器環境搭建

4.1 創建maven工程

您的項目需求