深入浅出HTML的“头”（head）

本文主要针对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）

猜你喜欢