阅读 524

HTML入门2:html常用的标签

本文为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:17722545501">打电话给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>
复制代码
文章分类
阅读
文章标签