第4章 JavaScript开发基础——HTML知识_JavaScript 从入门到项目实践（超值版）-QQ阅读男生玄幻网

书名：JavaScript 从入门到项目实践（超值版）
作者名：聚慕课教育研发中心
本章字数：7091字
更新时间：2021-03-30 11:00:48

第4章
JavaScript开发基础——HTML知识

◎本章教学微视频：15个　45分钟

学习指引

HTML即超文本标记语言，是一种用来制作超文本文档的简单标记语言，是一种应用非常广泛的网页格式，也是被用来显示Web页面的语言之一。本章将详细介绍HTML的基础知识，主要内容包括HTML的文档结构、HTML的常用标签、HTML5的新增标签。

重点导读

掌握HTML的文档结构。
掌握HTML的常用标签。
掌握HTML5的新增标签。

4.1　基本的HTML文档

在一个HTML文档中，必须包含<html></html>标签（也称标记）对，并且该标签对需放在一个HTML文档的开始和结束位置。即每个文档以<html>开始，以</html>结束。<html>与</html>之间通常包含两个部分，分别是<head></head>标签对和<body></body>标签对。<head></head>标签对内包含HTML文件头部信息，例如文档标题、样式定义等。<body></body>标签对内包含文档主体部分，即网页内容。需要注意的是，<html>标签不区分大小写。

注：如果标签是以成对的方式显示，就说是标签对，在介绍一个标签对的属性或方式时，习惯上是以开始标签来说明，而不是以标签对方式来说明。

为了便于读者从整体把握HTML文档的结构，下面通过一个HTML页面来介绍HTML页面的整体结构，示例代码如下：

从上述代码可以看出，一个基本的HTML页面由以下几个部分构成。

（1）<!DOCTYPE>声明必须位于HTML5文档中的第一行，也就是位于<html>标签之前。该标签用于告知浏览器文档所使用的HTML规范。它是一条指令，告诉浏览器编写页面所用的标签的版本。由于HTML5版本还没有得到浏览器的完全认可，后面介绍时还采用以前通用的标准。

（2）<html></html>对说明本页面是使用HTML语言编写的，可使浏览器软件能够准确无误地解释、显示。

（3）<head></head>对用于定义HTML的头部信息，头部信息不显示在网页中。在该标签内可以嵌套其他标签，用于说明文件标题和整个文件的一些公用属性，如通过<style>标签定义CSS样式表，通过<script>标签定义JavaScript脚本文件。

（4）<title></title>标签对内的内容是HTML文件头部信息中的重要组成部分，它包含的内容显示在浏览器的窗口标题栏中。如果一个HTML文件没有设置<title></title>标签对内的内容，浏览器标题栏就只显示本页的文件名。

（5）<body></body>标签对用来定义HTML页面显示在浏览器窗口的实际内容。例如，页面中的文字、图像、动画、超链接以及其他HTML相关的内容都是在该标签对中定义的。

4.1.1　文档标签

一般HTML的页面以<html>标签开始，以</html>标签结束。HTML文档中的所有内容都应位于这两个标签之间。如果这两个标签之间没有内容，则该HTML文档在IE浏览器中的显示将是空白的。

<html>标签的语法格式如下：

4.1.2　头部标签

头部（<head></head>）标签对内包含的是文档的标题信息，如标题、关键字、说明以及样式等。除了标题内容外，一般位于头部标签中的内容不会直接显示在浏览器中，而是通过其他的方式显示。

（1）内容。

头部标签中可以嵌套多个标签，如<title>、<base>、<isindex>和<script>等，也可以添加任意数量的属性，如<script>、<style>、<meta>或<object>等。除了<title>标签外，嵌入的其他标签可以使用多个。

（2）位置。

在所有的HTML文档中，头部标签不可或缺，但是其起始和结尾标签却可以省去。在各个HTML的版本文档中，头部标签一直紧跟<body>标签，但在框架设置文档中，其后跟的是<frameset>标签。

（3）属性。

<head>标签的属性profile给出了元数据描写的位置，从中可以看到其中的meta和lind元素的特性。该属性的形式没有严格的格式规定。

4.1.3　主体标签

主体标签（<body>…</body>）包含了文档的内容，用若干个属性来规定文档中显示的背景和颜色。

主体标签可能用到的属性如下。

（1）background=url（文档的背景图像，url指图像文件的路径）。

（2）bgcolor=color（文档的背景色）。

（3）text=color（文本颜色）。

（4）link=color（链接颜色）。

（5）vlink=color（已访问的链接颜色）。

（6）alink=color（被选中的链接颜色）。

（7）onload=script（文档已被加载）。

（8）onunload=script（文档已推出）。

为该标签添加属性的代码格式如下：

4.2　HTML的常用标签

HTML文档是由标签组成的文档，要熟练掌握HTML文档的编写，就要先了解HTML的常用标签。

4.2.1　标题标签<h1>到<h6>

在HTML文档中，文本的结构除了以行和段的形式出现之外，还可以标题的形式存在。通常一篇文档最基本的结构，就是由若干不同级别的标题和正文组成的。

HTML文档中包含有各种级别的标题，各种级别的标题由元素<h1>到<h6>来定义，其中<h1>代表1级标题，级别最高，字号也最大，其他标题元素依次递减，<h6>级别最低。

下面具体介绍一下标题的使用方法。

【例4-1】（实例文件：ch04\Chap4.1.html）标题标签的使用。

相关的代码示例请参考Chap4.1.html文件，在IE浏览器里面运行的结果如图4-1所示。

图4-1　标题标签的应用

4.2.2　段落标签<p>

段落标签<p>用来定义网页中的一段文本，文本在一个段落中会自动换行。段落标签是双标签，即<p> 和</p>，在开始标签<p>和结束标签</p>之间的内容形成一个段落。如果省略掉结束标签，从<p>标签开始，那么直到在下一个段落标签出现之前的文本，都将被默认为同一段段落内。

【例4-2】（实例文件：ch04\Chap4.2.html）段落标签的使用。

相关的代码示例请参考Chap4.2.html文件，在IE浏览器里面运行的结果如图4-2所示。可以看出，<p>标签将文本分成了3个段落。

图4-2　段落标签的应用

4.2.3　换行标签<br>

使用换行标签<br>可以给一段文字换行。该标签是一个单标签，没有结束标签，作用是将文字在一段内强制换行。一个<br>标签代表一次换行，连续的多个标签可以实现多次换行。使用换行标签时，在需要换行的位置添加<br>标签即可。

【例4-3】（实例文件：ch04\Chap4.3.html）换行标签的使用。

相关的代码示例请参考Chap4.3.html文件，在IE浏览器里面运行的结果如图4-3所示。

图4-3　换行标签的应用

4.2.4　链接标签<a>

链接标签<a>是网页中最为常用的标签，主要用于把页面中的文本或图片链接到其他的页面、文本或图片。建立链接的要素有两个，即可被设置为链接的网页元素和链接指向的目标地址。链接的基本结构如下：

1．设置文本和图片的链接

可被设置为链接的网页元素是指网页中通常使用的文本和图片。文本链接和图片链接通过<a>和</a>标签来实现，将文本或图片放在<a>开始标签和</a>结束标签之间即可建立文本和图片链接。

【例4-4】（实例文件：ch04\Chap4.4.html）设置文本和图片的链接。

相关的代码示例请参考Chap4.4.html文件，在IE浏览器里面运行的结果如图4-4所示，在其中可以查看到使用链接标签设置文本和图片的效果。

图4-4　链接标签的应用

2．设置电子邮件路径

电子邮件路径用来链接一个电子邮件的地址。其写法如下：

【例4-5】（实例文件：ch04\Chap4.5.html）设置电子邮件路径。

相关的代码示例请参考Chap4.5.html文件，然后双击该文件，就可以在IE浏览器中查看到使用链接标签设置电子邮件路径的效果。当单击含有链接的文本时，会弹出一个发送邮件的对话框，显示效果如图4-5所示。

图4-5　设置电子邮件的路径

4.2.5　列表标签<ul>

文字列表可以有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来，以便浏览者能更加快捷地获得相应信息。HTML中的文字列表如同文字编辑软件Word中的项目符号和自动编号。

1．建立无序列表

无序列表相当于Word中的项目符号，无序列表的项目排列没有顺序，只以符号作为分项标识。无序列表的建立使用的是一对标签<ul>和</ul>，其中每一个列表项的建立还要一对标签<li>和</li>。其结构如下：

在无序列表结构中，使用<ul>和</ul>标签表示该无序列表的开始和结束，<li>则表示该列表项的开始。在一个无序列表中可以包含多个列表项，并且<li>的结束标签可以省略。

下面实例介绍了使用无序列表实现文本的排列显示。

【例4-6】（实例文件：ch04\Chap4.6.html）建立无序列表。

相关的代码示例请参考Chap4.6.html文件，然后双击该文件，就可以在IE浏览器中查看到使用列表标签建立无序列表的效果，如图4-6所示。

图4-6　无序列表标签的应用

通过观察发现，无序列表项中，可以嵌套一个列表。如代码中的“系统分析”列表项和“伪网页草图”列表项中都有下级列表，因此在这对<li>和</li>标签间又增加了一对<ul>和</ul>标签。

2．建立有序列表

有序列表类似于Word中的自动编号功能。有序列表的使用方法和无序列表的使用方法基本相同。它使用的标签是<ol>和</ol>，每个列表项前使用的标签是<li>和</li>，且每个项目都有前后顺序之分，多数情况下，该顺序使用数字表示。其结构如下：

【例4-7】（实例文件：ch04\Chap4.7.html）建立有序列表。

相关的代码示例请参考Chap4.7.html文件，然后双击该文件，就可以在IE浏览器中查看到使用列表标签建立有序列表后的效果了，如图4-7所示。

图4-7　有序列表标签的应用

4.2.6　图像标签<img>

图像可以美化网页，插入图像时可使用图像标签<img>。<img>标签的属性及描述如表4-1所示。

表4-1　<img>标签的属性及描述

1．插入图片

src属性用于指定图片源文件的路径，它是<img>标签必不可少的属性。其语法格式如下：

图片的路径既可以是绝对路径，也可以是相对路径。

【例4-8】（实例文件：ch04\Chap4.8.html）在网页中插入图片。

相关的代码示例请参考Chap4.8.html文件，然后双击该文件，就可以在IE浏览器中查看到使用<img>标签插入图片后的效果，如图4-8所示。

图4-8　图像标签的应用

2．从不同位置插入图片

在插入图片时，用户可以将其他文件夹或服务器中的图片显示到网页中。

【例4-9】（实例文件：ch04\Chap4.9.html）从不同位置插入图片。

相关的代码示例请参考Chap4.9.html文件，然后双击该文件，就可以在IE浏览器中查看到使用<img>标签插入图像后的效果，如图4-9所示。

图4-9　从不同位置插入图片

3．设置图片的宽度和高度

在HTML文档中，还可以设置插入图片的显示尺寸。设置图片尺寸可通过图片的属性width（宽度）和height（高度）来实现。

【例4-10】（实例文件：ch04\Chap4.10.html）设置图片在网页中的宽度和高度。

相关的代码示例请参考Chap4.10.html文件，然后双击该文件，就可以在IE浏览器中查看到使用<img>标签设置的图片的宽度和高度效果，如图4-10所示。

图4-10　设置图片宽度与高度

从运行结果中可以看到，图片的显示尺寸是由width和height控制的。当只为图片设置一个尺寸属性时，另外一个尺寸就以图片原始的长宽比例来显示。图片的尺寸单位可以选择百分比或数值。百分比为相对尺寸，数值为绝对尺寸。

4.2.7　表格标签<table>

HTML中的表格标签有以下3个，下面详细进行介绍。

（1）<table>…</table>标签。

<table>标签用于标识一个表格对象的开始；</table>标签标识一个表格对象的结束。一个表格中，只允许出现一对<table>和</table>标签。

（2）<tr>…</tr>标签。

</tr>用于标识表格一行的开始；</tr>标签用于标识表格一行的结束。表格内有多少对<tr>和</tr>标签，就表示表格中有多少行。

（3）<td>…</td>标签。

<td>标签用于标识表格某行中的一个单元格的开始；</td>标签用于标识表格某行中的一个单元格的结束。<td>和</td>标签书写在<tr>和</tr>标签内。一对<tr>和</tr>标签内有多少对<td>和</td>标签，就表示该行有多少个单元格。

在HTML中，最基本的表格必须包含一对<table>和</table>标签、一对或几对<tr>和</tr>标签以及一对或几对<td>和</td>标签。一对<table>和</table>标签定义一个表格，一对<tr>和</tr>标签定义一行，一对<td>和</td>标签定义一个单元格。

【例4-11】（实例文件：ch04\Chap4.11.html）定义一个4行3列的表格。

相关的代码示例请参考Chap4.11.html文件，然后双击该文件，就可以在IE浏览器中查看到使用表格标签插入表格后的效果，如图4-11所示。

图4-11　定义表格

4.2.8　表单标签<form>

表单主要用于收集网页上浏览者的相关信息，其标签为<form>和</form>。表单的基本语法格式如下：

其中，action=“url”用于指定处理提交表单的格式，它可以是一个URL地址或一个电子邮件地址。method=“get|post”用于指明提交表单的HTTP方法。enctype=“mime”用于指明把表单提交给服务器时的互联网媒体形式。表单是一个能够包含表单元素的区域。通过添加不同的表单元素，将显示不同的效果。

下面介绍如何使用表单标签开发一个简单网站的用户意见反馈页面。

【例4-12】（实例文件：ch04\Chap4.12.html）开发用户意见反馈页面。

相关的代码示例请参考Chap4.12.html文件，然后双击该文件，就可以在IE浏览器中查看到使用表单标签插入表单后的效果，如图4-12所示。可以看到，创建的用户反馈表单包括一个标题“用户意见反馈页面”，还包括“姓名”“性别”“年龄”“联系电话”“电子邮件”“联系地址”等内容。

图4-12　表单标签的应用

4.3　HTML5的新增标签

为了更好地处理今天的互联网应用，HTML5添加了很多新标签及功能，如多媒体标签<audio>和<video>、绘制图形标签<canvas>等。

4.3.1　<audio>标签

<audio>标签主要是定义播放声音文件或者音频流的标准。它支持3种音频格式，分别为Ogg、MP3和WAV。

如果需要在HTML5网页中播放音频，输入的基本格式如下：

其中，src属性规定要播放的音频的地址，controls属性是供添加播放、暂停和音量控件的属性。

另外，在<audio>和</audio>之间插入的内容是供不支持audio元素的浏览器显示的。

【例4-13】（实例文件：ch04\Chap4.13.html）在网页中插入音频。

相关的代码示例请参考Chap4.13.html文件，然后双击该文件，如果用户的浏览器是IE 11.0以前的版本，浏览效果如图4-13所示。可见，IE 11.0以前的浏览器版本不支持<audio>标签。

在IE 11.0中浏览，效果如图4-14所示。可以看到加载的音频控制条并听到声音，此时用户还可以控制音量的大小。

图4-13　插入音频文件

图4-14　播放音频文件

4.3.2　<video>标签

<video>标签主要是定义播放视频文件或者视频流的标准。它支持3种视频格式，分别为Ogg、WebM 和MPEG 4。

如果需要在HTML5网页中播放视频，输入的基本格式如下：

其中，在<video>与</video>之间插入的内容是供不支持video元素的浏览器显示的。

【例4-14】（实例文件：ch04\Chap4.14.html）在网页中插入视频。

相关的代码示例请参考Chap4.14.html文件，然后双击该文件，如果用户的浏览器是IE 11.0以前的版本，浏览效果如图4-15所示。可见，IE 11.0以前版本的浏览器不支持<video>标签。

在IE 11.0中浏览，效果如图4-16所示，可以看到加载的视频控制条界面。单击“播放”按钮，即可查看视频的内容，同时用户还可以调整音量的大小。

图4-15　不支持<video>标签

图4-16　预览视频效果

4.3.3　<canvas>标签

<canvas>标签是一个矩形区域，它包含width和height两个属性，分别表示矩形区域的宽度和高度，这两个属性都是可选的，并且都可以通过CSS来定义，其默认值是300px和150px。

<canvas>标签在网页中的常用格式如下：

上面的示例代码中，id表示画布对象名称，width和height分别表示宽度和高度。最初的画布是不可见的，此处为了观察这个矩形区域，使用CSS样式，即<style>标签。style表示画布的样式。如果浏览器不支持<canvas>标签，会显示画布中间的提示信息。

1．添加canvas的步骤

画布canvas本身不具有绘制图形的功能，它只是一个容器，如果读者对Java语言非常了解，就会发现HTML5的画布和Java中的Panel面板非常相似，都可以在容器中绘制图形。既然画布元素放好了，那么就可以使用脚本语言JavaScript在网页上绘制图形了。

使用canvas结合JavaScript绘制图形，一般情况下需要下面几个步骤。

第一步：JavaScript使用id来寻找canvas元素，即获取当前画布对象。

第二步：创建context对象。

getContext()方法返回一个指定contextId的上下文对象，如果指定的id不被支持，则返回null，当前唯一被强制必须支持的是2d，也许在将来会有3d。注意，指定的id是大小写敏感的。对象cxt建立之后，就可以拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

第三步：绘制图形。

fillStyle()方法将其染成红色，fillRect()方法规定了形状、位置和尺寸。这两行代码绘制一个红色的矩形。

2．绘制基本形状

画布canvas结合JavaScript可以绘制简单的矩形，还可以绘制一些其他的常见图形，例如直线、圆等。下面以绘制矩形和圆形为例，来介绍使用canvas绘制基本形状的方法。

用canvas和JavaScript绘制矩形时，涉及一个或多个方法，这些方法如表4-2所示。

表4-2　绘制矩形的方法

【例4-15】（实例文件：ch04\Chap4.15.html）绘制矩形。

相关的代码示例请参考Chap4.15.html文件，然后双击该文件，就可以在IE浏览器中查看到绘制的矩形，效果如图4-17所示。可以看到，网页中，在一个蓝色边框内显示了一个蓝色矩形。

提示：上面的代码中，定义了一个画布对象，其id名称为myCanvas，高度和宽度都为500像素，并定义了画布边框的显示样式。代码中首先获取画布对象，然后使用getContext()方法获取当前2d的上下文对象，并使用fillRect()方法绘制一个矩形。其中涉及一个fillStyle属性，fillStyle用于设定填充的颜色、透明度等，如果设置为rgb(200,0,0)，则表示一个不透明颜色；如果设置为rgba(0,0,200,0.5)，则表示为一个透明度50%的颜色。

图4-17　绘制矩形

用canvas和JavaScript绘制圆形时，涉及一个或多个方法，这些方法如表4-3所示。

表4-3　绘制圆形的方法

路径是绘制自定义图形的好方法，在canvas中，通过beginPath()方法开始绘制路径，这个时候就可以绘制直线、曲线等，绘制完成后，调用fill()和stroke()方法完成填充和边框设置，通过closePath()方法结束路径的绘制。

【例4-16】（实例文件：ch04\Chap4.16.html）绘制圆形。

相关的代码示例请参考Chap4.16.html文件，然后双击该文件，就可以在IE浏览器中查看到绘制的圆形，效果如图4-18所示。可以看到，在网页中，一个蓝色边框内显示了绘制的圆形。

图4-18　绘制圆形

4.4　典型案例——制作日程表

通过在记事本中输入HTML语句，可以制作出多种多样的页面效果。本节将以制作日程表为例，介绍HTML的综合应用方法，其具体的操作步骤如下。

第一步：打开记事本，在其中输入以下代码。

输入代码后的记事本页面，如图4-19所示。

图4-19　在记事本中输入的代码

第二步：在</head>标签之前输入以下代码。

输入代码后的记事本页面，如图4-20所示。

图4-20　输入CSS代码

第三步：在</style>标签之前输入以下代码。

输入代码后的记事本页面，如图4-21所示。

第四步：在<body>和</body>标签之间输入以下代码。

输入代码后的记事本页面，如图4-22所示。

图4-21　输入控制字体样式的代码

图4-22　输入块级代码

第五步：在</body>标签之前输入以下代码。

输入代码后的记事本页面如图4-23所示。

图4-23　输入代码后的记事本页面

第六步：在记事本中选择“文件”→“保存”菜单命令，弹出“另存为”对话框，设置保存文件的位置，在“文件名”下拉列表框中输入“制作日程表.html”，然后单击“保存”按钮，如图4-24所示。

第七步：双击打开保存的制作日程表.html文件，即可看到制作的日程表，如图4-25所示。

第八步：如果需要在日程表中添加工作内容，可以用记事本打开制作日程表.html文件，在代码段“<td style="text-align: center"> </td>”的&nbsp之前输入内容即可。如要输入星期一完成的第一件工作内容“完成校对”，可在如图4-26所示的位置输入。

图4-24　“另存为”对话框

图4-25　制作日程表

图4-26　输入文字

第九步：保存后打开文档，即可在浏览器中看到添加的工作内容，如图4-27所示。

图4-27　最终的日程表预览效果

4.5　就业面试技巧与解析

4.5.1　面试技巧与解析（一）

面试官：使用记事本编辑HTML文件时应注意哪些事项？

应聘者：很多初学者在保存文件时，没有将HTML文件的扩展名改为.html或.htm，导致文件还是以.txt为扩展名，因此，无法在浏览器中查看。如果是通过右击创建的记事本文件，那么在给文件重命名时，一定要以.html或.htm作为文件的扩展名。特别要注意的是，当Windows系统的扩展名被隐藏时，更容易出现这样的错误。为避免这种情况的发生，可以在“文件夹选项”对话框中查看是否显示文件扩展名。

4.5.2　面试技巧与解析（二）

面试官：如何解决HTML5浏览器支持问题？

应聘者：浏览器对HTML5的支持需要一个过程，一款浏览器暂时还不能支持HTML5定义的全部内容。要想解决浏览器现在的支持问题，首先尽量使用大部分浏览器支持的HTML5元素及对象，其次可以分别将多个浏览器支持的对象格式融入代码中，如不同浏览器对音频文件格式支持不同，将多种多媒体文件融入代码中，这样不同的浏览器会自动选择自己支持的格式打开。