html入门之meta

xiaoxiao2021-02-27  58

定义和用法

<meta> 元素可提供有关页面的元信息(meta-information),

比如针对搜索引擎更新频度的描述和关键词。

meta是html中的元标签,其中包含了对应html的相关信息,客户端浏览器或服务器端的程序会根据这些信息进行处理。 HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。 content(内容类型):重要!!告诉浏览器这个网页的格式是文本的还是网页的模式。 charset(编码):特别重要!!!这个网页的编码是utf-8,中文编码, 需要注意的是这个是网页内容的编码,而不是文件本身的,其他类型的编码中文可能会出现乱码。

使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。例如,添加:

<meta http-equiv="charset" content="iso-8859-1"> <meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含:

content-type: text/html charset:iso-8859-1 expires:31 Dec 2008

下面是部分mata的含义:

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--#以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。-->

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

width=device-width :设置layout viewport 的宽度,为一个正整数,使用字符串”width-device”表示设备宽度

initial-scale=1 :设置页面的初始缩放值,为一个数字,可以带小数 -->

<meta name="description" content="Free HTML5 Website Template by FreeHTML5.co" /> <!-- description : 是网页的描述,是给搜索引擎看的,用来告诉搜索引擎你的网站主要内容 , 搜索引擎根据这个描述进行收录排名 -->

<meta name="keywords" content="free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" /> <!-- keywords : 为搜索引擎提供的关键字列表 --> <meta name="author" content="FreeHTML5.co" /> <!-- author :属性值是用来定义网页的作者 -->

<!-- Facebook and Twitter integration og标签式表示的是facebook的The Open Graph protocol,即开放图谱协议,一般是用于方便分享到facebook用的,不过在国内没什么意义。 --> <meta property="og:title" content=""/> <meta property="og:image" content=""/> <meta property="og:url" content=""/> <meta property="og:site_name" content=""/> <meta property="og:description" content=""/> <meta name="twitter:title" content="" /> <meta name="twitter:image" content="" /> <meta name="twitter:url" content="" /> <meta name="twitter:card" content="" />

想要深入了解html,可以参考W3C官网:

http://www.w3school.com.cn/tags/tag_meta.asp#meta_prop_name

转载请注明原文地址: https://www.6miu.com/read-6054.html

最新回复(0)