03.Links and images

Setup

Links page

links.html

<!DOCTYPE html>
<html>
  <head>
    <title>Links</title>
  </head>
  <body>
    <h1>Links</h1>
    <p>This particular page is about links! There are three kinds of links:</p>
	
	<ul>
	  <!-- Add <li> elements here -->
	</ul>
  </body>
</html>

Images page

images.html

<!DOCTYPE html>
<html>
  <head>
    <title>Images</title>
  </head>
  <body>
    <h1>Images</h1>
  </body>
</html>

Extras page

extras.html

<!DOCTYPE html>
<html>
  <head>
    <title>Extras</title>
  </head>
  <body>
    <h1>Extras</h1>
  </body>
</html>

Image downloads

下载示例图片

Anchors

链接是使用 <a> 元素创建的，它代表“锚点”。它的工作原理就像前一章中的所有元素一样：当您将某些文本包装在 <a> 标记中时，它会改变该内容的含义。让我们通过将以下段落添加到 links.html 的 <body> 元素来看看：

<p>This example is about links and <a>images</a>.</p>

就像元素为其包含的内容添加内容一样，HTML“属性”为其附加的元素添加内容。

不同的元素允许不同的属性，您可以参考 MDN 了解哪些元素接受哪些属性的详细信息。现在，我们关注 href 属性，因为它决定用户单击 <a> 元素时的去向。更新您的链接以匹配以下内容：

<p>This example is about links and <a href='images.html'>images</a>.</p>

请注意属性如何存在于开始标记内。首先是属性名称，然后是等号，然后是单引号或双引号中的属性“值”。此语法将属性与内容（位于标签之间）区分开来。

href 属性提供的额外信息告诉浏览器此 <a> 元素实际上是一个链接，它应该以默认的蓝色文本呈现内容：

image.png

image.png

parent folders

属性改变 HTML 元素的含义，有时您需要修改元素的多个方面。例如， <a> 元素还接受 target 属性，该属性定义用户单击链接时在何处显示页面。默认情况下，大多数浏览器都会用新页面替换当前页面。我们可以使用 target 属性要求浏览器在新窗口/选项卡中打开链接。

尝试更改 links.html 中的绝对链接以匹配以下内容。请注意第二个属性看起来与第一个属性非常相似，但它们之间用空格（或换行符）分隔：

<li>Absolute links, like to
    <a href='https://developer.mozilla.org/en-US/docs/Web/HTML'
       target='_blank'>Mozilla Developer Network</a>, which is a very good
       resource for web developers.</li>

target 属性有一些对 Web 浏览器具有特殊含义的预定义值，但最常见的是 _blank ，它指定新选项卡或窗口。您可以在MDN 上阅读其余内容。

Naming conventions

您网站中的文件的一部分，而不仅仅是 HTML 文件。 CSS 文件、JavaScript 文件和图像也应避免空格并具有一致的大小写。
这些命名约定适用于站点中的所有文件，而不仅仅是 HTML 文件。 CSS 文件、JavaScript 文件和图像也应避免空格并具有一致的大小写。

Images

图像包含在带有 <img/> 标记及其 src 属性的网页中，该属性指向要显示的图像文件。请注意它是一个空元素，就像上一章中的 <br/> 和 <hr/> 一样。 （暂时不要将其添加到我们的项目中。我们将在下一节中处理具体示例。）

<img src='some-photo.jpg'/>

Image formats

image.png

jpg images

JPG 图像设计用于处理大型调色板，而不会过度增加文件大小。这使得它们非常适合包含大量渐变的照片和图像。

另一方面，JPG 不允许透明像素，如果您仔细观察，您可以在下图的白色边缘中看到透明像素：

image.png

使用以下代码片段将此 mochi.jpg 图像嵌入到我们的 images.html 页面中（这还包括一些到其他页面的导航）：

<p>This page covers common image formats, but you may also be looking for <a
   href='links.html'>links</a> and <a href='misc/extras.html'>useful
   extras</a>.</p>

<h2>JPGs</h2>

<p>JPG images are good for photos.</p>

<img src='images/mochi.jpg'/>

gif images

GIF 是简单动画的首选，但代价是它们在调色板方面受到一定限制，切勿将它们用于照片。透明像素是 GIF 的二元选项，这意味着不能有半透明像素。

这可能会导致难以在透明背景上获得高水平的细节。因此，如果不需要动画，通常最好使用 PNG 图像。

an animated mochi bouncing up and down

您可以使用以下命令将这个小家伙添加到我们的 images.html 文件中：

<h2>GIFs</h2>

<p>GIFs are good for animations.</p>

<img src='images/mochi.gif'/>

png images

PNG 非常适合照片或动画以外的任何内容。对于照片，相同质量（人眼感知）的 PNG 文件通常会比同等的 JPG 文件大。然而，它们确实可以很好地处理不透明度，并且没有调色板限制。

这使得它们非常适合图标、技术图表、徽标等。

image.png

我们也将此 PNG 图像添加到我们的示例项目中：

<h2>PNGs</h2>

<p>PNGs are good for diagrams and icons.</p>

<img src='images/mochi.png'/>

svg images

与上述基于像素的图像格式不同，SVG 是一种基于矢量的图形格式，这意味着它可以放大或缩小到任何尺寸，而不会损失质量。此属性使 SVG 图像成为响应式设计的绝佳工具。它们几乎适用于与 PNG 相同的所有用例，您应该尽可能使用它们。

SVG image with crisp edges compared to a pixelated PNG image

这些300×300像素的图像原本是100×100像素，但是放大它们可以清楚地显示它们之间的差异。请注意左侧 SVG 图像上清晰、干净的线条，而右侧 PNG 图像现在像素化程度很高。

尽管 SVG 是矢量格式，但其使用方式与光栅格式完全相同。继续将 mochi.svg 添加到我们的 images.html 页面：

<h2>SVGs</h2>

<p>SVGs are <em>amazing</em>. Use them wherever you can.</p>

<img src='images/mochi.svg'/>

SVG 存在一个潜在问题：为了使它们在浏览器中一致显示，您需要使用图像编辑器（例如 Abode Illustrator 或 Sketch）将任何文本字段转换为轮廓。如果您的图像包含大量文本（如本教程中精美的屏幕截图），这可能会对文件大小产生很大影响。出于这个原因，InternetingIsHard.com 使用 PNG 代替 SVG，尽管 SVG 非常棒

Image dimensions

为了将基于像素的图像缩小到预期大小 (75×75)，我们可以使用 <img/> 元素的 width 属性。在 images.html 中，更新所有基于像素的图像以匹配以下内容：

<!-- In JPGs section -->
<img src='images/mochi.jpg' width='75'/>

<!-- In GIFs section -->
<img src='images/mochi.gif' width='75'/>

<!-- In PNGs section -->
<img src='images/mochi.png' width='75'/>

width 属性设置图像的明确尺寸。还有一个相应的 height 属性。仅设置其中之一将导致图像按比例缩放，而定义两者将拉伸图像。尺寸值以像素为单位指定，并且切勿包含单位（例如， width='75px' 是不正确的）。

Text alternatives

将 alt 属性添加到 <img/> 元素是最佳实践。它定义了所显示图像的“替代文本”。这对搜索引擎和使用纯文本浏览器的用户（例如，由于视力障碍而使用文本转语音软件的人）都有影响。

<!-- In JPGs section -->
<img src='images/mochi.jpg' width='75' alt='A mochi ball in a bubble'/>

<!-- In GIFs section -->
<img src='images/mochi.gif' width='75' alt='A dancing mochi ball'/>

<!-- In PNGs section -->
<img src='images/mochi.png' width='75' alt='A mochi ball'/>

<!-- In SVGs section -->
<img src='images/mochi.svg' alt='A mochi ball with Bézier handles'/>

More html attributes

document language

网页的默认语言由顶级 <html> 元素上的 lang 属性定义。我们的文档是英文的，因此我们将使用 en 国家/地区代码作为属性值（对我们创建的所有页面执行此操作）：

<html lang='en'>

character sets

“字符集”有点像浏览器的数字字母表。它与文档的语言不同，因为它只影响字母本身的呈现方式，而不影响内容的语言。让我们将一些国际字符复制并粘贴到 misc/extras.html 网页中，看看会发生什么。

<h2>Character Sets</h2>

<p>You can use UTF-8 to count in Turkish:</p>

<ol>
  <li>bir</li>
  <li>iki</li>
  <li>üç</li>
  <li>dört</li>
  <li>beş</li>
</ol>

image.png

这是因为大多数浏览器的默认字符集不容纳这些“特殊”字符。要解决此问题，请通过将带有 charset 属性的 <meta> 元素添加到 misc/extras.html 的 <head> 来指定 UTF-8 字符编码文件：

<meta charset='UTF-8'/>

特殊字符现在应该正确呈现。如今，UTF-8 有点像互联网的通用字母表。您创建的每个网页的 <head> 中都应包含此行。

Html entities

“HTML 实体”是一种特殊字符，无法在 HTML 文档中表示为纯文本。

Reserved characters

< 、 > 和 & 字符称为“保留字符”，因为它们不允许在未经编码的情况下插入到 HTML 文档中。这是因为它们在 HTML 语法中具有某种含义： < 开始一个新标签， > 结束一个标签，以及，正如我们即将学习的， & 引发 HTML 实体。

在 misc/extras.html 中，添加以下内容：

<h2>HTML Entities</h2>
<p>There are three reserved characters in HTML: &lt; &gt; and &amp;. You
   should always use HTML entities for these three characters.</p>

entities始终以与号 ( & ) 开头并以分号 ( ; ) 结尾。在两者之间，您放置一个特殊代码，浏览器会将其解释为符号。在本例中，它将 lt 、 gt 和 amp 分别解释为小于、大于和 & 符号。

quotes

有四种不同类型的大引号（opening and closing single and double quotes）：

You can use them in place of ' and " straight quotes, like so:
您可以使用它们代替 ' 和 " 直引号，如下所示：

<p>If you&rsquo;re into &ldquo;web typography,&rdquo; you&rsquo;ll also find
   yourself using curly quotes quite a bit.</p>

与直引号不同，这些弯引号实体应该紧贴文本。

utf-8 and html entities

在过去的网络时代，HTML 文件中不允许包含特殊字符，这使得实体更加有用。但是，由于我们现在使用 UTF-8 字符集，因此我们应该能够将任何字符直接插入 HTML 文档中。

这使得实体主要用作保留字符或在编写直接 HTML 时方便使用。

Summary

网站基本上只是一堆链接在一起的 HTML、图像和（我们很快就会了解的）CSS 文件。您应该开始将网站视为用户浏览我们在 Web 开发过程中创建的文件夹和文件的一种漂亮方式。
With that perspective, it should be clear than maintaining a well-organized file system is a critical aspect of creating a website.
从这个角度来看，应该清楚的是，维护组织良好的文件系统是创建网站的一个关键方面。

We also learned about a few important attributes (lang and charset) that give us the basic template you should use as the beginning of every web page you ever create:
我们还了解了一些重要的属性（ lang 和 charset ），它们为我们提供了应该用作您创建的每个网页的开头的基本模板：

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Some Web Page</title>
  </head>
  <body>
    <h1>Some Web Page</h1>
    <!-- Rest of the page content -->
  </body>
</html>

However, we’re still missing one really big piece: CSS. In the next chapter, we’ll discover more HTML elements and attributes that will let us attach CSS styles to our entire website.
然而，我们仍然缺少一个非常重要的部分：CSS。在下一章中，我们将发现更多 HTML 元素和属性，它们可以让我们将 CSS 样式附加到整个网站。
The ability to work with multiple files and link them to each other in intelligent ways will become even more important than it was in this chapter.
处理多个文件并以智能方式将它们相互链接的能力将变得比本章中更加重要。