我的第一个HTML

HTML(HyperText Markup Language)是超文本标记语言。通俗地讲,HTML的作用就是给一段文字添加标签,然后浏览器就会知道,这段文字该放在什么位置、是什么样式(不过现在添加样式一般都是用CSS),有什么样的作用等等。可能这么讲还比较抽象,我们来动手试试首先打开马俊老师最爱的笔记本,敲上下面这段东西(先不管它是什么意思):

然后我们在 和 之间随便打点字:

接着我们保存下这个文本文档,并将后缀改为html:

右键打开方式,选择一个浏览器打开,我们会看到这些内容:

我们随便打的内容显示在了我们平时称为“网页”的东西上。竟然有点小激动。但冷静下来之后我们发现,这个页面好像有点丑。首先,标题和hello world写在了同一行,不是很美观;其次,页面选项卡上的文字是一堆乱七八糟的东西,不太像我们平时打开的网页,比如打开百度后,我们看到的选项卡上的文字是“百度一下,你就知道”:

但我们的网页是这样的:

我们先来解决第一个问题。在“这是一个标题”的两边分别加上 和 ,效果如下:

我们可以发现,不仅标题变大了,而且标题和“hello world”分成了两行显示。据此我们可以推测出,通过添加 和 ,浏览器识别出了标题,将其放大并让标题和其它内容分列在不同的行显示。在HTML中,我们将加尖括号的内容,如 和 ,称为标签。通过对文字添加标签,我们可以给这些文字添加语义,从而在浏览器上显示出不同的内容。例如 和 ,就是给文字添加标题语义的。现在来解决第二个问题。根据上一个问题的解决方案,我们可以很自然地想到添加另外一种标签或许能解决这个问题。事实也的确如此。只不过这个标签比较特别。刚才我们的改动都是在 和 标签之间进行的。因为在 和 标签之间的内容,会被显示“页面”上。但是选项卡的标题并不是在页面上显示的,因此我们把它放在 和 标签之间。在 和 标签之间敲上如下内容:

效果如下:

大功告成!和body标签相对,head标签之间的内容不会显示在页面上。它通常被用来进行设置(如利用title标签更改选项卡的内容),以后学到CSS的时候就会知道页面的样式也是在这里进行设置的。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180501G0NCMY00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券