(前端学习part1)

一、前端

1.什么是前端

任何与用户直接打交道的操作界面，都可以称之为前端

举例：电脑屏幕显示的界面、手机显示的界面、平板界面。。。

2.什么是后端

可以通俗的理解为幕后工作者。

你在前端界面输入了一些信息，发送给了后端，在后端程序中进行了一些列的操作，然后给前端返回一些结果。后端主要用来进行业务逻辑的处理，和对数据进行操作。

3.为什么要学前端

技多不压身
全栈工程师必会

二、web服务的本质

1.请求&响应

浏览器输入网址，按回车发生了那些事？

浏览器朝着指定的服务器地址发送请求
服务端接收请求并处理
服务端向浏览器返回响应的请求
浏览器接收到服务发来的数据，并渲染出好看的页面，给用户看

2.请求方式

get请求
- 朝服务器要资源
post请求
- 超服务器提交数据

三、HTTP协议

1.四大特性

基于TCP/IP作用于应用层之上的协议
基于请求响应（请求对应响应）
无状态（不保存客户状态）（可以用cookies：session来保存状态）
无连接（不像TCP协议，连接通道之后一直连接着，http发完本次请求响应的数据就断开连接）

2.数据格式

请求格式：
1. 请求首行（请求方式、版本协议等）
2. 请求头（一大堆k：v键值对）
3. (换行)
4. 请求体（敏感信息、密码、身份证号等）
响应格式：（和请求格式一模一样）
1. 请求首行（请求方式、版本协议等）
2. 请求头（一大堆k：v键值对）
3. (换行)
4. 请求体（敏感信息、密码、身份证号等）

3.状态响应码

用数字来表示一串文字需要表达的意思，用户看到这串数字，就能明白出了事什么问题。之所以用数字表示，是因为数字占用空间小，早期硬盘内存小，发送的数据越小越好。后来大家用习惯了，就都约定俗成了。

1XX：服务端已经成功接收到了你的请求，正在处理，你可以继续提交其他数据。一般看不到这个数字，因为闪过太快，你来不及看清，服务器数据就发过来了。

2XX：服务端成功响应了响应的数据（200）

3XX：重定向

4XX：请求出错（404：找不到请求的网页）（403：用户不符合条件，服务器拒绝请求）

5XX：服务器内部错误（500）

四、HTML：超文本标记语言

1.注释

注释是代码之母！

在搭建页面时，通常会利用注释来划分区域。

1.1 单行注释

<!--注释内容-->

2.2 多行注释

其实直接在单行注释里面换行就可以了

<!--
注释内容
注释内容
注释内容
-->

2.文档结构

<html>
    <head></head>  head头不是给人看的，是给浏览器看的
    <body></body>  body内的代码才是给人看的
</html>

3.标签

3.1 HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
HTML 标签大部分是成对出现的，比如 <b> </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

3.2 标签通常应该有的两个属性

id：就类似于是身份证号，每一个标签，都应该有id值，并且在同一个html文档中，标签的id不能重复
class：类属性，有点类似于面向对象的继承，class = 'c1 c2 c3'，你这个标签就会拥有c1 c2 c3的所有样式

4. 标签的分类

4.1 双标签和自闭合标签

双标签即为有头有尾的标签，如

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

自闭合标签即为只有一个箭头括号的标签，如

<img src="图片链接，可以是本地地址，也可以是网络地址"/>

4.2 块级标签和行内标签

块级标签指在浏览器显示中独占一行的标签，是块级元素

特点：
    1. 块级标签内可以嵌套其他块级标签和行内标签
    2. p标签虽然是块级标签，但是他的内部不能嵌套任何块级标签，只能嵌套行内标签。
举例：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是p标签的效果<s>这是s标签效果</s></p>
<br>
<hr>
<div>这里是div</div>

行内标签，是内联元素

特点：
    1. 内部文本多大，标签的位置就占多大
    2. 行内不能嵌套行内和块级标签
举例：
<s>这是s标签效果</s>
<i>这是i标签的效果</i>
<u>这是u标签的效果</u>
<b>这是b标签的效果</b>

5.常用标签

5.1 head内常用标签

title：定义网页标题
style：内部支持写css代码
link：引入外部css样式文件
script：内部可以直接写js代码也可以引入外部js文件
meta：定义网页源信息

<meta charset="UTF-8">
<title>我的第一个HTML文件</title>
<style>样式代码</style>
<link rel="stylesheet" href="scc文件名">
<script src="js文件名"></script>

5.2 body内常用标签

h1~h6：标题标签
p：段落标签一个p就是一行内容
u：下划线
i：斜体
s：删除线
b：加粗
br：换行
hr：一条分割线

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是p段落标签标签的效果<s>这是s标签效果</s></p>
<u>这是u标签的效果下划线</u>
<i>这是i标签的效果斜体</i>
<s>这是s标签效果删除线</s>
<b>这是b标签的效果加粗</b>
<br>
<hr>

5.3 body内的重要标签

div：一块区域，可用于组合其他HTML元素的容器
span：文本的容器，内联元素
a：连接标签
- 跳转功能：href参数控制跳转的地址
  - 默认在当前窗口跳转target = "_self"，想在新窗口跳转可设置target = "_blank"
```
<a href="https://www.sogo.com" id="1">这里是id=1的标签的位置</a>
```
- 锚点功能：给a标签设置id值，然后在href中设置 ‘#+id’ 点击即可跳转到对应的位置。
```
<a href="#1">这里可以连接到标签id为1的标签的位置</a>
```
img：图片标签
- src属性
  1. 图片地址，网上的地址也可以是你的本地图片地址
  2. url(网址)，自动朝该网址发送get请求获取图片资源
- alt属性
  
  当图片加载不出来的时候展示的提示信息
- title属性
  
  鼠标悬浮上去之后展示的提示信息
- width和height
  
  这两个参数你只需要设置一个，就可以默认是等比例缩放，两个都设置的话，图片就会失真

6.特殊符号

1. &nbsp;   空格
2. &amp;    &
3. &yen;    ￥
4. &gt;     >
5. &lt;     <
6. &copy;   ©
7. &reg;    ®

7.列表标签

7.1无序列表

ul+li

type参数：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

<ul>
    <li>
        what1?
    </li>
    <li>
        what2?
    </li>
</ul>

7.2 有序列表

ol+li