Note

HTML <meta> 元素

今天在网上看到了别人的写的一个标准前端HTML模板，里面的一些<meta>元素的设置让我感觉有些困惑。之前虽然也在HTML文件中使用<meta>标签，但是使用最多的一直都是：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scala=1">

而这个模板中，可以看到使用了多个<meta>：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{title}</title>
    <meta name="description" content="{description}" />
    <meta name="keywords" content="{keywords}" />
    <!-- 样式文件 -->
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    
    <section class="">
        <div class="container">
            <div class="row">
                
            </div>
        </div>
    </section>
    
    <!-- 尾部js -->
    <script src="./../require.js"></script>
    <script src="./../main.js"></script>
    <!-- 替换结束 -->
    
    <!-- 自定义代码部分 -->
    <script>
    // js code here.
    require(['wap/index'], function() {
        require(['wap/indexJs']);
    });
    </script>
</body>
</html>

其中一些<meta>元素的用法我并不理解，所以在网上查找了一些关于<meta>元素的文档和文章，学习了这个元素的相关用法。

<meta>元素概要

按照MDN HTML元素参考中关于<meta>的概述：

The HTML <meta> element represents any metadata information that cannot be represented by one of the other HTML meta-related elements (<base>, <link>, <script>, <style> or <title>).
HTML Meta 元素 (<meta>) 用来表达任何其他 HTML 元相关元素 (<base>, <link>, <script>, <style> 或者 <title>) 等无法表达的信息。

<meta>元素提供了页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。这些元信息可以分为以下几种：

<meta>元素的属性

<meta>元素支持所有的全局属性。

charset

此属性声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖。

content

此属性定义与 http-equiv 或 name 属性相关的元信息（gives the value assocaited with http-equiv or name attribute）。

http-equiv

This enumerated attribute defines the pragma that can alter servers and user-agents behavior. The value of the pragma is defined using the content.

http-equiv的可能值详见MDN HTML meta 元素概述。

name

这个属性定义的一个document-level的元数据的名称，这个元素的值通过content来定义。 name的一些可能的值有：

更多可能的值同样能够在 MDN HTML meta 元素概述中找到。

这里要特别说一下name的一个可能值：viewport。这一属性在进行响应式设计中有很大用处，具体可以阅读： Viewport Meta标签

示例

<!-- Defining the charset in HTML4 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- In HTML5 -->
<meta charset="utf-8">

<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=http://www.mozilla.org/">

其他

还有一些meta元素可能不是标准的，只有当网页被特定的浏览器浏览才会发挥作用。例如上面的：

<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<!-- 浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident） -->
<meta name="renderer" content="webkit" />

关于常用meta，别人已经有很好的总结了，具体可以看这篇博客： <meta> 元素

html