HTML常用标签

a 标签

属性

href

<body>
    <a href="https://google.com">超级链接</a>
</body>

target

  • 指定哪个窗口打开超链接
  • 不写 target 默认当前页面打开
  • _blank 在新的空白页面打开
<body>
    <a href="https://google.com" target="_blank">超级链接</a>
</body>


download

理论上控制下载的，但很多不支持，忽略

rel=noopener

防止一个 bug,暂时先不用了解

作用

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

a 的 href 的取值

网址

路径

  • /a/b/c 以及 a/b/c
  • index.html 以及 ./index.html

伪协议

javascript:代码;

<body>
    <a href="javascript:alert(1);">JavaScript伪协议</a>
    <a href="javascript:;">空的伪协议</a>
</body>

空的伪协议这个需求，是实现点击后什么也不做

如果有个需求是，点击查看链接，弹出一个对话框，
除了用空的伪协议写法外，都不能满足需求。

<body>
    <input type="text"/>
    <a href="">查看</a>
</body>

href 内什么都不写，点击 查看,页面还是会刷新

<body>
    <P>1</P>
    <P>2</P>
    <P>3</P>
    <P>4</P>
    <P>5</P>
    <P>6</P>
    <P>7</P>
    <P>8</P>
    <P>9</P>
    <P>10</P>
    <P>11</P>
    <P>12</P>
    <P>13</P>
    <P>14</P>
    <P>15</P>
    <P>16</P>
    <P>17</P>
    <P>18</P>
    <P>19</P>
    <P>20</P>
    <P>21</P>
    <P>22</P>
    <P>23</P>
    <P>24</P>
    <P>25</P>
    <P>26</P>
    <P>27</P>
    <P>28</P>
    <P>29</P>
    <P>30</P>
    <a href="#">查看</a>
</body>

如果点击 查看 ，会滚到顶部

mailto:邮箱

<body>
    <a href="mailto:zenyangcode@outlook.com">发邮件给 zenyang</a>
</body>

直接将收件人填到邮件里

tel:手机号

<body>
    <a href="tel:138.....">发邮件给 zenyang</a>
</body>

如果是手机页面，直接将号码复制到电话上，
按拨打就可以打电话

id

href=#xxx

<body>
    <P>1</P>
    <P>2</P>
    <P>3</P>
    <P>4</P>
    <P>5</P>
    <P>6</P>
    <P>7</P>
    <P>8</P>
    <P>9</P>
    <P id="xxx">10</P>
    <P>11</P>
    <P>12</P>
    <P>13</P>
    <P>14</P>
    <P>15</P>
    <P>16</P>
    <P>17</P>
    <P>18</P>
    <P>19</P>
    <P>20</P>
    <P>21</P>
    <P>22</P>
    <P>23</P>
    <P>24</P>
    <P>25</P>
    <P>26</P>
    <P>27</P>
    <P>28</P>
    <P>29</P>
    <P>30</P>
    <a href="#xxx">查看xxx</a>
</body>

点击 查看xxx ，网址会变成 IP + HTML名字 + #xxx
还跳到 id="xxx" 的位置

a 的 target 的取值

内置名字

_blank

<body>
    <a href="https://google.com" target="_blank">google</a>
</body>

在新的空白页面打开

_self

<body>
    <a href="https://google.com" target="_self">google</a>
</body>

在当前的页面打开

_top

<!-- a-target-iframe.html -->
<body style="background: red;">
    我的 iframe
    里面有一个 a 标签
    <a href="//google.com" target="_top">top</a>
</body>

<!-- a-target.html -->
<body>
    <a href="https://google.com" target="_top">google</a>
    <div>
        <iframe src="a-target-iframe.html" frameborder="0"></iframe>
    </div>
</body>

这个时候，点击红色背景内的 top,会在外层白色背景的 a-target.html 的页面打开 google

如果将 a-target-iframe.html 的 target 改为 _self ，
这个时候，点击红色背景内的 top,会在红色背景这个 iframe 内打开 google，打开失败。
因为 google 拒绝在 iframe 内打开

_parent

<!-- a-target-iframe.html -->
<body style="background: red;">
    我的 iframe

    <iframe width="800" height="800" src="a-target-iframe-2.html"></iframe>
</body>

<!-- a-target-iframe-2.html -->
<body style="background: green;">
    我的 iframe-2
    <hr>
    里面有一个 a 标签
    <a href="//baidu.com" target="_parent">parent</a>
</body>

<!-- a-target.html -->
<body>
    <a href="https://google.com" target="_top">google</a>
    <div>
        <iframe src="a-target-iframe.html" frameborder="0"></iframe>
    </div>
</body>

现在是，白色背景的 a-target.html 内嵌套一个
红色背景的 a-target-iframe.html,
红色背景的 iframe 又嵌套一个绿色背景的
a-target-iframe-2.html

这时候点击绿色背景的 parent,会在红色背景的 iframe
中打开 baidu 页面

所以 parent 就是在当前链接的 iframe 的上一层打开

<!-- a-target.html -->
<body>
    <a href="https://google.com" target="xxx">google</a>
</body>

点击 google 链接，也是在新窗口打开，但两个链接时后如下：

<!-- a-target.html -->
<body>
    <a href="https://google.com" target="xxx">google</a>
    <a href="https://baidu.com" target="xxx">baidu</a>
</body>

先点击 google 链接，打开一个 ==窗口名为"xxx"== 的窗口，里面打开了 google
再点击 baidu 链接，刚才的 xxx 窗口打开了 baidu

target="xxx" 的意思是，如果有一个窗口为 xxx 的，就在那个窗口打开；
如果没有就新建一个 xxx 的窗口打开。

window.name 查看窗口名字

img 标签

作用

发出 get 请求，展示一张图片

属性

alt / height / width / src

alt 是 src 加载不到的时候显示

height / width 只写一个，图片显示会自适应

<img width="400" src="dog.png" alt="一只小狗">


事件

onload / onerror

<img id="xxx" width="400" src="dog.png" alt="一只小狗">
<script>
    xxx.onload = function() {
        console.log('图片加载成功')
    }
    xxx.onerror = function() {
        console.log('图片加载失败')
        xxx.src = "/404.png"
    }
</script>

如果加载失败，就载入 404 的照片，图片上说加载失败，请刷新

响应式

max-width: 100%

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


table 标签

相关的标签

  • table
  • thead
  • tbody
  • tfoot
  • tr
    table row
  • td
  • th
    table head
<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>

<head>
    <style>
        table {
            width: 600px;
            table-layout: auto;
            border-collapse: collapse;
            border-spacing: 0;
        }
        td,th {
            border: 1px solid red;
        }
</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>79</td>
                <td>82</td>
                <td>92</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>100</td>
                <td>97</td>
                <td>87</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>200</td>
                <td>200</td>
                <td>200</td>
            </tr>
        </tfoot>
    </table>
</body>


相关的样式

table-layout

  • auto
    表格及单元格的宽度取决于其包含的内容

  • fixed
    表格和列的宽度通过表格的宽度来设置

table-collapse

合并表格间的空隙

table-spacing

表格间的距离

个人感想

HTML 就是标签套标签，要多写多用才能熟练。

版权归于饥人谷所有

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML常用标签
    HTML 常用标签 Iframe标签 HTML内联框架元素 表示嵌套的浏览上下文, 有效地将另一个HTML页面嵌入...
    YjjTT阅读 453评论 0赞 0
  • HTML常用标签介绍（一）
    本文将会介绍HTML中的一些常用标签，后面还会陆续整理 1:什么是HTML HTML （Hypertext Mar...
    憨憨二师兄阅读 968评论 0赞 0
  • HTML 常用标签
    1. iframe 标签 iframe 标签主要用途是嵌套页面，目前使用较少，只有一些遗留项目在用。具体可以参考 ...
    大喵chary阅读 474评论 0赞 0
  • HTML常用标签的笔记整理
    iframe a form input select textarea table iframe iframe单独...
    前端_学徒阅读 510评论 0赞 0
  • HTML常用标签
    HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种URL指针，通过激活...
    鋕畵阅读 316评论 0赞 1