HTML常用标签

这篇主要介绍 a 标签、img 标签和 table 标签的用法。

关于a 标签

属性

1、href（hyper reference）

用来表示超链接，使用类型有：

网址

路径

  • /a/index.html
  • index.html

伪协议

  • javascript:;
  • mailto:邮箱
  • tel:手机号

id

例如：href=#xxx

2、target

表示目标窗口：

  • _blank （新窗口）
  • _top
  • _parent
  • _self（default）

窗口命名：

  • window的name

例如：自定义一个target="xxx" 会寻找xxx窗口并打开，没有就新建窗口，命名为xxx。

  • iframe的name

3、download

4、rel=noopener

代码如下：

    <a href="https://www.baidu.com" target="_blank">超链接</a>
    <a href="/a/index.html">访问a.html</a>
    <a href="index2.html">访问index2.html</a>
    <a href="javascript:alert(1)">空链接</a>
    <a href="mailto:707187137@qq.com">发邮件</a>
    <a href="tel:10086">打电话</a>
    <a href="#xxx">id</a>

作用

  • 跳转外部页面
  • 跳转内部锚点
  • 跳转到邮箱、电话

关于img 标签

作用

发出 get请求 展示一张图片

属性

  • alt

    表示加载失败的文字提示

  • height/width

  • src

事件

  • onload
  • onerror

相应式

  • max-width:100%

代码如下：

    <img id="yyy" src="caft.jpeg" width="800" alt="ddd">
    <script>
        yyy.onload = function(){
            console.log("success");
        }
        yyy.onerror = function(){
            console.log("error");
            yyy.src = "cat2.jpeg";
        }
    </script>

    img{
            max-width: 100%;
    }

关于table 标签

相关标签

  • table
  • thead
  • tbody
  • tfoot
  • tr
  • td
  • th

相关样式

  • table-layout（auto、fixed）
  • border-spacing
  • border-collapse

代码如下：

    <table>
        <thead>
            <tr>
                <th>英语大声点</th>
                <th>数学</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>90</td>
                <td>60</td>
            </tr>
            <tr>
                <td>70</td>
                <td>90</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>160</td>
                <td>150</td>
            </tr>
        </tfoot>
    </table>