作为网页设计师和开发人员，我们非常关注屏幕上(或代码中)的内容< >头一份文件和里面的内容通常被认为是事后才想到的。虽然在很多情况下，显示在屏幕上的内容确实是网站最重要的部分内容是什么让人们访问一个网站)，“思考代码”里面< >头我们的文件起着重要的作用。这篇文章将详细讨论什么可以放进一个网站的头部。
掌握思想
HTML文档的头部是一个繁忙的区域，虽然它可能没有元素的范围<身体>可以伸缩，它实际上可以设计一系列自己的元素，以在网站如何运行或如何与其他网站互操作中发挥重要作用。
根据网站的不同，它的大脑里可能有很多事情。那么，你的选择是什么?它们如何使你的网站受益?
嗯，实际上有很多!有很多方法可以在你的文档中添加有用的元数据(供搜索引擎和其他网络机器人查找)，你可以为web浏览器提供额外的视觉效果的图标(如favicons或iPad/iPhone的特定设备图标)，允许内容联合的方法，甚至包括外部样式表和脚本的风格和行为引用。在本质上,< >头我们的HTML文档赋予下面的标记额外的意义。
思考代码有很多目的，并不是所有的代码都受到官方W3C规范的规范!
头部元素失控
HTML头部的一个独特之处在于，它的采用和有用性取决于惯例和流行程度。例如，元数据依赖于搜索引擎和社交网络来确认和使用数据，而链接引用则需要浏览器利用它们。有些可以包含在文档头部中的内容甚至没有得到W3C规范的正式支持——例如< meta name = "广告" >这是谷歌的spider的专有元标记——但由于元素的性质，它们是有效的标记。
独立的元素
我们首先应该讨论的是那些独立的元素，因为它们只服务于一个单一的目的。其中一个元素非常关键，HTML标准要求包含它:the<标题>标签。以下是7个头部元素中的5个(不包括meta和link，因为我们将在后面讨论它们):
<标题> |
这个标记在浏览器的标题栏中描述您的文档。 |
< >脚本 |
这个标记允许您嵌入或链接到JavaScript文件。 |
<时尚> |
该标记将CSS嵌入到文档中。 |
> <基地 |
此标记声明文件的基本目录(用于相对链接)。 |
<对象> |
这个标签可以在HTML头中使用;通常它被用在<身体>以包括页面资产，如Flash组件。 |
例子:
Six revision - Web Development and Design Information
一个文档的标题应该是唯一的每一页都应该充分描述其内容。虽然文档中必须有一个标题(如果遵循W3C标准)，但其他标记对您的用处可能有限。例如，外部样式表(而不是<时尚>标签)和一个htaccess文件(而不是> <基地)是声明CSS样式规则和声明基目录的更好选择。
强大的< meta >标记
在出现在文档头部的所有元素中，没有一个像< meta >元素。这些元素虽然是搜索引擎优化所迫切需要的，但更多的是一种伪科学，因为它们对搜索引擎的影响没有公开披露。除了<元=“http-equiv”- type = " " >它指定文档的MIME类型，它们都是可选的。
获得页面的正确编码(通过内容类型)很重要。
IE6可以利用特殊的http-equiv值imagetoolbar下面是一些例子http-equiv价值观:
< meta http-equiv = " cache - control " > |
让您更好地控制浏览器缓存。 |
< meta http-equiv = " - type " > |
的MIME类型布局引擎． |
< meta http-equiv = "内容语言" > |
规定文件中使用的主要口头/书面语言。 |
< meta http-equiv =“到期”> |
说明文件的到期日期。 |
< meta http-equiv = " Imagetoolbar " > |
强制IE6禁用或启用悬停时的图像工具栏。 |
< meta http-equiv = " last - modified”> |
允许指定最后一次修改文档的时间。 |
< meta http-equiv = " MSThemeCompatible " > |
禁用(或恢复)Microsoft Internet Explorer 6及以上版本中表单组件的默认主题。 |
< meta http-equiv = "刷新" > |
在指定的时间重定向页面(网络蜘蛛不喜欢这个)。 |
< meta http-equiv = " X-UA-Compatible " > |
微软扩展指令兼容模式触发。 |
例子:
< meta http-equiv = " - type”内容= " text / html;utf - 8字符集= " / >
当然,http-equiv不是唯一能提供有用信息的属性。尽管关键字被谷歌和描述只是用来表示吗搜索引擎清单(不作为排名因素)，对于应该使用什么值没有固定的标准。
像谷歌这样的搜索引擎可以使用< meta描述= " " >在它的结果。
下面是更多的一些类型< meta >标签:
< meta name = "抽象" > |
内容要点的快速总结。 |
< meta name = "作者" > |
HTML文档的作者。 |
< meta name = "接触" > |
网站的电子邮件地址、电话号码或物理地址。 |
< meta name = "版权" > |
版权信息。 |
< meta name = "描述" > |
描述HTML文档。 |
< meta name = "设计师" > |
网站的生产者。 |
< meta name = "发电机" > |
用来生成HTML文档的是什么。 |
< meta name = "地理。地名”> |
指示站点以区域为基础的城镇或城市。 |
< meta name = "地理。立场”> |
给出经度和纬度(分号分隔)位置。 |
< meta name = "地理。地区”> |
使用两位地区代码来表示位置(例如GB)。 |
< meta name = "广告" > |
可以告诉谷歌到Noarchive, Nosnippet, Noindex和Nofollow。 |
< meta name = "关键字" > |
该元素列出链接到内容的逗号分隔的单词。 |
< meta name = "语言" > |
说明网站内容中使用的主要语言。 |
< meta name = "出版商" > |
列出构建网站的产品的名称和版本。 |
< meta name = "机器人" > |
由robots.txt替换，它指定逐页索引。 |
< meta name = "主题" > |
表示内容所涉及的主题。 |
< meta name = " Viewport " > |
Apple设备用于指示内容窗口大小。 |
代码示例:
虽然元标记确实没有一套严格的标准，但是已经出现了一些约定来帮助决定应该使用哪些标记和值。搜索引擎(选择他们认为值得识别的内容)、社交网络(使用数据对网站进行分类)和像DCMI这样的组织(试图减少我们的困惑)负责在这种情况下提供帮助。
元数据不是一门科学，但地理定位元素似乎是一门科学。
下面是最广泛采用的Dublin核心元数据元素列表:
直流。贡献者 |
给出为资源做出贡献的个人的名称。 |
直流。报道 |
内容覆盖的范围(如地名或坐标)。 |
直流。创造者 |
负责内容建设的个人。 |
直流。日期 |
创建页面或内容的时间点。 |
直流。描述 |
解释资源，并可以包含到目录的链接。 |
直流。格式 |
提供文档的文件格式(用于解释)。 |
直流。标识符 |
链接到引用内容的URL、DOI、ISSN或ISBN。 |
直流。语言 |
提供用于内容的语言或方言的详细信息。 |
直流。出版商 |
标识使资源可用的个人或组。 |
直流。关系 |
链接到与已发布信息相关的资源。 |
直流。权利 |
提供许可证数据，例如指向您的使用条款政策的链接。 |
直流。源 |
突出显示引用内容的页面的来源或来源URL。 |
直流。主题 |
列出标识页面主题的以分号分隔的字符串。 |
直流。标题 |
指示文档名称的名称。 |
直流。类型 |
显示内容类别、功能、类型或聚合级别。 |
例子:
< meta name = "。创造者" content="Jacob Gube" />
注意:正如我写的一篇文章所说的5个Web文件将改善你的网站，你可以把所有相关的DCMI术语和元数据引用到一个方便的、可缓存的RDF文件中。虽然在HTML头之外有元标记听起来很奇怪，但这是一种公认的提供重复信息的方式(如网站创建者或网站口语)。元标记的作用是在HTML文档中具有丰富的语义，使您的站点对用户代理、web机器人和web服务更具有互操作性和意义。
豪华<链接>标记
link元素的简单目的(正如它听起来的那样)是为浏览器提供与文档以某种方式相关的外部资源的位置。这个元素有很多用途——从提供到外部样式表的链接到指示RSS提要可用，授权一个网页，到为你可爱的网页设计引用一个favicon。
如果没有link元素，Internet Explorer不会立即知道这个提要的存在。
虽然已经建立了许多链接约定，但没有一个比样式表更植根于HTML丰富的、有纹理的历史。如您所知，如果有一个包含站点CSS的外部CSS文件，则使用<链接>元素在文档头中引用该文件。这允许web浏览器加载文件，处理其内容，然后将您的样式应用到文档的对象。
下面是你引用CSS文件的两种主要方式:
样式表 |
这标识了要应用于即时文档的样式表。 |
选择样式表 |
它列出了一个可以在用户请求时触发的样式表。 |
例子:
如果没有它使用的CSS文件，这个设计中的任何独特样式都无法工作。自从CSS3的发展(以及Internet Explorer的工作方式)以来，样式表引用已经形成了独特的复杂程度。您不仅可以将此元素封装在条件注释中，而且可以使用媒体查询，您只能在用户代理满足某些条件的情况下应用代码。
虽然样式表引用是link元素的主要亮点，但我们也提到了利用这种灵活方法增强站点的其他方法，这一点很重要。关于如何使用这些元素的一个经典例子是由Opera浏览器的“导航栏”定义的，它可以主动查找某些链接引用rel价值观就像指数，作者而且首页提供一种站点范围内链接到最终用户可能使用的特定位置的方法(通过浏览器)。虽然它只存在于Opera中，或者通过其他浏览器中的插件/附加组件/扩展，但如果使用得当，它会非常有帮助。
Opera有一个导航菜单，可以链接到重要的文档或网站部分。下面是Opera支持的各种导航链接:
作者 |
通常链接到一个带有作者详细信息的页面，如“关于我们”。 |
内容 |
链接到构建内容布局的页面或站点地图。 |
版权 |
参考网站版权，隐私或使用条款政策。 |
第一个 |
链接到长文档的第一页或片段部分。 |
术语表 |
将用户发送到术语或相关外部资源的页面。 |
帮助 |
通常链接到可以获得支持或联系的页面。 |
首页 |
链接到一个网站的主页或主要文档。 |
指数 |
用于链接到出现某些内容的页面索引。 |
最后的 |
链接到长文档的最后一页或片段部分。 |
下一个 |
用于将内容拆分到多个页面以转发给用户。 |
上一页 |
当内容被分割到多个页面时，指上一页。 |
搜索 |
标识用于执行高级搜索的特定页面。 |
向上 |
既可以链接到一个页面的父页面，也可以转到一个长页面的顶部。 |
例子:
Web浏览器可以用链接元素做很多事情。这是非凡的。Opera并不是唯一可以利用link元素的浏览器。
事实上，以下所有的浏览器都采用了引用外部文件，这些文件可以影响你的网站的外观或功能。
备用 |
引用链接到站点的文件，如RSS和Atom提要。 |
Apple-touch-icon |
标识苹果设备可以使用的图标图像。 |
都柏林(元) |
主要用于指示DCMI RDF文档的实例。 |
P3P |
链接到转发有关用户隐私的信息的策略文件。 |
pics标签 |
根据网站的家庭友好度分配一个内容评级。 |
搜索 |
标识与web浏览器兼容的OpenSearch文档。 |
快捷方式图标 |
指向浏览器地址栏中显示的Favicon的链接。 |
网站地图 |
是指一个XML站点地图搜索引擎开始索引。 |
例子:
位于
可以包含的示例包括从OpenID(通用身份验证系统)到引用微格式社区(如XFN)设置的文档或配置文件，这些文档或配置文件传递关于页面的语义信息。
仅仅因为它们的影响不可见并不意味着它们不存在。下面你会发现一系列的非标准链接引用:
附录 |
指向提供内容补充详细信息的文件的链接。 |
书签 |
在文档中标识一个键片段，如#important。 |
章 |
表示多页文档的特定章节或卷。 |
编辑 |
所使用的一些CMS的软件指示要编辑文件的位置。 |
许可证 |
引用文档许可(如创作共用)。 |
openid.delegate |
用于识别OpenID用户帐户的网站地址。 |
openid.server |
进行详细信息验证和验证的服务器。 |
广播 |
允许博客确定某人何时链接到某个资源。 |
部分 |
在给定的章节中标识文档的某一部分。 |
分段 |
链接到给定章节中某一节的特定小节。 |
开始 |
指文档集合中的初始标题页。 |
例子:
作为一个最佳实践，你应该始终仔细考虑你的链接选项，因为引用外部文件可能会增加你的网页渲染网页的HTTP请求，从而减慢速度页面响应时间．只使用你需要的，并知道你为什么需要它们。
结束
虽然从技术上讲，文档头部的内容可能是无限的，但了解哪些部分会给您带来真正的好处，哪些部分只是多余的内容是值得的。一般来说，你可以遵循的最佳原则是尽量保持头部的整洁和结构合理，但也要在保持简单和为访问者提供最佳服务之间取得平衡。虽然很多人都尽量让自己的脑袋空着，但更好的计划是权衡你的选择，使用任何能增强用户体验的东西。
在网页头部的幕后，有很多很酷的东西正在进行。不要忽视它。
