首页 > 其他分享 >HTML中meta标签的那些属性

HTML中meta标签的那些属性

时间:2023-05-10 10:03:23浏览次数:53  
标签:例如 浏览器 标签 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> 标签。

标签:例如,浏览器,标签,HTML,meta,网页,页面,属性
From: https://www.cnblogs.com/ronaldo9ph/p/17387101.html

相关文章

  • HTML 表单
    9.1表单标签-主要标签-<form>:表单容器-<input>:输入框-相关标签-<textarea>:多行文本框-<select>、<option>:下拉菜单(组合使用)-<label>:标题(辅助表单标签),用for和id属性形成映射,点击标题也可选择9.2<input>标签属性-type:控制输入框类型-值:-text-普通文本输入......
  • VOC标签格式转yolo格式并划分训练集和测试集
    VOC标签格式转yolo格式并划分训练集和测试集经常从网上获取一些目标检测的数据集资源标签的格式都是VOC(xml格式)的,而yolov5训练所需要的文件格式是yolo(txt格式)的,就需要对xml格式的标签文件转换为txt文件。同时训练自己的yolov5检测模型的时候,数据集需要划分为训练集和验证集。......
  • 学习日记——HTML入门第一课
    1.了解HTML的定义,基本结构①对于超文本标记语言的理解,是超越文本(不限制于字符,包含视频音频)用“<>”这个特殊字符来书写的语言②基本结构为<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>网页标题</title></head>......
  • HTML a标签
    7.1属性-href:链接地址-target:控制链接的打开方式。-_self(默认)-在当前页面打开;-_blank-新标签页打开。7.2<base/>标签-作用:改变链接的默认行为-位置:在head标签中-属性:href——改变默认链接;target——改变默认目标。7.3可作为锚点-作用:跳转到本页指定id......
  • HTML 列表
    5.1无序列表ul<ul><li>无序列表</li><li>无序列表</li></ul>-ul里只能放li标签-默认黑色实心圆-type属性:-disc-黑色实心圆,-circle-黑色空心圆,-square-黑色实心正方形,-none-取消样式5.2有序列表ol<ol><li>有序列表</li><......
  • HTML div 和 span 标签
    4.1<div></div>-划分页面区域,独占一行4.2<span></span>-主要用于对文本独立修饰。-内容有多宽就占用多宽的空间,不换行,不破坏原有结构......
  • HTML特殊符号
    3.特殊符号3.1尖角号-<左尖角号<->右尖角号>3.2空格-&nbsp;宽度受字体影响-&emsp;宽度是1个中文字符宽度,基本不受字体影响3.3版权-&copy;3.4商标-&trade;-&reg;3.5与号-&amp;3.6人民币-&yen;3.7摄氏度-&deg;3.8特殊符号练习<......
  • html5 2.0学习
    列表定义:是一种特别的对象集合。集合:集中在一起合二为一(聚集)。聚集:多个列(信息资源)排在一起。信息资源:一堆数据,可能是字符,可能是图片。列表分类:有序列表无序列表 (自)定义列表 有序列表:有顺序的列表。列表结构:<ol><li></li></ol> 有顺序,每个li独占一行,默认li标签前面有顺......
  • HTML常用标签
    1.基础语法1.1标记(标签)-常规标记(双标记)<标记></标记>-空标记(单标记)<标记/>1.2<!DOCTYPEhtml>文档类型1.3<htmllang="zh-CN">为浏览器指出本文档所用语言1.4<meta/>-<metacharset=""/>:设置文档字符编码2.常用标签2.1<......
  • @Html.Partial vs @Html.Action
    @Html.Partialand@Html.ActionarebothusedinASP.NETMVCtoincludereusablecontentinaview.@Html.Partialrendersapartialviewdirectly.It'susefulforrenderingsmallandsimpleviews,[email protected]......