html旅遊網頁制作，用 HTML 和 CSS 實現
下面是一個簡單的html旅遊網頁制作示例代碼，使用 HTML 和 CSS 實現頁面樣式和布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旅遊網站</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #555;
color: #fff;
padding: 10px;
text-align: center;
}
main {
background-color: #fff;
padding: 20px;
margin: 10px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>旅遊網站</h1>
</header>
<nav>
<a href="#">home
</a> |
<a href="#">景點</a> |
<a href="#">住宿</a> |
<a href="#">交通</a> |
<a href="#">聯系我們</a>
</nav>
<main>
<h2>熱門景點</h2>
<p>這裏介紹一些熱門的旅遊景點，並提供相關的信息和預訂鏈接。</p>
<ul>
<li><a href="#">北京故宮</a></li>
<li><a href="#">上海外灘</a></li>
<li><a href="#">西安兵馬俑</a></li>
</ul>
</main>
<footer>
© 2021 旅遊網站
</footer>
</body>
</html>代碼元素解釋：
- `<!DOCTYPE html>`：文檔類型聲明，告訴瀏覽器當前文檔使用的是 HTML5 規範。
- `<html>`：HTML 頁面的根元素，包含整個頁面的內容。
- `<head>`：頁面頭部，包含元數據和其他引用信息。
- `<meta>`：用於設置頁面的元數據，如字符集、關鍵詞等。
- `<title>`：頁面標題，顯示在瀏覽器的標簽欄上。
- `<style>`：用於設置頁面的樣式和布局。
- `<body>`：頁面的主要內容部分。
- `<header>`：頁面頭部，通常包含網站標誌、主導航等元素。
- `<nav>`：頁面導航欄，通常包含站點鏈接和其他導航元素。
- `<main>`：頁面的主要內容，通常包含文章、圖片和其他相關信息。
- `<h1>`、`<h2>`：標頭元素，用於顯示不同級別的標題文本。
- `<p>`：段落元素，用於顯示文本內容。
- `<ul>`、`<li>`：列表元素，用於顯示有序或無序列表。
- `<a>`：超鏈接元素，用於創建頁面內或頁面間的鏈接。
- `<footer>`：頁面尾部，通常包含版權信息、聯系方式等元素。
效果截圖：
