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

163 阅读3分钟

这篇文章将会介绍 HTML 的基本概念,帮助大家快速掌握 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 文件地址

目前使用最多的就是 HTML5 的 DTD 声明,此外还有一些比较常见的 DTD 声明,列举如下:

HTML5

<!DOCTYPE html>

HTML 4.01 Strict 包含所有 HTML 元素和属性,不包括展示性的和弃用的元素,且不允许框架集

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

HTML 4.01 Transitional 包含所有 HTML 元素和属性,且包括展示性的和弃用的元素,但不允许框架集

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

HTML 4.01 Frameset 包含所有 HTML 元素和属性,且包括展示性的和弃用的元素,并且允许框架集

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

XHTML 1.0 Strict 包含所有 HTML 元素和属性,不包括展示性的和弃用的元素,且不允许框架集

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

XHTML 1.0 Transitional 包含所有 HTML 元素和属性,且包括展示性的和弃用的元素,但不允许框架集

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

XHTML 1.0 Frameset 包含所有 HTML 元素和属性,且包括展示性的和弃用的元素,并且允许框架集

<!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 元素,例如:

<p>Hello</p>

虽说 HTML 标签一般成对出现,但也有一个标签单独出现的情况,此时需要在该标签中进行关闭,例如:

<br />

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

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

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