HTML 元数据
- W_Z_C
- 共 1116 字,阅读约 3 分钟
几乎每个网站都会包含元数据信息,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>