H5知识 -- meta篇

最新推荐文章于 2023-04-15 09:29:59 发布

ArtisanLin

最新推荐文章于 2023-04-15 09:29:59 发布

阅读量550

点赞数 1

分类专栏：网站架构文章标签： html5-网站架构 html

本文链接：https://blog.csdn.net/xjlinme/article/details/53418561

版权

13 篇文章 0 订阅

订阅专栏

转载请注明出处 LXJ

网站开发常用<meta>
<meta>标签提供了HTML文档的元数据（数据的信息）。元数据不会显示在客户端中，但会被浏览器解析，META元素通常用于指定网页的描述，关键字，文件的作者和其他元数据。应该位于<head>元素内部。

通常使用H5开发的网页在开头都会使用来表明网页采用UTF-8的编码格式，charest用来定义文档的字符编码。

<meta name="author" content="xxx"> 作者的描述
<meta name="generator" content="xxx"> 使用的编辑器
<meta name="revised" content="xxx"> 修订的内容
<meta name="description" content="xxx"> 网站的描述
<meta name="keywords" content="xxx"> 关键字
<meta name="other" content="xxx"> 其他的内容
<meta name="robots" content="param">规定是否允许robots获取（all|none|index|noindex|follow|nofollow）

使用keywords，在某些搜索引擎遇到这些关键字时，会用这些关键字对文档进行分类，类似这样的meta标签可能对于进入搜索引擎的索引有帮助。其中content定义与http-equiv或name相关的元信息。

另外可选属性http-equiv用来把content属性关联到HTTP头部，http-equiv常用的值有：

例如：定义HTML页面所使用的字符集为 GB2312

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

<meta http-equiv="Refresh" content="5;url=http://www.linxiangjun.top" />

移动端常用
在使用H5开发响应式页面或者移动端网站时，可以用来定义一系列有用的内容。通常在移动端的H5网页上都可以看到

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

该标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

属性说明：

width	设置layout viewport的宽度，为一正整数，或字符串“width-device”
initial-scale	设置页面的初始缩放值，为一数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一数字，可以带小数
height	设置layout viewport的高度。很少使用
user-scalable	是否允许用户进行缩放，“yes”代表允许，“no”代表不允许

除此之外，还有

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

是否删除默认的苹果工具栏和菜单栏，默认为显示

<meta name="format-detection" content="yes" />

是否识别页面中的数字为电话号码

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

网站开启对WEB APP程序的支持

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

改变顶部状态栏的颜色，默认为default（白色），可选black（黑色）和black-translucent（灰色半透明）

兼容常用

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

X-UA-Compatible是IE8的一个专有属性，它告诉IE8采用何种IE版本去渲染网页，在html的标签中使用。

关注