基础教程：Hype 4文稿面板之标签（上）

Hype是一款H5制作软件，Hype 4的文稿面板是用来处理HTML5文档头部的内容设置以及浏览器兼容性警告设置的。

基于此，在开始讲解文稿面板的内容前，非常有必要给小伙伴简单介绍HTML的文档结构以及其中的头部元素的作用。这样对于很多没有学习过HTML5的小伙伴来说，在Hype 4 HTML5创作工具的文稿面板进行设置时，能够知其然，也能知其所以然。

一、HTML的文档结构

在讲述身份面板的时候，小编讲到过HTML是网页的框架和内容，它通过各种各样的元素来标记网页的内容。HTML的元素存放在一个以html为后缀名的文件中，这个文件有固定的文档结构组织。

• ：是文档声明，必须写在HTML文档的第一行，位于标签之前，表明该文档是HTML5文档。
• …：称为根标签，所有的网页标签都在中。
• …：用于定义文档的头部，它是所有头部元素的容器。在 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
• …：里面的内容是网页的主要内容，最终会在浏览器中显示出来。

二、文档的头部Head

文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。常见的头部元素有title、script、style、link和meta等。

1、title元素

title定义文档的标题，它是 head 部分中唯一必需的元素。title的文字就是浏览器的标签页上显示的文字。

2、meta元素

meta元素可提供有关页面的元信息（meta-information），例如：网页关键字声明、网页介绍、网页制作者信息、显示字符集网页编码、自动跳转等。由于meta属性的内容比较多，小伙伴可以自行在网上搜索meta每种作用的语句的编写方法。

图4是通过一个百度搜索网页，介绍meta的name属性中description的作用——在搜索页面显示网页的简介。

3、link元素

link元素定义HTML文档与外部资源的关系，常见的用途是用于链接外部CSS文件以及链接收藏夹图标（favicon.png）。

由于link元素的属性比较多，小编这里只介绍常用的是三个：

• rel：规定当前文档与被链接文档之间的关系。常用的有stylesheet、icon。
• type：规定被链接文档的 MIME 类型。例如：如果链接的是外部的CSS文档，那么type=“text/css”；如果链接的是网页标签上的png图标，那么type=“image/png”。
• href：规定被链接文档的存储位置。例如：href=“css/style.css”

三、小结

本章节讲述了HTML5文档头部head中的title、meta和link三个元素的作用，下一章节继续讲述HTML5文档头部head中的style和script两个元素的作用。

作者：东佛