第2章 HTML基础入门_从零开始学HTML+CSS-QQ阅读女生短篇网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

第2章 HTML基础入门

HTML是一种标记语言，不管对其他语言有没有了解，通过使用HTML语言，可以创建出各种效果的网页。若使用HTML创建页面，就应先了解该语言的结构特点。本章首先对HTML语言进行简单的介绍，然后通过一个小示例将读者引入HTML的世界，让读者对它有一个直观的概念。

2.1 HTML基本概念

HTML（Hyper Text Markup Language，超文本标记语言）是用来编写网页的语言。超文本就是在普通文本上增加了一些特定标记的文本，因为有了这些标记，普通文字就被赋予了一些特定的含义。HTML语言是很基础的语言，只要掌握HTML语言的标签、元素等就可以建立网页。

2.1.1 HTML简介

HTML是一种用来制作超文本文件的简单标记语言。用HTML编写的超文本文件称为HTML文件，它能独立于各种操作系统平台。自1990年以来，HTML就被全球广域网用做其信息表示语言。超文本文件中包含图片、声音、动画、影视等内容，而不仅是文本信息。另外，超文本文件还可以通过链接从一个页面跳转到另一个页面，从而实现与世界各地的主机相连接。

2.1.2 HTML的基本结构

HTML文件包括文件头（HEAD）和文件体（BODY）两部分。在文件头里，主要是对这个HTML文件进行一些必要的定义，可以省略不写。文件体中的内容才是真正要显示的各种文件信息。

一个HTML文件中包含各种HTML元素，如图片、段落、表格等。这些HTML元素在页面中需要用标记来分隔，因此也可以说HTML文件就是由各种HTML元素和标签组成的。

一般情况下，HTML文件的结构如下。

<html>//HTML文件的开始标记，表示这是一个HTML文件
  <head>//文件头的开始标签，这对标签之间的是头部信息
  头部信息//文件头的内容，也叫做文件的头部信息
  </head > //文件头的结束标签
  <body> //文件体的开始标签
  文件主体，正文部分 //文件的主体部分，是文件真正要先上的文件信息
  </body> //文件体的结束标签
</html > //HTML文件的结束标签

由这段HTML结构代码可以看出，<html>标签在最外层，在这对标签内的就是HTML文件的全部内容。

提示有些页面中会省略<html>标签，这是因为HTML或HTM文件被Web浏览器默认为HTML文件。另外，当HTML文件中不需要头部信息时，可以省略文件头标签。而<body>标签一般不省略，它表示正文内容的开始。

2.1.3 HTML标签

HTML是超文本标记语言，主要是通过各种标签来标示和排列其对象。通常，HTML标签有一对尖括号及其包含的标签元素组成，如<body>和</body>就是一对标签。

在HTML文件中包含3种不同的标签，分别为单标签、双标签及标签属性。

1.单标签

某些标签称为“单标签”，因为它只需单独使用就能完整地表达意思。这类标签的语法如下：

<标签名称>

最常用的单标签是 ，表示换行。

2.双标签

双标签由“开始标签”和“结束标签”两部分构成，必须成对使用。其中，开始标签告诉Web浏览器从此处开始执行该标签所表示的功能，而结束标签则告诉Web浏览器在这里结束该功能。在开始标签的标签名称前加一个斜杠（/）即称为结束标签。这类标签的语法如下：

<标签名称>内容</标签名称>

其中，“内容”就是要被这对标签施加作用的部分。例如，想要对某段文字加粗显示，就可以将这段文字放在一对标签中，语法如下：

<b>需要加粗的文字</b>

3.标签属性

许多单标签和双标签的开始标签内包含一些属性，通过这些属性可以对这些标签进行更进一步的设置。其语法如下：

<标签名字 属性1="属性值" 属性2="属性值" 属性3="属性值" …>

在这段语法中，各个属性之间没有先后次序，属性的值一般使用引号（""）括起来。当属性值为数字时，如设置字号级别时，一般则不使用引号。

2.2 HTML简单示例

前面简单介绍了HTML文件的概念和基本结构，下面通过一个简单的HTML实例来引导读者学习HTML标签，了解HTML文件的创建和运行方式。

2.2.1 第一个HTML文件

HTML文件对其编写工具的要求并不高，可以在最简单的文本编辑工具中实现。下面就使用记事本来编写第一个HTML文件，其具体步骤如下。

（1）新建一个名称为“第一个HTML代码简单示例”的记事本文件，如图2-1所示。

图2-1 “第一个HTML代码简单示例”记事本文件

（2）在记事本中直接输入代码2-1的内容。

【代码2-1】第一个HTML代码简单示例。

<html>
  <head>
    <title>第一个HTML代码简单示例</title>
 </head>
 <body>
   <h2 ALIGN="center">第一个HTML文件</h2>
   <p>下面开始进入HTML的领域</p>
   <p>来领略这个奇妙而多彩的世界！！</p>
  </body>
</html>

（3）输入代码后，保存该记事本文件。

（4）目前记事本文件的扩展名是“.txt”，我们需要动手把扩展名修改为“.html”或“.htm”。这时，会弹出“重命名”对话框，如图2-2所示。

（5）单击“是”按钮，如图2-3所示。

图2-2 “重命名”对话框

图2-3 更改扩展名后的文件

这时，记事本文件的扩展名已经修改了。

2.2.2 查看效果

编写好文件的源代码并保存后，就可以通过IE浏览器来查看HTML文件的页面效果。双击文件的图标打开该文件，其效果如图2-4所示。

图2-4 示例运行效果

在这段代码中包括如下几个元素。

HTML的基本标签：包括文件类型标签<html>、文件头标签<head>和文件主体标签<body>。
HTML的标题：一般通过页面标题来区分不同的页面，这里设置为“第一个HTML文件”，需要使用<title>标签。

HTML的页面内容：在页面中插入了两种HTML元素，分别是一个二级标题及两段文字。这两种元素使用的标签不同，显示的效果也不同，在后面的章节中还将详细介绍，这里不再赘述。

2.3 HTML的基本元素

在“代码1-1”文件里出现了4个HTML元素，分别为HTML、HEAD、TITLE和BODY。一个完整的HTML文件应该包含这4个基本元素，下面分别介绍这4个基本元素的含义和用法。

1.HTML元素

HTML元素用于声明该文档是一个HTML文档。从理论上来说，任何一个HTML文档的第一行都应该是<html>开始标签，标志着HTML文档开始；最后一行应该是</html>结束标签，标志着HTML文档结束。

提示为什么说是“理论上”的呢，因为现在的浏览器的纠错功能实在是太强了，就算HTML文档里没有HTML元素，它们一样可以把扩展名为.htm或.html的文件当做HTML文档来读取并显示。尽管如此，还是建议读者使用HTML元素，让自己编写的文档都规范化，是百利而无一弊的事情。

HTML元素都包含两个部分，一部分是标头部分，用于描述HTML文档，不在浏览器中直接显示；另一部分是正文部分，该部分的内容除标签与注释外，都会在浏览器中直接显示。

标头部分是用“<head></head>”标签标识的部分，正文部分是用“<body></body>”标签标识的部分。下面将分别介绍这两个HTML元素。

2.HEAD元素

HEAD元素用于标记HTML文档的标头部分，标头部分包含文档的标题、作者、参考信息等内容，但一般来说，多数HTML文件只在标头部分包含了标题信息。

在标头部分除了放置标题、作者、参考信息外，还放置如脚本、文档样式都不需要直接在浏览器里输出的所有信息。这些信息在后面的章节中将会详细介绍。

3.TITLE元素

TITLE元素用于标记HTML文档的标题，其标注内容会在浏览器的标题栏里显示。虽然在一个HTML文档里，可以省略标题标签，但是这个标题常用来对文档进行索引和参考，因此还是建议每个网页编写者都不要省略该元素，并且标题越细致越好。

“<title></title>”标签应该放置在“<head></head>”标签内。

4.BODY元素

BODY元素与HEAD元素是并列关系，都应该放在“<html></html>”标签内。“<body></body>”标签不应该放在“<head></head>”标签内，“<head></head>”标签也不应该放在“<body></body>”标签内。

BODY元素包含的是正文部分，当浏览器查看HTML文档时，也只会显示正文部分的内容，后继章节里学到的其他HTML元素也都是放在“<body></body>”标签内的。

2.3.1 HTML元素与标签的结构

因为HTML是标记性语言，所以HTML是由众多标签组成的，学习HTML语言也就是学习这些标签及其代表的含义的过程，下面先看一个简单的HTML代码。

【代码2-2】有两行文字，第一行文字为：“HTML，你好！”，其中，“HTML”加粗；第二行文字为：“谢谢，我很好。”。下面的代码只写了BODY元素中的内容，代码如下：

<b>html</b>，你好！<br>谢谢，我很好。

该代码的运行效果如图2-5所示。

图2-5 代码运行效果

在上述代码中，“”、“”和“ ”都是HTML的标签。使用HTML标签的注意事项如下：

（1）标签都是以“<”开始，以“>”为结束的字符串，在“<”与“>”之间包含的是HTML的元素及其属性。HTML元素的属性将在2.3.2节介绍，但是并不是每个元素都会包含属性，在本例中的“”标签与“ ”标签里的元素都是不包含属性的。

（2）标签里包含的必须是HTML语言中的有效元素，如果在“<”与“>”之间包含的不是HTML的元素，那么“<”与“>”之间的文字将会被忽略。代码如下：

<b>html</b>，你好！<thanks>谢谢，我很好。</thanks>

该代码运行效果如图2-6所示。

图2-6 代码运行效果

在图2-6中可以看出，因为HTML语言里没有“thanks”元素，因此包含在“<”与“>”之间的内容将被忽略。

（3）大多数标签都是成对出现的，如上面的“”标签与“”标签就是一对标签，其中“”标签是开始标签、“”标签是结束标签。结束标签里只包含HTML元素，不包含元素的属性，并且在元素前要增加一个“/”符号。

（4）包含在开始标签与结束标签之间的文本才是受标签元素影响的文本。如本例中，“”标签的意思是加粗字体，那么只有包含在“”标签与“”标签之间的文字才会被加粗。

（5）并不是所有标签都是成对出现的。例如，本例中的“ ”标签就没有结束标签，其含义为“换行”。

（6）HTML语言中的标签不区分大小写，“”标签与“”标签是同一个标签。

2.3.2 元素的属性

在HTML里有很多元素都是有属性的，它们为包含在其中的文本提供多种选项，其语法如下：

<标签名字 属性1="属性值" 属性2="属性值" 属性3="属性值" …>

在这段语法中，各个属性之间没有先后次序，属性的值一般用引号“""”括起来。当属性值为数字时，如设置字号级别时，一般不使用引号。

【代码2-3】有两行文字，第一行文字为“HTML，你好！”，其中，“HTML”设置为红色字体；第二行文字为“谢谢，我很好。”，其中，“谢谢”设置为5号字体，“我很好”设置为7号、蓝色字体。下面的代码只写了BODY元素中的内容，其代码如下：

<font color="red">HTML</font>，你好！<br>
<font size="5">谢谢</font>，<font color="blue" size="7">我很好。</font>

该代码的运行效果如图2-7所示。

图2-7 代码运行效果

在代码2-3中，“”标签里“font”是HTML的元素，用于设定字体属性；“color”是“font”元素的属性；“red”是“color”的属性值，也就是红色。

在使用元素的属性时有以下几点需要注意。

（1）元素与元素属性必须要放在同一个标签里，也就是说，元素属性与元素都必须放在同一个“<”与“>”符号之内。以下代码是不正确的：

<font><color="red">你好</font>

（2）元素与元素属性之间必须要用空格分开，以下代码是不正确的：

<fontcolor="red">你好</font>

（3）元素的属性值可以用“"”或“’”括起来，也可以不用。以下3行代码的运行效果是一样的：

<font color="red">
<font color=’red’>
<font color=red>

（4）如果元素的属性值中含有空格时，就必须要用“"”或“’”号括起来。例如，以下两行代码的运行效果是不一样的：

<a href="#" title="this is my html">
<a href="#" title=this is my html>

在上述代码中，第1行标签里的“title”属性的值为“this is my html”，而第2行标签里的“title”属性的值为“this”。

（5）一个标签里只能包含一个HTML元素，但是一个标签里可以包含多个HTML元素的属性，多个元素属性之间用空格隔开。在代码2-3中的“”标签里，“color”与“size”都是“font”元素的属性，它们可以同时出现在同一个标签里。其中“size”属性是指定文字大小，其值可以为1～7。由于在“font”元素里同时指定了“color”与“size”属性，所以包含在“”标签与“”标签里的文字既是蓝色又是7号大小的字。

（6）元素的属性也不区分大小写，以下几行代码的运行效果是一样的。

<font color="red">
<font COLOR="red">
<font color="RED">

（7）当输入的属性不属于标签内的元素里，浏览器将会忽略该属性，代码如下：

这是一行普通文字<br>
<a href="#" size="7">这是一个超链接</a>

以上代码的运行效果如图2-8所示，在图中可以看出，虽然在“a”元素里指定了“size”属性，但是因为“size”属性是属于“font”元素而并非属于“a”元素的，所以浏览器会忽略该属性。

图2-8 代码运行效果

注意在HTML中有很多标签的属性都是通用的。例如，TITLE属性在大多HTML元素里都可以使用，因此在本书中这种具有通用性的属性只进行一次介绍，在其他元素中如果再有相同的属性就不再赘述。

2.3.3 嵌套标签

在HTML语言，标签是允许嵌套的。所谓嵌套是指在一个标签里包含着另一个标签。位于嵌套标签里的文字可以拥有这些标签的所有属性。

为了更好地理解标签的嵌套，下面介绍以下3个HTML标签。

：包含在这对标签内的文本将会被加粗。
：包含在这对标签内的文本会显示为斜体。
：包含在这对标签内的文本将会被加上下画线。

【代码2-4】将“学习HTML语言很简单”这句话加粗，将“只要努力学习、积极思考”这句话倾斜，将“会做出属于自己的网页”这句话加下画线；并且将这3句话分成3行显示。主体代码如下：

<b>学习HTML语言很简单</b><br>
<i>只要努力学习、积极思考</i><br>
<u>会做出属于自己的网页</u><br>

该代码的运行效果如图2-9所示：

图2-9 代码运行效果

其中，加粗、倾斜、下画线这3种HTML标签可以分为几种情况来使用，如下所示。

（1）如果对“学习HTML语言很简单，只要努力学习、积极思考”这句话既要显示粗体，又要显示为斜体，那么就可以使用以下代码：

<b><i>学习HTML语言很简单，只要努力学习、积极思考</i></b>

其运行效果如图2-10所示，在本例中，“”与“”标签里嵌套了“”与“”标签，所以包含在这两对标签内的文字既显示粗体又显示斜体。

图2-10 代码运行效果

（2）如果对“学习HTML语言很简单，只要努力学习、积极思考”这句话中的“努力学习”加粗与倾斜，那么代码如下：

<b>学习HTML语言很简单，只要<i>努力学习</i>积极思考</b>

其运行效果如图2-11所示，图中只有“努力学习”4个字是同时拥有加粗与倾斜两种属性的。因为只有这4个文字是既包含在“”与“”标签里又包含在“”与“”标签里，其他的文字只包括在“”与“”标签里，所以不会拥有倾斜的属性。

图2-11 代码运行效果

（3）将“学习HTML语言很简单”这句话加粗；将“只要努力学习、积极思考”这句话加粗、倾斜；将“会做出属于自己的网页”这句话加粗、加下画线：

<b>学习HTML语言很简单<i>只要努力学习、积极思考</i> <u>会做出属于自己的网页</u></b>

其运行效果如图2-12所示，从图中可以看出，在“”与“”分别嵌套了“”与“”标签和“”与“”标签。但是只有既包含在“”与“”标签里又包含在“”与“”标签里的文字是同时拥有加粗与倾斜两种属性的。同样，也只有既包含在“”与“”标签里又包含在“”与“”标签里的文字是同时拥有加粗与下画线两种属性的。

图2-12 代码运行结果

在HTML中，标签的嵌套可以是很多层，嵌套层数越深，在其内部的文字所拥有的属性就越多。值得注意的是，HTML中的嵌套是不能交叉的，以下两行代码是错误的：

<b><i>文字</b></i>
<b><i><u>文字</i></u></b>

提示目前大多数浏览器都有强大的纠错能力，即使HTML代码写得不太符合规范，浏览器也不会报错。这里还是建议每个人都要规范来编写HTML代码。

2.3.4 空格与特殊字符

目前市场上常用的浏览器通常都会忽略HTML文档中标签之外的空格。以IE7为例，它会把两个连续标签之间的多个连续空格当做一个空格来显示，而如果不是连续标签之间的多个连续空格则不显示，请看以下代码：

<b>快乐的奥妙</b> <i>为现在而活</i><br>
你所拥有的只是现在。内心的平静，工作的成效，都决定于我们要如何活在现在这一刻。不论昨天曾发生过什么事，也不论明天有什么即将来临，你永远置身“现在”。从这个观点来看，快乐与满足的秘诀，就是全心全意集中于现在的每一分、每一秒之上。

其运行效果如图2-13所示，在图中可以看出，在“快乐的奥妙”与“为现在而活”两个短语之间只有一个空格，则第2行中的空格则一个都没有显示。

图2-13 代码运行效果

提示除了空格外，在HTML代码中的换行在浏览器里也不会显示。

如果要在网页中显示空格，则必须要以“&nbsp；”来代替空格。将以上代码修改如下：

<b>快乐的奥妙</b>&nbsp；&nbsp；<i>为现在而活</i><br>
&nbsp；&nbsp；&nbsp；&nbsp；你所拥有的只是现在。内心的平静，工作的成效，都决定于我们要如何活在现在这一刻。不论昨天曾发生过什么事，也不论明天有什么即将来临，你永远置身“现在”。从这个观点来看，快乐与满足的秘诀，就是全心全意集中于现在的每一分、每一秒之上。

其运行效果如图2-14所示，在图中可以看出，每一个“&nbsp；”在浏览器里都显示为一个空格。

图2-14 代码运行效果

除了空格外，在HTML代码里常用到的“<”、“>”、“””3个符号，在输出到浏览器时都必须要转换一下才可以使用，表2-1中列出了需要转换的字符。

表2-1 需要转换的字符

2.4 小结

本章主要讲解了HTML的一些基础知识及结构，希望读者能理解、掌握。本章的重点是如何去编写HTML文件，掌握HTML的基本结构；难点是掌握HTML的基本元素、标签及其属性等，后面也会涉及其他属性的设置。第3章将要学习HTML的应用。

2.5 习题

【习题1】什么是HTML，它的基本结构是什么？

【习题2】HTML的基本元素有哪些？

【习题3】写一段HTML文件，要求：

（1）将“学习HTML语言很简单”这句话设置字体为黑体、加下画线，蓝色字体；

（2）将“只要努力学习、积极思考”这句话加粗，5号字体；

（3）将“会做出属于自己的网页”这句话倾斜，超链接。

【习题4】把“学习HTML语言很简单，只要努力学习、积极思考，会做出属于自己的网页”这3个短句之间用两个空格隔开。