<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. 面试-JVM

    1.java内存模型 / java运行时数据区模型? 元空间属于本地内存 而非JVM内存 内存模型 程序计数器 1.作为字节码的行号指示器,字节码解释器通过程序计数器来确定下一步要执行的字节码指令,比 ...

  2. layui 手册

    https://layui.yii666.com/doc/modules/layer.html

  3. el-select的正确用法

    下拉框应该是大家非常常用的一个组件,表单几乎离不开它,可是用了三年后我突然发现我一直没有正确的使用它..... ElementUI 组件一直让我纠结的地方是 绑定的值对我来说经常需要绑定值的其他字段信 ...

  4. c++的thread小测试

    windows环境还用不了thread,得下一些mingw,弄了半天没弄好,直接用了商店中心就有的Ubuntu了,但是sudo install g++出现了下载不了的问题,解决方案:https://b ...

  5. Mybatisplus----DML编程控制

    乐观锁 (1)业务并发现象带来的问题:秒杀 执行: 1.在类对象中添加version属性,在数据库表中添加version字段(默认值为1) package com.itheima.domain; im ...

  6. Linux Bash Shell 中变量的 5 个易错点

    Linux 中的 Bash 脚本支持对变量的操作,下面咸鱼将介绍 Linux Bash Shell 中关于变量的 5 个易错点 因为编程习惯,这类现象往往发生在大多数使用过其他流行编程语言的程序员身上 ...

  7. Mybatis # 与 $ 符号区别

    一.区别 1.不同点: 以#{}方式传入参数,预编译时,它会将sql中的#{}替换为?,然后编译sql时,会把值两端加上 双引号.有效防止sql注入,保证数据安全. sql注入:通过把SQL命令插入到 ...

  8. Sound Joy连接非华为手机热点

    很简单,准备两个手机.常用手机和备用手机1.常用手机开启热点2.备用手机连接常用手机的热点,并且已经安装华为智慧生活app3.备用手机连接到常用手机热点后,再打开智慧生活app连接常用手机热点即可

  9. 深入理解 Python 虚拟机：字典（dict）的优化

    深入理解 Python 虚拟机:字典(dict)的优化 在前面的文章当中我们讨论的是 python3 当中早期的内嵌数据结构字典的实现,在本篇文章当中主要介绍在后续对于字典的内存优化. 字典优化 在前 ...

  10. pcm音频的录制、播放及转换

    操作系统 :Windows10_x64 pcm格式为原始音频数据,有时候会遇到需要录制.播放及转换的情况,这里记录下. 一.录制pcm音频 这里演示下使用Audacity进行pcm音频录音的过程. A ...