Including large front end Web (web), mobile Internet (android ios i.e. App), the public number / programs (embedded in the frame to a third party App), other hardware devices / large screen. Data collection and display data (the query string, json string).
Development separated front and rear ends:
1. All the procedures are based on data, not the data program is not practical significance, the data CRUD.
2. The front end of the separator is to separate the data manipulation and display. Focus on the front end for data display, let the data through text, pictures or icons intuitively displayed. Do the back-end operational data. The front-end data to the back-end, back-end data have to be modified.
3. The back-end general use java, c # and other languages, to link the back-end database, and manipulate data.
4. The rear end of the call interface to provide a front end, a rear end to trigger operation on the data.
Pages three elements:
HTML: page skeleton, with the block, row, table / form tab composition
css: including page decoration, layout, animation transitions. Principle: For css animation effects can be achieved absolutely no js.
js: JavaScript, DOM using dynamic operation, similar to JSTL, for interacting with the background data.
HTML:
HTML is HTML, the hypertext content including text, hyperlinks, images, video, audio, and so on. html interpretative language, running in a browser, its syntax is developed by the w3c web programming standards, and so different java, java is part of the sun / oracle company, there are specific companies and the maintenance team, all of the standard oracle final say, jvm also developed oracle, java syntax when upgrading, jvm and effects, etc. will be upgraded, and promoted html from h4 h5, upgrade the syntax, but different browsers have different display of results, not uniform, but the use of a set of standards for writing it.
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 ...
注：行内元素一般不允许嵌套子元素，只允许放文本。行级标签嵌套在块级便签内部，不允许块级标签放入行级标签内部。
The CSS:
1. Use in html css style (3 ways)
1) embedded within the label
disadvantages: the code written in html css, confusing; the low reuse pattern
advantages: high priority, straightforward
2 ) that is embedded in the style label
3) Independent wrote in an external css file, by importing
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>
--------
unfinished, draw a line on the follow-up ...
