HTML中的Head标签学习

时间 2019-11-22

标签 html head 标签学习栏目 HTML 繁體版

原文原文链接

在页面加载完成的时候，标签head里的内容，是不会在页面中显示出来的。它包含了像页面的<title>(标题) ,CSS(若是你想用CSS来美化页面内容)，图标和其余的元数据(好比做者，关键词，摘要)。在本文中，咱们将包含全部上述的事情，为您在脑海中营造一个很好的基础和代码印象。css

1.1 什么是Head标签

head 标签是 <head> 元素的内容。不像 <body> 元素的内容能够显示在浏览器中，head 的内容不会在浏览器中显示，它的做用是包含一些页面的元数据。在下面的例子中，head 的内容不多。html

固然，在大型的页面中，head 会包含不少的元数据。你能够用 developer tools 去查看你喜欢的网页的 head 的内容。在这里，咱们会告诉你怎么将必须的内容包含在 head 里，而不是将全部可以包含在 head 里的内容都告诉你。咱们开始吧。web

1.2 标题

咱们以前已经看到了 <title>，它能够用来给 html 文档添加一个标题。你可能会将它和给 body 添加标题的 <h1> 元素混淆，有些时候 h1 也会被称做网页标题。可是它们是不一样的。浏览器

当被加载到浏览器中的时候，元素 <h1> 会出如今页面中 —— 一般它应该在一个页面中只被使用一次, 它被用来标记你的页面内容的标题（故事的标题，新闻标题或者任何适当的方式）app

元素 <title> 是用来表示整个HTML文档大体内容的元数据（不是文档的内容）。学习

1.3 <meta>元数据

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据（<meta> 元素）。固然，其余在这篇文章中提到的东西也能够被看成元数据。有不少不一样种类的 <meta> 元素能够被包含进你的页面的<head>元素, 可是如今咱们还不会尝试去解释它们, 这只会引发混乱。咱们会解释一些你常会看到的东西，咱们只会给你一个想法。网站

字符的编码

经过<meta charset="utf-8">指定字符编码。搜索引擎

这个元素简单的指定了文档的字符编码（在这个文档中被容许使用的字符集）。 utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符。这意味着你的web页面能够显示任意的语言; 因此对于你的每个页面，使用这个设置是很好的!编码

做者和描述

许多<meta> 元素包含了name 和 content 特性:spa

name 特性指定了meta 元素的类型; 说明该元素包含了什么类型的信息。

content 指定了实际的元数据内容。

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

指定做者在某些状况下是颇有用的：若是你须要联系页面的做者，问一些关于页面内容的问题。一些内容管理系统可以自动获取页面做者的信息，而后用于某种目的。

指定包含关于页面内容的关键字的页面内容的描述是颇有用的，由于它可能或让你的页面在搜索引擎的相关的搜索出现得更多

其余类型的 metadata

当你在网站上查看源码时，你也会发现其余类型的元数据。你在网站上看到的许多功能都是专有创做，旨在向某些网站（如社交网站）提供可以使用的特定信息。

1.4 自定义图标

为了进一步丰富你的网站设计，你能够在元数据中添加对自定义图标的引用，这些将在特定的场合中显示。

这个不起眼的图标已经存在不少不少年了，16 x 16 像素是这种图标的第一种类型。你能够看见这些图标出如今浏览器每个打开的页面中的标签页中中以及在书签面板中的书签页面中。

页面添加图标的方式有：

将其保存在与网站的索引页面相同的目录中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer 6同样久远的浏览器显示）

将如下行添加到HTML <head>中以引用它：

现在还有不少其余的图标类型能够考虑。例如，你能够在 MDN 主页的源代码中找到它：

href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">

href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">

href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">

这些注释解释了每一个图标的用途 - 这些元素涵盖的东西提供一个高分辨率图标，这些高分辨率图标当网站保存到iPad的主屏幕时使用。

不用担忧如今实现全部这些类型的图标 - 这是一个至关先进的功能，你将不会被要求在这个课堂上学习这个知识点。这里的主要目的是让你提早了解有这同样东西以防当你浏览其余网站的源代码时不理解源代码的含义。

1.5 应用CSS和JavaScript

现在，几乎你使用的全部网站都会使用 CSS 让网页更加炫酷, 使用JavaScript让网页有交互功能, 好比视频播放器，地图，游戏以及更多功能。这些应用在网页中很常见，它们分别使用 <link>元素以及 <script> 元素。

注意： < script >元素看起来像一个空元素，但它并非，所以须要一个结束标记。您还能够选择将脚本放入< script >元素中，而不是指向外部脚本文件。

1.6 设定主语言

最后，值得一提的是你能够（并且确实应该）为你的站点设定语言，这个能够经过添加lang属性到HTML开始标签中来实现，以下所示：<html lang="zh-CN">

这在不少方面都颇有用。若是你的HTML文档的语言设置好了，那么你的HTML文档就会被搜索引擎更有效地索引（例如，容许它在特定于语言的结果中正确显示），对于那些使用屏幕阅读器的视障人士也颇有用（好比, 法语和英语中都有“six”这个单词，可是发音却彻底不一样)。

你还能够将文档的分段设置为不一样的语言。