前端
什么是前端
"""
只要是跟用户打交道的界面都称为前端
什么是后端?
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 . 请求体
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浏览器)
< 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>
标签的分类2
1 . 块儿级元素
独自占一行的标签,我们成为块儿级元素
eg: p, h1~ h6, div
2 . 行内元素
自身文本有多大,就占多大
eg: i, u, s, b , span
标签的嵌套
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 : 另开一个新的标签页