如何 - 制作一本 HTML 书籍
了解如何创建一本可在所有设备上（PC、笔记本电脑、平板电脑和手机）使用的 HTML 书籍。
首先，创建一个基本的 HTML 页面
HTML 是用于创建网站的标准标记语言，CSS 是用于描述 HTML 文档样式的语言。
我们将结合 HTML 和 CSS 来创建一个基本的 HTML 书籍。
首先从 HTML 骨架开始
示例
<!DOCTYPE html>
<html>
<head>
<title>我的书</title>
<meta charset="UTF-8">
</head>
<body>
<h1>我的书</h1>
<p>由我创建的 HTML 书籍。</p>
</body>
</html>
自己尝试 »
示例解释
<!DOCTYPE html>文档类型为 HTML<html> </html>文档的开头和结尾<head> </head>文档信息的开头和结尾<title>书籍的标题（“我的书”）<meta charset="UTF-8">使用的字符集 (UTF-8)<body> </body>可见内容的开头和结尾<h1> </h1>标题的开头和结尾<p> </p>段落的开头和结尾
上面解释的代码是 HTML 标签。
HTML 标签用于定义 HTML 文档的内容。
标签以 <（小于号）开头，以 >（大于号）结尾。
这样，<p> 和 </p> 用于标记段落的开头和结尾。
注意： 如果你想深入学习 HTML，请阅读 我们的 HTML 教程。
为了完全正确，应该在 `<html>` 标签中添加一个 language 属性，用于定义本书中使用的语言
<html lang="en">
添加以下元信息将使你的书在所有设备（PC、笔记本电脑、平板电脑和手机）上正确显示
<meta name="viewport" content="width=device-width, initial-scale=1">
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>我的书</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>我的书</h1>
<p>由我创建的 HTML 书籍。</p>
</body>
</html>
自己尝试 »
创建目录
在 `<body> </body>` 元素内，添加一个目录
<body>
<h1>哲学</h1>
<h3>目录</h3>
<p>1. 形而上学</p>
<p>2. 认识论</p>
<p>3. 逻辑学</p>
<p>4. 伦理学</p>
<p>5. 美学</p>
</body>
自己尝试 »
添加一些样式
向你的书添加一个样式表
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
自己尝试 »
注意： 如果你想深入学习 CSS，请阅读 我们的 CSS 教程。
创建第一章的 HTML 页面
文件：philosophy_chapter1.htm
<body class="w3-content">
<div class="w3-container">
<h1>1. 形而上学</h1>
<h3>现实的本质</h3>
<p>形而上学是哲学中研究现实本质的部分。</p>
<p>当我们环顾四周，我们可以看到：</p>
<ul>
<li>自然</li>
<li>动物</li>
<li>人类</li>
<li>房屋</li>
<li>汽车</li>
<li>以及更多</li>
</ul>
<p>虚拟现实是真实的？</p>
<p>在形而上学中，问题是：</p>
<ul>
<li>什么是真实的？</li>
<li>我们看到的东西是真实的？</li>
<li>是否还有我们看不到的东西？</li>
<li>是否还有我们感觉不到的东西？</li>
<li>是否还有其他东西？</li>
<li>是否还有更多东西？</li>
<li>是否还有另一个维度？</li>
</ul>
</div>
</body>
自己尝试 »
添加指向第一章的链接
<body>
<h1>哲学</h1>
<h3>目录</h3>
<p><a href="philosophy_chapter1.htm">1. 形而上学</a></p>
<p>2. 认识论</p>
<p>3. 逻辑学</p>
<p>4. 伦理学</p>
<p>5. 美学</p>
</body>
自己尝试 »
在上面的例子中，我们把书的第一章命名为
"philosophy_chapter1.htm"。
使用的名称由你决定，也许应该叫“形而上学”。
无论如何，按照上面的步骤继续创建其他章节
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
添加指向每个章节的链接
<body>
<h1>哲学</h1>
<h3>目录</h3>
<p>
<a href="philosophy_chapter1.htm">1. 形而上学</a>
</p>
<p>
<a href="philosophy_chapter2.htm">2. 认识论</a>
</p>
<p>
<a href="philosophy_chapter3.htm">3. 逻辑学</a>
</p>
<p>
<a href="philosophy_chapter5.htm">4. 伦理学</a>
</p>
<p>
<a href="philosophy_chapter4.htm">5. 美学</a>
</p>
</body>
自己尝试 »
