前端介绍+HTTP协议及HTML基本标签
目录
HTML简介
- HTML:超文本标记语言
- 如果想让浏览器能够渲染出写的页面，就必须遵循HTML语法
- 浏览器看到的页面，内部都是HTML代码
- HTML是书写网页的一套标准
注释---代码之母
<!--单行注释-->
<!--
多行注释
多行注释
多行注释
-->
由于HTML代码非常杂乱无章并且很多，所以习惯用注释来划定区域方便后续查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
HTML文档结构
<html>
<head></head> :head内的标签不是给用户看的，而是定义一些配置主要是给浏览器看的
<body></body> ：body内的标签，写什么浏览器就渲染什么，用户就能看到什么
</html>
- 文件后缀名：.html，文件的后缀名其实是给用户看的，只不过对应不同的文件后缀名有不同的软件来处理，并添加很多功能
- HTML没有代码格式，可以全部写在一行都没有问题，只不过是习惯了代码缩进的方式
打开HTML文档的两种方式
- 找到文件所在的位置右键选择浏览器打开
- 在pycharm内部，继承了自动调用浏览器的功能，直接点击即可，前提是计算机上安装了相应的浏览器
HTML标签
标签分类---one
- 双标签 --- 标签成对出现
<h1></h>
<a></a>
- 单标签 --- 自闭和标签
<img/>
标签分类 --- two
- 块级标签：独占一行
h
p
div
- 行内标签：自身文本多大就占多大
i
u
s
b
span
- 块级标签与行内标签的区别
1 块级标签可以修改长宽，行内标签不可以，修改了也不会变
2 块级标签内部可以嵌套任意的块级标签和行内标签，但是p标签虽然是块级标签，但是它只能嵌套行内标签，不能嵌套块级标签
如果套了，问题也不大，浏览器会自动解开嵌套，因为浏览器是直接面向用户的，不会轻易报错，哪怕报错用户也感觉不出来
3 行内标签不能嵌套块级标签，可以嵌套行内标签
<head>标签内常用标签
- head内的标签不是给用户看的，而是定义一些配置主要是给浏览器看的
网页标题
<title>title</title>
内部用来书写css代码
<style>css代码</style>
内部用来书写js代码
<script>js代码</script>
还可以引入外部js文件
<script src=js文件路径></script>
引入外部css文件
<link rel="stylesheet" href="">
<meta> 定义网页源信息
网页编码格式
<meta charset="UTF-8">
当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="keywords" content="">
网页的描述信息
<meta name="description" content="">
<body>标签内常用标签
- body内的标签，写什么浏览器就渲染什么，用户就能看到什么
基本标签
- 1-6级标题<h1>hah</h1>
- 加粗<b>
- 斜体<i>
- 下划线<u>
- 删除线<s>
- 段落<p>
- 换行<br>
- 水平分割线<hr>
div/span
上述两个标签是在构造页面初期最常使用的，页面的布局一般先用div和span占位再去调整，尤其是div使用非常的频繁
div可以将其看作是一块区域，意味着用div提前规定所有的区域，之后往该区域填写内容即可
普通文本用span标签
img标签---图片标签
<img src="" alt="" title="" height="">
src:
1 图片的路径，可以是本地的也可以是网上的
2 url 自动朝url发送get请求获取数据
alt:
图片加载不出来时候的描述信息
title:
当鼠标悬浮到图片上之后，自动展示的提示信息
height:
高度：像素px为单位
weight:
宽度：像素px为单位
注意：高度和宽度只修改一个的时候，另一个参数会等比例缩放
如果同时修改两个参数，并且没有考虑比例的问题，那么图片就会失真
a标签---链接标签
<a href="" target="" id="">链接描述</a>
<!--
当a标签指定的网址从来没有被点击过，那么a标签的字体颜色是蓝色
点击过就是紫色，浏览器记忆
-->
href:
1 放的是url，用户点击就会跳转到该url页面
2 放其他标签的id值，点击直接跳到该标签的位置
target:
默认a标签是在当前页面完成跳转，target = "_self"
修改为新建页面跳转，targrt = "_blank"
id:
标签的身份证号，在同一个html页面上id值不能重复
a标签的锚点功能
例如：点击一个文本标题，页面自动跳转到转到标题对应的内容区域
<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>
列表标签
虽然ul标签很丑，但是在页面布局的时候，只要是排版一致的几行数据基本使用的都是ul标签
无序列表--ul
<ul type="圈 点">
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
有序列表--ol
<ol type="罗马数字 数字 A">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
标题列表--dl
<dl>
<dt>标题1</dt>
<dd>内容</dd>
<dt>标题2</dt>
<dd>内容</dd>
</dl>
特殊符号
- 空格：
- 大于号：
> - 小于号：
< - &：
&' - ￥：
¥ - 商标©：
© - 版权®：
®
表格标签
展示内容
| username | password | hobby |
|---|---|---|
| guigui | 123 | read |
| chloe | 123 | sleep |
<table>
<thead>
<tr>
<th>username</th>
<th>password</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>guigui</td>
<td>123</td>
<td>read</td>
</tr>
<tr>
<td>chloe</td>
<td>123</td>
<td>sleep</td>
</tr>
</tbody>
</table>
<!--
<thead>:表头
<tr>:一个tr表示一行
<th>:加粗文本
<td>:正常文本
<tbody>:表单中的信息
<table border="1">:表格外边框的宽度
<td colspan="2">guigui</td>:水平方向占据两列
<td rowspan="2">chloe</t>:竖直方向占据两行
-->
表单标签form ----- 非常重要
- 作用：能够获取前端用户数据（用户输入的 用户选择的 用户上传的...）基于网络发送给后端的服务器
- form标签简介
<form action="" method="post" enctype="multipart/form-data"></form>
<!-- 在form标签内部书写的获取用户的数据都会被form标签提交到后端 -->
<!--
action:控制数据提交的后端路径（给哪个服务端提交数据）
1 什么都不写，默认就是向当前页面所在的url提交数据
2 写全路径:https://www.baidu.com 朝百度服务端提交
3 只写路径后缀action='/index/'
自动识别出当前服务端的ip和port拼接到前面
host:port/index/
method:请求方式，get or post
-->
- lable标签与input标签关联
以注册登录页面为例介绍
<!-- 介绍input与lable的结合使用
input是自闭和标签
input与lable标签都是行内标签
-->
username：<input type="text">
<!-- 此时没有点击username光标就会出现在输入框的效果 -->
想实现上述效果的两种方式
第一种：直接将input框写在label内
<label for="d1">
username:<input type="text" id="d1">
</label>
第二种：通过id链接，无需嵌套
<label for="d1">username</label>
<input type="text" id="d1">
注意：input不跟lable关联也可以
- input标签简单使用---以注册登录功能为例
input标签类似于前端的变形金刚，通过type属性进行变形
<!-- text:普通文本-->
username:<input type="text" name="" id="">
<!-- password:加密文本-->
password:<input type="password" name="" id="">
<!-- date:可以选择日期 -->
birth:<input type="date" name="" id="">
<!-- submit:触发form表单提交数据的动作，value可以指定按钮中的内容 -->
<input type="submit" value="注册">
<!-- botton:普通按钮，没有任何功能，但是是最有用的，学完js后可以给它自定义各种功能 -->
<input type="button" value="我没啥功能">
<!-- reset:重置功能 -->
<input type="reset" value="我可以清空填写的所有数据">
<!-- radio:单选功能 -->
gender:
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
<!-- checkbox:多选功能 -->
hobby:
<input type="checkbox" name="hobby" checked>read
<input type="checkbox" name="hobby" checked>play
<input type="checkbox" name="hobby" checked>sleep
<input type="checkbox" name="hobby" checked>tea
<!-- file:获取本机文件，可以一次性获取多个muliple -->
myfile:<input type="file" multiple>
<!-- hidden:隐藏input框 -->
钓鱼：<input type="hidden">
- select标签简单使用
默认单选，可以加mutiple参数变多选 默认选中selected="selected",可以简写为selected
province:
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">深圳</option>
</select>
<select name="" id="" multiple>
<option value="" selected>苹果</option>
<option value="" selected>蛋挞</option>
<option value="">蛋糕</option>
</select>
<!-- 按住ctrl键多选 -->
select标签的分组选择
address:
<select name="" id="">
<optgroup label="上海">
<option value="">徐汇</option>
<option value="">张江</option>
</optgroup>
<optgroup label="深圳">
<option value="">龙岗</option>
<option value="">罗湖</option>
</optgroup>
<optgroup label="北京">
<option value="">昌平</option>
<option value="">朝阳</option>
</optgroup>
</select>
- textarea标签---大段文本框
个人简介：
<textarea name="" id="" cols="30" rows="10" maxlength="10"></textarea>
<!--
maxlength:限制最大输入字符的个数
-->
- 总结
按钮组：
input标签产生的按钮
submit：触发form表单提交数据的动作，会刷新页面，提交数据
button:普通按钮，没有任何功能，但是是最有用的，学完js后可以给它自定义各种功能
reset:重置输入框中的所有内容
botton标签产生的按钮：
<button>click me</button>
触发form表单提交数据的动作，会刷新页面
所有获取用户输入的标签 都应该有name属性
原因：数据提交到后端，应该有变量名接收用户输入的值，而name就类似于字典的key,用户输入的数据就类似与字典的value.
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
flask框架验证表单提交数据到后端
flask安装
pip install FLASK
form表单提交数据的方式---method属性
- 默认--- get请求
5000：是falsk的默认端口号
数据是直接放在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>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 就可以支持提交文件数据
# 后端服务器
from flask import Flask, request
app = 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只读
