码农教程 - 一技在手,衣食无忧! tools

目录

如何制作一本 HTML 书

❮ 上一节 下一节 ❯

了解如何创建适用于所有设备（PC、笔记本电脑、平板电脑和手机）的 HTML 图书。

首先，创建一个基本的 HTML 页面

HTML 是创建网站的标准标记语言，CSS 是描述 HTML 文档样式的语言。

我们将结合 HTML 和 CSS 创建一本基本的 HTML 书。

首先从 HTML 框架开始：

示例

<!DOCTYPE html>
<html>

<head>
<title>My Book</title>
<meta charset="UTF-8">
</head>

<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>

</html>
亲自试一试 »

示例解释

  • <!DOCTYPE html>文档类型为 HTML
  • <html> </html>文档的开头和结尾
  • <head> </head>文档信息的开头和结尾
  • <title>书名 ("My Book")
  • <meta charset="UTF-8">使用的字符集（UTF-8）
  • <body> </body>可见内容的开头和结尾
  • <h1> </h1>标题的开头和结尾
  • <p> </p>段落的开头和结尾

上面解释的代码是 HTML 标签。

HTML 标签用于定义 HTML 文档的内容。

标签以 a 开头<（小于号）并以 a 结尾>（大于号）。

这边走<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>My Book</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>

</html>
亲自试一试 »

创建目录

在 - 的里面<body> </body>元素，添加目录：

<body>

<h1>Philosopy</h1>
<h3>Table of Contents</h3>

<p>1. Metaphysics</p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>

</body>
亲自试一试 »

添加一些样式

将样式表添加到您的书中：

<link rel="stylesheet" href="https://www.91xjr.com/w3css/4/w3.css">
亲自试一试 »

笔记：如果你想详细学习CSS，请阅读我们的 CSS 教程。

为第 1 章创建 HTML 页面

文件：Philosophy_chapter1.htm

<body class="w3-content">
<div class="w3-container">

<h1>1. Metaphysics</h1>

<h3>The nature of reality.</h3>

<p>Metaphysics is the part of philosophy that studies the nature of reality.</p>

<p>When we look around, we can see:</p>
<ul>
<li>Nature</li>
<li>Animals</li>
<li>People</li>
<li>Houses</li>
<li>Cars</li>
<li>and much more</li>
</ul>

<p>Is this Virtual Reality real?</p>

<p>In Metaphysics, the questions is:</p>
<ul>
<li>What is real?</li>
<li>Is what we see real?</li>
<li>Is there more than we see?</li>
<li>Is there more than we sence?</li>
<li>Is there something else?</li>
<li>Is there something more?</li>
<li>Is there another dimension?</li>
</ul>
</div>

</body>
亲自试一试 »

添加第 1 章的链接

<body>

<h1>Philosopy</h1>
<h3>Table of Contents</h3>

<p><a href="philosophy_chapter1.htm">1. Metaphysics</a></p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>

</body>
亲自试一试 »

在上面的例子中，我们将本书的第一章命名为：

"Philosophy_chapter1.htm".

使用的名称由您决定。也许它应该被称为"Metaphysics"。

无论如何，继续如上所述并创建其他章节：

"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"

为每章添加链接

<body>

<h1>Philosopy</h1>
<h3>Table of Contents</h3>

<p>
<a href="philosophy_chapter1.htm">1. Metaphysics</a>
</p>

<p>
<a href="philosophy_chapter2.htm">2. Epistemology</a>
</p>

<p>
<a href="philosophy_chapter3.htm">3. Logics</a>
</p>

<p>
<a href="philosophy_chapter5.htm">4. Ethics</a>
</p>

<p>
<a href="philosophy_chapter4.htm">5. Aesthetics</a>
</p>

</body>
亲自试一试 »

❮ 上一节 下一节 ❯