前言
-
前端网页开发流程
编写代码 -> 运行测试 -> 交付（部署）【网站】
1) 部署在tomcat中( 动态服务器- 慢)
tomcat/webapps/
2) 部署在静态服务器（apache/nginx）
apache
默认在/var/www/html目录下资源访问 -
java编写web项目流程
编写代码 -> 编译代码 ->测试 -> 打包 （jar/war）
springboot写完代码之后如何部署
1) 打包成为war,直接抛在tomcat/webapps，war就会自动解压
2) 打包成为jar,直接运行jar(内置了tomcat) -
当前较为流行的前后台分离开发架构
1) 服务器端渲染技术
jsp
jsp -> servlet -> class -> 执行 -> 输出html
asp
asp -> … -> 输出html
页面和服务接口都由后端程序员完成！！！
2) 客户端渲染技术
html -> 脚本（js） -> 动态输出html后端程序员只提供数据接口（springboot + spring + springmvc + mybatis +…）
前端程序员完成页面的编写 (html + css + javascript + vue)全栈工程师
（前端 + nodejs服务器端）
（前端 + JavaEE服务器端）
注意：编写时为了方便自己，建立适合自己的目录结构
环境搭建
1) 编辑器环境
轻量级的编辑
sublime(emmet插件)
vscode(需要安装open in browser插件方便调试)
2) 浏览器环境（测试）
firefox
google chrome
opera
safari
ie8+ 兼容性(对于低版本ie基本可以不用了)
HTML结构
-
超文本标记语言
超级文本（文本,超级链接,图片，视频，音频...） -
doctype声明
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
所有的标签都是内置的 -
语法
html由各种元素组成，一个元素通常包含开始标签，结束标签，内容 在开始标签中可以添加属性 <div class="content" id="one"> <span>hello world</span> </div> -
属性
- 核心属性：id、title、style、class
绝大多数元素都具备的属性 - 特有属性
某些元素中特有的属性
- 核心属性：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"）
锚 URL - 指向页面中的锚（href="#top"）
target:规定在何处打开链接文档。
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
注:1.如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。
2.被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
3.<a> 标签中必须提供 href 属性或 name 属性。
img 标签-----向网页中以链接的形式嵌入一幅图像,没有结束标签.
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
src="该图像的文件的的绝对路径或相对路径"
width:宽 可用 px %
height:高
注：属性是声明在开始标签的内部，一个属性由属性名和属性值组成，通过=进行分割，属性与属性之间通过空格来分割，属性名不区分大小写，属性值区分大小写，属性值可以使用单引号，双引号或者是不用引号
Java与html本质的区别
1.Java
编译型语言
.java -> .class -> jvm
隶属于sun/oracle公司的，有具体的公司及团队维护，所有的标准oracle说了算，jvm也是oracle开发的
语法升级 拉姆达
jvm升级（解释java代码）
效果升级
2.html
解释型语言
.html -> 浏览器
网页编程标准，w3c
h4 -> h5
语法升级
废弃掉 strong frameset ...
新增 header article section...
解释器
火狐，谷歌，欧朋...
容错性非常棒
效果升级
标签
块级别标签（从上往下，由外而内）
作用：搭建网页的结构
特点：独占一行空间；宽度默认占满父元素；高度默认由内容决定(一般不给父元素指定高度，给子元素指定高度，子元素会撑起父元素)；宽高可以自定义
- div 【容器】无意义的块元素（无招胜有招）
- h1~h6 标题
- p 段落
- ul>li 【容器】列表
- ol>li 【容器】列表
- dl>dd,dt 【容器】列表
补充：
H5中新增的块元素(语义标签)
显示效果上与div完全相同，没有任何额外的样式。但是比div多的是它具有一定的语义
header
nav
article
section
aside
footer
address
行级别标签
作用：填充网页
特点：默认宽高由内容决定；宽高无法指定；所有的行内元素可以共享一行空间;行内元素内部一般不允许嵌套子元素，只允许放文本
- span 无意义的行内元素
- a 超链接
href
target - img 图片
src
width
height
alt 当图片找不到的时候的文本替代 - strong b em i sub sup d …
补充：
H5新增了行内元素
video 链接视频
audio 链接音频
重构
1.为什么要重构html标签
html标签自带的某些样式不符合我们开发项目的需求时，可以通过修改其css样式，使其同div显示效果相同，进而进行进一步的美化，来符合我们业务需求。
彩蛋
-
在html中声明的charset表示什么意思？
告诉浏览器你应该使用charset指定的字符编码进行解码 -
在html中声明的viewport表示什么意思？
<meta name="viewport" content="width=device-width, initial-scale=1.0">在移动设备中调整字体显示,相对单位
电脑 1400 * 1240 14寸
手机 1400 * 1240 6寸
dpi
![项目架构]()
