1.1 网页与 HTML 文档结构

你每天都在看网页：新闻、视频、购物、聊天。它们看起来千差万别，但底层都由同样的三种技术搭起来：

HTML 负责内容和结构——这是网页的“骨架”。

CSS 负责外观和样式——这是网页的“皮肤和衣服”。

JavaScript 负责交互和行为——这是让网页“动起来”的肌肉。

本章先学 HTML。它是最容易上手的一种：你只要把内容用一对对“标签”包起来，浏览器就知道该怎么显示。

什么是标签

HTML 用标签（tag）来标记内容。大多数标签成对出现，一个开标签、一个闭标签，中间夹着内容：

html

<h1>这是一个大标题</h1>
<p>这是一个段落。</p>

<h1> 是开标签，</h1> 是闭标签（多了一个斜杠 /），中间的文字就是这个标题的内容。浏览器看到 <h1> 就知道：“哦，这是一个一级标题，要显示得又大又粗。”

一个完整网页的骨架

每个 HTML 页面都有一套固定的“外壳”，记住这个模板你就能开始写网页了：

html

<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <h1>看得见的大标题</h1>
    <p>看得见的正文。</p>
  </body>
</html>

逐行理解它：

<!DOCTYPE html>：告诉浏览器“这是一个现代 HTML 文档”。

<html>：整个页面的最外层容器。

<head>：放关于页面的信息，用户在正文里看不到它，比如页面标题、字符编码、引入的 CSS。

<title>：页面的名字，显示在浏览器标签页上。

<body>：放页面上看得见的所有内容——标题、段落、图片、按钮，都在这里。

注意

初学者最容易搞混的是 <head> 和 <body>。一句话区分：<head> 是幕后信息，<body> 是台前内容。 你在网页上看到的东西，几乎都在 <body> 里。

下面的实验让你修改 <title>、<h1> 和 <p> 的内容，左边的代码和右边的“浏览器”会同步变化。特别注意：改 <title> 只影响标签页，不影响正文。

正在加载交互实验...

正在加载概念检查...

怎么动手试

你不需要任何复杂软件：

1. 新建一个文本文件，把上面的模板抄进去。

2. 存成 index.html（注意后缀是 .html）。

3. 用浏览器打开这个文件，你的第一个网页就出现了。

下面的练习就让你亲手写出第一个页面。

正在加载本节练习...

1.1 网页与 HTML 文档结构

你每天都在看网页：新闻、视频、购物、聊天。它们看起来千差万别，但底层都由同样的三种技术搭起来：

HTML 负责内容和结构——这是网页的“骨架”。

CSS 负责外观和样式——这是网页的“皮肤和衣服”。

JavaScript 负责交互和行为——这是让网页“动起来”的肌肉。

本章先学 HTML。它是最容易上手的一种：你只要把内容用一对对“标签”包起来，浏览器就知道该怎么显示。

什么是标签

HTML 用标签（tag）来标记内容。大多数标签成对出现，一个开标签、一个闭标签，中间夹着内容：

html

<h1>这是一个大标题</h1>
<p>这是一个段落。</p>

一个完整网页的骨架

每个 HTML 页面都有一套固定的“外壳”，记住这个模板你就能开始写网页了：

html

<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <h1>看得见的大标题</h1>
    <p>看得见的正文。</p>
  </body>
</html>

逐行理解它：

<!DOCTYPE html>：告诉浏览器“这是一个现代 HTML 文档”。

<html>：整个页面的最外层容器。

<head>：放关于页面的信息，用户在正文里看不到它，比如页面标题、字符编码、引入的 CSS。

<title>：页面的名字，显示在浏览器标签页上。

<body>：放页面上看得见的所有内容——标题、段落、图片、按钮，都在这里。

注意

初学者最容易搞混的是 <head> 和 <body>。一句话区分：<head> 是幕后信息，<body> 是台前内容。 你在网页上看到的东西，几乎都在 <body> 里。

下面的实验让你修改 <title>、<h1> 和 <p> 的内容，左边的代码和右边的“浏览器”会同步变化。特别注意：改 <title> 只影响标签页，不影响正文。

正在加载交互实验...

正在加载概念检查...

怎么动手试

你不需要任何复杂软件：

1. 新建一个文本文件，把上面的模板抄进去。

2. 存成 index.html（注意后缀是 .html）。

3. 用浏览器打开这个文件，你的第一个网页就出现了。

下面的练习就让你亲手写出第一个页面。

正在加载本节练习...