<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. mysql 排序ROW_NUMBER() RANK() DENSE_RANK()

    with 月业绩 as (SELECT 年份,月份, ROUND(sum(总业绩)/100000) 业绩 FROM `myj` group by 年份,月份) select * ,ROW_NUMBER ...

  2. 继承和组合关系: is a & has a

    继承:is-a 比如 营销人员类 和 开发人员类 都继承自 职工类,营销人员 is-a 职工.组合:has-a 比如 汽车类 包含一个 发动机类 的对象,汽车 has-a 发动机.

  3. codec

    1.codec究竟是什么 音频解码芯片:Audio codec,又叫声卡:本质就是ADC和DAC 2.codec的作用 在移动设备中,codec的作用可以归结为4种,分别如下: playback:对P ...

  4. Android笔记--数据存储之SharedPreferences

    SharedPreferences--轻量级存储工具(共享参数) 其采用的存储结构是Key-Value的键值对方式 SharedPreferences用法以及相关的简单案例 记住密码的实现 实现啦! ...

  5. 分库分表ShardingJDBC最佳实践

    1 添加依赖 <dependency> <groupId>org.apache.shardingsphere</groupId> <artifactId> ...

  6. Module not found: Error: Can't resolve 'pubsub-js'

    包未安装或者包版本过新,再者安装位置有误. 我安装各种工具库或者其他包时有个 -g 到全局的习惯,觉得装到全局时在文件夹中何时何处都可以用. 在子孙文件夹中引入时依赖会在子孙和文件根目录的node_m ...

  7. 全面了解 Redis 高级特性,实现高性能、高可靠的数据存储和处理

    目录 高性能.高可用.高可扩展性的原理 持久化 RDB持久化 AOF持久化 持久化的配置 RDB配置 AOF配置 持久化的恢复 RDB的恢复 AOF的恢复 RDB和AOF的选择 持久化对性能的影响 数 ...

  8. 在windows系统中设置MySQL数据库

    MySQL搭建 效果图 step1:下载安装包 https://downloads.mysql.com/archives/community/ step2:解压后即完成安装 step3:创建 my.i ...

  9. active

    rabbitMQ与activeMQ区别 之前的项目中都用到了这两个消息队列 ActiveMq,传统的消息队列,使用Java语言编写.基于JMS(Java Message Service),采用多线程并 ...

  10. NEFU-NSILAB2021选拔赛WriteUp

    Web signin 打开看到源码: <?php highlight_file(__FILE__); $file = $_GET['file']; if ($file) { include $f ...