【目录】 标签&标签属性
1、HTML 注释
2、HTML 文档基础结构
3、head 内常用标签
link 链接标签
meta 信息标签
4、body 内常用标签
常用文本标签
特殊符号
div / span 分块标签
a 标签
img 标签
list 列表标签
table 表格标签
form 表单标签
0、前端预备知识
HTTP协议：https://www.cnblogs.com/linhaifeng/p/8243379.html
https://www.cnblogs.com/linhaifeng/category/1263978.html
1、HTML 注释 （选中内容或者光标置于注释行，快捷键 ctrl+/ ）
# 注释:注释是代码之母# 由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找：导航条所有的html代码 左侧菜单栏的HTMl代码
2、HTML 文档基础结构 （编辑器里 搭建HTML格式文件 !(英文感叹号)+tab ）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle>head><body>body>html>
3、head 内常用标签
# 1 网页标题<title>Titletitle>
# 2 css 样式<style>
h1 {
color: greenyellow;
}style> 内部用来书写css代码<link rel="stylesheet" type="text/css" href="mycss.css"> 可引入外部css文件
# 3 网站的图标<link rel="icon" type="images/x-icon" href="https://www.baidu.com/favicon.ico"># 4 js 代码<script> alert(123)script> 内部用来书写js代码<script type="text/javascript" src="myjs.js">script> 可引入外部js文件
# 5 网站描述关键字/文本<meta name="keywords" content="教育,Python培训,Linux培训,网络安全培训,Go语言培训,
人工智能培训,云计算培训,
Linux运维培训,Python自动化运维,Python全栈开发,IT培训">
link 标签
# 属性 href = " 链接地址 "
# 引入外部css文件 <link rel="stylesheet" type="text/css" href="style.css">link> #网站网址小图标<link rel="shortcut icon" type="images/x-icon" href="http://www.baidu.com/favicon.ico">
meta标签
Meta标签介绍：
元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的。
meta标签的组成：
meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性：
相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
指定文档的编码类型(需要知道)--><meta http-equiv="content-Type" charset=UTF8"> 2秒后跳转到对应的网址，注意引号(了解)--><meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">告诉IE以最高级模式渲染文档(了解)--><meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性:
主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"><meta name="description" content="老男孩教育Python学院">
#1、指定字符集<meta charset="gbk">#2、页面描述<meta name="Description" content="具体描述。。。">#3、关键字：有助于搜索引擎SEC优化，再怎么优化也抵不过竞价排名<meta name="Keywords" content="网易，邮箱，游戏，新闻">#4、3秒后跳转<meta http-equiv="refresh" content="3,http://www.baidu.com"> #5、三秒刷新<meta http-equiv="refresh" content="3">
4、body内常用标签
【补充】
标签默认具有的两个重要属性
1.id值
类似于标签的身份证号，在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承，一个标签可以继承多个class值
标签既可以有默认的属性，也可以有自定义的属性
<p id="d1" class="c1" username="jason" password="123">p>
编辑器里快速编辑标签的技巧——开始标签的后半部分+tab 键（部分编辑器支持）
例如：span 标签
span>（然后按tab键） 最后效果如下：
（1）格式排版/文本标签
格式排版标签
文本标签
一下文本标签 作为了解--><cite> 用于引证、举例、(标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)通常为斜体字<dfn> 定义一个定义项目<code> 定义计算机代码文本<samp> 定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签。<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。<abbr> 定义缩写 配合title属性 (IE6以上)<bdo> 来覆盖默认的文本方向 dir属性 值: lrt rtl<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。<small> 标签定义小型文本（和旁注）<b> 粗体字标签 根据 HTML 5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。<i> 斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。<u> 下划线字体标签 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。 请尽量避免使用 <u> 为文本加下划线，用户会把它混淆为一个超链接。<s> 删除线<q> 签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字)<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。(大段文字) (块状元素)<address> 定义地址 通常为斜体 (注意非通讯地址) 块状元素<font> H5已删除 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息<tt> H5已删除 打字机文字<big> H5已删除 大型字体标签<acronym> H5已删除 首字母缩写 请使用<abbr>代替<bdi> H5新增 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。(经测试,各大浏览器都不起作用)<mark> H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面<meter> H5新增 定义预定义范围的度量<progress> H5新增 标签标示任务的进度（进程）<time> H5新增 定义时间和日期 <wbr> H5新增 规定在文本中的何处适合添加换行符。Word Break Opportunity
其他文本标签
html5中推出了一些新的标签：
strong == b ins == u em == i del == s 新的标签是有语义的，而老的只是单纯的添加样式（这是CSS干的事） strong的语义：定义重要性强调的文字 ins的语义（inserted）：定义插入的文字 em的语义（emphasized）：定义强调的文字 del的语义（deleted）：定义被删除的文字
（2）特殊符号
HTML 特殊符号编码对照表
空格> 大于号< 小于号& & ¥ ¥ 人民币符号© © 版权® ® 商标
（3）分块标签
div 块儿级标签
span 行内标签上述的两个标签是在构造页面初期最常使用的, 主要通过 CSS样式为其赋予不同的表现。
# 页面的布局一般先用div和span占位之后再去调整样式
尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可
而普通的文本先用span标签
关于标签嵌套：
通常,块级元素 可以包含 内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含 块级标签，p标签也不能包含 p标签。
（4）img 标签
# 图片标签
#【属性】
src=" 图片路径"
1.图片的路径 可以是本地的也可以是网上的
2.url:自动朝该url发送get请求获取数据(什么是URL？URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。)
alt="图片描述信息"
当图片加载不出来的时候 给图片的描述性信息title="鼠标悬浮停留时，自动提示信息"
当鼠标悬浮到图片上之后 自动展示的提示信息height="800px"
width=""高度和宽度当你只修改一个的时候 另外一个参数会自动等比例缩放；
如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
#1、用法<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />#2、注意 2.1 src指定的图片地址可以是网络地址，也可以是一个本地地址，本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的 2.2 图片的格式可以是png、jpg和gif 2.3 alt="图片加载失败时显示的内容" 为img标签加上该属性可用于支持搜索引擎和盲人读屏软件。 2.4 title = "鼠标悬停到图片上时显示的内容" 2.5 如果没有指定图片的width和height则按照图片默认的宽高显示，如果指定图片的width和height则可能让图片变形 那如果又想指定宽度和高度，又不想让图片变形，我们可以只指定宽度和高度的一个值即可 只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形
详细讲解
（5）a 标签——标记一个内容为超链接，全称anchor，锚
# 链接标签
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""# 属性
href=" "
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置target=" "
默认a标签是在当前页面完成跳转 target="_self"新建页面跳转 target="_blank"
title="鼠标悬浮停留时，自动提示信息"
当鼠标悬浮到图片上之后 自动展示的提示信息去除a标签内的文本下划线
style="text-decoration:none;"
# a标签的锚点功能
eg:点击一个文本标题 页面自动跳转到标题对应的内容区域# 方法一：使用a标签的 href 和 id 属性 <a href="" id="d1">顶部a> # href 后面不写内容，则有刷新效果--》也是回到顶部的效果<h1 id="d111">hello worldh1><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># 方法二：使用 a 标签的 href 和 name 属性 <p> <a href="#p1" style="color: darkseagreen;text-decoration:none;font-size:18px">八个八a>p> # 点击’八个八‘，会跳转到下方指定位置 <p> <a href="#p2" style="color: darkseagreen;text-decoration:none;font-size:18px">八 用户与程序交互a>p> # 点击’用户与程序交互‘，会跳转到下方指定位置……<p>1111111111p><p>1111111111p><a href="" name="p1">a><p style="color: red">八个八-来这里p>……<p>1111111111p><a href="" name="p2">a><p style="color: green">八 用户与程序交互-来这里p><p>1111111111p><p>1111111111p><p>1111111111p>……<a href="">跳到首页a> #有刷新效果<a href="#">跳到首页a> # 没有刷新效果
# 注意点： 通过我们的a标签跳转到指定的位置，是没有过渡动画的， 是直接一下子就跳转到了指定位置； 如果跳到首页需要过渡动画，则不用a标签做。# 假链接(占位作用)
#1、什么是假链接？就是点击之后不会跳转的链接，我们称之为假链接#2、假链接存在的意义：在企业开发前期，其他界面都还没有写出来， 那么我们就不知道应该跳转到什么地方，所以就只能使用假链接来代替#3、假链接的定义格式# 效果也是回到顶部，但是没有刷新效果<a href="#">假链接# 点击以下链接，页面没有任何反应。 因为还没有指定点击事件的动作。因此 可以使用这个假链接，（使用js代码）定制指定事件动作<a href="javascript:">假链接
#1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片a>#2、注意： 2.1 a标签不仅可以标记文字，也可以标记图片 <a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道a>2.2 a标签必须有href属性，href的值必须是http://或https://开头 2.3 a标签还可以跳转到自己的页面 <a href="template/aaa.html">锤你胸口a>2.4 target="_blank"代表在新页面中打开，其余的值均无需记忆， 如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置 <base target="_blank"> 如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置 2.5 title="鼠标悬浮显示的内容"
详解版
（6）列表标签
无序列表(使用较多) —— 快捷语法 ul>li*4
<ul> <li>第一项li> <li>第二项li> <li>第二项li> <li>第二项li>ul>虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
有序列表(了解) —— 快捷语法 ol>li*3
<ol type="1" start="5"> <li>111li> <li>222li> <li>333li>ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
标题列表(了解) （可嵌套在无序/有序列表里）
<dl> <dt>标题1dt> <dd>内容1dd> <dt>标题2dt> <dd>内容2dd> <dt>标题3dt> <dd>内容3dd>dl>
<ol> <li> <dl> <dt>标题1dt> <dd>内容1dd> <dt>标题2dt> <dd>内容2dd> <dt>标题3dt> <dd>内容3dd> dl> li> ol>
1、无序列表（列表标签中使用最多的一种，非常重要）：unordered list
#1、作用：
制作导航条、商品列表、新闻列表等
#2、组合使用ul>li <ul>
<li>秒杀li>
<li>优惠券li>
<li>PLUS会员li>
<li>闪购li>
<li>拍卖li>
<li>京东服饰li>
<li>京东超市li>
<li>生鲜li>
<li>全球购li>
<li>京东金融li>
ul>#3、ul标签的属性type（这属于列表的样式，所以了解即可）
type：列表标识的类型
disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识
可以通过css直接去掉小圆点<style type="text/css">
ul {
list-style: none;
}style>#4、注意
ul与li是组合标签应该一起出现，并且ul的子标签只应该是li，而li的子标签则可以是任意其他标签
2、有序列表（极少使用） <h1>智商排名h1>
<ol>
<li>Egonli>
<li>刘清正li>
<li>武佩奇li>
<li>alexli>
<li>元昊li>
ol>
有序列表能干的事，完全可以用无序列表取代-->
<h1>智商排名h1>
<ul style="list-style: none">
<li>1. Egonli>
<li>2. 刘清正li>
<li>3. 武佩奇li>
<li>4. alexli>
<li>5. 元昊li>
ul>自定义列表（也会经常使用）
复制代码
#1、作用分析
选择用什么标签的唯一标准，是看文本的实际语义，而不是看长什么样子
无序列表：内容是并列的,没有先后顺序
有序列表：内容是有先后顺序的
自定义列表：对一个题目进行解释说明的时候，用自定义列表,可以做网站尾部相关信息，网易注册界面的输入框
#2、自定义列表也是一个组合标签：dl>dt+dd
dl:defination list，自定义列表
dt：defination title，自定义标题
dd：defination description，自定义描述<dl>
<dt>自定义标题1<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
<dt>自定义标题2<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
<dt>自定义标题3<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>dl>
#3、注意:
3.1 dl>dt+dd应该组合出现，dl中只应该存放dt和dd，而可以在dt和dd中添加任意其他标签
3.2 一个dt可以没有对应的dd，也可以有多个，但建议一个dt对应一个dd详解版
（7）table 表格标签
表格标签表头表单数据一个就是一行加粗文本，一般用于表头标题正常文本，一般用于其他表格内容 属性（一般加在 开始标签里）加外边框水平方向占2个单元格（合并同一行中的单元格）垂直方向占2个单元格（合并同一列中的单元格）--> <table> /* 表格标签里，由<thead>thead>和<tbody>tbody> 组成*/ <thead> <tr> <th>uernameth> <th>passwordth> tr> thead> <tbody> <tr> <td>militd> <td>1314td> tr> <tr> <td>cctd> <td>520td> tr> tbody> table>
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
#1、宽度和高度 可以给table和td设置width和height属性 1.1 默认情况下表格的宽高是按照内容的尺寸来调整的，也可以通过给table标签设置widht和height来手动指定表格的宽高 1.2 如果给td标签设置width和height属性，会修改当前单元格的宽度和高度，只要不超过table的宽高，则不会影响整个表格的宽度和高度#2、水平对齐和垂直对齐 水平对齐align可以给table、tr、td标签设置 垂直对齐valign只能给tr、td标签设置 ========水平对齐=========== 取值 align=“left” align=“center” align=“right” 2.1 给table标签设置水平对齐，可以让表格在水平方向上对齐 强调：table只能设置水平方向 2.2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐 2.3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准 ========垂直对齐=========== 取值 valign=“top” valign=“center” valign=“bottom” 2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐 2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐#3、外边距和内边距 只能给table设置 3.1 外边距：单元格与单元格之间的间隔，cellspacing="3px"，默认值为2px 3.2 内边距：单元格边框与文字之间的距离:cellpadding="200px" 表格属性（了解知识点）
表格属性
#1、方式一 在标签中，想通过指定外边距为0来实现细线表格是不靠谱的，其实他是将2条线合成了一条线.所以看上去很不舒服,如下实现<table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px"><tr bgcolor="white">姓名性别年龄<tr bgcolor="white" >Egonmale18<tr bgcolor="white">ALexmale73<tr bgcolor="white">Wxxfemale84#2、方式二 细线表格的制作方式： 1、给table标签设置bgcolor 2、给tr标签设置bgcolor 3、给table标签设置cellspacing="1px" 注意： table、tr、td标签都支持bgcolor属性<table width="200px" height="200px" bgcolor="black" cellspacing="1px"><tr bgcolor="white">姓名性别年龄<tr bgcolor="white" >Egonmale18<tr bgcolor="white">ALexmale73<tr bgcolor="white">Wxxfemale84#3、方式三（style="border-collapse: collapse;border: 1px solid red"）<table border="1px" style="border-collapse: collapse;border: 1px solid red">姓名性别年龄egonmale18alexfemale19
三种方式制作细线表格
为了方便管理维护以及提升语义，我们将表格中存储的数据分为四类： #1、表格的标题:caption 特点:相对于表格宽度自动居中对齐 注意: 1.1 该标签一定要写在table标签里，否则无效 1.2 caption一定要紧跟在table标签内的第一个 #2、表格的表头信息:thead 特点：专门用来存储每一列的标题，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字 #3、表格的主体信息:tbody 注意： 3.1 如果没有添加tbody，浏览器会自动添加 3.2 如果指定了thread和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着 表格的高度变化而变化 #4、表尾信息:tfoot<html><head> <meta charset="utf-8"/>head><body> <table bgcolor="black" border="1" width="300px" height="300px" cellspacing="1px"> <caption>学员信息统计caption> <thead> <tr bgcolor="white"> <th>姓名th> <th>性别th> <th>年龄th> tr> thead> <tbody> <tr bgcolor="white"> <td>egontd> <td>maletd> <td>18td> tr> <tr bgcolor="white"> <td>egontd> <td>maletd> <td>18td> tr> <tr bgcolor="white"> <td>egontd> <td>maletd> <td>18td> tr> tbody> <tfoot> <tr bgcolor="white"> <td>3td> <td>3td> <td>3td> tr> tfoot> table>body>html> 表格结构详解
表格完整结构
#1、水平向上的单元格 colspan --合并列 可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待 <td colspan="2">td>#2、垂直向上的单元格 rowspan --合并行 可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待 #注意注意注意: 1、由于把某一个单元格当作了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格 2、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并
表格合并
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点： #1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0 #2、单元格里面嵌套表格 #3、单元格中的元素和嵌套的表格用align和valign设置对齐方式 #4、通过属性或者css样式设置单元格中元素的样式 传统布局目前应用： #1、快速制作用于演示的html页面 #2、商业推广EDM制作(广告邮件) 传统布局
传统布局的技巧
（8）form 表单标签
https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911#map
form 标签的属性:
属性 描述 accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。 action 规定向何处提交表单的地址（URL）（提交页面）。 autocomplete 规定浏览器应该自动完成表单（默认：开启）。 enctype 规定被提交数据的编码（默认：url-encoded）。 method 规定在提交表单时所用的 HTTP 方法（默认：GET）。 name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 novalidate 规定浏览器不验证表单。 target 规定 action 属性中地址的目标（默认：_self）。
input 标签的属性:
name：表单提交时的“键” key ，注意和id的区别。----> key
value：表单提交时对应项的值checked：radio和checkbox默认被选中的项 ----> value
type="button", "reset", "submit"时，为按钮上显示的文本年内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
readonly：text和password设置只读
disabled：所有input均适用
placeholder：后面加上提示信息-placeholder='请输入密码：'
input 标签的 type属性值:
type属性值 表现形式 对应代码 text 单行输入文本 <input type=text" /> password 密码输入框 date 日期输入框 checkbox 复选框 radio 单选框 submit 提交按钮 reset 重置按钮 button 普通按钮 hidden 隐藏输入框 file 文本选择框
select 标签的属性：
multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
textarea 标签的属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用
【补充】
在form内还可以添加一种标签：
示例代码
<form action=""> 用户输入框 --> <p> <label for="d1">username:<input type="text" id="d1" placeholder="请输入用户名：">label> p > <p> <label for="d2">password:<input type="password" id="d2" placeholder="请输入密码：">label> p > 日期选择功能 --> <p>birthday: <input type="date"> p > input标签-单选 (将 name 的值设为一样的，就可实现 单选) --> <p>gender: <input type="radio" name="gender">男 <input type="radio" name="gender" checked>女 <input type="radio" name="gender">其他 p > input标签-多选 --> <p>hobby: <input type="checkbox">read <input type="checkbox" checked>DBJ <input type="checkbox" checked>JBD <input type="checkbox">hecha p > select标签-单选 --> <p>province： <select name="" id=""> <option value="">上海option> <option value="" selected>北京option> <option value="">深圳option> select> p > select标签-多选 使用 multiple 属性 --> <p>前女友: <select name="" id="" multiple> <option value="" selected>新垣结衣option> <option value="" selected>斯佳丽option> <option value="">明老师option> select> p > select标签-多级单选列表 嵌套标签 --> <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="">111option> <option value="">222option> <option value="">333option> optgroup> select> p > 上传文件 multiple属性可支持用户能上传多种文件 --> <p>文件: <input type="file" multiple> p > 文本输入框 --> <p>自我介绍: <br> <textarea name="" id="" cols="30" rows="10">textarea> p > <input type="submit" value="注册"> 当你没有使用 value属性 指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致--> <input type="button" value="按钮"> <input type="reset" value="重置"> <button>点我button> form>
使用python 本地后端接收表单信息（了解即可）
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()表单HTML 的form 需要加上相应属性：
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
