1、前端和后端
-----技术层面 前端：
运行在客户端的技术
后端：
2、前台和后台
-----用户层面
前台：
通常面向于普通客户（淘宝购物）
后台：
针对于项目管理人员（淘宝产品上架、下架）
二、网络应用的流程
通过客户端向服务器发送http/https协议的请求
服务器接收请求后将资源整理响应给客户端
客户端对服务器响应的数据进行解析执行
三、HTML文档（web页面）
html: hyper text mark up language(超文本标记语言) 文档（文件）： 以.html结尾，并且由标记组成。
四、HTML文档的基本结构
<!DOCTYPE html><!--声明当前文档为html5-->
<html>
<head>
<meta charset="utf-8"/><!--设置浏览器解析编码-->
<title>百度一下，你就知道</title><!--html文档标题-->
</head>
<body>
hello world!!!
</body>
</html>
说明：
1、标记分为双标记和单标记
2、每个标记都可以设置一个或多个属性,
多个属性使用空格分隔： key="value"。
3、<!--html中的注释符-->
4、单标记可以不加/结束，为了规范，最好添加
5、单标记可以称为自结束标记（标签）
五、HTML的常用标记（标签）
1、文章标题
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
说明：
1、h1-h6: 字体从大到小
2、标题文字有加粗效果
属性
align：控制标题水平位置
- left: 左边（默认值）
- center: 居中显示
- right: 右边
案例：
<h1 align="center">文章标题</h1>
2、横线
<hr/>
说明：
1、横线默认居中，并且占满整个一行
属性:
width: 横线的长度（单位： 像素px）
align: left、center（默认值）、right
size：线条粗细
color：线条颜色（色值可以使用颜色的英文单词，例如： red红色,blue蓝色...）
案例：
#600像素宽，居右，1像素粗，红色线条
<hr width="600px" align="right" size="1" color="red"/>
3、文字标签
<font></font>
属性：
color: 设置文字颜色
size：文字大小（1小-7大）
案例：
#字体尺寸为1，颜色为红色
<font color="red" size="1">hello world!!!</font>
4、内容居中
<center>内容</center>
案例：
#文字居中
<center>
<font color="red" size="1">hello world!!!</font>
</center>
5、段落
<p></p>
说明：
1、段落和段落之间有一个空行
6、实体标签
//空格
> //大于 >
< //小于 <
...
说明：
由于键盘的空格键和tab键在浏览器解析无效，因此需要通过一
些特殊的转换字符表示。
7、图片
<img src="" />
属性：
- src： 图片的引用地址
绝对路径： 从盘符往下查找（E:\test\logo.png）
相对路径: 相对于当前的html文档所在位置
（./imgs/a.jpg, ../ 上一层）
- width: 图片宽度
- height: 高度
- title: 图片的文字描述
注意：
通常图片的宽度和高度不需要同时设置，只设置其中一个，
另一个会等比缩放。而两个值同时设置，可能会导致图片拉伸。
案例：
#在当前文档中引入当前目录下imgs中的h1图片，宽度为260px
<img src="./imgs/h1.png" width="260px" title="会议"/>
8、文字大小
<big>大</big>
<small>小</small>
9、文字风格
<br/> 换行
<i>文字倾斜</i>
<u>下划线</u>
<del>删除线</del>
10、文字加粗
<b>加粗</b>
<strong>加粗并强调</strong>
11、文字上浮和下坠
<sup>上浮</sup>
<sub>下坠</sub>
12、布局标签
<div>层标签</div>： 垂直
<span>节标签</span>：水平
13、a标签超链接
<a href=""></a>
属性：
href: 要跳转的地址（远程地址，本地地址）
- 如果值为空，表示跳转当前页面
target: 网页显示位置
- _blank: 新窗口打开
- _self: 当前窗口打开（默认值）
- 框架名
a标签结合id属性实现锚点连接：
功能：在同一个页面实现不同位置的跳转
1、在需要定位的标签上添加id属性
<h1 id="top">顶部</h1>
2、在a标签href属性中设置id名称并且前缀为#
<a href="#top">回到顶部</a>
14、内联框架
<iframe src="" width="" height="" name=""></iframe>
说明：
iframe类似于没有头部的浏览器窗体，它可以内嵌到其他网页的body中。
属性：
src: 默认打开的页面（地址）
width： 窗体的宽度，可以使用具体像素值，也可以使用百分比
height：窗体高度，只能使用具体像素
name：内联框架名称，可以与a标签的target属性配合使用，实现网页的整合。
案例：
<a href="http://www.jd.com/" target="myframe">京东</a>
<a href="http://www.taobao.com/" target="myframe">淘宝</a>
<iframe src="" name="myframe"></iframe>
15、多媒体
1、音频
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
2、视频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
属性：
controls： 是否显示控制面板
案例：视频播放
<video width="680px" height="320px" controls>
<source src="./imgs/tt.mp4" type="video/mp4"/>
</video>
六、常用标记分类
1、通过写法分类
有开始标记和结束标记的： 双标记 <h1></h1>
自结束：单标记 <br/>
2、通过表现形式分类
内容多大就占多大空间：行内元素
- span,i,u,del,font,b,strong,sub,sup
独占一行： 块元素
- h1-h6,p,div
