一、基础知识
在本章中，我们将介绍
-
HTML 文档的基本结构
-
html、head、title、script、style、body、img和a元素 -
级联样式表(CSS)示例
-
一个 JavaScript 代码示例，使用了
Date和document.write
介绍
超文本标记语言(HTML)是一种在网络上传递内容的语言。HTML 不属于任何人，而是许多国家和许多组织的人们定义语言特性的结果。HTML 文档是可以使用任何文本编辑器生成的文本文档。HTML 文档包含由标签包围的元素——以<符号开始并以>符号结束的文本。标签的一个例子是<img src="home.gif"/>。这个特殊的标签将显示保存在文件home.gif中的图像。这些标签就是标记。正是通过使用标签，网页中包含了超链接、图像和其他媒体。
基本的 HTML 可以包括以称为层叠样式表(CSS)的语言进行格式化的指令，以及以称为 JavaScript 的语言进行交互的程序。浏览器，如 Firefox 和 Chrome，解释 HTML 以及任何 CSS 和 JavaScript，以产生我们访问网站时的体验。HTML 保存网站的内容，标签提供内容的性质和结构的信息，以及对图像和其他媒体的引用。CSS 指定格式。相同的内容可以用不同的方式格式化。JavaScript 是一种编程语言，用于使网站具有动态性和交互性。在除了最小的工作组之外的所有工作组中，不同的人可能负责 HTML、CSS 和 JavaScript，但是对这些不同的工具如何协同工作有一个基本的了解总是一个好主意。如果你已经熟悉了 HTML 的基础知识，以及 CSS 和 JavaScript 是如何结合在一起的，你可以跳到下一章。尽管如此，在我们开始第一个核心示例之前，浏览一下本章的内容，以确保您对所有内容都了如指掌，可能还是值得的。
HTML(及其相关的 CSS 和 JavaScript)的最新版本是 HTML5。它已经产生了相当大的兴奋，因为像画布这样的功能可以显示图片和动画；支持视频和音频；以及用于定义常见文档元素的标签，例如header、section和footer。你可以用 HTML5 创建一个复杂的、高度互动的网站。在撰写本文时，并非所有的浏览器都接受所有的特性，但是您现在可以开始学习 HTML5、CSS 和 JavaScript。学习 JavaScript 将向您介绍一般的编程概念，如果您尝试学习任何其他编程语言，或者如果您作为团队的一部分与程序员一起工作，这些概念将是有益的。
我将在本书中使用的方法是在具体示例的上下文中解释 HTML5、CSS 和 JavaScript 概念，其中大多数都是熟悉的游戏。在这个过程中，我将使用一些小例子来演示具体的特性。希望这能帮助你们理解自己想做什么，并懂得如何去做。当我解释概念和细节的时候，你会知道我们要去哪里。
本章的任务是建立一个链接到其他网站的网页。这样，通过少量的 CSS 代码和 JavaScript 代码，您将对 HTML 文档的结构有一个基本的了解。对于这个和其他例子，请思考如何让项目对你有意义。该页面可以是您自己的项目、喜爱的网站或特定主题网站的列表。对于每个网站，您将看到文本和超链接。第二个示例包括一些额外的格式，以框的形式围绕文本、图片以及当天的日期和时间。图 1-1 和图 1-2 显示了我创建的不同示例。
图 1-2
带有额外格式的收藏网站
图 1-1
游戏的注释列表
当您重新加载收藏夹网站页面时，日期和时间将根据您的计算机更改为当前日期和时间。
关键要求
对链表应用程序的要求是构建包含文本、链接和图像的网页的最基本要求。对于图 1-1 所示的例子，每个条目都显示为一个段落。相反，在图 1-2 所示的例子中，每个条目周围都有一个方框。第二个例子也包括图像和获取当前日期和时间的方法。后面的应用程序将需要更多的讨论，但是对于这一个，我们将直接讨论如何使用 HTML、CSS 和 JavaScript 来实现它。
HTML5、CSS 和 JavaScript 特性
正如我提到的，HTML 文档是文本，那么我们如何指定链接、图片、格式和编码呢？答案就在标记中，也就是标签。除了定义内容的 HTML，通常还会发现 CSS 样式，它们可以在 HTML 文档内部或外部文档中指定。您还可以包含用于交互性的 JavaScript，这也是在 HTML 文档或外部文档中指定的。我们首先来看看如何构建简单的 HTML 标记，以及如何在同一个文档中添加内联 CSS 和 JavaScript。
基本 HTML 结构和标签
HTML 元素以开始标记开始，后面是元素内容和结束标记。结束标记包括一个符号/，后面跟着元素类型，例如/head。元素可以嵌套在元素中。标准的 HTML 文档如下所示:
<html>
<head>
<title>Very simple example
</title>
</head>
<body>
This will appear as is.
</body>
</html>
请注意，我在这里缩进了嵌套标签，使它们更加明显，但是 HTML 本身忽略了这种缩进(或者空白，众所周知)，您不需要将它添加到您自己的文件中。事实上，对于本书中的大多数例子，我都没有缩进我的代码。
这个文档由html元素组成，由开始标签<html>表示，以结束标签</html>结束。
HTML 文档通常有一个head和一个body元素，就像这个一样。这个head元素包含一个元素title。HTML 标题出现在不同浏览器的不同位置。图 1-3 显示了火狐标签上的标题“非常简单的例子”。
图 1-3
Firefox 浏览器中标签页上的 HTML 标题
在大多数情况下，你会在网页正文中创建一些你认为是标题的东西，但它不会是 HTML 标题！图 1-3 也显示了网页的主体:一小段文本。请注意，html、head、title 和 body 这些词没有出现。标签“告诉”浏览器如何显示 HTML 文档。
我们可以对文本做更多的事情，但让我们继续看看如何让图像出现。这需要一个img元素。与使用开始和结束标签的html、head和body元素不同，img元素只使用一个标签。它被称为单例标签。它的元素类型是img(不是 image ),您使用所谓的属性将所有信息与标签本身放在一起。什么信息？最重要的项目是保存图像的文件的名称。标签
<img src="frog.jpg"/>
告诉浏览器查找名为 frog、文件类型为. jpg 的文件。在这种情况下，浏览器会在与 HTML 文件相同的目录或文件夹中查找。你也可以参考其他地方的图像文件，稍后我会展示这一点。src代表来源。它被称为元素的属性。>前的斜线表示这是一个单例标签。不同的元素类型有共同的属性，但是大多数元素类型都有附加的属性。img元素的另一个属性是width属性。
<img src="frog.jpg" width="200"/>
这指定图像应该以 200 像素的宽度显示。高度将是保持图像原始纵横比所需的任何值。如果您想要特定的宽度和高度，即使这可能会扭曲图像，也要指定width和height属性。
小费
您将会看到一些例子(甚至可能是我的一些例子)，在这些例子中，右斜杠丢失了，但却工作得很好。将它包括在内被认为是一种良好的做法。类似地，您会看到文件名没有引号的例子。HTML 在语法(标点)方面比大多数其他编程系统更宽容。最后，您将看到以类型为!DOCTYPE的标记开始的 HTML 文档，并且该 HTML 标记包含其他信息。在这一点上，我们不需要这个，所以我将尽可能保持事情的简单(引用爱因斯坦的话，没有更简单)。
制作超链接类似于制作图像。超链接的元素类型是a，重要属性是href。
<a href="http://faculty.purchase.edu/jeanine.meyer">Jeanine Meyer's Academic Activities </a>
正如您所看到的，这个元素有一个开始和结束标记。元素的内容，无论在两个标签之间的是什么——在本例中，是 Jeanine Meyer 的学术活动——都显示为蓝色并带有下划线。起始标签以a开始。记住这一点的一种方法是将它视为 HTML 中最重要的元素，因此它使用字母表的第一个字母。你也可以想到一个锚，这是a实际上代表的意思，但对我来说没有什么意义。href属性(想想超文本链接)指定了当超链接被点击时，浏览器所去的网站。请注意，这是一个完整的 web 地址(简称为统一资源定位器或 URL)。
网址可以是绝对的，也可以是相对的。绝对地址以http://开始。相对地址是相对于 HTML 文件的位置。使用相对地址可以更容易地将你的项目移动到不同的网站，并且你可以通过使用../来指示上一级的文件夹。在我的例子中，frog.gif文件、frogface.gif文件和其他图像文件与我的 HTML 文件位于同一个文件夹中。他们在那里是因为我把他们放在那里！对于大型项目，许多人将所有图像放在一个名为 images 的子文件夹中，并将地址写为img/postcard.gif。文件管理是创建网页的一个重要部分。
我们可以将一个超链接元素和一个img元素结合起来，在屏幕上生成一张用户可以点击的图片。请记住，元素可以嵌套在其他元素中。不是将文本放在起始的<a>标签之后，而是放一个<img>标签:
<a href="http://faculty.purchase.edu/jeanine.meyer">
<img src="jhome.gif" width="100" />
</a>
现在让我们把这些例子放在一起:
<html>
<head>
<title>Second example </title>
</head>
<body>
This will appear as is.
<img src="frog.gif"/>
<img src="frog.gif" width="200"/>
<a href=http://faculty.purchase.edu/jeanine.meyer>Jeanine Meyer's Academic
Activities </a>
<a href=http://faculty.purchase.edu/jeanine.meyer><img src="jhome.gif"/></a>
</body>
</html>
我创建了 HTML 文件，保存为second.html，然后在 Chrome 浏览器中打开。图 1-4 显示了显示的内容。
图 1-4
图像和超链接示例
这产生了文本；图像的原始宽度和高度；宽度固定为 200 像素、高度成比例的图像；一个超链接，将带你到我的网页(我保证)；另一个链接使用的图片也将带您到我的网页。然而，这并不是我想要的。我希望这些元素在页面上间隔排列。
这演示了一些你需要记住的事情:HTML 忽略换行符和其他空白。如果你想要换行，你必须指定它。一种方法是使用br singleton 标签。稍后我会展示其他方法。看看下面修改过的代码。注意<br/>标签不需要单独在一行上。
<html>
<head>
<title>Second example </title>
</head>
<body>
This will appear as is. <br/>
<img src="frog.gif"/>
<br/>
<img src="frog.gif" width="200"/>
<br/>
<a href=http://faculty.purchase.edu/jeanine.meyer>Jeanine Meyer's Academic
Activities </a>
<br/>
<a href=http://faculty.purchase.edu/jeanine.meyer><img src="jhome.gif"/></a>
</body>
</html>
图 1-5 显示了这段代码产生的结果。
图 1-5
带有换行符的文本、图像和链接
HTML 元素类型有很多:h1到h6标题元素产生不同大小的文本；列表和表格有各种元素，表单有其他元素。正如我们马上会看到的，CSS 也用于格式化。您可以为文本选择不同的字体、背景颜色和颜色，并控制文档的布局。将格式放在 CSS 中，将交互性放在 JavaScript 中，并保留内容的 HTML，这被认为是很好的做法。HTML5 提供了新的结构元素——比如article、section、footer和header——将格式设置放入样式元素中，并利用新元素，称为语义标签，便于与其他人合作。然而，即使您只是自己工作，将内容、格式和行为分开也能让您轻松地更改格式和交互。格式，包括文档布局，是一个很大的话题。在这本书里，我坚持基本原则。
使用级联样式表
CSS 是一种专门用于格式化的特殊语言。样式本质上是一种规则，它指定了特定元素的格式。这意味着您可以将样式信息放在不同的地方:一个单独的文件，一个位于head元素中的style元素，或者 HTML 文档中的一个样式，也许是在您想要以特定方式格式化的一个元素中。除非指定了不同的样式，否则样式信息会层叠、向下流动。换句话说，最接近元素的样式就是所使用的样式。例如，您可能使用您公司的官方字体，如在head元素的 style 部分中给出的，来流过大部分文本，但是在 local 元素中包含规范来样式化一段特定的文本。因为该样式最接近元素，所以它是所使用的样式。
基本格式包括要格式化的内容的指示符，后跟一个或多个指令。在本章的例子中，我将指定类型为section的元素的格式，即每个项目周围的边框或方框、边距、填充、对齐以及白色背景。清单 1-1 中完整的 HTML 文档是一个混合体(有人会说是一团乱麻！)的特性。元素body和p(段落)是 HTML 原始版本的一部分。section元素是 HTML5 中新增的元素类型之一。section 元素确实需要格式化，不像body和p，它们有默认的格式，即主体和每个p元素将在新的一行开始。CSS 可以修改新旧元素类型的格式。请注意，节中文本的背景色不同于节外文本的背景色。
在清单 1-1 的代码中，我为body元素(只有一个)和section元素指定了样式。如果我有不止一个 section 元素，那么样式将适用于每个元素。正文的样式指定背景颜色和文本颜色。最初，浏览器只接受 16 种颜色的名称，包括黑色、白色、红色、蓝色、绿色、青色和粉红色。然而，现在最新的浏览器按名称接受 140 种颜色。 https://www.w3schools.com/colors/colors_names.asp见。
您还可以使用 RGB(红绿蓝)十六进制代码来指定颜色，但您需要使用图形程序(如 Adobe Photoshop、Corel Paint Shop Pro 或 Adobe Flash Professional)来计算 RGB 值，或者您可以进行实验。我使用 Paint Shop Pro 来确定青蛙头图片中绿色的 RGB 值，并将其用于边框。
指令就像它们听起来的那样:它们指示是将材料居中还是向左对齐。font-size以像素为单位设置文本的大小。边框很复杂，而且在不同的浏览器中看起来不一致。这里我指定了一个 4 像素的纯绿色边框。section的width规范指出浏览器应该使用 85%的窗口，不管那是什么。p的规格将段落的宽度设置为 250 像素。填充是指文本和部分边框之间的间距。边距是指该部分与其周围环境之间的间距。
<html>
<head>
<title>CSS example </title>
<style>
body {
background-color:tan;
color: #EE015;
text-align:center;
font-size:22px;
}
section {
width:85%;
border:4px #00FF63 solid;
text-align:left;
padding:5px;
margin:10px;
background-color: white;
}
p {
width: 250px;
}
</style>
</head>
<body>
The background here is tan and the text is the totally arbitrary RED GREEN BLUE➥
value #EE1055<br/>
<section>Within the section, the background color is white. There is text with➥
additional HTML markup, followed by a paragraph with text. Then, outside the➥
section there will be text, followed by an image, more text and then a➥
hyperlink. <p>The border color of the section matches the color of the➥
frog image. </p></section>
<br/>
As you may have noticed, I like origami. The next image represents a frog head.<br/>
<img src="frogface.gif"/> <br/>If you want to learn how to fold it, go to
<a href=http://faculty.purchase.edu/jeanine.meyer/origami>the Meyer Family➥
Origami Page <img src="crane.png" width="100"/></a>
</body>
</html>
Listing 1-1A Complete HTML Document with Styles
这将产生如图 1-6 所示的屏幕。
图 1-6
示例 CSS 样式
小费
如果你不能马上理解所有的事情，不要担心。修改这些例子，自己编一个。你会在网上找到很多帮助。特别是，在 http://dev.w3.org/html5/spec/Overview.html 可以看到 HTML 5 的官方来源。
你可以用 CSS 做很多事情。您可以使用它来指定元素类型的格式，如下所示；您可以指定元素是类的一部分；您还可以使用id属性来识别单个元素。在第 6 章中，我们创建了一个测验，我使用 CSS 来定位窗口中的特定元素，然后使用 JavaScript 来移动它们。
JavaScript 编程
JavaScript 是一种编程语言，具有访问 HTML 文档各部分的内置特性，包括 CSS 元素中的样式。它被称为脚本语言，以区别于编译语言，如 C++。编译语言在使用前被一次性翻译，而脚本语言由浏览器逐行解释。本文假设读者之前没有编程经验或 JavaScript 知识，但参考其他书籍可能会有所帮助，如特里·麦克纳威奇(2010 年编辑的朋友)的《JavaScript 入门》，或网上资源，如 http://en.wikipedia.org/wiki/JavaScript 。每个浏览器都有自己的 JavaScript 版本。
HTML 文档在位于head元素中的script元素中保存 JavaScript。为了显示如图 1-2 所示的时间和日期信息，我在 HTML 文档的head元素中添加了以下内容:
<script>
document.write(Date());
</script>
与其他编程语言一样，JavaScript 由各种类型的语句组成。在后面的章节中，我将向您展示赋值语句、复合语句，如if、switch和for语句，以及创建所谓的程序员定义函数的语句。函数是在一个块中一起工作的一个或多个语句，并且可以在您需要该功能的任何时候被调用。函数可以避免一遍又一遍地写出相同的代码。JavaScript 提供了许多内置函数。某些函数与对象相关联(稍后将详细介绍)，被称为方法。代码
document.write("hello");
是一个 JavaScript 语句，使用参数"hello"调用文档对象的write方法。参数是传递给函数或方法的附加信息。语句以分号结束。这段代码将写出字符串 h，e，l，l，o 作为 HTML 文档的一部分。
document.write方法写出括号内的任何内容。由于我希望写出的信息随着日期和时间的变化而变化，所以我需要一种方法来访问当前的日期和时间，所以我使用了内置的 JavaScript Date函数。这个函数产生一个带有日期和时间的对象。稍后，您将看到如何使用Date对象来计算玩家完成一个游戏需要多长时间。现在，我想做的就是显示当前的日期和时间信息，这正是这段代码要做的:
document.write(Date());
使用正式的编程语言:这段代码调用document对象的write方法，这是一段内置的代码。句点(.)表示要调用的write是与 HTML 文件生成的文档相关联的方法。所以，有些东西是作为 HTML 文档的一部分写出来的。写出来的是什么？左括号和右括号之间的内容。那是什么？它是调用内置函数Date的结果。Date函数获取本地计算机维护的信息，并将其交给write方法。Date也要求使用括号，这也是你看到这么多的原因。write方法将日期和时间信息显示为 HTML 文档的一部分，如图 1-2 所示。这些结构的组合方式是典型的编程语言。该语句以分号结束。为什么不是一个时期？句点在 JavaScript 中还有其他用途，例如指示方法和用作数字的小数点。
自然语言，比如英语，和编程语言有很多共同点——不同类型的语句；使用某些符号的标点符号；和语法来正确定位元素。在编程中，我们用术语符号代替标点符号，用句法代替语法。编程语言和自然语言都可以让你用独立的部分构建非常复杂的语句。然而，有一个根本的区别:正如我告诉我的学生，我在课堂上说的很多内容很可能在语法上不正确，但他们仍然会理解我。但是，当你通过编程语言与计算机“交谈”时，你的代码必须在语法规则方面完美无缺，才能得到你想要的东西。好消息是，与人类观众不同，计算机不会表现出不耐烦或任何其他人类情感，所以你可以花时间把事情做好。也有一些坏消息，你可能需要一段时间才能领会。如果您在 HTML、CSS 或 JavaScript 中犯了语法错误(称为句法错误)，浏览器仍然会尝试显示某些内容。当你在工作中没有得到你想要的结果时，你要找出问题出在哪里。
使用文本编辑器
您使用文本编辑器构建 HTML 文档，并使用浏览器查看/测试/播放该文档。虽然你可以使用任何文本编辑程序来编写 HTML，但我建议你在 PC 上使用 TextPad，在 MAC 上使用 Sublime。这些是共享软件，这使得它们相对便宜。不要使用文字处理程序，它可能会插入非文本字符。记事本也可以工作，尽管其他工具也有好处，比如我将演示的颜色编码。要使用编辑器，您需要打开它并输入代码。图 1-7 展示了 Sublime 屏幕的样子。
图 1-7
从崇高开始
你会希望经常保存你的工作，最重要的是，保存为 type.html 文件。在开始时这样做，然后你将获得颜色编码的好处。在 Sublime 中，点击文件 ➤ 另存为，然后输入带有文件扩展名的名称。html，如图 1-8 。
图 1-8
将文件保存为 HTML 类型
请注意，我给了文件一个名称和文件扩展名，还指定了文件所在的文件夹。保存文件后，出现如图 1-9 所示的窗口，带有颜色编码。
图 1-9
将文件保存为 HTML 后
颜色编码表示标签和引用字符串，只有在文件保存为 HTML 后才能看到。这对于捕捉许多错误很有价值。Sublime 和其他编辑器确实提供了改变配色方案的选项。假设您正在使用这里显示的方法，如果您看到黄色的长段(引用字符串的颜色)，这可能意味着缺少右引号。顺便说一下，你可以使用单引号或双引号，但不能混淆。此外，如果你从 Word 或 PowerPoint 中复制粘贴，并复制所谓的“智能”引号，那些曲线，这将导致问题。
构建应用程序
您可以在查看以下应用程序的源代码。？？？。HTML 文档的源代码通常包括 HTML 文档和其他文件。
-
verysimple.html文件本身是完整的，如图 1-3 所示。 -
second.html应用如图 1-4 所示。引用了两个图像文件:frog.gif两次，jhome.gif一次。 -
带有花哨颜色的
third.html引用了两个图像文件:frogface.gif和crane.gif。 -
games.html文件本身是完整的，因为它没有引用任何图像文件。如果在a标签的href属性中提到的文件不存在，那么当点击超链接时将会出现错误消息。 -
ch01FavoriteSites.html文件引用了两个图像文件:avivasmugmug.jpeg和apressshot.jpeg。
跟踪文件是构建 HTML 应用程序的关键部分。
现在让我们深入研究 HTML 编码，首先是描述游戏的带注释的链表，然后是最喜欢的网站。该代码使用了上一节中描述的特性。表 1-1 显示了产生如图 1-1 所示显示的完整代码:链接到不同文件的文本段落，它们都位于同一文件夹中。
表 1-1
“我的游戏”注释链接代码
|
密码
|
说明
|
| --- | --- |
| <html> | 开始html标签。 |
| <head> | 开始head标签。 |
| <title>Annotated links</title> | 开始的title标签、标题文本和结束的title标签。 |
| </head> | |
| <body> | 开始body标签。 |
| <h1>My games</h1> | 开始h1标签，文本，然后结束h1标签。这将使“我的游戏”以大字体出现。实际字体将是默认字体。 |
| <p> | 段落标签的开始p。 |
| The <a href="craps.html">Dice game</a> presents the game called craps. | 带有a元素的文本。开始标签a的属性href被设置为值craps.html。大概这是一个和这个 HTML 文件在同一个文件夹中的文件。a元素的内容——无论是在<a>和</a>之间的内容——都将被显示出来，首先显示为蓝色，单击后显示为淡紫色，并带有下划线。 |
| </p> | 关闭p标签。 |
| <p> | 开始p标签。 |
| The <a href="cannonball.html">Cannonball</a> is a ballistics simulation. A ball appears to move on the screen in an arc. The program determines when the ball hits the ground or the target. The player can adjust the speed and the angle. | 参见前面的案例。这里的a元素指的是cannonball.html文件，显示的文本是Cannonball。 |
| </p> | 关闭p标签。 |
| <p> | 开始p标签。 |
| The <a href="slingshot.html">Slingshot</a> simulates shooting a slingshot. A ball moves on the screen, with the angle and speed depending on how far the player has pulled back on the slingshot using the mouse. | 参见上一篇。这一段包含了到slingshot.html的超链接。 |
| </p> | 关闭p标签。 |
| <p> | 开始p标签。 |
| The <a href="memory.html">Concentration/memory game</a> presents a set of plain rectangles you can think of as the backs of cards. The player clicks on first one and then another and pictures are revealed. If the two pictures represent a match, the two cards are removed. Otherwise, the backs are displayed. The game continues until all matches are made. The time elapsed is calculated and displayed . | 参见上一篇。这一段包含了到memory.html的超链接。 |
| </p> | 关闭p标签。 |
| <p> | 开始p标签。 |
| The <a href="quiz1.html">Quiz game</a> presents the player with 4 boxes holding names of countries and 4 boxes holding names of capital cities. These are selected randomly from a larger list. The player clicks to indicate matches and the boxes are moved to put the guessed boxes together. The program displays whether or not the player is correct . | 参见上一篇。这一段包含了到quiz1.html的超链接。 |
| </p> | 关闭p标签。 |
| <p> | 开始p标签。 |
| The <a href="maze.html">Maze</a> program is a multi-stage game. The player builds a maze by using the mouse to build walls. The player then can move a token through the maze. The player can also save the maze on the local computer using a name chosen by the player and retrieve it later, even after closing the browser or turning off the computer . | 参见上一篇。这一段包含了到maze.html的超链接。 |
| </p> | 关闭p标签。 |
| </body> | 关闭body标签。 |
| <!-- html--> | 关闭html标签。 |
一旦您创建了几个自己的 HTML 应用程序，您就可以构建一个像这样的文档，作为您自己的注释列表。如果您使用文件夹，href链接将需要反映 HTML 文档的位置。
Favorite Sites 代码具有带注释的列表的功能，并增加了格式:每个项目周围有一个绿色框，三个项目中有两个项目有一张图片。参见表 1-2 。
表 1-2
收藏夹站点代码
|
密码
|
说明
|
| --- | --- |
| <html> | 开始html标签。 |
| <head> | 开始head标签。 |
| <title>Annotated links</title> | 完成title元素:开始和结束标签以及它们之间的注释链接。 |
| <style> | 开始style标签。这意味着我们现在要使用 CSS。 |
| article { | 样式的开始。对正在被样式化的内容的引用是所有的article元素。然后样式有了一个大括号- {。开始和结束括号包围了我们正在创建的样式规则，很像 HTML 中的开始和结束标记。 |
| width:60%; | width设置为包含元素的 60%。注意，每个指令都以一个;(分号)结束。 |
| text-align:left; | 文本靠左对齐。 |
| margin:10px; | 边距为 10 像素。 |
| border:2px green double; | 边框是 2 像素的绿色双线。 |
| padding:2px; | 文本和边框之间的间距为 2 像素。 |
| display:block; | 文章是块，意思是前后有换行符。 |
| } | 关闭article的样式。 |
| img {display:block;} | Style img元素到 block style:前后换行。 |
| </style> | 关闭style标签。 |
| <script> | 开始script标签。我们现在正在编写 JavaScript 代码。 |
| document.write(Date()); | 一条代码语句:写出Date()调用产生的内容。 |
| </script> | 关闭script标签。 |
| </head> | |
| <body> | 开始body标签。 |
| <h3>Favorite Sites</h3> | 由h3和/h3标签包围的文本。这使得文本看起来比正常的要大一些。 |
| <article> | 开始article标签。 |
| The <a href="http://faculty.purchase.edu/jeanine.meyer"Jeanine Meyer's Academic Activities</a> site displays information on my current and past courses, along with publications and other activities. | 该文本将以指定的样式为准。它包括一个a元素。 |
| </article> | 关闭article标签。 |
| <article> | 开始article标签。 |
| The <a href="https://avivameyer . smugmug . com/">Aviva Meyer's photographs</a> site is a collection of Aviva's photographs stored on a site called smugmug. The categories are Music, Adventures and Family (which requires a password)``. | 这篇文章与上一篇相似，有一个a元素和一些文本。 |
| <img src="avivasmugmug.jpeg" width="300"/> | 一个img标签。图像的来源是文件avivasmugmug.jpeg。如果文件的扩展名为. jpg，这将不起作用。宽度设置为 300 像素。由于 style 部分中的 style 指令，前后都有换行符。 |
| </article> | 关闭article标签。 |
| <article> | 开始article标签。 |
| <a href=" http://apress.com ">Apress publishers</a> is the site for the publishers of this book. <br/> | 这类似于上一篇文章:一个 a 元素和一些文本。 |
| <img src="apressshot.jpeg" width="300"/> | 一个img元素。来源是apressshot.jpeg。宽度设置为 300 像素。 |
| </article> | 关闭article标签。 |
| </body> | 关闭body标签。 |
| <!-- html--> | 关闭html标签。 |
如何让这个应用程序成为你自己的非常简单:使用你自己喜欢的网站！在大多数浏览器中，如果您想为超链接使用网站徽标，可以下载并保存图像文件，也可以包含其他图片。我的理解是，制作一个带有评论并包含图像(如徽标)的网站列表属于“合理使用”的范畴，但我不是律师。大多数情况下，人们喜欢链接到他们的网站。这不影响法律问题，但是如果您不想将特定的图像文件下载到您的计算机，然后再上传到您的网站，您也可以选择将img标签中的src设置为图像所在网站的网址。
您也可以通过更改格式使该应用程序成为您自己的应用程序。样式可用于指定字体，包括特定的字体、字体系列和大小。这使您可以选择一种喜爱的字体，并指定在用户计算机上没有该字体时使用的字体。您可以指定边距和填充，或者独立地改变上边距、左边距、上边距等。
测试和上传应用程序
除非您使用完整的网址，否则您需要将所有文件(在本例中是单个 HTML 文件和所有图像文件)放在同一个文件夹中。为了使链接工作，您需要拥有所有href属性的正确地址。我的例子展示了如何对同一文件夹中的 HTML 文件或 Web 上其他地方的 HTML 文件执行此操作。
你可以开始测试你的工作，即使它还没有完全完成。例如，您可以放入一个单独的img元素或一个单独的a元素。打开浏览器，如 Firefox、Chrome 或 Safari。在 Firefox 中，点击文件，然后打开文件，浏览到你的 HTML 文件。在 Chrome 中，在 PC 上按 Ctrl(MAC 上按 CMD)和 o，然后浏览到文件，点击确定打开。你应该看到类似我的例子。
点击超链接进入其他网站。使用浏览器的重新加载图标重新加载页面，并观察不同的时间。如果你没有看到你所期望的——就像我的例子一样——你需要检查你的代码。常见的错误有:
-
开始和结束标记缺失或不匹配。
-
图像文件或 HTML 文件的名称错误，或者图像文件的文件扩展名错误。您可以使用 JPG、GIF 或 PNG 类型的图像文件，但是标签中指定的文件扩展名必须与图像的实际文件类型相匹配。
-
缺少引号。编辑器中可用的颜色编码可以帮助您识别这一点。
摘要
在这一章中，你学习了如何用文本、图像和超链接组成 HTML 文档。这包括:
-
基本标签，包括
html、head、title、style、script、body -
用于显示图像的
img元素 -
超链接的
a元素 -
使用按照级联样式表(CSS)规则编写的样式元素进行简单格式化
-
提供日期和时间信息的一行 JavaScript 代码
这一章仅仅是个开始，尽管使用基本的 HTML，不管有没有级联样式表，都有可能制作出漂亮的信息丰富的网页。在下一章中，您将学习如何在应用程序中包含随机性和交互性，以及如何使用 Canvas 元素，这是 HTML5 的关键特性。
版权属于：月萌API www.moonapi.com，转载请注明出处
