HTML 元数据

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>

大佬,给点反馈?

平均评分 / 5. 投票数:

很抱歉,这篇文章不能帮助到你

请让我们改进这篇文章

告诉我们我们如何改善这篇文章?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top