html常见标签总结_html a-number标签-CSDN博客

本文链接：https://blog.csdn.net/richard1230/article/details/104657727

文章目录

a标签

a 标签的属性：

href注意点：

1.网址,例如：//google.com（会自动适应 https 或 http）

2.路径：

/a/b/c 以及 a/b/c。如果我们开启 http 服务，那么/a/b/c 的根目录就不是硬盘的根目录，你在哪里开的 http 服务哪里就是根目录。

3.伪协议:

javascript:代码;（写一个点击后不刷新页面不跳转的 a 标签，就可以加 javascript:😉,现在其实没啥软用

mailto:邮箱（点击 a 标签后，直接跳转到发邮件的页面，并且自动补全此邮箱地址）

tel:手机号（点击此 a 标签，会弹出一个界面，可直接拨打此手机号。这个技巧可以用在简历上）

id：href=#xxx。这里面的xxx就是id;
在这里插入图片描述

在这里插入图片描述

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

target,指定在哪个窗口打开你的超链接：
一般使用 _blank ,表示在空白页打开。
默认值是_self,表示在当前页面打开。
_top，当文件引用另一个文件，并且另一个文件里面有一个链接，target 的值为_top，这时在页面上点击这个链接会在该引用文件的顶级窗口打开。
_parent，当文件引用另一个文件，另一个文件再引用一个文件，并且在这再一个文件里面有链接，target 的值为_parent，这时在页面上点击这个链接会在该引用文件的上一级窗口打开。
xxx，如果有一个叫做 xxx 的窗口，点击 a 链接时就在 xxx 窗口打开，如果没有叫 xxx 的窗口，就创建一个叫 xxx 的窗口。怎么验证呢？控制台，输入 window.name，会出现’xxx’，也就是当前窗口的名字。
做一个 goodbye 网站。链接的 target 为 xxx，iframe 的 name 也等于 xxx，这时在页面上点击链接，就会在 iframe 里打开链接的网页。
iframe 标签，目前前端已经很少使用这个标签了，因为它不好用，一般老系统使用，不需要过多学习。新的前端一般都使用 Ajax。

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 里写好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            /*下面两个属性可以设置在resset里面*/
            border-collapse: collapse;
            border-spacing: 0;
            /*上面两个属性可以设置在resset里面*/
            width:600px;
            table-layout: auto;
        }
        td,th{
            border: 1px solid blue;

        }
    </style>
</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>61</td>
        <td>91</td>
        <td>85</td>
    </tr>
    <tr>
        <th>数学</th>
        <td>61</td>
        <td>91</td>
        <td>85</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <th>总分</th>
        <td>200</td>
        <td>200</td>
        <td>200</td>
    </tr>
    </tfoot>
</table>

</body>
</html>

img

在这里插入图片描述

作用:发出get请求,展示一张图片;
属性：alt/height/width/src。图片加载失败，就会显示 alt 的文字内容，一般用来提示用户。height、width 的单位不用写，默认是 px，因为只支持 px，只写 height，width 会自适应，只写 width，height 会自适应，都写的话，图片会变形。(height、width两个最好只写一个！！！)
事件：onload/onerror，监听图片是否加载成功。