HTML 标签中的讯息
在这一节知识点中，我将带领大家一起学习 <head>标签的相关知识点。<head>标签，是一个对于网页极其重要的标签。在整个前端开发领域算得上不可不知的程度。<head> 标签可谓是“藏龙卧虎”。别看它外观简短，却处处定义着一个网页的“大事”。
<head> 也是 HTML 结构中不可获取的一部分。而关键字决定了你是否会被搜索引擎检索到。百度谷歌等搜索引擎想必大家的生活都已经离不开了吧。而网页视角则描述了用户从何种角度看一个网页。当然，作为一个完整的网页，最好还是有一些说明信息。那么，本节我们从四个知识点上来深入学习。首先是学习什么是网页头部信息，进而学习给网页添加关键字，然后学习一下什么叫网页视角，最后我们来学习给网页添加说明信息。
1. 学习“网页头部信息”
网页的头部信息指的就是 <head> 标签里的内容。你可以在这里面设置很多网页的属性，比如刷新，比如网页标题，比如网页的关键词等。<head> 标签内也可以容纳脚本（ script ）标签，要正确认识 <head> 在网页结构中的地位。下面让我来结合 Dreamweaver CC 2018 详细介绍一下相关知识。
1.1 设置网页头部信息
第一步：我们还是选择创建一个空白的 HTML 文档。按照前几节中介绍过的内容，我们依次点击菜单栏中的文件，新建，新建空白 HTML 文档。切换到代码视图我们可以看到，软件自动创建了好一个文档无标题文档。并且在 <head> 标签里已经有了默认的内容。它们分别是 meta 标签， link 标签，title 标签。如下图。我们来一一解释一下各个标签的作用。
1.1.1 <meta>标签
<meta> 标签是一个位于网页头部标签中的辅助性标签。它的作用是为页面提供元信息，比如供搜索引擎使用的关键词等。它有 http-equiv 属性和 name 属性。这些属性带有自己的参数，通过参数的变化来实现对网页的控制。比如我们常能看到通过 <meta> 标签来设置字符集。在这里大家一定要注意 <meta> 标签一定是位于头部标签内部的，不能出现在其他地方，要严格执行这一点标准。
1.1.2<link>标签
<link> 标签是用来链接的标签。这里大家肯定会问链接什么。在一个工程中，我们常常用这个标签来链接样式文件，如 CSS 文件。脚本文件，如 Javascript 文件。这个标签在 Android 开发等其他领域的开发中还会有其他的作用，在这里我们不做过多赘述。我们只需要知道并且重点记忆的是：<link> 标签用来链接 CSS 文件和 JS 文件。
1.1.3 <title> 标签
毋庸置疑，这是个见名知意的标签，这个标签的作用是为网页设置在浏览器中显示的标题。对于今天大多数的选项卡式的浏览器来说，这里的标题会展是在选项卡顶部位置。
网页的标题往往是为了让用户能通过网页标题来获取他现在所在网页的功能。同学们有没有想过，如果一个网页我们点开之后由于各种原因迟迟看不到网页标题，用户有极大概率会以为自己点错了，或者放弃浏览网页。因此，一个好的提醒意识，也是一个网页设计者必备的素养之一。
2. 给页面添加关键字
向页面添加关键字，首先新建一个 HTML 文件，此处不在赘述新建文档的具体过程。然后，我们点击插入，选择关键字。可以看到弹出一个让我们输入内容的页面。
在这个页面中输入我们要添加的关键字，点击确定，即可完成关键词的添加。在这个知识点中，必须要掌握的是添加关键字的意义并不是给我们网页设计者和使用网页的用户看，而是给搜索引擎等机机器人看。好的程序，要能够被机器很好的识别，作为一名丰富的前端工程师或者 SEO 优化相关从业人员，他们都具备良好的关键字选取技巧。具体技巧，感兴趣的同学们可以去互联网上了解一下，在此处我们无法详细展开了解。
添加完关键字后，我们打开代码视图可以看到，代码中被插入了一个 <meta> 标签，标签的 name 属性为 keywords （关键字），标签的内容 content 为我们刚刚输入的关键字。
不难发现，Dreamweaver CC 2018 其实是以图形化界面帮我们构建了通往代码的路径，让我们不必掌握代码就可以实现添加关键字这种专业技能。是不是很好用很贴心那？
3. 什么是网页视角
3.1 网页视角的概念
网页视角，英文说法叫 viewport ，这个词经常在 Unity3D ，VR，WebGL 开发中见到。顾名思义，就是你看网页的视角，举个例子：你在看电视的时候可能是坐着看，也可能是躺着看，也可能是侧着身子看。来帮你完成看这个动作的表面上是你的眼睛，但实际限制你看到多少内容的是你的眼眶，而看到的东西和具体姿态，则受你的姿势影响。
比如你在电视的侧面看电视，它就是个黑色长方形，而你去电视机背面看它则是密密麻麻缠绕的线更加丑陋。这样就很好解释了。网页也是“横看成岭侧成峰，远近高低各不同”。要想看到什么（内容多少，形状如何）完全取决你站在哪里看，用什么比例看（缩小？放大？），用什么角度看。这里类比的是你的屏幕大小和你设置的网页观看角度。
3.2 如何在 Dreamweaver CC 2018 中设置视角？
如果你用的英文原版的 Dreamweaver CC 2018，你看到的视角按钮写的就是ViewPort（V）。
但如果你使用的恰好是某些中文汉化版本的 Dreamweaver CC 2018 ，却怎么找也找达不到 Viewport（V），那也请你不必着急。因为软件的汉化工作组把这个词翻译为了视口（V）。具体操作看下图：
首先我们点击插入（I），然后进一步点击 HTML ，再次弹出的下拉列表中选择 视口（V）。我们发现并没有什么变化。然而并不是，这个时候请大家看一下代码视图，是不是又多了一条标签？没错，这个就是设置视角的代码。
3.3 视角属性解读
我们在上述代码中可以看到两个基本属性，一个是 width 属性，代表设置视角的宽度，它的默认值是设备宽度，也就是网页默认以显示器大小来适应显示。另一个叫 initial-scale 这个属性叫初始缩放，它的默认值为1，代表默认以100%大小展示网页。
4. 给网页添加说明信息
在这个知识点中，将为大家着重讲解一下如何设置网页说明信息。
下面来看一下具体操作：
设置说明信息的操作和设置视角完全一样。如下图展示的一样，先在插入中选择 HTML 然后选择说明即可发现网页代码中多了一条 meta 信息。如图所示：
5. 小结
总结一下本小结知识点，本小结主要讲授了网页头部信息的重要性，进一步讲，其实是主要围绕着meta标签的各种丰富的功能。通过这一节我们不难发现，网页中 head 部分虽然并不是很多，但却承担着很重的功能。 它更像是给整个网页在指定一种规则，比如缩放比例，观看视角，刷新时间，搜索关键字等。这要引起我们的注意，如果你的网页遇到了某些怎么调都调不好的 bug ，比如字符编码乱码。是不是可以先检查一些 head 部分的设置。从我以往的授课经验来看，犯这种问题的同学不尽其数，但归根到底还是一个练习二字。希望大家可以重视相关知识点。
那么总结一下：
- 本节的重点是： 学会设置网页的关键字，理解并掌握 head 部信息的作用；
- 本节的难点是： 理解视角的含义并设置视角。
- 还没有人评论，欢迎说说您的想法！
客服
