HTML <meta> 标签的 name 属性 详解
HTML <meta> 标签的 name 属性
实例
使用 name 属性来定义 HTML 文档的描述、关键字和作者。同时定义视口来控制不同设备的页面尺寸和缩放：
<head>
<meta name="description" content="免费的 Web 教程">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Bill Gates">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="免费的 Web 教程">
<meta name="keywords" content="HTML5,CSS,JavaScript">
<meta name="author" content="Bill Gates">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>我的网站</h1>
<p>一些文本 ...</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
name 属性规定元数据的名称。
name 属性规定内容属性的信息/值的名称。
注释：如果设置了 http-equiv 属性，则不应设置 name 属性。
浏览器支持
| 属性 | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| name | Yes | Yes | Yes | Yes | Yes |
语法
<meta name="value">
属性值
application-name
规定页面所代表的 Web 应用程序的名称。
| 值 | 描述 |
|---|---|
| author |
规定文档作者的姓名。 例子： <meta name="author" content="Bill Gates"> |
| description |
规定页面的描述。搜索引擎可以选择此描述来显示搜索结果。 例子： <meta name="description" content="Free web tutorials"> |
| generator |
规定用于生成文档的软件包之一（不用于手工制作的页面）。 例子： <meta name="generator" content="FrontPage 4.0"> |
| keywords |
规定以逗号分隔的关键字列表 - 与页面相关（通知搜索引擎该页面的内容）。 提示：请始终规定关键字（搜索引擎需要对页面进行分类）。 例子： <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport |
控制视口（网页的用户可见区域）。 视口因设备而异，在手机上会比在电脑屏幕上小。 您应该在所有网页中包含以下 <meta> 视口元素： <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta> viewport 元素向浏览器提供有关如何控制页面尺寸和缩放的说明。 width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（这将因设备而异）。 initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。 您可以在我们的响应式网页设计 - 视口教程中阅读更多关于视口的信息。 |
