25 前端HTML
web的本质：浏览器、服务器、文件（html文件）
HTTP协议
四大特性：
1.基于请求响应
2.基于TCP/IP作用于应用层之上的协议
3.无状态
不保存用户的信息
eg：一个人来了1000次，你都记不住，每次都当他如初见
由于HTTP协议是无状态的，所以陆续出现了一些专门用来记录用户状态的技术
4.无/短链接
请求一次响应一次，之后我们就没有任何关系了
长链接：双方建立连接之后默认不断开
请求数据格式
请求首行（标识HTTP协议版本，当前请求方式）
请求头(一大堆k,v键值对)
请求体（并不是所有的请求方法都有，get没有，post有，存放的是post请求提交的敏感数据）
响应数据格式
响应首行（标识HTTP协议版本，当前请求方式）
响应头(一大堆k,v键值对)
响应体（返回给浏览器展示给用户看的数据）
url：统一资源定位符
响应状态码 用一串简单的数字来表示一些复杂的状态或毛属性信息 404：请求资源不存在
1XX：服务端已经成功接收到你的数据，正在处理，你可以继续提交
2XX：请求成功（200 ok）
3XX 重定向（你想访问A对象但是给你调到了B页面）
4XX（请求错误）404：请求资源不存在 403：当前请求不合法或不符合访问资源的条件
5XX 服务器内部错误
ps：上述的状态码是http协议规定的，每个公司还会自己定制自己的状态码以及提示信息
#请求方式
1.get请求 朝服务端要数据 输入网址获取对应的内容（也可以携带参数，只不过参数不是放在请求体里）
2.post请求 朝服务端提交数据 用户登录
#url ：统一资源定位符（网址）
HTML简介
超文本标记语言
HTML就是书写网页的一套标准
注释：注释就是代码之母
<!--单行注释-->
<!--
单行注释
单行注释
单行注释
-->
由于HTML代码非常的杂乱，并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
HTML文档结构
文件的后缀名其实是给用户看的，只不过对应不同的文件名后缀有不同的软件来处理，并添加很多功能
注意：HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码
两种打开HTML文件的方式
找到文件所在的位置右键选择打开即可
Pytharm内部集成了自动调用浏览器的功能，直接点击即可（前提是电脑上安装了对应的浏览器），直接全部使用谷歌浏览器
HTML,XML可以书写前端页面
注释： <!--注释-->
标签的分类
1.双标签
2.单标签
head内常用的标签
在书写HTML代码的时候只需要写标签名，Tab建自动补全
title 定义网页标题信息
style 内部支持直接书写cas代码
link 引入外部cas文件
script 内部可以书写js代码并且也可以引入外部js文件
meta 定义网页源信息
keywords
description
body内常用标签
基本标签
h1 标题标签
b加粗 i斜体 u下划线 s 删除线
p 段落标签 <br>换行 <hr>水平分割线
标签的分类2
块儿型标签：独占一行 h1-h6 p div
1.块儿级标签可以修改长宽，行内标签不可以，修改了也不会有变化
2.块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块儿级标签但是它只能嵌套行内标签不能嵌套块儿级标签 如果套了也问题不大，因为浏览器会自动帮你解开，浏览器是直接面向用户的，不会轻易报错，哪怕有报错用户也基本感觉不出来
总结：只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签，但p只能嵌套行内标签
行内标签：自身文本多大占多大 i u s b
行内标签不能嵌套块儿级标签，可以嵌套行内标签
特殊符号
  空格
> 大于号
< 小于号
& &符
¥ money符
© 圆圈c
商标® 圆圈R
常用标签
div 块儿级标签(独占一行，)
span 行内标签
div你可以先把他看成一块区域，也就意味着用div来提前规定所有的区域
之后往该区域内填写内容即可
而普通的文本先用span标签
img标签
图片标签
src
1.图片路径可以是网上的或者本地的
2.url 自动朝该url发送get请求获取数据
alt ="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息
title=“新垣结衣“
当鼠标悬浮到图片上展示的图片信息
height
width
当高度和宽度只修改一个的时候会等比例调整，如果修改了2个参数，没有考虑比率问题，图片会失真
a标签
链接标签
当a标签指定的网址从来没有被点击过，那么a标签的字体颜色是蓝色，如果点击过了是紫色
href标签 放的是url
放其他a标签的id值，点击即跳转到对应的标签位置
target 默认当前页面跳转 ——self
你也可以修改为新建页面跳转 ——blank
a标签的锚点功能：eg:点击一个文本标题，页面自动跳转到标题对应的内容区域
标签具有的2个重要属性
1.id值
类似于身份证号，在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承，一个标签可以继承多个class值
标签即可以有默认的属性也可以有自定义的属性
列表标签
无序列表（较多）
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
有序列表
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签
json 123 read
egon 123 dbj
tank 123 play
<table>
<thead>
<tr>#一个tr表示一行
<th>username</th>#加粗，（td不加粗，正常文本）
</tr>
</thead> #表头（字段信息）
<tbody>
<tr>
<td>tank</td>
<td>123</td>
<td>haha</td>
</tr>
</tbody> #表单（数据信息）
</table>
</table border="1"> #加外边框
<td rowspan="2" >egon</td> 垂直方向占多行
<td colspan="2" >egon</td> 水平方向占多行
#原生的表格标签很丑，但是后续我们一般都是使用框架封装好的，很好看
表单标签
能够获取前端用户输入的内容（用户输入、用户选择、用户上传的）基于网络发送给后期服务器
#写一个注册功能
<form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action 控制数据提交的后端路径，给哪个服务端提交数据
1.什么都不写，默认就是朝当前页面所在的url提交数据
2.写全路径，就是朝着指定的服务端提交
3.只写路径后缀，action=“/indedx/”,自动识别出当前服务端的ip和端口拼接到前面
lable input都是行内标签
input标签类似于前端的变形金刚 通过type属性变形
text:普通文本
password：密文展示
date：日期
<input type="submit">
当你没有指定按钮的文本内容，不同的浏览器可能渲染的文本内容不一致
<input type="button">
<input type="reset">
submit #用来触发form表单提交数据的动作
button 就是一个普通的按钮 本身没有任何的动作，但是他是最有用的，学完js之后可以给他自定义各种功能
reset：重置内容
radio：单选
默认选中要加checked=”checked“
当标签的属性名和属性值一样的时候可以简写
checkbox：多选
<input type="checkbox">hecha
selecte标签 默认是单选可以加multiple变多选 默认选中:selected
file:获取文件，也可以一次获取多个
<input type="file" multiple>
textarea 获取大段文本
hidden隐藏当前input框
#能够触发form表单提交数据的标签有：（一定要记住）
<input type="submit" value="注册">
<button>点我</button>
#所有获取用户输入的标签，都应该有name属性，
name属性就类似于字典的key
用户的数据就类似于字典的value
<p>gender:
<input type="radio" name="gender“>男
<input type="radio" name="gender“>男
<input type="radio" name="gender“>其他
</p>
验证form表单提交数据
1.安装pip3 install flask
#form表单默认提交get请求 数据是直接放在url后面的
可以通过method指定提交方式
针对用户选择的标签，用户不需要输入内容，但是需要提前给这些标签添加内容
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
action：指定向哪个后端提交数据
1. 什么都不写，默认提交到当前地址
2. 全写，http://127.0.0.1:5000/index/
3. /index/
ip:port/index/
form表单提交文件需要注意：
1.method 必须是post
2.enctype="multipart/form-data"
enctype类似于数据提交的编码格式，默认是urlencoded只能够提交普通的文本数据 formdata就可以支持提交文件数据
diasable 禁用
readonly 只读
# 编码方式：
1. urlencoded
2. form-data
3. json
