第二章 HTML结构

一、HTML标准结构

DTD(Document Type Definition)规定了标记语言的规则，使得浏览器可以正确的呈现内容。

HTML结构是一种嵌套结构，如同洋葱，从外到里。Web页面结构，即DOM（Document Object Model）树结构。

现在主流的编辑器（IDE）都会带有代码提示功能，如WebStorm、VsCode、Sublime、Atom、Hbuilder等。敲下!回车，或敲HTML:5(HTML)回车，IDE将自动补全HTML结构。

<!DOCUTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Web Title</title>
</head>

<body>
</body>

</html>

#二、文档声明头事实上，<!DOCUTYPE html>并不是HTML标签，它只是指明了该页面是用个那个HTML版本进行编译。

随着HTML版本的提高，HTML的文档声明头也在不断简化。

2.1 HTML4版本文档声明头

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.2 HTML5版本文档声明头

发展到HTML5，w3c在定义文档声明头时，更加简洁。

<!DOCUTYPE html>

#三、HTML标签 > html语言不区分大小写，但我们通常都是采用小写字母来书写标签，如今已经成为了潜在规范（标准）。

3.1 html标签

html标签是一对双闭合标签，即<html></html>，是一个页面最外层的标签，表示文档的开始。

其内包含两个部分：头部声明（<head>）和主体内容部分（<body>）。

3.2 head标签

head标签是一对双闭合标签，即<head></head>

从语义不难看出，如果把网页比作一个人，则head标签便是网页的头部信息部分，是网页的指挥中心，用于标识网页中的基本信息（元信息）。

3.3 body标签

body标签是一对双闭合标签，即<body></body>

把一个网页比作一个人的话，那么body标签就是这个人的身体。那么body标签包含页面中所有的可见元素，比如网页中的文本的展示内容，漂亮meinv ，动听的音乐，炫酷的电影等都属于body所管。

四、总结

4.1 快速生成HTML文档

快速生成HTML5文档：html(html:5) + Tab

快速生成HTML4文档：html:xt + Tab

4.2 常用快捷键（IDEA或配置IDEA映射）

快速注释（取消注释）代码：Ctrl + /

重做（快速删除当前行）：Ctrl + Y

快速复制并粘贴代码块：Ctrl + D

快速缩进（取消缩进）：Tab(Shift + Tab)

4.3 本节内容

html 网页的最外层的标签，也是网页的根标签。

head 网页的头部标签，网页的声明，看不见摸不着的内容，用于网页的基础信息(元信息)

body 网页的身体标签，网页中所有能看得见摸得着的内容，都在body中声明。

那么，这个结构是我们网页的最基本的配置，如果把网页比作盖一座房子，那么这些相关的配置，就是开始打地基，后续我们慢慢学习head和body中的相关标签，通过这些内容，将我们最“美丽的房子”(网页)搭建好。