整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
Hyper Text Markup Language, 超文本標記語言
標記又稱為標簽(Tag), 一般語法:
<tagName></tagName>
它可以有屬性(Attribute):
<tagName attributeName="value">, 如:
<meta charset="utf-8" />
標簽也可以不成對地關(guān)閉:
<tagName />
HTML文檔由瀏覽器解釋并執(zhí)行。
<!DOCTYPE html> ----- 告訴瀏覽器用html5的標準來解釋和執(zhí)行該網(wǎng)頁
<html>
<head> ---- 頭部, 可包含meta, title等標簽
</head>
<body> ---- 主體, 包含主要內(nèi)容
</body>
</html>
<meta charset="utf-8" /> 用于告訴瀏覽器用什么樣的字符編碼來解釋網(wǎng)頁中的文本.
常見編碼:
iso-8859-1: 純英文編碼
gbk, gb2312: 簡體中文編碼
big5: 大五碼,繁體中文編碼,主要應(yīng)用于臺灣地區(qū)
utf-8: 國際首選編碼,它兼容所有的字符
除此之外, meta還可以通過keywords, description屬性對頁面關(guān)鍵詞及描述信息進行設(shè)置, 以提高搜索引擎的命中.
網(wǎng)頁標題, 顯示在瀏覽器選項卡的標題欄上!
h1-h6: 內(nèi)容標題標簽
p: 段落
br: 換行
hr: 水平線
strong: 粗體文本
em: 斜體文本
span: 無任何特殊樣式的文本
pre: 預格式標簽,其中的內(nèi)容在頁面上帶格式渲染
small: 比當前字體小的文本
空格
< 小于
> 大于
? 版權(quán)符
" 雙引號
<!-- 注釋內(nèi)容 -->
<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是一個容器, 常用于頁面的布局
標簽的分類:
1. 塊級標簽/塊級元素
如: div, h1-h6, p, hr
特征: 獨占容器中的一行, 其寬度是容器的100%
2. 行級標簽/行級元素
如: span, img, strong, em, a
特征1: 多個行級元素可以同處一行, 其寬度由內(nèi)容來撐開(auto)
特征2: 大部分行級元素設(shè)置其width/height無效
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標準是網(wǎng)頁制作的標準，它不是一個標準，而是由一系列標準組成。
web標準包含了三個方面：結(jié)構(gòu)（html）,表現(xiàn)(css),行為(javascript或js)
注：a）W3C—萬維網(wǎng)聯(lián)盟，制定了結(jié)構(gòu)和表現(xiàn)的標準
b) ECMA—歐洲電腦廠商聯(lián)合會，制定了行為標準
二、html相關(guān)概念
1.html—超文本標記語言
2.xhtml—可擴展的超文本標記語言
3.html5—html的第五次重大修改
注：html和xhtml的區(qū)別
xhtml相對于html4.0并沒有增加新的標簽，只是語法要求更加嚴格，例如標簽名稱小寫，標簽必須閉合
三、DW常用快捷鍵
1.新建文件 ctrl+n
2.保存文件 ctrl+s
3.預覽網(wǎng)頁 F12
4.打開文件 ctrl+o
5.打開首選參數(shù)面板 ctrl+u
6.撤銷 ctrl+z
7.恢復 ctrl+y
8.查找和替換 ctrl+f
9.顯示或隱藏文件面板 F8
四、html基本結(jié)構(gòu)
1.文檔聲明
作用：告知瀏覽器網(wǎng)頁使用哪種html或xhtml規(guī)范
h5的文檔聲明： <!doctype html> 或 <!DOCTYPE HTML> 或 <!DOCTYPE html>
2.網(wǎng)頁根標簽（根元素）：<html>…</html>
所有網(wǎng)頁的內(nèi)容及標簽都要放置在html標簽之間
3.html中的內(nèi)容分為兩大部分：head部分和body部分
a)head部分：主要用來設(shè)置字符編碼，網(wǎng)頁標題，關(guān)鍵詞，描述，引入一些外部css文件，js文件等
b)body部分：所有要在網(wǎng)頁中呈現(xiàn)的內(nèi)容和放置內(nèi)容的標簽都要放在body部分
注：常用字符編碼格式為utf-8,還有g(shù)bk,gb2312
五、html基本語法
1.常規(guī)標記
語法： <標記 屬性=”屬性值” 屬性=”屬性值”></標記>
eg: <h3 class=”tit” id=”box”>前端開發(fā)</h3>
注：a）標記名稱要小寫
b) 屬性和屬性值用等號連接，屬性值要加雙引號
c)屬性和標記之間要加空格，多個屬性之間用空格隔開
d) 所有標點符號都必須是英文狀態(tài)下的
2.空標記
語法： <標記 屬性=”屬性值” 屬性=”屬性值”/>
eg: <img src=”1.jpg” title=”圖片”/>
六、html常用標記
1.網(wǎng)頁內(nèi)容標題
語法： <hx>標題內(nèi)容</hx> (x為1-6)
eg: <h3>前端開發(fā)</h3>
注：h1-h6都有加粗效果，字體逐漸減小
2.段落文本
語法： <p>段落文本內(nèi)容</p>
3.換行
語法：<br/>
4.空格（html轉(zhuǎn)義字符）
5.加粗文本
語法： <strong>加粗文本內(nèi)容</strong>
<b>加粗文本內(nèi)容</b>
6.傾斜文本
語法：<em>傾斜文本內(nèi)容</em>
<i>傾斜文本內(nèi)容</i>
7.水平分隔線
語法： <hr/>
8.上標和下標
語法：上標： <sup>上標</sup>
下標： <sub>下標</sub>
※9.無序列表
語法： <ul>
<li>aaa</li>
…
</ul>
10.有序列表
語法：<ol type=”a|A|I|i” start=”2″>
<li>aaa</li>
…
</ol>
擴展：type用來設(shè)置序號的類型
start用來設(shè)置索引值
11.自定義列表
語法： <dl>
<dt>名詞</dt>
<dd>解釋</dd>
…
</dl>
—————————————————
相對路徑的三種寫法：
a）當當前文件和目標文件在同一目錄下，寫法如下：目標文件名+擴展名
b）當當前文件和目標文件所在文件夾在同一目錄下，寫法如下：目標文件所在文件夾名/目標文件名+擴展名
c）當當前文件所在文件夾和目標文件所在文件夾在同一目錄下，寫法如下：
../目標文件所在文件夾名/目標文件名+擴展名
注: ../代表返回到上一級目錄
—————————————————
※12.圖片
語法： <img src=”圖片路徑” title=”提示信息” alt=”替換信息” width=”數(shù)值” height=”數(shù)值”/>
eg: <img src=”img/1.jpg” title=”前端開發(fā)” alt=”加載失敗” width=”100″ height=”100″/>
注：alt和title的區(qū)別
alt是當圖片由于某些原因無法正常加載時顯示的替換信息
title是當鼠標懸停在圖片上時顯示的提示信息
※13.超鏈接
語法： <a href=”鏈接地址” target=”_blank” title=”***”>鏈接文本或圖片</a>
eg: <a href=”http://www.baidu.com” target=”_blank”>百度一下</a>
<a href=”http://www.1000phone.com” target=”_blank”><img src=”1.jpg” title=”前端開發(fā)”/></a>
<a href=”#”>新聞</a> 空鏈接
注：target=”_blank” 鏈接地址在新窗口打開
擴展：href和src的區(qū)別：
a）href表示超文本引用。用來建立當前元素和文檔之間的鏈接。常用的有：link、a
b）src是source的縮寫，src指向的內(nèi)容會嵌入到文檔中當前標簽所在的位置。常用的有img，script
14.表格
作用：顯示數(shù)據(jù)
語法：<table border=”1″ cellspacing=”0″ cellpadding=”0″>
<tr align=”center” height=”30″>
<th width=”100″>姓名</th>
…
</tr>
<tr align=”center” height=”30″>
<td width=”100″>姓名</td>
…
</tr>
…
</table>
注：表格相關(guān)html標簽
1）table 用來定義一個表格
2）tr 定義表格的行
3）td 定義表格的列
4）th 定義表格的表頭(自動加粗居中)
5）caption 定義表格的標題
6）thead 定義表格的頁眉
7）tbody 定義表格的主體
8）tfoot 定義表格的頁腳
注：表格相關(guān)html屬性
a) border 設(shè)置表格的邊框
b) cellspacing 設(shè)置單元格之間的間距
c) cellpadding 設(shè)置內(nèi)容和單元格之間的空隙
d) width 定義單元格的寬度和表格的寬度
e) height 定義單元格的高度或表格的高度
f) align 設(shè)置單元格內(nèi)容的水平對齊方式 align=”left|center|right”
g) colspan 合并列（加在td上）
h) rowspan 合并行（加在td上）
表單
一、表單
作用：用來搜集用戶信息
語法： <form method=”get|post” action=”服務(wù)器端文件”>…</form>
注：所有的表單控件都要放置在form標簽之間
1.文本框
語法： <input type=”text” value=”***”/>
2.密碼框
語法：<input type=”password”/>
3.提交按鈕
語法： <input type=”submit” value=”登錄”/>
注：通過設(shè)置value屬性改變按鈕的默認文字內(nèi)容
提交按鈕和要提交的表單內(nèi)容必須放在一個form標簽中，才能提交
4.重置按鈕
語法：<input type=”reset”/>
注：重置按鈕必須放在form中才具備重置功能
5.單選按鈕
語法：<input type=”radio” name=”a” checked=”checked”/>
注：a)一組中的單選按鈕添加一致的name屬性值，才能達到多選其一的效果
b)設(shè)置checked=”checked”,在頁面加載完成后添加默認選中項
c)當屬性和屬性值相同時，可以省略屬性值
6.復選按鈕
語法： <input type=”checkbox” checked/>
注：checked屬性的設(shè)置同單選按鈕
7.下拉列表
語法：<select>
<option>a</option>
<option selected>b</option>
…
</select>
注：設(shè)置selected屬性改變默認選中項
8.文本域
語法：<textarea cols=”字符寬度” rows=”行數(shù)”></textarea>
擴展： 禁止用戶隨意拖拽改變文本域的大小，設(shè)置如下：
textarea{resize:none;}
9.普通按鈕
語法： <input type=”button” value=”***”/>
注：普通按鈕不具備提交功能，一般結(jié)合js的onclick事件使用
普通按鈕上的默認文字內(nèi)容為空，需要通過value屬性進行設(shè)置
注：disabled=”disabled” 設(shè)置表單控件為禁用狀態(tài)
◆ get和post的區(qū)別
1）get主要用來獲取數(shù)據(jù)，post主要用來向服務(wù)器發(fā)送數(shù)據(jù)
2）get發(fā)送數(shù)據(jù)時，信息會顯示在url地址欄中，post直接通過服務(wù)器發(fā)送，用戶看不到這個過程
3) get可以傳送的數(shù)據(jù)量較小，一般不能大于2kb，post可以傳送的數(shù)據(jù)量較大，理論上沒有限制
4) get安全性較低，post安全性較高
二、div
作用：無語義標簽，主要用來布局和劃分板塊
語法： <div>…</div>
三、span
語法： <span>…</span>
作用：
a)標簽沒有固定的格式表現(xiàn)。當對它應(yīng)用樣式時，它才會產(chǎn)生視覺上的變化。
b)span標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式
四、iframe框架
語法：<iframe src=”1.html表單.html” width=”800″ frameborder=”0″ scrolling=”auto”></iframe>
注：scrolling=”no” 隱藏或去掉iframe的滾動條
作用：創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架
五、html注釋
語法： <!–注釋內(nèi)容–>
css基礎(chǔ)
一、css概念及特點
css—層疊樣式表
特點：實現(xiàn)了結(jié)構(gòu)與表現(xiàn)相分離
作用：定義html元素如何在網(wǎng)頁中顯示
二、css基礎(chǔ)語法
css由選擇器和聲明兩大部分組成，聲明又是由屬性和屬性值組成。即：
選擇器{屬性:屬性值;}
eg: h1{color:red;}
注：a）聲明要放在花括號中,每條聲明結(jié)束要加分號
b) 屬性和屬性值用冒號連接
c) 建議一條聲明占一行
三、樣式表的創(chuàng)建
1.內(nèi)聯(lián)樣式（行間樣式，行內(nèi)樣式）
語法：<標記 style=”屬性:屬性值;”></標記>
eg: <h1 style=”color:red;”>前端開發(fā)</h1>
2.內(nèi)部樣式（嵌入式樣式）
語法：<style type=”text/css”>
選擇器{屬性:屬性值;}
</style>
eg: <style type=”text/css”>
h1{color:red;}
</style>
注：style標簽一般放在head部分
3.外部樣式表
a）使用link標簽引入
首先創(chuàng)建一個后綴名為.css的文件
然后通過link標簽引入，語法如下：
<link rel=”stylesheet” type=”text/css” href=”css文件路徑”/>
注：rel是用來建立外部文件和本文件之間的關(guān)系
link標簽一般放在head部分
b)使用@import引入css文件
語法： @import “css文件路徑”;
★ link和@import引入外部樣式的區(qū)別 ★
1）link屬于html標簽，除了可以引入css文件以外，還可以引入其他文件，@import屬于css范疇，只能引入css文件（老祖宗的區(qū)別）
2）link引入的css文件和頁面同時加載，@import引入的css文件在頁面加載完成后載入（加載順序不同）
3）link引入css文件無兼容性問題，所有瀏覽器都支持，@import低版本瀏覽器不支持（瀏覽器支持不同）
4）link是html標簽，支持js改變dom，@import不支持（是否支持js改變dom）
四、樣式表的優(yōu)先級
樣式表的優(yōu)先級
采取就近原則，即離被設(shè)置的元素越近，優(yōu)先級越高
當css屬性值中出現(xiàn)!important的時候，它的優(yōu)先級最高即：
!important>內(nèi)聯(lián)>內(nèi)部>外部
五、css注釋
語法： /*注釋內(nèi)容*/
六、css選擇器
1.id選擇器
語法：<標記 id=”id名”></標記>
#id名{屬性:屬性值;}
eg: <h1 id=”edu”>前端開發(fā)</h1>
#edu{color:red;}
注：a）id選擇器優(yōu)先級最高，id名是唯一的，不能出現(xiàn)同名的id
b) id名命名要語義化，常見命名方法：
I.駝峰命名法 id=”mainLoginContent”
II.下劃線連接命名法 id=”main_login_con”
2.類選擇器(class選擇器)
語法：<標記 class=”類名”></標記>
.類名{屬性:屬性值;}
eg: <h1 class=”tit”>前端開發(fā)</h1>
.tit{color:red;}
注：可以給具有相同樣式的元素添加相同的class名
注：類名詞列表用法：
<h3 class=”tit focus”>新聞資訊</h3>
當一個元素即具有與其他元素相同的樣式，又有某一個樣式不同時，需要用到類名詞列表的方式
3.后代選擇器（包含選擇器）
語法： 選擇符1 選擇符2{屬性:屬性值;}
eg: .box a{color:red;}
注：選擇符1和選擇符2必須滿足是包含與被包含的關(guān)系，才能使用后代選擇器
css核心屬性
一、字體類屬性
1.字體類型
語法： font-family:字體1,字體2,字體3;
eg: body{font-family:”Microsoft YaHei”,Arial;}
或 body{font-family:”微軟雅黑”,Arial;}
注：a）font-family設(shè)置多個字體時，用逗號分隔
b）中文字體要加雙引號，英文字體由多個單詞組成也要加雙引號
c）瀏覽器會優(yōu)先識別字體1,如果找不到識別字體2，如果所列出的字體都無法識別，顯示瀏覽器默認字體
d）特殊字體一律用圖片
2.字體大小
語法：font-size:數(shù)值+單位;
eg: p{font-size:12px;}
注：a)字體大小一般設(shè)置偶數(shù)不設(shè)置奇數(shù)
b)瀏覽器默認字體大小為16px
c)字體大小單位有px,em,rem,pt等
注： font-size:16px; 等價于 font-size:medium;
3.字體加粗
語法：font-weight:normal(常規(guī)字體)|bold(加粗字體)|bolder(加粗字體)|100-900;
eg: h3{font-weight:normal;}
注：100-500為常規(guī)字體，600-900為加粗字體
4.字體傾斜
語法：font-style:normal(常規(guī)字體)|italic(傾斜)|oblique(傾斜);
5.字體是否大小寫
語法：font-variant:normal(常規(guī)字體)|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:數(shù)值+單位;
eg: line-height:32px;
注：a）當單行文本的行高等于容器高時，可以實現(xiàn)單行文本在定高容器中垂直居中
b) line-height不允許設(shè)置負值
c) line-height的屬性值只寫數(shù)值不加單位時，代表行高為字體大小的多少倍
3.文本修飾
語法：text-decoration:none(沒有修飾)|underline(下劃線)|line-through(刪除線)|overline(上劃線);
eg: a{text-decoration:none;}
a:hover{text-decoration:underline;}
CSS盒模型
一、css盒模型的概念及組成
css盒模型的概念—css盒模型是css的基石，主要用來設(shè)置元素間的相互關(guān)系，每個html元素都有自己的盒模型。
css盒模型的組成—由content(主體),padding(補白，填充)，border(邊框)，margin(外邊距)組成。
1.content
語法：width:數(shù)值+單位;
height:數(shù)值+單位;
注：width和height的屬性值必須加單位
2.padding(content和border之間的區(qū)域)
a）設(shè)置一個值
padding:20px; 上，下，左，右均為20px
b）設(shè)置兩個值
padding:20px 5px; 上下為20px，左右為5px
c）設(shè)置三個值
padding:20px 5px 10px;上為20px，左右為5px，下為10px
d）設(shè)置四個值
padding:20px 5px 10px 0px;
順時針順序依次為：上20px，右5px，下10px,左0px
e) 還可以單獨設(shè)置某一個方向的padding值
eg: padding-left:20px; （left還可以更改為top，right，bottom）
注：
I.如果元素設(shè)置了寬高，設(shè)置padding后，要在原來寬高的基礎(chǔ)上減去設(shè)置的padding值，保證總寬高不變
II.padding不允許設(shè)置負值
III.背景可以延伸到padding區(qū)域
IV.當需要調(diào)整子元素在父元素中的位置關(guān)系時，可以通過給父元素設(shè)置padding來實現(xiàn)
容器溢出
一、容器溢出
語法：overflow:visible|hidden|scroll|auto|inherit;
visible 默認值，內(nèi)容不會被裁剪，顯示在容器之外
hidden 內(nèi)容會被裁剪，隱藏不可見
scroll 溢出部分的內(nèi)容以滾動條的形式查看，如果沒有溢出，顯示默認的滾動條
auto 容器溢出時顯示滾動條
inherit 規(guī)定從父元素繼承overflow屬性值
還可以單獨設(shè)置某一個方向的溢出：
overflow-x:hidden|scroll|auto;
overflow-y:hidden|scroll|auto;
二、文本溢出
語法：text-overflow:clip(不顯示省略號)|ellipsis(顯示省略號);
三、單行文本省略號的設(shè)置
四個條件缺一不可：
（a）設(shè)置固定的寬度 width:value;
（b）設(shè)置文本強制在一行顯示 white-space:nowrap;
（c）設(shè)置容器溢出隱藏 overflow:hidden;
（d）設(shè)置文本溢出顯示省略號 text-overflow:ellipsis;
注：I.此方法只適用于單行文本省略號的設(shè)置，如果是多行文本顯示省略號可以使用js或由后端來處理
II.上述四個屬性必須給文本所在最近的父元素設(shè)置
元素類型及轉(zhuǎn)換
一、html元素類型
html元素分為三大類：塊元素，內(nèi)聯(lián)元素，可變元素
注：也可將html元素分為這樣三類：塊元素，內(nèi)聯(lián)元素，內(nèi)聯(lián)塊狀元素
1.塊元素
常見塊元素：div,p,ul,ol,li,dl,dt,dd,form,table,tr,td,hr,h1,h2,h3,h4,h5,h6,fieldset
塊狀元素特點：
a) 塊狀元素以塊的形式顯示為一個矩形區(qū)域
b) 塊狀元素默認情況下，獨占一行，自上而下排列
c) 塊狀元素可以定義自己的寬度和高度，以及盒模型中的任意屬性（如margin，padding，border）
d) 塊狀元素可以作為一個容器容納其他的塊元素和內(nèi)聯(lián)元素
2.內(nèi)聯(lián)元素
常見內(nèi)聯(lián)元素：a,span,strong,b,i,em,br,img,input,select,textarea
內(nèi)聯(lián)元素特點：
a) 內(nèi)聯(lián)元素沒有自己的形狀，也顯示為一個矩形區(qū)域
b) 內(nèi)聯(lián)元素在一行逐個進行顯示
c) 內(nèi)聯(lián)元素不能定義寬度和高度，以及與高度相關(guān)的一些屬性（margin-top,margin-bottom,padding-top,padding-bottom,line-height）
d) 內(nèi)聯(lián)元素不能嵌套塊元素
常見內(nèi)聯(lián)塊狀元素：img,input,select,textarea
內(nèi)聯(lián)塊狀元素特點：
a) 即具有內(nèi)聯(lián)元素特點，在一行逐個進行顯示
b) 又具有塊狀元素特點，可以定義寬度和高度，以及盒模型中的任意屬性
注：vertical-align屬性只針對內(nèi)聯(lián)塊狀元素有效
3.可變元素
根據(jù)上下文關(guān)系決定元素類型，可變范圍塊元素和內(nèi)聯(lián)元素
注：常用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
二、元素類型轉(zhuǎn)換
語法：display:block|inline|inline-block|none|list-item;
a)block 將元素轉(zhuǎn)換為塊元素，是大部分塊元素的默認display屬性值
b)inline 將元素轉(zhuǎn)換為內(nèi)聯(lián)元素，是內(nèi)聯(lián)元素的默認display屬性值
c)inline-block 將元素轉(zhuǎn)換為內(nèi)聯(lián)塊狀元素，是內(nèi)聯(lián)塊狀元素的默認display屬性值（如img,input）
d)none 將元素隱藏不可見
e)list-item 將元素轉(zhuǎn)換為列表類型，是li的默認display屬性值
—————————————————
擴展：圖片默認有空隙：
方案一：給img添加display:block;
方案二：給img添加float屬性
—————————————————
注：當給元素設(shè)置了float后就相當于轉(zhuǎn)換成block
三、置換元素和非置換元素
1.置換元素
瀏覽器根據(jù)元素的標簽和屬性，來決定元素的具體顯示內(nèi)容。
例如：根據(jù)img標簽的src屬性決定在網(wǎng)頁中顯示什么樣的圖片
根據(jù)input標簽的type屬性決定在網(wǎng)頁中顯示什么類型的input控件
2.非置換元素
除了置換元素，大部分html元素都是非置換元素，其內(nèi)容直接顯示在瀏覽器中
（缺內(nèi)容）
定位及錨點設(shè)置
一、常見的三種布局模型
1.流動模型（Flow）
元素沒有設(shè)置css樣式的布局，塊元素自上而下排列，內(nèi)聯(lián)元素在一行逐個進行顯示
2.浮動模型（Float）
使用float屬性進行網(wǎng)頁布局，可以讓塊元素脫離文檔流在一行顯示，可以讓內(nèi)聯(lián)元素設(shè)置寬高并且在一行顯示
3.層模型（Layer）
使用position定位屬性進行布局
二、定位布局
語法：position:static(默認值)|absolute(絕對定位)|relative(相對定位)|fixed(固定定位);
1.絕對定位
語法：position:absolute;
要成為絕對定位元素的參照物，必須滿足以下兩個條件：
a)參照物和絕對定位元素必須是包含與被包含關(guān)系
b)參照物必須具有定位屬性
如果找不到滿足以上兩個條件的父包含塊，那么絕對定位的參照物是瀏覽器窗口
注：元素的定位位置通過left,right,top,bottom屬性來進行設(shè)置
2.相對定位
語法：position:relative;
參照物：元素偏移前的位置
★相對定位和絕對定位的區(qū)別
a）參照物不同
絕對定位的參照物是離元素最近的具有定位屬性的父包含塊，相對定位的參照物是元素偏移前的位置
b) 是否會脫離文檔流
絕對定位會脫離文檔流，位置會被其他元素占據(jù)，相對定位不會脫離文檔流，原來的位置保留
3.固定定位
語法：position:fixed;
參照物：瀏覽器窗口或屏幕窗口
注：當給元素設(shè)置了固定定位后，元素會脫離正常的文檔流，位置會被其他元素占據(jù)
三、透明度設(shè)置
語法:opacity:數(shù)值; （取值范圍0-1,0為完全透明，1為完全不透明）
注：IE8及以下版本的IE瀏覽器不支持opacity屬性，兼容寫法如下：
filter:alpha(opacity=數(shù)值); （取值范圍0-100）
四、定位元素層疊屬性
語法：z-index:auto|number;
number 無單位的整數(shù)值，也可以設(shè)置負值
注：沒有設(shè)置z-index時，最后寫的對象優(yōu)先顯示在上層，設(shè)置后，數(shù)值越大，層越靠上；
五、錨點鏈接
語法：
a）命名錨記：
<標記 id=”錨記名”></標記>
b）連接錨記名
<a href=”#錨記名”></a>
eg: <h1 id=”one”>第一章 html基礎(chǔ)</h1>
<a href=”#one”>第一章</a>
—————————————————
擴展一：如何在網(wǎng)頁中插入flash
語法：<object width=”1000″ height=”500″>
<param name=”movie” value=”img/flash.swf”/>
<embed width=”1000″ height=”500″ src=”img/flash.swf”></embed>
</object>
擴展二：設(shè)置滾動字幕效果
語法：
<marquee behavior=”scroll|alternate” width=”200″ height=”30″ direction=”left|right|up|down” scrollamount=”20″>
滾動內(nèi)容…
</marquee>
注：scrollamount用來設(shè)置滾動的速度，值越大速度越快
寬高自適應(yīng)
一、寬度自適應(yīng)
語法：width:100%;
注：給元素設(shè)置寬度100%將會繼承父元素的寬度
塊狀元素默認寬度為100%
注：寬度自適應(yīng)主要應(yīng)用在通欄效果中
二、高度自適應(yīng)
語法：height:auto; 或不設(shè)置高度
注：容器的高度由里面內(nèi)容來決定
三、最大，最小高度，最大，最小寬度
1.最小高度
語法：min-height:數(shù)值+單位;
注：IE6不識別min-height屬性，兼容寫法如下：
a）min-height:100px; _height:100px;
b）min-height:100px; height:auto!important; height:100px;
2.最大高度
語法：max-height:數(shù)值+單位;
3.最小寬度
語法：min-width:數(shù)值+單位;
注：塊狀元素設(shè)置min-width屬性時，需要將元素轉(zhuǎn)換為內(nèi)聯(lián)塊狀元素
4.最大寬度
語法：max-width:數(shù)值+單位;
注：以上四組屬性IE6及以下版本瀏覽器都不識別
四、高度塌陷問題
描述：父元素高度自適應(yīng)，子元素float后，導致父元素高度為0稱為高度塌陷問題
a）給父元素一個固定的高度
父元素{height:value;}
缺點：給父元素固定的高度違背了高度自適應(yīng)的原則，不建議使用
b) 給父元素添加overflow:hidden;
優(yōu)點：簡單
缺點：當子元素存在定位時，定位在父元素框之外的部分將會被隱藏掉
c) 在浮動的子元素末尾添加一個空div，并設(shè)置如下樣式：
.clear{clear:both;height:0;overflow:hidden;}
優(yōu)點：兼容性好，所有瀏覽器都支持
缺點：在網(wǎng)頁中添加若干個無意義的div，容易造成代碼冗余
d）萬能清除浮動法
父元素:after{content:”;
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;}
優(yōu)點：解決了代碼冗余的問題，是官方推薦的解決高度塌陷問題的方法
五、偽元素
1. 元素:before
語法： .box:before{
content:”hello”;
font-size:30px;
color:red;
…
}
注：:before是在元素里面所有內(nèi)容之前添加一個偽元素
2. 元素:after
語法：.box:after{
content:”world”;
font-size:30px;
color:green;
}
注： :after是在元素里面所有內(nèi)容之后添加一個偽元素
注：I.無論偽元素內(nèi)容是否為空，都必須添加content屬性
II.偽元素是一個內(nèi)聯(lián)元素
六、元素隱藏不可見的兩種方式
1.display:none;
元素隱藏不可見，位置不保留（看不見，摸不著）
2.visibility:hidden;
元素隱藏不可見，位置保留(看不見，摸得著)
七、窗口高度自適應(yīng)
首先設(shè)置：
html,body{height:100%;}
然后給元素設(shè)置：
元素{height:100%;}
注：窗口高度自適應(yīng)主要應(yīng)用于內(nèi)容不滿一屏或者沒有內(nèi)容body和html高度為0的情況
八、水平居中
1.如果被設(shè)置元素為文本、圖片等行內(nèi)元素時，水平居中是通過給父元素設(shè)置text-align:center;來實現(xiàn)的。
2.滿足定寬和塊狀兩個條件的元素是可以通過設(shè)置“左右margin”值為“auto”來實現(xiàn)居中的
注：當元素設(shè)置了float，絕對定位，固定定位，左右margin為auto將會失效
3.不定寬塊狀元素水平居中
方案一：給子元素設(shè)置display:inline-block;給父元素設(shè)置text-align:center;
方案二：給父元素設(shè)置display:table; margin:0 auto;
注：display:table; 將元素轉(zhuǎn)換為表格形式
九、元素水平垂直都居中問題
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;將元素轉(zhuǎn)換為表格單元格形式
十、圓角效果
語法：border-radius:數(shù)值+單位;
注：border-radius:50%; (圓)
注：border-radius是css3新增的屬性，低版本IE瀏覽器不支持，需要使用背景圖片的方式來實現(xiàn)
常見兼容性問題
一、常見兼容性問題
1.雙倍浮動bug
描述：塊元素float后，又設(shè)置了橫向的margin，在IE6下顯示的margin比設(shè)置的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設(shè)置display:block;
b）給img設(shè)置float屬性
7.百分比bug
描述：父元素寬度100%，子元素寬度50%，在IE6下，50%+50%大于100%
解決方案：給右邊左浮動的子元素添加clear:right;
8.低版本IE瀏覽器不識別opacity屬性
解決方案：filter:alpha(opacity=數(shù)值);
9.鼠標指針bug
描述：cursor:hand;只有低版本的IE瀏覽器支持，其他瀏覽器都不支持
解決方案： cursor:pointer; 所有瀏覽器都支持，將鼠標指針改為手型
10.上下margin重疊問題
描述：當給上下兩個元素同時設(shè)置margin值時，只能識別其中較大的那個值、
解決方案：
a)margin-top和margin-bottom只設(shè)置其中一個值
b)給其中一個設(shè)置margin屬性的元素外層再嵌套一個盒子，并設(shè)置overflow:hidden;
11.假傳圣旨問題
描述：給子元素設(shè)置margin-top應(yīng)用在了父元素上
解決方案：
1）把給子元素設(shè)置的margin-top改為給父元素設(shè)置padding-top
2）給父元素設(shè)置overflow:hidden;
3）給父元素設(shè)置float屬性
4）給父元素設(shè)置border-top:1px solid transparent;
注：transparent為透明
12.按鈕默認大小不一
解決方案：按照設(shè)計稿上按鈕的樣式設(shè)定寬高，或者使用背景圖
二、css hack(過濾器)
1.下劃線屬性過濾器
語法： 選擇器{_屬性:屬性值;}
eg: .box{_background:red;}
注：只有IE6可以識別帶有下劃線的css屬性，其他瀏覽器都不識別
2.!important關(guān)鍵字過濾器
語法：選擇器{屬性:屬性值!important;}
eg: .box{background:yellow!important;background:blue;}
注：!important關(guān)鍵詞過濾器除IE6以外的其他瀏覽器都識別
添加!important關(guān)鍵詞的css屬性要放在標準css屬性之前
3.*屬性過濾器
語法：選擇器{*屬性:屬性值;}
eg: .box{*background:pink;}
注：*屬性過濾器只有IE6,IE7識別
4.
語法：選擇器{屬性:屬性值;}
eg: .box{background:orange;}
注：是IE6,7,8,9都識別
5.>5.\0<
語法：選擇器{屬性:屬性值>語法：選擇器{屬性:屬性值\0;}<;}
eg: .box{background:black>eg: .box{background:black\0;}<;}
注：>注：\0是IE8及以上版本瀏覽器識別<>
三、五大瀏覽器內(nèi)核
1.IE 內(nèi)核：Trident
2.Mozilla Firefox(火狐) 內(nèi)核：Gecko
3.Safari,Chrome 內(nèi)核：Webkit
4.Opera(歐朋) 內(nèi)核：Presto
5.由Google,Opera,software聯(lián)合開發(fā)的瀏覽器排版引擎 內(nèi)核：Blink
—————————————————
圖片整合
一、圖片整合的概念
圖片整合是指將多張背景圖片整合到一張背景圖中，通過background-position屬性實現(xiàn)圖片的定位技術(shù)。
二、圖片整合的優(yōu)勢
將多張圖整合到一張圖中，減少了對服務(wù)器的請求次數(shù)，加快了頁面的加載速度，減小了圖片體積，從而達到了網(wǎng)站性能的優(yōu)化。
注：圖片整合技術(shù)也稱為滑動門技術(shù)，雪碧圖，精靈圖
表單，表格高級
一、表單高級
表單的組成：表單域，表單控件，提示信息
1.表單域
<form method=”get|post” action=”服務(wù)器端文件”>…</form>
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.提示信息
放置在表單控件前后的文字內(nèi)容叫做提示信息，我們經(jīng)常將提示信息放置在一個label標簽中，語法如下：
a）點擊文字選中單選按鈕或復選按鈕
<input type=”radio” id=”boy” name=”a”/> <label for=”boy”>男</label>
注：設(shè)置id屬性值和for屬性值一致產(chǎn)生關(guān)聯(lián)即可達到點擊文字選中按鈕的效果
b）通過給label標簽設(shè)置樣式達到一定的效果
注：label是一個內(nèi)聯(lián)元素
4.表單字段集及表單字段集標題
語法： <fieldset>
<legend>標題</legend>
表單控件…
</fieldset>
注：將form表單中的內(nèi)容進行分組，并添加一個標題，在form中可以嵌套多個fieldset
5.上傳文件
語法： <input type=”file”/>
6.隱藏字段
語法： <input type=”hidden”/>
注：主要用于后端處理數(shù)據(jù)
7.圖像域
語法： <input type=”image” width=”數(shù)值” height=”數(shù)值” src=”圖片路徑”/>
注：用在提交按鈕位置的圖像，使得這幅圖像具有按鈕的功能
二、表格高級
1.合并相鄰單元格邊框(給table加)
語法： border-collapse:collapse(合并相鄰單元格邊框)|separate(邊框分開);
2.定義表格標題的位置(給table加)
語法：caption-side:top|bottom|left|right;
注：left和right只有火狐支持
3.設(shè)置單元格間距(給table加)
語法：border-spacing:數(shù)值+單位;
注：當設(shè)置了border-collapse:collapse;后，border-spacing將會失效
4.設(shè)置無內(nèi)容單元格隱藏(給table加)
語法：empty-cells:show(顯示)|hide(隱藏);
5.表格布局算法(給table加)
語法：table-layout:auto|fixed(單元格寬度固定，不隨內(nèi)容多少發(fā)生變化);
三、表格重要html屬性
1.合并列
colspan=”數(shù)值”
2.合并行
rowspan=”數(shù)值”
3.單元格內(nèi)容水平對齊方式
align=”left|center|right”
4.單元格內(nèi)容垂直對齊方式
valign=”top|middle|bottom”
5.分隔線
rules=”rows|cols|all|groups|none”
rows 行分隔線
cols 列分隔線
all 行分隔線和列分隔線
groups 組分隔線
none 沒有分隔線
注：表格行分組：<thead></thead> <tbody></tbody> <tfoot></tfoot>
表格列分組：<colgroup span=”數(shù)值”></colgroup>
注： span用來設(shè)置幾列為一組，默認一列為一組
四、css樣式重置
作用：CSS reset的作用是讓各個瀏覽器的CSS樣式有一個統(tǒng)一的基準
五、seo優(yōu)化
seo—搜索引擎優(yōu)化
◆ 站內(nèi)優(yōu)化
1.頁面主題優(yōu)化
給網(wǎng)站添加一個有意義的標題
2.頁面頭部優(yōu)化
給網(wǎng)站添加關(guān)鍵詞，描述
<meta name=”keywords” content=”” /> 關(guān)鍵詞
<meta name=”description” content=””/> 描述
3.超鏈接優(yōu)化
a）盡量少用或者不用flash設(shè)置超鏈接，seo無法識別flash中的超鏈接文字
b) 給a標簽添加title屬性，可以起到提示訪客的作用
c) 盡量避免使用圖片熱點鏈接
4.圖片優(yōu)化
給img標簽添加title，alt屬性
5.網(wǎng)站地圖
給網(wǎng)站添加網(wǎng)站地圖或網(wǎng)站導航，方便瀏覽者快速找到有瀏覽的網(wǎng)頁信息
6.給網(wǎng)站添加友情鏈接
7.seo認為靜態(tài)頁面比動態(tài)頁面更有利于搜索引擎優(yōu)化
8.避免”大體積”的頁面，代碼結(jié)構(gòu)要合理
◆ 站外優(yōu)化
1.百度推廣
2.流量分析
3.網(wǎng)站品牌建設(shè)
h5新標簽
一、h5新增結(jié)構(gòu)性標簽
1.header 定義網(wǎng)頁的頭部
2.footer 定義網(wǎng)頁的底部
3.section 定義網(wǎng)頁的某一個區(qū)域
4.nav 定義網(wǎng)頁的導航部分
5.aside 定義網(wǎng)頁的側(cè)邊欄
6.article 定義網(wǎng)頁的一篇文章
7.hgroup 對網(wǎng)頁中的標題進行組合
8.figure 對網(wǎng)頁中的元素進行組合
9.figcaption 給figure組合添加一個標題
10.dialog 定義一個對話框
二、h5新增其他標簽
1.定義帶有記號的文本
語法： <ma rk>定義帶有記號的文本</mark>
2.定義已知范圍內(nèi)的標量，測量
語法： <meter value=”10″ min=”1″ max=”100″></meter>
3.定義任務(wù)的進度或進程
語法： <progress value=”10″ min=”1″ max=”100″></progress>
三、音頻
語法： <audio controls autoplay loop>
<source src=”1.mp3″ type=”audio/mp3″/>
…
Your browser does not support the element
</audio>
注：音頻相關(guān)html屬性
a）src 引入音頻文件路徑
b) controls 顯示音頻控制條
c) autoplay 設(shè)置自動播放
d) loop 設(shè)置循環(huán)播放
注：audio支持的音頻格式：mp3,ogg,wav
四、視頻
語法：<video controls width=”數(shù)值” height=”數(shù)值” autoplay controls poster=”圖片路徑”>
<source src=”2.mp4″ type=”video/mp4″/>
…
Your browser does not support the element
</video>
注：視頻相關(guān)html屬性
a）src 引入音頻文件路徑
b) controls 顯示音頻控制條
c) autoplay 設(shè)置自動播放
d) loop 設(shè)置循環(huán)播放
e) width 定義視頻區(qū)域的寬度
f) height 定義視頻區(qū)域的高度
g) poster 在視頻播放前或快進快退時顯示的一張圖片
注：video支持的視頻格式：mp4(mpeg4),ogg,webm
五、h5新增type屬性值
1.type=”email”
限制用戶輸入為email類型（必須含有@符，@符前后內(nèi)容不能為空）
2.type=”url”
限制用戶輸入為url類型（必須含有http://,并且后面內(nèi)容不能為空）
3.type=”number”
限制用戶輸入為number類型
eg: <input type=”number” min=”1″ max=”100″ value=”1″ step=”2″/>
注：min 設(shè)置最小值 max 設(shè)置最大值 step 設(shè)置每次遞增遞減的值
4.type=”range”
產(chǎn)生一個滑動條的表單
eg: <input type=”range” value=”1″ min=”0″ max=”100″/>
5.type=”color”
產(chǎn)生一個選擇顏色的面板
6.type=”date”
產(chǎn)生一個選擇日期的面板
7.type=”time”
產(chǎn)生一個選擇時間的面板
8.type=”month”
產(chǎn)生一個選擇年月的面板
9.type=”search”
產(chǎn)生一個具有搜索意義的表單
六、h5新增表單屬性
1.required 必填項，限制用戶輸入不能為空
eg: <input type=”text” required/>
2.placeholder=”默認提示信息內(nèi)容” 給表單控件添加默認提示信息
eg: <input type=”text” placeholder=”請輸入用戶名”/>
3.autofocus 頁面加載完成后自動聚焦到某個input框
eg: <input type=”text” autofocus/>
4.pattern=”正則表達式” 按照設(shè)置的規(guī)則輸入內(nèi)容
eg: <input type=”text” pattern=”^[a-zA-Z0-9]{6,16}$”/>
5.list 指定一個datalist，作為下拉提示單
eg: <input type=”search” list=”data”/>
<datalist id=”data”>
<option>a</option>
…
</datalist>
注：type為search的input框的list屬性值必須和datalist標簽的id名一致才能實現(xiàn)搜索的功能
七.取消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>
<li><a href=”#”>今天是2018年七月九號</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九號</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九號</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九號</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九號</a><span>2018-07-09</span></li>
</ul> –>
<!– 3.快速生成標記內(nèi)容
標記.class名>子標記名稱*個數(shù)
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;}
二、層次選擇器（關(guān)系選擇器）
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元素
三、動態(tài)偽類選擇器
1.E:link 沒有被訪問過的狀態(tài)
2.E:visited 訪問過后的狀態(tài)
3.E:hover 滑過時的狀態(tài)
4.E:active 鼠標按下時的狀態(tài)
5.E:focus 光標聚焦到input框時的狀態(tài)
四、結(jié)構(gòu)性偽類選擇器
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) 匹配父元素下的第偶數(shù)個子元素
eg: .tab tr:nth-child(2n){background:red;}
匹配.tab下第偶數(shù)個tr
注： :nth-child(2n) 《=》 :nth-child(even)
5. :nth-child(2n+1) 匹配父元素下第奇數(shù)個子元素
eg: .tab tr:nth-child(2n+1){background:blue;}
匹配.tab下第奇數(shù)個tr
注： :nth-child(2n+1) 《=》 :nth-child(odd)
6. :nth-last-child(n) 匹配父元素下倒著數(shù)第n個子元素
eg: .tab tr:nth-last-child(3){color:red;}
匹配.tab下倒數(shù)第三個子元素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) 匹配父元素下指定類型的倒數(shù)第n個子元素
eg: .uls li:nth-last-of-type(3){background:orange;}
匹配.uls下li這種類型的倒數(shù)第三個子元素
——————————————————-
11. :only-child 匹配父元素下唯一一個子元素
12. :only-of-type 匹配父元素下指定類型的唯一一個子元素
13. :empty 匹配內(nèi)容為空的元素(空格，回車換行都不能有)
14. :root 匹配根元素html
四、UI狀態(tài)偽類選擇器（主要針對form表單元素）
1. E:checked 匹配選中狀態(tài)的單選或復選按鈕
eg: input:checked+label{color:red;}
匹配選中狀態(tài)的input控件后面緊鄰的那個label標簽
2. E:enabled 匹配啟用狀態(tài)的表單元素
eg: input:enabled{border:1px solid red;}
3. E:disabled 匹配禁用狀態(tài)的表單元素
eg: input:disabled{background:gray;}
五、目標偽類選擇器
語法： E:target 匹配錨點鏈接連接到的那個元素
eg: p:target{display:block;}
當錨點鏈接連接到p標簽，應(yīng)用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結(jié)尾的E元素
eg: a[href$=com]{color:blue;}
匹配含有href屬性并且屬性值以com結(jié)尾的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元素所有內(nèi)容之前添加一個偽元素
eg: .box:before{
content:”hello”;
font-size:32px;
…
}
2. E:after 在E元素所有內(nèi)容之后添加一個偽元素
eg: .box:after{
content:””;
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
注：:after常用于清除浮動
偽元素是一個內(nèi)聯(lián)元素
不管內(nèi)容是否為空，都不能省略content
3. :first-line 匹配段落文本中的第一行
4. :first-letter 匹配段落文本中的第一個字符
5. ::selection 改變選中文字的效果
注：針對火狐內(nèi)核的兼容寫法如下：
p::-moz-selection{color:red;}
十、漸進增強和優(yōu)雅降級
1.漸進增強
一開始就針對低版本瀏覽器進行構(gòu)建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。
eg: .box{ /*漸進增強寫法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
2.優(yōu)雅降級
一開始就構(gòu)建站點的完整功能，然后針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構(gòu)建了一個應(yīng)用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。
eg: .box{ /*優(yōu)雅降級寫法*/
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
}
注：css3屬性針對不同內(nèi)核的兼容寫法：
對webkit內(nèi)核 -webkit-
針對火狐內(nèi)核 -moz-
針對opera內(nèi)核 -o-
針對IE內(nèi)核 -ms-
擴展：如何使用border實現(xiàn)三角的效果，方法如下：
元素{
width:0;
height:0;
border:3px solid transparent;
border-top-color:blue; /*top還可以根據(jù)需要更改為bottom,right,left*/
}
css3圓角，陰影
一、圓角
語法： border-radius:數(shù)值+單位;
1.設(shè)置一個值
border-radius:20px; 四個方向圓角都為20px
2.設(shè)置兩個值
border-radius:50px 10px; 左上，右下為50px,右上，左下為10px
3.設(shè)置三個值
border-radius:50px 0px 10px; 左上為50px,右上和左下為0,右下為10px
4.設(shè)置四個值
border-radius:0px 10px 30px 60px; 順時針方向依次為左上0，右上10，右下30，左下60
5.用/設(shè)置圓角
border-radius:50px/100px;
第一組值代表水平半徑為50px,/后的第二組值代表垂直半徑為100px
6.還可以單獨設(shè)置某一個方向的圓角
border-top-left-radius:10px;
注：border-top-left-radius:20px 50px; 水平半徑為20px,垂直半徑為50px
7.設(shè)置為圓
border-radius:50%;
二、多色彩邊框
語法： .box{-moz-border-top-colors:black red yellow;}
注：只有低版本的火狐瀏覽器支持
三、圖像邊框
1.設(shè)置圖像邊框的路徑
語法：border-image-source:url(圖片路徑);
2.設(shè)置圖像邊框的裁剪位置
語法：border-image-slice:數(shù)值;
注：a)設(shè)置數(shù)值專指像素
b) 如何需要中間部分顯示出來，需要添加fill
eg: border-image-slice:27 fill;
3.設(shè)置圖像邊框的平鋪屬性
語法：border-image-repeat:stretch|repeat|round;
a)stretch 默認值，圖像被拉伸
b)repeat 圖片默認平鋪，當碰到邊界時則會被截斷
c)round 圖片會根據(jù)邊框的尺寸動態(tài)調(diào)整圖片的大小直至正好可以鋪滿整個邊框。
eg: border-image-repeat:round stretch;
代表水平方向鋪滿，垂直方向拉伸
四、文本陰影
語法： text-shadow:水平偏移量 垂直偏移量 模糊度 顏色值;
eg: text-shadow:5px 5px 3px black,8px 8px 5px #999;
注：a) 多組陰影的值用逗號分隔
b) 水平偏移量向右為正，向左為負，垂直偏移量向下為正，向上為負
c) 模糊度最小值為0，不允許設(shè)置負值
擴展：文字描邊，語法如下：
-webkit-text-stroke:3px blue;
五、盒陰影
語法：box-shadow:水平偏移量 垂直偏移量 模糊度 擴展半徑 顏色值;
eg: box-shadow:5px 5px 10px #333,8px 8px 12px #666;
注：盒陰影默認為外陰影，如果需要設(shè)置內(nèi)陰影，寫法如下：
eg: box-shadow:inset 3px 3px 5px #333,inset 5px 5px 8px #666;
注：當設(shè)置了擴展半徑后，一般水平和垂直偏移量設(shè)置為0
eg: box-shadow:0px 0px 5px 10px red;
box-shadow:inset 0px 0px 5px 10px red;
css3彈性布局
一、分欄布局
1.設(shè)置欄數(shù)
語法： column-count:數(shù)值;
2.設(shè)置每欄的寬度
語法：column-width:數(shù)值+單位;
注：column-count和column-width設(shè)置其中一個屬性即可
3.設(shè)置欄間距
語法：column-gap:數(shù)值+單位;
4.設(shè)置欄分隔線
語法：column-rule:寬度 solid|dashed|dotted 顏色;
eg: column-rule:3px dashed blue;
5.設(shè)置是否跨欄顯示
語法：column-span:all(跨欄顯示)|none(不跨欄顯示);
注：該屬性給需要跨欄顯示的元素添加
二、彈性布局
語法：display:flex;
說明：
a) 當給元素設(shè)置了display:flex;該元素就成為了彈性盒
b) 當給父元素設(shè)置彈性盒后，子元素的float,clear,vertical-align將會失效
c) 我們把設(shè)置了display:flex;屬性的元素叫做flex容器，把里面的子元素叫做flex項目
d) 當給元素設(shè)置了彈性盒以后，隨之會產(chǎn)生兩根軸線：主軸和交叉軸
◆ Flex容器屬性
1.改變主軸的方向
語法：flex-direction:row|row-reverse|column|column-reverse;
row 默認值，主軸在水平方向，起點在左端
row-reverse 主軸在水平方向，起點在右端
column 主軸在垂直方向，起點在上沿
column-reverse 主軸在垂直方向，起點在下沿
2.設(shè)置flex項目是單行顯示還是多行顯示
語法：flex-wrap:nowrap|wrap|wrap-reverse;
nowrap 默認值，不換行
wrap 換行
wrap-reverse 與wrap相似，但是行的順序是倒過來的
3.flex-direction和flex-wrap的簡寫方式
語法：flex-flow:row nowrap;
4.設(shè)置主軸對齊方式
語法：justify-content:flex-start|flex-end|center|space-between|space-around;
flex-start 類似于左浮動
flex-end 類似于右浮動
center flex項目居中對齊
space-between flex項目兩端對齊，中間間隔相等
space-around flex項目兩側(cè)間隔相等
5.設(shè)置交叉軸對齊方式
語法：align-items:flex-start|flex-end|center|baseline|stretch;
flex-start 對齊交叉軸的起點
flex-end 對齊交叉軸的終點
center 以交叉軸為參考，居中對齊
baseline flex項目第一行文字基線對齊
stretch flex項目沒有設(shè)置高度或者為auto，將占滿整個父元素的高度
———————————————–
★ 如何使用flex布局實現(xiàn)不定寬高的元素在屏幕窗口水平垂直都居中，方法如下：
html,body{height:100%;}
body{display:flex;justify-content:center;align-items:center;}
★ 如何使用flex布局實現(xiàn)不定寬高的子元素在父元素中水平垂直都居中，方法如下：
父元素{display:flex;justify-content:center;align-items:center;}
———————————————–
6.設(shè)置多根軸線對齊方式(如果只有一根軸線，該屬性不起作用)
語法：align-content:flex-start|flex-end|center|space-between|space-around|stretch;
flex-start 對齊交叉軸的起點
flex-end 對齊交叉軸的終點
center 以交叉軸為參考，居中對齊
space-between 軸線兩端對齊，中間間隔相等
space-around 軸線間兩側(cè)間隔相等
stretch flex項目沒有設(shè)置高度或者高度為auto，將占滿整個父元素的高度
◆ Flex項目屬性
1.改變flex項目排列順序
語法：order:0|數(shù)值;
注：默認值為0,值越小越靠前
2.設(shè)置某個flex項目不同于其他flex項目的交叉軸對齊方式
語法：align-self:flex-start|flex-end|center|baseline|stretch;
注：屬性值的使用方法同align-items屬性
3.設(shè)置flex項目的放大比例
語法：flex-grow:0|數(shù)值;
注：flex-grow默認值為0即使存在剩余空間也不放大
4.設(shè)置flex項目的縮小比例
語法：flex-shrink:1|數(shù)值;
注：flex-shrink默認值為1,當flex容器剩余空間不足時，flex項目等比例縮小
注：flex-shrink:0; 即使flex容器空間不足，flex項目也不縮小
5.設(shè)置flex項目占據(jù)主軸的空間
語法：flex-basis:數(shù)值+單位;
注：flex-basis默認值為auto
6.flex-grow,flex-shrink,flex-basis的簡寫方式
語法：flex:0 1 auto; (默認值)
注：flex:1; 完整寫法：flex:1 1 0%;
主要應(yīng)用在兩個方面：
a) 等比例分配空間
b) 將剩余空間分配給某個元素
三、響應(yīng)式布局
概念—寫一套css樣式可以應(yīng)用在多個終端設(shè)備
優(yōu)點：可以同時適配多個終端，靈活性更強
缺點：工作量增加，會造成代碼冗余，加載時間加長
原理：媒體查詢
四、媒體查詢
1.外聯(lián)式媒體查詢
語法：
<link rel=”stylesheet” media=”screen and (min-width:960px)” href=”blue.css”/>
<link rel=”stylesheet” media=”screen and (max-width:960px)” href=”red.css”/>
注：當屏幕窗口大于等于960px時，引用blue.css文件
當屏幕窗口小于等于960px時，引用red.css文件
2.內(nèi)嵌式媒體查詢
語法：
@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
注：當網(wǎng)頁沒有添加文檔聲明時，就會觸發(fā)某些瀏覽器(如IE6)的怪異模式
二、box-sizing常用屬性值有哪些及其含義？
1.box-sizing:border-box;
將標準盒模型轉(zhuǎn)換為怪異盒模型，總寬高不包括padding和border
2.box-sizing:content-box;
將怪異盒模型轉(zhuǎn)換為標準盒模型，總寬高包含padding和border
———————————————–
擴展：如何自定義字體
語法： @font-face{
font-family:字體名稱;
src:url(字體文件路徑);
}
body{
font-family:字體名稱;
}
css3移動端布局
一、移動端相關(guān)概念
1.屏幕尺寸
屏幕尺寸是指屏幕對角線的長度，單位為英寸，1英寸=2.54厘米
2.屏幕分辨率
屏幕分辨率是指橫縱方向上的像素點數(shù)，單位為px，1個像素點=1px
(這里的1px是指物理設(shè)備上的一個像素點)
常見移動端設(shè)備屏幕分辨率：
iphone6,6s,7,8 1334*750
iponee6plus,7plus,8plus 1920*1080
注：移動端設(shè)備一般為 縱向像素*橫向像素
3.ppi
屏幕每英寸可以顯示的像素點數(shù)，即屏幕像素密度，單位為ppi
計算公式：
4.dpr
dpr是devicePixelRatio的簡寫，指物理像素與邏輯像素的比值
物理像素：屏幕分辨率
邏輯像素：寫在css文件中的像素值，即要顯示在設(shè)備上的像素值
常見設(shè)備dpr值：
iphone6,7,8 dpr=2
iphone6plus,7plus,8plus dpr=3
5.移動端meta設(shè)置
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
注：讓視圖窗口的寬度等于設(shè)備的寬度
快捷鍵：meta:vp+tab鍵
二、常見移動端布局方案
1.百分比布局(流式布局)
特點：文字流式，控件彈性，圖片等比例縮放
頂部和底部的bar不管分辨率怎么變，高度和位置都不變
案例：拉勾網(wǎng)
注：適用于內(nèi)容較少比較簡單的移動端頁面
2.等比例縮放布局(rem布局)
特點：使用rem為主要單位進行頁面布局，很好的實現(xiàn)了在不同設(shè)備上頁面等比例縮放
案例：網(wǎng)易
注：適用于頁面內(nèi)容較多較復雜的移動端頁面
3.混合布局
特點：混合布局是指將多種布局方式(如flex布局，圣杯布局，百分比布局等)融合在一起實現(xiàn)移動端的屏幕適配的方法
案例：淘寶網(wǎng)
三、移動端相關(guān)單位
1.px
像素，相對于屏幕分辨率而言
2.em
相對于父元素字體大小放大或縮小多少倍
1em = 16px
3.rem
相對于根元素字體大小放大或縮小多少倍
4.vw
vw是viewport width的縮寫，即視圖窗口的寬度
1vw = 視窗寬度的1%
vh是指視圖窗口的高度
vmin是vw和vh中較小值
vmax是vw和vh中較大值
css3基礎(chǔ)變形
一、css3基礎(chǔ)變形
語法： transform:rotate(旋轉(zhuǎn))|scale(縮放)|skew(傾斜)|translate(位移);
1.旋轉(zhuǎn)(rotate)
a) rotateX(180deg) 沿x軸翻轉(zhuǎn) 等價于 rotate3d(1,0,0,180deg)
b) rotateY(180deg) 沿y軸翻轉(zhuǎn) 等價于 rotate3d(0,1,0,180deg)
c) rotateZ(180deg) 沿z軸翻轉(zhuǎn) 等價于 rotate3d(0,0,1,180deg)
d) rotate(60deg) 不指定軸時，是2d空間的旋轉(zhuǎn)，正值為順時針，負值為逆時針
注：rotate旋轉(zhuǎn)的單位是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) 先翻轉(zhuǎn)后縮放
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軸同時位移
◆ 使用變形實現(xiàn)不定寬高元素在屏幕窗口水平垂直都居中，方法如下：
元素{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
◆ 使用變形實現(xiàn)不定寬高的子元素在父元素中水平垂直都居中，方法如下：
父元素{
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;
四、設(shè)置元素的變形類型
語法：transform-style:flat(默認值)|preserve-3d;
flat 默認值，2d空間的變形
preserve-3d 3d空間的變形
五、透視，井深
語法：perspective:數(shù)值+單位;
eg: 父元素{perspective:1500px;}
eg: 子元素{transform:perspective(800px) rotateY(60deg);}
注：perspective主要用來設(shè)置元素3d效果的強度
transition過渡動畫
一、transition過渡動畫
語法：transition:過渡屬性 過渡時間 過渡方式 過渡延遲時間;
eg: transition:all 1s;
1.transition-property(過渡屬性)
取值：
none 沒有屬性發(fā)生過渡
all 所有發(fā)生變化的屬性都添加過渡動畫
ident 指定發(fā)生過渡的屬性列表
eg: transition:transform 1s,background 2s,border-radius 3s;
2.transition-duration(過渡時間)
取值：
0 不執(zhí)行過渡，直接看到結(jié)果
time 指定過渡時間，單位為s
3.transition-delay(過渡延遲時間)
取值：
0 不延遲，直接執(zhí)行過渡動畫
正值 按照設(shè)定的時間延遲執(zhí)行過渡動畫
負值 設(shè)定時間前的動畫將會被截斷
4.transition-timing-function(過渡方式)
取值：
ease 默認值
linear 勻速運動
ease-in 加速運動
ease-out 減速運動
ease-in-out 慢-快-慢
二、animation動畫
☆ 動畫關(guān)鍵幀
語法： @keyframes 動畫名稱{
0%{
屬性:屬性值;
}
50%{
屬性:屬性值;
}
…
100%{
屬性:屬性值;
}
}
@keyframes 動畫名稱{
from{
屬性:屬性值;
}
50%{
屬性:屬性值;
}
…
to{
屬性:屬性值;
}
}
———————————————–
語法： animation:動畫名稱 動畫執(zhí)行時間 動畫延遲執(zhí)行時間 動畫播放次數(shù) 動畫播放狀態(tài);
1.animation-name(動畫名稱)
eg: animation:box_ani 1s;
注：此處的動畫名稱要和@keyframes中的動畫名稱一致
2.animation-duration(動畫執(zhí)行一次所需時間)
取值：
0 動畫不執(zhí)行
time 正數(shù)，單位為s或者ms
3.animation-delay(動畫延遲執(zhí)行時間)
取值：
0 不延遲，動畫立即執(zhí)行
正數(shù) 按照設(shè)定的時間延遲執(zhí)行動畫
負數(shù) 設(shè)定時間前的動畫將會被截斷
4.animation-iteration-count(動畫播放次數(shù))
取值：
number 自定義動畫執(zhí)行次數(shù)，設(shè)置值可為0或正整數(shù)
infinite 無限循環(huán)播放
5.animation-play-state(設(shè)置對象動畫的狀態(tài))
取值：
running 默認值，運動
paused 動畫暫停
6.animation-timing-function(對象動畫過渡類型)
取值：
ease
linear 勻速運動
ease-in
ease-out
ease-in-out
step-start 馬上轉(zhuǎn)跳到動畫結(jié)束狀態(tài)，或者轉(zhuǎn)跳到下一幀，中間沒有過渡
step-end 保持動畫開始時的狀態(tài)，直到動畫結(jié)束時，馬上轉(zhuǎn)跳到動畫結(jié)束狀態(tài)
steps(n,start|end) n代表動畫分幾步完成
7. animation-direction(設(shè)置對象動畫運動的方向)
取值：
normal 默認值，正常方向運動
reverse 與normal運動方向始終相反
alternate 正反方向交替運動，奇數(shù)次正方向，偶數(shù)次反方向
alternate-reverse 奇數(shù)次反方向，偶數(shù)次正方向
8.animation-fill-mode (設(shè)置對象動畫時間之外的狀態(tài))
取值：
none 默認值，不設(shè)置時間之外的狀態(tài)
forwards 保持動畫結(jié)束時的狀態(tài)
backwards 保持動畫開始時的狀態(tài)
both 動畫遵循forwards和backwards兩個規(guī)則
擴展：
隱藏翻轉(zhuǎn)元素的背面，語法如下：backface-visibility:hidden;
css3背景，漸變，蒙版
一、背景切割
語法：background-clip:border-box|padding-box|content-box;
作用：設(shè)置背景在哪個區(qū)域可見
border-box 默認值.背景在邊框已經(jīng)邊框以內(nèi)的區(qū)域可見
padding-box 背景在padding區(qū)域和content區(qū)域可見
content-box 背景在content區(qū)域可見
二、背景原點
語法：background-origin:border-box|padding-box|content-box;
作用：設(shè)置背景圖原點的定位區(qū)域
padding-box 默認值，背景原點從padding區(qū)域開始
border-box 背景原點從border區(qū)域開始
content-box 背景原點從content區(qū)域開始
三、背景切割&背景原點
可以將背景切割和背景原點結(jié)合使用
eg: background-clip:content-box;
background-origin:border-box;
背景原點從border區(qū)域開始，背景在content區(qū)域可見
四、背景尺寸
語法：background-size:數(shù)值|100%|cover|contain;
1.length
該數(shù)值用來設(shè)置背景圖的寬度和高度，第一個值代表寬度，第二個值代表高度，如果省略第二個值，為auto,等比例縮放
eg: background-size:100px 200px; (背景圖有可能發(fā)生變形)
background-size:100px; (背景圖有可能超出容器,不會發(fā)生變形)
2.百分比
以容器的百分比來設(shè)置背景圖的寬度和高度
eg: background-size:100% 100%;(背景圖不會超出容器，但是背景圖有可能發(fā)生變形)
background-size:100%;(背景圖有可能超出容器，但是背景圖不會發(fā)生變形)
3.cover
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像有可能超出容器，背景圖不會發(fā)生變形
eg: background-size:cover;
4.contain
把圖像擴展至最大尺寸，以使寬度和高度 完全適應(yīng)內(nèi)容區(qū)域。背景圖像始終被包含在容器內(nèi),背景圖不會發(fā)生變形
五、rgba模式
語法： background:rgba(r,g,b,a); a代表透明度，取值范圍0~1
eg: background:rgba(0,0,0,.4);
注：rgba模式和opacity的區(qū)別：
a) 給容器添加opacity,容器中的文字和圖片也會跟隨透明
b) rgba模式只是給容器的背景添加一定的透明度，容器中的文本和圖片不會跟隨透明
———————————————–
擴展：hsla模式
語法： background:hsla(h,s,l,a);
h 色調(diào)，取值范圍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%);
注：設(shè)置重復的線性漸變，必須指定漸變的位置
七、徑向漸變
語法：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%);
注：設(shè)置重復的徑向漸變，必須指定漸變的位置
———————————————–
擴展一 蒙版
語法： -webkit-mask-image:url(圖片路徑)|使用漸變作為蒙版圖片; -webkit-mask-repeat:no-repeat|repeat-x|repeat-y|repeat;
-webkit-mask-position:center;
擴展二 背景在文字區(qū)域可見
語法： -webkit-background-clip:text;
注：設(shè)置此屬性需要將文字顏色設(shè)置為透明，即 color:transparent;
擴展三：倒影
語法： -webkit-box-reflect:left|right|above(上)|below(下) 偏移量 倒影漸變;
———————————————–
八、BFC
1.概念
BFC——block formatting context (塊級格式化上下文)
2.如何觸發(fā)BFC
a) 設(shè)置了float除none以外的值(left,right)
b) 設(shè)置了overflow除visible以外的值(hidden,scroll,auto)
c) 設(shè)置了display屬性(table-cell,inline-block,flex)
d) 設(shè)置position屬性(absolute,fixed)
3.BFC的作用
a) 解決上下margin重疊問題
給設(shè)置margin的元素外邊再嵌套一個父元素，并設(shè)置overflow:hidden;這樣就給里面的元素創(chuàng)建了一個塊級格式化上下文
b) 常用來清除浮動，解決高度塌陷問題
給父元素設(shè)置overflow:hidden;就給里面浮動的子元素創(chuàng)建了一個塊級格式化上下文，閉合了浮動
c) 用于實現(xiàn)多欄布局
與浮動元素相鄰的已生成BFC的元素不能與浮動元素互相覆蓋。利用該特性可以作為多欄布局的一種實現(xiàn)方式
在項目開發(fā)過程中，有很多業(yè)務(wù)模塊的代碼是具有一定規(guī)律性的，例如controller控制器、service接口、service實現(xiàn)類、mapper接口、model實體類等等，這部分代碼可以使用代碼生成器生成，我們就可以將更多的時間放在業(yè)務(wù)邏輯上。
傳統(tǒng)的開發(fā)步驟：
創(chuàng)建數(shù)據(jù)庫和表 根據(jù)表設(shè)計實體類 ? 編寫mapper接口 ? 編寫service接口和實現(xiàn)類 ? 編寫controller控制器 ? 編寫前端頁面 ? 前后端聯(lián)調(diào)
基于代碼生成器開發(fā)步驟：
創(chuàng)建數(shù)據(jù)庫和表 ? 使用代碼生成器生成實體類、mapper、service、controller、前端頁面 ? 將生成好的代碼拷貝到項目中并做調(diào)整 ? 前后端聯(lián)調(diào)
我們只需要知道數(shù)據(jù)庫和表相關(guān)信息，就可以結(jié)合模版生成各個模塊的代碼，減少了很多重復工作，也減少出錯概率，提高效率。
（1）需要對數(shù)據(jù)庫表解析獲取到元數(shù)據(jù)，包含表字段名稱、字段類型等等
（2）將通用的代碼編寫成模版文件，部分數(shù)據(jù)需使用占位符替換
（3）將元數(shù)據(jù)和模版文件結(jié)合，使用一些模版引擎工具（例如freemarker）即可生成源代碼文件
FreeMarker 是一款 模板引擎： 即一種基于模板和要改變的數(shù)據(jù)， 并用來生成輸出文本(HTML網(wǎng)頁，電子郵件，配置文件，源代碼等)的通用工具。 它不是面向最終用戶的，而是一個Java類庫，是一款程序員可以嵌入他們所開發(fā)產(chǎn)品的組件。
模板編寫為FreeMarker Template Language (FTL)。它是簡單的，專用的語言， 在模板中，你可以專注于如何展現(xiàn)數(shù)據(jù)， 而在模板之外可以專注于要展示什么數(shù)據(jù)。
（1）動態(tài)頁面
freemarker可以作為springmvc一種視圖格式，像jsp一樣被瀏覽器訪問。
（2）頁面靜態(tài)化
對于一些內(nèi)容比較多，更新頻率很小，訪問又很頻繁的頁面，可以使用freemarker靜態(tài)化，減少DB的壓力，提高頁面打開速度。
（3）代碼生成器
根據(jù)配置生成頁面和代碼，減少重復工作，提高開發(fā)效率。
（1）創(chuàng)建freemarker-demo模塊，并導入相關(guān)依賴
<?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相關(guān)配置
server:
port: 8881 #服務(wù)端口
spring:
application:
name: freemarker-demo #指定服務(wù)名
freemarker:
cache: false #關(guān)閉模板緩存，方便測試
settings:
template_update_delay: 0 #檢查模板更新延遲時間，設(shè)置為0表示立即檢查，如果時間大于0會有緩存不方便進行模板測試
suffix: .ftl #指定Freemarker模板文件的后綴名（3）創(chuàng)建啟動類
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）創(chuàng)建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）創(chuàng)建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.純文本形式的參數(shù)
model.addAttribute("name", "Freemarker");
//2.實體類相關(guān)的參數(shù)
Student student = new Student();
student.setName("黑馬");
student.setAge(18);
model.addAttribute("stu", student);
return "01-index";
}
}（6）在resources/templates下創(chuàng)建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中的數(shù)據(jù)展示：</b><br/>
姓名：${stu.name}<br/>
年齡：${stu.age}
<hr>
</body>
</html>（7）測試
瀏覽器訪問 http://localhost:8881/student/index
效果如下
（1）注釋，即<#-- -->，介于其之間的內(nèi)容會被freemarker忽略
<#--我是一個freemarker注釋-->（2）插值（Interpolation）：即 ${..} 部分,freemarker會用真實的值代替${..}
Hello ${name}（3）FTL指令：和HTML標記類似，名字前加#予以區(qū)分，F(xiàn)reemarker會解析標簽中的表達式或邏輯。
<# >FTL指令</#> （4）文本，僅文本信息，這些不是freemarker的注釋、插值、FTL指令的內(nèi)容會被freemarker忽略解析，直接輸出內(nèi)容。
<#--freemarker中的普通文本-->
我是一個普通的文本if 指令即判斷指令，是常用的FTL指令，freemarker在解析時遇到if會進行判斷，條件為真則輸出if中間的內(nèi)容，否則跳過內(nèi)容不再輸出。
格式如下
<#if condition>
....
<#elseif condition2>
...
<#elseif condition3>
...
<#else>
...
</#if>需求：根據(jù)年齡輸出所處的年齡段
童年：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
效果如下
list指令時一個迭代輸出指令，用于迭代輸出數(shù)據(jù)模型中的集合
格式如下
<#list items as item>
${item_index + 1}------${item}-----<#if item_has_next>,</#if>
</#list>迭代集合對象時，包括兩個特殊的循環(huán)變量： （1）item_index：當前變量的索引值。 （2）item_has_next:是否存在下一個對象
item_index 和 item_has_nex 中的item為<#list items as item> 中as后面的臨時變量
需求：遍歷學生集合，輸出序號，學生id，姓名，所處的年齡段，是否最后一條數(shù)據(jù)
（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,"關(guān)羽",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目錄下創(chuàng)建02-list.ftl模版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表頁面</title>
<style>
table{
border-spacing: 0;/*把單元格間隙設(shè)置為0*/
border-collapse: collapse;/*設(shè)置單元格的邊框合并為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>是否最后一條數(shù)據(jù)</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
效果如下
include指令的作用類似于JSP的包含指令，用于包含指定頁，include指令的語法格式如下
<#include filename [options]></#include>（1）filename：該參數(shù)指定被包含的模板文件 （2）options：該參數(shù)可以省略，指定包含時的選項，包含encoding和parse兩個選項，encoding 指定包含頁面時所使用的解碼集，而parse指定被包含是否作為FTL文件來解析。如果省略了parse選項值，則該選項值默認是true
需求："早上好,尊敬的 某某 用戶!" 這句話在很多頁面都有用到，請合理設(shè)計！
（1）在resources/templates目錄下創(chuàng)建00-head.ftl模版，內(nèi)容如下
早上好,尊敬的 ${name} 用戶!（2）在resources/templates目錄下創(chuàng)建03-include.ftl模版，使用include引入00-head.ftl模版，內(nèi)容如下
<!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
效果如下
它用于為該模板頁面創(chuàng)建或替換一個頂層變量
<#assign name = "zhangsan" />（1）算數(shù)運算符
FreeMarker表達式中完全支持算術(shù)運算,FreeMarker支持的算術(shù)運算符包括:
（2）比較運算符
比較運算符注意
（3）邏輯運算符
邏輯運算符只能作用于布爾值,否則將產(chǎn)生錯誤 。
（1）缺失變量默認值使用 “!”
（2）判斷某變量是否存在使用 “??”
用法為:variable??,如果該變量存在,返回true,否則返回false
例：為防止stus為空報錯可以加上判斷如下：
<#if stus??>
<#list stus as stu>
......
</#list>
</#if>內(nèi)建函數(shù)語法格式： 變量+?+函數(shù)名稱
（1）求集合的大小
${集合名?size}
（2）日期格式化
顯示年月日: ${today?date} 顯示時分秒：${today?time} 顯示日期+時間：${today?datetime} 自定義格式化： ${today?string("yyyy年MM月")}
（3）內(nèi)建函數(shù)c
model.addAttribute("point", 102920122);
point是數(shù)字型，使用${point}會顯示這個數(shù)字的值，每三位使用逗號分隔。
如果不想顯示為每三位分隔的數(shù)字，可以使用c函數(shù)將數(shù)字型轉(zhuǎn)成字符串輸出
${point?c}
（4）將json字符串轉(zhuǎn)成對象
一個例子：
其中用到了 assign標簽，assign的作用是定義一個變量。
<#assign text="{'bank':'工商銀行','account':'10101920201920212'}" />
<#assign data=text?eval />
開戶行：${data.bank} 賬號：${data.account}（5）常見內(nèi)建函數(shù)匯總
?html:html字符轉(zhuǎn)義
?cap_first: 字符串的第一個字母變?yōu)榇髮懶问??lower_case :字符串的小寫形式
?upper_case :字符串的大寫形式
?trim:去掉字符串首尾的空格
?substring(from,to):截字符串 from是第一個字符的開始索引，to最后一個字符之后的位置索引，當to為空時，默認的是字符串的長度
?lenth: 取長度
?size: 序列中元素的個數(shù)
?int: 數(shù)字的整數(shù)部分（比如 -1.9?int 就是 -1）
?replace(param1,param2):字符串替換 param1是匹配的字符串 param2是將匹配的字符替換成指定字符內(nèi)建函數(shù)測試demo1
（1）在StudentController新增方法：
@GetMapping("innerFunc")
public String testInnerFunc(Model model) {
//1.1 小強對象模型數(shù)據(jù)
Student stu1 = new Student();
stu1.setName("小強");
stu1.setAge(18);
stu1.setMoney(1000.86f);
stu1.setBirthday(new Date());
//1.2 小紅對象模型數(shù)據(jù)
Student stu2 = new Student();
stu2.setName("小紅");
stu2.setMoney(200.1f);
stu2.setAge(19);
//1.3 將兩個對象模型數(shù)據(jù)存放到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 添加數(shù)值
model.addAttribute("point", 102920122);
return "04-innerFunc";
}（2）在resources/templates目錄下創(chuàng)建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>內(nèi)建函數(shù)C</b><br>
沒有C函數(shù)顯示的數(shù)值：${point} <br>
有C函數(shù)顯示的數(shù)值：${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
效果如下
內(nèi)建函數(shù)測試demo2
需求：遍歷學生集合，顯示集合總條數(shù)，id不要逗號隔開，顯示學生的生日（只顯示年月日），錢包顯示整數(shù)并顯示單位元，用戶姓名做脫敏處理（如果是兩個字第二個字顯示為星號，例如張三顯示為張*，如果大于兩個字，中間字顯示為星號，例如成吉思汗顯示為成*汗，諸葛亮顯示為諸*亮）
（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}條數(shù)據(jù)：輸出總條數(shù)
stu.id后面加?c：id不需要逗號分割
stu.birthday后面加?date：生日只輸出年月日
stu.money后面加?int：金額取整
姓名需要使用replace和substring函數(shù)處理
完整內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表頁面</title>
<style>
table{
border-spacing: 0;/*把單元格間隙設(shè)置為0*/
border-collapse: collapse;/*設(shè)置單元格的邊框合并為1*/
}
td{
border:1px solid #ACBED1;
text-align: center;
}
</style>
</head>
<body>
共${stus?size}條數(shù)據(jù)
<table>
<tr>
<td>序號</td>
<td>id</td>
<td>姓名</td>
<td>所處的年齡段</td>
<td>生日</td>
<td>錢包</td>
<td>是否最后一條數(shù)據(jù)</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
效果如下
（1）springboot整合freemarker靜態(tài)化文件用法
編寫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");
/**
* 靜態(tài)化并輸出到文件中 參數(shù)1：數(shù)據(jù)模型 參數(shù)2：文件輸出流
*/
template.process(getData(), new FileWriter("d:/list.html"));
/**
* 靜態(tài)化并輸出到字節(jié)輸出流中
*/
//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());
//小紅對象模型數(shù)據(jù)
Student stu2 = new Student();
stu2.setName("小紅");
stu2.setMoney(200.1f);
stu2.setAge(19);
//將兩個對象模型數(shù)據(jù)存放到List集合中
List<Student> stus = new ArrayList<>();
stus.add(stu1);
stus.add(stu2);
//向model中存放List集合數(shù)據(jù)
map.put("stus",stus);
//map數(shù)據(jù)
Map<String,Student> stuMap = new HashMap<>();
stuMap.put("stu1",stu1);
stuMap.put("stu2",stu2);
map.put("stuMap",stuMap);
//日期
map.put("today",new Date());
//長數(shù)值
map.put("point",38473897438743L);
return map;
}
}（2）freemarker原生靜態(tài)化用法
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 {
//創(chuàng)建配置類
Configuration CONFIGURATION = new Configuration(Configuration.VERSION_2_3_22);
//設(shè)置模版加載路徑
//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)));
//設(shè)置編碼
CONFIGURATION.setDefaultEncoding("UTF-8");
//設(shè)置異常處理器
CONFIGURATION.setTemplateExceptionHandler(TemplateExceptionHandler.RETHROW_HANDLER);
//設(shè)置緩存方式
CONFIGURATION.setCacheStorage(NullCacheStorage.INSTANCE);
//加載模版
Template template = CONFIGURATION.getTemplate("templates/04-innerFunc.ftl");
/**
* 靜態(tài)化并輸出到文件中 參數(shù)1：數(shù)據(jù)模型 參數(shù)2：文件輸出流
*/
template.process(getModel(), new FileWriter("d:/list.html"));
/**
* 靜態(tài)化并輸出到字節(jié)輸出流中
*/
//StringWriter out = new StringWriter();
//template.process(getData(), out);
//System.out.println(out.toString());
}
public static Map getModel(){
Map map = new HashMap();
//1.1 小強對象模型數(shù)據(jù)
Student stu1 = new Student();
stu1.setName("小強");
stu1.setAge(18);
stu1.setMoney(1000.86f);
stu1.setBirthday(new Date());
//1.2 小紅對象模型數(shù)據(jù)
Student stu2 = new Student();
stu2.setName("小紅");
stu2.setMoney(200.1f);
stu2.setAge(19);
//1.3 將兩個對象模型數(shù)據(jù)存放到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 添加數(shù)值
map.put("point", 102920122);
return map;
}
}元數(shù)據(jù)（Metadata）是描述數(shù)據(jù)的數(shù)據(jù)。
數(shù)據(jù)庫元數(shù)據(jù)（DatabaseMetaData）就是指定義數(shù)據(jù)庫各類對象結(jié)構(gòu)的數(shù)據(jù)。
在mysql中可以通過show關(guān)鍵字獲取相關(guān)的元數(shù)據(jù)
show status; 獲取數(shù)據(jù)庫的狀態(tài)
show databases; 列出所有數(shù)據(jù)庫
show tables; 列出所有表
show create database [數(shù)據(jù)庫名]; 獲取數(shù)據(jù)庫的定義
show create table [數(shù)據(jù)表名]; 獲取數(shù)據(jù)表的定義
show columns from <table_name>; 顯示表的結(jié)構(gòu)
show index from <table_name>; 顯示表中有關(guān)索引和索引列的信息
show character set; 顯示可用的字符集以及其默認整理
show collation; 顯示每個字符集的整理
show variables; 列出數(shù)據(jù)庫中的參數(shù)定義值也可以從 information_schema庫中獲取元數(shù)據(jù)，information_schema數(shù)據(jù)庫是MySQL自帶的信息數(shù)據(jù)庫，它提供了訪問數(shù)據(jù)庫元數(shù)據(jù)的方式。存著其他數(shù)據(jù)庫的信息。
select schema_name from information_schema.schemata; 列出所有的庫
select table_name FROM information_schema.tables; 列出所有的表在代碼中可以由JDBC的Connection對象通過getMetaData方法獲取而來，主要封裝了是對數(shù)據(jù)庫本身的一些整體綜合信息，例如數(shù)據(jù)庫的產(chǎn)品名稱，數(shù)據(jù)庫的版本號，數(shù)據(jù)庫的URL，是否支持事務(wù)等等。
DatabaseMetaData的常用方法：
getDatabaseProductName：獲取數(shù)據(jù)庫的產(chǎn)品名稱
getDatabaseProductName：獲取數(shù)據(jù)庫的版本號
getUserName：獲取數(shù)據(jù)庫的用戶名
getURL：獲取數(shù)據(jù)庫連接的URL
getDriverName：獲取數(shù)據(jù)庫的驅(qū)動名稱
driverVersion：獲取數(shù)據(jù)庫的驅(qū)動版本號
isReadOnly：查看數(shù)據(jù)庫是否只允許讀操作
supportsTransactions：查看數(shù)據(jù)庫是否支持事務(wù)（1）導入mysql依賴
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>（2）創(chuàng)建測試用例
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);
}
}（1）獲取數(shù)據(jù)庫元信息綜合信息
@Test
public void testDatabaseMetaData() throws SQLException {
//獲取數(shù)據(jù)庫元數(shù)據(jù)
DatabaseMetaData dbMetaData = conn.getMetaData();
//獲取數(shù)據(jù)庫產(chǎn)品名稱
String productName = dbMetaData.getDatabaseProductName();
System.out.println(productName);
//獲取數(shù)據(jù)庫版本號
String productVersion = dbMetaData.getDatabaseProductVersion();
System.out.println(productVersion);
//獲取數(shù)據(jù)庫用戶名
String userName = dbMetaData.getUserName();
System.out.println(userName);
//獲取數(shù)據(jù)庫連接URL
String userUrl = dbMetaData.getURL();
System.out.println(userUrl);
//獲取數(shù)據(jù)庫驅(qū)動
String driverName = dbMetaData.getDriverName();
System.out.println(driverName);
//獲取數(shù)據(jù)庫驅(qū)動版本號
String driverVersion = dbMetaData.getDriverVersion();
System.out.println(driverVersion);
//查看數(shù)據(jù)庫是否允許讀操作
boolean isReadOnly = dbMetaData.isReadOnly();
System.out.println(isReadOnly);
//查看數(shù)據(jù)庫是否支持事務(wù)操作
boolean supportsTransactions = dbMetaData.supportsTransactions();
System.out.println(supportsTransactions);
}（2）獲取數(shù)據(jù)庫列表
@Test
public void testFindAllCatalogs() throws Exception {
//獲取元數(shù)據(jù)
DatabaseMetaData metaData = conn.getMetaData();
//獲取數(shù)據(jù)庫列表
ResultSet rs = metaData.getCatalogs();
//遍歷獲取所有數(shù)據(jù)庫表
while (rs.next()) {
//打印數(shù)據(jù)庫名稱
System.out.println(rs.getString(1));
}
//釋放資源
rs.close();
conn.close();
}（3）獲取某數(shù)據(jù)庫中的所有表信息
@Test
public void testFindAllTable() throws Exception {
//獲取元數(shù)據(jù)
DatabaseMetaData metaData = conn.getMetaData();
//獲取所有的數(shù)據(jù)庫表信息
ResultSet rs = metaData.getTables("庫名", "%", "%", new String[]{"TABLE"});
//拼裝table
while (rs.next()) {
//所屬數(shù)據(jù)庫
System.out.println(rs.getString(1));
//所屬schema
System.out.println(rs.getString(2));
//表名
System.out.println(rs.getString(3));
//數(shù)據(jù)庫表類型
System.out.println(rs.getString(4));
//數(shù)據(jù)庫表備注
System.out.println(rs.getString(5));
System.out.println("--------------");
}
}（4）獲取某張表所有的列信息
@Test
public void testFindAllColumns() throws Exception {
//獲取元數(shù)據(jù)
DatabaseMetaData metaData = conn.getMetaData();
//獲取所有的數(shù)據(jù)庫某張表所有列信息
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"));
//小數(shù)部分位數(shù),不適用的類型會返回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("--------------");
}
}參數(shù)元數(shù)據(jù)（ParameterMetaData）：是由PreparedStatement對象通過getParameterMetaData方法獲取而 來，主要是針對PreparedStatement對象和其預編譯的SQL命令語句提供一些信息，ParameterMetaData能提供占位符參數(shù)的個數(shù)，獲取指定位置占位符的SQL類型等等 以下有一些關(guān)于ParameterMetaData的常用方法：
getParameterCount：獲取預編譯SQL語句中占位符參數(shù)的個數(shù)@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();
//獲取參數(shù)個數(shù)
int paramCount = paramMetaData.getParameterCount();
System.out.println(paramCount);
}結(jié)果集元數(shù)據(jù)（ResultSetMetaData）：是由ResultSet對象通過getMetaData方法獲取而來，主要是針對由數(shù)據(jù)庫執(zhí)行的SQL腳本命令獲取的結(jié)果集對象ResultSet中提供的一些信息，比如結(jié)果集中的列數(shù)、指定列的名稱、指 定列的SQL類型等等，可以說這個是對于框架來說非常重要的一個對象。 以下有一些關(guān)于ResultSetMetaData的常用方法：
getColumnCount：獲取結(jié)果集中列項目的個數(shù)
getColumnType：獲取指定列的SQL類型對應(yīng)于Java中Types類的字段
getColumnTypeName：獲取指定列的SQL類型
getClassName：獲取指定列SQL類型對應(yīng)于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");
//執(zhí)行sql語句
ResultSet rs = pstmt.executeQuery();
//獲取ResultSetMetaData對象
ResultSetMetaData metaData = rs.getMetaData();
//獲取查詢字段數(shù)量
int columnCount = metaData.getColumnCount();
System.out.println("字段總數(shù)量："+ 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("----------");
}
}創(chuàng)建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>目錄結(jié)構(gòu)如下
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
