前端python开发_【2020Python修炼记】前端开发之 前端工具和HTML
【目录】
1、什么是前端
2、前端学习历程
3、HTTP协议
1、HTML简介
2、HTML文档结构
3、HTML标签分类(一)
4、HTML标签分类(二)
5、特殊符号
6、其他常用标签
一、前端开发工具简介
参考阅读:
还推荐微软的 VScode,也是一款强大且免费的软件,亦支持前端开发。
二、前端基础
1、什么是前端——所见即所得
任何与用户直接打交道的操作界面都可以称之为前端
比如:电脑界面 手机界面 平板界面
什么是后端
后端类似于幕后操作者(一堆让人头皮发麻的代码)
不直接跟用户打交道
2、前端学习历程
HTML:网页的骨架 没有任何的样式
CSS:给骨架添加各种样式 变得好看
Java Script:控制网页的动态效果
前端框架:BOOTSTRAP、JQuery、Vue
提前给你封装好了很多操作 你只需要按照固定的语法调用即可
3、HTTP协议
# 浏览器窗口输入网址回车发生了几件事:
"""
1 浏览器朝服务端发送请求
2 服务端接受请求(eg:请求百度首页)
3 服务端返回相应的响应(eg:返回一个百度首页)
4 浏览器接收响应 根据特定的规则渲染页面展示给用户看
"""
# 浏览器可以充当很多服务端的客户端
百度 腾讯视频 优酷视频....
# 如何做到浏览器能够跟多个不同的客户端之间进行数据交互?
1.浏览器很牛逼 能够自动识别不同服务端做不同处理
2.制定一个统一的标准 如果你想要让你写的服务端能够跟客户端之间做正常的数据交互
那么你就必须要遵循一些规则——因此诞生了 HTTP协议
"""
HTTP协议,即 超文本传输协议 用来规定 服务端和浏览器之间的数据交互的格式...
该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩
你就自己写客户端 用户想要使用 就下载你专门的app即可
"""
# 四大特性
1.基于请求响应
2.基于TCP/IP作用于应用层之上的协议
3.无状态——不保存用户的信息
eg:一个人来了一千次 你都记不住 每次都当他如初见
由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
cookie、session、token...
4.无/短链接
请求来一次我响应一次 之后我们两个就没有任何链接和关系了
长链接:双方建立连接之后默认不断开 websocket(后面讲项目的时候会讲)
# 请求数据格式 (请求头 和 请求体 之间,是有一行空行的)
请求首行(标识HTTP协议版本,当前请求方式)
请求头(一大堆k,v键值对)
请求体(并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据)
# 响应数据格式(响应头 和 响应体 之间,是有一行空行的)
响应首行(标识HTTP协议版本,响应状态码)
响应头(一大堆k,v键值对)
响应体(返回给浏览器展示给用户看的数据)
# 响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息 :
1XX:服务端已经成功接收到了你的数据正在处理,你可以继续提交额外的数据
2XX:服务端成功响应了你想要的数据(200 OK请求成功)
3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)
4XX:请求错误
404:请求资源不存在
403:当前请求不合法或者不符合访问资源的条件
5XX:服务器内部错误(500)
# 请求方式
1.get请求
朝服务端要数据
eg:输入网址获取对应的内容
2.post请求
朝服务端提交数据
eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验
# url:统一资源定位符(大白话 网址)
三、HTML
1、HTML简介
超文本标记语言——HTML
如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法
我们浏览器看到的页面,内部其实都是HTML代码(所有的网站内部都是HTML代码)
HTML就是书写网页的一套标准
# 注释:注释是代码之母
由于HTML代码非常的杂乱无章并且很多,所以我们习惯性的用注释来划定区域方便后续的查找:
导航条所有的html代码
左侧菜单栏的HTMl代码
2、HTML文档结构
PS:文件的后缀名其实是给用户看到的,只不过对应不同的 文件后缀名有不同的软件来处理并添加很多功能
注意:
HTML代码是没有格式的,可以全部写在一行都没有问题,只不过我们习惯了缩进来表示代码
在书写HTML代码的时候 你只需要写标签名 然后tab就能自动补全
两种打开HTML文件的方式
找到文件所在的位置右键选择浏览器打开
在pycharm内部,集成了自动调用浏览器的功能,直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器
3、HTML标签分类(一)——单标签 和 双标签
(1)分类
1 双标签
2 单标签(自闭和标签)
(2)head内常用标签
Title网页标题内部用来书写css代码内部用来书写js代码还可以引入外部js文件引入外部css文件
云计算培训,Linux运维培训,Python自动化运维,Python全栈开发,IT培训">当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
网页的描述性信息
(3)body内常用标签
我是h1
标题标签 1~6级标题加粗
斜体
下划线
删除线
段落
换行
水平分割线
4、HTML标签分类(二)——块级标签 & 行内标签
# 1 块儿级标签:独占一行
h1~h6p div
1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签(HTML书写规范)
# 2 行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块儿级标签 可以嵌套行内标签
5、特殊符号
空格>大于号<小于号&&¥¥ 人民币符号©© 版权® ® 商标
6、其他常用标签
(1)分块标签
div 块儿级标签
span 行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签
(2)img 标签
# 图片标签
#【属性】
src
1.图片的路径可以是本地的也可以是网上的
2.url自动朝该url发送get请求获取数据
alt="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息
title="新垣结衣"
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
(3)a 标签
# 链接标签
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色(浏览器给你记忆了)
"""
#【属性】
href
1.放url,用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转_blank
# a标签的锚点功能
"""eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
顶部
hello world
中间
底部
回到中间
回到中间
【补充】
标签默认具有的两个重要书写
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的书写也可以有自定义的书写
(4)列表标签
无序列表(使用较多) —— 快捷语法 ul>li*4
- 第一项
- 第二项
- 第二项
- 第二项
虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
有序列表(了解) —— 快捷语法 ol>li*3
111222333
标题列表(了解)
- 标题1
- 内容1
- 标题2
- 内容2
- 标题3
- 内容3
前端python开发_【2020Python修炼记】前端开发之 前端工具和HTML相关推荐
- 使用双标记写html代码时如何进行嵌套,【2020Python修炼记】前端开发之 前端基础和HTML入门...
发表于:2020-11-12 18:21 阅读: 119次 这篇教程主要讲解了[2020Python修炼记]前端开发之 前端基础和HTML入门,并附有相关的代码样列,我觉得非常有帮助,现在分享出来大家 ...
- vue前端服务器端口_解密智联招聘的大前端架构 Ada
作者 | 智联大前端 Ada 是智联招聘自主研发的演进式大前端架构.于 2017 年正式投入使用后,又经过三年持续演进,全面覆盖了从研发到运维的各个方面,具备跨技术栈工程化体系.交互式图形界面开发工具 ...
- 微信小程序python入门教程-2020Python+微信小程序开发实战(视频+课件)
本套课程出自老男孩IT教程的Python+微信小程序开发实战官网售价79元,课程基于微信小程序平台开发的的拍卖系统.课程分为4个章节微信小程序快速入门用微信小程序快速开发认证和发布动态模块,第二章拍卖 ...
- 小程序云开发_借助小程序云开发制作校园导览小程序丨实战
导语 偌大校园,寻路犯难.没关系!本文教你借助云开发制作精美校园导览小程序,带你走遍校园的每个角落,发现不一样的风景. 背景 刚入学的新生要想不迷失在偌大的校园,除了依靠不怎么可靠的路边标识外,总会收 ...
- qq营销软件开发_标签管理:为开发人员-营销商关系带来和平
qq营销软件开发 This article was sponsored by Tealium. Thank you for supporting the sponsors who make SiteP ...
- python控制结构(一)if分支入门_【2020Python修炼记12】Python语法入门—流程控制(if分支结构+while/for循环结构)...
一.条件 灵魂三问: 什么是条件?什么可以当做条件?为何要用条件? 1. 条件,就是判断依据,判断前提-- 2.条件的类型 # 第一大类:显式布尔值 条件可以是:比较运算符 # age = 18 # ...
- python 进程池 等待数量_【2020Python修炼记】python并发编程(六)补充—进程池和线程池...
1. 2. 为啥要有 进程池和线程池 进程池来控制进程数目,比如httpd的进程模式,规定最小进程数和最大进程数 3.创建进程池的类pool 如果指定numprocess为3,则进程池会从无到有创建三 ...
- python框架django书籍_【2020Python修炼记】web框架之 Django的ORM语法
[目录] 一.单表查询(增删改查) 二.常见的十几种查询方法 三.神奇的双下划线查询 四.外键字段的增删改查 五.跨表查询(重点) (一)子查询 (二)联表查询 六.聚合查询 七.分组查询 八.F与Q ...
- 石家庄python开发_石家庄PythonWeb全栈开发工程师修炼
[课程介绍] 课程以python语言为主导,进行web服务相关的全栈开发,包含后端服务器开发,部署,监控:web前端开发,前后端不分离模板模式开发,前后端分离,单独前端部署方案.课程涉及到的知识点有: ...
最新文章
- [转] 理解RESTful架构
- 对《构建之法》的一点认识
- 程序员面试100题之十五:数组分割
- oracle数据库函数手册,oracle函数大全连载(四)T
- wordpress程序安装php多少,2020最新WordPress网站程序详细安装教程
- input 赋值_FPGA基础设计:Verilog行为级建模(过程赋值)
- 前端学习(1208):vue常用特性
- linux 抓包工具_03-Python爬虫工程师-抓包工具
- Nii切片->2D ndarray灰色图->PIL灰色图->PIL RGB彩色图
- linux鼠标手势软件,在Deepin Linux系统使用Easystroke鼠标手势会更方便工作
- 亚马逊领导力准则14条
- 关于Docker时的权限问题解决dial unix /var/run/docker.sock: connect: `permission denied`
- 深度学习研究生常用网站||图像处理||医学影像||使用评价||汇总
- 威纶通触摸屏232脚位_威纶通触摸屏使用手册
- 【MATLAB】调整坐标轴及视野
- 【Reproduced】C language program of MODBUS RTU MASTER
- SyntaxError: Missing parentheses in call to 'print' 问题原因
- VMware 虚拟器安装kali镜像
- Spring配置SessionFactory
- MT4 CRM 系统开发(一)
热门文章
- opencv学习【绘图】多边形polylinesfillPoly
- 综述论文要写英文摘要吗_关于小论文的一些撰写建议!
- 面试干货!21个必知数据科学面试题和答案
- 获取windows系统ip、计算机名、当前用户名
- html如何实现日期下拉菜单,实现一个日期下拉菜单
- webview里面的页面不能往下下拉(下拉卡死)解决
- 海尔云悦2db微型计算机,客厅小伙伴 海尔云悦mini2迷你主机评测
- protobuf详细介绍和使用
- vhall微吼中的视频无法通过左右方向键来快进和快退的解决方法
- 2021年起重机司机(限桥式起重机)考试题及起重机司机(限桥式起重机)考试报名