开发者学堂课程【HTML 基础入门学习：meta 标签中的 name 属性】学习笔记与课程紧密联系，让用户快速学习知识
课程地址：https://developer.aliyun.com/learning/course/465/detail/5719
meta 标签中的 name 属性
内容介绍
一、name 属性常见的值
二、举例
三、viewport 的作用
四、总结
上节中 meta 属性名称值是成对出现的，名称里最常见的三种属性：http-equiv、name、scheme，这节讲name，将 content 关联到某一个名称。
一、name 属性常见的值
1. Description 描述
2. Keywords 关键词
比如攻城课堂那么关键词可能是前端课堂、前端、求值等等一些都是攻城课堂关键词。
3. Renderer 设置浏览器渲染内核
4. Viewport 指定用户是否可以缩放页面
原来很多老式pc网站在手机上或者pad上看的时候可以放大或缩小，现在很多新式已经适配了手机端页面的，会发现放大不了了，这就是 Viewport 属性作用。
二、举例
1. 例1：
<!DOCTYPE html><html>
<head>
<title>攻城课堂</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8"> //字符集
</head>
<body>
攻城课堂
</body>
</html>
//引入代码：
<meta name="keywords" content="前端开发,web 开发,html" />
<meta name="description" content="攻城课堂是一个专注前端体系化学习的网站" />
保存网页中显示攻城课堂，在<head>里会看到引入的代码，对网页没有影响，Description 和 Keywords 一个是关键词，一个是描述，对网页没有任何帮助但是对于 ICu 的优化以及对浏览器搜索和优化会有帮助。
比如在爱站网中搜索豆瓣，可以看到它的网站标题就是豆瓣两个字，网站关键词不存在，网站描述是提供图书、电影、音乐唱片的推荐、评论和价格比较，以及城市独特的文化生活。
搜索京东可以看到：
标签 |
内容长度 |
内容 |
网站标题 |
38个字符 |
京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物! |
网站关键词 |
52个字符 |
网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机数码,配件,手表存储卡,京东 |
网站描述 |
86个字符 |
京东JD.COM-专业的综合网上购物商城销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验! |
如果网站写了Description、Keywords 利用 icu 搜索工具就会看到有关信息，但是要是什么都不写，再搜的时候就不会有这些标题、关键词和网站描述。
比如写手机，在百度上搜买手机，因为它里边有相应的关键词，故可能京东就会比较靠前，。
2. 例2：
<meta name="renderer" content="webkit">
即用webkit内核来渲染，针对于其他非webkit内核的浏览器的时候写明这个属性，他就会用webkit内核来渲染。
其用处较多，比如搜狗和360浏览器，它们是有高速模式和兼容模式的。
欲使页面不用兼容模式渲染，因为兼容模式会有一些兼容性的问题那么在页面中加入这串代码就会在浏览页面的时候，强制使用高速模式。
3. 演示
//引入代码：
<meta name="viewport" content="width=device-width， initial-scale=1,maximum-scale=1">
三、viewport 的作用
指定此页面宽度对于移动端等于屏幕宽度，最大和最小比例为1倍，即不能放大，所以现在很多新的手机适配的页面，手指来回滑动是不能无法放大的，这就是viewport 的作用。
四、总结
写一些关键词、描述以及渲染的内核以及非常重要的一点：控制用户是否可以缩放页面，此即 meta 里的 name 属性起到的作用。
