HTML学习笔记(一) 基本介绍

1、HTML 简介

HTML 不同于一般的程序设计语言，它是一种 标记语言，主要用于 定义文档规则和描述文档结构

标准通用标记语言（Standard Generalized Markup Language，SGML）是最基础的标记语言

其它标记语言都是从 SGML 的基础上发展而来的，并在不同的领域对 SGML 进行拓展

其中，超文本标记语言（Hyper Text Markup Language，HTML）就是专门用于编写 Web 文档的语言

2、HTML 文档结构

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <p>Hello</p>
        <br />
        <p style="color: red">Stranger</p>
    </body>
</html>

上面的代码是一个十分简单的例子（创建一个 .html 文件，输入以上代码，在浏览器打开即可看到效果）

但它描述了最基本的 Web 文档结构，我们只需知道该文档由两部分组成：文档描述 和 文档内容

（1）文档类型定义

<!DOCTYPE html>

上面的语句称为 DTD 声明（Document Type Definition），位于 HTML 文档的第一行，主要用于 定义文档规范

对于一般的 XML 文件而言，因为可以使用自定义的标签，所以没有什么标准的规范可言，因此可以不定义 DTD

但是，对于已经具备标准语法规范的 HTML 和 XHTML 来说，就必须要声明 DTD，声明的格式 如下：

<!DOCTYPE element-name DTD-type DTD-name DTD-url>

element-name：DTD 根元素名称
DTD-type：若为 PUBLIC，表示 DTD 是标准公用的，若为 SYSTEM，表示 DTD 是私人定制的
DTD-name：DTD 文件名称
DTD-url：DTD 文件地址

以下是几个 常见的 DTD 声明：

HTML5

<!DOCTYPE html>

HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素，不允许框架集

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

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素，但不允许框架集

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

HTML 4.01 Frameset

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素，并且允许框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素，不允许框架集

且必须以格式正确的 XML 来编写标记

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

XHTML 1.0 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素，但不允许框架集

且必须以格式正确的 XML 来编写标记

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

XHTML 1.0 Frameset

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素，并且允许框架集

且必须以格式正确的 XML 来编写标记

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

（2）文档内容

<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <p>Hello</p>
        <br />
        <p style="color: red">Stranger</p>
    </body>
</html>

上面的代码描述的是 HTML 文档的主体内容

可以看到，代码中有许多由尖括号包围起来的关键词，这些关键词我们称之为 HTML 标签

每个 HTML 标签都有自己独特的语义，例如 <p> 表示段落，<br> 表示换行，并根据语义的不同渲染不同的效果

HTML 标签一般成对出现，其中第一个标签是开始标签，第二个标签是结束标签，但也有一个标签单独出现的情况

从开始标签到结束标签的所有代码称为 HTML 元素

HTML 元素从开始标签起始，以结束标签终止，两个标签之间的内容称为 元素内容，例如：

<p>Hello</p>

对于只有一个标签的情况，要在开始标签中进行关闭，例如：

<br />

我们还可以通过 元素属性 为 HTML 元素提供附加信息，属性在开始标签中指定，并以键值对的形式出现

根据标准，建议属性与属性值使用小写字母规定，并且属性值始终使用引号包围，例如：

<p style="color: red">Stranger</p>

【阅读更多 HTML 系列文章，请看 HTML学习笔记】