《HTML常用标签》

307 阅读3分钟

a标签的用法

a 标签的属性:

  • href。取值如下:

    1. 网址,例如://google.com(会自动适应 https 或 http)
    2. 路径:
    • /a/b/c 以及 a/b/c。如果我们开启 http 服务,那么/a/b/c 的根目录就不是硬盘的根目录,你在哪里开的 http 服务哪里就是根目录。
    • index.html 或者./index.html。
    1. 伪协议:
    • javascript:代码;(写一个点击后不刷新页面不跳转的 a 标签,就可以加 javascript:;)
    • mailto:邮箱(点击 a 标签后,直接跳转到发邮件的页面,并且自动补全此邮箱地址)
    • tel:手机号(点击此 a 标签,会弹出一个界面,可直接拨打此手机号。这个技巧可以用在简历上)
    1. id:href=#xxx

a 标签的作用:跳转外部页面,跳转内部锚点,跳转到邮箱或电话等

img 标签的用法

  • 作用:发出 get 请求,展示一张图片。
  • 属性:alt/height/width/src。图片加载失败,就会显示 alt 的文字内容,一般用来提示用户。height、width 的单位不用写,默认是 px,因为只支持 px,只写 height,width 会自适应,只写 width,height 会自适应,都写的话,图片会变形。

  • 事件:onload/onerror,监听图片是否加载成功。

xxx.onload = function() {
  console.log("图片加载成功");
};
xxx.onerror = function() {
  console.log("图片加载失败");
  xxx.src = "/404.png";
};
  • 响应式:max-width:100%

table 标签的用法

table相关的标签:

<table>
  <thead>
    <tr>
      <th></th>
      //table head
    </tr>
    //table row
  </thead>
  <tbody>
    <tr>
      <td></td>
      //table data
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>

table 里只能有thead、tbody、tfoot这三个标签,可以只有 thead 和 tbody,或者只有 tbody。

table 相关的样式:

  • table-layout,取值有 auto、fixed,auto 是根据内容确定每一份所占宽度,fixed 是每一份等宽。
  • border-collapse,控制表格的 border 是否合并,合并的取值是 collapse,不写默认是不合并。
  • border-spacing,控制 border 和 border 之间的距离,取值是数值,一般写 0,因为我们一般不希望表格之间有空隙。
  • border-collapse 和 border-spacing 一般都事先在 reset.css 里写好。