html文档包括<head>指明,web前端学习(2):开始编写HTML

在第一章中,我们初步了解了上网的过程,同时也明白了所谓网页,其本质就是主要用HTML语言所写的一份文档。相信大多数人在了解HTML文件前,最先接触的是利用“记事本”所写的文档或者是利用办公软件“Word”所建的文档,身为初心者的你可能会问,HTML文档与这些文档又有何差别?在回答这个问题前,让我们尝试着创建这三种文档。

创建我们熟悉的.txt文件,打开它并试着输入文本内容“学而时习之”:

6fd863fcbbd43af667fa2c9594ee8215.png

27c621c1802ebd80dc9c54dda480d4db.png

创建一个.docx文件,打开并输入文本内容“学而时习之”:

adc61cffbd0655b7842a94c0110b394c.png

c7bad24d5a4d4bb3a7d0dc22fa26003b.png

好,现在让我们创建今天的主角——HTML文档。尝试着把“记事本”文档和Word文档的后缀名改为“html”:

8815e86a39b509b5b2a903dbd7beebb6.png

你会发现他们“看上去”都一模一样了,那让我们打开试试:

7f84130a8b0b62ff2b17d57fc15ab26d.png

“记事本”文档

d78112c5959f2399e98679d19407148d.png

Word文档

我们可以通过后缀名改变文件类型,当我们将后缀名改为“html”后,实际上已经创建了“HTML文档”。但是改了文档后缀名后,我们发现出现了不同情况了。当我们将后缀名为“txt”的文档改为“html”后,双击打开文本内容仍然能够正常显示出来;但是,为什么将Word文档后缀名“docx”改为“html”后,双击后文档却显示一大片乱码呢。使用过Word的人应该都明白,Word文本是带有格式的文本,即我们不仅可以输入文本,同时默认地文本已经自带了格式,如字号字体行距等(当然我们还可以主动给文本内容设置各种格式)。显然地,Word文本区别于“记事本”文档以及“html”文档——我们通常将Word这种自带文本格式的文档成为“格式文本”,而剩余的称为“纯文本”。因为Word文档内还包含关于格式的数据,将其后缀名改为“html”后,这些数据难以解释出来,最终出现了乱码。

由上我们可以知道,HTML文档便是纯文本文档。接下来,我将简单介绍HTML文档的主要结构,让我们试着写一个简单的的HTML页面吧!

如上图,整个HTML文档其实分为三个部分,包括部,

部,部;而带有左右尖括号括起来的部分被叫做标签,标签有开始标签和结束标签之分,结束标签就是在做尖括号后加“/”。一般开始标签和结束标签是成对出现的,他们标记在文本两端,必须要有他们来指明内容的结构。这就是所谓的超文本标记语言,标记两字的意义所在。

当我们将记事本文档改为HTML文档后,打开文档我们会发现文档内容能够显示出来,那如果我们想要用HTML语言显示同一文本,又该写下何处,如何写呢?如字面意义所言,文档内容部分,应该是这个网页的躯干,所以我们要将主体文档部分写入

部,如下图代码及效果图。

42fbb4ee9c0af032a63678c972b0bb50.png

那么当我们想要说明一些不属于文档内容却有关于网页的信息时自然就该写进头部了。让我们在

部试着引入标签吧!时习学而时习之

1b0084f774b64e4d57a7807753292435.png

和上图效果图对比,唯一的差别就在于网页的标题变了。这时我们并没有改变网页的文档内容,但是通过在

部写入,我们改变了网页的标题。由此我们可以做一个今天的小总结了,作为纯文本文档的HTML文档由三个部分组成:部,部,部;其中部主要写网页文档内容,部则写网页相关的信息;此外,必须要有标签指明内容的结构,标签一般有开始和结束两种。在练习过程中,你也许会发现少打了几个字或者"/"也能照常显示文档,那是因为HTML是较为宽容的语言,浏览器也会采用宽容模式,尽量将其解释并显示出来。但是如果想要减少错误,就应该从一开始就要有严谨的态度,养成良好的编程习惯。

今天我们开始接触了HTML文档并且亲自尝试了HTML语言编写自己的网页,同时也了解了标签。学习Web前端,首先我们要学超文本标记语言(HTML),这意味着我们以后将遇到更多标签,而当我们掌握得越多,我们将会对HTML理解得更深,同时,也希望你和我一样,能够在遵守一定规则下体会到略带“设计感”的乐趣。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值