1. HTML
前端之HTML
前端介绍
"""
任何与用户直接打交道的操作界面都可以称之为前端
比如:电脑界面 手机界面 平板界面
前端路线：
HTML:网页的骨架 没有任何的样式
CSS:给骨架添加各种样式 变得好看
JS:控制网页的动态效果
前端框架:BOOTSTRAP、JQuery、Vue
"""
浏览器窗口输入网址回车发生了什么
"""
1 浏览器朝服务端发送请求
2 服务端接受请求(eg:请求百度首页)
3 服务端返回相应的响应(eg:返回一个百度首页，实际上就是返回一个HTML文件)
4 浏览器接收响应 根据特定的规则渲染页面展示给用户看
"""
HTTP协议
"""
http协议全称是超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式...
该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问
你就自己写客户端 用户想要使用 就下载你专门的app即可
"""
# 四大特性
1.基于请求响应
2.基于TCP/IP作用于应用层之上的协议
3.无状态
不保存用户的信息，每次都需要重新登陆
由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
如cookie、session、token...
4.无/短链接
请求来一次我响应一次 之后我们两个就没有任何链接和关系了
长链接:双方建立连接之后默认不断开：websocket
# 请求数据格式
请求首行(标识HTTP协议版本，当前请求方式)
请求头(一大堆k,v键值对)
请求体(并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据)
# 响应数据格式
响应首行(标识HTTP协议版本，响应状态码)
响应头(一大堆k,v键值对)
响应体(返回给浏览器展示给用户看的数据)
# URL
统一资源定位符 类似于坐标
# 响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息 例如我们最常见的404:请求资源不存在
1XX:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2XX:服务端成功响应了你想要的数据(200 OK请求成功)
3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)
4XX:请求错误
404:请求资源不存在
403:当前请求不合法或者不符合访问资源的条件
5XX:服务器内部错误(500)
# 请求方式
1.get请求
朝服务端要数据
eg:输入网址获取对应的内容
2.post请求
朝服务端提交数据
eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验
# url:统一资源定位符(就是网址)
HTML简介
全称：超文本标记语言
HTML就是书写网页的一套标准，如果想要让浏览器能够渲染出页面，就必须遵循HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)
<h1>hello big baby~</h1>
<a href="https://www.mzitu.com/">click me！give you some color to see see！</a>
<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg" />
注释
# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
HTML文档结构
<html>
<head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器
<body></body>:body内的标签 也是页面的主要内容
</html>
PS:文件的后缀名其实是给用户看到的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能
注意:HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码
两种打开HTML文件的方式
- 找到文件所在的位置右键选择浏览器打开
- 在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器
标签的分类1
第一种分类方法：
1 双标签：<h1></h1>
2 单标签(自闭和标签)：<img/>
head内常用标签
在书写HTML代码的时候 你只需要写标签名 然后tab就能自动补全
<title>Title</title> 网页标题
<style>
h1 {
color: greenyellow;
}
</style> # 内部用来书写css代码
<script>
alert(123)
</script> 内部用来书写js代码
<script src="myjs.js"></script> 还可以引入外部js文件
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
<meta name="keywords" content="老男孩教育,老男孩,老男孩培训,Python培训,Linux培训,网络安全培训,Go语言培训,人工智能培训,云计算培训,Linux运维培训,Python自动化运维,Python全栈开发,IT培训"> 当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"> 网页的描述性信息
body内常用标签
<h1>我是h1</h1> 标题标签 1～6级标题 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <p>段落</p> <br> 换行 <hr> 水平分割线
标签的分类2
# 1 块儿级标签:独占一行 h1~h6 p div 1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化 2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签 但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签 如果你套了 问题也不大 因为浏览器会自动帮你解开 总结: 只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签 但是p标签只能嵌套行内标签（HTML书写规范）# 2 行内标签:自身文本多大就占多大 i u s b span 行内标签不能嵌套块儿级标签 可以嵌套行内标签
特殊符号
空格> 大于号< 小于号& &¥ ¥© 圆圈C©，也叫版权符号® 圆圈R®，也叫商标符号
div和span标签
div 块儿级标签span 行内标签上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域 之后往该区域内部填写内容即可而普通的文本先用span标签
img标签
# 图片标签<img src="" alt="">src 1.图片的路径 可以是本地的也可以是网上的 2.url 自动朝该url发送get请求获取数据alt="这是我的前女友" 当图片加载不出来的时候 给图片的描述性信息title="新垣结衣" 当鼠标悬浮到图片上之后 自动展示的提示信息height="800px" width="" 高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放 如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
a标签
# 链接标签<a href="" target=''></a>"""当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色如果点击过了就会是紫色（浏览器记忆过了）"""href 1.放url，用户点击就会跳转到该url页面 2.放其他标签的id值 点击即可跳转到对应的标签位置，也就是锚点功能target 默认a标签是在当前页面完成跳转 _self 你也可以修改为新建页面跳转 _blank# a标签的锚点功能"""eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""<a href="" id="d1">顶部</a><h1 id="d111">hello world</h1><div style="height: 1000px;background-color: red"></div><a href="" id="d2">中间</a><div style="height: 1000px;background-color: greenyellow"></div><a href="#d1">底部</a><a href="#d2">回到中间</a><a href="#d111">回到中间</a>
标签具有的两个重要属性
1.id值 类似于标签的身份证号 在同一个html页面上id值不能重复2.class值 该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的书写也可以有自定义的书写
<p id="d1" class="c1" username="jason" password="123"></p>
列表标签
-
无序列表(较多)
<ul> <li>第一项</li> <li>第二项</li> <li>第二项</li> <li>第二项</li></ul># 虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签 -
有序列表(了解)
<ol type="1" start="5"> <li>111</li> <li>222</li> <li>333</li></ol>1 A I a ... 参考博客了解即可，是有序列表顺序的表示方式 -
标题列表(了解)
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> <dt>标题3</dt> <dd>内容3</dd></dl>
表格标签
jason 123 readegon 123 dbjtank 123 hecha...<table> <thead> <tr> 一个tr就表示一行 <th>username</th> 加粗文本 <th>username</th> 正常文本 </tr> </thead> 表头(字段信息) <tbody> <tr> <td>jason</td> <td>123</td> <td>read</td> </tr> </tbody> 表单(数据信息)</table><table border="1"> 加外边宽<td colspan="2">egon</td> 水平方向占多行（合并单元格的效果）<td rowspan="2">DBJ</td> 垂直方向占多行（合并单元格的效果）# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很美观
表单标签
"""能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器"""# 写一个注册功能<form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端action:控制数据提交的后端路径(给哪个服务端提交数据) 1.什么都不写 默认就是朝当前页面所在的url提交数据 2.写全路径:https://www.baidu.com ——》朝百度服务端提交 3.只写路径后缀action='/index/' 自动识别出当前服务端的ip和port拼接到前面 host:port/index/# 能够触发form表单提交数据的按钮有哪些 1、<input type="submit" value="注册"> 2、<button>点我</button># 所有获取用户输入的标签 都应该有name属性 name就类似于字典的key 用户的数据就类似于字典的value <p>gender: <input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="radio" name="gender">其他 </p>
lable标签
# lable标签能够将input标签和前面的文字（就是下面的username）连在一起，实现点击文字的时候也能唤醒input标签（input标签只能在鼠标点击文本框的时候才能将光标定位在文本框内，而lable能够实现鼠标点击username的时候就会将光标定位在文本框中）<label for="d1"> 第一种 直接将input框写在label内username:<input type="text" id="d1"></label> 第二种 通过id链接即可 无需嵌套<label for="d2">password:</label><input type="text" id="d2">"""label 和 input都是行内标签ps:input不跟label关联也没有问题"""
input标签
input标签 就类似于前端的变形金刚 通过type属性变形 下面介绍一下type的属性值： 1 text:普通文本 2 password:密文 3 date:日期 4 submit:用来触发form表单提交数据的动作 5 button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能 6 reset:重置内容 7 radio:单选 默认选中要加checked='checked'，可以简写成checked <input type="radio" name="gender" checked='checked'>男 当标签的属性名和属性值一样的时候可以简写 <input type="radio" name="gender" checked>女 8 checkbox:多选 <input type="checkbox" checked>DBJ 9 file:获取文件 也可以一次性获取多个 <input type="file" multiple> 10 hidden:隐藏当前input框 钓鱼网站
select标签
select标签：是一个下拉的选择框默认是单选 可以加mutiple参数变多选 默认选中selected <select name="" id="" multiple> <option value="" selected>新垣结衣</option> <option value="" selected>斯佳丽</option> <option value="">明老师</option> </select>
textarea标签
textarea标签：是一个文本框（像是贴吧评论那种的矩形）获取大段文本 <textarea name="" id="" cols="30" rows="10"></textarea> cols="30" rows="10"是限制文本框的大小，多少行，多少列
验证form表单提交数据
# 接下来的框架代码无需掌握 pip3 install FLASK# 安装FLASK模块form表单默认提交数据的方式 是get请求 数据是直接放在url后面的 http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on你可以通过method指定提交方式 <form action="http://127.0.0.1:5000/index/" method="post"> 针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值<p>gender: <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" checked value="female">女 <input type="radio" name="gender" value="others">其他</p><p>hobby: <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" checked name="hobby" value="football">足球 <input type="checkbox" checked name="hobby" value="doublecolorball">双色球</p><p>province： <select name="province" id=""> <option value="sh">上海</option> <option value="bj" selected>北京</option> <option value="sz">深圳</option> </select></p>"""form表单提交文件需要注意 1.method必须是post 2.enctype="multipart/form-data" enctype类似于数据提交的编码格式 默认是urlencoded 只能够提交普通的文本数据 formdata 就可以支持提交文件数据"""<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">"""下面的代码无需掌握 你只需要关心form表单即可"""from flask import Flask, requestapp = Flask(__name__)# 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持get请求@app.route('/index/',methods=['GET','POST'])def index(): print(request.form) # 获取form表单提交过来的非文件数据 # ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')]) print(request.files) # 获取文件数据 file_obj = request.files.get('myfile.png') file_obj.save(file_obj.name) return 'OK'app.run()# 针对用户输入的标签。如果你加了value 那就是默认值<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>disable 禁用readonly只读
浙公网安备 33010602011771号