HTML中meta标签的那些属性

这篇具有很好参考价值的文章主要介绍了HTML中meta标签的那些属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<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> 标签。文章来源地址https://www.toymoban.com/news/detail-437835.html

到了这里,关于HTML中meta标签的那些属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • meta 标签中的 viewport 相关属性

    meta 标签中的 viewport 相关属性: initial-scale 属性用于设置页面初始的缩放比例,缩放比例为理想视口与视觉视口的比值。 -------------------- width:    页面宽度,正整数或 device-width(设备宽度),定义视口的宽度,单位为像素。 height:    页面高度,正整数或 device-height(设备高度

    2024年02月07日
    浏览(7)
  • input标签,新增那些属性

    input标签,新增那些属性

    input标签作为页面与用户交互的重要入口,了解掌握input的属性,至为重要。 HTML5给input表现的type属性,添加了很多的属性值,用来丰富了文本框类型。比如: 如果是H5页面的话,在不同的手机会有不同的展示,比如: 唤醒的手机本身的输入的效果。 input标签上传文件的话,

    2024年02月09日
    浏览(7)
  • HTML <meta> 标签

    meta 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和。 meta 标签位于文档的头部,不包含任何内容。meta 标签的属性定义了与文档相关联的名称/值对。 元素 Chrome IE Firefox Safari Opera meta Yes Yes Yes Yes Yes 所有浏览器都支持 meta 标签。

    2024年02月17日
    浏览(6)
  • meta标签name=“referrer“属性的写法和用法

    HTMLmeta标签name=\\\"referrer\\\"属性主要用于控制网页发送给服务器的referrer信息,可以告诉服务器端用户是从哪个页面来到当前网页的。 什么是referrer? referrer有“引用页面”或“来源页面”的意思,用来指定当前页面是从哪个页面跳转过来的,也就是说HTTP请求报头中的referrer包含了

    2024年02月10日
    浏览(7)
  • html5中的meta标签用法详解

    html5中的meta标签用法详解

    来源:视频砖家 html5中的meta标签主要用于描述网页的元数据,它可以用于描述网页的标题、、描述、作者、版权等信息,还可以用于设置网页的字符集、设置网页的刷新时间、设置网页的跳转页面等。 meta charset=\\\"utf-8\\\":用于定义网页的字符集为 UTF-8,UTF-8 - Unicode 字符

    2024年02月16日
    浏览(12)
  • html学习之路:简述html文档头部 <meta> 的 http-equiv 属性

    🧋当输入网址打开网页时,设置html头部 meta 的 http-equiv 属性,可以帮助浏览器更加精确和正常却的显示网页内容,比如设置网页多久自动刷新,设置网页在浏览器缓存中的时限,设置多少事件跳转到指定的网页地址,应对低版本浏览器的渲染兼容问题,以什么样动态的样式

    2024年02月02日
    浏览(16)
  • iframe 标签(用于嵌套网页)及loading加载动画效果

    iframe 标签(用于嵌套网页)及loading加载动画效果

            1. iframe 是 HTML元素,用于在网页中内嵌另外一个网页.         2. iframe 默认有一个宽高,存在边界.         3. iframe 是一个行内块级元素,可以通过 display 修改.         1. src : 指定内联网页的地址         2. frameborder : iframe 默认有个边界,可以设置frameborder 为 0 清除边

    2024年02月04日
    浏览(16)
  • 【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

    【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

    HTML 5 的 video 视频标签 , 支持 ogg / mpeg 4 ( mp4 ) / webM 三种格式的音频 , 不同的浏览器支持的音频格式不同 ; IE 浏览器 : 9.0 以上版本支持 mp4 格式 ; Firefox 浏览器 : 3.5 以上版本支持 ogg 格式 ; 4.0 以上版本支持 webM 格式 ; Opera 浏览器 : 10.5 以上版本支持 ogg 格式 ; 10.6 以上版本支持

    2024年02月09日
    浏览(47)
  • 在前端开发中,什么叫移动设备上的视口?如何通过header标签中的meta属性设置页面的视口。

    移动设备上的视口(Viewport)是指在移动设备上可见的网页区域。由于移动设备的屏幕尺寸和分辨率各不相同,为了确保网页在各种设备上都能正确显示和交互,需要通过视口设置来适配不同的屏幕尺寸。 在移动设备上,网页通常会比在桌面电脑上的屏幕要宽,因此需要缩放

    2024年02月11日
    浏览(13)
  • HTML5-1-标签及属性

    HTML5-1-标签及属性

    页面的组成: HTML(HyperText Markup Language,超文本标记语言)是用来描述网页的一种语言,它不是一种编程语言,而是一种标记语言。 HTML5 是下一代 HTML 标准。 HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。 基本结构: HTML中不区分大小写,但

    2024年02月10日
    浏览(14)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包