跳到主要内容

第一节 初认 HTML

一、HTML 简介​

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的基础语言。它通过各种“标签”来定义网页的结构和内容，使浏览器能够正确解析并按预期显示网页。目前我们广泛使用的是 HTML5 标准，它引入了许多新的语义化标签和功能，极大地增强了网页的可读性、结构性和多媒体支持能力。

二、超文本与标记语言的概念​

（一）超文本​

超文本（HyperText）打破了传统文本线性的阅读顺序。它不仅可以包含普通的纯文字，还能嵌入图片、音频、视频、动画等多媒体内容。更重要的是，它可以通过“超级链接”从一个文件瞬间跳转到全球互联网上的另一个文件，实现了跨越物理空间的网状信息连接。

（二）标记语言​

HTML 不是一种需要复杂逻辑的“编程语言”（如 C#、Java），而是一种描述性的“标记语言”（Markup Language）。

  • 标记语言由一系列预先定义好的标签组成，每个标签都有特定的含义和作用。例如，<a> 表示这是一个超链接，<img> 表示这里有一张图片，<h1> 表示这是一级标题。
  • 标记语言不需要经过软件的“编译”过程，HTML 文件写好后，可以直接被浏览器读取、解析并渲染执行。

三、HTML 的专有名词​

在深入学习前，我们需要统一以下行业内常用的专业术语：

  • 网页：由各种 HTML 标记和多媒体资源组合而成的单个页面文件（通常以 .html 结尾）。
  • 主页（首页）：网站的起始页面或核心导航页面，通常命名为 index.html。
  • 标记（标签）：HTML 的基本单位，如 <p> 称为开始标记，</p> 称为结束标记。
  • 元素：包含开始标记、结束标记以及中间内容的整体。例如 <p>这是一段文本</p> 构成了一个完整的段落元素。
  • 属性：写在开始标签内部，用于给标签添加辅助控制信息。例如 <img src="pic.jpg"> 中的 src 就是属性。
  • HTTP：超文本传输协议，规定了客户端（浏览器）和服务端交互网页数据的标准格式。
  • HTTPS：在 HTTP 基础上增加了 SSL/TLS 加密层的安全超文本传输协议。
  • SMTP：简单邮件传输协议，用于发送电子邮件。
  • FTP：文件传输协议，常用于将本地做好的网页文件上传到远程服务器。

四、HTML 结构详解​

（一）HTML 标签分类​

  1. 双边标签（双标签） 成对出现，有开始和结束，内容写在中间。如 <div> 和 </div>。
  2. 单边标签 单独出现，通常用于不需要包含文本内容的元素。如换行标签 <br />、水平线标签 <hr /> 和图片标签 <img>。

（二）HTML 骨架标签与基础配置​

每一个标准的 HTML 网页都必须包含以下四大基础骨架与核心配置：

  • <!DOCTYPE html>：文档声明头。它告诉浏览器请使用最新的 HTML5 标准来解析这个网页。
  • <html>：页面中最大的包裹标签，被称为根标签。通常我们会为其添加 lang 属性（如 lang="zh-Hans"）来指定页面的主要语言，这有助于搜索引擎和屏幕阅读器正确处理网页内容。
  • <head>：文档的头部，包含网页的元数据（配置信息），这部分内容通常不会直接显示在网页的正文中。其内部常用的配置包括：
    • <meta charset="UTF-8">：设置网页字符集，防止文字乱码。
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">：移动端视口设置，是响应式开发的基础。
    • <title>：设置网页在浏览器顶部标签卡片上的标题。
  • <body>：文档的主体，包含用户在网页上能看到的所有可见内容（文字、图片、视频等）。

（三）文档声明头​

任何标准的 HTML 页面第一行必须是文档声明头（DTD）。在早期的 HTML 版本中，这行声明非常冗长复杂。而 HTML5 将其极大地简化了，这行代码的作用是告诉浏览器：“请使用最新的 HTML5 标准来解析这个网页”：

<!DOCTYPE html>

（四）页面语言设置​

在 <html> 标签中，我们可以通过 lang 属性指定该页面的主要语言类型，这有助于搜索引擎和屏幕阅读器正确处理网页内容：

<html lang="zh-Hans">

常见的语言类型有：

  • en：英语
  • zh-CN：中文（中国大陆）
  • zh-Hans：简体中文

（五）<head> 标签内部配置​

<head> 标签是网页的“控制中心”，内部包含多个重要配置项：

  • <meta charset="UTF-8">：设置网页的字符集为 UTF-8，防止文字出现乱码。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：移动端视口设置，确保网页宽度等于设备屏幕宽度，是响应式开发的基础。
  • <title>：设置网页在浏览器标签页上的标题。
  • <link>：定义文档与外部资源的关系，最常用于引入外部 CSS 样式表。
  • <base>：规定页面上所有相对链接的默认基础地址。

五、计算机编码介绍​

计算机底层存储的是二进制数据（0和1）。 为了能在屏幕上显示不同国家、不同语言的文字，我们需要一套翻译规则，这就是“编码方式”。

  1. ASCII 码：用 1 个字节（8位二进制）表示一个字符，共 256 个字符，主要用于英文字母、数字和基础符号。
  2. ANSI 编码：不同国家标准不同，在中国通常指 GB2312 等，用 2 个字节表示一个汉字。
  3. GBK 编码：对 GB2312 进行了扩展，支持更多生僻汉字和繁体字。
  4. Unicode 编码：万国码，用 4 个字节表示一个字符，试图统一全球所有语言，但由于所有英文字母也占用 4 个字节，导致文件体积变大，存储效率较低。
  5. UTF-8 编码：Unicode 的一种升级版实现方式。 它非常聪明，会根据字符的不同自动调整编码长度（例如：英文字母用 1 个字节，常规汉字用 3 个字节）。 它完美兼顾了全球语言的兼容性和文件大小的效率。

【开发建议】：在现代 Web 开发中，无论是 HTML 文件本身的保存格式，还是 <meta charset="UTF-8"> 的声明，都强烈建议统一使用 UTF-8 编码，以彻底杜绝网页乱码问题。

六、HTML 的代码规范​

为了保证代码的健壮性和团队协作的便利性，编写 HTML 时必须遵守以下规范：

  1. 大小写敏感性：虽然 HTML 语法并不严格区分大小写，但在行业规范中，强烈建议所有的标签名和属性名统一使用小写字母。
  2. 正确的标签嵌套：所有标记元素必须按照层级正确嵌套，绝对不能交叉嵌套。 例如 <b><i>加粗倾斜文字</i></b> 是正确的，而 <b><i>交叉嵌套文字</b></i> 是错误的。
  3. 严格的标签闭合：所有的标签都必须正确闭合。 双标签要有结束标签（如 <span></span>），单标签建议在末尾加上斜杠以示严谨（如 <br />，虽然 HTML5 允许省略斜杠，但保留是个好习惯）。
  4. 属性值加双引号：所有的属性值必须用英文半角的双引号包裹起来。 例如 <font color="red"></font>。
  5. 属性必须有值：在严谨的 XHTML 标准中，所有属性必须有明确的赋值。 即使是布尔属性，也应写成 <hr noshade="noshade"> 的形式（注：HTML5 标准对此有所放宽，但了解此规范有助于阅读老旧项目代码）。