前端基础之HTML
前端基础之HTML
一 前端结构
1.1 前端结构概述
#前端结构
HTML:网页的骨架 没有任何的样式
CSS:给骨架添加各种样式 变得好看
JS:控制网页的动态效果
前端框架:BOOTSTRAP、JQuery、Vue
提前给你封装好了很多操作 你只需要按照固定的语法调用即可
#软件开发架构
cs 客户端 服务端
bs 浏览器 服务端
ps:bs本质也是cs
- 图示
- 含义
- 具体内容
1.2 浏览器访问网址事
"""
1 浏览器朝服务端发送请求
2 服务端接受请求(eg:请求百度首页)
3 服务端返回相应的响应(eg:返回一个百度首页)
4 浏览器接收响应 根据特定的规则渲染页面展示给用户看
"""
浏览器可以充当很多服务端的客户端
百度 腾讯视频 优酷视频....
如何做到浏览器能够跟多个不同的客户端之间进行数据交互？
1.浏览器很牛逼 能够自动识别不同服务端做不同处理
2.制定一个统一的标准 如果你想要让你写的服务端能够跟客户端之间做正常的数据交互
那么你就必须要遵循一些规则
协议是 HTTP协议
import socket
server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
print('run is ...')
while True:
conn, addr = server.accept()
data = conn.recv(1024)
print(data.decode('utf8'))
conn.send(data.upper())
#01 创建套接字 '127.0.0.1', 8080
访问该地址
- 发现浏览器无法正常响应，但是服务端有数据接入
由于协议不一致 导致客户端（浏览器）无法返回数据
所以需要一些统一的标准和规范
1.3 HTTP 协议
"""
超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式...
该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩
你就自己写客户端 用户想要使用 就下载你专门的app即可
"""
# 四大特性
1.基于请求响应
2.基于TCP/IP作用于应用层之上的协议
3.无状态
不保存用户的信息
eg:一个人来了一千次 你都记不住 每次都当他如初见
由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
cookie、session、token...
4.无/短链接
请求来一次我响应一次 之后我们两个就没有任何链接和关系了
长链接:双方建立连接之后默认不断开 websocket(后面讲项目的时候会讲)
# 请求数据格式
请求首行(标识HTTP协议版本，当前请求方式)
请求头(一大堆k,v键值对)
请求体(并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据)
# 响应数据格式
响应首行(标识HTTP协议版本，响应状态码)
响应头(一大堆k,v键值对)
响应体(返回给浏览器展示给用户看的数据)
# 响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息 404:请求资源不存在
1XX:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2XX:服务端成功响应了你想要的数据(200 OK请求成功)
3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)
4XX:请求错误
404:请求资源不存在
403:当前请求不合法或者不符合访问资源的条件
5XX:服务器内部错误(500)
# 请求方式
1.get请求
朝服务端要数据
eg:输入网址获取对应的内容
2.post请求
朝服务端提交数据
eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验
# url:统一资源定位符(大白话 网址
1.4 添加HTTP协议
- 未添加前
import socket
server = socket.socket()
server.bind(('127.0.0.1', 8081))
server.listen(5)
print('run is ...')
while True:
conn, addr = server.accept()
data = conn.recv(1024)
print(data.decode('utf8'))
conn.send(b'hello word')
#访问报错
- 添加后
import socket
server = socket.socket()
server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server.bind(('127.0.0.1', 8086))
server.listen(5)
print('run is ...')
while True:
conn, addr = server.accept()
data = conn.recv(1024)
print(data.decode('utf8'))
conn.send(b'HTTP/1.1 200 OK\r\n\r\n') #定义请求头协议
#conn.send(b'<h1> hello word </h1>') #设置标题
#conn.send(b'hello word')
二. HTML系列
2.1 HTML前奏
超文本标记语言
如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)
- 案例 服务端
import socket
server = socket.socket()
server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server.bind(('127.0.0.1', 8086))
server.listen(5)
print('run is ...')
while True:
conn, addr = server.accept()
data = conn.recv(1024)
print(data.decode('utf8'))
conn.send(b'HTTP/1.1 200 OK\r\n\r\n') #定义请求头协议
#打开文件 并发送文件内容
with open('./note/aaa.txt',mode='rb') as f:
conn.send(f.read())
conn.close()
- ./note/aaa.txt 内容
<h1> hello word fu xiaojie </h1>
<h2> hello word fu xiaojie </h2>
<a href="https://www.mzitu.com/">click me give you some color to see see </a>
<img src="https://img2.baidu.com/it/u=2416149911,70500032&fm=253&fmt=auto&app=138&f=JPEG?w=362&h=500" />
2.2 HTML 文档结构
# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
<html>
<head> </head> :head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
<body> </body> :body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>
PS:文件的后缀名其实是给用户看到的，只不过对应不同的 文件后缀名有不同的软件来处理并添加很多功能
注意:HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码
三 标签管理
3.1 标签的分类
<!--双标签 有头有尾 -->
<h1> </h1>
<a href="https://www.mzitu.com/"></a>
<!--单标签 只需要写头部 又叫(自闭和标签)-->
<img/>
1 双标签
2 单标签(自闭和标签)
3.2 head内常用标签
| 标签 | 意义 |
|---|---|
| 定义网页标题 | |
| 定义内部样式表 颜色 | |
| 定义JS代码或引入外部JS文件，互动点击 | |
| 引入外部样式表文件或网站图标 | |
| 定义网页原信息，跳转 |
<!-- 01定义网站标题 -->
<title>亚洲最大的网站</title>
<!-- 02书写css 代码，这里定义 h1字体颜色-->
<style> h1 { color: chocolate; } </style>
<!-- 03内部用来书写 js代码 -->
<script> alert(123) </script>
<!-- 04内部用来书写 js代码 引用外部的 js文件 -->
<script src="myjs.js"></script>
myjs.js
confirm('你确定要分开吗？');
<!-- 引入外部css文件 -->
<link rel="stylesheet" href="mycss.css">
mycss.css
h1 {
color: yellow;
}
<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://zhangyuzhou.cn">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!--网站搜索关键字-->
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<!--网页描述信息-->
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">
3.3 body常用标签
1）基本文本标签
<body>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
<hr>
我是普通文本，啥标签都没有<br>
<hr>
<b>加粗 </b><br>
<i>斜体</i><br>
<u>下划线</u><br>
<s>删除线</s><br>
<hr>
<p>锦瑟无端五十弦，一弦一柱思华年</p>
<p>锦瑟无端五十弦，一弦一柱思华年</p>
<p>锦瑟无端五十弦，一弦一柱思华年</p>
<p>锦瑟无端五十弦，一弦一柱思华年</p>
</body>
---
<h1>标题标签</h1>
<hr>水平分割线
<b>加粗 </b><br>
<i>斜体</i><br>
<u>下划线</u><br>
<s>删除线</s><br>
<hr>
<p>段落标签 一句一行</p>
- 图示
2）块级标签和行内标签
# 1 块儿级标签:独占一行
h1~h6 p div
1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）
# 2 行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块儿级标签 可以嵌套行内标签
3）特殊字符
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册商标 | ® |
<p>我是一个空格 我是一个空格 </p>
<p>大于号 3 > 2 </p>
<p>小于号 2 < 8 </p>
<p>&符号 & </p>
<p>版权符号 © </p>
<p>金钱符号 ¥ </p>
<p>注册商标符号 ® </p>
4）常用标签
div 块儿级标签
span 行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签
<div>
<span>我是spen标签</span>
</div>
总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）
行内标签不能嵌套块儿级标签 可以嵌套行内标签
5）img 图片标签
# 图片标签
<img src="" alt="">
src
1.图片的路径 可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据
alt="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息
title="新垣结衣"
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
<img src="https://i.8kmm.com/2021/02/b836b-6e27a-3_f0__619433cc24.jpg" alt="这是我之前拍的" title="星空顶" height="300" width="205.8" >
6）a 链接标签
# 链接标签
<a href=""></a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""
href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank
<a href="https://www.baidu.com" target="_self" >点击页面内跳转</a>
<a href="https://www.baidu.com" target="_blank" >其他页面跳转</a>
# 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>
7）标签的属性
1. id 值
标签的身份证号，在同一个html页面上id值 不能重复
2. class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的书写也可以有自定义的书写
<p id="d1" class="c1" username="jason" password="123"></p>
8）列表标签
- 无序列表
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
</ul>
虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
ul {
list-style-type: none;
}
去除旁边的点
- 有序列表
#小知识
ol>li*5 会直接创建ol一个标签 然后再创建 --->>> li五个标签
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ol>
type="1" 默认是安装数字排序
1 A I a ...
数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
- 标题列表
<dl>
<dt>标题一</dt>
<dd>内容一</dd>
<dt>标题二</dt>
<dd>内容二</dd>
<dt>标题三</dt>
<dd>内容三</dd>
</dl>
9）表格标签
- 表格标签(只要是展示数据 一般都可以使用表格标签)
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
#01 基本格式
<body>
<table border="10" cellpadding="15" cellspacing="5">
<thead> #定义标题
<tr> #一个tr就表示一行
<th>username</th> #th 为加粗文本
<th>passwd</th>
<th>hobby</th>
</tr>
</thead>
<tbody> #定义内容
<tr>
<td colspan="2">zhangyuzhou</td> #td 为正常文本 colspan 水平方向占两行
<td rowspan="2">123</td> #td 为正常文本 rowspan 垂直方向占两行
<!--<td >read</td> -->
</tr>
</tbody>
</table>
</body>
##总结
<thead></thead> #定义表格标题
border="2" #加外边宽
cellpadding="15" #表格尺寸 大小
cellspacing="5" #网络 单元格间距; 表格中单元格之间的距离
<tbody></tbody> #定义表格内容
<table border="1"> 加外边宽
<td colspan="2">egon</td> 水平方向占多行
<td rowspan="2">DBJ</td> 垂直方向占多行
# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看
3.4 body 高级表单标签
1）form 定义
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
"""
能获取前端用户数据（用户输入的 用户选择的 用户上传的。。。）基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action:控制数据提交的后端路径(给哪个服务端提交数据)
1.什么都不写 默认就是朝当前页面所在的url提交数据
2.写全路径:https://www.baidu.com 朝百度服务端提交
3.只写路径后缀action='/index/'
自动识别出当前服务端的ip和port拼接到前面
host:port/index/
2） label 标签
<h1>注册页面</h1>
<form action="">
#方式一 input框写在label内
<label for="d1"> username:<input type="text" id="d1"> </label>
#方式二 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
</form>
ps:input不跟label关联也没有问题
"""
label 和 input都是行内标签 点击lable 传到传到的id
"""
3） select 下拉标签
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
属性说明：
multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
4）textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用
5）Input 标签属性
<input> 元素会根据不同的 type 属性，变化为多种形态。
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | |
| date | 日期输入框 | |
| checkbox | 复选框 | |
| radio | 单选框 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| button | 普通按钮 | |
| hidden | 隐藏输入框 | |
| file | 文本选择框 |
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读
- disabled：所有input均适用
6） Input 常用的标签
input标签 就类似于前端的变形金刚 通过type属性变形
text:普通文本
password:密文
date:日期
submit:用来触发form表单提交数据的动作
button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
reset:重置内容
radio:单选框
默认选中要加checked='checked'
<input type="radio" name="gender" checked='checked'>男
当标签的属性名和属性值一样的时候可以简写
<input type="radio" name="gender" checked>女
checkbox:多选框 checked
<input type="checkbox" checked>DBJ
file:获取文件 也可以一次性获取多个
<input type="file" multiple>
hidden:隐藏当前input框
钓鱼网站
看不到我<input type="hidden">
textarea: 大文本标签
<textarea name="" id="" cols="30" rows="10"></textarea>
select：下拉选择框 multiple 多选
<select name="" id="" multiple>
<option value="" selected>苍老师</option>
<option value="" selected>妲己</option>
<option value="">貂蝉</option>
</select>
7）input 提交数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<form action="">
<!-- 文本输入框 用户名和密码 密码是密文的-->
<p><label for="d1"> username:<input type="text" id="d1"> </label></p>
<p><label for="d2"> password:<input type="password" id="d2"> </label></p>
<!-- 时间框 用户选择出生年月-->
<p>birthday: <input type="date"></p>
<!-- 单选框 用户输入性别 三选一 -->
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
<input type="radio" name="gender">其它
</p>
<!-- 多选框 用户输入爱好 可以多个-->
<p>hobby:
<input type="checkbox">read
<input type="checkbox">book
<input type="checkbox" checked>beautiful
<input type="checkbox">study
</p>
<!--单选下拉框 选择省份地址-->
<p>province:
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">深圳</option>
</select>
</p>
<!--多选下拉框 -->
<p>The Ex:
<select name="" id="" multiple>
<option value="" selected>苍老师</option>
<option value="" selected>妲己</option>
<option value="">貂蝉</option>
</select>
</p>
<!--标题多选下拉框-->
<p>province1:
<select name="" id="">
<optgroup label="上海">
<option value="">浦东</option>
<option value="">黄埔</option>
<option value="">青浦</option>
</optgroup>
<optgroup label="北京">
<option value="">朝阳</option>
<option value="">昌平</option>
<option value="">沙河</option>
</optgroup>
<optgroup label="深圳">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</optgroup>
</select>
</p>
<!-- 上传多个文件标签-->
<p>文件
<input type="file" multiple>
</p>
<!-- 大段文本标签-->
<p>自我介绍:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<!--刷新框 用户选择提交数据 重置 -->
<p><input type="submit" value="注册">
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>点我</button>
</p>
</form>
</body>
</html>
效果图
8）验证表单提交的数据
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()
---用户输入内容 提交到后端 后端接收
#01 添加后端地址
<form action="http://127.0.0.1:5000/index/" method="=post" enctype="multipart/form-data" >
#02 后端日志打印
127.0.0.1 - - [31/Oct/2023 15:04:03] "GET /index/?username=cdscdsc&passwd=&gender=female&hobby=basketball&hobby=watching&province=sh&character=cang&character=daji&myfile=1695197807408.jpg&info= HTTP/1.1" 200 -
b''
CombinedMultiDict([ImmutableMultiDict([('username', 'cdscdsc'), ('passwd', ''), ('gender', 'female'), ('hobby', 'basketball'), ('hobby', 'watching'), ('province', 'sh'), ('character', 'cang'), ('character', 'daji'), ('myfile', '1695197807408.jpg'), ('info', '')])])
9）用户选择标签需要加 value值
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">
10）限制，默认，只读
# 针对用户输入的标签。如果你加了value 那就是默认值
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>
value="默认值"
disable 禁用
readonly只读
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>注册页面</h1>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<p>
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值" readonly></label>
</p>
<p>
<label for="d2">password:<input type="password" id="d2" name="password"></label>
</p>
<p>
看不到我<input type="hidden">
</p>
<input type="hidden" name="usernamename" value="骗子账户">
<p>birthday:
<input type="date">
</p>
<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>
<!-- <p>前女友:-->
<!-- <select name="" id="" multiple>-->
<!-- <option value="" selected>新垣结衣</option>-->
<!-- <option value="" selected>斯佳丽</option>-->
<!-- <option value="">明老师</option>-->
<!-- </select>-->
<!-- </p>-->
<p>province1:
<select name="" id="">
<optgroup label="上海">
<option value="">浦东</option>
<option value="">黄埔</option>
<option value="">青浦</option>
</optgroup>
<optgroup label="北京">
<option value="">朝阳</option>
<option value="">昌平</option>
<option value="">沙河</option>
</optgroup>
<optgroup label="深圳">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</optgroup>
</select>
</p>
<p>文件:
<input type="file" multiple name="myfile">
</p>
<p>自我介绍:
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<input type="submit" value="注册">
<!-- 当你没有指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致-->
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>点我</button>
</form>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）