本文为HTML中常用标签的用法。其中包括a标签，img标签，table标签，from标签

一、a 标签的用法

1.属性

href：跳转外部页面，规定链接指向的页面的 URL，可用于跳转到邮箱或者电话

<a href="https//goole.com">超链接</a>

target：跳转内部锚点，在指定的窗口打开超链接。

<a href="https//goole.com" target="_blank">超链接</a>

2.作用

1、 a的href的取值

网址：

<a href="https//goole.com"></a>
 <a href="http//goole.com"></a>
 <a href="//goole.com"></a>

路径

<!--绝对路径 就是硬盘上文件的路径-->
<a href="/a/b/c.html"></a>
<!--相对路径 就是相对于当前文件的路径。-->
<a href="c.html">同目录下文件间互相链接</a>

伪协议：

<!--:alert(1)可以直接使用js            -不推荐使用-->
<a href="javascript:alert(1)">javascript伪协议</a>

<!--点击之后不会跳转的标签             -推荐使用-->
<a href="javascript:;">查看</a>

<!--IP地址后面会加上#XXX,同时会跳转到指定的标签-->
<a href="#xxx;">查看xxx</a>
<p></p>
<p id="xxx"></p>
<p></p>

<!--发送邮件：mailto:邮箱-->
<a href="mailto:1037533792@qq.com">发邮件给poly</a>

<!--tel:手机号-->
<a href="tel:1772251">打电话给poly</a>

2、 a的target的取值

<!--target="_blank" 连接跳转到新的页面-->
 <a href="http://baidu.com" target="_blank">百度</a>
 
<!--target="_self" 连接在当前页面打开连接-->
<a href="http://baidu.com" target="_self">百度</a>

<!--target="_top" 打开时忽略所有的框架-->
<a href="http://baidu.com" target="_top">百度</a>

<!--target="_parent"  在父窗口中打开。-->
<a href="http://baidu.com" target="_parent">百度</a>

3、iframe标签 内嵌窗口（不推荐使用）

<iframe style="border: none; width: 100%; height: 800px;" src=""></iframe>

二、table标签的用法

1、相关的标签

<table>
     <thead>               //头部
         <tr>              //行
             <th>英语</th> //表头
             <th>翻译</th>
         </tr>
     </thead>
     <tbody> //身体
         <tr>
             <td>hypper</td> //数据/内容
             <td>超级</td>
         </tr>
         <tr>
             <td>target</td> 
             <td>目标</td>
         </tr>

     </tbody>
     <tfoot>                //尾部
         <tr>
             <td>空</td>
         </tr>
     </tfoot>
 </table>

2、相关的样式

table-layout：CSS属性定义了用于布局表格单元格，行和列的算法。

table-layout:
 <!--auto;表格及单元格的宽度取决于其包含的内容。-->
 <!--fixed:平均宽度-->
   <style>
       table {

           table-layout: auto/fixed;
       }
   </style>

border-collapse:属性是用来决定表格的边框是分开的还是合并的。

border-spacing:属性指定相邻单元格边框之间的距离

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

3、img标签

作用 发出get请求，展示一张图片

属性
alt图片加载失败后显示的提示文字

width 给图片设置宽度 只写宽度，高度为自适应

height 给图片设置高度 只写高度，宽度为自适应

<img width="400" src="3.jpg" alt="一只狗子">

事件

<!--onload/onerror图片加载失败可替换其他图片-->
<body>
  <img src="3.jpg" alt="lisa" id="xxx">
</body>
<script>
  xxx.onload = function () {
      console.log('图片加载成功');

  }
  xxx.nerror = function () {
      console.log('图片加载失败');
      xxx.src = '2.png';
}
</script>

</html>

响应式

<!--max-width: 100%;自适应所有浏览器页面-->
   <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      img {
          max-width: 100%;
      }
  </style>

四、from标签

作用
发get或post请求，然后刷新页面
action 请求到路径的页面

method 控制get或者post请求页面

<body>
    <form action="/yyy">
         <form action="/yyy" method="POST">
        <input type="submit"></form>
</body>

autocomplete=“on” 浏览器能够根据用户之前在表单里输入的值自动补全。 target="_balck"用来指示在提交表单之后，在哪里显示收到的回复.

<form action="/yyy" method="POST" autocomplete="on" target="_balck">
        <input name="username" type="text">
        <input type="submit"></form>
<input type="submit" value="提交">
 <button type="submit"><strong>提交</strong></butto>