HTML 文档结构

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

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

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

1
2
3
4
5
6
7
8

<!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>

1
2
3
4
5
6
7
8
9
10
11
12

<!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">

1
2
3

<!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 标准，仅有几个标签（元素）在其头部是合法的：

head

title

meta

~~base~~

link、style

script、noscript

文档主体

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

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

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

1
2
3
4
5

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