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

2022-10-31 17:57:50 浏览数 (1)
  • HTML 前戏

  • a标签介绍
    • a标签的href
    • a标签的target
  • table标签
  • img标签
  • form 标签
  • input标签

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长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服务，打开页面

代码语言：javascript复制
#安装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标签，设置超链接，此时会直接在当前窗口打开新的页面。

代码语言：javascript复制
<!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://blog.driverzeng.com">超链接</a>
  </body>
</html>

使用target指定开启的位置

代码语言：javascript复制
<!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://blog.driverzeng.com" target="_blank">超链接</a>
  </body>
</html>

a标签的href

a标签href的取值

网址： 1.https://blog.driverzeng.com

代码语言：javascript复制
  <body>
    <a href="https://blog.driverzeng.com" target="_blank">超链接</a>
  </body>

2.https://blog.driverzeng.com

代码语言：javascript复制
  <body>
    <a href="https://blog.driverzeng.com" target="_blank">超链接</a>
  </body>

3.//driverzeng.com

代码语言：javascript复制
  <body>
    <a href="//driverzeng.com" target="_blank">超链接</a>
  </body>

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

代码语言：javascript复制
  <body>
    <a href="/a/b/c/c.html" target="_blank">超链接</a>
  </body>

2.a/b/c/index.html

代码语言：javascript复制
  <body>
    <a href="a/b/c/c.html" target="_blank">超链接</a>
  </body>

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

代码语言：javascript复制
  <body>
    <a href="./index.html" target="_blank">超链接</a>
  </body>

伪协议：

1.JavaScript伪协议

代码语言：javascript复制
  <body>
    <a href="javascript:alert(1);">Javascript伪协议</a>
  </body>



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

代码语言：javascript复制
  <body>
    <a href="javascript:;">查看</a>
  </body>

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

代码语言：javascript复制
<!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://blog.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:邮件伪协议

代码语言：javascript复制
    <a href="mailto:253097001@qq.com">发邮件给曾老湿</a>

自动呼出邮件工具



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

代码语言：javascript复制
    <a href="tel:13023456784">打电话给xxx</a>





a标签的target

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

代码语言：javascript复制
<!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中调用 页面

代码语言：javascript复制
<!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://blog.driverzeng.com">博客</a>
    <a href="https://blog.driverzeng.com" target="_blank">博客在新窗口打开</a>
    <a href="https://blog.driverzeng.com" target="_self">博客在当前窗口打开</a>
    <a href="https://blog.driverzeng.com" target="_top">博客在顶级窗口打开</a>

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



当前页面打开新页面

target _self

代码语言：javascript复制
  <body style="background-color: blue;color:gold;">
    我是 iframe
    <a href="https://blog.driverzeng.com" target="_self">当前页面打开 博客</a>
  </body>





顶级页面打开

target _top

代码语言：javascript复制
<!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://blog.driverzeng.com" target="_top">当前页面打开 博客</a>
  </body>
</html>

父级窗口打开

再写一个iframe页面



代码语言：javascript复制
<!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://blog.driverzeng.com" target="_parent">父级页面打开 博客</a>
  </body>
</html>

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

代码语言：javascript复制
<!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://blog.driverzeng.com" target="_top">当前页面打开 博客</a>
    <iframe src="a-target-iframe2.html" frameborder="0"></iframe>
  </body>
</html>

在target里调用iframe

代码语言：javascript复制
<!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://blog.driverzeng.com">博客</a>
    <a href="https://blog.driverzeng.com" target="_blank">博客在新窗口打开</a>
    <a href="https://blog.driverzeng.com" target="_self">博客在当前窗口打开</a>
    <a href="https://blog.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

代码语言：javascript复制
<!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://blog.driverzeng.com" target="xxx">博客</a>
    <a href="https://www.baidu.com" target="xxx">百度</a>
  </body>
</html>

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



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



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



将窗口开在iframe中

代码语言：javascript复制
<!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://blog.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>





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

代码语言：javascript复制
<!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://blog.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

代码语言：javascript复制
<!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： 表示 数据

代码语言：javascript复制
<!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>



两个表头

代码语言：javascript复制
<!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



代码语言：javascript复制
/* Keyword values */
table-layout: auto;
table-layout: fixed;

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

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

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

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

代码语言：javascript复制
    <style>
      table {
        table-layout: auto;
      }

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

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

代码语言：javascript复制
    <style>
      table {
        width: 600px;
        table-layout: auto;
      }

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

给表格设置宽度



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

代码语言：javascript复制
    <style>
      table {
        width: 600px;
        table-layout: auto;
        border-spacing: 10px;
      }

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



3.border-spacing 将边框合并

代码语言：javascript复制
    <style>
      table {
        width: 600px;
        table-layout: auto;
        border-spacing: 0;
        border-collapse: collapse;
      }

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



img标签

图片标签

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



代码语言：javascript复制
<!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 如果加载不出来，可以用文字代替，告诉用户，什么图片没加载出来

代码语言：javascript复制
<!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 高度

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

代码语言：javascript复制
<!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 宽度

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

代码语言：javascript复制
<!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>



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

代码语言：javascript复制
<!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

代码语言：javascript复制
<!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>



我们让图片加载失败

代码语言：javascript复制
<!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中



代码语言：javascript复制
<!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%

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



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

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

代码语言：javascript复制
<!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请求不到的页面。

代码语言：javascript复制
<!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

代码语言：javascript复制
<!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

自动填充

代码语言：javascript复制
<!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的页面

代码语言：javascript复制
<!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>



代码语言：javascript复制
<!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 帮我们做的，根据地区，来适应哪个国家，用什么样的 '提交'，我们也可以做更改

代码语言：javascript复制
<!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来实现 搞起 按钮

代码语言：javascript复制
<!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我们还可以做修改，加标签，甚至可以放图片进去

代码语言：javascript复制
<!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：

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

代码举例

代码语言：javascript复制
<!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



运维 自动化 ide html

0 人点赞