首页 问答社区 PHP技术 正文

《HTML5从入门到精通》——第2章 HTML详解

2022-10-11 20:53:32 166 0
魁首哥


◎千锋教育高教产品研发部/编著

（清华大学出版社出版）

第2章 HTML详解


本章学习目标

  • 了解HTML语法的发展历史

  • 了解HTML语义化

  • 掌握 html 常用标签的基本使用

第一章已经介绍过HTML是一门超文本标记语言，通过HTML标记对网页中的文本、图片、声音等信息进行描述。但是具体如何使用HTML标记对网页中的信息进行控制，没有介绍，本章就将从HTML的历史、语义化、常用标签三个方面详细讲解HTML。

第1章

1.1 HTML历史

俗话说“了解历史，才能明白当下，进而展望未来”。所以了解HTML的历史，有利于更好的掌握HTML这门语言。

1.1.1 HTML历史版本

　　像大多数软件、硬件一样，HTML发展至今，经历了几个版本，新增了许多HTML标记，同时也淘汰了一些标记，接下来介绍HTML在不同时期所对应的一些重要版本，具体如下：

超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）

  • HTML 2.0——1995年11月，IETF推荐标准。

  • HTML 3.2——1997年1月14日， W3C 推荐标准。

  • HTML 4.0——1997年12月18日，W3C推荐标准。

  • HTML 4.01——1999年12月24日，W3C推荐标准。

  • HTML 5——2014年10月28日，W3C推荐标准。

　　HTML没有1.0版本，最早的HTML官方规范，是由IETF（Internet Engineering Task Force，因特网工程任务组）发布的HTML 2.0。之后W3C成为HTML语言标准的制定者，发布了3.2、4.0、4.01和5等多个后续重要版本。通常所说的HTML5指的就是5这个最新的版本。

　　本教材涉及的所有规范及语法，都是严格按照HTML5标准进行讲解的，在后面的章节中还会详细的介绍HTML5及相关内容。

1.1.2 HTML与 XHTML 关系

　　在HTML语法上很宽松，如标签和属性可以是大写、小写，或者任意大小写字母的组合，标签可以不闭合等。有些设备很难兼容这些松散的语法，如手机、打印机等，这并不符合标准的发展趋势，因此1999年12月W3C推出了HTML4.01版本后解散了HTML工作组。转而开发XHTML，2000年1月26日发布XHTML1.0。

　　XHTML是更严谨纯净的HTML版本，XHTML比HTML语法更加规范和严谨，目的是为了实现HMTL向XML过渡，让作者按照统一的风格来编写标签，HTML中标签和属性不区分大小写，而有效的XHTML 文档则要求所有标签和属性必须一律小写，当然还有一些其他的规范和要求，这里不再赘述。XML虽然数据转换能力强，完全可以替代HTML，但是面对互联网上大量基于HTML编写的网站，直接采用XML还为时过早，因此在HTML4.0的基础上，用XML的语法规则对其进行扩展，得到了XHTML。

　　注：XML指可扩展标记语言（EXtensible Markup Language），用来传输和存储数据。XML语言也可以做为很多语言的基础语言，例如：XHTML、SVG等。

　　HTML的不同版本对DOCTYPE >写法也有不同，具体如下：

　　HTML4.01中写法：

　　

　　https://www.zhihuclub.com/%E2%80%9D%E2%80%9D>

　　XHTML1.01中写法

　　

　　https://www.zhihuclub.com/%E2%80%9D%E2%80%9D>

　　HTML5中写法

　　

　　因为 HTML 4.01和XHTML1.0 基于 SGML，所以 DOCTYPE 需要对 DTD 进行引用。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，因此HTML5的DOCTYPE写法相当简单。这里建议读者都采用最新的HTML5版本写法，第一章已经介绍过在DW工具中默认设置不同类型的文档声明。

1.2 什么是HTML语义化

　　所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。HTML语义化的意义主要有以下几点：

  • 在没有CSS的情况下，页面也能呈现出很好的内容结构、代码结构。

  • 有利于SEO，让搜索引擎爬虫更好的理解网页，从而获取更多的有效信息，提升网页的权重。

  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

  • 便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。

　　HTML标签都具备语义化，根据网页展示的内容结构，选择正确的HTML标签进行解析与编码。

　　注： SEO是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目的。

1.3 HTML常用标签

　　HTML标签非常多，有些由于历史问题已经废弃，有些属于HTML5中新添加的，这部分H5新标签会在H5章节中给读者讲解，本章主要讲解一些HTML中常用标签的使用。

1.3.1 标题标签

　　浏览新闻类网页时，经常能看见文章的标题，如图2.1所示。

图2.1 千锋教育新闻标题

　　图2.1的标题就是用HTML中的标题标签来实现的，HTML中使用

、

、

、

、

、
等标签来定义标题部分，其语法格式如下：

　　标题文本

　　接下来通过案例来演示标题标签，如例2-1所示。

1

2

3

4

5 定义标题

6

7

8

这是一级标题

9

这是二级标题

10

这是三级标题

11

这是四级标题

12

这是五级标题

13

这是六级标题

14

15

运行结果如图2.2所示。

图2.2 标题标签显示效果

　　从上例运行结果可以看出，默认情况下标题文字的显示方式是加粗左对齐，并且从

到

字号递减，如果想改变标题的对齐方式，需要用到align属性，其取值如表2.1。

表2.1 align取值表

　　接下来通过案例来演示标题标签对齐方式的设置及效果，如例2-2所示。

1

2

3

4

5 定义标题对齐方式

6

7

8

这是一级标题

9

这是二级标题

10

这是三级标题

11

这是四级标题

12

13

运行结果如图2.3所示。

图2.3 标题对齐方式显示效果

　　标题很重要，它有利于网页搜索引擎的优化，其中

标题的重要性最高，

标题的重要性最低，一般一个页面只能有一个

，而

~

可以有多个。

1.3.2 段落标签

浏览新闻类网页时，经常能看见文章的段落，如图2.4所示。

图2.4 千锋教育新闻段落

　　图2.4中的段落在HTML中使用

标签实现，用于在网页中把文字有条理地显示出来，其语法格式如下：

　　

段落文本

　　接下来通过案例来演示段落标签，如例2-3所示。

1

2

3

4

5 段落标签

6

7

8

扣丁学堂

9

扣丁学堂是中国IT培训教育品牌领导者,拥有最新最全的IT培训视频课

10 程,专注于发布和更新iOS培训、Android培训、HTML5培训、UI培训、PHP培训视频教程,

11 着力于培养移动互联网人才。

12

遇到IT技术难题，就上扣丁学堂学堂。

13

14

运行结果如图2.5所示。

图2.5 段落标签显示效果

1.3.3 文本格式化标签

文本格式化标签就是针对文本进行各种格式化的标签，例如加粗、斜体、上标、下标等。如表2.2所示。

表2.2 文本格式化标签

　　表2.2中列出了对文本格式化的几种标签，下面将详细介绍这几种标签的使用和效果。

1. 标签

标签将文本定义为语气更强的强调内容，展示效果为加粗。接下来通过案例演示标签，如例2-4所示。

1

2

3

4

5 文本格式化

6

7

8 用良心做教育！

9

10

运行结果如图2.6所示。

图2.6 strong标签显示效果

　　注意：标签的展示效果跟完全相同，但是标签不具备语义化强调的作用，只是显示加粗效果。

2. 标签

标签也是将文本定义为强调的内容，只不过比标签强调的稍弱些，展示效果为斜体，接下来通过案例来演示标签，如例2-5所示。

1

2

3

4

5 文本格式化

6

7

8 用良心做教育！

9

10

运行结果如图2.7所示。

图2.7 em标签显示效果

　　注意：标签的展示效果跟完全相同，但是标签不具备语义化强调的作用，只是显示斜体效果。

3. 和标签

　　标签用于将文本定义为上标文本，标签用于将文本定义为下标文本，接下来通过案例来演示和标签，如例2-6所示。

1

2

3

4

5 文本格式化

6

7

8

a2+b2=c2

9

H2O

10

11

运行结果如图2.8所示。

图2.8 sup、sub标签显示效果

4. 和标签

　　 标签可用于定义已被删除的文本， 标签可用于定义已经被插入的文本，标签与标签配合使用，来描述文档中的更新和修正。接下来通过案例来演示和标签，如例2-7所示。

1

2

3

4

5 文本格式化

6

7

8

删除文本加删除线

9

插入文本加下画线

10

11

运行结果如图2.9所示。

图2.9 del、ins标签显示效果

文本格式化标签，一定要根据它们的语义来记忆，至于它们的默认样式，后续可以通过CSS方式进行修改。

1.3.4 引用标签

引用标签就是针对文本进行各种引用的标签，例如缩略词、短语解释、著作、地址等。主要划分成几大类，如表2.3所示。

表2.3 引用标签分类

　　表2.3中列出了引用标签的几种分类，下面进行详细介绍。

1.

和标签

　　

和标签都是对文本的解释引用，
标签引用是用大段的段落进行解释，而标签引用是小段的短语进行解释，接下来通过案例来演示
和标签，如例2-8所示。

1

2

3

4

5 文本格式化

6

7

8

”死而后已”一语出自 诸葛亮 《 出师表 》：

“凡事如是，难可逆见，

9 臣鞠躬尽瘁，死而后已，至于成败利钝，非臣之明所能逆睹也。”

10

WWF 的目标是：构建人与自然和谐共存的世界。

11

12

运行结果如图2.10所示。

图2.10

、标签显示效果

　　由例2-8中可以看出，

标签左右会空出一些距离，标签会自动加上引号。

2. 标签

　　标签用来引用缩写或首字母缩略语，接下来通过案例来演示标签，如例2-9所示。

1

2

3

4

5 引用标签

6

7

8

WHO

9 成立于 1948 年。

10

11

　　运行结果如图2.11所示。

图2.11 标签显示效果

　　例2-9中可以看到一个title属性，当鼠标移入到设置title的区域时，就会显示提示信息。

3.

和标签

　　

标签用来引用地址信息，标签用来引用著作的标题，展示效果为斜体，接下来通过一个案例来演示
和标签，如例2-10所示。

1

2

3

4

5 引用标签

6

7

8

9

网易北京公司

10

地址:北京市海淀区西北旺东路10号院

11

邮编:100084

12

13

资治通鉴由北宋司马光主编的一部多卷本编年体史书

14

15

运行结果如图2.12所示。

图2.12

、标签显示效果

1.3.5 水平线标签

　　有时为了使文档结构清晰、层次分明，常常需要在网页中添加一些水平线将段落与段落之间分隔开，HTML中使用

标签来创建横跨网页的水平线。另外
属于单标签，在网页中输入一个
标签，就添加了一条默认样式的水平线，
标签的常用属性如表2.4所示。

表2.4 水平线标签属性

　　接下来通过案例来演示水平线标签，如例2-11所示。

1

2

3

4

5 水平线标签

6

7

8

扣丁学堂

9

10

遇到IT难题，就上扣丁学堂。

11

12

遇到问题，在线解答。

13

14

运行结果如图2.13所示。

图2.13

标签显示效果

　　例2-11中，第9行定义水平线标签，并设置了color、width、size属性，并没有设置align属性，可以发现align属性默认居中对齐，第11行定义水平线标签，其属性都是默认值，可发现width属性默认的是浏览器窗口的100%。

1.3.6 特殊符号

　　在编写一些文本时，经常会遇到输入法无法输入的字符，如®（注册商标）、©（版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码，如表2.5。

表2.5 特殊字符代码

　　接下来通过案例来演示这些特殊字符表示代码，如例2-12所示。

1

2

3

4

5 特殊符号

6

7

8

®注册商标 ©版权 空格 < 小于号 >大于号

9

&和号 ¥人民币 °摄氏度 ±正负号 ×乘号

10

÷除号 ¹上标1 ²上标2 ³上标3

11

12

　　运行结果如图2.14所示。

图2.14 难输入符号显示效果

　　在DW中，只要输入一个&符号，就可以看到相关特殊符号的提示信息。如图2.15所示。

图2.15 DW中特殊符号提示功能

1.3.7 图像标签

每一张网页都离不开图片元素，在网页中添加图片是非常重要的操作，如图2.16所示。

图2.16 图片效果展示

　　HTML中使用标签来添加图片，属于单标签，其语法格式如下

　　

　　其中src是用于指定图像文件的路径和文件名的属性，是img标签的必需属性。接下来用案例来简单演示img标签的使用。如例2-13所示。

1

2

3

4

5 图像标签

6

7

8

9

10

运行结果如图2.17所示。

图2.17 图像标签显示效果

　　src属性引用的是当前图片的地址，图片的名为qianfeng，图片的格式为.png，接下来针对图片的地址和图片的格式进行详细讲解。

1. 图片的地址

　　src属性引用的是当前图片的地址，所谓地址就是一个文件的路径。读者在网页中通过地址来找到相应位置的元素。那么地址分为相对地址与绝对地址，相对地址即被引入的文件相对与当前页面的地址。绝对地址即文件在网络或本地的绝对位置。

　　相对地址有以下三种写法，具体如下。

　　

　　

　　

　　第一个相对地址说明当前页面和图片在同一个目录下。第二个相对地址说明图片在页面同级的img文件夹中。第三个相对地址说明图片在页面上一级的img文件夹中。

　　绝对地址有以下两种写法，具体如下。

　　

　　

　　第一个绝对地址在本地D盘的相应文件夹下。第二个绝对地址在网络中的相应文件夹下。

　　当前网页和图片文件如果同时移动到其他位置时，相对地址是不会出问题的，因为两个文件的相对位置并没有发生变化。而绝对地址则会有问题，因为地址是唯一的路径。所以在开发网页的时候建议读者尽量采用相对地址。

2. 图片格式

　　网页中加载图像如果太大会造成网页加载速度慢，太小图片会显示不清晰，在网页中选择合适的图片格式加载显得尤为重要，常用的图片格式主要有jpg、png和gif三种格式，接下将分别进行详细讲解。

（1）jpg格式

　　jpg格式的图片是一种有损压缩的图像格式，即每次修改图片都会造成一些图像数据的丢失。jpg是特别为照片图像设计的文件格式，可以很好地处理大面积色调的图像，一般在网页中用来展示色彩丰富的图像。如图2.18所示。

图2.18 jpg格式图片显示效果

（2）png格式

　　png格式的图片相对于jpg、gif格式最大的优点是体积小，支持alpha透明（全透明、半透明、全不透明），可以很好地理透明方式的图片，比如网页中的logo图片可以在不同的背景底色下完美展现。如图2.19所示，但png不支持动画。另外需要注意，IE6,可以支持png-8，但是在处理png-24的透明时会显示为灰色。通常，图片保存为png-8会在同等质量下获得比gif更小的体积，而半透明的图片只能使用png-24。

图2.19 png格式图片显示效果

（3）gif格式

　　gif格式图片最重要的特点是支持动画，可以很好地处理动画效果的图片，如网页中的广告图片。如图2.20所示。同时gif是一种无损的图像格式，修改图片几乎不会造成图像数据的丢失。而且gif也支持透明（全透明和全不透明），因此很适合在网页中使用。但gif只能处理256种颜色，在网页制作中，常用于logo、小图标及其他色彩相对单一的图像。

图2.20 gif格式图片显示效果

　　标签除了src属性外，还包括一些其他属性，如表2.6所示。

表2.6 img标签的属性

　　表2.6中简单描述了img标签中常用的属性，为了使初学者更好地理解和应用这些属性，接下来进行详细讲解。

1. alt属性

　　alt属性是图片显示不出来时的提示文字。当设置了alt属性后，如果图片正常显示的话，是看不到任何效果的，只有当图片地址出问题导致图片不显示时，才可以看到alt的提示信息。接下来通过案例来演示alt属性，如例2-14所示。

1

2

3

4

5 图像标签

6

7

8

9 ”千锋教育”

10

11

　　运行结果如图2.21所示。

图2.21 alt属性显示效果

2. title属性

　　title属性是鼠标移到图片上的提示文字。当设置了title属性后，如果鼠标移入到图片上时，就会显示title的提示信息。接下来通过案例来演示title属性，如例2-15所示。

1

2

3

4

5 图像标签

6

7

8

9

10

　　运行结果如图2.22所示。

图2.22 title属性显示效果

　　alt属性和title属性都是有利于SEO搜索引擎的优化和用户体验的提升，只是它们展示的方式不一样。

1.3.8 链接标签

　　单个网页不能容纳网站需要的所有信息，需要多个网页构成，这时就点击链接可以从一张网页跳转到另一张网页，如图2.23所示。

图2.23 链接效果展示

　　HTML中使用标签来定义链接部分实现网页的跳转，其语法格式如下。

　　链接对象

　　接下来通过案例来演示链接标签，如例2-16所示。

1

2

3

4

5 链接标签

6

7

8 打开一个新的网页

9 千锋官网

10 下载压缩包文件

11

12

　　运行结果如图2.24所示。

图2.24 链接标签显示效果

　　链接和图像一样，地址可以是相对地址或绝对地址。链接除了可以链接地址外，还可以链接其他的元素（压缩包，word文档，PPT文档等）。例2-16中第一个链接打开的是一个本地中的相对地址，第二个链接打开的是一个网络上的绝对地址，第三个链接点击后会下载一个压缩包文件。

　　链接可以针对文字，也可以针对图片，当点击图片时会打开一个新的网页，接下来通过案例来演示，如例2-17所示。

1

2

3

4

5 链接标签

6

7

8

9

10

11

12

　　运行结果如图2.25所示。

图2.25 链接图片的显示效果

　　例2-16、2-17中标签只定义了href属性，标签除了href属性外还包含target和name两个重要属性，下面就来分别介绍标签的这三个属性。

1. href属性

　　 herf属性就是来指定链接目标的url地址，为标签定义herf属性后，它就有了链接的功能。

2.name属性

　　有些网页的内容较多，页面过长，如百度百科千锋教育，只能不断的拖动滚动条来浏览网页，查看所需要的内容，效率较低，而且很不方便，这时可以通过标签的name属性实现站内跳转，这种站内的跳转的方式也称锚点操作，接下来通过案来演示name属性的作用，如例2-18所示。

1

2

3

4

5 链接标签

6

7

8 HTML5

9 PHP

10

点击上面的链接可跳转到指定的位置

11 HTML5的内容

12

HTML5

13

HTML5

14

HTML5

15

HTML5

16

HTML5

17 PHP的内容

18

PHP

19

PHP

20

PHP

21

PHP

22

PHP

23

24

　　运行结果如图2.26所示。

图2.26 name属性的显示效果

3.target属性

　　target属性用于指定链接页面的打开方式，其取值如表2.7所示

表2.7 target取值表

　　目前常用的取值有_self和_blank两种，接下来通过案例来演示这两种取值的功能，如例2-19所示。

1

2

3

4

5 链接标签

6

7

8 当前窗口打开链接

9 新窗口打开链接

10

11

　　运行结果如图2.27所示。

图2.27 target属性的显示效果

　　一般情况下，target只用到“_self”和“_blank”这两个属性值，其他两个不需要深究，因为几乎用不到。

1.3.9 列表标签

列表是网页中一种常用的数据排列方式，在网页中到处都可以看到列表的身影，如图2.28、图2.29，都是网页中常见的列表。

图2.28 列表展示效果

图2.29 列表展示效果

　　HTML中列表分为有序列表、无序列表和定义列表三种，下面将分别介绍这三种列表。

1. 有序列表

　　在HTML中用

    标签表示有序列表，列表项目用
  1. 标签表示，列表项目有先后顺序之分，因此称为有序列表。接下来通过案例来了解有序列表，如例2-20所示。

    1

    2

    3

    4

    5 链接标签

    6

    7

    8

      9

    1. HTML

      2. 10

    2. CSS

      3. 11

    3. JavaScript

      4. 12

    4. PHP

      5. 13

    5. JAVA

      6. 14

    15

    　　运行结果如题2.30所示。

    图2.30 有序列表展示效果

    　　图2.31中可以看到前面的阿拉伯数字是默认效果，可以通过有序列表的type属性来设置不同的显示效果，其取值如表2.8所示。

    表2.8 有序列表type属性取值表

    　　接下来通过案例来演示type属性的用法，如例2-21所示。

    1

    2

    3

    4

    5 列表标签

    6

    7

    8

      9

    1. HTML

      2. 10

    2. CSS

      3. 11

    3. JavaScript

      4. 12

    4. PHP

      5. 13

    5. Java

      6. 14

    15

    16

    　　运行结果如图2.31所示。

    图2.31 有序列表展示效果

    　　在有序列表中，除了type属性之外，还可以为

      定义start属性用于规定项目符号的起始值，为
    1. 定义value属性用来规定项目符号的数字。

      　　以上的效果都是HTML自带效果，如果效果上有更多的需求，可以配合CSS来完成，例如图2.32的效果，读者可以在学习完CSS时再来实现。

      图2.32 CSS美化有序列表

      2. 无序列表

      　　在HTML中用