HTML 完整开发教程 第4章

HTML 基础结构与第一个网页

在前面的章节中，我们了解了：

  • Web 的工作原理

  • HTML 的发展历史

  • HTML 的开发环境

现在，我们终于要开始真正编写 HTML 代码了。

本章将学习：

  • HTML 文档的基本结构

  • 常见 HTML 标签

  • 如何编写第一个网页

  • HTML 标签的基本语法

  • HTML 注释与代码规范

学习完本章，你将能够：

  • 编写完整的 HTML 页面

  • 理解 HTML 文档结构

  • 使用浏览器查看网页

4.1 什么是 HTML 文档

HTML 文档就是一个 以 .html 或 .htm 结尾的文本文件。

例如：

index.html
about.html
contact.html

HTML 文档由 标签（Tag） 组成。

例如：

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

这里包含：

部分

含义

<p>

开始标签

</p>

结束标签

中间内容

网页内容

浏览器会读取 HTML 标签，并将其 渲染为网页页面。

4.2 HTML 文档基本结构

一个标准 HTML 页面通常包含以下结构：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>

<body>

<h1>Hello World</h1>
<p>这是我的第一个 HTML 页面</p>

</body>
</html>

HTML 页面主要由 三个部分组成：

部分

作用

DOCTYPE

声明 HTML 版本

head

网页信息

body

网页内容

4.3 DOCTYPE 声明

HTML 文档的第一行通常是：

<!DOCTYPE html>

它的作用是：

告诉浏览器：

这个页面使用 HTML5 标准。

在 HTML5 中，DOCTYPE 写法非常简单。

旧版本 HTML 的 DOCTYPE 非常复杂，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

因此 HTML5 大大简化了语法。

4.4 HTML 标签

HTML 页面使用 标签（Tag） 来定义内容。

标签通常成对出现：

<h1>标题</h1>

结构：

<标签名>内容</标签名>

示例：

<h1>一级标题</h1>
<p>段落</p>
<a>链接</a>

4.5 HTML 标签层级

HTML 是一种 嵌套结构语言。

例如：

<html>
  <body>
    <h1>标题</h1>
    <p>段落</p>
  </body>
</html>

结构关系：

html
 └── body
      ├── h1
      └── p

这种结构称为：

DOM（文档对象模型）

4.6 head 标签

<head> 标签用于存放网页的 元信息。

例如：

<head>
<meta charset="UTF-8">
<title>网站标题</title>
</head>

常见内容包括：

标签

作用

title

网页标题

meta

网页信息

link

加载 CSS

script

加载 JavaScript

浏览器不会直接显示这些内容。

4.7 title 标签

title 定义浏览器标签页标题。

例如：

<title>我的博客</title>

浏览器显示：

我的博客 - Chrome

同时，title 也非常重要：

  • SEO 搜索引擎

  • 浏览器标签

  • 社交分享

4.8 meta 标签

meta 用于定义网页元数据。

最常见的 meta：

<meta charset="UTF-8">

作用：

指定网页编码。

推荐使用：

UTF-8

因为它支持：

  • 中文

  • 英文

  • Emoji

  • 全球语言

4.9 body 标签

body 是网页 可见内容区域。

例如：

<body>

<h1>欢迎来到我的网站</h1>

<p>这是一个 HTML 页面</p>

</body>

浏览器最终显示的内容都来自 body。

4.10 编写第一个网页

现在我们来创建一个完整网页。

第一步：创建文件

创建文件：

index.html

第二步：写入代码

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>我的第一个网站</title>
</head>

<body>

<h1>Hello HTML</h1>

<p>
这是我创建的第一个网页。
</p>

</body>

</html>

第三步：打开网页

方法：

双击 index.html

或

右键 → 浏览器打开

浏览器会显示：

Hello HTML
这是我创建的第一个网页

4.11 HTML 注释

HTML 注释不会显示在网页中。

语法：

<!-- 注释内容 -->

示例：

<!-- 网站标题 -->
<h1>我的博客</h1>

用途：

  • 解释代码

  • 临时禁用代码

  • 团队开发说明

4.12 HTML 代码规范

良好的代码规范可以提高可读性。

推荐规则：

1 缩进

<body>
    <h1>标题</h1>
    <p>内容</p>
</body>

2 标签小写

推荐：

<p>内容</p>

避免：

<P>内容</P>

3 结构清晰

建议每个标签独占一行。

4.13 HTML 文件命名

网页文件通常命名为：

index.html

原因：

当访问：

example.com

服务器默认加载：

example.com/index.html

常见页面：

index.html
about.html
contact.html
blog.html

本章小结

在本章中，我们学习了：

  • HTML 文档结构

  • DOCTYPE 声明

  • HTML 标签

  • head 与 body

  • meta 与 title

  • 编写第一个网页

  • HTML 注释

  • HTML 代码规范

下一章预告

在下一章，我们将学习：HTML 常用文本标签

包括：

  • 标题标签

  • 段落标签

  • 换行标签

  • 强调标签

  • 引用标签

并开始真正构建网页内容。