HTML5是最新的HTML標準，它引入了許多新的特性和功能，使得創建靜態網頁變得更加簡單和高效。本文將介紹如何使用HTML5來制作一個簡單的靜態網頁。
1. 創建HTML文檔結構
首先，我們需要創建一個基本的HTML文檔結構。這包括`<!DOCTYPE html>`聲明、`<html>`標簽、`<head>`標簽和`<body>`標簽。
<!DOCTYPE html>
<html lang=”zh”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>我的靜態網頁</title>
</head>
<body>
</body>
</html>
2. 添加基本元素
在`<body>`標簽內，我們可以添加各種HTML5元素來構建網頁的內容。以下是一些常用的HTML5元素：
– `<header>`：頁面的頭部，通常包含網站的標題、導航菜單等。
– `<nav>`：導航菜單，用于鏈接到網站的不同部分。
– `<main>`：頁面的主要內容區域。
– `<section>`：頁面的一個獨立部分，可以包含標題、段落、圖片等。
– `<article>`：一個獨立的、可重用的內容塊，如博客文章或新聞故事。
– `<aside>`：與內容相關的額外信息，通常放在內容旁邊。
– `<footer>`：頁面的底部，通常包含版權信息、聯系信息等。
例如，我們可以使用以下代碼創建一個包含導航菜單和主要內容區域的簡單頁面：
<!DOCTYPE html>
<html lang=”zh”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>我的靜態網頁</title>
</head>
<body>
<header>
<h1>歡迎來到我的網站</h1>
</header>
<nav>
<ul>
<li><a href=”#section1″>部分1</a></li>
<li><a href=”#section2″>部分2</a></li>
</ul>
</nav>
<main>
<section id=”section1″>
<h2>部分1標題</h2>
<p>這是部分1的內容。</p>
</section>
<section id=”section2″>
<h2>部分2標題</h2>
<p>這是部分2的內容。</p>
</section>
</main>
<footer>
<p>版權所有 © 2022 我的網站</p>
</footer>
</body>
</html>
3. 添加樣式和交互
為了使網頁更具吸引力和易用性，我們可以使用CSS來添加樣式，以及JavaScript來實現交互效果。以下是一些常用的CSS和JavaScript特性：
– CSS選擇器：用于選擇HTML元素并應用樣式。例如，`h1`選擇器會選擇所有的一級標題元素。
– CSS屬性：用于設置元素的樣式，如字體大小、顏色、背景色等。例如，`font-size: 24px;`設置字體大小為24像素。
– CSS布局：用于控制元素的排列和定位，如浮動、定位、盒模型等。例如，`float: left;`使元素向左浮動。
– JavaScript事件：用于處理用戶與網頁的交互，如點擊、滾動、鍵盤輸入等。例如，`addEventListener(‘click’, function() {…});`監聽點擊事件并在點擊時執行函數。
通過學習和實踐，你可以掌握更多的HTML5特性和技巧，從而創建出更加豐富和動態的靜態網頁。
