基础教程：Hype 4文稿面板之<head>标签（上）
Hype是一款H5制作软件，Hype 4的文稿面板是用来处理HTML5文档头部的内容设置以及浏览器兼容性警告设置的。
基于此，在开始讲解文稿面板的内容前，非常有必要给小伙伴简单介绍HTML的文档结构以及其中的头部元素的作用。这样对于很多没有学习过HTML5的小伙伴来说，在Hype 4 HTML5创作工具的文稿面板进行设置时，能够知其然，也能知其所以然。
一、HTML的文档结构
在讲述身份面板的时候，小编讲到过HTML是网页的框架和内容，它通过各种各样的元素来标记网页的内容。HTML的元素存放在一个以html为后缀名的文件中，这个文件有固定的文档结构组织。
图1：HTML的文档结构
标签之前，表明该文档是HTML5文档。…… 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
…
- ：是文档声明，必须写在HTML文档的第一行，位于
- ：称为根标签，所有的网页标签都在中。
- ：用于定义文档的头部，它是所有头部元素的容器。在
- ：里面的内容是网页的主要内容，最终会在浏览器中显示出来。
二、文档的头部Head
文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。常见的头部元素有title、script、style、link和meta等。
1、title元素
title定义文档的标题，它是 head 部分中唯一必需的元素。title的文字就是浏览器的标签页上显示的文字。
图2：title元素
2、meta元素
meta元素可提供有关页面的元信息（meta-information），例如：网页关键字声明、网页介绍、网页制作者信息、显示字符集网页编码、自动跳转等。由于meta属性的内容比较多，小伙伴可以自行在网上搜索meta每种作用的语句的编写方法。
图3：meta属性
图4是通过一个百度搜索网页，介绍meta的name属性中description的作用——在搜索页面显示网页的简介。
图4：meta元素的description作用
3、link元素
link元素定义HTML文档与外部资源的关系，常见的用途是用于链接外部CSS文件以及链接收藏夹图标（favicon.png）。
图5：link元素的属性
由于link元素的属性比较多，小编这里只介绍常用的是三个：
- rel：规定当前文档与被链接文档之间的关系。常用的有stylesheet、icon。
- type：规定被链接文档的 MIME 类型。例如：如果链接的是外部的CSS文档，那么type=“text/css”；如果链接的是网页标签上的png图标，那么type=“image/png”。
- href：规定被链接文档的存储位置。例如：href=“css/style.css”
图6：网页中的link元素及其属性
三、小结
本章节讲述了HTML5文档头部head中的title、meta和link三个元素的作用，下一章节继续讲述HTML5文档头部head中的style和script两个元素的作用。
湘公网安备 43102202000103号