【HTML】<meta>不得不说的事

Hsiao
300 阅读3分钟

前言

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

在我入门html的时候很喜欢用到IDE插件里面自动补全模板的功能，在我的vscode中敲感叹号！+TAB键会得到下面这个模板：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

当时图个便捷懵懵懂懂就过去了，但要让我说出每句的细节我却只能支支吾吾

今天要解决的是其中出现最多的HTML <meta> 元素

为何存在

在<head>中其他带尖括号<>的元素（例如<base>、<link>、<script>、<style>、<title>）我们称之为 元相关（meta-related）元素

  • <base>文档根URL元素：指定一个文档中包含的所有相对 URL 的根 URL
  • <link>外部资源链接元素： 规定了当前文档与外部资源的关系
  • <script>脚本元素：用用作嵌入或者指向 JavaScript 代码
  • <style>样式元素：包含文档的CSS样式信息或者文档的部分内容
  • <title>标题元素：定义文档的标题，显示在浏览器的标题栏或标签页上

即便这些元素神通广大，那也有覆盖不到元数据信息无法被表示，这个时候就要用到：

<meta>文档级元数据元素

属性值

在<mata>元素定义的元数据分为几种类型：

name

设置后该meta元素提供文档级别的元数据，应用于整个页面。

这个属性要搭配content属性使用：使用name - content 形式的文档元数据，其中name 属性为元数据条目提供名称，而 content属性提供值。

不妨现在F12看看掘金该页面的<head>里面有多少种<meta name="xxx" content="xxx">的搭配

image-20221222153139690

常见的name值有：

application-name网页中所运行的应用程序的名称、viewport视口、description描述、keyword关键词、author作者名、generator生成页面的软件标识符、referrerHTTP请求头、theme-color页面建议颜色...

http-equiv

设置后该meta元素成为编译指令，提供的信息与类似命名的 HTTP 头部相同

所有允许的值都是特定 HTTP 头部的名称，如下：

  • content-security-policy：它允许作者定义当前页的内容策略，内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击

  • content-type： 其值必须是"text/html; charset=utf-8"。该属性只能用于MIME type为 text/html 的文档,不能用于 MIME 类型为 XML 的文档

  • default-style ：设置默认CSS 样式表的名称

  • x-ua-compatible ：后面跟的 content 属性必须具有值 "IE=edge"，用户代理必须忽略此指示。

  • refresh：

    • 如果 content只包含一个正整数，则为重新载入页面的时间间隔 (秒)；
    • 如果 content包含一个正整数，并且后面跟着字符串 ';url=' 和一个合法的 URL，则是重定向到指定链接的时间间隔 (秒)

charset

设置后该meta元素是一个字符集声明，告诉文档使用哪种字符编码

如果使用了这个属性，其值必须是与大小写无关的"utf-8"

itemprop

设置后该meta元素提供用户定义的元数据

使用到的场景非常苛刻，他有一个潜在存在条件：在同一个 标签中，name, http-equiv或者 charset三者中任何一个属性存在时，itemprop属性不能被使用。

参考文献

MDN中文文档：developer.mozilla.org/zh-CN/

avatar
文章
阅读
粉丝