HTML常用标签之——a标签、table标签、img标签-一一网

a标签:

<a href=""></a>

作用：

跳转外部页面
跳转内部锚点
跳转邮箱/电话

属性（部分）：href、target

1. href：超链接，hyper reference

用于指向页面的ULR地址，其中，href的取值可以是网址、路径或伪协议，举例如下：

<a href="https://baidu.com">百度超链接</a>
<a href="a/b/c.html">c.html</a>
<a href="">JavaScript伪协议</a>

网址：(推荐第三种)

https://baidu.com
http://baidu/com
//baidu.com

2. target：指定在哪里显示链接的资源，target的值有 _blank 、_self、_top、_parent、自定义target值举例如下：

（要注意的是，谷歌不允许用iframe嵌套的方式打开，所以下面用iframe嵌套打开Google搜索页面均会失败）

在新的页面里打开Google：<a href="https://google.com" target="_blank">google</a>
在当前页面里打开Google，不写target的默认情况下就是target=_self:<a href="https://google.com" target="_self">google</a>
在最顶层页面打开Google（存在嵌套页面时才有效果，只有一个页面的情况下效果与target=_self相同）：<a href="https://google.com" target="_top">google</a>
多层嵌套页面（≥2）时，在当前页面的上一层页面打开Google（如果嵌套页面是2层，与target=_top的效果相同）：<a href="https://google.com" target="_parent">google</a>
自定义target的值，例如使target的值同时取“yyy”，即

    <a href="//google.com" target="yyy">google</a>
    <a href="//baidu.com" target="yyy">baidu</a>
复制代码

那么当点击google打开谷歌窗口之后，再点baidu打开百度窗口，会使百度取代原先打开的谷歌窗口

（这种情况下浏览器会在打开一个名为yyy的页面。验证方法：在打开的百度页面里打开开发者工具，点击console，输入window.name就能看见“yyy”）

还可以给iframe命名为target的值，可以制作出一个能够切换Google与Baidu的页面

    <a href="//google.com" target="yyy">google</a>
    <a href="//baidu.com" target="yyy">baidu</a>
    <hr>
    <iframe style="border: none; width:100%; height: 800px;" src="" name="yyy"></iframe>
    <iframe style="border: none; width:100%; height: 800px;" src="" name="yyy"></iframe>
复制代码

table标签：

作用：主要用于表格制作

相关样式

table-layout：决定表格单元格行、列的算法，它的值有auto、fixed等。auto是默认值，它使表格单元格的宽度随表格内数据的多少变化；fixed使表格单元格的宽度随单元格的个数变化。
table-collapse：当表格单元格有边界时，消除单元格边界间的空隙。
table-spacing：当表格单元格有边界时，它的值用来确定单元格边界空隙的大小；当border-spacing: 0;时，单元格的边界消失，但单元格边界重合的部分会显得更粗一些。

简单应用：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 300px;
            table-layout: auto;
            /* table布局样式 */
            border-spacing: 0;
            /* 单元格间隔大小 */
            border-collapse: collapse;
            /*  消除单元格的间隔 */
        }

        td,
        th {
            border: 2px solid thistle;
        }
    </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>70</td>
                <td>82</td>
                <td>92</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>100</td>
                <td>97</td>
                <td>87</td>
            </tr>
        </tbody>
        <tfoot>
            <th>总分</th>
            <td>231</td>
            <td>270</td>
            <td>264</td>
        </tfoot>
    </table>
</body>
复制代码

img标签：

作用：

发出get请求，展示一张图片。（在开发者工具中Network的Method下可见）

属性（部分）：

src：图片的路径，这是必须有的
alt：alternative（可供选择的、替代的）缩写，在图片加载不出来的情况下，用文字描述图片内容
height：决定图片高度，例如<img src="……" alt="XX" height="100" />
width：决定图片高度，例如<img src="……" alt="XX" width="100" />。值得注意的是，规定图片的高（宽）的情况下，它的宽（高）会自动设置；若同时规定图片的宽和高，图片可能变形

事件：

onload：图片加载错误
onerror：图片加载成功

用法：

<img id="xxx" src="cat.png" alt="一条小猫" width="300" />
    <script>
        xxx.onload = function(){
            console.log("图片加载成功");
        };
        xxx.onerror = function(){
            console.log("图片加载失败");
            xxx.src = "/404.png"; 
            /* 404.png是自己设置的图片，是用于在小猫图片加载失败的情况下显示的图片 */
        };
    </script>
复制代码

响应式：

max-width：100%，使图片在手机上展示时能够适应手机屏幕

用法：在head里写

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        img {
            max-width: 100%;
        }
    </style>
复制代码