HTML 文档结构

完整的 HTML 文档，主要包括三个部分：文档声明、文档头部和文档主体，它们构成了 HTML 的骨架结构。

在 Sublime 编辑器中，输入 !（ 英文叹号 ），然后按 Tab 键（ 自动补全 ），可直接生成一个基本的 HTML 结构。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body></body>
</html>

「 SEO 」在实际中，文档头部常常需要承载一些常用的功能，所以，HTML 结构较复杂。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标题</title>
        <link rel="shortcut icon" href="favicon.ico"/>
        <meta name="keywords" content="关键字"/>
        <meta name="description" content="页面描述"/>
        <meta name="viewport" content="width=device-width"/>
    </head>
    <body></body>
</html>

文档声明

首行、顶格、大小写不敏感。

严格来说，它不是 HTML 标签的一部分，而是一条声明语句，作用是告诉浏览器用哪个标准来解析这个文档。

如果不写，浏览器可能就会用兼容模式等规定符合 HTML 标准的模式（ 渲染模式 ）来解析这份文档，造成显示错误。

HTML5 ，使用 <!DOCTYPE html>，之前的标准不再使用。

由于 HTML5 的文档类型兼容很好（ 向下兼容原则 ），所以，可以放心的使用 HTML5 的文档（ 类型 ）声明。

HTML5 之前，如 HTML4.01，文档声明有多种类型：

  • 严格（ strict.dtd ）
  • 松散（ loose.dtd ）
  • 框架（ frameset.dtd ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">        
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

文档头部

文档头部，描述了文档的一些基本属性和信息。

在 HTML 文档的头部声明字符编码 <meta charset="uft-8">，可以解决浏览器中出现中文乱码的现象；

头部内容，除了 title 和 favicon 都不会作为真正的内容展现给用户

根据 HTML 标准，仅有几个标签（ 元素 ）在其头部是合法的：

文档主体

即，body 标签及其里面的内容，是用户真正可以在页面上看到的内容。

body，页面容器标签，每个 HTML 文档，只允许存在一个 body 元素。

// 默认样式
   Chrome/Firefox/Safari/IE8+
     margin:8px;
   IE7-
     magin:15px 10px;