07·灵魂前端工程师养成-HTML重难点

2019-05-03 分类:HTML, 前端开发 阅读(55) 评论(0)

-曾老湿, 江湖人称曾老大。
-笔者QQ:133411023、253097001
-笔者交流群:198571640
-笔者微信:z133411023


-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。
-擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。
-devops项目经理兼DBA。
-开发过一套自动化运维平台(功能如下):

1)整合了各个公有云API,自主创建云主机。
2)ELK自动化收集日志功能。
3)Saltstack自动化运维统一配置管理工具。
4)Git、Jenkins自动化代码上线及自动化测试平台。
5)堡垒机,连接Linux、Windows平台及日志审计。
6)SQL执行及审批流程。
7)慢查询日志分析web界面。


HTML 前戏


HTML所需英文单词
英语 翻译
hyper 超级
target 目标
reference 引用
frame 边框,框架
error 错误
blank 空白
parent 父母之一
self 自己
load 加载
canvas 画布

a标签介绍


a标签

a标签特别长用,但是很多人并不会使用。

属性:
1.href
2.target
3.download
4.rel=noopener

作用:
跳转外部页面
跳转内部锚点
跳转到邮箱或电话等

在VScode中,写完代码,直接启动http服务,打开页面

#安装http
MacBook-Pro:html-demo-2 driverzeng$ yarn global add http-server
MacBook-Pro:html-demo-2 driverzeng$ http-server -c-1
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.1.103:8080
  http://192.168.1.107:8080
  
#安装 parcel
MacBook-Pro:html-demo-2 driverzeng$ yarn global add parcel

写一个a标签,设置超链接,此时会直接在当前窗口打开新的页面。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.driverzeng.com">超链接</a>
  </body>
</html>

使用target指定开启的位置

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.driverzeng.com" target="_blank">超链接</a>
  </body>
</html>

a标签的href


a标签href的取值

网址:
1.https://www.driverzeng.com

  <body>
    <a href="https://www.driverzeng.com" target="_blank">超链接</a>
  </body> 

2.http://www.driverzeng.com

  <body>
    <a href="http://www.driverzeng.com" target="_blank">超链接</a>
  </body> 

3.//driverzeng.com

  <body>
    <a href="//driverzeng.com" target="_blank">超链接</a>
  </body> 

路径:
1./a/b/c/c.html

  <body>
    <a href="/a/b/c/c.html" target="_blank">超链接</a>
  </body> 

2.a/b/c/index.html

  <body>
    <a href="a/b/c/c.html" target="_blank">超链接</a>
  </body> 

3.index.html 或者 ./index.html

  <body>
    <a href="./index.html" target="_blank">超链接</a>
  </body> 

伪协议:

1.JavaScript伪协议

  <body>
    <a href="javascript:alert(1);">Javascript伪协议</a>
  </body>

产品经理需求,一个什么都不做的a标签

  <body>
    <a href="javascript:;">查看</a>
  </body>

在VScode中,输入p{$}*30就可以瞬间出现1-30的数字,竖着排列在页面上,我们来测试下面功能

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <p>1</p>
    <p id="xxx">2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <p>19</p>
    <p>20</p>
    <p>21</p>
    <p>22</p>
    <p>23</p>
    <p>24</p>
    <p>25</p>
    <p>26</p>
    <p>27</p>
    <p>28</p>
    <p>29</p>
    <p>30</p>
    <a href="https://www.driverzeng.com" target="_blank">超链接</a>
    <a href="/a/b/c/c.html" target="_blank">c.html</a>
    <a href="javascript:alert(1);">Javascript伪协议</a>
    <a href="javascript:;">查看</a>
    <a href="#">回到顶部</a>
    <a href="#xxx">跳转到xxx</a>
  </body>
</html>

2.mailto:邮件伪协议

    <a href="mailto:253097001@qq.com">发邮件给曾老湿</a>

自动呼出邮件工具

3.tel:手机号 打电话伪协议

    <a href="tel:13023456784">打电话给xxx</a>

a标签的target

先写一个iframe页面,页面中嵌套 页面。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body style="background-color: blue;color:gold;">
    我是 iframe
  </body>
</html>

在target中调用 页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.driverzeng.com">博客</a>
    <a href="https://www.driverzeng.com" target="_blank">博客在新窗口打开</a>
    <a href="https://www.driverzeng.com" target="_self">博客在当前窗口打开</a>
    <a href="https://www.driverzeng.com" target="_top">博客在顶级窗口打开</a>

    <div>
      <iframe src="a-target-iframe.html" frameborder="0"></iframe>
    </div>
  </body>
</html>


当前页面打开新页面

target _self

  <body style="background-color: blue;color:gold;">
    我是 iframe
    <a href="https://www.driverzeng.com" target="_self">当前页面打开 博客</a>
  </body>


顶级页面打开

target _top

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body style="background-color: blue;color:gold;">
    我是 iframe
    <a href="https://www.driverzeng.com" target="_top">当前页面打开 博客</a>
  </body>
</html>

父级窗口打开

再写一个iframe页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body style="background-color: greenyellow;color:red;">
    我是 iframe2
    <a href="https://www.driverzeng.com" target="_parent">父级页面打开 博客</a>
  </body>
</html>

然后在第一个iframe页面中,调用第二个iframe

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body style="background-color: blue;color:gold;">
    我是 iframe
    <a href="https://www.driverzeng.com" target="_top">当前页面打开 博客</a>
    <iframe src="a-target-iframe2.html" frameborder="0"></iframe>
  </body>
</html>

在target里调用iframe

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.driverzeng.com">博客</a>
    <a href="https://www.driverzeng.com" target="_blank">博客在新窗口打开</a>
    <a href="https://www.driverzeng.com" target="_self">博客在当前窗口打开</a>
    <a href="https://www.driverzeng.com" target="_top">博客在顶级窗口打开</a>

    <div>
      <iframe
        width="1000"
        height="1000"
        src="a-target-iframe.html"
        frameborder="0"
      ></iframe>
    </div>
  </body>
</html>

此时如果点击"父级页面打开博客",那么蓝色的iframe就会把博客打开。


自定义窗口名称

代码如下,当我们多个a标签的target都叫一个名字的时候,例如:xxx

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.driverzeng.com" target="xxx">博客</a>
    <a href="https://www.baidu.com" target="xxx">百度</a>
  </body>
</html>

此时我们点开百度就会在新的窗口中,打开百度。

如果我们再点开博客就会在百度所在的那个窗口中,打开博客

此时,我们打开网页调试,在console中输入window.name就可以看见当前窗口的名字


将窗口开在iframe中
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.driverzeng.com" target="xxx">博客</a>
    <a href="https://www.baidu.com" target="yyy">百度</a>
    <hr />
    <iframe src="" name="xxx"></iframe>
    <hr>
    <iframe src="" name="yyy"></iframe>
  </body>
</html>

调整代码,做一个多网站的集合,例如

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.driverzeng.com" target="xxx">博客</a>
    <a href="https://www.baidu.com" target="xxx">百度</a>
    <hr />
    <iframe
      style="border: none; width: 100%; height: 800px;"
      src=""
      name="xxx"
    ></iframe>
  </body>
</html>

table标签

在table标签中,只能用如下3个标签:
thead
tbody
tfoot

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead></thead>
      <tbody></tbody>
      <tfoot></tfoot>
    </table>
  </body>
</html>

单表头

tr:table row : 表示 行
th:table head: 表示 表头
td:table data: 表示 数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>英语</th>
          <th>翻译</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>hyper</td>
          <td>超级</td>
        </tr>
        <tr>
          <td>target</td>
          <td>目标</td>
        </tr>
        <tr>
          <td>reference</td>
          <td>引用</td>
        </tr>
      </tbody>
      <tfoot></tfoot>
    </table>
  </body>
</html>


两个表头
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小明</th>
          <th>小颖</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>数学</th>
          <td>61</td>
          <td>91</td>
          <td>85</td>
        </tr>
        <tr>
          <th>语文</th>
          <td>78</td>
          <td>88</td>
          <td>99</td>
        </tr>
        <tr>
          <th>英语</th>
          <td>100</td>
          <td>28</td>
          <td>38</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总分</th>
          <td>250</td>
          <td>180</td>
          <td>200</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>


表单相关样式

1.table-layout

/* Keyword values */
table-layout: auto;
table-layout: fixed;

/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: unset;

auto
大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
说白了,就是根据字数自动调整宽度,根据内容来调整。

fixed
表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。在当前列中,该单元格所在行之后的行并不会影响整个列宽。

说白了,就是等宽的,不会根据字数或者内容来调整。

    <style>
      table {
        table-layout: auto;
      }

      th,td{
          border:1px solid blue;
      }
    </style>


设置表格,但是table默认的样式,表格之间的线是有间距的。

    <style>
      table {
        width: 600px;
        table-layout: auto;
      }

      th,
      td {
        border: 1px solid blue;
      }
    </style>

给表格设置宽度

2.border-collapse 调整 表格之间的间隙

    <style>
      table {
        width: 600px;
        table-layout: auto;
        border-spacing: 10px;
      }

      th,
      td {
        border: 1px solid blue;
      }
    </style>

3.border-spacing 将边框合并

    <style>
      table {
        width: 600px;
        table-layout: auto;
        border-spacing: 0;
        border-collapse: collapse;
      }

      th,
      td {
        border: 1px solid blue;
      }
    </style>

img标签

图片标签

先从网上下载一个图片,拖入到VScode中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <img src="girl.jpeg" alt="" />
  </body>
</html>


作用

发出一个get请求,展示一张图片


属性

1.alt 如果加载不出来,可以用文字代替,告诉用户,什么图片没加载出来

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <img src="girlx.jpeg" alt="一个二次元图片加载失败" />
  </body>
</html>

2.height 高度

如果写了高度,那么宽度会自适应

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <img height="400" src="girl.jpeg" alt="一个二次元图片加载失败" />
  </body>
</html>

3.width 宽度

如果写了宽度,那么高度会自适应

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <img width="400" src="girl.jpeg" alt="一个二次元图片加载失败" />
  </body>
</html>

注意:如果两个都写...图片会变形

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <img width="400" height="400" src="girl.jpeg" alt="一个二次元图片加载失败" />
  </body>
</html>

一个前端工程师的底线:永远不要让图片变形

4.src 图片的地址


事件

监听图片是否加载成功,如果加载成功就调用:onload,如果加载失败就调用:onerror

1.onload
2.onerror

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <img
      id="xxx"
      width="400"
      src="girl.jpeg"
      alt="一个二次元图片加载失败"
    />
    <script>
      xxx.onload = function() {
        console.log("图片加载成功");
      };

      xxx.onerror = function() {
        console.log("图片加载失败");
      };
    </script>
  </body>
</html>

我们让图片加载失败

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <img id="xxx" width="400" src="girlx.jpeg" alt="一个二次元图片加载失败" />
    <script>
      xxx.onload = function() {
        console.log("图片加载成功");
      };

      xxx.onerror = function() {
        console.log("图片加载失败");
      };
    </script>
  </body>
</html>

此时,我们可以做一个图片的挽救...准备一个新图片,或者404图片,拖入到VScode中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <img id="xxx" width="400" src="girlx.jpeg" alt="一个二次元图片加载失败" />
    <script>
      xxx.onload = function() {
        console.log("图片加载成功");
      };

      xxx.onerror = function() {
        console.log("图片加载失败");
        xxx.src = "/404.jpeg";
      };
    </script>
  </body>
</html>


响应式

max-width:100%

在我们浏览器中,访问图片,和手机中可能会有所不同。

在浏览器中,我们访问,很正常,但是手机上,图片显示的就不是完整的, 我们需要拖动,才能看的完整。

此时,我们需要用到响应式。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img {
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <img id="xxx" src="girl.jpeg" alt="一个二次元图片加载失败" />
  </body>
</html>

这个时候,不管是怎么切换手机或者pad的屏幕,图片都会自动调整大小

form 标签


作用

作用和img差不多,发送get或者post请求,然后刷新页面


属性

1.action
action后面填写的是,需要请求的页面,后端的内容,此时写一个/xxx请求不到的页面。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="/xxx">
      <input type="text" />
      <input type="submit" />
    </form>
  </body>
</html>

2.method

更改请求方式,将get 改为 post

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="/xxx" method="POST">
      <input type="text" />
      <input type="submit" />
    </form>
  </body>
</html>

3.autocomplete

自动填充

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="/xxx" method="POST" autocomplete="on">
      <input name="username" type="text" />
      <input type="submit" />
    </form>
  </body>
</html>

4.target

和a标签的差不多,可以是新开的页面,也可以是iframe的页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="/xxx" method="POST" autocomplete="on" target="_blank">
      <input name="username" type="text" />
      <input type="submit" />
    </form>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
      <input type="submit" />
    </form>

    <iframe name=a src="a-target-iframe.html" frameborder="0"></iframe>
  </body>
</html>


事件

onsubmit

在我们的代码中,从来没有写过 "提交" 这两个字,但是,在页面上,方框中却有 提交 两个字

这个就是 onsubmit 帮我们做的,根据地区,来适应哪个国家,用什么样的 '提交',我们也可以做更改

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
      <input type="submit" value="搞起" />
    </form>

    <iframe name="a" src="a-target-iframe.html" frameborder="0"></iframe>
  </body>
</html>

我们还可以用button来实现 搞起 按钮

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
      <input type="submit" value="搞起" />
      <button type="submit">搞起</button>
    </form>

    <iframe name="a" src="a-target-iframe.html" frameborder="0"></iframe>
  </body>
</html>

input 和 button 之间的区别是什么?

答案 就是 ... 在input里我们没法加任何东西,但是button我们还可以做修改,加标签,甚至可以放图片进去

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
      <input type="submit" value="搞起" />
      <button type="submit">
        <strong>搞起</strong> <img width="100" src="/girl.jpeg" alt="" />
      </button>
    </form>

    <iframe name="a" src="a-target-iframe.html" frameborder="0"></iframe>
  </body>
</html>

注意:如果表单想要提交,触发表单,必须有type='submit'

input标签


作用

让用户输入内容


属性

类型type:

#可以加标签的按钮
button
#多选框
checkbox
#邮件
email
#输入密码,内容不可见
password
#单选
radio
#上传文件
file
#看不见的输入框
hidden
#只能输入数字
number
#查询
search
#提交输入框
submit
#电话输入框s
tel
#普通的文本,内容可见
text      

代码举例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
      <input type="text" />
      <hr />
      <input type="color" />
      <hr />
      <input type="password" />
      <hr />
      <input type="radio" name="gender" /> 男
      <input type="radio" name="gender" /> 女
      <hr />
      <input type="checkbox" name="hobby" />唱
      <input type="checkbox" name="hobby" />跳
      <input type="checkbox" name="hobby" />rap
      <input type="checkbox" name="hobby" />篮球
      <hr />
      <input type="file" />
      <input type="file" multiple />
      <hr />
      看不见我吧?<input type="hidden" />
      <hr />
      <input type="number" />
      <hr />
      <input type="search" />
      <hr />
      <input type="email" />
      <hr />
      <input type="tel" />
      <hr />
      <textarea style="resize: none; width: 50%; height: 150px;"></textarea>
      <hr />
      <select>
        <option value="">- 请选择 -</option>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
      </select>
      <hr />
      <button type="submit">
        <strong>搞起</strong>
      </button>
    </form>
  </body>
</html>

其他:

  • name
  • autofocus
  • checked
  • disabled
  • maxlength
  • pattern
  • value
  • placeholder

关于 曾老湿
我只是一个躲在角落里瑟瑟发抖的小运维,随时准备给大佬端茶递水。
WeChat:z133411023
QQ:133411023
欢迎新朋友你的到来!
还没有人抢沙发呢~
昵称
邮箱
网站
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册