WordPress网站转APP插件,新乡网站建设加盟电话,全美网站开发,用订制音乐网站做的音乐算原创吗「深入理解」HTML Meta标签#xff1a;网页元信息的配置 HTML的meta元素用于提供关于HTML文档的元数据#xff08;metadata#xff09;#xff0c;这些信息对于浏览器和其他处理HTML文档的应用程序来说是非常有用的#xff0c;如#xff1a;base、li… 「深入理解」HTML Meta标签网页元信息的配置 HTML的meta元素用于提供关于HTML文档的元数据metadata这些信息对于浏览器和其他处理HTML文档的应用程序来说是非常有用的如base、link、script、style 或 title。
meta标签通常放置在文档的head部分不直接向用户展示内容而是提供给浏览器、搜索引擎和其他Web服务使用。
如 meta元素必须包含至少一个name或http-equiv属性以及一个content属性。name属性用于非HTTP头元数据而http-equiv用于模拟HTTP头部字段。 name 和 content 属性可以一起使用以名 - 值对的方式给文档提供元数据其中 name 作为元数据的名称content 作为元数据的值。 在标准元数据名称中查看 HTML 规范等规范中定义的标准元数据名称。 HTML5 规范定义了一系列标准的元数据名称这些元数据通常通过meta标签的name属性来表达。以下是一些常用的元数据名称
charset: 定义文档的字符编码。
meta charsetUTF-8viewport: 控制视口的尺寸和缩放对于响应式设计至关重要。
meta nameviewport contentwidthdevice-width, initial-scale1author作者的名字。
meta nameauthor content会思想的苇草idescription页面的描述。
meta namedescription content这是一个描述网页内容的简短摘要。generator生成页面的软件或工具。
meta namegenerator contentWordPress 5.8.1keywords与页面内容相关的关键词列表。
meta namekeywords content关键词1, 关键词2, 关键词3referrer控制是否发送referrer头到服务器。
meta namereferrer contentno-referrerrobots指导搜索引擎机器人如何索引页面。
!-- 告诉搜索引擎不要索引该页面或跟踪其链接 --
meta namerobots contentnoindex, nofollowshort-link页面的短链接。
meta nameshortlink contentwww.csdn.net除了上述标准元数据名称外HTML5 规范还引入了http-equiv属性它可以用于模仿HTTP头部信息。例如
Content-Type指定文档的MIME类型和字符集。通常被所替代。
meta http-equivContent-Type contenttext/html; charsetUTF-8Default-Style指定首选的样式表。
meta http-equivDefault-Style contentalternate stylesheet.cssPragma用于缓存控制。比如告诉浏览器不要缓存页面
meta http-equivPragma contentno-cacheExpires指定文档过期的时间通常用格林尼治时间表示
meta http-equivExpires content0Cache-Control指示缓存机制如何处理页面。比如禁止缓存
meta http-equivCache-Control contentno-cache, no-store, must-revalidateSet-Cookie设置cookie。
!-- 这样做不推荐也非标准 --
meta http-equivSet-Cookie contentmyCookiemyValue; expiresThu, 01-Jan-2025 00:00:00 GMT; path/X-UA-Compatible控制Internet Explorer的渲染模式和文档模式。
meta http-equivX-UA-Compatible contentIEedge除了这些标准元数据名称之外还有一些非官方的但广泛接受的元数据名称例如
apple-mobile-web-app-capable告诉Safari浏览器该页面可以作为一个全屏的Web应用程序运行。window.navigator.standalone 获取是否以全屏运行。
meta nameapple-mobile-web-app-capable contentyesapple-mobile-web-app-status-bar-style设置iOS设备上Safari浏览器的状态栏颜色。可以设置为black或black-translucent来改变状态栏文本和图标颜色或者通过default恢复到系统默认颜色。 为了使apple-mobile-web-app-status-bar-style元信息标签生效首先需要在HTML头部声明apple-mobile-web-app-capable元信息标签并将其值设为yes。这样设置表明您的网站可以作为一个“全屏”的Web应用程序运行即当用户从主屏幕启动该网站时它将在没有浏览器界面的状态下运行。
meta nameapple-mobile-web-app-status-bar-style contentblack-translucenttheme-color设置Web应用的主题颜色用于Android Chrome的工具栏颜色。 theme-color 元信息标签在Android设备上主要影响Chrome浏览器。它允许网站开发者指定一个颜色当用户将网站添加到主屏幕后作为web app启动时的背景颜色以及在某些情况下改变浏览器工具栏的颜色。从Android 5.0Lollipop开始theme-color还会影响状态栏和导航栏的颜色。在iOS设备上theme-color元信息标签的行为与Android有所不同。Apple在其Safari浏览器中实现了自己的一套机制来处理主题颜色。对于iOS主要的控制点是通过apple-mobile-web-app-status-bar-style元信息标签来改变顶部状态栏的颜色当用户将网站添加到主屏幕并以全屏模式启动时。Safari在某些情况下可能也会受到theme-color元信息的影响但这并不是官方文档明确支持的行为可能是因为浏览器的实现细节或与其他元信息标签的交互导致的。因此不能依赖theme-color在iOS上的一致行为特别是在改变状态栏颜色方面该操作不应被视为可靠的行为。
meta nametheme-color content#ff0000使用js改变系统菜单栏主题色兼容性弱 // 创建并设置ios主题色meta标签let iosThemeColorMetaEle document.createElement(meta);iosThemeColorMetaEle.name theme-color;iosThemeColorMetaEle.content #fff;document.head.append(iosThemeColorMetaEle);msapplication-TileColor设置Windows任务栏图标和启动屏幕的背景颜色。
meta namemsapplication-TileColor content#00bcd4msapplication-config引用一个XML文件其中包含了用于IE11的浏览器选项卡图标favicon和其他信息。
meta namemsapplication-config content/browserconfig.xmlog用于社交分享时的元数据如标题、描述、图片等。
meta propertyog:title content我的页面标题
meta propertyog:description content这是页面的描述。
meta propertyog:image contenthttp://example.com/path/to/image.jpgtwitter 用于Twitter分享时的元数据。
meta nametwitter:card contentsummary_large_image
meta nametwitter:description content这是页面的描述。
meta nametwitter:image contenthttp://example.com/path/to/image.jpgog:*Open Graph协议和twitter:*Twitter Cards元数据名称虽然不是HTML5标准的一部分但它们被广泛用于社交媒体平台用于控制页面在社交媒体上的显示方式。这些元数据名称使用property属性而不是name属性并且它们的值通常通过content属性来指定。 meta标签应该位于HTML文档的head部分。每种类型的meta标签只能出现一次除非它们有不同的content属性。例如你可以有多个meta namedescription标签但它们的content属性必须不同否则只有第一个会被解析。然而通常情况下每个类型只使用一次是最佳实践。
