如何 - 製作一個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.tw/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>
自己動手試一試 »
