metadata的深入
metadata元数据定义元数据,又称元数据、中介数据、中继数据,为描述数据的数据,主要是描述数据属性的信息,用来支持如指示存储位置、历史数据、资源查找、文件纪录等功能。元数据算是一种电子式目录,为了达到编制目录的目的,必须在描述并收藏数据的内容或特色,进而达成协助数据检索的目的。<title>标签定义浏览器工具栏中的标题提供页面被添加到收藏夹时显示的标题显示在搜索引擎结果中的页面标题<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。content 是meta必须的属性,定义与 http-equiv 或 name 属性相关的元信息。name属性:name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。语法格式:<meta name="参数" content="具体参数值值">参数:Keywords关键字,用来告诉搜索引擎网页的关键字是什么<meta name="Keywords" content="HTML, CSS, JavaScript">description描述,用来告诉搜索引擎网站的主要内容<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />robots机器人向导,用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引content的参数有all,none,index,noindex,follow,nofollow,默认是all。all:文件将被检索,且页面上的链接可以被查询;none:文件将不被检索,且页面上的链接不可以被查询;index:文件将被检索;follow:页面上的链接可以被查询;noindex:文件将不被检索,但页面上的链接可以被查询;nofollow:文件将被检索,但页面上的链接不可以被查询<metaname="robots"content="none">author 作者,标注网页的作者<metaname="author"content="root,root@xxxx.com">generator规定用于生成文档的一个软件包,不用于手写页面<meta name="generator" content="FrontPage 4.0">Copyright说明网站版权信息<metaname="copyright"content="信息参数"/>Revisit-after 重坊,通知搜索引擎多少天访问一次<meta name="revisit-after" content="7days">viewport影响移动端页面布局<meta name="viewport" content="width=device-width, initial-scale=1.0">content 参数:width viewport 宽度(数值/device-width)height viewport 高度(数值/device-height)initial-scale 初始缩放比例maximum-scale 最大缩放比例minimum-scale 最小缩放比例user-scalable 是否允许用户缩放(yes/no)application-name定义固定网站应用程序实例的名称。<meta name="application-name" content="w3school" />光标悬停在 Windows 任务栏的固定网站按钮上时,此名称将出现在工具提示中。该应用程序名称还将附加到固定网站应用程序实例的窗口标题中。
各浏览器metaMicrosoft Internet Explorer<!-- 优先使用最新的ie版本 --><meta http-equiv="x-ua-compatible" content="ie=edge"><!-- 是否开启cleartype显示效果 --><meta http-equiv="cleartype" content="on"><meta name="skype_toolbar" content="skype_toolbar_parser_compatible"><!-- Pinned Site --><!-- IE 10 / Windows 8 --><meta name="msapplication-TileImage" content="pinned-tile-144.png"><meta name="msapplication-TileColor" content="#009900"><!-- IE 11 / Windows 9.1 --><meta name="msapplication-config" content="ieconfig.xml">Google Chrome<!-- 优先使用最新的chrome版本 --><meta http-equiv="X-UA-Compatible" content="chrome=1" /><!-- 禁止自动翻译 --><meta name="google" value="notranslate">360浏览器<!-- 选择使用的浏览器解析内核 --><meta name="renderer" content="webkit|ie-comp|ie-stand">UC手机浏览器<!-- 将屏幕锁定在特定的方向 --><meta name="screen-orientation" content="landscape/portrait"><!-- 全屏显示页面 --><meta name="full-screen" content="yes"><!-- 强制图片显示,即使是"text mode" --><meta name="imagemode" content="force"><!-- 应用模式,默认将全屏,禁止长按菜单,禁止手势,标准排版,强制图片显示。 --><meta name="browsermode" content="application"><!-- 禁止夜间模式显示 --><meta name="nightmode" content="disable"><!-- 使用适屏模式显示 --><meta name="layoutmode" content="fitscreen"><!-- 当页面有太多文字时禁止缩放 --><meta name="wap-font-scale" content="no">QQ手机浏览器<!-- 锁定屏幕在特定方向 --><meta name="x5-orientation" content="landscape/portrait"><!-- 全屏显示 --><meta name="x5-fullscreen" content="true"><!-- 页面将以应用模式显示 --><meta name="x5-page-mode" content="app">Apple iOS<!-- Smart App Banner --><meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"><!-- 禁止自动探测并格式化手机号码 --><meta name="format-detection" content="telephone=no"><!-- Add to Home Screen添加到主屏 --><!-- 是否启用 WebApp 全屏模式 --><meta name="apple-mobile-web-app-capable" content="yes"><!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 --><meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- 添加到主屏后的标题 --><meta name="apple-mobile-web-app-title" content="App Title">Google Android<meta name="theme-color" content="#E64545"><!-- 添加到主屏 --><meta name="mobile-web-app-capable" content="yes"><!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->App Links<!-- iOS --><meta property="al:ios:url" content="applinks://docs"><meta property="al:ios:app_store_id" content="12345"><meta property="al:ios:app_name" content="App Links"><!-- Android --><meta property="al:android:url" content="applinks://docs"><meta property="al:android:app_name" content="App Links"><meta property="al:android:package" content="org.applinks"><!-- Web Fallback --><meta property="al:web:url" content="http://applinks.org/documentation"><!-- More info: http://applinks.org/documentation/ -->
常用的移动端meta<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta name="format-detection"content="telephone=no, email=no" /><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 --><meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 --><meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 --><!-- 启用360浏览器的极速模式(webkit) --><meta name="renderer" content="webkit"><!-- 避免IE使用兼容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --><meta name="HandheldFriendly" content="true"><!-- 微软的老式浏览器 --><meta name="MobileOptimized" content="320"><!-- uc强制竖屏 --><meta name="screen-orientation" content="portrait"><!-- QQ强制竖屏 --><meta name="x5-orientation" content="portrait"><!-- UC强制全屏 --><meta name="full-screen" content="yes"><!-- QQ强制全屏 --><meta name="x5-fullscreen" content="true"><!-- UC应用模式 --><meta name="browsermode" content="application"><!-- QQ应用模式 --><meta name="x5-page-mode" content="app"><!-- windows phone 点击无高光 --><meta name="msapplication-tap-highlight" content="no"><!-- 适应移动端end -->
赞 (0)