meta元素内容含义

前言

打开VSCode，输入html:5，按下tab，一个基本的html结构出来了，却从未注意过里面某些元素的含义。今天就来总结总结这些重要却不起眼的元素标签meta。

head内各类meta含义

首先meta元素有什么做用呢？看英文版w3schools

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

<meta> 元素标签是提供有关HTML文档的元数据，元数据不会显示在页面上，可是可以被机器识别。

总而言之, meta标签是用来让机器识别的，同时它对SEO起着重要的做用。

charset

指定了html文档的编码格式，经常使用的是utf-8(Unicode的字符编码)，还有ISO-8859-1(拉丁字母的字符编码)。固然还有其余的，可是通常不经常使用也就不介绍了

<meta charset="utf-8">
复制代码

name & content

指定元数据的名称(这部分对SEO很是有用)

author——定义了页面的做者

<meta name="author" content="Tony">
复制代码

keywords——为搜索引擎提供关键字

<meta name="keywords" content="HTML, CSS, JavaScript">
复制代码

description——对网页总体的描述

<meta name="description" content="My tutorials on HTML, CSS and JavaScript">
复制代码

viewport——对页面视图相关进行定义

• width=device-width——将页面宽度设置为跟随屏幕宽度变化而变化
• initial-scale=1.0——设置浏览器首次加载页面时的初始缩放比例(0.0-10.0正数)
• maximum-scale=1.0——容许用户缩放的最大比例(0.0-10.0正数)，必须大于等于minimum-scale
• minimum-scale=1.0——容许用户缩放的最小比例(0.0-10.0正数)，必须小于等于maximum-scale
• user-scalable=no——是否容许用户手动缩放(yes或者no)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minmum-scale=1.0">
复制代码

generator——包含生成页面软件的标识符

which contains the identifier of the software that generated the page.

<meta name="generator" content="Hexo 3.8.0">
复制代码

theme-color——定义主题颜色

<meta name="theme-color" content="#222">
复制代码

http-equiv & content

Provides an HTTP header for the information/value of the content attribute

refresh——每30s刷新一次文档

<meta http-equiv="refresh" content="30">
复制代码

X-UA-Compatible——告知浏览器以何种版本渲染界面。下面的例子有限使用IE最新版本

<meta http-equiv="X-UA-Compatible" content="ie=edge">
复制代码

关因而否有必要使用这一条在stack overflow尚且有争议。我的认为若是不想兼容低版本的IE，能够直接忽略这一条。

Cache-Control——请求和响应遵循的缓存机制，能够声明缓存的内容，修改过时时间，可屡次声明

• no-transform——不得对资源进行转换或转变。
• no-siteapp——禁止百度进行转码

<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
复制代码

为何我会介绍这两个呢？由于个人博客在head内存在，查了一下缘由，正如以前所述，这个是针对百度转码的。具体能够看github的issue

其余更多内容能够查看MDN

property & content

可让网页成为一个富媒体对象，赞成网页内容被其余网站引用，同时在应用的时候不会只是一个连接，会提取相应的信息展示给用户。

<meta property="og:type" content="website">
<meta property="og:url" content="https://zjgyb.github.io/index.html">
<meta property="og:site_name" content="tony's blog">
复制代码

具体能够参照The Open Graph protocal

总结

我只总结了一些经常使用的meta标签，其余的不太经常使用的也就暂时不总结了，若是未来用到再进行补充。总算是有了一些了解。

参考教程

• w3school
• MDN-meta
• web教程网
• segmentfault-Lxxyx开发笔记
• MDN-Cache-Control
• 首屏图片