![Web全栈开发:从入门到实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/499/40778499/b_40778499.jpg)
3.1 HTML:一门关于标记的语言
HTML的英文全称是Hypertext Marked Language(超文本标记语言),所谓超文本,就是它的用途超越了纯文本。HTML实际上是由多个具有特殊含义的标签组成,这些标签主要用于定义网页中的文字、图片、视频、音频等内容在网页中显示的格式,从而让浏览器知道如何将这些多媒体内容正确地显示在用户的屏幕上。然而,HTML并不算是一门真正的编程语言,它只能算是一门标记语言。
为什么说HTML不算是一门编程语言?
HTML是一门标记语言,但严格来说,不能算是编程语言,因为它不具备大多数编程语言(比如Java、C)的逻辑性,即它自身无法完成逻辑判断、流程控制、循环操作等功能。同时,HTML文档必须按照W3C的标准来书写,不允许用户自定义。但是,它在Web开发中的重要作用却是无可替代的。
3.1.1 普通文本VS超文本
先来说说我们熟悉的普通文本,在任何一款文字编辑工具里(比如Word),输入一段文字就是默认的普通文本,但当你想要对其加粗,就要选中该段文字,并选择B对应的工具图标就能搞定。而在网页中,则需要依靠一对标签(又称标记)来明确指出加粗的含义,这对标记是<b></b>。为了更清楚地看出对比效果,可以在浏览器中打开一个空白页面,即在地址栏输入about:blank,然后按下F12,找到Element选项卡,右击Edit as HTML,并在一对<body>标签内部输入以下两行文字:
![](https://epubservercos.yuewen.com/2FB90A/21182128908301306/epubprivate/OEBPS/Images/img00036001.jpg?sign=1738945466-46QYBfiWGiJBU0Lz7366C2ElcFFeh5FT-0-42702dd581773181645076c752fdfb53)
最终,可以看到网页上多了一段字,如图3.1所示。可以明显看出,由于<b>标签的作用,普通文本被加粗了。这里的<b>就是HTML中的一个标签。
![](https://epubservercos.yuewen.com/2FB90A/21182128908301306/epubprivate/OEBPS/Images/img00037001.jpg?sign=1738945466-rErAFrfMlCUxP9Wn1ncfsKG5hHxO7PjP-0-33b444fd07e06d978e9403ceae94c876)
图3.1
通过上面的对比可知,普通文本只能呈现出单一的状态,而超文本则可以实现更多可能,这大概就是它超级的地方。然而,你可不要以为HTML就这点儿本事,只是对文字做文章。它超级的功能还在于能标记出图片、声音、超链接、视频等多种多媒体内容以及表格、表单等多种格式。而所有这些都需要通过标签去定义,进而浏览器才能解析这些标记,并将内容正确地显示在网页上。由于HTML是一门由W3C标准制定的多种标记组成的语言,所以它被称为超文本标记语言,简称HTML。
W3C是干什么的?
W3C(World Wide Web Consortium,全球万维网联盟)是一个国际组织,专门负责明确万维网的发展方向,并制定Web应用相关的标准。该组织规定了HTML和CSS等网络语言的规范,从而保证全球的Web应用都按照同一个标准编写Web应用,这样更又利于协同合作。更重要的是,这些规范需要各种浏览器和网络设备能够遵守,从而更广泛地支持Web应用。
3.1.2 标签的基本用法
HTML是由大量标签组成的,可以说标签是HTML的基本组成单位,它定义了网页内容的呈现方式。一般来说,标签是指由尖括号包围的关键词。其中,第一个标签是开始标签,第二个是结束标签,中间则是网页的内容。
![](https://epubservercos.yuewen.com/2FB90A/21182128908301306/epubprivate/OEBPS/Images/img00037002.jpg?sign=1738945466-I7acjUgf2MLzLLDv7mZ0DrQReihvJmlE-0-113566a8ef9a327ee1ac5c7aaa617723)
到底是标签还是标记?
标签和标记其实是同义词,两者经常互换。所以,标签等同于标记。每一个标签都代表着不同的含义。
标签通常都是成对出现,因此,又称双标记,包括<b><i><a><span><form><table><tr><td><ul><li><button>等。但偶尔也会以单个形式呈现,又称单标记,它们一般只有结束标记,而且在右侧的尖括号前。比如,<hr/><br/><img/><input/>。注意:单标记无法将网页内容包裹起来,因此,它们一般通过属性来定义内容。比如<img>图像标记:
![](https://epubservercos.yuewen.com/2FB90A/21182128908301306/epubprivate/OEBPS/Images/img00037003.jpg?sign=1738945466-C18V9616eDxRacSBry6WP6l4MGV5VxDY-0-987866ec9200139bf0335c23a218cfca)
通过src属性,可以指定一个图像文件的路径。
3.1.3 属性的基本用法
标签内部都是可以添加属性的。当我们描述一个人时,可以说他是长发、单眼皮、高鼻梁等属性;对应的,标签也可以有类似的属性,一个属性的定义方式为一个键值对。
![](https://epubservercos.yuewen.com/2FB90A/21182128908301306/epubprivate/OEBPS/Images/img00038001.jpg?sign=1738945466-Ihzit0napL1Ut5IIQp0sYPsg04mwBAEJ-0-c731aa6ed6eb82bfab7c92991fd7b880)
属性总是在开始标签或单标签中定义,基本用法如下:
![](https://epubservercos.yuewen.com/2FB90A/21182128908301306/epubprivate/OEBPS/Images/img00038002.jpg?sign=1738945466-b7D0qDCdl3cymeLJj6e1mKofYjCGIenV-0-910a0de4b9541f748ea89c8ba0e1eb6e)
属性的作用是定义网页内容的呈现形式,比如<p align=“center”>是让一个段落文字居中对齐显示。一个标签可以有多个属性,每个属性之间用空格隔开。
关于标签和属性,更复杂但也更常见的是标签的嵌套使用,也就是标签内嵌套其他标签:
![](https://epubservercos.yuewen.com/2FB90A/21182128908301306/epubprivate/OEBPS/Images/img00038003.jpg?sign=1738945466-2IBIMelMyKhxcuS560rribKlbszDJ0yU-0-b0932256d752ea5f656dbb7ba9047f10)
比如,让一张图片成为超链接,即超链接图片,其中<a>代表超链接,HTML代码如下:
![](https://epubservercos.yuewen.com/2FB90A/21182128908301306/epubprivate/OEBPS/Images/img00038004.jpg?sign=1738945466-I5zlnJ0k5l8BLSqsjMmDXlg7a73MTuZv-0-573ac8eec03835006de9a649d373ed16)
再比如,一个form表单里,有一个登录按钮,其中<form>表示表单,<button>表示按钮,HTML代码如下:
![](https://epubservercos.yuewen.com/2FB90A/21182128908301306/epubprivate/OEBPS/Images/img00038005.jpg?sign=1738945466-V6R8kK53vXX87Ubl4vHIezpD1NFqlRnE-0-fa70ac8002943813d96a0fbe187d8bd5)
紧急支招
问:一上来就要记那么多标签,根本记不过来,怎么办?
答:目前,所有的标签不需要一下全部记住,正确的做法是通过多使用,慢慢理解并体会其中的含义,从而让印象更加深刻。
在一个典型的Web页面中会有多种不同形式的文字和各类多媒体内容。接下来,我们来通过做不同的任务,认识并熟悉更多的标记。还有一点不得不提示你,HTML中很多关于定义内容的样式,都不建议再使用HTML中的属性,而是采用后续提到的CSS。