《HTML常用标签》

155 阅读2分钟

a 标签的用法

作用:<a>(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

属性:

  • href : 此属性属性值为你想要跳转的超链接。例如:

    1. 网址:google.com 也可以是 google.com 又或者是//google.com (会自动适应 https 或 http,不用担心因为 https 或者http的写错,而导致程序报错。)

    2. 路径:在哪个目录开的 http 服务,那个目录就是根目录。

    3. 伪协议:

      • javascript:代码;javascript:; 唯一一个可以使超链接点击后真正意义上什么操作的不做的代码)

      • mailto:邮箱

      • tel:手机号

      • id值:href=#xxx 可以使页面跳到id位置

  • target

    1. target="_blank " 在空白页面打开。

    2. _self:当前页面打开。

    3. _top: 顶级窗口打开,就是在当前页面所有iframe的最上面的窗口打开

    4. _parent: _parent:所在的iframe的上一层窗口打开

    5. target='xxx'如果有一个id叫xxx 的窗口,点击a链接时就在这个xxx窗口打开,如果没有的话,就在新页面自动新建一个叫做 xxx 的窗口打开。

  • download : 用于下载页面(不常用,因为不是所有的浏览器都支持,特别是手机浏览器)

  • iframe 标签:内嵌窗口(现在也很少使用了,因为它不好用,一般老系统使用。现在一般都使用 Ajax)

img 标签的用法

作用:发出 get 请求,展示一张图片。

  • 属性:alt/height/width/src。图片加载失败,就会显示 alt 的文字内容,一般用来提示用户。height,width 会自适应,只写 width,height 会自适应,都写的话,图片可能会变形。

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

xxx.onload = function() {
  console.log("图片加载成功");
};
xxx.onerror = function() {
  console.log("图片加载失败");
  xxx.src = "/备胎.png";                //如果监听图片发现加载失败就加载备用图片
};
  • 响应式:max-width:100%

table 标签的用法

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

完整的table 相关的样式举例:

<table>
  <thead>
    <tr>
      <th></th>
      //table head
    </tr>
    //table row
  </thead>
  <tbody>                         //主体必须有
    <tr>
      <td></td>
      //table data
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>
  • table-layout:auto;自动根据表格内容长度调整大小,更加人性化 table-layout:fixed,auto; 不考虑内容尽量每一份等宽。
  • border-collapse:collapse;控制表格 border 的合并,不写默认是不合并。
  • border-spacing:0;控制 border 和 border 之间的距离,一般取值为0。
  • border-collapse 和 border-spacing 一般都事先在 reset.css 里写好。

其他感想

感觉自己可以更努力点,继续加油吧!