HTML中meta标签属性详解

文章目录

  • name 属性
    • ⚡️1. viewport
    • ⚡️2. keywords
    • ⚡️3. description
    • 4. author
    • 5. application-name
    • 6. generator
    • 7. robots
    • 8. copyright
  • http-equiv 属性
    • ⚡️1. content-type
    • ⚡️2. Cache-Control
    • 3. refresh
    • 4. default-style
  • charset 属性
    • ⚡️UTF-8

<meta> 标签是一种用于在 HTML 文档头部提供元数据的标签。它通常位于 <head> 标签内，用于向浏览器和搜索引擎提供关于网页的信息，而不是直接展示给用户

是HTML标记head区的一个关键标签，用于描述一个HTML网页文档的属性，提供有关页面的元信息。它并不会显示在页面上，但对于机器是可读的，可用于浏览器（如何显示内容或重新加载页面）、搜索引擎（SEO）或其他web服务。

name 属性

⚡️1. viewport

用于定义移动设备上网页的视口设置，以控制网页的显示方式和缩放行为。

它可以帮助页面更好地适应不同大小的屏幕。

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

⚡️2. keywords

这个属性用于提供与页面内容相关的关键词列表。

虽然现代搜索引擎已经不太依赖 keywords meta 标签进行排名，但它仍然在一些上下文中被使用。

<meta name="keywords" content="HTML, web development, tutorials, learning resources">

⚡️3. description

这个属性用于提供关于页面的简短描述。

它经常用于搜索引擎结果中显示页面的摘要，对于 SEO 很重要。

<meta name="description" content="This is a website about learning HTML and web development.">

4. author

这个属性用于指定文档的作者。

它通常用于标识文档内容的创建者。

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

5. application-name

这个属性用于指定网页或 Web 应用的名称。

它通常用于 Web 应用清单中，以在设备的主屏幕或应用启动器中显示。

<meta name="application-name" content="My Web App">

6. generator

这个属性用于标识用于生成文档的软件或工具。

它通常用于表明网站是由哪个内容管理系统或编辑器创建的。

<meta name="generator" content="WordPress 5.8">

7. robots

用于指定搜索引擎爬虫如何处理页面。

这可以控制搜索引擎是否索引页面以及是否跟踪页面上的链接。

告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

<meta name="robots" content="index, follow">

同时指定不索引和不跟踪页面及其链接

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

content的参数有

  • all（默认）：文件将被检索，且页面上的链接可以被查询；
  • none：文件将不被检索，且页面上的链接不可以被查询；
  • index：文件将被检索；
  • noindex：文件将不被检索，但页面上的链接可以被查询；
  • follow：页面上的链接可以被查询；
  • nofollow：文件将被检索，但页面上的链接不可以被查询；

8. copyright

网站版权信息

<meta name="copyright" content="本页版权 www.qidian.com 起点中文网所有。All Rights Reserved" />

http-equiv 属性

⚡️1. content-type

用于定义文档的类型和字符编码。

它告诉浏览器文档的内容类型和应如何解析内容。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

content-type 被设置为 text/html，表示文档是一个 HTML 文档，并且字符编码被设置为 UTF-8。

⚡️2. Cache-Control

控制缓存行为

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">  
<meta http-equiv="Pragma" content="no-cache">  
<meta http-equiv="Expires" content="Tue, 01 Jan 2024 00:00:00 GMT">

在这个例子中:

  • Cache-Control：缓存控制
    设置为 no-cache, no-store, must-revalidate，这明确告诉浏览器和任何中间缓存不要存储此页面的任何版本，并且每次请求时都必须去服务器验证。

  • Pragma：缓存控制
    再次设置为 no-cache 以提供向后兼容性。

  • Expires：过期时间
    表示网页将在 2024 年 1 月 1 日过期，浏览器在该日期之后将从服务器重新加载页面。 设置为 0 表示页面立即过期，不应被缓存。

其他字段

  • public：表示响应可以被任何缓存系统（包括浏览器、CDN等）缓存。也就是说，该资源是公有的，可以被多个用户共享。

  • private：表示响应只能被单个用户缓存，且只能被该用户的浏览器缓存。它不能被CDN或其他共享缓存系统缓存。（默认）

  • no-cache：不走强制缓存走协商缓存

  • no-store：不走任何缓存。在请求消息中发送将使得请求和响应消息都不使用缓存。

  • max-age：设置了一个相对存活时间。 max-age=3600表示缓存内容在3600秒内是有效的。

  • min-fresh：指定客户端愿意接受的最小新鲜期。它表示缓存的内容至少在未来指定的秒数内要保持新鲜。如果当前缓存的内容的新鲜期小于这个值，那么客户端将不会使用缓存内容，而是直接向服务器请求新的内容。这有助于确保客户端始终获取到尽可能新鲜的数据。

  • max-stale：允许客户端使用过期但仍在一定范围内的缓存数据。这通常用于在无法与服务器建立连接或服务器响应过慢时，允许客户端使用稍微过期的数据作为备选方案。通过指定一个时间值，客户端可以接收过期但在这个时间范围内的响应。这有助于在网络不稳定或服务器负载较高的情况下提供一定程度的可用性。

不建议使用meta标签来控制缓存
由于meta标签对于缓存控制的效果有限且不被所有浏览器严格遵循，现代Web开发实践中通常推荐使用HTTP头部来控制缓存。

3. refresh

用于设置页面在特定时间间隔后自动刷新，并可以指定刷新后要加载的页面。

这可以用于重定向用户到另一个页面，或者定期更新页面内容。

<meta http-equiv="refresh" content="5; url=https://www.example.com/">

在这个例子中，页面将在5秒后自动刷新，并加载 https://www.example.com/ 这个URL。

content 属性的值由两部分组成：刷新间隔（以秒为单位）和可选的URL。
如果只指定了刷新间隔而没有URL，页面将简单地重新加载当前页面。

4. default-style

用于指定默认的样式表。

这个属性现在已经不常用，因为现代网页通常使用 <link> 元素来链接样式表，并设置 rel="stylesheet"。

<meta http-equiv="default-style" content="mystyle.css">

charset 属性

定义文档的字符编码。HTML5 中的新属性

这告诉浏览器如何解释页面中的字符。

⚡️UTF-8

Unicode 字符编码

<meta charset="UTF-8">

常用的值：

  • UTF-8 ： Unicode 字符编码
  • ISO-8859-1 ： 拉丁字母表的字符编码

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

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

相关文章

USB设备的音频类UAC

USB设备的音频类UAC

一、UAC简介 UAC&#xff08;USB Audio Class&#xff09;是USB设备的音频类&#xff0c;它定义了USB音频设备与主机计算机通信的方式。UAC标准是USB规范的一部分&#xff0c;并受到各种操作系统&#xff08;包括Windows、macOS和Linux&#xff09;的支持。 UAC是基于libusb,实…
阅读更多...
kotlin根据文件的filePath转化为uri

kotlin根据文件的filePath转化为uri

方法实现 使用File类来创建一个文件对象&#xff0c;然后通过FileProvider来获取文件的URI import android.content.Context import android.net.Uri import androidx.core.content.FileProvider import java.io.Filefun getFileUri(context: Context, filePath: String): Ur…
阅读更多...
图像在神经网络中的预处理与后处理的原理和作用（最详细版本）

图像在神经网络中的预处理与后处理的原理和作用（最详细版本）

1. 问题引出及内容介绍 相信大家在学习与图像任务相关的神经网络时&#xff0c;经常会见到这样一个预处理方式。 self.to_tensor_norm transforms.Compose([transforms.ToTensor(), transforms.Normalize((0.5, 0.5, 0.5), (0.5, 0.5, 0.5))]) 具体原理及作用稍后解释&…
阅读更多...
java8 Stream流常用方法（持续更新中...）

java8 Stream流常用方法（持续更新中...）

java8 Stream流常用方法 1.过滤数据中年龄大于等于十八的学生2.获取对象中其中的一个字段并添加到集合(以学生姓名&#xff08;name&#xff09;为例)3.获取对象中其中的一个字段并转为其他数据类型最后添加到集合(以学生性别&#xff08;sex&#xff09;为例&#xff0c;将Str…
阅读更多...
Apache Doris 2.x 版本【保姆级】安装+使用教程

Apache Doris 2.x 版本【保姆级】安装+使用教程

Doris简介 Apache Doris 是一个基于 MPP 架构的高性能、实时的分析型数据库&#xff0c;以极速易用的特点被人们所熟知&#xff0c;仅需亚秒级响应时间即可返回海量数据下的查询结果&#xff0c;不仅可以支持高并发的点查询场景&#xff0c;也能支持高吞吐的复杂分析场景。基于…
阅读更多...
【论文速读】|大语言模型（LLM）智能体可以自主利用1-day漏洞

【论文速读】|大语言模型（LLM）智能体可以自主利用1-day漏洞

本次分享论文&#xff1a; LLM Agents can Autonomously Exploit One-day Vulnerabilities 基本信息 原文作者&#xff1a;Richard Fang, Rohan Bindu, Akul Gupta, Daniel Kang 作者单位&#xff1a;无详细信息提供 关键词&#xff1a;大语言模型, 网络安全, 1-day漏洞, …
阅读更多...
git commit 提交信息规范

git commit 提交信息规范

常见用法 # 将暂存区内容提交到版本库, 进入 vi 命令界面输入提交信息 git commit# 将某些已被跟踪的文件提交到版本库&#xff08;包含工作区和版本库&#xff09; git commit [file1] [file2] [...]# 将暂存区内容提交到版本库, 无需进入 vi 命令界面输入提交信息 git comm…
阅读更多...
Redisson分布式锁 --- 源码分析

Redisson分布式锁 --- 源码分析

1.获取一把锁 RLock lock redissonClient.getLock("订单lock"); 2.业务代码加锁 lock.lock(); 2.1 lock.tryAcquire Long ttl tryAcquire(leaseTime, unit, threadId); 2.2 lua脚本: tryLockInnerAsync方法 如果获取锁失败&#xff0c;返回的结果是这个key的剩…
阅读更多...
MMSeg搭建模型的坑

MMSeg搭建模型的坑

Input type(torch.suda.FloatTensor) and weight type (torch.FloatTensor) should be same 自己搭建模型的时候&#xff0c;经常会遇到二者不匹配&#xff0c;以这种情况为例&#xff0c;是因为部分模型没有加载到CUDA上面造成的。 注意搭建模型的时候&#xff0c;所有层都应…
阅读更多...
【氮化镓】液态Ga在GaN(0001)和(0001̅)表面上的三维有序排列随温度的变化

【氮化镓】液态Ga在GaN(0001)和(0001̅)表面上的三维有序排列随温度的变化

文章标题是《Temperature dependence of liquid-gallium ordering on the surface of epitaxially grown GaN》&#xff0c;作者是Takuo Sasaki等人&#xff0c;发表在《Applied Physics Express》上。文章主要研究了在分子束外延(MBE)条件下&#xff0c;液态镓(Ga)在GaN(0001)…
阅读更多...
WCH RISC CH32V303RCT6 单片机的SDI Printf 虚拟串口功能 类似RTT打印功能 简单分析

WCH RISC CH32V303RCT6 单片机的SDI Printf 虚拟串口功能 类似RTT打印功能 简单分析

参考&#xff1a; 有关于 SDI printf 更多的信息和资料吗&#xff1f; 关于 CH32 系列 MCU SDI 虚拟串口功能的使用 【CH32X035 评估板测评】 教你使用 SDI 接口重定向 printf 0.前言 有段时间没有看CH32V单片机的开发了&#xff0c;今天帮新来的同事调试时候看到debug.c里面有…
阅读更多...
java-spring 06 图灵 getBean方法和 doGetBean方法

java-spring 06 图灵 getBean方法和 doGetBean方法

01.一般的流程是&#xff0c;这里是从上一章的preInstantiateSingleton方法顺序过来的。 getBean() -> doGetBean() -> createBean() -> doCreateBean() -> createBeanInstance() -> populateBean() -> initializeBean() 02.getBean方法&#xff0c;一般就…
阅读更多...
稳扎稳打进入科研方向的三个阶段

稳扎稳打进入科研方向的三个阶段

摘要: 本贴以多标签学习方法为例, 描述如何稳扎稳打进入科研方向. 学习阶段&#xff08;读懂 5 篇论文及相应代码&#xff1b;相信已有工作&#xff09; 1.1 知道问题的定义&#xff1a;输入、输出、优化目标 1.2 知道论文的基本思想&#xff1a;多标签问题转化为二分类问题&a…
阅读更多...
optim.lr_scheduler.StepLR学习

optim.lr_scheduler.StepLR学习

torch.optim.lr_scheduler.StepLR 是 PyTorch 中的一个学习率调整器&#xff0c;按照一定的步长调整学习率。 torch.optim.lr_scheduler.StepLR(optimizer, step_size, gamma0.1, last_epoch-1, verboseFalse) optimizer&#xff1a;要使用该调度器的优化器。step_size&#…
阅读更多...
项目十：学会python爬虫数据保存（小白圆满级）

项目十：学会python爬虫数据保存（小白圆满级）

前言 上篇我们学会的文本文件、csv文件和excel文件的相关基础知识和操作&#xff0c;这一次我们再来了解一下四个文件操作方式 存储方法 HTML文件 将数据保存为HTML格式&#xff0c;可以直接在浏览器中查看。 使用字符串拼接将数据保存为HTML格式。 代码案例 # 创建数据…
阅读更多...
Cookie、Session以及Token的区别

Cookie、Session以及Token的区别

Cookei、Session以及Token总的来说都是为了实现客户端访问服务器数据而利用的一种手段&#xff0c;可以把服务器数据看成是密码箱&#xff0c;而它们是三种不同的钥匙。 一、定义 1.Cookie 客户端第一次访问服务器时&#xff0c;服务器返回cookie给客户端A&#xff0c;客户端…
阅读更多...
010 springboot整合mybatis-plus 登录页面和首页不拦截

010 springboot整合mybatis-plus 登录页面和首页不拦截

文章目录 customer.sqlConfigRegistCenter.javaCustomerController.javaCustomer.javaLoginCustomer.javaJwtInterceptor.javaCustomerMapper.javaICustomerService.javaCustomerServiceImpl.javaJwtUtil.javaServerResult.javaServletInitializer.javaSpringbootLoginApplicat…
阅读更多...
NB14 牛群编号的回文顺序

NB14 牛群编号的回文顺序

原题链接 牛群编号的回文顺序_牛客题霸_牛客网 (nowcoder.com) 一种可行的思路 先遍历链表, 将节点的值(1-9)用 StringBuffer 给存起来 用动态规划来解题 然后再用 dp 来解题 状态转移方程为: dp[i][j] dp[i 1][j - 1] && strB[i] strB[j] (i > j 1) dp[…
阅读更多...
vue中多个.vue文件中style里定义同一个class的样式 会相互覆盖吗?

vue中多个.vue文件中style里定义同一个class的样式 会相互覆盖吗?

在Vue项目中&#xff0c;每个Vue文件&#xff08;通常是一个.vue单文件组件&#xff09;中定义的样式默认情况下是局部作用域的&#xff0c;也就是说&#xff0c;它们不会影响到其他组件&#xff0c;也不会被其他组件中的样式所覆盖。这是通过Vue单文件组件中的<style>标…
阅读更多...
ABTest如何计算最小样本量-工具篇

ABTest如何计算最小样本量-工具篇

如果是比例类指标&#xff0c;有一个可以快速计算最小样本量的工具&#xff1a; https://www.evanmiller.org/ab-testing/sample-size.html 计算样本量有4个要输入的参数&#xff1a;①一类错误概率&#xff0c;②二类错误概率 &#xff08;一般是取固定取值&#xff09;&…
阅读更多...
最新文章

Copyright @ 2022~2023