HTML 元数据

几乎每个网站都会包含元数据信息，HTML 使用 meta 元素声明它们，你可以简单的将这些元数据理解为当前文档一些注释信息，这些信息并不会显示在最终的页面上，它们主要是给搜索引擎或者其它的网络服务提供额外的结构化数据，例如页面的关键字、描述、作者、字符编码等等。你可以在 head 部分放置任意多的 meta 元素。

下面简单的介绍几种常见的用途：

字符声明

HTML 中的字符声明通常使用 meta 元素进行标记，如下面的代码：

<meta charset="utf-8">

该代码被放置在 head 元素中，表明当前文档的字符集是 utf-8 格式。在 web 开发中我们推荐使用 utf-8 格式的编码，如果没有设置该选项，那么浏览器会使用平台默认的编码进行解析。也就是说，如果你的网页中有中文，而你的操作系统是英文，那么最后的显示结果很有可能会出现乱码（这里可能还和浏览器配置相关）。

作者声明

HTML 中可以使用 meta 元素声明文档的作者：

<meta name="author" content="Alexander Howick">

作者可以是个人、公司或者其他第三方。

搜索引擎相关

主流的搜索引擎推荐网站的页面中包含关键字和内容描述，这些内容对早期的搜索引擎来说很重要，如果内容设置的丰富，很有可能会提高你的网站排名。如果现如今的搜索引擎更加智能，虽然不否认这些元数据的作用，但是重要程度已经明显降低了，不过设置一下对 SEO 还是有帮助的。

<head>
    <title>Defining Keywords and Description</title>  
    <meta name="keywords" content="HTML, CSS, javaScript">
    <meta name="description" content="Easy to understand tutorials and references on HTML, CSS, javaScript and more..."> 
</head>

移动设备适配

使用 viewport 标记可以让你的网页在移动设备上正确显示。如果没有该标记，移动浏览器可能会使用桌面屏幕宽度呈现浏览器页面，如果将其缩放至移动屏幕大小，这样可能会导致你需要双指缩方才能正常的浏览网页。

视口元数据允许你设置最佳的视口大小和缩放限制，以便移动端可以正常的查看网页。典型的代码如下：

<head>
    <title>Configuring the Viewport</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

上面的代码表达了视口的初始宽度和设备宽度一样，缩放比例调节为 100%，最终的显示效果如上图左侧所示。viewport 这个概念有点复杂，这里就不详细的展开了，大家可以去网上搜索相关的知识了解一下，如果你学习过 3D 游戏开发，应该很容易理解，这个是典型的视口显示问题。你可以简单的理解网页的整个内容很大，如何在一个手机这样的小窗口显示完整的网页内容，这里面就有很多可以选择的策略，例如直接缩放，或者用滚动条的方式显示一部分等等，其中 viewport 元数据就是告诉浏览器该如何显示网页的内容。

说句实话，大部分写网页这玩意几百年也不会变，把上面那句话抄下来就行了，哪有那么多说头，又不是考古，起手一个模板搞定：

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>HTML Template</title>
  </head>
  <body>
    <h1>你好，世界！</h1>
  </body>
</html>