[前端、HTTP协议、HTML标签]

什么是前端

"""

任何与用户直接打交道的操作界面都可以称之为前端

比如:电脑界面 手机界面 平板界面

什么是后端

	后端类似于幕后操作者(一堆让人头皮发麻的代码)

	不直接跟用户打交道

"""

为什么学前端

"""

因为我们是全栈开发工程师

	但是前端这一块我们不会学的很详细

	只要求做到能够看得懂基本的前端代码以及能够搭建一些简单的页面即可

	先打下前端的基础 为后续可能需要扩展做准备

"""

前端学习历程

HTML:网页的骨架 没有任何的样式

CSS:给骨架添加各种样式 变得好看

JS:控制网页的动态效果

前端框架:BOOTSTRAP、JQuery、Vue

  	提前给你封装好了很多操作 你只需要按照固定的语法调用即可

软件开发架构

cs  客户端 服务端

bs  浏览器 服务端

ps:bs本质也是cs

浏览器窗口输入网址回车发生了几件事

"""

1 浏览器朝服务端发送请求

2 服务端接受请求(eg:请求百度首页)

3 服务端返回相应的响应(eg:返回一个百度首页)

4 浏览器接收响应 根据特定的规则渲染页面展示给用户看

"""

浏览器可以充当很多服务端的客户端

	百度 腾讯视频 优酷视频....

如何做到浏览器能够跟多个不同的客户端之间进行数据交互？

	1.浏览器很牛逼 能够自动识别不同服务端做不同处理

  2.制定一个统一的标准 如果你想要让你写的服务端能够跟客户端之间做正常的数据交互

  那么你就必须要遵循一些规则

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:统一资源定位符(大白话 网址)

HTML介绍

Htyper Text Markup Language 即超文本标记语言。

超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记语言: 标记（标签）构成的语言。

本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染页面给用户看，这个规则就是HTML。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）

html固定的文档结构组织，标准模板：

复制<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

</body>

</html>

1. <!DOCTYPE html>声明为HTML5文档。

2. <html></html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。html的lang属性

                可用于网页或部分网页的语言。通常用于搜索引擎和浏览器的统计分析,不定义也没什么影响根据W3C推荐标准，应该通过 <html>

                标签中的lang属性对每张页面中的主要语言进行声明，比如：<html lang="en"></html>

3. <head></head>标签用于定义文档的头部，它是所有头部元素的容器。它们之间的内容不会在浏览器的文档窗口显示，

                但是其间的元素有特殊重要的意义。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，

4. <title></title>定义了网页标题，在浏览器标题栏显示。

5. <body></body>之间的文本是可见的网页主体内容，最终会在浏览器窗口中显示出来。

注意：对于中文网页需要使用<meta charset="UTF-8">声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，

	 则你需要设置为<meta charset="gbk">

HTML标签

HTML标签格式：

- HTML标签是由尖括号包围的关键字通常是成对出现，比如：开始标签<div>和结束标签</div>，

  结束标签会有个左斜杠。两个标签之间的部分我们叫做标签体

- 有一些标签是单独呈现的，这种标签叫做自闭和标签，比如：<br/>、<hr/>、<img src="1.jpg" />等。

- 标签里面可以有若干属性，也可以不带属性。

- 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写

- 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b> 

HTML标签的语法：

<标签名 属性1=“属性值1” 属性2=“属性值2”…… >内容部分</标签名>

<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

HTML中标签分类：单从是否可以嵌套子标签的角度去分，标签分为两类

1、容器类标签：可以简单的理解为能嵌套其它所有标签的标签。

 常见容器级的标签:

    h系列

    ul>li

    ol>li

    dl>dt+dd

    div

2、文本类标签：对应容器级标签，只能嵌套文字/图片/超链接的标签。

常见文本级的标签:

    p

    span

    strong

    em

    ins

    del

HTML注释：

# 1.单行注释：

<!--单行注释-->

# 2.多行注释：

<!--

注释1

注释2

-->

一般情况下 html的注释都会按照下面的方式书写

<!--导航条样式开始-->

<!--导航条样式结束-->

HTML几个很重要的属性：

id：定义标签的唯一ID，HTML文档树中唯一

class：为html元素定义一个或多个类名（classname）(CSS样式类名)

style：规定元素的行内样式（CSS样式）

Head内常用标签

<head>

      head存放的内容用户是看不到的，主要是给浏览器和搜索引擎看的

</head>

常用标签

<title></title> 定义网页标题，在浏览器标题栏显示

<script></script> 定义JS代码或引入外部JS文件

<style></style> 定义内部样式，内部支持写CSS代码

<meta/> 定义网页原信息

<link/> 引入外部样式表文件或网站图标

Meta标签

# 1、指定字符集

<meta charset="UTF-8">

# 2、Description（搜索到网站后显示的网页内容描述）

<meta name="Description" content="具体描述。。。">

# 3、Keywords（搜索关键字，用于搜索引擎抓取信息的显示，有助于搜索引擎SEC优化）

<meta name="Keywords" content="网易，邮箱，游戏，新闻">

# 4、refresh（网页刷新，以秒为单位）3秒后自动跳转

<meta http-equiv="refresh" content="3,http://www.baidu.com">

# 5、三秒刷新

<meta http-equiv="refresh" content="3">

注：http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确

   地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

   name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索

   引擎查找信息和分类信息用的。

非meta标签

#1、标题

<title>百度一下，你就知道</title>

#2、网站的图标

<link rel="icon" href="https://www.baidu.com/favicon.ico">

#3、定义内部样式

<style></style>

#4、引入外部样式文件

<link rel="stylesheet" href="mystyle.css">

#5、定义JavaScript代码或引入JavaScript文件

<script src="hello.js"></script>

body内常用标签

body中的标签是会显示到浏览器窗口中的，body内的标签只有一个作用就是用来标记语义的，语义指的是从字面意思就可以理解被标记的内容是用来做什么的

基本标签

<b>加粗</b>

<i>斜体</i>

<u>下划线</u>

<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

<!--换行-->

<br>

<!--分隔线-->

<hr>

<!--修改文字大小，颜色-->

<font>

     <font color="red" size="10px">我是哈哈哈</font>

特殊符号

    空格 -----------------  &nbsp;

    >   -----------------  &gt;

    <   -----------------  &lt;

    &   -----------------  &amp;

    ¥   -----------------  &yen;

    版权 -----------------  &copy;

    注册 -----------------  &reg;

HTML特殊符号对照表

div 块级标签

独占一行
块级标签能够嵌套块儿级标签和行内标签
p标签虽然是块儿级标签但是它不能嵌套任何的块儿级标签
块级标签能够设置长宽

<div>

     内容

</div>

sqan 行内标签

自身内容有多的就占多大
行内标签不能设置长宽

注：块级标签可以设置长宽，行内标签不能设置长宽

<span>

      内容

</span>

h标题标签

标记内容为一个标题，全称headline

p段落标签

段落标签. 标记内容为一个段落，包裹的内容被换行.并且也上下内容之间有一行空白.全称paragraph

style="text-indent: 2em"  可以设置样式为首行缩进两个字符。

<blockquote></blockquote>  可以用来设置整个段落的缩进。

    <!DOCTYPE html>

    <html lang="en">

        <head>

            <meta charset="UTF-8">

            <title>标签</title>

        </head>

        <body>

        <h2>egon赋</h2>

        <p>论颜值，鹤立鸡群</p>

        <p>论实力，天下无敌</p>

        </body>

    </html>

img标签

行级标签，用来显示图片，全称image

重要属性有：src、title、alt、width、height、align。

 src   图片地址。指定的图片地址可以是网络地址，也可以是一个本地地址，本地地址可以用绝对或相对路径，

       但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的

 title 鼠标悬浮在图片上的文字。

 alt   图片找不到时要替换的文字。如果图片资源使用的是外网资源，则不会显示要替换的文字。

       如果使用的是本网站的资源（相对路径给出），则找不到图片时会显示替换的文字，并保留图片设置的宽高结构。

 align 图片周围文字的垂直对齐情况。常用的属性值有：top（与图片的顶部对齐）、middle（与图片的中部对齐）、

                                               bottom（默认，与图片的底部对齐）。

 width  图片的宽

 height  图片的高 (宽高两个属性只用一个会自动等比缩放.)

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

    </head>

    <body>

    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">

    <br>

    <img src="img/1.jpg" alt="">

    <br>

    <img src="img/2.jpg" alt="图片被怪物吃掉">

    <br>

    <img src="img/1.jpg" alt="" title="这是一个美女">

    <br>

    <img src="img/1.jpg" alt="" width="300px" height="100px" >

    <br>

    <img src="img/1.jpg" alt="" width="300px"  >

    <img src="img/1.jpg" alt="" height="300px"  >

    </body>

    </html>

a标签

超链接标签(锚标签)，全称anchor
超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转

重要属性有三个：href、target、name

    href  超链接地址：可以是Web上任意资源，包括图片，网页，样式，

      	  脚本文件等。href="#"时，表示被链接页面就是当前页面。

    target  文档打开时要显示的目标位置，属性值一般有：

      	      _blank（新窗口中打开）、

              _self（默认，在超链接所在的容器中打开）、

              _parent（在超链接的父容器中打开）、

              _top（整个容器中打开）、name（框架名称）。

    name  锚记名称。作用：跳转到文档的某个地方。返回首页。

    # 在当前页面跳转

    <a href="http://www.baidu.com">点我跳百度</a>

    # 在新页面跳转

    <a href="http://www.baidu.com" target="_blank">点我跳百我跳百度</a>

    # 点击图片跳转

    <a href="http://www.baidu.com" target="_blank"><img src="img/1.jpg" alt=""></a>

    # 鼠标悬浮内容

    <a href="http://www.baidu.com" target="_blank" title="点击下载病毒">点我跳百我跳百度</a>

    # 点击跳到首页

    <a href="index.html" target="_blank" title="点击下载病毒">点我跳到首页</a>

    # 假链接：就是点击之后不会跳转的链接，我们称之为假链接

    # 会自动跳到网页的顶部

    <a href="#" title="点击下载病毒">假连接</a>

    # 不会返回顶部

    <a href="javascript:" title="点击下载病毒">假连接</a>

页内锚点

(仅做参考，测试一定要多行演示)

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

    </head>

    <body>

    <h1>开头</h1>

    <p>哈哈哈哈</p>

    <p>哈哈哈哈</p>

    <p>哈哈哈哈</p>

    <p id="p1">位置1</p>

    <p>哈哈哈哈</p>

    <p>哈哈哈哈</p>

    <p>哈哈哈哈</p>

    <p>哈哈哈哈</p>

    <p id="p2">位置2</p>

    <p>哈哈哈哈</p>

    <p>哈哈哈哈</p>

    <h1>末尾</h1>

    <a href="#p1">跳到位置1</a>

    <a href="#p2">跳到位置2</a>

    <a href="#">跳到开头</a>

    <a href="">跳到开头</a>

    </body>

    </html>

列表标签

标记一堆数据是一个整体/列表
html中列表标签分为三种

      <ul type="disc"> :无序列表标签（列表标签中使用最多的一种，非常重要）：unordered list

          <li>:列表中的每一项

      - type属性：

          disc（实心圆点，默认值）

          circle（空心圆圈）

          square（实心方块）

          none（无样式）

      <ol> :有序列表标签(极少用到)

          <li>:列表中的每一项.

          <li>主要的属性有：type、value两个:

      - type指明项目的类型，属性值有：

          1 数字列表，默认值

          A 大写字母

          a 小写字母

          Ⅰ大写罗马

          ⅰ小写罗马

      - value表示序号值从几开始。

      <dl> ：defination list，自定义列表

      	<dt> defination title，自定义标题

      	<dd> defination description，自定义列表项（描述）

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

    </head>

    <body>

    <!--1.无序列表：ul-->

    <ul type="square">

        <li>秒杀</li>

        <li>优惠券</li>

        <li>PLUSH会员</li>

    </ul>

    <!--2.有序列表：ol-->

    <ol type="1" start="2">

        <li>秒杀</li>

        <li>优惠券</li>

        <li>PLUSH会员</li>

    </ol>

    <hr>

    <!--3.自定义列表：dl-->

    <dl>

        <dt>蔬菜</dt>

        <dd>茄子</dd>

        <dd>黄瓜</dd>

        <dd>芹菜</dd>

        <dt>水果</dt>

        <dd>苹果</dd>

        <dd>香蕉</dd>

        <dd>草莓</dd>

    </dl>

    <hr>

    <!--有序列表例子-->

    <h1>智商排名</h1>

    <ol>

        <li>egon</li>

        <li>lxx</li>

        <li>hxx</li>

        <li>yxx</li>

        <li>wxx</li>

    </ol>

    <!--无序列表也可以达到有序列表的效果-->

    <ul type="none">

        <li>1.秒杀</li>

        <li>2.优惠券</li>

        <li>3.PLUSH会员</li>

    </ul>

    <hr>

    <!--无序列表例子-->

    <ul>

        <li>

            <h2>蔬菜</h2>

            <ul>

                <li>茄子</li>

                <li>白菜</li>

                <li>土豆</li>

            </ul>

        </li>

        <li>

            <h2>水果</h2>

            <ul>

                <li>香蕉</li>

                <li>火龙果</li>

                <li>芒果</li>

            </ul>

        </li>

    </ul>

    </body>

    </html>

table表格标签

标记一段数据为表格
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。

表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据

表的基本结构：

      <table>          <tr>              <th>姓名</th>              <th>年龄</th>              <th>智商</th>          </tr>          <tr>              <td>alex</td>              <td>73</td>              <td>70</td>          </tr>          <tr >              <td>egon</td>              <td>18</td>              <td>200</td>          </tr>      </table>

表格标签：

  <tr>：表格的数据行，table row  <td>：显示表格内容的单元格，table data cell  <th>：表头名称单元格,与<td>不同在于文字采用加粗居中的形式显示，table head cell  <caption>：表格的标题  <thead>：表格头部，使结构更加分明  <tbody>：表格主体部分，使结构更加分明  <tfoot>:表格尾部

表格属性:

border: 表格边框.（默认情况下这个属性的值为0，所以看不到边框）
cellpadding：内边距.
cellspacing：外边距.
width：像素百分比.（最好通过css来设置长宽）
rowspan：单元格竖跨多少行
colspan：单元格横跨多少列（即合并单元格）
align：水平对齐方式
bgcolor：背景颜色

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>阿西吧</title>    </head>    <body>    <!--细线表格    <table border="1px" width="500px" height="500px" align="center" cellspacing="0px" bgcolor="red">        <tr>            <th>姓名</th>            <th>年龄</th>            <th>智商</th>        </tr>        <tr>            <td width="300px" height="300px">geng</td>            <td>73</td>            <td>70</td>        </tr>        <tr >            <td>yang</td>            <td align="center" valign="center">18</td>            <td>200</td>        </tr>    </table>    -->        <!--完整表结构-->    <table border="1px" width="500px" height="500px" style="border-collapse: collapse;border: 1px solid red">        <caption>课程表</caption>            <thead>            <tr>                <th>名字</th>                <th>年龄</th>                <th>性别</th>            </tr>        </thead>        <tbody>            <tr>                <td>geng</td>                <td>男</td>                <td>18</td>            </tr>            <tr>                <td>yang</td>                <td>男</td>                <td>19</td>            </tr>        </tbody>        <tfoot>            <tr>                <td>sun</td>                <td>男</td>                <td>22</td>            </tr>        </tfoot>    </table>        </body>    </html>

练习:（原生的表格标签很丑，后续都是使用框架封装好的，很好看）

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>开饭啦</title>

    </head>

    <body>

    <table border="1px" width="500px" height="500px" style="border-collapse: collapse;border: 1px solid red">

        <tr>

            <th colspan="3">星期一菜谱</th>

        </tr>

        <tr>

            <th rowspan="2">素菜</th>

            <td>情操茄子</td>

            <td>花椒扁豆</td>

        </tr>

        <tr>

            <td>小葱豆腐</td>

            <td>炒白菜</td>

        </tr>

         <tr>

            <th rowspan="2">荤菜</th>

            <td>油焖大虾</td>

            <td>海参鱼翅</td>

        </tr>

        <tr>

            <td>

                红烧肉

                <img src="1.jpg" alt="" width="200px">

            </td>

            <td>烤全羊</td>

        </tr>

    </table>

    </body>

    </html>

form表单标签

表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。

表单属性

HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中。

属性：action、method、enctype

action 表单要提交的后端路径地址，用于处理表单的内容（一般是提交字典到后台的一个接口，这个接口是java写成的，提交到这个接口后后端就知道如何处理这些数据了）。

method 提交数据的方法，默认是get方式提交。

get方式提交数据:

1.提交的键值对.放在地址栏中url后面.

2.安全性相对较差.

3.对提交内容的长度有限制.

post方式提交数据:

1.提交的键值对不在地址栏.

2.安全性相对较高.

3.对提交内容的长度理论上无限制.

enctype 对表单数据进行编码，默认都是要编码的。

表单元素

<input> type 属性：

   # text 文本框输入（默认text文本框类型）。

      		autocomplete（自动完成输入的内容，要求表单元素要有name属性才有自动完成的效果，

        				 off表示自动完成不可用，on表示自动完成可用）

            disabled（设置或者获取控件的状态，默认是false即可用，等于true时不可用，不能输入内容）

　 # password  密码框。（以下属性text和password共有）

            size（指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位，

    			对于其他元素，宽度以像素为单位）

            maxlength（type为text或password时，表示输入的最大字符数），有利于防止sql的注入攻击

            readonly 只读.　

　　　　　　  placeholder 框内预置内容(灰色)，写上内容时才消失

  # radio  单选按钮。属性：

            name（将name的值设置为相同值，才表示一组数据，才能实现单选功能）

            value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）

            checked（是否被选中的状态）

  # checkbox  多选框。

            name（名字一定要一样一样的，才表示是一组数据，添加到同一value值列表提交到服务器）

            value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）

            checked（是否被选中的状态）

  # file    文件域，上传文件（不同的浏览器表现形式不同）

  # submit  提交按钮。用于提交表单。

  # reset   重置按钮。清空表单的输入，恢复到表单默认的状态。

  # button  普通按钮。一般结合javascript使用。

  # image   图片按钮，用来提交表单，与submit是一样的效果。

             src（图片路径）

　# hidden  隐藏字段。

             value（隐藏的内容）

　# color   颜色标签。value指定颜色值（采用#十六进制数表示）。

　# date    日期。value值指定默认的日期，格式为****-**-**（年月日）。

 # datetime-local  显示本地时间，value值指定默认的时间，格式为2016-05-20T11:10:10（年月日T时分秒）。 

  # number  数字向上或者向下滑动。可以填数字然后向上或者向下选择不同的值。

  # range   滑动标签。min（指定最小值）、max（指定最大值）、value（指定当前默认值）。

  #  week   每年的周数。value指定哪一年第几周，格式为2016-W25（2016年第25周）。

<textarea> 文本域标签。默认表现形式是可以输入很多行文本的文本框。

        name （表单提交项的key）

　　　　 cols（设置文本域宽度）

        rows（设置文本域高度，即行数）

<select> 下拉框标签。使用时要结合<option>子标签一起使用。

        name:表单提交项的key

        size：选项个数

        multiple：多选

        <option> 下拉选中的每一项

  				value（表单提交项的值）

  				selected（selected下拉选默认被选中）

        <optgroup> 为每一项加上分组

<label> 把元素与文本结合起来

友好设计：不只是选中复选框才能选中并打钩，要求点击对应的文字也能选中该复选框。

这种情况下要用到<label>标签的for属性（设置或获取给定标签对象指定到的对象，值=另一个元素的id号即可）

    <label for="name">姓名</label>

    <input id="name" type="text">

<fieldset> 对表单中的相关元素进行分组

        <fieldset>

            <legend>温馨提示</legend>

            <div align="middle">不要忘记点赞哦 ==</div>

        </fieldset>

value: 表单提交项的值

针对用户选择的标签，用户不需要输入内容，但是你需要提前给标签添加内容value值

对于不同的输入类型，value 属性的用法也不同：

type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值

表单演示：（注册功能）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>注册页面</h1>

<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

    <p>

        <label for="inp1">用户名:</label>

        <input id="inp1" type="text" name="username"  placeholder="请输入您的用户名">

    </p>

    <p>

        密码:

        <input type="password" name="password" value="123" disabled>

    </p>

    <p>

        爱好：

        <input type="checkbox" name="hobbies" value="打篮球">打篮球

        <input type="checkbox" name="hobbies" value="踢足球" checked>踢足球

        <input type="checkbox" name="hobbies" value="羽毛球" checked>羽毛球

    </p>

    <p>

        性别：

        <input type="radio" name="gender" value="男">男

        <input type="radio" name="gender" value="女" checked>女

        <input type="radio" name="gender" value="保密">保密

    </p>

    <p>

        出生日期：

        <input type="date" name="bitrh">

    </p>

    <p>

        邮箱：

        <input type="email" name="email">

    </p>

    <p>

        手机号

        <input type="number" name="phone">

    </p>

    <p>

        头像

        <input type="file" name="myfile.png" multiple>

    </p>

    <p>

        <textarea name="comment" id="" cols="50" rows="20" style="resize: none">

        </textarea>

    </p>

    <p>

        <select name="addr" size="5" multiple>

            <optgroup label="一线城市">

                <option value="深圳">深圳</option>

                <option value="上海">上海</option>

                <option value="北京">北京</option>

                <option value="广州" selected>广州</option>

            </optgroup>

            <optgroup label="二线城市">

                <option value="宁波">宁波</option>

                <option value="昆明">昆明</option>

                <option value="厦门">厦门</option>

                <option value="济南" selected>济南</option>

            </optgroup>

        </select>

    </p>

    <p>

        <input type="submit" value="注册">

        <input type="button" value="按钮" onclick="alert(123)">

        <input type="reset" value="重置">

    </p>

</form>

</body>

</html>

验证form表单提交数据

# 后端框架初识，看下效果即可

IDE下载：pip3 install FLASK

# form表单默认提交数据的方式是get请求 数据是直接放在url后面的

  http://127.0.0.1:5000/index/?username=dasda&gender=on

# 可以通过method指定提交方式

<form action="http://127.0.0.1:5000/index/" method="post">

form表单提交文件需要注意：

	1.method必须是post

    2.enctype="multipart/form-data"

    	enctype类似于数据提交的编码格式

        默认是urlencoded 只能够提交普通的文本数据

        formdata 既可以支持提交文本数据，还可以支持提交文件数据

下面的代码无需掌握，只需了解form表单即可：

"""

# py实现后端文件

from flask import Flask,request

# 当前url既可以支持get请求也可以支持post请求，如果不写默认只能是get请求

app = Flask(__name__)

@app.route('/index/',methods=['GET','POST'])

def index():

    print(request.form) # 获取form表单提交过来的非文件数据

    print(request.files) # 获取文件数据

    file_obj = request.files.get('myfile.png')

    file_obj.save(file_obj.name) # 保存拿到的文件

    return 'OK'

app.run()

"""

[参考链接：https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911 ](