html 中 meta 标签的属性详解

html 中 meta 标签的属性详解

  • \<meta> 标签是什么
  • \<meta> 标签常用属性
  • \<meta> 标签非常用属性

<meta> 标签是什么

<meta> 标签是 HTML 中用于描述网页元信息的元素。它位于 <head> 部分,不会显示在页面内容中,但对于浏览器、搜索引擎等具有重要作用。

主要作用:定义文档的字符编码、提供网页的描述信息、关键词、作者、视口设置等,这些信息有助于搜索引擎理解和索引网页内容。

标签省略:由于这是一个空元素,所以必须有开始标签并且不能有结束标签。

<meta> 标签常用属性

  1. charset :定义文档的字符编码,如 UTF-8。例如:

    <meta charset="UTF-8">
    
  2. name :定义元信息的名称,与 content 属性配合使用。常见的 name 属性值有:description(网页描述)、keywords(关键词)、author(作者)、copyright(版权)、viewport(视口设置)。例如:

    • 描述信息:
      <meta name="description" content="这里是对网页的描述。">
      
    • 关键词:
      <meta name="keywords" content="HTML, CSS, JavaScript, Web开发">
      
    • 作者:
      <meta name="author" content="张三">
      
    • 版权:
      <meta name="copyright" 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> 标签。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/4729.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

技术团队的管理方法和日常总结建议

管理学家德鲁克有言“管理是一种实践&#xff0c;其本质不在于知&#xff0c;而在于行&#xff0c;其验证不在于逻辑&#xff0c;而在于成果&#xff0c;其唯一的权威就是成就” &#xff0c;因此管理重实践看效果&#xff0c;但如果管理实践有理论依凭&#xff0c;那么实践起来…

android 如何显示网络地址对应的图片

1.android 如何显示网络地址对应的图片 在Android中显示网络地址对应的图片&#xff0c;通常有多种方法可以实现。以下是几种常见的方法&#xff1a; 1. 使用ImageView和Picasso库 Picasso是一个强大的图片加载库&#xff0c;它可以方便地加载网络图片并显示到ImageView中。 …

JS新语法let

使用let 定义变量 首先看到个有意思的问题&#xff0c;为什么let要叫letWhy was the name ‘let’ chosen for block-scoped variable declarations in JavaScript? 一、let可以定义作用在块级作用域的变量 //语法 let var1 [ value1] [, var2 [ value2]] [, ..., varN [ v…

Docker | 入门:安装与配置

Docker | 入门&#xff1a;安装与配置 Docker 和传统虚拟机区别 对于传统虚拟机&#xff1a; 虚拟出一套硬件&#xff0c;运行一个完整的操作系统&#xff0c;并在这个操作系统上安装和运行软件。 对于 Docker: 将一个个容器隔离开。 容器内的应用直接运行在宿主机的内容&am…

党建3d互动虚拟现实网上展厅有何优势?

在数字化浪潮席卷全球的今天&#xff0c;企业如何迅速踏上虚拟世界的征程&#xff0c;开启元宇宙之旅?答案就是——3D虚拟云展。这一创新平台&#xff0c;华锐视点以虚拟现实技术和3D数字建模为基石提供3D云展搭建服务&#xff0c;助力企业轻松搭建起虚拟数字基础设施&#xf…

基于微信小程序的旅游系统的设计与实现

基于微信小程序的旅游系统的设计与实现 Design and Implementation of a Tourism System based on WeChat Mini Program 完整下载链接:基于微信小程序的旅游系统的设计与实现 文章目录 基于微信小程序的旅游系统的设计与实现摘要第一章 绪论1.1 研究背景与意义1.2 国内外研究…

C语言阶段的题目解析

前言 我们C语言已经学习的差不多了&#xff0c;但是C语言之中存在的一些问题与难点我们还不一定能够又快又好地解决&#xff0c;为了夯实我们的基础&#xff0c;我们来练习几道稍微有点难度的C语言习题吧 例题一 题目 int main(void) {unsigned char i 7;int j 0;for (; i…

2024最新华为OD机试试题库全 -【找单词】- C卷

1. 🌈题目详情 1.1 ⚠️题目 给一个字符串和一个二维字符数组,如果该字符串存在于该数组中,则按字符串的字符顺序输出字符串每个字符所在单元格的位置下标字符串,如果找不到返回字符串“N”。 1.需要按照字符串的字符组成顺序搜索,且搜索到的位置必须是相邻单元格,其…

stm32程序死机怎么回事

STM32程序死机可能由多种因素导致&#xff0c;以下是一些常见的原因及解决方法&#xff1a; 供电问题&#xff1a;供电电压不稳定或不在正常工作电压范围内&#xff0c;电源纹波大小过大&#xff0c;都可能导致STM32死机。此外&#xff0c;供电电源中的干扰杂讯也可能对单片机…

Docker-05 Docker容器命令

一、查看容器 查看正在运行的容器: docker ps属性说明CONTAINER ID容器 IDIMAGE所属镜像COMMAND启动容器时运行的命令CREATED创建时间STATUS容器状态PORTS端口NAMES容器名称查看停止的容器: docker ps -f status=exited查看所有容器(包括运行和停止): docker ps -a查看…

Android如何使用XML自定义属性

1、定义 在res/values文件下定义一个attrs.xml文件&#xff0c;代码如下: 2、使用 在布局中使用&#xff0c; 示例代码如下&#xff1a; 3、获取 最终来到这里&#xff1a;

【计算机网络】成功解决 ARP项添加失败:请求的操作需要提升

最近在用Wireshark做实验时候&#xff0c;需要清空本机ARP表和DNS缓存&#xff0c;所以在cmd窗口输入以下命令&#xff0c; 结果发生了错误&#xff1a;ARP项添加失败&#xff1a;请求的操作需要提升 一开始我还以为是操作的命令升级了&#xff0c;但是后面发现其实只是给的权…

vsftpd常见错误代码比对(转载)

一&#xff1a;500错误 1、500 Internal Server Error 内部服务错误&#xff1a;顾名思义500错误一般是服务器遇到意外情况&#xff0c;而无法完成请求。 2、500出错的可能性&#xff1a; a、编程语言语法错误&#xff0c;web脚本错误 b、并发高时&#xff0c;因为系统资源限制…

C++:string 类

在C中定义一个 std::string 字符串可以采用以下几种方式&#xff1a; 1.使用字符串字面量初始化&#xff1a; std::string str "Hello, world!"; 2.使用构造函数初始化&#xff1a; std::string szStringB("Hello wolven"); 3.使用重复字符初始化&am…

FTP 文件传输协议

FTP 文件传输协议 作用 用来传输文件的 FTP协议采用的是TCP作为传输协议&#xff0c; 21号端口用来传输FTP控制命令的&#xff0c; 20号端口用来传输文件数据的 FTP传输模式&#xff1a; 主动模式&#xff1a; FTP服务端接收下载控制命令后&#xff0c;会主动从tcp/20号端口…

iOS pod库包含MRC类

在我们iOS开发过程中,碰到的大部分文件都是基于ARC内存管理的,但也免不了用到一些三方的MRC的代码,这里介绍三种方法来编写包括MRC文件的.podspec文件。 1).在podspec中指定requires_arc:false,同时指定requires_arc的文件,eg: 这样写的好处是别的项目拉取到你pod源码的时候,不…

后端学习记录~~JavaSE篇(Module08-异常 上 )

总览&#xff1a; Java概述&#xff1a; 思维导图文件在本人个人主页上-----资源模块 资源详情&#xff08;免费下载&#xff09;&#xff1a;Java学习思维导图异常篇资源-CSDN文库https://download.csdn.net/download/m0_61589682/89238330 整体展示&#xff1a;

Spring IOC(二)

1. Bean的定义与获取 1.1 定义Bean 在Spring 中定义Bean的方式主要有三种&#xff1a; 1、基于XML配置文件的方式&#xff08;了解&#xff09;&#xff1a;通常会在配置文件中使用<bean>标签来定义Bean&#xff0c;并设置Bean的属性、依赖关系等信息。 2、基于注解的方…

spring接入socket.io注意事项

因为前端要求&#xff0c;最后我们采用的socket.io来做我们的消息推送&#xff0c;在联调期间遇到了一些问题&#xff0c;这里记录一下&#xff0c;首先我和前端参考了日常记录-SpringBoot整合netty-socketio和Vue3和SpringBoot集成SocketIO&#xff08;WebSocket&#xff09; …

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-6.5, 汇编 led.s,第一次点亮LED灯

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…