什么是前端

# 只要是跟用户打交道的界面都可以称之为前端
eg：PC，手机端，平板

什么是后端？
# 不直接与用户界面打交道的

eg:
    python, java, go, node.js, php...
    
前端工程师，后端工程师，python工程师，java工程师

前端学习的内容

1. HTML：网页的骨架
2. css：是美化网页的
3. javascript：使网页动起来，有动态的效果
# 前端三剑客

前端框架：
    bootstrap, jQuery，vue, react, angular

软件开发架构

1. c/s: 客户端/服务端
2. b/s: 浏览器/服务端
    
'''学习前端的环境：只需要一个浏览器即可，前端的代码浏览器执行'''

学习前端代码的书写环境：
    1. 文本
    2. pycharm
    3. vscode

在浏览器网址栏中输入网址，发生了什么事？

'''
    1. 浏览器发起请求
    2. 服务端接收请求
    3. 服务端处理请求
    4. 服务端返回结果给浏览器
'''

# 浏览器也可以作为服务端的客户端
# 我们写一个浏览器/服务端程序，让浏览器作为我们的客户端

浏览器是可以充当很多服务端的客户端，
    1. 腾讯视频
    2. 百度的
    3. 淘宝的
    4. 京东的
    
问题：
    浏览器如何识别是哪个服务端？
    
# 所有的服务端都必须遵守一个规则
这个规则是什么呢？

HTTP协议

1. tcp/udp协议  => 传输层
2. IP协议       => 网络层
3. HTTP协议      => 应用层

# 1. HTTP协议的四大特性：
    '''
        1. 基于请求响应
        2. 在tcp/udp协议之上的应用层协议
        3. 无状态
            不能保存数据（不能保存用户信息）
            怎么解决不能保存用户信息呢？
                cookie, session, token...
        4. 短链接/无连接
    '''
 
# 2. 请求数据
    1. 请求首行（请求方式）
    2. 请求头
    3. \r\n
    4. 请求体
# 3. 响应数据
    1. 响应首行
    2. 响应头
    3. \r\n
    4. 响应体
    
    
# 4. 请求方式
    1. get
        当客户端向服务端索要数据的时候，就使用get请求
        参数
         # https://www.baidu.com/s?wd=%E5%9B%BE%E8%A7%A3HTTP&rsv_spt=1
         ?k=v&k1=v1&k2=v2
         '''get请求是没有请求体的'''
         '''get请求不安全'''
        '''get请求携带的参数大小有限制：4KB'''
    2. post
        当客户端向服务端提交数据的时候使用post
        参数
        '''post是有请求体的'''
        '''post请求安全'''
        '''post请求携带的参数大小没有限制'''
        
 # 面试题：get和post区别？

响应状态码：
    1xx: 请求提交成功，你还可以继续提交
    2xx:  200, 请求成功
    3xx:   301, 302都是重定向
    4xx： 404：资源不存在， 403：没有权限
    5xx： 500：服务器内部错误

HTML简介:只要你想在网页中显示一些内容，就必须使用html标签

<h1>hello baby!</h1>
<img src='https://img0.baidu.com/it/u=2797085065,1109102906&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'>
<a href='http://www.baidu.com'>点我啊</a>

html代码的书写位置

# 我们现在学习前端，只需要一个浏览器，推荐使用Chrome浏览器

'''在前端中，最大的问题就是浏览器兼容性问题，同样的代码在不同的浏览器执行的结果是不一样的'''

1. 直接新建一个txt文件，只需要把后缀名改为.html即可
2. 我们可以在pycharm中新建html文件

如何打开html文件

1. 直接双击文件名
2. 在pycharm中打开，右键运行，在右上角点击浏览器图标

html的文档结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>哈哈哈哈</h1>
</body>
</html>

# head标签一般写的不是让用户看的
# body标签一般写想让用户看的到的东西

head中常用的标签

<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>
    <style>
/*<!--        写的是css代码-->*/
        h1 {
            color: red;
        }
    </style>
    <link rel="stylesheet" href="mycss.css">
    <script>
        
    </script>

    <script src="myjs.js"></script>
</head>

body内常用标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>
    采菊东篱下，悠然见
</p>
<p>
    采菊东篱下，悠然见南山
</p>
<br>
<hr>

'''
    div span
    
    div就是用来占布局的
    span:占文本布局的
'''

标签的分类

1. 单双标签
    '''
        单标签
        双标签
    '''
2. 按照性质分类
    '''
        块儿级标签：
            内容独自占一行
            div, p, h1~h6都是
        行内标签：
            内容不是独自占一行，自身文本有多大就站多大
            i, u, s, b， span
    '''

标签的嵌套

我们在前端中使用亲戚关系表示嵌套关系
  '''
      <div> div是p和span的父亲
        <p> p是span的父亲
            <span>span是p的儿子，是div 的孙子，后代</span>
        <p>
        <span></span>
    </div>
    <span>是div的弟弟</span>
    <div></div>
  '''
    
 # 标签的嵌套：
    块儿级元素可以嵌套所有的行内元素，行内元素不可以嵌套块儿元素
    p标签不能嵌套块儿级元素

    '''前端不会轻易报错'''

img标签

<img src="../../img/aaa/123.png" title="好美哦" width="200px"  alt="">

src:
    1. 外链地址
    2. 本地地址
title:
    当鼠标悬浮时候显示的文字信息, title属性是所有标签都有的属性
width：
    设置图片的大小，一般只设置一个款或者一个高，默认是等比例缩放
    
alt：
    当图片加载失败的时候，显示的提示信息

a标签

# 超链接
<a href="http://www.baidu.com" title="这是标题" target="_blank">点我</a>

href:
    跳转的地址
 target：
    _self 默认，从当前标签跳转
    _blank
    新开一个标签跳转