<meta> 标签是 HTML 中用于描述网页元信息的元素。它位于 <head> 部分，不会显示在页面内容中，但对于浏览器、搜索引擎等具有重要作用。主要作用有：定义文档的字符编码、提供网页的描述信息、关键词、作者、视口设置等，这些信息有助于搜索引擎理解和索引网页内容。

<meta> 标签的主要属性有：

1. charset ：定义文档的字符编码，如 UTF-8。例如： <meta charset="UTF-8">

2. name ：定义元信息的名称，与 content 属性配合使用。常见的 name 属性值有：description（网页描述）、keywords（关键词）、author（作者）、viewport（视口设置）。例如：

- 描述信息： <meta name="description" content="这是一个关于HTML的教程。">
- 关键词： <meta name="keywords" content="HTML, CSS, JavaScript, Web开发">
- 作者： <meta name="author" content="张三">
- 视口设置： <meta name="viewport" content="width=device-width, initial-scale=1.0">

3. http-equiv ：定义 HTTP 头部的元信息，如：Content-Type（内容类型）、X-UA-Compatible（浏览器兼容性）、refresh（自动刷新）。例如：

- 内容类型： <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- 浏览器兼容性： <meta http-equiv="X-UA-Compatible" content="IE=edge">
- 自动刷新（每隔 5 秒刷新一次）： <meta http-equiv="refresh" content="5">

注意，由于 <meta> 标签没有内容，所以不需要闭合标签。不同的属性可以搭配使用，以提供更多信息。

除了之前提到的属性外，还有一些不太常用但可能有用的 <meta> 属性和应用场景：

1. robots：指定搜索引擎爬虫如何处理页面。例如：

<meta name="robots" content="noindex, nofollow">

上面的示例表示告诉搜索引擎爬虫不要索引该页面，也不要沿着该页面的链接继续爬行。

2. theme-color：定义浏览器地址栏的颜色，仅在支持的移动设备上有效。例如：

<meta name="theme-color" content=" 336699">

3. application-name：定义网页在启用 Web 应用时的名称。例如：

<meta name="application-name" content="Web应用">

4. generator：指定生成该网页的软件名称。例如：

<meta name="generator" content="Meta6.0">

5. language：定义网页内容的主要语言。例如：

<meta name="language" content="zh-CN">

6. expires：设定网页过期时间，过期后浏览器将从服务器重新请求。例如：

<meta http-equiv="expires" content="Wed, 21 June 2023 09:18:54 GMT">

7. pragma：禁止浏览器从本地计算机的缓存中访问页面内容。例如：

<meta http-equiv="pragma" content="no-cache">

8. Cache-Control：指定浏览器如何缓存页面。例如：

<meta http-equiv="Cache-Control" content="no-cache">

9. Cproperty：用于指定 Open Graph 元数据。例如：

<head>

    <meta property="og:title" content="页面标题">

    <meta property="og:description" content="页面描述">

    <meta property="og:image" content="页面图片 URL">

    <!-- Open Graph 是一种开放的元数据协议，用于向社交媒体平台提供有关页面内容的更多信息。 -->

    <!-- 使用 Open Graph 元数据可以在页面被分享到社交媒体平台时，自动生成高质量的预览图像、标题和描述，从而提高分享的可读性和吸引力。 -->

</head>

这些属性在特定的应用场景下可能有用，但并非在所有网页中都需要使用。根据实际需求和目标选择合适的属性来配置 <meta> 标签。

HTML中meta标签的那些属性的更多相关文章

  1. HTML中meta标签作用及属性总结

    在前端开发中编写html静态网页模板时,head标签内总是会带上许多meta标签,大多数时候并不十分了解这些标签的具体作用,只是别人写了我们也写上吧! 今天小编特意查询了一下关于网页中meta标签的作 ...

  2. HTML中Meta标签中http-equiv属性小结

    HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...

  3. HTML中Meta标签中http-equiv属性

    HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...

  4. HTML中<meta>标签如何正确使用

    HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...

  5. html中meta标签及用法理解

    自己一直想成为高级前端开发工程师,而自学.奈何最近感觉自学收效甚微,一度迷茫. 不破不立,打算改变这样的状态. 春节后上班第一天,今年打算好好实现自己的前端梦想. 重新整理.总结前端技术. 废话,就不 ...

  6. iOS 7.1的Safari为meta标签新增minimal-ui属性，在网页加载时隐藏地址栏与导航栏

    在 iOS 7.1 的 Safari 中为 meta 标签新增 minimal-ui 属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏. 如何实现?你只需将“minimal-ui”加入 view ...

  7. .NET获取Html字符串中指定标签的指定属性的值

    using System.Text; using System.Text.RegularExpressions; //以上为要用到的命名空间 /// <summary> /// 获取Htm ...

  8. 转.HTML中img标签的src属性绝对路径问题解决办法，完全解决！

    HTML中img标签的src属性绝对路径问题解决办法,完全解决   需求:有时候自己的项目img的src路径需要用到本地某文件夹下的图片,而不是直接使用项目根目录下的图片. 场景:eclipse,to ...

  9. 【转】HTML meta标签总结与属性使用介绍

    HTML meta标签总结与属性使用介绍 转载处写的已经超级好了,强烈推荐. 转自:https://segmentfault.com/a/1190000004279791 本人就不再赘述.拿来主义!供 ...

  10. <meta>标签元素的属性理解

    meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和 ...

随机推荐

  1. What is Weight Lifting?

    Weight lifting is the process of lifting items of great mass in order to increase the muscle size an ...

  2. 微信小程序中如何识别银行卡和身份证

    识别银行卡云函数card2/index.js: const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRE ...

  3. 使用 Vue 3 时应避免的 10 个错误

    Vue 3已经稳定了相当长一段时间了.许多代码库都在生产环境中使用它,其他人最终都将不得不迁移到Vue 3.我现在有机会使用它并记录了我的错误,下面这些错误你可能想要避免. 使用Reactive声明原 ...

  4. python abseil库（app, flags, logging）总结

    absl (Abseil PythonCommon Libraries)(https://abseil.io/docs/python/)是用于构建Python应用程序的Python库代码集合,它包括三 ...

  5. Python学习笔记--元组+字符串

    元组 元组一旦定义完成,就不能再被修改 同样,元组也可以进行嵌套操作 当然,若是在元组里面嵌套一个list,那么list里面的元素是可以进行修改的! 案例: 实现: 字符串 查找索引值: 字符串替换: ...

  6. 无法下载外网Docker镜像的解决方案

    概述 在安装k8s相关组件时经常会遇到需要下载一些外网的Docker镜像仓库,比如k8s的一个NFS存储类k8s.gcr.io/sig-storage/nfs-subdir-external-prov ...

  7. LeetcodePractice-数组

    目录 88. 合并两个有序数组 思路解析 字节&1. 两数之和 思路解析 腾讯&15. 三数之和 思路解析 18. 四数之和 思路解析 解释下,tmpSum为什么用int不行,需要用i ...

  8. JAVA数据类型以及什么是字节

    强类型语言:要求变量的使用要严格符合规定,所有变量都必须先定义才能使用(安全性高) java的数据类型分为两大类 基本类型(primitive type) 引用类型(reference type) / ...

  9. KCL v0.4.6 alpha 发布！- 更多 Kubernetes 工具集成，更好的 IDE 错误提示

    简介 KCL 团队很高兴地宣布 KCL v0.4.6-alpha.1 版本现在已经可用! 您可以在 KCL v0.4.6-alpha.1 发布页面 或者 KCL 官方网站 获得 KCL 二进制下载链接 ...

  10. StyleGAN 调整面部表情，让虚拟人脸更生动

    目录 人脸表情 调整步骤 调整结果 人脸表情 通过上一篇文章 StyleGAN 生成的人脸:https://www.cnblogs.com/tinygeeker/p/17236264.html 人脸图 ...