好程序员web前端分享html中meta标签及用法详解

好程序员web前端分享html中meta标签及用法详解,这篇文章给大家介绍了html中meta标签及用法详解,感兴趣的朋友一起看看,Html中meta标签
一、meta标签 含义
  <meta> 元素 可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
  <meta> 标签位于文档的头部,不包含任何内容。
  <meta> 标签的属性定义了与文档相关联的名称/值对。
二、meta 中常用属性

  1. charset? (字符集)
       说明:规定 HTML 文档的字符编码。
       用法:?<meta charset="UTF-8">??
    2.? viewport (视区)
       说明:是用户网页的可视区域。 大家都知道移动设备的屏幕一般都比PC小很多,webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上,默认的虚拟窗口为980像素宽(目前大部分网站的标准宽度),然后按一定的比例(3:1或2:1)进行缩放。
          也就是说当我们加载一个普通网页的时候,webkit会先以980像素的浏览器标准加载网页,然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小,也就是页面上的所有元素都会缩小。
       用法:
    1、<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。
  2. keywords (关键字)
      说明:为搜索引擎提供的关键字列表。各关键词间用英文逗号“,”隔开。指定搜索引擎用来提高搜索质量的关键词。
      用法:<Meta name="Keywords" Content="关键词1,关键词2,关键词3,关键词4,……">
  3. description (描述、简介)
    ?
       说明:Description用来告诉搜索引擎你的网站主要内容。
    ?
       用法:<Meta name="Description" Content="你网页的简述">
  4. format-detection (格式检测)  
       说明:format-detection 是用来检测html里的一些格式的。
       用法:关于meta的format-detection属性主要是有以下几个设置:   ?
    ?
    1、meta name="format-detection" content="telephone=no"
    2、   meta name="format-detection" content="email=no"
    3、   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就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启!
  5. apple-touch-fullscreen
      说明:添加到主屏幕后,全屏显示。
      用法:<meta name="apple-touch-fullscreen" content="yes">
    7.? apple-mobile-web-app-capable
      说明: 作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
      用法:<meta name="apple-mobile-web-app-capable" content="yes" />
    8.? App-Config
      说明:保留历史记录以及动画效果
      用法:<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>
  6. msapplication-tap-highlight
     ? 说明:点击无高光(高亮)
     用法:<meta name="msapplication-tap-highlight" content="no">
    总结
    以上所述是小编给大家介绍的html中meta标签及用法详解,希望对大家有所帮助。

原文地址:https://blog.51cto.com/14256902/2425285

时间: 2024-10-12 22:26:19

好程序员web前端分享html中meta标签及用法详解的相关文章

好程序员web前端分享CSS文件引用的最优方法

好程序员web前端分享CSS文件引用的最优方法,在html总引入css文件的方法: 1链接式: 2导入式: 区别: 使用链接式时,会在加载页面主体部分之前加载css文件,这样现实出来的页面一开始就是带有样式效果的,而使用导入式时,会在整个页面装载完成之后再装载css文件,对于有的浏览器来说,在一些情况下,如果页面文件的体积比较大,则会出现先现实无样式的页面,闪烁一下之后再出现设置样式的效果.从浏览者的感受来说,这是使用导入式的一个缺陷.** 链接式比导入式快. 当有多个文件链接到页面的时候会导致

好程序员web前端分享定位锚点透明

好程序员web前端分享定位锚点透明 学习目标 1.position 定位属性和属性值 2.定位元素的层级属性 3.包含块的概念和应用 4.锚点连接的语法和应用场景 5.透明属性的应用 6.扩展:Flash和marquee(滚动字幕) 一.position 定位属性和属性值 position 定位属性,检索对象的定位方式:语法:position:static /absolute/relative/fixed/inherit/sticky/unset(未设置是inherit和initial的结合)/

好程序员web前端分享MVVM框架Vue实现原理

好程序员web前端分享MVVM框架Vue实现原理,Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js和react.js更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. ? 1.什么是MVVM呢? MVVM的简写是Model-View-ViewModel. 在过去的10年里面,我们已经把很多传统的服务端代码放到了浏览器中,这样就产生了成千上万行的javascript代码,它们连接了HTML 和CSS文

好程序员web前端分享如何构建单页Web应用

好程序员web前端分享如何构建单页Web应用,首先我们来看一看单页应用是什么?所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上.它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体验. 其实单页应用我们并不陌生,很多人写过ExtJS的项目,用它实现的系统,很天然的就已经是单页的了,也有人用jQuery或者其他框架实现过类似的东西.用各种JS框架,甚至不用框架,都是可

好程序员web前端分享Cookie知识

好程序员web前端分享Cookie知识,今天小编为大家带来了一篇新手必看干货,接下来让我们一起来看一看吧. 一.Cookie的出现 浏览器和服务器之间的通信少不了HTTP协议,但是因为HTTP协议是无状态的,所以服务器并不知道上一次浏览器做了什么样的操作,这样严重阻碍了交互式Web 应用程序的实现. 针对上述的问题,网景公司的程序员创造了Cookie. 二.Cookie的传输 服务器端在实现Cookie标准的过程中,需要对任意HTTP请求发送Set-Cookie HTTP头作为响应的一部分: 1

好程序员web前端分享HTML5与HTML之间有什么区别?

好程序员web前端分享HTML5与HTML之间有什么区别?很多没有学过HTML5大前端的同学,对HTML5并不了解,经常会提出疑问:HTML5与传统HTML有什么区别?今天,就为大家讲一下两者比较明显几个区别.首先,HTML5已经远远超越了标记语言的范畴,它的设计目的是在移动设备上支持多媒体,和HTML比起来,深度和广度上都做了进一步提升. 接着,我们来看一下两者的声明文件类型: HTML:1.<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"

好程序员web前端分享css常用属性缩写

好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 pr

好程序员web前端分享HTML基础篇

好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基础 学习目标 1.本专业介绍.HTML相关概念,HTML发展历史 2.WEB标准,W3C/WHATWG/ECMA相关概念 3.相关软件的应用以及站点的创建 4.HTML基本结构和HTML语法 5.HTML常用标记 一.本专业介绍.HTML相关概念,HTML发展历史 本专业介绍 移动前端/WEB前端

好程序员web前端分享HTML5常见面试题集锦四

好程序员web前端分享HTML5常见面试题集锦四1.为什么要初始化CSS样式?答案:因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化.2.浮动元素引起的问题?答案:a. 父元素的高度无法被撑开,影响与父元素同级的元素b. 与浮动元素同级的非浮动元素会跟随其后c. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构3.l