本文主要针对HTML的head部分进行详解，在讲它之前，让我们先对HTML文件有一个初步的认识。
HTML可以看成一棵倒立的“树”。何谓“树”？树是数据树的图形表示形式，以父子层次结构来组织对象。
这颗“树”由很多的标签组成，每个成对的标签或者独立的标签都是树的节点。如图所示，head节点是HTML节点的子节点，同时它也是meta节点和title节点的父节点。在HTML中，以标签的嵌套形式表现节点的父子关系。
在说head之前，还要了解<!DOCTYPE>标签。
- <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
- 在 HTML 4 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：<!DOCTYPE html>。
- HTML 4.01 基于 SGML的，需要引进DTD，总共有三种DTD类型：
| 类型 | 引入声明 |
|---|---|
| Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| Transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| Frameset | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
head标签
head标签有meta,base,link,script,style,title等子标签。
代码演示：
<!DOCTYPE html><html lang="en"><head> ???<meta http-equiv="content-type" content="text/html;charset=utf-8"><!--指定字符集为utf-8 ?--> ???<meta name="author" content="orange"><!--指定作者为orange ?--> ???<meta name="revised" content="orange,11/13/2018"><!--表示最后一次修改的时间 ?--> ???<meta name="description" content="HTML文档head标签的说明"><!--网页功能的描述 ?--> ???<meta name="keywords" content="html,head,keys"><!--网页的关键词，提供给搜索引擎搜索 ?--> ???<meta name="generator" content="Sublime Text3"><!--编辑网页的工具 ?--> ???<base href="" target="_blank"><!--表示在新的窗口打开链接 ?--> ???<link rel="stylesheet" type="text/css" href="1.css"><!--引入外部css文件 ?--> ???<style type="text/css">/*css代码*/ ???????#span_1{ ???????????background: orange ???????} ???</style> ???<script type="text/javascript">/*JavaScript代码*/ ???????alert(‘hello!我是JavaScript代码！‘) ???</script> ???<title>第一个HTML网页</title><!--网页标题 ?--></head><body> ???<span id="span_1">hello world</span> ???<a href="https://www.baidu.com/">点击我另开一个页面跳转到百度网</a></body></html>注释
HTML注释：<!-- -->
CSS和JavaScript脚本代码注释：//或/ /
新手上路，如有错误麻烦大家告诉我，谢谢！本次的学习就到此结束啦！感兴趣的读者或者想和我聊聊的请私信我，或者关注公众号：程序员吃橘子。
深入浅出HTML的“头”（head）
原文地址：http://blog.51cto.com/14065757/2316565