制作 HTML 书籍网站
创建于 2024-12-03 /
27
字体：
[默认]
[大]
[更大]
了解如何创建适用于所有设备、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>可见内容的开头和结尾<h1> </h1>标题的开头和结尾<p> </p>段落的开头和结尾
上面解释的代码是 HTML 标签。
HTML 标签用于定义 HTML 文档的内容。
标签以 <（小于号）开头，以 >（大于号）。
这样 <p> 和 </p> 用于标记段落的开头和结尾。
注释:如果您想详细学习 HTML，请阅读我们的 HTML 教程。
为了完全正确，应该在<html>标签中添加一个语言属性来定义书中使用的语言:
添加以下元信息将使您的图书在所有设备、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> 元素内，添加目录:
<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.w3ccoo.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".
使用的名称由您决定。
不管怎样，像上面那样继续创建其他章节:
"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> 亲自试一试 »
0 人点赞过
