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标签的那些属性的更多相关文章
- HTML中meta标签作用及属性总结
在前端开发中编写html静态网页模板时,head标签内总是会带上许多meta标签,大多数时候并不十分了解这些标签的具体作用,只是别人写了我们也写上吧! 今天小编特意查询了一下关于网页中meta标签的作 ...
- HTML中Meta标签中http-equiv属性小结
HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...
- HTML中Meta标签中http-equiv属性
HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...
- HTML中<meta>标签如何正确使用
HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...
- html中meta标签及用法理解
自己一直想成为高级前端开发工程师,而自学.奈何最近感觉自学收效甚微,一度迷茫. 不破不立,打算改变这样的状态. 春节后上班第一天,今年打算好好实现自己的前端梦想. 重新整理.总结前端技术. 废话,就不 ...
- iOS 7.1的Safari为meta标签新增minimal-ui属性,在网页加载时隐藏地址栏与导航栏
在 iOS 7.1 的 Safari 中为 meta 标签新增 minimal-ui 属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏. 如何实现?你只需将“minimal-ui”加入 view ...
- .NET获取Html字符串中指定标签的指定属性的值
using System.Text; using System.Text.RegularExpressions; //以上为要用到的命名空间 /// <summary> /// 获取Htm ...
- 转.HTML中img标签的src属性绝对路径问题解决办法,完全解决!
HTML中img标签的src属性绝对路径问题解决办法,完全解决 需求:有时候自己的项目img的src路径需要用到本地某文件夹下的图片,而不是直接使用项目根目录下的图片. 场景:eclipse,to ...
- 【转】HTML meta标签总结与属性使用介绍
HTML meta标签总结与属性使用介绍 转载处写的已经超级好了,强烈推荐. 转自:https://segmentfault.com/a/1190000004279791 本人就不再赘述.拿来主义!供 ...
- <meta>标签元素的属性理解
meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和 ...
随机推荐
- postgres 表字段修改
更换字段名 alter table 表名 rename column 字段名 to 新字段名; 更换表名 alter table 表名 rename to 新表名; 更改字段长度 alter tabl ...
- Leecode 53.最大子数组和(Java 贪心算法、动态规划两种方法)
想法(没看解析之前想不出来) -----------------看了解析和答案 1.贪心算法,若当前元素的之前和<0,则丢弃当前元素之前的数列 设一个maxSum作为子序列最大和,一个sum ...
- 记录下老dropbox的使用
32-bit: wget -O - "https://www.dropbox.com/download?plat=lnx.x86" | tar xzf - 64-bit: wget ...
- JML
1.JML规格设计策略 我三次作业采用的方法都是从性能与存储大小方面考虑.在满足规格的条件下尽量做到运行速度最快,所用空间最小.因为这个单元的作业如果单单只是照着jml规格来翻译的话就失去了意义(因为 ...
- [转]C++回调函数
回调函数 回调函数是一个时时听到的概念,比如在windows API编程时遇到的WinProc函数,就是我们编写而由操作系统调用的函数.现在,我们需要慢慢又详细的记录一下这个问题. 库与使用者的问题 ...
- GO语言学习笔记-并发篇 Study for Go ! Chapter seven - Concurrency
持续更新 Go 语言学习进度中 ...... GO语言学习笔记-类型篇 Study for Go! Chapter one - Type - slowlydance2me - 博客园 (cnblogs ...
- 看了还不懂b+tree的本质就来打我
看了还不懂b+tree的本质就来打我 大家好,我是蓝胖子. 今天我们来看看b+tree这种数据结构,我们知道数据库的索引就是由b+tree实现,那么这种结构究竟为什么适合磁盘呢,它又有哪些缺点呢? 我 ...
- 第六章 C控制语句:分支和跳转
6.1if语句 程序 #define _CRT_SECURE_NO_WARNINGS 1 //coladays.c -- 求出温度低于零度的天数 #include<stdio.h> int ...
- 【读书笔记】排列研究-模式避免-基础Pattern Avoidance
目录 模式避免的定义 避免Pattern q 的n-排列计数\(S_n(q)\) q长度是2 q长度是3 对一些模式q,做\(S_n(q)\)的阶估计 Backelin, West, and Xin给 ...
- Cesium官方教程——Fabric
1.简介 Fabric 是Cesium中定义的描述材质Material的JSON 结构体.Material代表了一个物体的外观. 材质Material可以是比较简单的,比如直接将一张图片赋予表面,或者 ...