本文主要针对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）
文章来源: 深入浅出HTML的“头”（head）