移动web开发meta标签的使用

一、meta标签

html代码中最关键的就是meta标签设置，开发移动端页面首先一定要设置viewport （可视区域）

device-width - 设备的宽度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

 <meat name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"></meat>

其次是一些辅助优化功能，常用的有如下meta标签：

 <!--苹果手机：会删除默认的工具栏和菜单栏，网站开启对web APP程序的支持--><meta name="apple-mobile-web-app-capable" content="yes"><!--苹果手机：在web APP应用状态条（屏幕顶部条）的颜色，默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。--><meta name="app-mobile-web-app-status-bar-style" content="black"><!--禁止自动识别电话号码和邮箱--><meta name="format-detection" content="telephone=no,email=no">

下面延伸一下<meta>标签的作用

meta标签是元素可提供相关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。

meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能

<meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no;" />

也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。

name属性

主要有以下几种参数：

（1）Keywords（关键字）

说明：keywords用来告诉搜索引擎你网页的关键字是什么。提高网站的访问量

举例：

<meta name ="keywords"content="science,education,culture,politics,ecnomics,relationships,entertainment,human">

（2）description（网站内容描述）

说明：description用来告诉搜索引擎你的网站主要内容。

网站内容描述（description）的设计要点：

①网页描述为自然语言而不是罗列关键词（与keywords设计正好相反）；

②通常为网页内容的摘要信息，也就是希望搜索引擎在检索结果中展示的摘要信息；

③网页描述中含有有效关键词；

④网页描述内容与网页标题内容，主题内容有高度相关性；

⑤网页描述的文字不必太多，一般不超过搜索引擎检索结果摘要信息的最多字数（通常在100中文字之内，不同搜索引擎略有差异）。

举例：<meta name="description" content="This page isabout the meaning of science,education,culture.">

（3）robots（机器人向导）

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

content的参数有all,none,index,noindex,follow,nofollow。默认是all。

举例：<meta name="robots"content="none">

（4）author（作者）
说明：标注网页的作者

http-equiv属性

相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值

（1）content-Type（显示字符集的设定）

说明：设定页面使用的字符集。

用法：<meta http-equiv="content-Type"content="text/html; charset=gb2312">

（2）content-Language（当浏览者访问你的网页时，浏览器会自动识别并设置网页中的语言）

用法：<metahttp-equiv="Content-Language" content="zh-cn" />

（3）Expires（期限）

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

用法：<meta http-equiv="expires"content="Fri,12 Jan 2019 18:18:18 GMT">

注意：必须使用GMT的时间格式。

（4）Pragma(cache模式）

说明：禁止浏览器从本地计算机的缓存中访问页面内容。

用法：<meta http-equiv="Pragma"content="no-cache">

注意：这样设定，访问者将无法脱机浏览。

（5）Refresh（刷新）

说明：自动刷新并转到新页面。

用法：<meta http-equiv="Refresh" content="2;URL">；（注意后面的分号，分别在秒数的前面和网址的后面，URL可为空）

注意：其中的2是指停留2秒钟后自动刷新到URL网址。

（6）Set-Cookie(cookie设定）

说明：如果网页过期，那么存盘的cookie将被删除。

用法：<meta http-equiv="Set-Cookie"content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT;path=/">

注意：必须使用GMT的时间格式。

（7）Window-target（显示窗口的设定）

说明：强制页面在当前窗口以独立页面显示。

用法：<meta http-equiv="Window-target"content="_top">

注意：用来防止别人在框架里调用自己的页面。

移动web开发meta标签的使用相关推荐

移动端开发meta标签 viewport 设置
移动端开发meta标签 viewport 设置 <meta name="viewport" content="width=device-width, initial ...
移动端web开发-mate标签大用处
一添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 二启用 ...
移动web开发-------meta
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″ na ...
java web开发常用标签
struts标签库国际化配置配置国际化 1.国际化配置在struts自带的app中的struts-config.xml中的<message-resources parameter=&quo ...
web端meta标签的各种状态的设定
<meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content=&qu ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
小小base标签在web开发中的大作用
稍微上点规模的项目,通常都会为不同模块或功能的页面,js,css等资源建立不同的路径,或者对不同的servlet等配置不同的虚拟路径.这时,关于各种路径的包含和转向问题长期困扰开发人员. ...
前端开发 html第二课自结束标签注释标签中的属性文档声明进制字符编码文档使用 VScode 实体 meta标签语义化标签块元素和行内元素布局标签
1 自结束标签标签一般成对出现,但是也存在一些自结束标签如: 多"/"和没有"/"区别不大 2 注释注释的作用: 注释中的内容会被浏览器忽略,不会在网页中 ...
移动web开发，day1,字体标签、平面位移、渐变总结
移动web开发第一天内容分为三大块:字体标签iconfont, 平面转换渐变background-image:linear-gradient 字体图标: 字体图标iconfont(必须在html里 ...

移动web开发meta标签的使用

移动web开发meta标签的使用相关推荐

最新文章

热门文章