什么是前端
只要是跟用户打交道的界面都称为前端
什么是后端?
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. 服务端接收请求(eg: baidu.com)
3. 服务端处理结果返回结果
4. 返回给浏览器,浏览器按照特定的规则渲染数据到页面中,展示给用户
浏览器是不是可以作为很多服务端的客户端?
eg: 京东,淘宝,百度
浏览器如何识别不同的服务端?
1. 一定是返回的数据格式遵循浏览器规则
规则
HTTP协议
超文本传输协议, 规定浏览器跟服务端数据交互的格式
# 四大特性
1. 基于请求响应
2. 在TCP/IP协议之上的应用层协议
3. 无状态
就是指不能保存用户信息
为了保存用户信息,又诞生了新技术来保存用户信息
eg: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 : 重定向 301, 302
4xx : 404 资源不存在,403 权限不够
5xx : 500 服务器内部错误
# 请求方式:
1. get
给服务端要数据的
2.post
给服务端提交数据的
HTML简介(建议你使用Chrome浏览器)
# 如果你想让浏览器渲染你的图片,链... 你就必须遵循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. 在pycharm中新建html文件
2.
打开HTML文件的两种方式
1. 直接找到html文件,双击打开即可
2. 在pycahrm中,右键浏览器图标(前提是你必须安装了对应的浏览器)
HTML的文档结构
<head>
<meta charset="UTF-8">
<title>我是dsb</title>
</head>
<body>
</body>
head标签内常用标签
head内的标签不是给用户看的,给浏览器看的
body内的标签,是给用户看的,你在body中写什么就显示什么
<meta charset="UTF-8">
<title>我是dsb</title>
<!-- <style>-->
<!-- /*写css样式*/-->
<!-- h1 {-->
<!-- color: red;-->
<!-- }-->
<!-- </style>-->
<!-- 引入外部css样式-->
<link rel="stylesheet" href="mycss.css">
<!-- <script>-->
<!-- // js代码-->
<!-- alert(111)-->
<!-- </script>-->
<script src="myjs.js"></script>
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">
HTML的标签分类
1. <title>我是dsb</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>
# div span
# 这两个元素是专门为定义CSS样式而生的。
标签的分类2
1. 块儿级元素
独自占一行的标签,我们成为块儿级元素
eg: p, h1~h6,div
2. 行内元素
自身文本有多大,就占多大
eg: i, u, s, b ,span
标签的嵌套
# 关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
# p标签不能包含块级标签,p标签也不能包含p标签
img标签
<img src="123.png" alt="">
1. src
1)外链地址
2)本地地址
2. alt
当图片加载失败的时候,写一些描述性信息
3.title
当鼠标悬浮显示的提示信息
# 注意:所有标签都有该属性
4. 设置图片大小
width:200
height:200
# 注意:两个值最好写一个,默认是等比例缩放或者放大
a标签
<a href="http://www.baidu.com" title="这是a标签" target="_blank">点我</a>
1. title
当鼠标悬浮显示的提示信息
2. target
_self : 默认当前标签页
_blank : 另开一个新的标签页