整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

酷炫网页制作之《HTML认识及基础标签使用》，分分钟搞定

么是HTML

Hyper Text Markup Language, 超文本标记语言

标记又称为标签(Tag), 一般语法:

<tagName></tagName>

它可以有属性(Attribute):

<tagName attributeName="value">, 如:

<meta charset="utf-8" />

标签也可以不成对地关闭:

<tagName />

HTML文档由浏览器解释并执行。

HTML文档基本结构

<!DOCTYPE html> ----- 告诉浏览器用html5的标准来解释和执行该网页

<html>

<head> ---- 头部, 可包含meta, title等标签

</head>

<body> ---- 主体, 包含主要内容

</body>

</html>

meta

<meta charset="utf-8" /> 用于告诉浏览器用什么样的字符编码来解释网页中的文本.

常见编码:

iso-8859-1: 纯英文编码

gbk, gb2312: 简体中文编码

big5: 大五码,繁体中文编码,主要应用于台湾地区

utf-8: 国际首选编码,它兼容所有的字符

除此之外, meta还可以通过keywords, description属性对页面关键词及描述信息进行设置, 以提高搜索引擎的命中.

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>

<li>aaa</li>

…

</ul>

10.有序列表

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

<li>aaa</li>

…

</ol>

扩展：type用来设置序号的类型

start用来设置索引值

11.自定义列表

语法： <dl>

<dt>名词</dt>

<dd>解释</dd>

…

</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=”http://www.1000phone.com” target=”_blank”><img src=”1.jpg” title=”前端开发”/></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 align=”center” height=”30″>

<th width=”100″>姓名</th>

…

</tr>

<tr align=”center” height=”30″>

<td width=”100″>姓名</td>

…

</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>

<option>a</option>

<option selected>b</option>

…

</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标签引入，语法如下：

<link rel=”stylesheet” type=”text/css” href=”css文件路径”/>

注：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名

注：类名词列表用法：

<h3 class=”tit focus”>新闻资讯</h3>

当一个元素即具有与其他元素相同的样式，又有某一个样式不同时，需要用到类名词列表的方式

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）连接锚记名

<a href=”#锚记名”></a>

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

<a href=”#one”>第一章</a>

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

扩展一：如何在网页中插入flash

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

<param name=”movie” value=”img/flash.swf”/>

<embed width=”1000″ height=”500″ src=”img/flash.swf”></embed>

</object>

扩展二：设置滚动字幕效果

语法：

<marquee behavior=”scroll|alternate” width=”200″ height=”30″ direction=”left|right|up|down” scrollamount=”20″>

滚动内容…

</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识别

4.

语法：选择器{属性:属性值;}

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.表单域

<form method=”get|post” action=”服务器端文件”>…</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.提示信息

放置在表单控件前后的文字内容叫做提示信息，我们经常将提示信息放置在一个label标签中，语法如下：

a）点击文字选中单选按钮或复选按钮

<input type=”radio” id=”boy” name=”a”/> <label for=”boy”>男</label>

注：设置id属性值和for属性值一致产生关联即可达到点击文字选中按钮的效果

b）通过给label标签设置样式达到一定的效果

注：label是一个内联元素

4.表单字段集及表单字段集标题

语法： <fieldset>

<legend>标题</legend>

表单控件…

</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.页面头部优化

给网站添加关键词，描述

<meta name=”keywords” content=”” /> 关键词

<meta name=”description” content=””/> 描述

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>

<source src=”1.mp3″ type=”audio/mp3″/>

…

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=”图片路径”>

<source src=”2.mp4″ type=”video/mp4″/>

…

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 id=”data”>

<option>a</option>

…

</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>

<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.快速生成标记内容

标记.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.设置多根轴线对齐方式(如果只有一根轴线，该属性不起作用)

语法：align-content:flex-start|flex-end|center|space-between|space-around|stretch;

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.外联式媒体查询

语法：

<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.内嵌式媒体查询

语法：

@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 name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>

注：让视图窗口的宽度等于设备的宽度

快捷键：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小时内与您取得联系。

推荐阅读
友情链接 眉县 新化县 科尔沁区 黎城县 连城县 罗山县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服