前端

什么是前端

只要是跟用户打交道的界面都称为前端

后端：
	Python、Java、Go、PHP、nodejs(因可以操控数据库，所以也被归为后端语言)
    其都是一堆后端代码

为什么学前端

学习全栈开发，前端只是一部分

全栈：python，前端，mysql，linux，docker

前端需要学的内容

1.HTML  # 网页的骨架，没有任何的样式
2.CSS  # 给网页添加样式
3.JavaScript  # 让网页动起来

前端的框架：bootstrap，jquery，Vue，react.js angular.js

软件的开发架构

c/s 客户端和服务器
b/s 浏览器和服务器

在浏览器中输入网址，发生的事

1.浏览器向服务端发起请求
2.服务端接收请求
3.服务端处理请求返回结果
4.服务端将处理后的结果返回给浏览器，浏览器按照特定的规则渲染数据到页面中，展示给用户

浏览器是不是可以作为很多服务端的客户端
	例如：京东，淘宝，百度
    
浏览器如何识别不同的服务端
1.一定是返回的数据格式遵循浏览器规则

HTTP协议

超文本传输协议，规定浏览器跟服务端数据交互的格式

特性：
1.基于请求响应
2.在TCP/IP协议之上的用户层协议
3.无状态(指不能保存用户信息)
# 为了保存用户信息，又诞生了新技术来保存用户信息
# 例如：cookie session token
4.短链接(发送、接收一次信息之后就断开链接，需要发送数据的时候再次建立链接)
# 长链接：与短链接相对，不会发送、接收一次信息之后就断开链接，会长时间保持链接，一定时间后断开
# 长链接使用场景：即时通讯



请求数据格式：
1.请求首行(请求方式，协议版本)
2.请求头(一对k:v键值对)
3.\r\n
4.请求体()
# 注意：get请求没有请求体
# 只有post请求才有请求体

响应数据格式：
1.响应首行(协议版本)
2.请求头(一对k:v键值对)
3.\r\n
4.响应体()

响应状态码：
就是用一个数字代表具体的含义
1xx：请求成功，但是还可以继续提交数据
2xx：200请求成功
3xx：重定向(例如点击购物车时进行登录判断，未登录则转向登录界面)
4xx：404资源不存在
5xx：500服务器内部错误

请求方式：
1.get
	给服务端要数据的
2.post
	给服务端提交数据的

HTML简介

# 如果想让浏览器渲染你的图片，链接等等，就必须遵循HTML语法

<h1>hello big baby~</h1>
<a href='http://www.baidu.com'>click me</a>
<img src='https://img1.baidu.com/it/u=1538728258,361656027&fm=26&fmt=auto&gp=0.jpg' />

HTML代码的书写位置

1.在python中新建一个HTML文件
2.在txt文件内写好后改格式为html

打开HTML文件的两种方式

1.直接找到html文件，双击打开即可
2.在pycharm中，右键浏览器图标(前提是你必须安装了对应的浏览器)

HTML的文档结构

<head>
    <meta charset="UTF-8">
    <title>我是帅哥</title>
</head>
<body>

</body>
</html>

head标签内常用标签

head内的标签不是给用户看的，给浏览器看的
body内的标签是给用户看的，在body中写什么就显示什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是帅哥</title>
    <style>
        h1{
            color: red;
        }
    </style>
    <link rel="stylesheet" href="mycss.css">  # 引入外部css样式
    <script src="myjs.js">  # 引入外部js样式
    # 写js代码
    </script>
</head>
<body>
<h1>你很丑</h1>
</body>
</html>

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">

HTML的标签分类

1.<title>我是帅哥</title>
2.<h1>hello big baby~</h1>
3.<a href='http://www.baidu.com'>click me</a>
4.<img src='https://img1.baidu.com/it/u=1538728258,361656027&fm=26&fmt=auto&gp=0.jpg' />

1：双标签
2：单标签

HTML注释

<!--这是单行注释  快捷键： ctrl + ? -->

<!--
这是单行注释  快捷键： ctrl + ?
这是单行注释  快捷键： ctrl + ?
这是单行注释  快捷键： ctrl + ?
这是单行注释  快捷键： ctrl + ?
这是单行注释  快捷键： ctrl + ?
这是单行注释  快捷键： ctrl + ?
 -->
    
<!--这是顶部代码开始-->

<!--这是顶部代码结束-->

<!--这是侧边栏代码-->

<!--这是侧边栏代码-->

body内常用标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<br>
# 换行

<hr>
# 水平线

特殊字符

内容	对应代码
空格	 
>	>
<	<
&	&
¥	¥
版权	©
注册	®

标签的分类

1.块级元素
独自占一行的标签，称之为块级元素
例如：p标签，h1~h6，div标签

2.行内元素
自身文本有多大，就占多大
例子：i，u，s，b，span

# div span
# 这两个元素是专门为定义CSS样式而生的，如果单独在网页中插入，不会产生影响

标签嵌套

块级元素可以包含行内元素和部分块级元素
行内元素可以包含其他行内元素
注意：p标签不能包含块级标签和p标签

img标签

<img src="" alt="" title="" width="" height="">
'''
src：属性名
引号内：属性值
	1.src
		外链地址
			直接填写地址
		本地地址
			如果在同一个路径，直接写文件名
			如果文件在同一个路径下的一个文件夹内，例如abc，则写abc/文件
			如果文件在父路径下的一个文件夹内，例如abc，则写../abc/文件，有几个父路径写几个../
	2.alt
		当图片加载失败时写的一些描述性信息
	3.title
		悬浮提示
	4.width/height
		只写width="200"  将图片等比例缩放到200个像素大小
		width="200",height="200"  不等比例缩放到200:200大小
'''

a标签

<a href="写跳转的网址" title="" target="">点我</a>

1.href
	写跳转的网址
2.title
	悬浮提示
3.target
	_blank  另起页面跳转网址
    _self  本页面跳转网址