• 前端 html 中的 meta 标签有哪些用处?


    HTML中的标签用于提供有关文档的元数据(metadata),它们不会在页面上显示出来,而是提供有关页面的信息,使搜索引擎和浏览器能够更好地理解和使用文档。下面是一些常见的用途:

    1、指定文档的字符集

    通过标签的charset属性可以指定文档的字符集,这有助于浏览器正确地解析和显示文档。例如,指定UTF-8编码的元标记如下所示:

    <meta charset="UTF-8">

    2、描述文档的内容

    使用标签的description属性可以提供一个简短的描述文档内容的摘要。这对于搜索引擎和社交媒体分享非常有用。例如:

    <meta name="description" content="这是一个前端教程,介绍了HTML、CSS和JavaScript的基本知识。">

    3、指定搜索引擎的关键词

    通过标签的keywords属性,您可以提供一个逗号分隔的关键词列表,以描述文档的主题。然而,这个属性已经过时了,大多数搜索引擎已经不再使用它。例如:

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

    4、防止浏览器缓存页面

    通过在标签中设置HTTP-equiv属性为"Cache-Control",可以指示浏览器不要缓存页面。例如:

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">

    5、指定文档的作者和版权信息

    通过标签的author和copyright属性,您可以提供文档的作者和版权信息。例如:

    1. <meta name="author" content="John Doe">
    2. <meta name="copyright" content="Copyright © John Doe">

    6、设置视口(Viewport)大小

    通过在标签中设置viewport属性,可以指定视口的大小和缩放级别。这对于响应式网站设计非常重要,可以确保网站在各种设备上正常显示。例如:

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

    7、指定网页的语言

    通过在标签中设置lang属性,可以指定网页所使用的语言。这对于多语言网站非常重要,可以让搜索引擎正确地索引网页。例如:

    <meta http-equiv="Content-Language" content="zh-CN">

    8、指定搜索引擎的索引方式

    通过在标签中设置robots属性,可以指定搜索引擎对网页的索引方式。例如:

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

    其中,index表示允许搜索引擎索引该网页,follow表示允许搜索引擎跟踪该网页上的链接。

    9、指定网页的重定向

    通过在标签中设置http-equiv属性为"refresh",可以指定网页的重定向时间和目标地址。例如:

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

    其中,5表示重定向的延迟时间为5秒,url表示重定向的目标地址。

    10、指定网页的作者

    通过在标签中设置author属性,可以指定网页的作者。例如:

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

    总之,标签是前端开发中非常重要的一种标签,可以提供有关网页的各种信息,使搜索引擎和浏览器能够更好地理解和使用网页。在实际开发中,开发人员应该根据实际需求合理地使用标签,以提高网页的可访问性和用户体验。

    Web前端全套_零基础自学到精通必备,Html+Css+前端web就业项目源码实操

  • 相关阅读:
    第六章 图论 7 AcWing 1619. 欧拉路径
    『现学现忘』Git基础 — 4、Git下载与安装
    设计模式之策略模式
    在Linux中用于RPM包管理的‘DNF‘命令
    PostgreSQL插入大量数据:pg_testgen插件
    「降本」有可能,「增效」不确定
    20220910编译ITX-3588J的Buildroot的系统2b(编译Kernel)
    在portacle中获取EMACS Lisp帮助文档的方法(Win11)
    Creating Higher-level Constructs with ZooKeeper: A Comprehensive Guide
    玩转Vue3之Composables
  • 原文地址:https://blog.csdn.net/Itmastergo/article/details/133878033