阅读 232

HTML常用标签之——a标签、table标签、img标签

a标签:

<a href=""></a>

作用:

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

属性(部分):href、target

1. href:超链接,hyper reference

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

  • <a href="//baidu.com">百度超链接</a>
  • <a href="a/b/c.html">c.html</a>
  • <a href="javascript:alert(1);">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标签:

作用:主要用于表格制作

相关标签:

  • thead
  • tbody
  • tfoot
  • tr:table row缩写,表中一行
  • th:table head缩写,表头,默认会加粗
  • td:table data缩写,表内数据

简单应用:

 <table>
        <thead>
            <tr>
                <th>英语</th>
                <th>翻译</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hyper</td>
                <td>兴奋的,高度紧张的,超级</td>
            </tr>
            <tr>
                <td>target</td>
                <td>目标</td>
            </tr>
            <tr>
                <td>reference</td>
                <td>引用</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
复制代码
表1

相关样式

  • 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>
复制代码
表2

img标签:

作用:

发出get请求,展示一张图片。(在开发者工具中Network的Method下可见) 图3

属性(部分):

  • 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>
复制代码

写在最后:

html标签学习重在练习与记忆。记下这三个标签的简单用法花了一下午时间,但对它们的印象加深了一分,也算有所收获。

文章分类
前端
文章标签