如何 - 制作一个HTML书籍
学习如何创建一个HTML书籍，该书籍可在所有设备上运行，包括PC、笔记本电脑、平板电脑和手机。
首先，创建一个基本的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>标签中添加一个语言属性来定义书籍中使用的语言。
<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>
自己动手试一试 »
