几乎每个网站都会包含元数据信息，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>
