大前端包括 web(网页)、移动互联(android ios即 app)、公众号/小程序(嵌入到第三方框架的app)、其他硬件设备/大屏。进行数据显示和数据收集(查询字符串、json字符串)。
前后端分离开发：
1.所有的程序都是以数据为基础，没有数据的程序没有实际意义，对数据进行增删改查。
2.前后端分离就是把数据操作和显示分离出来。前端专注做数据显示，通过文字，图片或者图标等方式让数据直观的显示出来。后端做数据的操作。前端把数据发给后端，有后端对数据进行修改。
3.后端一般用java，c#等语言，后端来进行数据库的链接，并对数据进行操作。
4.后端提供接口给前端调用，来触发后端对数据的操作。
网页三要素:
html :是网页的骨架，用块、行、table/form 标签组成
css :包括页面装饰、布局、动画过渡效果。原则:对于动画效果能用css实现的绝对不用js。
js : JavaScript，使用动态DOM操作，类似于jstl,用于与后台数据交互。
HTML:
html是超文本标记语言，超级文本内容包括 文本、超级链接、图片，视频，音频等等。html属于解释性语言，在浏览器中运行，它的语法是由w3c网页编程标准制定的，所以和java不同，java是隶属于sun/oracle公司的，有具体的公司及团队维护，所有的标准oracle说了算，jvm也是oracle开发的，当java进行语法升级时，jvm和效果等等都会进行升级，而html从h4升为h5，升级了语法，但是不同的浏览器有不同的展示效果，并不是统一的，只是使用了一套标准进行编写而已。
1.环境搭建
1)编辑器环境
轻量级的编辑
sublime(需要emmet插件)
vscode
2)浏览器环境:测试
firefox
google chrome
opera
safari
ie8+ 兼容性
2.前后台过程
前台:编写代码 --> 运行测试 --> 交付(部署)
1)部署到tomcat中(动态服务器):tomcat/webapps/
2)部署在静态服务器apache/nginx）
后台:编写代码 -> 编译代码 ->测试 -> 打包 （jar/war）
对于springBoot中写完的代码进行打包部署:
1)war包可以抛给tomcat/webapps,war就能自动进行解压
2)jar包直接就可以允许了，因为内置了tomcat服务器
3.html结构
1)html由各种元素组成，一个元素通常包含开始标签，结束标签，在开始标签中可以添加属性
2).HTML5的doctype声明:
<!DOCTYPE html>
3).Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则
HTML5的doctype声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4).xml和html之间区别：
xml:可扩展标记语言，在xml中的标签是可以自定义的
html:所有的标签都是内置的，就是固定的
5).html的主体结构：
<html>
<head>
<!--源信息 该行表示html告诉浏览器，告诉浏览器使用指定的字符编码进行解码-->
<meta charset="UTF-8">
</head>
<body>
<!--可以显示在网页中的内容-->
</body>
</html>
注:编写html时，不要瞎写，通常需要在网页上显示的内容是在<body>标签中进行编写，不允许在<head>标签中进行编写。但如果在<head>中写了的话浏览器会进行语法纠错的，也是可以显示出来的，但还是推荐按照标准编写方式进行编写。
6)属性
核心属性:id、title、style、class 是绝大多数元素都具备的属性
特有属性: 元素a中 href、target;元素img中 src、width、height
4.标签
我们学习标签主要学习的是标签的语义，而非样式，比如<h1>标题标签，如果将该标签的样式重置，那么它的效果适合没有任何样式的div标签是一样的效果，所以当我们使用时是通过每个标签的语义来进行使用的，而不是看其显示的样式。
标签可以分为 块级标签 和 行级标签。
1)块级标签作用主要是搭建网页结构。其宽度默认占满父元素，高度默认由内容决定，宽高是可以自定义的。
块级标签: div (属于无意义的块元素，当不知道用哪一个块级标签时可以使用此标签，所谓无招胜有招)
h1~h6 标题
p 段落
ul>li 列表
ol>li 列表
dl>dd,dt 列表
2)行级标签作用是填充网页，即内容的显示。宽高默认是由内容决定的，且不能自定义，所有行级元素可以共享一行空间。
行级标签:span(无意义的行内元素)
a 超链接 三种跳转方式:
<!-- 在新的tab中打开页面 _blank表示新建一个页面进行展示-->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<!-- 锚点跳转 -->
<a href="#introduce">介绍</a>
<a href="#history">履历</a>
<!-- 阻止默认跳转 javascript:void(0) -->
<a href="javascript:void(0)" onclick="alert(1)">跳转</a>
img ...
注：行内元素一般不允许嵌套子元素，只允许放文本。行级标签嵌套在块级便签内部，不允许块级标签放入行级标签内部。
CSS:
1.在html中使用css样式(3种方式)
1)在标签内部嵌入
缺点：将css代码写在html中，比较混乱;该样式复用性较低
优点：优先级高，简单直接
2)集中嵌入在style标签中
3)独立写在外部css文件中，通过 导入
2.css选择器(JQuery选择器)
1)核心选择器:选择比较大的范围
标签选择器：div{...} p{...}
id选择器 ：#one{...} : id为one --> <div id="one">one</div>
class选择器：.two{} : class为first --> <div class="two">two</div>
并且选择器：div.three{} : 选中的是标签为div且class为three的标签 --> <div class="three">three</div>
或者选择器：div,.first{}: 选中的是所有的div和所有的class为first的标签 --> <div class="one">one</div> <div class="first">first</div>
普遍选择器： *{} 所有的标签
2)层次选择器
子代选择器(>)
.top_nav > ul > li
选中class为top_nav的元素的直接后代ul元素的直接后代li元素
后代选择器(空格): .top_nav li
下一个兄弟选择器: .top_nav li + *
之后所有兄弟选择器: .top_nav li ~ *
3)过滤器
1. 属性过滤器
selector[name] 已选择到的元素具有name属性
selector[name=v] 已选择到的元素具有name属性，并且name属性的值为v
selector[name^=v] 已选择到的元素具有name属性，并且name属性的值以'v'开头
selector[name$=v] 已选择到的元素具有name属性，并且name属性的值以'v'结尾
selector[name*=v] 已选择到的元素具有name属性，并且name属性的值中包含了'v'
2. 伪类过滤器
以:开头的
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
selector:first-child 过滤出已选择元素中的是第一个孩子的元素
例：ul>li:first-child 已选择元素表示ul下所有的直接li标签，第一个li标签
selector:last-child
selector:nth-child(2) 已选择元素中的第2个孩子元素
selector:nth-child(even) 过滤出偶数索引
selector:nth-child(odd) 过滤出奇数索引
selector:nth-child(3n+1)
selector:only-child
selector:not(selector)
...
selector:hover ：鼠标移到上面
selector:active
selector:visited
selector:focus
3. 伪元素过滤器
可以产生出来一个虚拟元素（行内元素）,以::开头的
div::before {
}
div::after {
}
<div>
::before
<p>one</p>
<p>two</p>
::after
</div>
————————
未完，后续再接上…
