前端--
一、相关概念
1、前后端--技术层面
程序运行在客户端上，这样的程序称为前端
程序运行在服务器端
2、前后台--应用层面
如果服务是面向所有用户，这样的服务称为前台服务
如果服务是面向相关的管理或者维护人员，这样的服务称为后台服务
二、web(网页)访问流程
基于http/https向服务器端发送请求（get 获取，post 提交）
服务器接收请求进行处理（请求重定向，加载数据库，数据整合）并响应给客户端、
客户端（浏览器）利用解析器对html文档进行解析并渲染
三、HTML
HTML(hyper text markup language) 超文本标记语言
html代码都应该写在html文档中（文件后缀名.html）---一个html文档也称为一张网页（web页面）
html版本：
4.0
5.0 通用版本H5 <! DOCTYPE html>
四、html文档的基本结构
<! DOCTYPE html> <!--文档声明：DOCTYPE (document type) 声明当前文档为html5 -->
<html> <!--文档根节点-->
<head>
<mate charset="UTF-8"/><!--告知浏览器使用utf-8编码解析当前文档内容-->
<title>网页标题</title>
</head>
<body>
hello word
</body>
</html> html文档是由html标签，css，js构成
html标签（标记）：
单标记（自结束标签）：<标签名 属性="值"......>
双标记：成双成对
<标签名 属性="值"......>内容</标签名>
五、html中的常用标签
0、html文档中的注释符
<!-- 注释内容-->
1、文章标题
标签：
<h1></h1> //一级标题
.......
<h6></h6> 注意：文章标题只支持1-6级标题
属性：
align：设置标题水平位置
-left 左（默认）
-center 中
-right 右
2、横线
标签：
<hr width="" size="" color="" align=""/> 属性：
width：横线长度 单位可以使用像素（px）
size：横线粗细
color: 颜色（英文单词【red】，rgb(0-255,0-255,0-255) ,十六进制 #333）
3、文字
标签
<font color="" size=""> 文章标题 </font> 属性：
color 颜色
size 字体大小（1小-7大）
4、内容居中
标签：
<center></center>5、段落
标签：
<p></p>注意：被段落标签包裹的内容，具有默认上下边距（空行）
6、实体标签
标签：
&标签名称;
案例：
 ； 英文状态下半个字符
&emsp； 当前字体大小的个字符
>； >大于符号
<； >小于符号
©；版权
7、图片
标签：
<img src="" width="" heigth="" title="" />属性：
src：图片的引用地址
绝对路径
相对路径
width:宽度
heigth：高度
title：图片的文字描述 （用户体验）
注意：如果图片的宽高没有按照原图的比例进行设置，可能会出现拉伸效果。因此宽高只需要设置一个就行了，另一个会自动缩进
8、换行
标签：
<br/>9、控制字体大小写的标签
大字体：
<big></big>
小字体：
<small></small>10、文本加粗
标签：
<strong></strong>
<b></b>对比： strong具有突出强调的语义，通常在网页中可以修饰关键词。
b仅仅是网页显示加粗。
11、字体倾斜
标签：
<i></i>12、文字上浮和下坠
上浮：
<sup></sup>
下坠：
<sub></sub>13、删除线和下划线
删除线：
<delete></delete>---完整格式
<del></del>----简写
下划线：
<u></u>14、布局相关标签
层（盒子模型）：<div></div>
节：<span></span>15、超链接
标签：
<a href="链接地址" target="_blank">跳转文本</a>属性：
href：设置超链接地址
target：新开窗口的位置
—blank：在新窗口打开
—self：在当前窗口打开（默认值）
框架名称
关于a标签的其他用法：锚点链接（在当前页实现不同位置的跳转）
在页面打锚点可以使用id属性设置
在任何一个标签添加一个id属性，和标识符一样的书写规则
<a href="#id的值">跳转文本</a>16、内联框架
框架集：
<frameset>标签：
<iframe src="" width="" heigth="" name="自己设置"></iframe>属性：
src：默认打开的网页
width：宽
heigth：高
name：框架名称
案例：超链接结合内联框架完成网页集成
<a href="链接地址" target="myframe">学校要文</a>
<iframe src="https://www.baidu.com" width="100%" heigth="480px" name="myframe"></iframe>17、多媒体
1-音频
标签：
<audio src="地址" controls><!--controls是控制播放的控制器-->
</audio>属性：
src：引用的媒体文件
controls：控制面板，如果不设置则不显示
推荐写法：
保证不同的浏览器可以根据不同浏览器播放资源文件
<!--音频播放器-->
<audio controls><!--controls是控制播放的控制器-->
<source src="地址" type="audio/mp3">
当前网页不支持
</audio>
<hr/>
<!--视频播放器-->
<video controls>
<source src="地址" type="video/mp4">
当前网页不支持
</video>
2-视频
标签：
<video controls width="500px">
<source src="地址" type="video/mp4">
当前网页不支持
</video>六、标签分类
1、写法
单标记
<mate charset="utf-8" />
双标记
2、展示
行内元素：内容有多少就占用多少空间，并且显示到一行
eg：a,span,i,strong,b,font,sup,sub,del,u
块元素:独占一行
eg：h1-h6,p,hr,div