整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、web概念概述
1.1 JavaWeb：使用Java语言开发基于互联网的项目
1.2 软件架构：
1.2.1 C/S: Client/Server 客户端/服务器端
在用户本地有一个客户端程序，在远程有一个服务器端程序
如：QQ，迅雷...
优点：用户体验好
缺点：开发、安装，部署，维护 麻烦
1.2.2 B/S: Browser/Server 浏览器/服务器端
只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
优点：开发、安装，部署，维护 简单
缺点：如果应用过大，用户的体验可能会受到影响，对硬件要求过高
二、B/S架构详解
2.1 资源分类：
2.1.1 静态资源：使用静态网页开发技术发布的资源。
特点：
所有用户访问，得到的结果是一样的。
如：文本，图片，音频、视频, HTML,CSS,JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
HTML：用于搭建基础网页，展示页面的内容
CSS：用于美化页面，布局页面
JavaScript：控制页面的元素，让页面有一些动态的效果
2.1.2 动态资源：使用动态网页及时发布的资源。
特点：
所有用户访问，得到的结果可能不一样。
如：jsp/servlet,php,asp...
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
2.1.3 注意：我们要学习动态资源，必须先学习静态资源！
三、HTML
3.1 概念：是最基础的网页开发语言
Hyper Text Markup Language 超文本标记语言
超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
标记语言:
由标签构成的语言。<标签名称> 如 html，xml
标记语言不是编程语言
3.2 快速入门：
3.2.1 语法：
1. 创建html文档，后缀名为.html 或者 .htm
2. 标签分类：
围堵标签：有开始标签和结束标签。如 <html> </html>
自闭和标签：开始标签和结束标签在一起。如 <br/>
3. 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a>
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
5. html的标签不区分大小写，但是建议使用小写。
3.2.2 代码：
<html>
<head>
<title>title</title>
</head>
<body>
<FONT color='red'>Hello World</font><br/>
<font color='green'>Hello World</font>
</body>
</html>
3.3 标签学习：
3.3.1 文件标签：构成html最基本的标签
1、html:html文档的根标签
2、head：头标签。用于指定html文档的一些属性。引入外部的资源
3、title：标题标签。
4、body：体标签
5、<!DOCTYPE html>：html5中定义该文档是html文档
3.3.2 文本标签：和文本有关的标签
1、注释：<!-- 注释内容 -->
2、<h1> to <h6>：标题标签，h1~h6:字体大小逐渐递减
3、<p>：段落标签
4、<br>：换行标签
5、<hr>：展示一条水平线
文本标签属性：
color：颜色
width：宽度
size：高度
align：对其方式
center：居中
left：左对齐
right：右对齐
6、<b>：字体加粗
7、<i>：字体斜体
8、<font>:字体标签
9、<center>:文本居中
字体标签属性：
color：颜色
size：大小
face：字体
属性定义：
color：
1. 英文单词：red,green,blue
2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
width：
1. 数值：width='20' ,数值的单位，默认是 px(像素)
2. 数值%：占比相对于父元素的比例
3.3.3 图片标签：
img：展示图片
属性：src：指定图片的位置
相对路径：以.开头的路径
./：代表当前目录
../:代表上一级目录
代码举例：
<img src="./image/jiangwai_1.jpg">
<img src="../image/jiangwai_1.jpg">
3.3.4 列表标签：
有序列表：
ol:
li:
无序列表：
ul:
li:
3.3.5 链接标签：
a:定义一个超链接
属性：
href：指定访问资源的URL(统一资源定位符)
target：指定打开资源的方式
_self:默认值，在当前页面打开
_blank：在空白页面打开
代码：
<a href="http://www.baidu.com">点我</a>
<a href="http://www.baidu.com" target="_blank">点我</a>
<a href="http://www.baidu.com"><img src="image/jiangwai_1.jpg"></a>
3.3.6 div和span：
div:每一个div占满一整行。块级标签
span：文本信息在一行展示，行内标签 内联标签
3.3.7 语义化标签：html5中为了提高程序的可读性，提供了一些标签。
<header>：页眉
<footer>：页脚
3.3.8 表格标签：
table：定义表格
属性：
width：宽度
border：边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
bgcolor：背景色
align：对齐方式
tr：定义行
bgcolor：背景色
align：对齐方式
td：定义单元格
colspan：合并列
rowspan：合并行
th：定义表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分
osition: absolute;使元素完全脱离文档流（原始位置不保留）
在设置flex布局之后，子元素的float、clear、vertical-align属性都将失效
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
默认值为：
row，主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上端。
column-reverse：主轴为垂直方向，起点在下端
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
说明:flex-start：左对齐。
flex-end：右对齐。
center：居中。
space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
默认值为 stretch，即如果项目未设置高度或者设为
auto，将占满整个容器的高度。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐
.container {
//定义多根轴线的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
伪类选择器（如：hover）和属性选择器（如[type="input"]）与一个类选择器的优先级相同。通用选择器（＊）和组合器（>、+、~）对优先级没有影响
通常最好让优先级尽可能低，这样当需要覆盖一些样式时，才能有选择空间
在选择器中不要使用ID
不要使用！important
创建一个用于分发的JavaScript模块（比如NPM包）时，强烈建议尽量不要在JavaScript里使用行内样式
正确的做法是在包里包含一个样式表。如果组件需要频繁修改样式，通常最好用JavaScript给元素添加或者移除类
继承：
跟文本相关的属性：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing
有两个特殊值可以赋给任意属性，用于控制层叠：inherit和initial
width的默认值就是auto； display: initial等价于display: inline
在CSS中，1em等于当前元素的字号，其准确值取决于作用的元素
em用在内边距、外边距以及元素大小上很好，但是用在字号上就会很复杂
使用rem设置字号 rem是root em的缩写。rem不是相对于当前元素，而是相对于根元素的单位
一般会用rem设置字号，用px设置边框，用em设置其他大部分属性，尤其是内边距、外边距和圆角（不过我有时用百分比设置容器宽度）
vh：视口高度的1/100。
vw：视口宽度的1/100。
vmin：视口宽、高中较小的一方的1/100（IE9中叫vm，而不是vmin）。
vmax：视口宽、高中较大的一方的1/100（本书写作时IE和Edge均不支持vmax）
calc()函数内可以对两个及其以上的值进行基本运算。当要结合不同单位的值时，calc()特别实用。它支持的运算包括：加（+）、减（−）、乘（×）、除（÷）。加号和减号两边必须有空白
line-height、z-index、font-weight 无单位
css 变量： 变量名前面必须有两个连字符--，块内声明
使用 var(--xxx)
IE8+支持display: table,IE10+支持弹性盒子或者Flexbox，都默认支持等高列
给容器设置display: flex，它就变成了一个弹性容器（flex container），子元素默认等高
vertical-align声明只会影响行内元素或者table-cell元素
垂直居中指南
在容器里让内容居中最好的方式是根据特定场景考虑不同因素。做出判断前，先逐个询问自己以下几个问题，直到找到合适的解决办法。其中一些技术会在后面的章节中介绍，可根据情况翻阅对应的内容寻找答案。❑ 可以用一个自然高度的容器吗？给容器加上相等的上下内边距让内容居中。❑ 容器需要指定高度或者避免使用内边距吗？对容器使用display: table-cell和vertical-align: middle。❑ 可以用Flexbox吗？ 如果不需要支持IE9，可以用Flexbox居中内容。参见第5章。❑ 容器里面的内容只有一行文字吗？设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。❑ 容器和内容的高度都知道吗？将内容绝对定位。参见第7章。（只有当前面提到的方法都无效时才推荐这种方式。）❑ 不知道内部元素的高度？用绝对定位结合变形（transform）。参见第15章的例子。（还是只有当前面提到的方法都无效时才推荐该方法。）还不确定的话，参考howtocenterincss网站。这个网站很不错，可以根据自己的场景填写几个选项，然后它会相应地生成垂直居中的代码
览器的兼容性越来越好，移动端基本是清一色的webkit，经常会用到css的不同尺寸/长度单位，这里做个整理。
绝对单位
px : Pixel 像素
pt : Points 磅
pc : Picas 派卡
in : Inches 英寸
mm : Millimeter 毫米
cm : Centimeter 厘米
q : Quarter millimeters 1/4毫米
相对单位
% : 百分比
em : Element meter 根据文档字体计算尺寸
rem : Root element meter 根据根文档（ body/html ）字体计算尺寸
ex : 文档字符“x”的高度
ch : 文档数字“0”的的宽度
vh : View height 可视范围高度
vw : View width 可视范围宽度
vmin : View min 可视范围的宽度或高度中较小的那个尺寸
vmax : View max 可视范围的宽度或高度中较大的那个尺寸
运算
calc : 四则运算
实例：
h1 { width: calc(100% - 10px + 2rem)单位比例
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
详细
绝对单位
px - Pixel 像素
像素 px 相对于设备显示器屏幕分辨率而言。
div { font-size: 12px }
p { text-indent: 24px }pt Points 磅
1 pt = 1/72 英寸
div { font-size: 10pt }
p { height: 100pt }pc Picas 派卡
十二点活字（印刷中使用的），相当于我国新四号铅字的尺寸。
div { font-size: 10pc }
p { height: 10pc }in Inches 英寸
div { font-size: 10in }
p { height: 10in }mm Millimeter 毫米
div { font-size: 10mm }
p { height: 10mm }cm Centimeter 厘米
div { font-size: 10cm }
p { height: 10cm }q Quarter millimeters 1/4毫米
div { font-size: 20q }
p { height: 100q }相对单位
% 百分比
相对于父元素宽度
<body>
em Element meter 根据文档计算尺寸
相对于当前文档对象内文本的字体尺寸而言，若未指定字体大小则继承自上级元素，以此类推，直至 body，若 body 未指定则为浏览器默认大小。
<body>
rem Root element meter 根据根文档（ body/html ）字体计算尺寸
相对于根文档对象（ body/html ）内文本的字体尺寸而言，若未指定字体大小则继承为浏览器默认字体大小。
ex 文档字符“x”的高度
相对于字符“x”的高度，通常为字体高度的一半，若未指定字体尺寸，则相对于浏览器的默认字体尺寸。
至于为啥是x，我TM也不知道。
ch 文档数字“0”的的宽度
同上，相对于数字“0”的宽度。
一张图解释：
vh View height / vw View Width - 可视范围
相对于可视范围的高度和宽度，可视范围被均分为 100 单位的 vh/vw；可视范围是指屏幕可见范围，不是父元素的，百分比是相对于包含它的最近的父元素的高度和宽度。
假设设备可视范围为高度 900px，宽度 750px，则， 1 vh = 900px/100 = 9px，1vw = 750px/100 = 7.5px
。
vmin / vmax 可视范围的宽度或高度中较小/较大的那个尺寸
假设浏览器的宽度设置为 1200px，高度设置为 800px， 则 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px 。
如果宽度设置为 600px，高度设置为 1080px, 则 1vmin = 6px, 1vmax = 10.8px 。
假设需要让一个元素始终在屏幕上可见：
.box {假设需要让这个元素始终铺满整个视口的可见区域：
.box {em、rem 是实际生产中我们最常用到的单位，可以使用其配合媒体查询改变 body 字体大小来实现响应式的设计，vh、vw、vmin、vmax也可以很方便地帮助我们控制响应尺寸，但实际的可控性可能不如前者，具体按照我们的业务需求去实践吧！
*请认真填写需求信息，我们会在24小时内与您取得联系。
