MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这篇翻译不完整。请帮忙从英语翻译这篇文章

当页面加载完成的时候,标签head里的内容,是不会在页面中呈现出来的。它包含了像页面的<title>(标题) ,引入CSS(如果你想用CSS来美化页面内容),图标和其他的元数据(比如 作者,关键词,摘要)。在本文中,我们将覆盖所有上述的事情,为您提供一个良好的基础,在head标签中,处理标记和其他代码。

先决条件: 熟悉HTML,可以去 Getting started with HTML.了解
目的: 学习head标签,它的目的是什么,包含哪些元素以及它对页面有什么影响

什么是Head标签?

让我们简单的回顾下上一章提到的HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

head 标签是 <head> 元素的内容。不像 <body> 元素的内容可以显示在浏览器中,head 的内容不会在浏览器中显示,它的作用是包含一些页面的元数据。在下面的例子中,head 的内容很少。

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

当然,在大型的页面中,head 会包含很多的元数据。你可以用 developer tools 去查看你喜欢的网页的 head 的内容。 在这里,我们会告诉你怎么将必须的内容包含在 head 里,而不是将所有能够包含在 head 里的内容都告诉你。我们开始吧。

增加一个标题

我们之前已经看到了 <title>,它可以用来给 html 文档添加一个标题。你可能会将它和给 body 添加标题的 <h1> 元素混淆,有些时候 h1 也会被称作网页标题。但是它们是不同的。

  • 当被加载到浏览器中的时候,元素 <h1>  会出现在页面中 —— 通常它应该在一个页面中只被使用一次, 它被用来标记你的页面内容的标题(故事的标题,新闻标题或者任何适当的方式)
  • 元素 <title> 是用来表示整个HTML文档大致内容的元数据(不是文档的内容.)

交互式学习:检查一个简单的例子

  1. 为了开始这个交互式学习,我们希望你到我们的Github库中下载一份我们的 title-example.html page. To do this, 你可以
    1. 使用你的代码编辑器,从页面中拷贝粘贴代码到一个新的文本文件中,然后将其保存到一个适当的地方。
    2. 按下页面中的 "Raw" 按钮, 从浏览器的菜单中选择 File > Save Page As... , 然后选择一个地方来保存这个文件.
  2. 在浏览器中打开文件,你会看到类似这样效果:

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.现在很明显的可以看到 <h1> 出现的地方, 和  <title> 出现的地方!

  3. 你应该尝试这在你的代码编辑器中打开这些代码,编辑这些元素的内容,然后在你的浏览器中刷新页面。祝你玩得开行。

元素 <title> 也被以其他的方式使用着. 比如说,如果你尝试为某个页面添加书签,(Bookmarks > Bookmark This Page, 在火狐浏览器中), 你会看到 <title> 的内容被作为建议的书签名.

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

元素 <title> 的内容也被用在搜索的结果中,正如你下面看到的那样。

元数据:<meta>元素

元数据就是描述数据的数据,而HTML有一个“官方的”方式来为一个文档添加元数据,——  <meta> 元素. 当然,其他在这篇文章中提到的东西也可以被当作元数据。 有很多不同种类的 <meta> 元素可以被包含进你的页面的<head>元素, 但是现在我们还不会尝试去解释它们, 这只会引起混乱。 我们会解释一些你常会看到的东西,我们只会给你一个想法。

指定你的文档中字符的编码

在上面的例子中,这行是被包含的:

<meta charset="utf-8">

这个元素简单的指定了文档的字符编码 —— 在这个文档中被允许使用的字符集。 utf-8 是一个通用的字符集,它包含了任何人类语言中的大部分的字符。 这意味着你的web页面可以显示任意的语言; 所以对于你的每一个页面,使用这个设置是很好的! 比如说,你的页面可以很好的处理英语和日语:

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,比如说,如果你将你的字符集设置为 ISO-8859-1 (拉丁字母的字符集), 那么你的页面会是乱码的:

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

交互式学习: 体验字符集

为了进行这个练习,重新到你在前面<title>章节中获取的HTML模板 ( title-example.html page), 试着改变其字符集的值为ISO-8859-1, 然后将日语添加到页面中. 这就是我们使用的代码:

<p>Japanese example: ご飯が熱い。</p>

添加作者和描述

许多<meta> 元素包含了namecontent 特性:

  • name 特性指定了meta 元素的类型; 说明该元素包含了什么类型的信息。
  • content 指定了实际的元数据内容。

这两个meta 元素对于定义你的页面的作者和提供页面的内容描述是很有用的 。 让我们看一个例子:

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

指定作者在某些情况下是很有用的:如果你需要联系页面的作者,问一些关于页面内容的问题。 一些内容管理系统能够自动获取页面作者的信息,然后用于某种目的。

指定包含关于页面内容的关键字的页面内容的描述是很有用的,因为它可能或让你的页面在搜索引擎的相关的搜索出现得更多 (这些行为术语上被称为 Search Engine Optimization, or SEO.)

Active learning: 在搜索引擎中description的使用

description也被使用在搜索引擎显示的结果页中。 下面通过一个例子来说明

  1. front page of The Mozilla Developer Network.
  2. 查看页面资源(Right/Ctrl + click on the page,choose通过鼠标右键菜单查看页面资源.)
  3. 找到description的meta标签. 就和如下展示的这样:
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
    information about Open Web technologies including HTML, CSS, and APIs for both
    Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
  4. 现在,在你喜欢的搜索引擎里搜索”Mozilla Developer Network“ (下图展示的是在雅虎搜索里的情况.) 。你会看到description <meta> and <title> 元素如何在搜索结果里显示— 很值得这样做哦!

    A Yahoo search result for "Mozilla Developer Network"

Note:在谷歌搜索里,在主页面链接下面,你将看到一些相关子页面 — 这些是站点链接,可以在 Google's webmaster tools 配置— 一种可以使你你的的站点对搜索引擎更友好的方式。

Note: 许多 <meta> 特性已经不再使用. 例如, keyword <meta> 元素— 提供关键词给搜索引擎,根据不同的搜索词,查找到相关的网站 — 被搜索引擎忽略了。 因为作弊者填充了大量关键词到keyword, 引导搜索结果.

其他类型的 metadata

As you trawl around the Web, you'll find other types of metadata, too. A lot of the features you'll see on websites are proprietary creations, designed to provide certain sites (such as social networking sites) with specific pieces of information they can use.

For example, Open Graph Data is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN sourcecode, you'll find this:

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

One effect of this is that when you link to MDN on facebook, the link appears along with an image and description: a richer experience for users.

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter also has it's own similar propriatary metadata, which has a similar effect when the site's URL is displayed on twitter.com. For example:

<meta name="twitter:title" content="Mozilla Developer Network">

在你的站点增加自定义图标

To further enrich your site design, you can add references to custom icons in your metadata, and these will be displayed in certain contexts.

The humble favicon, which has been around for many, many years, was the first icon of this type, a 16 x 16 pixel icon used in multiple places. The favicon can be added to your page by:

  1. Saving it in the same directory as the site's index page, saved in .ico format (most browsers will support favicons in more common formats like .gif or .png, but using the ICO format will ensure it works as far back as Internet Explorer 6.)
  2. Adding the following line into your HTML <head> to reference it:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Modern browsers use favicons in various places, such as in the tab the page is open in, and in the bookmarks panel when you bookmark the page:

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

There are lots of other icon types to consider these days as well. For example, you'll find this in the source code of the MDN homepage:

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad's home screen.

Don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other web sites' source code.

在HTML中应用CSS和JavaScript

Just about all websites you'll use in the modern day will employ CSS to make them look cool, and JavaScript to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the <link> element and and the <script> element, respectively.

  • The <link> element always goes inside the head of your document. This takes two attributes, rel="stylesheet", which indicates that it is the document's stylesheet, and href, which contains the path to the stylesheet file:

    <link rel="stylesheet" href="my-css-file.css">
  • The <script> element does not have to go in the head; in fact, often it is better to put it at the bottom of the document body (just before the closing </body> tag), to make sure that all the HTML content has been read by the browser before it tries to apply JavaScript to it (if JavaScript tries to access an element that doesn't yet exist, the browser will throw an error.)

    <script src="my-js-file.js"></script>

    Note: The <script> element may look like an empty element, but it's not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the <script> element.

Active learning: applying CSS and JavaScript to a page

  1. To start this active learning, grab a copy of our meta-example.html, script.js and style.css files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.
  2. Open the HTML file in both your browser, and your text editor.
  3. By following the information given above, add <link> and <script> elements to your HTML, so that your CSS and JavaScript are applied to your HTML.

If done correctly, when you save your HTML and refresh your browser you'll see that things have changed:

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

  • The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item. when you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item's text.
  • The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.)

Note: If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our css-and-js.html example page.

为文档设定主语言

最后,值得一提的是你可以(而且确实应该)为你的站点设定语言, This can be done by adding the lang attribute to the  opening HTML tag (as seen in the meta-example.html.)

<html lang="en-US">

This is useful in many ways. Your document will be indexed more effectively by search engines if its language is set (allowing it to appear correct in language-specific results, for example), and it is useful to people with visual impairments using screen readers (for example, the word "six" exists in both French and English, but is pronounced differently.)

You can also set sub sections of your document to be recognised as different languages. For example, we could set our Japanese language section to be recognised as Japanese, like so:

<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

这些codes根据 ISO 639-1 标准定义的. 你可以在Language tags in HTML and XML找到更多相关的。

总结

已经到了我们快速学习HTML head的尾声 — 你还能学到更多的相关的, 但是现阶段详尽的讲的太多会无聊且迷惑, 我们只希望你现在在这学到最基本的概念! 下一篇我们将要学习 HTML text 基础.

文档标签和贡献者

 最后编辑者: HashubWang,