网站没内容,怎样学网络推广,做公司网站怎么删除图片,群晖wordpress修改端口meta中常见的一些属性 meta/ 标签的属性
meta/ 是什么#xff1f;
meta/ 标签主要用于表示和当前文档相关的 元数据 信息。
而 元数据#xff08;metadata#xff09;#xff0c;简单的来说就是描述数据的数据。例如#xff0c;一个 HTML 文件是一…meta中常见的一些属性 meta/ 标签的属性
meta/ 是什么
meta/ 标签主要用于表示和当前文档相关的 元数据 信息。
而 元数据metadata简单的来说就是描述数据的数据。例如一个 HTML 文件是一种数据但 HTML 文件也能在 head元素中包含描述该文档的 元数据比如该文件的作者和概要。1.name
name属性用于指定元数据的名称。
meta namedescription content这是一个描述/2.charset
charset属性用于指定网页的字符编码。
meta charsetUTF-8/!-- 若使用这个属性那么它的值只能是字符串 utf-8 不区分 ASCII 大小写因为 UTF-8 是 HTML5 文档的唯一有效编码
声明字符编码的 meta 元素必须完全位于 文档的前 1024 个字节内 --3.viewport
viewport属性用于指定网页的视口设置。确保在移动设备上显示的内容不会缩放 meta nameviewport contentwidthdevice-width, initial-scale1.0/4.robots
robots属性用于指定搜索引擎的爬虫索引方式。
meta namerobots contentindex, follow/!-- 表示爬虫对此页面的处理行为 或 应当遵守的规则是用来做搜索引擎抓取的
可设置 meta namerobots contentall | none | index | followall搜索引擎将索引此网页并继续通过此 网页的链接索引文件 将被检索
none搜索引擎将 忽略 此网页
index搜索引擎 索引 此网页
follow搜索引擎继续通过此网页的链接索引搜索 其它的网页 --5.author
author属性用于指定网页的作者。
meta nameauthor contentJohn Doe/6.keywords
keywords属性用于指定网页的关键字。
meta namekeywords contentHTML, CSS, JavaScript/7.description
description属性用于指定网页的描述信息。
meta namedescription content这是一个描述/清除缓存
在 单页面应用 (Single Page Application, SPA) 中对应的 html 文件 是不需要被缓存的只需要对 html 文件中的 CSS、JavaScript 等资源进行缓存得益于现代构建工具的特性可以直接使用 强缓存那么此时我们就可以通过设置 来实现 html 文件清除缓存功能如下 meta http-equivExpires content0 /meta http-equivPragma contentno-cache /meta http-equivCache-control contentno-cache /meta http-equivCache contentno-cache /renderer
用来指定支持双核浏览器要采用哪种的渲染方式如 360 浏览器
meta namerenderer contentwebkit/ // 默认 webkit 内核meta namerenderer contentie-comp/ //默认 IE 兼容模式meta namerenderer contentie-stand/ //默认 IE 标准模式 8.generator
generator属性用于指定生成当前网页的软件名称和版本号。
meta namegenerator contentMyApp 1.0/9.copyright
copyright属性用于指定网页的版权信息。
meta namecopyright contentCopyright © 2021 MySite. All Rights Reserved./10.revisit-after
revisit-after属性用于指定搜索引擎爬虫访问网站的频率。
meta namerevisit-after content7 days/其他
http-equiv
通过该属性可以设置特定 HTTP 标头内容例如非全部 http-equivX-UA-Compatible
一般用来是做 IE 浏览器适配 的如以下告诉 IE 浏览器使用最高版本来渲染页面http-equivContent-Type
用于声明 MIME 类型 和 文档的 字符编码
html
meta http-equivContent-Type contenttext/html;charsetutf-8http-equiv“x-dns-prefetch-control”
HTML 页面中的 a 标签 会 自动启用 DNS 提前解析 来提升网站性能但是在使用 https 协议的网站中失效可通过设置以下方式进行打开
meta http-equivx-dns-prefetch-control contenton/
meta/ 这样的方式有利于在发布新版本后避免通过手动清除浏览器缓存如果不清除缓存就会加载旧版本的资源。
禁止翻译
通常项目中可能会存在 国际化 的需求这就意味着用户可以手动选择 当前的语言环境但除此之外通过浏览器本身也会存在对应的 翻译插件。 问题点在于如果用户先使用 浏览器翻译插件 默认翻译文档内容又切换了 项目中的国际化 功能那么此时就导致文档中的内容出现翻译不准确。 而这个问题是亲身经历过的只记得当时用户在 Chrome 浏览器 中反馈翻译不准确甚至出现意料之外字符的问题时也是花费了一番功夫才确定是用户使用 浏览器翻译插件 的问题针对 Chrome 浏览器 在访问我们自己的项目时可以让其不进行 自动翻译可进行如下设置
meta namegoogle contentnotranslate /自定义元数据 除了使用 标签本身提供特定元数据内容之外我们其实也可以自定义元数据只不过这个元数据不会被当前文档所识别并被应用例如
meta nametheme-color content#333 /# meta 中 nameviewPort 的一些属性## 1. widthwidth 属性设置视口的宽度为一个正整数或字符串device-width## 2. initial-scaleinitial-scale 属性设置页面的初始缩放值为一个数字可以带小数## 3. minimum-scaleminimum-scale 属性设置用户缩放的最小值为一个数字可以带小数## 4. maximum-scalemaximum-scale 属性设置用户缩放的最大值为一个数字可以带小数## 5. user-scalableuser-scalable 属性是布尔值表示是否允许用户进行缩放值为no或yes默认为no即不允许用户缩放页面## 6. 示例html
meta nameviewport contentwidthdevice-width,initial-scale1.0,minimum-scale1,maximum-scale1,user-scalableno
默认视图宽度 为 设备宽度 默认缩放比为 1 最大、最小缩放比为 1 不允许用户手动缩放
解决视图上移问题
正如前面所示视图发生偏移只在 IOS 系统 中的 企微环境 出现这就表明了 微信 webview 渲染 和 企微 webview 渲染 还是存在差异。
viewport-fit — iOS11 新增特性
viewport-fit 是为了适配 iPhoneX 对现有 标签的一个扩展用于设置网页在可视窗口的布局方式具有三个属性值 auto 默认值跟 contain 表现一致
contain 可视窗口 完全包含 网页内容
cover 网页内容 完全覆盖 可视窗口
既然看起来 企微 webview 中视图高度没法覆盖那我们就可以通过 设置网页在可视区域的布局方式将视图内容新增 viweport-fit: cover 使得页面内容完全覆盖整个窗口即可解决问题
meta nameviewport contentwidthdevice-width,initial-scale1.0,minimum-scale1,maximum-scale1,user-scalableno,viewport-fitcover
