meta标签复习总结

最新推荐文章于 2024-06-16 06:54:38 发布

菜鸡爱上编程

最新推荐文章于 2024-06-16 06:54:38 发布

阅读量605

点赞数 3

分类专栏： html必会文章标签： html 前端

本文链接：https://blog.csdn.net/qq_43205326/article/details/130526973

版权

html必会专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

前言
一、用在哪里
二、用途

前言

我们往往忽视，却又很重要的一个标签，meta，它在页面细节上面还提供了不小的作用。

一、用在哪里

先来看看它用法

<!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>

当我们用vscode创建一个index.html文件然后然后输入快捷键，快速生成基本页面结果，可以看到，<head></head>标签内包含了，三个<meta>标签。所以是用在头部信息内的。
用浏览器打开页面，页面无效果，所以这个标签不会在页面上有显示效果

二、用途

就从vscode生成的这三个标签中的属性入手，来说说，每个标签代表的用途和作用。

1.charset

<meta charset="UTF-8">

看到它的属性值UTF-8，大概能猜出来这个属性的用法，是用来规定字符编码的。UTF-8是一个通用的字符集，它包含了任何人类语言中的大部分的字符，所以你的页面可以显示任何国家的语言。
例如：

<div>abcd1234一二三四私たちは放射線が最も強い우리 성형이 제일 심하다</div>

在这里插入图片描述

2.http-equiv

<meta http-equiv="X-UA-Compatible" content="IE=edge">

当我们在网页头部添加这个标签及属性时它会告诉浏览器使用最新的文档模式，无论用户使用的是哪种版本的 Internet Explorer 浏览器（包括 Edge 浏览器），都会以标准的方式来渲染网页，提高兼容性

3.name

<meta name="viewport" content="width=600, initial-scale=1">

当name设置了，viewport代表视口大小和形状
可以设置width、height、initial-scale、minimum-scale、maximum-scale等值

width
控制视口的大小。这可以设置为特定像素数（如’width=600’），也可以设置为特殊值device-width，即100vw，100% 的视口宽度。最小值为 1。最大值为 10000。负值会被忽略。

height
控制视口的大小。这可以设置为特定像素数（如 width=600），也可以设置为特殊值 device-height，即100vh，100% 的视口高度。最小值为 1。最大值为 10000。负值会被忽略。

initial-scale
控制页面首次加载时显示的缩放倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。

minimum-scale
控制页面允许缩小的倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。

maximum-scale
控制页面允许放大的倍数。设置一个低于 3 的值将不具备无障碍访问性。最小值是 0.1。最大值是 10。默认值为1。负值会被忽略。

看下最常用的设置就是content="width=device-width, initial-scale=1.0"代表窗口宽度，如果设置具体数值，例如600那么效果就会在小于600时缩放页面
在这里插入图片描述

4.content

在viewport示例可以看到已经使用了，content属性。他的意思就好比是name所规定的key所对应的value。具体的取值。
例如：

<meta name="description" content="This is a description." />

它的意思就是，一段描述，content里面是具体的内容，这个有什么作用呢，相信你一定用过百度，百度搜索关键字之后，会出现你想要的结果列表，它总是会有一段描述。例如这样。
在这里插入图片描述
打开F12可以看到百度百科的描述是这个

所以description的作用就是搜索引擎之后展示在结果列表的表述。
注：当然有时候你可能发现并不是你只要写了描述，搜索引擎就一定会用你的content，它会根据自己的算法，提供给用户其他的描述。

5.keywords

下面是掘金官方首页的meta，它的作用就是告诉搜索引擎，搜索哪些关键字可以搜索到我，说白了，就是利于SEO。

<meta name="keywords" content="掘金,稀土,Vue.js,前端面试题,Kotlin,ReactNative,Python">

这么多好用的小功能，赶快用起来吧。