js333 > 计算机互联网 > htmlmeta标签用法,前端手机端常用MATA标签及解释

原标题:htmlmeta标签用法,前端手机端常用MATA标签及解释

浏览次数:190 时间:2019-11-22

前端-mate讲解,-mate讲解

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部,不包含任何内容。

<meta> 标签的属性定义了与文档相关联的名称/值对。

内容是html文档,且网页编码采用的是utf-8编码:

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

定义针对搜索引擎的关键词:

<meta name="keywords" content="HTML,CSS,XML,JAVA" />

定义页面描述:

<meta name="description" content="abmer_fs" />

定义页面的最新版本:

<meta name="revised" content="David 2014/12/2" />

每5秒刷新页面:

<meta http-equiv="refrsh" content="5" />

页面不随浏览器缩放而改变,页面固定大小:

<meta name="MobileOptimizd" content="400" />

添加到主屏幕后,全屏显示:

<meta name="apple-touch-fullscreen" content="yes" />

是否启动图标,内容设置yes,web应用程序运行在全屏模式,默认行为是使用Safari浏览器显示内容:

<meta name="apple-mobile-web-app-capable" content="yes" />

视图窗口,试图窗口的宽度时移动设备的宽度,一般设置为1.0倍。inital-scale表示的初始的缩放比例,maximum-scale=1.0表示的允许用户缩放的最大比例。user-scalable=no表示是否支持用户手动进行缩放:

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

当启动webapp功能时,显示手机信号、时间、电池的顶部导航栏的颜色,默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明):

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

 

meta 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 meta 标签位于...

(转载自CSDN,移动终端H5页面meta标签的设置案例)
一、天猫

定义和用法

<meta>元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

<meta>标签位于文档的头部,不包含任何内容。 

<meta>标签提供的内容虽然用户不可见,但是却提供了相当重要的网页的元信息。

html中meta标签及用法理解,htmlmeta标签用法

自己一直想成为高级前端开发工程师,而自学。奈何最近感觉自学收效甚微,一度迷茫。

不破不立,打算改变这样的状态。

春节后上班第一天,今年打算好好实现自己的前端梦想。

重新整理、总结前端技术。

金沙js333娱乐场 1

废话,就不多说了,开始今天的主题。

Html中meta标签

一、meta标签 含义

  <meta> 元素 可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

  <meta> 标签位于文档的头部,不包含任何内容。

  <meta> 标签的属性定义了与文档相关联的名称/值对。

 

二、meta 中常用属性

  1. charset  (字符集)

   说明:规定 HTML 文档的字符编码。

   用法: <meta charset="UTF-8">   

  1.  viewport (视区)

   说明:是用户网页的可视区域。 大家都知道移动设备的屏幕一般都比PC小很多,webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上,默认的虚拟窗口为980像素宽(目前大部分网站的标准宽度),然后按一定的比例(3:1或2:1)进行缩放。

      也就是说当我们加载一个普通网页的时候,webkit会先以980像素的浏览器标准加载网页,然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小,也就是页面上的所有元素都会缩小。

   用法:<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

      (1)  width 

        width 控制 viewport 的大小,一般为了自适应设置为device-width

      (2) initial-scale

         initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。

        (3) maximum-scale

         maximum-scale 最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。

      (4)  minimum-scale

        minimum-scale:允许用户缩放到的最小比例。和 maximum-scale 用法类似。

      (5)  user-scalable

        user-scalable 用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。

  1. keywords (关键字)

  说明:为搜索引擎提供的关键字列表。各关键词间用英文逗号“,”隔开。指定搜索引擎用来提高搜索质量的关键词。

  用法:<Meta name="Keywords" Content="关键词1,关键词2,关键词3,关键词4,……">

  1. description (描述、简介)
       说明:Description用来告诉搜索引擎你的网站主要内容。
       用法:<Meta name="Description" Content="你网页的简述">

  2. format-detection (格式检测)  

   说明:format-detection 是用来检测html里的一些格式的。

   用法:关于meta的format-detection属性主要是有以下几个设置:

    meta name="format-detection" content="telephone=no"     meta name="format-detection" content="email=no"     meta name="format-detection" content="adress=no"      也可以连写:meta name="format-detection" content="telephone=no,email=no,adress=no"           (1)telephone

    你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:

    telephone=no就禁止了把数字转化为拨号链接!
    telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!

    (2)email

    告诉设备不识别邮箱,点击之后不自动发送

    email=no禁止作为邮箱地址!
    email=yes就开启了把文字默认为邮箱地址,这个meta就不用写了,在默认是情况下就是开启!

    (3)adress

    adress=no禁止跳转至地图!
    adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启!

6. apple-touch-fullscreen

  说明:添加到主屏幕后,全屏显示。

  用法:<meta name="apple-touch-fullscreen" content="yes">

  1.  apple-mobile-web-app-capable

  说明: 作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

  用法:<meta name="apple-mobile-web-app-capable" content="yes" />

  1.  App-Config

  说明:保留历史记录以及动画效果

  用法:<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

9. msapplication-tap-highlight

   说明:点击无高光(高亮)

 用法:<meta name="msapplication-tap-highlight" content="no">

自己一直想成为高级前端开发工程师,而自学。奈何最近感觉自学收效甚微,一度迷茫。 不破不...

<title>天猫触屏版</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

<meta>标签在HTML4.01 和 HTML5 的不同

在HTML4.01中,字符编码定义:

<meta http-equiv="content-type" content="text/html;charset=utf-8"

在HTML5则这么写字符编码定义:

<meta charset="utf-8">

二、淘宝

常见的meta标签

  1. 针对搜索引擎的关键字,有助于SEO

<meta name="keywords" content="前端学习 饥人谷">

  1. 针对页面的描述,有助于SEO

<meta name="description" content="最有爱的前端学习社区">

  1. 针对字符编码的设置

<meta charset="utf-8">

  1. 针对浏览器版本选择渲染的设置

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

  1. 针对浏览器定时刷新

<meta name="refresh" content="5">

  1. 针对多终端兼容的设置

<meta name="viewport" content="width=device-width", initial-scale=1,maximum-scale=1">

<title>淘宝网触屏版</title>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta property="wb:webmaster" content="c51923015ca19eb1">
<meta name="author" content="m.taobao.com">
<meta name="copyright" content="Copyright ©m.taobao.com 版权所有">
金沙js333娱乐场 ,<meta name="revisit-after" content="1 days">
<meta name="keywords" content="">
<meta name="description" content="">

三、京东

<title> 京东 - 手机版 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<meta name="Keywords" content="手机购物,WAP商城,日用百货,3C家电,汽车用品">
<meta name="description" content="京东手机版提供了包括数码、家电、手机、电脑配件、网络产品、日用百货等数万种商品,手机快捷购物,就上京东手机版。">

四、网易

<title>手机网易网</title>
<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-itunes-app" content="app-id=425349261">
<meta name="apple-mobile-web-app-capable" content="yes">

五、百度

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

六、移动终端h5页面常用的meta属性

meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。 手机端特有的有哪些?
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
解释:
第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
在web app应用下状态条(屏幕顶部条)的颜色;
默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码。

本文由js333发布于计算机互联网,转载请注明出处:htmlmeta标签用法,前端手机端常用MATA标签及解释

关键词:

上一篇:JS判断是否是微信页面,h5启动原生APP总结

下一篇:淡入淡出轮播图,利用jquery写的左右轮播图特效