0
点赞
收藏
分享

微信扫一扫

HTML-meta标签详解


二、笔芯文章

​<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'">

三、博主致谢

感谢小伙伴们,耐心的阅读完本篇文章,关注👉 ​​水香木鱼​​🔔 获取更多精彩文章!


举报

相关推荐

0 条评论