HTML基本格式 - 第一个HTML网页

一、第一个HTML网页

编写网页的步骤：

创建一个新文件。
利用记事本打开。
编写HTML代码。
保存并且修改纯文本文档的扩展名为.html（文件命名一定要使用英文）。
利用浏览器打开编写好的文档.

使用HTML编写网页的基本结构（格式）：

html 复制代码

<!DOCTYPE html>
<html>
  <head>
     <title></title>
  </head>
  <body> 
  </body>
</html>

HTML基本格式中每个标签的含义：

通过观察，可以发现HTML基本结构中，所有标签都是成对出现的，这些成对出现的标签中，有一个带斜杠，有一个不带斜杠。

不带斜杠的标签是开始标签，带斜杠的标签是结束标签。

html标签：

作用：用于告诉浏览器这是一个网页（html文档）。
注意点：其他所有的标签都必须写在html标签里面。

head标签：

作用：用于给网站添加一些配置信息。
使用场景：可以给网站规定标题；指定标签页中的小图标；还可以添加网站SEO相关信息（指定网站关键字/指定网站的描述信息）；外挂一些外部的.css/.js文件；添加一些浏览器适配相关的内容。
注意点：一般情况下，写在head标签当中的内容，都不是用来显示给用户查看。

title标签：

作用：专门用于指定网站的标题，并且这个指定的标题将来还会作为用户保存网站的默认标题。
注意点：title标签必须写在head标签里面.

body标签：

作用：专门用来定义HTML文档中需要显示给用户查看的内容（文字/图片/音频/视频......）
注意点：
- 虽然有时候可能将内容写到了别的地方，在网页中也可以正常展示，但是最好不要这样写，最好将网页需要显示的内容写在body标签里面。
- 一对html标签中（一个<html>开始标签和一个</html>结束标签中）只能有一对body标签。

二、字符集问题

当使用浏览器打开html文件的时候，我们可能会发现网页展示的内容是乱码，往往可以通过修改浏览器设置当中的字符集选项，即可正确展示想要展示的内容。这个时候就需要我们在开发过程中给网页指定一个默认的字符集，使用meta标签。

为什么网页会出现乱码现象？

因为我们在编写网页的时候没有指定字符集。

如何解决乱码现象？

在head标签当中添加<meta charset = 'GBK' />，指定字符集

什么是字符集？

字符集就是字符的集合。由于不同字符集，对于同一个字符映射的编码是不同的，故在浏览器渲染的时候，使用相同的编码到不同的字符集查找字符的时候，就有可能出现乱码的情况。

而我们指定字符集，就是为了明确告诉浏览器，我们在开发过程中使用的是哪个字符集，便于浏览器更好的映射，找到正确的字符。我们常见的字符集：GBK、UTF-8

GBK（GB2312）和UTF-8的区别：

GBK（GB2312）里面存储的字符比较少，仅仅存储了汉字和一些常用的外文，体积比较小。
UTF-8存储了世界上所有的字符。体积比较大。
如果网站仅仅包含中文，推荐使用GB2312，因为体积更小，访问速度更快；如果网站除了中文以外，还包含了其他国家的语言，那么推荐使用UTF-8。

meta标签：

作用：就是指定当前网页的字符集。
注意点：
- 在html的文件中，指定的字符集必须和保存html文件时的字符集保持一致，否则还是会出现乱码。
- 仅仅指定字符集不一定能解决乱码问题，还需要保存文件的时候，文件保存时的字符集和指定的字符集保持一致，才能保证没有乱码问题。

三、标签的分类

分类：

单标签：只有开始标签，没有结束标签。
双标签 ：有开始标签和结束标签的。常见的双标签：html、body......

标签间的关系：

并列关系（兄弟/平级） ：比如head和body标签就是并列关系。
嵌套关系（父子/上下级） ：比如head和title就是父子关系。

四、DTD文档声明

什么是DTD文档声明？

由于HTML有很多个版本规范，每个版本的规范之间又有一定的差异，所以为了让浏览器能够正确的编译、解析、渲染网页，我们需要在HTML文件第一行告诉浏览器，我们当前是用哪一个版本的规范来编写的，浏览器只要知道了我们是使用哪一个版本的规范编写之后，他就能正确的编译、解析、渲染网页。

DTD文档声明的格式

每一个不同版本的规范，都有不同的DTD文档声明。因为HTML5的DTD文档声明是向下兼容的，所以使用HTML5的DTD文档声明可以兼容渲染XHTML和HTML的其他版本。

格式：<!DOCTYPE html>或者<!doctype html>

DTD文档声明的注意点：

任何一个标准的HTML网页，第一行一定是DTD文档声明，也就是说DTD文档声明必须写在HTML网页第一行。
DTD文档声明不区分大小写。
DTD文档声明不是一个标签。
虽然DTD文档声明的作用是告诉浏览器，我们这个网页使用哪个版本资源编写，以便于方便浏览器解析和渲染，但是浏览器并不会完全依赖DTD文档声明，浏览器有一套自己的机制。故DTD文档声明不写网页也可以正常运行，但是根据规范，我们仍需在第一行进行声明。

其他DTD文档声明规范：

HTML5之前有2大种规范, 每种规范中又有3小种规范

大规范	小规范
HTML	Strict (严格的)
HTML	Transitional(过度的,普通的,宽松的)
HTML	Frameset(带有框架的页面)
XHTML	Strict (严格的)
XHTML	Transitional(过度的,普通的,宽松的)
XHTML	Frameset(带有框架的页面)

HTML的DTD文档声明和XHTML的DTD文档声明有何区别?
- XHTML本身规定比如标签必须小写、必须严格闭合、必须使用引号引起属性等等, 而HTML会更加松散没有这么严格。
什么是小规范？
- Strict表示严格的, 这种模式里面的要求更为严格.这种严格主要体现在有一些用于修改文本样式的标签不能使用，例如font标签/u标签等
- Transitional表示普通的, 这种模式是没有一些别的要求，例如可以使用font标签、u标签等
- Frameset表示框架, 在框架的页面使用

常见的DTD文档声明：

html 复制代码

<!-- HTML4.01 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

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

<!-- HTML5 -->
<!DOCTYPE html>

五、HTML、XHTML和HTML5的区别

HTML语法非常宽松容错性强。
XHTML更为严格，他要求标签必须小写，必须严格闭合，标题中的属性必须使用引号。
HTML5是HTML的下一个版本所以除了非常宽松容错性强以外，还增加许多新的特性。

六、.htm和.html的区别

DOS系统只允许后缀名有三位，但是后来Windows支持后缀名有四位，本质并无其他区别。

参考链接：

W3School官方文档：www.w3school.com.cn