当前位置: 首页 > news >正文

前端HTML标签 meta中常见的一些属性

meta中常见的一些属性


<meta/> 标签的属性
<meta/> 是什么?
<meta/> 标签主要用于表示和当前文档相关的 元数据 信息。
而 元数据(metadata),简单的来说就是描述数据的数据。例如,一个 HTML 文件是一种数据,但 HTML 文件也能在 head元素中包含描述该文档的 元数据,比如该文件的作者和概要。

1.name

name属性用于指定元数据的名称。

<meta name="description" content="这是一个描述"/>

2.charset

charset属性用于指定网页的字符编码。

<meta charset="UTF-8"/><!-- 若使用这个属性,那么它的值只能是字符串 "utf-8" (不区分 ASCII 大小写),因为 UTF-8 是 HTML5 文档的唯一有效编码
声明字符编码的 <meta> 元素必须完全位于 文档的前 1024 个字节内 -->

3.viewport

viewport属性用于指定网页的视口设置。确保在移动设备上显示的内容不会缩放

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

4.robots

robots属性用于指定搜索引擎的爬虫索引方式。

<meta name="robots" content="index, follow"/><!-- 表示爬虫对此页面的处理行为 或 应当遵守的规则,是用来做搜索引擎抓取的
可设置 <meta name="robots" content="all | none | index | follow">all:搜索引擎将索引此网页,并继续通过此 网页的链接索引文件 将被检索
none:搜索引擎将 忽略 此网页
index:搜索引擎 索引 此网页
follow:搜索引擎继续通过此网页的链接索引搜索 其它的网页 -->

5.author

author属性用于指定网页的作者。

<meta name="author" content="John Doe"/>

6.keywords

keywords属性用于指定网页的关键字。

<meta name="keywords" content="HTML, CSS, JavaScript"/>

7.description

description属性用于指定网页的描述信息。

<meta name="description" content="这是一个描述"/>
清除缓存

在 单页面应用 (Single Page Application, SPA) 中,对应的 html 文件 是不需要被缓存的,只需要对 html 文件中的 CSS、JavaScript 等资源进行缓存(得益于现代构建工具的特性,可以直接使用 强缓存),那么此时我们就可以通过设置 来实现 html 文件清除缓存功能,如下:

    <meta http-equiv="Expires" content="0" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Cache-control" content="no-cache" /><meta http-equiv="Cache" content="no-cache" />
renderer

用来指定支持双核浏览器要采用哪种的渲染方式,如 360 浏览器

<meta name="renderer" content="webkit"/> // 默认 webkit 内核<meta name="renderer" content="ie-comp"/> //默认 IE 兼容模式<meta name="renderer" content="ie-stand"/> //默认 IE 标准模式 

8.generator

generator属性用于指定生成当前网页的软件名称和版本号。

<meta name="generator" content="MyApp 1.0"/>

9.copyright

copyright属性用于指定网页的版权信息。

<meta name="copyright" content="Copyright © 2021 MySite. All Rights Reserved."/>

10.revisit-after

revisit-after属性用于指定搜索引擎爬虫访问网站的频率。

<meta name="revisit-after" content="7 days"/>

其他

http-equiv

通过该属性可以设置特定 HTTP 标头内容,例如(非全部):


http-equiv="X-UA-Compatible"
一般用来是做 IE 浏览器适配 的,如以下告诉 IE 浏览器使用最高版本来渲染页面http-equiv="Content-Type"
用于声明 MIME 类型 和 文档的 字符编码
```html
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

http-equiv=“x-dns-prefetch-control”

HTML 页面中的 a 标签 会 自动启用 DNS 提前解析 来提升网站性能,但是在使用 https 协议的网站中失效,可通过设置以下方式进行打开

<meta http-equiv="x-dns-prefetch-control" content="on"/>
<meta/> 

这样的方式有利于在发布新版本后,避免通过手动清除浏览器缓存,如果不清除缓存就会加载旧版本的资源。

禁止翻译

通常项目中可能会存在 国际化 的需求,这就意味着用户可以手动选择 当前的语言环境,但除此之外,通过浏览器本身也会存在对应的 翻译插件。
问题点在于,如果用户先使用 浏览器翻译插件 默认翻译文档内容,又切换了 项目中的国际化 功能,那么此时就导致文档中的内容出现翻译不准确。
而这个问题是亲身经历过的,只记得当时用户在 Chrome 浏览器 中反馈翻译不准确甚至出现意料之外字符的问题时,也是花费了一番功夫才确定是用户使用 浏览器翻译插件 的问题,针对 Chrome 浏览器 在访问我们自己的项目时可以让其不进行 自动翻译,可进行如下设置:

<meta name="google" content="notranslate" />

自定义元数据
除了使用 标签本身提供特定元数据内容之外,我们其实也可以自定义元数据,只不过这个元数据不会被当前文档所识别并被应用,例如:

<meta name="theme-color" content="#333" />
# meta 中 name=viewPort 的一些属性## 1. widthwidth 属性设置视口的宽度,为一个正整数,或字符串"device-width"## 2. initial-scaleinitial-scale 属性设置页面的初始缩放值,为一个数字,可以带小数## 3. minimum-scaleminimum-scale 属性设置用户缩放的最小值,为一个数字,可以带小数## 4. maximum-scalemaximum-scale 属性设置用户缩放的最大值,为一个数字,可以带小数## 5. user-scalableuser-scalable 属性是布尔值,表示是否允许用户进行缩放,值为"no"或"yes",默认为"no",即不允许用户缩放页面## 6. 示例```html
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">

默认视图宽度 为 设备宽度
默认缩放比为 1
最大、最小缩放比为 1
不允许用户手动缩放

解决视图上移问题

正如前面所示,视图发生偏移只在 IOS 系统 中的 企微环境 出现,这就表明了 微信 webview 渲染 和 企微 webview 渲染 还是存在差异。

viewport-fit — iOS11 新增特性

viewport-fit 是为了适配 iPhoneX 对现有 标签的一个扩展,用于设置网页在可视窗口的布局方式,具有三个属性值:
auto
默认值,跟 contain 表现一致

contain
可视窗口 完全包含 网页内容

cover
网页内容 完全覆盖 可视窗口

既然看起来 企微 webview 中视图高度没法覆盖,那我们就可以通过 设置网页在可视区域的布局方式将视图内容,新增 viweport-fit: cover 使得页面内容完全覆盖整个窗口,即可解决问题:

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

相关文章:

前端HTML标签 meta中常见的一些属性

meta中常见的一些属性 <meta/> 标签的属性 <meta/> 是什么&#xff1f; <meta/> 标签主要用于表示和当前文档相关的 元数据 信息。 而 元数据&#xff08;metadata&#xff09;&#xff0c;简单的来说就是描述数据的数据。例如&#xff0c;一个 HTML 文件是一…...

127,【3】 buuctf [NPUCTF2020]ReadlezPHP

进入靶场 吓我一跳 查看源码 点击 审计 <?php// 定义一个名为 HelloPhp 的类&#xff0c;该类可能用于执行与日期格式化相关的操作 class HelloPhp {// 定义一个公共属性 $a&#xff0c;用于存储日期格式化的模板public $a;// 定义一个公共属性 $b&#xff0c;用于存储…...

继承(python)

一、基础知识 &#xff08;一&#xff09;定义&#xff1a;子类能继承父类所有的公有属性和公有方法&#xff08;先使用子类的方法、属性&#xff09; &#xff08;二&#xff09;格式&#xff1a; class 子类名&#xff08;父类名&#xff09;&#xff1a; #父类 class Ph…...

驱动开发系列36 - Linux Graphics 2D 绘制流程

一: 概述 在Linux中,2D绘制流程是操作系统、图形库、显示协议、驱动程序等多个组件协调工作的结果。整体流程如下步骤所示: 1. 客户端请求:客户端程序(如GTK、Qt应用程序)通过X11协议与Xorg-Server通信(或通过Wayland协议与Wayland合成器通信)、请求绘制2D图形,比如绘制…...

STL函数算法笔记

STL函数算法笔记 今天我们来学习的是STL库中的一些函数。首先,STL这个东西大家一定非常熟悉,里面很多的数据结构都帮了大家不少忙,那么今天我们就来说几个重要的数据结构。 向量 向量,也就是数据结构vector,你也可以称之为动态数组,本质跟数组差不多,只不过有一些好处…...

【Vue】在Vue3中使用Echarts的示例 两种方法

文章目录 方法一template渲染部分js部分方法一实现效果 方法二template部分js or ts部分方法二实现效果 贴个地址~ Apache ECharts官网地址 Apache ECharts示例地址 官网有的时候示例显示不出来&#xff0c;属于正常现象&#xff0c;多进几次就行 开始使用前&#xff0c;记得先…...

小红书自动化:如何利用Make批量生成爆款笔记

小红书自动化&#xff1a;如何利用Make制作个人自媒体中心&#xff0c;批量生成爆款笔记 引言 在如今信息爆炸的时代&#xff0c;如何高效地获取和分享优质内容&#xff0c;成为了每位自媒体工作者必须面对的挑战。你是否想过&#xff0c;如果能够将这项繁复的工作实现自动化…...

学习率调整策略 | PyTorch 深度学习实战

前一篇文章&#xff0c;深度学习里面的而优化函数 Adam&#xff0c;SGD&#xff0c;动量法&#xff0c;AdaGrad 等 | PyTorch 深度学习实战 本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started 本篇文章内容来自于 强化学习必修课&#xff1a;引…...

DeepSeekMoE 论文解读:混合专家架构的效能革新者

论文链接&#xff1a;DeepSeekMoE: Towards Ultimate Expert Specialization in Mixture-of-Experts Language Models 目录 一、引言二、背景知识&#xff08;一&#xff09;MoE架构概述&#xff08;二&#xff09;现有MoE架构的问题 三、DeepSeekMoE架构详解&#xff08;一&a…...

以下是基于巨控GRM241Q-4I4D4QHE模块的液位远程控制系统技术方案:

以下是基于巨控GRM241Q-4I4D4QHE模块的液位远程控制系统技术方案&#xff1a; 一、系统概述 本系统采用双巨控GRM241Q模块构建4G无线物联网络&#xff0c;实现山上液位数据实时传输至山下水泵站&#xff0c;通过预设逻辑自动控制水泵启停&#xff0c;同时支持APP远程监控及人工…...

【JVM详解五】JVM性能调优

示例&#xff1a; 配置JVM参数运行 #前台运行 java -XX:MetaspaceSize-128m -XX:MaxMetaspaceSize-128m -Xms1024m -Xmx1024m -Xmn256m -Xss256k -XX:SurvivorRatio8 - XX:UseConcMarkSweepGC -jar /jar包路径 #后台运行 nohup java -XX:MetaspaceSize-128m -XX:MaxMetaspaceS…...

2.10日学习总结

题目一&#xff1a; AC代码 #include <stdio.h>#define N 1000000typedef long long l;int main() {int n, m;l s 0;l a[N 1], b[N 1];int i 1, j 1;scanf("%d %d", &n, &m);for (int k 1; k < n; k) {scanf("%lld", &a[k]);…...

疯狂前端面试题(四)

一、Ajax、JSONP、JSON、Fetch 和 Axios 技术详解 1. Ajax&#xff08;异步 JavaScript 和 XML&#xff09; 什么是 Ajax&#xff1f; Ajax 是一种用于在不刷新页面的情况下与服务器进行数据交互的技术。它通过 XMLHttpRequest 对象实现。 优点 - 支持同步和异步请求。 - 能…...

YOLOv11-ultralytics-8.3.67部分代码阅读笔记-metrics.py

metrics.py ultralytics\utils\metrics.py 目录 metrics.py 1.所需的库和模块 2.def bbox_ioa(box1, box2, iouFalse, eps1e-7): 3.def box_iou(box1, box2, eps1e-7): 4.def bbox_iou(box1, box2, xywhTrue, GIoUFalse, DIoUFalse, CIoUFalse, eps1e-7): 5.def mas…...

SuperCopy解除网页禁用复制功能插件安装和使用

点击下载《SuperCopy解除网页禁用复制功能插件》 1. 前言 在当今数字化时代&#xff0c;网络已成为我们获取信息和知识的主要渠道。互联网如同一片浩瀚无垠的知识海洋&#xff0c;蕴藏着无数的资源&#xff0c;从学术论文到生活小窍门&#xff0c;从专业教程到娱乐资讯&#…...

UP-VLA:具身智体的统一理解与预测模型

25年1月来自清华大学和上海姚期智研究院的论文“UP-VLA: A Unified Understanding and Prediction Model for Embodied Agent”。 视觉-语言-动作 (VLA) 模型的最新进展&#xff0c;利用预训练的视觉语言模型 (VLM) 来提高泛化能力。VLM 通常经过视觉语言理解任务的预训练&…...

Unity 基于状态机的逻辑控制详解

状态机是游戏开发中常用的逻辑控制方法&#xff0c;它可以将复杂的逻辑分解成多个独立的状态&#xff0c;并通过状态转移来控制逻辑的执行流程。本文将详细介绍如何在 Unity 中基于状态机实现逻辑控制&#xff0c;并提供技术详解和代码实现。 一、状态机简介 1.1 基本概念 状…...

傅里叶单像素成像技术研究进展

摘要&#xff1a;计算光学成像&#xff0c;通过光学系统和信号处理的有机结合与联合优化实现特定成像特性的成像系统&#xff0c;摆脱了传统成像系统的限制&#xff0c;为光学成像技术添加了浓墨重彩的一笔&#xff0c;并逐步向简单化与智能化的方向发展。单像素成像(Single-Pi…...

IDEA接入DeepSeek

IDEA 目前有多个途径可以接入deepseek&#xff0c;比如CodeGPT或者Continue&#xff0c;这里借助CodeGPT插件接入&#xff0c;CodeGPT目前用的人最多&#xff0c;相对更稳定 一、安装 1.安装CodeGPT idea插件市场找到CodeGPT并安装 2.创建API Key 进入deepseek官网&#xf…...

前端如何判断浏览器 AdBlock/AdBlock Plus(最新版)广告屏蔽插件已开启拦截

2个月前AdBlock/AdBlock Plus疑似升级了一次 因为自己主要负责面对海外的用户项目&#xff0c;发现以前的检测AdBlock/AdBlock Plus开启状态方法已失效了&#xff0c;于是专门研究了一下。并尝试了很多方法。 已失效的老方法 // 定义一个检测 AdBlock 的函数 function chec…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

WEB3全栈开发——面试专业技能点P4数据库

一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库&#xff0c;基于 mysql 库改进而来&#xff0c;具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点&#xff1a; 支持 Promise / async-await&#xf…...

Android多媒体——音/视频数据播放(十八)

在媒体数据完成解码并准备好之后,播放流程便进入了最终的呈现阶段。为了确保音视频内容能够顺利输出,系统需要首先对相应的播放设备进行初始化。只有在设备初始化成功后,才能真正开始音视频的同步渲染与播放。这一过程不仅影响播放的启动速度,也直接关系到播放的稳定性和用…...

2025-06-08-深度学习网络介绍(语义分割,实例分割,目标检测)

深度学习网络介绍(语义分割,实例分割,目标检测) 前言 在开始这篇文章之前&#xff0c;我们得首先弄明白&#xff0c;什么是图像分割&#xff1f; 我们知道一个图像只不过是许多像素的集合。图像分割分类是对图像中属于特定类别的像素进行分类的过程&#xff0c;即像素级别的…...

使用MounRiver Studio Ⅱ软件写一个CH592F芯片的ADC采集程序,碰到的问题

MounRiver Studio Ⅱ 默认是不开启浮点计算的&#xff0c;所以有些浮点功能不能用&#xff0c;碰到问题是 while (1) {DelayMs (100);tmp Read_Temperature (0);sprintf (tempBuffer, "temp:%.2f\r\n", tmp); // 格式化温度值到字符串。使用%f要开启相应的…...