大前端开发
一.引入
项目研发
例: estore (电子商城)
1.
-
后台管理子模块
1.1. 数据来源 （数据库）
1.2. 后台管理系统
1.2.1. 功能划分:
分类管理
商品管理
品牌管理
订单管理
2. 购物子模块
2.1. 功能划分:
浏览首页
信息筛选
列表页面
查看商品详情
添加购物车
提交订单
3.estore的 - 企业级要求
3.1. 架构
springboot
spring
springmvc
mybatis
mybatis-generator
mysql
poi （excel）
fastdfs (分布式附件服务器)
spring security(自己封装 jwt)
git版本控制（svn）
github 代码中央仓库（团队协作）
大前端（web + 移动互联 + 小程序公众号）
html/css/js
android
jquery h5api
vue vuex vuerouter
cordova
weex
前端入门笔记 二. 思考
1. 什么是前后台分离开发?
https://www.jianshu.com/p/bf3fa3ba2a8f
简单来说就是根据对数据的不同操作来进行职责的划分
2.什么是大前端开发，大前端开发中包含了哪些东西?
简单来说就是前端技术的一个统一,大前端最大的特点在于一次开发，同时适用于所有平台.
注:具体的精确且详细的理解请关注一个月后的博文.
三. 课程安排（大前端基础）
html5
css3
android基础（cordova,weex）
js基础
1.Html基础
1.1. 环境搭建
1) 编辑器环境 轻量级的编辑
sublime(emmet插件)
vscode *
2) 浏览器环境（测试）
firefox
google chrome
opera
safari
ie8+ 兼容性
1.2. 编写hello world网页
编写代码 -> 运行测试 -> 交付（部署）【网站】
1） 部署在tomcat中( 动态服务器- 慢)
tomcat/webapps/hello.html
2) 部署在静态服务器（apache/nginx）
阿里云（ubuntu16.04）47.112.126.92
jdk
mysql
apache /var/www/html
tomcat
编写代码 -> 编译代码 ->测试 -> 打包 （jar/war）
3. html结构
html是一种超文本标记语言
什么是超级文本?（文本,超级链接,图片，视频，音频…特点:自带样式,自带效果） doctype声明 :
```yaml
HTML5:
<!DOCTYPE html>
HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html主体结构 <html>
<head>
<!--源信息 -->
<meta charset="UTF-8">
</head>
<body>
<!--可以显示在网页中的内容-->
</body>
</html>
注:
xml 标签是可以自定义的
html 所有的标签都是内置的
4.html 语法
html由各种元素组成，一个元素通常包含开始标签，结束标签，内容 ;在开始标签中可以添加属性
<div class="content" id="one">
<span>hello world</span> </div>
5.html属性
- 核心属性：id、title、style、class等绝大多数元素都具备的属性
- 特有属性:某些元素中特有的属性
a 标签:
<a href="http://www.w3school.com.cn">W3School</a>
href :用于指定超链接目标的 URL。
绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）
相对 URL - 指向站点内的某个文件（href="index.htm" target="_blank" rel="external nofollow" ）
锚 URL - 指向页面中的锚（href="#top"）
注:1.如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。
2.被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
3.<a> 标签中必须提供 href 属性或 name 属性。
target:规定在何处打开链接文档。
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
img 标签-----向网页中以链接的形式嵌入一幅图像,没有结束标签.
例:<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
src="该图像的文件的的绝对路径或相对路径"
width:宽 可用 px %
height:高
-
html那些事
Java 编译型语言 : .java --编译----> .class —运行----> jvm
隶属于sun/oracle公司的，有具体的公司及团队维护，所有的标准oracle说了算，jvm也是oracle开发的,所以,当Java需要进行语法升级的时候 ,jvm也会随之升级（解释java代码)从而达到一个良好的效果升级.
springboot写完代码之后如何部署
1) 打包成为war,直接抛在tomcat/webapps，war就会自动解压
2) 打包成为jar,直接运行jar(内置了tomcat)
html 解释型语言 : .html —运行—> 浏览器
当 网页编程标准，w3c 要将h4标准 升级到h5时,只是语法标准的升级,浏览器对于新标准的解析可能迟迟达不到要求,从而导致更新标准的复杂性.
-
html标签
学什么？
标签含义?
如何使用标签(语义)?
-
块级别标签
作用：搭建网页的结构
特点：宽度默认占满父元素,高度默认由内容决定,宽高可以自定义
-
-
<div class="nav">
<ul>
<li></li>
</ul>
</div>
div 【容器】无意义的块元素（无招胜有招）
h1~h6 标题
p 段落
ul>li 【容器】列表
ol>li 【容器】列表
dl>dd,dt 【容器】列
-
行级别标签
作用：填充网页
特点：默认宽高由内容决定；宽高无法指定；所有的行内元素可以共享一行空间;行内元素内部一般不允许嵌套子元素，只允许放文本
span 无意义的行内元素
a 超链接 href target
img 图片 src alt 当图片找不到的时候的文本替代
strong b em i sub sup d ...
<span>hello</span>
<a href="">百度一下</a>
-
css入门
6.1.三要素：
1) html (网页骨架) 块 ，行 （table/form）
2) css（页面装饰，布局，动画过渡效果）
原则：对于动画效果能用css实现的绝对不用js
3) Javascript（树莓派）
动态DOM, 类似于jstl
数据交互
6.2.如何在html中使用css(3种方式)
1) 嵌入在标签内部
缺点:将css代码写在了html中，较为混乱,复用性较低.
优点：优先级高，简单直接（修改别人代码的时候，weex rn）
2) 集中嵌入在style标签中
<style>
ul{
margin: 0;
padding: 0;
list-style: none;
}
/*字体图标库*/
ul>li::before{
content:"*";
}
</style>
3).将css独立写在外部的css文件中，并且通过link导入进来,适用于企业级开发
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cssy引入</title>
<link type="text/css" rel="styleSheet" href="../css/style.css" target="_blank" rel="external nofollow"
</head>
<body>
<div>
hello world!
</div>
<div>
hello css!
</div>
</body>
</html>
6.4.css语法
selector {
/*规则*/
color:#ffffff;
background-color:pink;
}
6.5. css选择器 (jQuery选择器)
1) 核心选择器
用法：选择较大范围
1. 标签（元素）选择器
div {}
h1 {}
2. id选择器
#one {}
<div id="one">one</div>
<div id="two">two</div>
3. class选择器
.first {}
<div id="one" class="first">one</div>
<div id="two" class="first">two</div>
<div id="three" class="first">one</div>
<div id="four" class="second">two</div>
<p id="five" class="first">p</div>
容易造成词穷！！！
4. 并且选择器
div.first {}
p#five {}
5. 或者选择器
div,.first {}
6. 普遍选择器
*
2) 层次选择器【一般不超过5层】
1. 子代选择器
.top_nav > ul > li
选中class为top_nav的元素的直接后代ul元素的直接后代li元素
2. 后代选择器
.top_nav li
3. 下一个兄弟选择器
.top_nav li + *
4. 之后所有兄弟选择器
.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. 伪类过滤器
以:开头的
selector:first-child 过滤出已选择元素中的是第一个孩子的元素
selector:last-child
selector:nth-child(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>
![web前端布局练手项目[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)