前端小白历险记1-2:HTML常用标签魔法

472 阅读4分钟

上一集的故事请戳:前端小白历险记1-1:HTML入门标签

今天,小花来到了HTML城(以下简称H城)的a小镇、img小镇和table小镇。这3个小镇有着不同的特异功能,让我们跟着小花去a镇走走吧~

第一站:a小镇-传送魔法(a标签)

据上古原神鸡你太美的记载,a小镇的能力宝石是可以通往世界各地的传送门,小镇上的居民,只需要施展a传送术,就可以把自己传送到世界上各个角落(网站地址),还可以获取到其他城镇的信息。

小花刚到小镇上,看到一名村民在自言自语,一打听,原来是在练习高阶传送门秘法。村民跟小花说,a传送术的秘诀在于3重吟唱,分别为:

  • href,传送到万维网主世界各个角落(跳转到外部页面)
  • target,制作浏览器魔法阵(标签、窗口或框架)
  • download,获取万维网主世界各个城镇的信息(下载)

小花跟着村民念起了咒语,因为不太熟练,她需要给咒语添加注释,帮助自己理解:

<!--跳转到Google网站,并打开新的标签-->
<a href="https://www.google.com" target="_blank">Google</a>
<!--给H城的朋友发了一封飞鸽传书-->
<a href="mailto:rappppper@vip.613.com">rappppper@vip.613.com</a>

过了3天,小花跟着村民学习到了a小镇的初级传送术。终于能够在万维网主世界的各个角落穿梭啦~

第二站:img小镇-纳米衣(img标签)

小花通过a传送到了img小镇。这个小镇的人们,身上都有着各种各样的衣服,而且这些衣服会自动根据心情、天气变换图案,还能够根据不同人的身材,自动变换尺寸。

小花非常想得到这套衣服,但镇长告诉她,想要得到衣服,需要通过一项万维网勇者协会的试炼:捕获一只狗子。

小花表示,这简直小case,上街抓一只不就好了?遂上街和狗子展开追逐,结果一只狗子都抓不到。

冥思苦想之际,小花看到村民在用魔法阵召唤宠物,本来是一张纸上的猫猫,只要启动img魔法,马上就从纸张中跳了出来:

<!--初级img咒语-->
<img src="cat.png" alt="一只猫咪">

小花根据之前学习a的经验,快速掌握了img的初级用法,如愿以偿获得了镇长奖励的img纳米衣。

第三站:table小镇-建筑魔法(table标签)

一周后,小花根据镇长的地图,找到了table小镇。一眼望去,小镇的屋子,像极了五颜六色的格子。

门口的老奶奶见到小花,提醒她:别向前走了,会迷路的,除非你学会table小镇的格子咒。

<table>
      <thead>
        <tr>
          <th>英语</th>
          <th>翻译</th>
        </tr>
        <!-- table row -->
      </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>

小花看着长长的一串咒语,一脸懵逼。

“实际上,咒语长是长,但是结构非常简单。”老奶奶慢慢讲道。

  • <table>是咒语的起手文,必须要以这个开头
  • <thead>是咒语的文头,用来表示法咒的构成
  • <tbody>是咒语的主文,是法咒的核心内容,这段最长
  • <tr>是咒语的隔文,往往是上下文之间的停顿
  • <td>是咒语的明文,表示这个咒语作用于谁

只要学会了这个咒语,一天就可以搭建出100平方米的房子。

小花听着,就开始迷糊了,房子都不要钱的吗???

“因为格子咒是按平米来消耗法器的,小镇上有房子的村民,基本上都是身价上千万的富豪哦~”

......to be countinued(未完待续)