>[info]html代码中最关键的就是meta标签设置，meta标签是元素可提供相关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。 开发移动端页面首先一定要设置viewport （可视区域）[博文](https://blog.csdn.net/u012402190/article/details/70172371) ``` <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no;"> ``` meta标签共有两个属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能 * **http-equiv属性** 相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值 * （1）**content-Type**（显示字符集的设定） 说明：设定页面使用的字符集。 用法：**`<meta http-equiv="content-Type"content="text/html; charset=gb2312">`** * （2）**content-Language**（当浏览者访问你的网页时，浏览器会自动识别并设置网页中的语言） 用法：**`<metahttp-equiv="Content-Language" content="zh-cn" /> `** * （3）**Expires**（期限） 说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。注意：必须使用GMT的时间格式。 用法：**`<meta http-equiv="expires"content="Fri,12 Jan 2001 18:18:18 GMT"> `** * （4）**Pragma**(cache模式） 说明：禁止浏览器从本地计算机的缓存中访问页面内容。 用法：**`<meta http-equiv="Pragma"content="no-cache"> `** 注意：这样设定，访问者将无法脱机浏览。 * （5）**Refresh** （刷新） 说明：自动刷新并转到新页面。 用法：**`<meta http-equiv="Refresh" content="2;URL">；`**（注意后面的分号，分别在秒数的前面和网址的后面，URL可为空） 注意：其中的2是指停留2秒钟后自动刷新到URL网址。 * （6）**Set-Cookie**(cookie设定） 说明：如果网页过期，那么存盘的cookie将被删除。 用法：**`<meta http-equiv="Set-Cookie"content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT;path=/">`** 注意：必须使用GMT的时间格式。 * （7）**Window-target** （显示窗口的设定） 说明：强制页面在当前窗口以独立页面显示。 用法：**`<meta http-equiv="Window-target"content="_top">`** 注意：用来防止别人在框架里调用自己的页面。 * **name属性** * （1）**Keywords**（关键字） 说明：keywords用来告诉搜索引擎你网页的关键字是什么。提高网站的访问量 * （2）**description**（网站内容描述） 说明：description用来告诉搜索引擎你的网站主要内容。 网站内容描述（description）的设计要点： ①网页描述为自然语言而不是罗列关键词（与keywords设计正好相反）； ②通常为网页内容的摘要信息，也就是希望搜索引擎在检索结果中展示的摘要信息； ③网页描述中含有有效关键词； ④网页描述内容与网页标题内容，主题内容有高度相关性； ⑤网页描述的文字不必太多，一般不超过搜索引擎检索结果摘要信息的最多字数（通常在100中文字之内，不同搜索引擎略有差异）。 * （3）**robots**（机器人向导） 说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 content的参数有all,none,index,noindex,follow,nofollow。默认是all。 举例：**`<meta name="robots"content="none">`** * （4）author（作者） 说明：标注网页的作者  width:可视区域的宽度，值可为数字或关键词device-width height:同width device-width - 设备的宽度 initial-scale - 初始的缩放比例  minimum-scale - 允许用户缩放到的最小比例   maximum-scale - 允许用户缩放到的最大比例  user-scalable - 用户是否可以手动缩放