HTML-meta标签详解
Posted 水香木鱼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML-meta标签详解相关的知识，希望对你有一定的参考价值。
一、博主介绍
💒首页:水香木鱼
🛫专栏：HTML
✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”
🔰 格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。
🔋 充电：相信付出终将会得到回报!
二、笔芯文章
<meta>标签用于设置或说明网页的元数据，必须放在<head>里面。
一个<meta>标签就是一项元数据，网页可以有多个<meta>。<meta>标签约定放在<head>内容的最前面。
不管什么样的网页，一般都可以放置以下两个<meta>标签。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
</head>
上面例子中，第一个<meta>标签表示网页采用UTF-8格式编码，第二个<meta>标签表示网页在手机端可以自动缩放。
本期为大家提供的是前端html-mate 。一🔎
<meta>标签有五个属性，下面依次介绍。
(1)、charset 属性
<meta>标签的charset属性，用来指定网页的编码方式。该属性非常重要，如果设置得不正确，浏览器可能无法正确解码，就会显示乱码。
<meta charset="utf-8">
上面代码声明，网页为 UTF-8 编码。虽然开发者可以使用其他的编码方式，但正确的做法几乎总是应该采用 UTF-8。
注意，这里声明的编码方式，应该与网页实际的编码方式一致，即声明了utf-8，网页就应该使用 UTF-8 编码保存。
如果这里声明了utf-8，实际却是使用另一种编码（比如 GB2312），并不会导致浏览器的自动转码，网页可能会显示为乱码。
(2)、name 属性，content 属性
<meta>标签的name属性表示元数据的名字，content属性表示元数据的值。
它们合在一起使用，就可以为网页指定一项元数据。
<head>
<meta name="description" content="HTML 语言入门">
<meta name="keywords" content="HTML,教程">
<meta name="author" content="张三">
</head>
上面代码包含了三个元数据：description是网页内容的描述，keywords是网页内容的关键字，author是网页作者。
元数据有很多种，大部分涉及浏览器内部工作机制，或者特定的使用场景，这里就不一一介绍了。下面是一些例子。
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="Application Name">
<meta name="generator" content="program">
<meta name="subject" content="your document's subject">
<meta name="referrer" content="no-referrer">
(3)、http-equiv 属性，content 属性
<meta>标签的http-equiv属性用来补充 HTTP 回应的头信息字段，如果服务器发回的 HTTP 回应缺少某个字段，就可以用它补充。
<meta>标签的content属性是对应的字段内容。这两个属性与 HTTP 协议相关，属于高级用法，这里就不详细介绍了。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
上面代码设定 HTTP 回应的Content-Security-Policy字段。
下面是另一些例子。
<meta http-equiv="Content-Type" content="Type=text/html; charset=utf-8">
<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="30;URL='http://website.com'">
三、博主致谢
感谢小伙伴们，耐心的阅读完本篇文章，关注👉 水香木鱼🔔 获取更多精彩文章！
⭐⭐⭐ 别忘记一键三连呦!
文章摘自：----网道互联网文档计划----
以上是关于HTML-meta标签详解的主要内容，如果未能解决你的问题，请参考以下文章