CSS入门2-认识html之meta标签详解

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

上篇我们主要认识了头部内容的标签,但是还留了一个小尾巴,那就是meta标签。在文章中我给出了一篇文章Http meta详解供大家学习参考,该篇作者所述的内容已经非常详尽了,但是我们还是要用自己的方式去理解一遍。

1. 简介

理解一样东西,首先在于理解其存在的意义,或者说这个东西的出现是为了解决什么问题。那么meta到底为我们的网页带来了什么作用呢?大家试想一下,我们写了一个网页丢在网上,是希望别人来访问的。我们把写好的代码放在服务器,需要通过浏览器的处理变成网页。而网络上的网页多如繁星,需要吸引用户搜索,点击这个链接,然后才能最终呈现在用户面前。这里有两个关键点:

  1. 浏览器会如何显示网页的内容
  2. 用户为何会点击你的网页

meta的出现就是为了解决这两个问题。那么,它是如何解决这两个问题呢?

2. http-equiv

http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。meta标签的http-equiv属性语法格式是:

<meta http-equiv="参数" content="参数变量值"> ;

当浏览器等设备接收服务器端传送的文件时,首先会接收文件的相关名称/值对,通常为多个。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

其中http-equiv属性主要有以下几种参数:

2.1 content-Type(定义mime类型,显示字符集)

作用 content-type用于定义用户的浏览器或相关设备如何显示将要加载的数据,或者如何处理将要加载的数据,此属性的值可以查看MIME类型。但是其最重要的MIME类型是text/html,并用来设置字符集。

用法:

<meta http-equiv="content-type" content="text/html;charset=XXX">

示例:

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

设置字符集时,可以简写:

<meta charset="utf-8">

XXX取值:

  • gb2312(或gbk)时,代表说明网站是采用的编码是简体中文
  • big5时,代表说明网站是采用的编码是繁体中文
  • iso-2022-jp时,代表说明网站是采用的编码是日文
  • ks_c_5601时,代表说明网站是采用的编码是韩文
  • iso-8859-1时,代表说明网站是采用的编码是英文
  • utf-8时,代表世界通用的语言编码(最常用)

2.2content-language(显示语言设置)

作用:设定页面的语言以及国家代码(HTML文档的语言可通过在html标签的lang属性、xml:lang属性或meta标签的content-language中声明。明确网页使用的语言,有助于浏览器与搜索引擎进行相应的解析与索引。 ) 用法:

<meta http-equiv="content-language" content="primarycode-subcode">

示例:

<meta http-equiv="content-language" content="zh-cn">

例如:language-code为"en"时,代表English英文,而language-code为"en-US"时,代表the U.S. version of English美国版本的英文。

primary-code为语言代码设置,subcode为国家代码

primarycode常用取值:

  • zh (Chinese)中国
  • fr (French)法国
  • de (German)德国
  • it (Italian)意大利
  • nl (Dutch)荷兰
  • el (Greek)希腊
  • es (Spanish)西班牙
  • pt (Portuguese)葡萄牙
  • ar (Arabic)阿拉伯
  • ru (Russian)俄罗斯
  • ja (Japanese)日本

另外,关于charset和content-type的区别,大家可以参考这篇文章:html中charset和content-language的区别

2.3 refresh(刷新与重定向)

作用:用于刷新与重定向页面。

用法示例: 5秒之后刷新本页面:

<meta http-equiv="refresh" content="5">

5秒之后跳转到我的简书主页:

<meta http-equiv="refresh" content="5; url=http://www.jianshu.com/u/7a62ab344c39">

2.4 expires(过期时间-控制缓存)

作用:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。时间必须使用GMT格式。

用法示例:

<meta http-equiv="expires" content="Sunday 26 October 2008 01:00 GMT" >

2.5 pragma(cache模式)

作用:禁止浏览器从本地计算机读取缓存 用法:

<meta http-equiv="pragma" content="no-cache">

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

2.6 cache-control(缓存设定)

作用:HTTP1.1中启用Cache-Control 来控制页面的缓存与否

用法:

<meta http-equiv="cache-control" content="XXX">

XXX取值如下;

  • max-age=[秒] — 执行缓存被认为是最新的最长时间。类似于过期时间,这个参数是基于请求时间的相对时间间隔,而不是绝对过期时间,[秒]是一个数字,单位是秒:从请求时间 开始到过期时间之间的秒数。
  • s-maxage=[秒] — 类似于max-age属性,除了他应用于共享(如:代理服务器)缓存。
  • public — 标记认证内容也可以被缓存,一般来说: 经过HTTP认证才能访问的内容,输出是自动不可以缓存的。
  • no-cache — 强制每次请求直接发送给源服务器,而不经过本地缓存版本的校验。这对于需要确认认证应用很有用(可以和public结合使用),或者严格要求使用最新数据的应用(不惜牺牲使用缓存的所有好处)。
  • no-store — 强制缓存在任何情况下都不要保留任何副本。
  • must-revalidate — 告诉缓存必须遵循所有你给予副本的新鲜度,HTTP允许缓存在某些特定情况下返回过期数据,指定了这个属性,你可以高速缓存,表明你希望严格的遵循你的规则。
  • proxy-revalidate — 和 must-revalidate类似,除了他只对缓存代理服务器起作用。

(ps:可以看到expires,pragma和cache-control都对缓存起作用,那么他们有什么区别,不同的参数在不同的浏览器表现形式如何呢。这一块我们今后会在HTTP系列具体说明。)

2.7 set-cookie(cookie设定)

作用:如果网页过期,那么存盘的cookie将被删除。

用法:

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

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

2.8 window-target(显示窗口的设定)

作用:强制页面在当前窗口以独立页面显示,用来防止别人在框架里调用自己的页面。

用法:

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

2.9 X-UA-Compatible(IE8专用标记-兼容)

作用:IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式,以此来解决部分兼容问题。 用法示例:

<meta http-equiv="X-UA-Compatible" content="IE=7">  

以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=8">  

以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。

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

以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。

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

以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame。

PS:谷歌添加一个插件:Google Chrome Frame(谷歌内嵌浏览器框架GCF),这个插件可以让用户的IE浏览器外观不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。

3. name

name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

meta标签的name属性语法格式是:

<meta name="参数" content="具体的参数值">;

name主要有以下几种参数:

3.1 author(定义网页作者)

作用:定义网页作者

用法示例:

<meta name="author" content="yourName">

网页作者是yourName

3.2 keywords(定义关键词)

作用:定义页面关键词,用于被搜索引擎收录。

用法示例:

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

3.3 descption(网页描述)

作用:用来告诉搜索引擎你的网站主要内容。

用法示例:

<meta name="description" content="This page is about the meaning of science,education,culture.">

网站内容描述(description)的设计要点:

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

②尽可能准确地描述网页的核心内容,通常为网页内容的摘要信息,也就是希望搜索引擎在检索结果中展示的摘要信息;

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

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

⑤网页描述内容与网页主体内容有高度相关性;

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

3.4 robots(搜索引擎索引方式)

作用:用于定义网页搜索引擎索引方式。告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

用法:

<meta name="robots" content="XXX">

XXX取值说明(默认是all):

  • none 搜索引擎将忽略此网页,等价于noindex,nofollow。
  • noindex 搜索引擎不索引此网页。
  • nofollow 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
  • all 搜索引擎将索引此网页与继续通过此网页的链接索引,等价于index,follow。
  • index 搜索引擎索引此网页。
  • follow 搜索引擎继续通过此网页的链接索引搜索其它的网页。
  • noarchive 禁止搜索引擎建立网页快照。

特殊用法示例:

  1. 针对谷歌GOOGLEBOT使用robots 可以将name的属性只定义为GOOGLEBOT标识为谷歌搜索引擎。
<meta name="googlebot" content="noindex, nofollow" />
  1. 针对百度baiduspider使用robots 可以将name的属性只定义为baiduspider标识为百度搜索引擎。
<meta name="baiduspider" content="noarchive" />

3.5 copyright(网页版权)

作用:定义网页的版权

用法示例:

<meta name="copyright" content="本页版权XXX所有。All Rights Reserved" />

3.6 data(定义网页生成时间)

作用:定义网页生成时间

用法示例:

<meta name="data" content="2017-11-22T13:47:30+00:00">

3.7 revisied(定义网页文档修改时间)

作用:定义网页文档修改时间

用法示例:

<meta name="revised" content="css入门修炼, 11/23/2017"/>

3.8 renderer(渲染方式)

作用:指定双核浏览器默认以何种方式渲染页面。

用法示例:

<meta name="renderer" content="webkit">//默认webkit内核
<meta name="renderer" content="ie-comp">//默认IE兼容模式
<meta name="renderer" content="ie-stand">//默认IE标准模式

PS:360浏览器支持

3.9 generator(网页制作软件)

用法示例:

<meta name="generator" content="Microsoft"/>

3.10 viewport(用户网页的可视区域)

作用:设置用户网页的可视区域 (ps:viewport展开来讲又是一个很大的话题,首先需要我们对像素,分辨率等内容有所了解。这一块我会专门放在单位和响应式布局的章节中来讲解。现在我们先简单看一下,content的可选项)

  • width:viewport 的宽度
  • height:viewport的高度 (很少使用)
  • initial-scale:设置页面的初始缩放值
  • minimum-scale:允许用户的最小缩放值
  • maximum-scale:允许用户的最大缩放值
  • user-scalable:是否允许用户进行缩放
  • target-densitydpi(android才生效):设备的密度等级

常用移动端设置方法如下:

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

这段代码的意思是,让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放。一般主流的web app都是这么设置的,它的作用其实是故意舍弃viewport,不缩放页面,这样dpi肯定和设备上的真实分辨率是一样的,不做任何缩放,网页会因此显得更高细腻。

参考

W3school-HTML <meta> 标签 百度百科-meta Http meta详解 html中charset和content-language的区别 HTML meta content-language 定义页面语言 语言名称代码表 国家名称代码表 梦之都-HTML meta 标签 页面的缓存设置与meta的作用详细解释 Http头介绍:Expires,Cache-Control,Last-Modified,ETag 百度百科-Cache-control 响应式 Web 设计 - Viewport 说说移动前端中 viewport (视口) HTML meta viewport属性说明(mark) viewport就是这回事

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏三流程序员的挣扎

Flutter 学习记1 - Mac 下的安装配置

网上搜到一篇文章安装cocoapods遇到error: RPC failed; curl 56 SSLRead() return error -36问题,不知道...

1.1K30
来自专栏指尖下的Android

AndroidStudio无法输出日志的Bug

正常情况下我们在真机调试程序时,如图箭头所指的位置显示的应该是该应用的主包名,但是有的时候明明打开了开发者模式,但是却无法输出日志,该位置显示的也不是应用包名,...

29720
来自专栏魏琼东

.NET快速开发实践之应用IExtenderProvider实现对象与UI控件的绑定

         现在企业级的信息系统应用开发之中,数据层采用了ORM,解放了之前开发最大工作量的核对SQL语句,我到现在还曾经记得在2002年实医院管理信息系...

21260
来自专栏偏前端工程师的驿站

项目小结:日立OA系统(Asp.net)

前言                                         进入公司6个月后被安排到该项目中,据说该项目规模很大,而拆分到公司的就只是...

29850
来自专栏北京马哥教育

手把手教你搭建一个学习Python好看的 Jupyter 环境

又到摆脱重复工作,换个心情,然而并没有软用的时间了。这次,教大家如何搭建一个好看的jupyter环境。 安装Jupyter 先来展示一下我的环境 python...

52790
来自专栏macOS 开发学习

Mac 开发之 做一个JSON转模型属性的小公举

好啦,到这里就简单完成了这个小工具,继续学习的,可以给这个工具添加一个状态栏按钮(可以参考我前面的文章),也许会用起来更方便哦..

13220
来自专栏Linyb极客之路

前端性能优化-雅虎军规35条

合并图片(如css sprites,内置图片使用数据)、合并CSS、JS,这一点很重要,但是要考虑合并后的文件体积。

13850
来自专栏IMWeb前端团队

基于vue.js的渐进式组件尝试

我们有个内部运营系统,是基于keenthemes的一个主题进行开发的,而这个主题就是基于jQuery+bootstrap+jQueryPlugins 进行的定制...

245100
来自专栏JadePeng的技术博客

weex官方demo weex-hackernews代码解读(下)

weex 是阿里出品的一个类似RN的框架,可以使用前端技术来开发移动应用,实现一份代码支持H5,IOS和Android。而weex-hacknews则是weex...

39680
来自专栏张戈的专栏

分享超炫的表白页面和爱的纪念日源码

昨晚弄到三点就是为了 DIY 这 2 个页面,想给老婆一个浪漫的惊喜。 预览地址: 爱情纪念:http://zhangge.net/love 爱的故事:http...

1.7K50

扫码关注云+社区

领取腾讯云代金券