初识HTML（超文本标识语言）

一条晒干的咸鱼

发布于 2024-11-19 19:31:51

18800

代码可运行

文章被收录于专栏：learnlearn

运行总次数：0

代码可运行

HTML（超文本标记语言）是构建网页的基础语言。每个网站都是由 HTML 代码构成的，并且它能够决定网页的结构和内容。在深入学习其他前端技能（如 CSS 和 JavaScript）之前，掌握 HTML 是至关重要的。

一、什么是 HTML？

HTML，全称为 HyperText Markup Language，即超文本标记语言，是用于创建网页和用户界面的标准标记语言。HTML 通过使用标记（即标签）来定义网页的内容和结构。一个典型的 HTML 文档包括元素、属性和内容。

HTML 结构

在学习 HTML 的基础知识之前，让我们先看一下一个简单的 HTML 文档结构：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学习 HTML 技术</title>
</head>
<body>
<h1>欢迎来到 HTML 学习之旅</h1>
<p>这是一段介绍 HTML 的简单示例。</p>
</body>
</html>

在这个示例中，我们可以看到以下几个部分：

<!DOCTYPE html>: 声明文档类型，表示使用 HTML5
<html>: HTML 文档的根元素
<head>: 包含文档的元数据，如标题和字符集
<body>: 包含网页的主要内容
<title>: 元素描述了文档的标题
<h1>: 元素定义一个大标题
<p>: 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

二、HTML 标签

HTML 标签是网页内容的基石，用于构建和定义页面的结构和内容。每个标签都有其特定的功能和用途，通常以尖括号括起来，来表明其开始和结束。

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

三、HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

四、Web 浏览器

Web浏览器，如谷歌浏览器、Internet Explorer、Firefox和Safari等，负责解析HTML文件并将其呈现为用户可浏览和交互的网页形式。

浏览器不会直接显示HTML标签，而是根据标签的内容和结构来决定如何最佳呈现页面内容给用户。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学习 HTML 技术</title>
</head>
<body>
<h1>这是我的第一个网页</h1>
<p>我的第一个段落</p>
</body>
</html>

五、HTML结构框架

下面是一个可视化的HTML结构框架：

注意：只有 <body> 区域 (白色部分) 才会在浏览器中显示。

六、HTML版本差异

HTML（HyperText Markup Language）是用于创建网页的标准语言，随着时间的推移，它经历了多个版本和更新。以下是一些主要HTML版本之间的差异对比：

HTML 2.0:

发布于1995年11月。
最早被广泛采用的HTML版本之一。
引入了基本的文本和链接标记，如标题、段落、列表和链接等。

HTML 3.2:

发布于1997年1月。
引入了表格、表单和图像等新元素和属性。
对标准化HTML的发展起到了重要作用，是早期互联网内容的基础。

HTML 4.01:

分为严格（Strict）、过渡（Transitional）和框架集（Frameset）三种DTD（文档类型定义）。
引入了样式表（CSS）的支持，使得页面布局和设计更加灵活。
加强了表单的功能和多媒体支持，如音频和视频元素。

XHTML 1.0:

发布于2000年1月。
XHTML是HTML的XML扩展，更加严格和模块化。
引入了XML的语法要求，包括强制使用小写标签和关闭所有标签。

HTML5:

开始制定于2004年，最终标准发布于2014年。
引入了许多新特性，如语义化标签（如<article>、<header>、<footer>）、多媒体元素（<audio>、<video>）、canvas绘图和本地存储（localStorage）等。
强化了对Web应用程序的支持，包括离线应用和Web Workers等API。

七、<!DOCTYPE> 声明

<!DOCTYPE> 声明是HTML文档中的一个重要组成部分，它位于文档的开头，用于告知Web浏览器关于HTML版本和文档类型的信息。<!DOCTYPE> 声明并不是HTML标签，而是一种指令，它的作用是确保浏览器以标准模式来呈现页面，以防止浏览器使用怪异模式（quirks mode）来解释页面。以下是一些常见的<!DOCTYPE> 声明示例：

HTML5：

<!DOCTYPE html>

这是HTML5的<!DOCTYPE>声明，它非常简洁，并且告知浏览器使用HTML5标准解析页面。

HTML 4.01 Strict：

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

这是HTML 4.01 Strict DTD声明，指定了使用HTML 4.01严格规范解析页面。

XHTML 1.0 Transitional：

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

这是XHTML 1.0 Transitional的DTD声明，指定了使用XHTML 1.0过渡规范解析页面。

每个<!DOCTYPE> 声明都有一个对应的DTD（文档类型定义），它定义了允许在文档中使用的元素和属性，以及它们的结构规则。正确的<!DOCTYPE> 声明有助于确保浏览器正确解释和呈现HTML文档。

doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。

在HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。

HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。HTML5 不是基于 SGML，因此不要求引用 DTD。

八、中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学习 HTML 技术</title>
</head>
<body>
<h1>这是我的第一个网页</h1>
<p>我的第一个段落</p>
</body>
</html>

字符编码声明：

在HTML文档的 <head> 部分添加字符编码声明是必要的。常见的字符编码是UTF-8，它支持几乎所有的字符集和符号。